/* The shared look of every MICP demo page (companion, travel, scribe) and the Why MICP window.
   Loaded in <head> so the first paint is already in this style. */
/* the Why MICP window, in the landing page's style: grey paper, near-black ink, small type, hairlines */
.why-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(31,31,31,.35); backdrop-filter: blur(4px);
               display: flex; align-items: center; justify-content: center; padding: 16px; }
.why-overlay[hidden] { display: none; }
.why-modal { position: relative; background: #efefef; color: #1f1f1f; max-width: 760px; width: 100%; max-height: calc(100vh - 32px);
             overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.18); font-family: Lato, Calibri, Carlito, system-ui, sans-serif; }
.why-modal * { font-family: inherit; }
.why-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border: 0; background: none; color: #8a8a8a;
             font-size: 22px; font-weight: 300; line-height: 1; cursor: pointer; }
.why-close:hover { color: #1f1f1f; }
.why-hero { padding: 44px 48px 32px; border-bottom: 1px solid #bdbdbd; background: #fff !important; }
.why-eyebrow { font-size: 10px; letter-spacing: .3em; text-transform: lowercase; color: #8a8a8a; }
.why-hero h2 { margin: 18px 40px 16px 0; font-size: 26px; font-weight: 400; line-height: 1.3; letter-spacing: -.005em; color: #1f1f1f; }
.why-hero h2 em { font-style: normal; color: #1f1f1f; font-weight: 700; }
.why-hero p { margin: 0; font-size: 14px; line-height: 1.7; color: #1f1f1f; max-width: 620px; }
.why-body { padding: 32px 48px 40px; display: grid; gap: 36px; }
.why-h { font-size: 10px; font-weight: 400; letter-spacing: .3em; text-transform: lowercase; color: #8a8a8a; margin: 0 0 14px; }
.why-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.why-grid th { font-size: 11px; font-weight: 400; color: #8a8a8a; padding: 0 8px 12px; text-align: center; vertical-align: bottom; width: 19%;
               border-bottom: 1px solid #1f1f1f; line-height: 1.4; }
.why-grid th:first-child { width: auto; padding-left: 0; }
.why-grid th.why-th-h { text-align: left; font-size: 10px; letter-spacing: .3em; text-transform: lowercase; }
.why-grid th.us span { color: #1f1f1f; font-weight: 700; font-size: 12px; letter-spacing: .1em; }
.why-grid td { padding: 12px 8px; border-bottom: 1px solid #d6d6d6; text-align: center; color: #bdbdbd; }
.why-grid td:first-child { text-align: left; color: #1f1f1f; padding-left: 0; }
.why-grid .soft { font-size: 11px; color: #8a8a8a; }
.yes { color: #8a8a8a; } .yes.us-yes { color: #1f1f1f; font-weight: 700; }
.why-key { margin-top: 24px; border-left: 1px solid #1f1f1f; padding: 2px 0 2px 18px; font-size: 13px; line-height: 1.7; color: #3a3a3a; }
.why-key b { display: block; color: #1f1f1f; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.why-scope { border-left-color: #bdbdbd; color: #8a8a8a; }
.why-lead { font-size: 13px; color: #3a3a3a; margin: 0 0 16px; line-height: 1.6; }
.why-uses { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #d6d6d6; }
.why-use { padding: 12px 16px 12px 0; border-bottom: 1px solid #d6d6d6; }
.why-use b { display: block; font-size: 13px; font-weight: 400; color: #1f1f1f; margin-bottom: 2px; }
.why-use span { font-size: 12px; line-height: 1.5; color: #8a8a8a; }
.why-use.live b { font-weight: 700; }
.why-use .tag { margin-left: 8px; font-size: 9px; font-weight: 400; letter-spacing: .3em; text-transform: lowercase; color: #8a8a8a; }
.why-audit { display: flex; gap: 16px; align-items: flex-start; background: #1f1f1f !important; padding: 24px 26px !important; }
.why-audit-icon { flex: 0 0 auto; color: #efefef; }
.why-audit-text b { display: block; color: #efefef; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.why-audit-text span { font-size: 13px; line-height: 1.6; color: #bdbdbd; }
.why-audit-chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.why-audit-chips code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #8a8a8a; }
.why-band, .why-key, .why-use, .why-use.live, .why-grid td.us { background: none; border-radius: 0; }
.why-band { margin: 0; padding: 0; border: 0; }
.why-grid th.us span { background: none; padding: 0; border-radius: 0; }
.why-use .tag { background: none; padding: 0; border-radius: 0; }
.why-use, .why-use.live { border: 0; border-bottom: 1px solid #d6d6d6; }
.why-audit { color: #bdbdbd; border-radius: 0; }
.why-audit-icon { background: none; width: auto; height: auto; border-radius: 0; }
.why-audit-chips code { background: none; border: 0; padding: 0; }
@media (max-width: 600px) { .why-hero { padding: 40px 22px 24px; } .why-body { padding: 24px 22px 32px; }
  .why-hero h2 { font-size: 21px; } .why-uses { grid-template-columns: 1fr; } .why-grid { font-size: 12px; } }
/* The demo pages in the landing page's style: grey paper, near-black ink, Lato, square corners, hairlines, no shadows.
   The colours that carry meaning (risk bar, decisions, the scribe's highlights) stay. */
body { background: #efefef !important; color: #1f1f1f; font-family: Lato, Calibri, Carlito, system-ui, sans-serif !important; }
body *:not(code):not(pre):not(.term-body):not(.term-body *):not(.mono) { font-family: inherit; }
button, input, textarea, select { font-family: Lato, Calibri, Carlito, system-ui, sans-serif !important; }
.logo-circle { width: 22px !important; height: 22px !important; border: 1px solid #1f1f1f !important; font-size: 10px !important;
               font-weight: 400 !important; background: none !important; }
.logo-text span, header .logo b { font-size: 11px !important; font-weight: 400 !important; letter-spacing: .3em !important;
                                  text-transform: none !important; color: #3a3a3a; }
.why-btn, .console-toggle, .case, .tab, .tool, .code-go, .pop .acts button, .chip, .console-demos .demo, .send-button, .send {
  border-radius: 0 !important; box-shadow: none !important; font-weight: 400 !important; letter-spacing: .02em !important; }
.why-btn, .console-toggle { background: transparent !important; border: 1px solid #1f1f1f !important; color: #1f1f1f !important;
                            font-size: 12px !important; }
.why-btn:hover, .console-toggle:hover { background: #1f1f1f !important; color: #efefef !important; }
body.console-open .console-toggle { background: #1f1f1f !important; color: #efefef !important; }
.console-demos .demo, .case, .tab, .tool, .code-go, .chip { background: transparent !important; border: 1px solid #bdbdbd !important;
                                                          color: #1f1f1f !important; font-size: 12px !important; }
.console-demos .demo:hover:not(:disabled), .case:hover, .tab:hover, .tool:hover, .code-go:hover { border-color: #1f1f1f !important; }
.console-demos .demo.active, .case.on, .tab.on, .pop .acts button.primary { background: #1f1f1f !important; border-color: #1f1f1f !important;
                                                                            color: #efefef !important; }
.langs { border-radius: 0 !important; border-color: #1f1f1f !important; } .lang { background: transparent !important; font-weight: 400 !important; }
.lang.on { background: #1f1f1f !important; color: #efefef !important; }
.chat-shell, .panel-light, .panel, .info-box, .pop { background: #f7f7f7 !important; border: 1px solid #d6d6d6 !important;
                                                     border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.chat-header, .ph, .input-container { background: transparent !important; border-color: #d6d6d6 !important; }
.chat-title, .ph > b { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.005em !important;
                       text-transform: none !important; color: #1f1f1f !important; }
.demos-label { font-weight: 700 !important; letter-spacing: 0 !important; }
.message-content, .thinking-content, .msg { border-radius: 10px !important; box-shadow: none !important; }
.message-content, .thinking-content, .msg.scribe { background: #fff !important; border: 1px solid #d6d6d6 !important; color: #1f1f1f; }
.message.user .message-content, .msg.doctor { background: #1f1f1f !important; border-color: #1f1f1f !important; color: #efefef !important; }
.message.system .message-content, .msg.system { background: transparent !important; border: 1px dashed #bdbdbd !important; color: #8a8a8a !important; }
.message.ai.asks .message-content { border-color: #1f1f1f !important; background: #fff !important; }
.avatar-circle { border-width: 1px !important; }
.message.ai .avatar-circle { background: #1f1f1f !important; border-color: #1f1f1f !important; }
.input-field, .compose textarea, .code-in { border-radius: 0 !important; border: 1px solid #bdbdbd !important; background: #fff !important;
                                            box-shadow: none !important; }
.input-field:focus, .compose textarea:focus { outline: none !important; border-color: #1f1f1f !important; }
.send-button, .send { background: #1f1f1f !important; color: #efefef !important; border: 0 !important; }
.panel-dark, .terminal-pane { background: #1f1f1f !important; border: 1px solid #1f1f1f !important; border-radius: 0 !important;
                              box-shadow: none !important; }
.term-bar { background: #1f1f1f !important; border-bottom: 1px solid #3a3a3a !important; }
.term-dot { display: none !important; }
.term-title { margin-left: 0 !important; font-size: 10px !important; letter-spacing: .3em !important; color: #8a8a8a !important; }
.nda-card { border-radius: 0 !important; }
.foot-row, .session-info { color: #8a8a8a !important; }
.info-links a, .src-links a, #dlChat, .chat-header a, .chat-header button { color: #1f1f1f !important; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.title-ic { width: 20px; height: 20px; margin-right: 9px; vertical-align: -4px; fill: none; stroke: #1f1f1f; stroke-width: 1.5;
            stroke-linecap: round; stroke-linejoin: round; }
.use-btn { text-decoration: none; } .use-btn span { font: inherit; }
@media (max-width: 600px) { .use-btn .long { display: none; } }
@media (max-width: 440px) { .header-right { gap: 6px !important; } .logo-text, header .logo b { display: none; } }
/* the chat itself on white; the side panels stay on the grey */
.chat-shell, .panel { background: #fff !important; }
/* the consoles' logs stay in a monospace face, with the level label on one line */
#term, #term *, .term-body, .term-body * { font-family: ui-monospace, Menlo, Consolas, monospace !important; }
.lv { white-space: nowrap; }