/* NCI-owned reconstruction of the established three-panel design language. */
section.ncli-panel { --ncli-max: 48rem; --ncli-bg: #fff; --ncli-ink: #111; --ncli-muted: #555; --ncli-rule: #b7b7b7; --ncli-surface: #eee; --ncli-hover: #eee; --ncli-accent: #111; --ncli-on-accent: #fff; --ncli-radius: 0; --ncli-frame-border: 1px solid var(--ncli-ink); --ncli-frame-pad: 1.5rem; --ncli-body-font: Arial, Helvetica, sans-serif; --ncli-head-font: Georgia, serif; --ncli-head-weight: 400; box-sizing: border-box; display: block; width: 100%; max-width: var(--ncli-max); margin: 2rem auto; padding: 0; border: 0; border-radius: var(--ncli-radius); background: var(--ncli-bg); color: var(--ncli-ink); font-family: var(--ncli-body-font); font-size: 16px; line-height: 1.5; text-align: left; }
section.ncli-panel *, section.ncli-panel *::before, section.ncli-panel *::after { box-sizing: border-box; }
section.ncli-panel--minimal { --ncli-ink: #1f2937; --ncli-muted: #6b7280; --ncli-rule: #e5e7eb; --ncli-surface: #f3f4f6; --ncli-hover: #f3f4f6; --ncli-accent: #2563eb; --ncli-radius: 14px; --ncli-frame-border: 0; --ncli-frame-pad: 1.25rem; --ncli-body-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ncli-head-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ncli-head-weight: 650; }
section.ncli-panel--dark { --ncli-bg: #0f1115; --ncli-ink: #e8eaed; --ncli-muted: #9aa3b2; --ncli-rule: #2d3340; --ncli-surface: #1a1e27; --ncli-hover: #222836; --ncli-accent: #7dd3fc; --ncli-on-accent: #0b1220; --ncli-radius: 12px; --ncli-frame-border: 1px solid var(--ncli-rule); --ncli-frame-pad: 1.5rem; --ncli-body-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ncli-head-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ncli-head-weight: 650; }
.ncli-panel .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.ncli-panel__frame { margin: 0; padding: var(--ncli-frame-pad); border: var(--ncli-frame-border); border-radius: var(--ncli-radius); background: transparent; }
.ncli-panel__header { margin: 0; padding: 0 0 1rem; border-bottom: 1px solid var(--ncli-rule); }
.ncli-panel__title { margin: 0; padding: 0; color: var(--ncli-ink); font: var(--ncli-head-weight) clamp(1.75rem, 4.5vw, 2.75rem)/1.08 var(--ncli-head-font); }
.ncli-panel__headline { margin: .5rem 0 0; color: var(--ncli-ink); font: 400 .95rem/1.45 var(--ncli-body-font); }
.ncli-panel__introduction { margin: .75rem 0 0; color: var(--ncli-muted); font: 400 .95rem/1.5 var(--ncli-body-font); }
.ncli-panel__form { margin: 1.25rem 0 0; padding: 0; }
.ncli-panel__transcript:empty, .ncli-panel__status:empty { display: none; }
.ncli-panel__input-shell { display: flex; gap: .5rem; min-height: 48px; }
.ncli-panel textarea { flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: .75rem; resize: vertical; border: 1px solid var(--ncli-rule); border-radius: var(--ncli-radius); background: var(--ncli-bg); box-shadow: none; color: var(--ncli-ink); font: inherit; font-size: 1rem; line-height: 1.4; }
.ncli-panel textarea::placeholder { color: var(--ncli-muted); opacity: 1; }
.ncli-panel textarea:focus { outline: 3px solid var(--ncli-focus, var(--ncli-accent)); outline-offset: -3px; border-color: var(--ncli-focus, var(--ncli-accent)); }
.ncli-panel button[type="submit"] { flex: 0 0 48px; min-height: 48px; margin: 0; padding: 0; border: 0; border-radius: var(--ncli-radius); background: var(--ncli-accent); box-shadow: inset 0 0 0 1px var(--ncli-edge, transparent); color: var(--ncli-on-accent); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.ncli-panel button[type="submit"]:hover, .ncli-panel button[type="submit"]:focus-visible { filter: brightness(1.15); outline: 3px solid var(--ncli-focus, var(--ncli-accent)); outline-offset: 2px; }
.ncli-panel button:disabled, .ncli-panel textarea:disabled { opacity: .55; cursor: not-allowed; }
.ncli-panel__reset { display: inline-block; margin: .75rem 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ncli-ink); font: 700 .72rem/1 var(--ncli-body-font); letter-spacing: .08em; text-decoration: underline; text-transform: uppercase; cursor: pointer; }
.ncli-panel__reset[hidden] { display: none; }
.ncli-panel__status { max-width: 46rem; margin: .75rem 0 0; color: var(--ncli-muted); font-size: .95rem; line-height: 1.5; }
.ncli-panel__transcript { overflow: visible; margin: 1.25rem 0 0; }
.ncli-panel__turn { display: grid; gap: .6rem; margin: 0 0 .9rem; padding: 0; border: 0; background: transparent; color: var(--ncli-ink); font-size: .95rem; line-height: 1.5; scroll-margin-bottom: 1rem; }
.ncli-panel__question { margin: 0; padding: .85rem 1rem; border: 1px solid var(--ncli-q-rule, var(--ncli-rule)); border-radius: var(--ncli-radius); background: var(--ncli-q-bg, var(--ncli-surface)); color: var(--ncli-q-ink, var(--ncli-ink)); font-weight: 400; overflow-wrap: anywhere; }
.ncli-panel__answer { margin: 0; padding: 1rem; border: 1px solid var(--ncli-a-rule, var(--ncli-rule)); border-radius: var(--ncli-radius); background: var(--ncli-a-bg, var(--ncli-bg)); color: var(--ncli-a-ink, inherit); overflow-wrap: anywhere; }
.ncli-panel__answer--pending { color: var(--ncli-muted); }
.ncli-panel__answer > :first-child { margin-top: 0; }
.ncli-panel__answer > :last-child { margin-bottom: 0; }
.ncli-panel__answer p { margin: .55rem 0; }
.ncli-panel__answer h3, .ncli-panel__answer h4, .ncli-panel__answer h5, .ncli-panel__answer h6 { margin: .95rem 0 .35rem; color: var(--ncli-a-ink, var(--ncli-ink)); font-family: var(--ncli-heading-font); line-height: 1.2; }
.ncli-panel__answer h3 { font-size: 1.12rem; }
.ncli-panel__answer h4, .ncli-panel__answer h5, .ncli-panel__answer h6 { font-size: 1rem; }
.ncli-panel__answer ul, .ncli-panel__answer ol { margin: .55rem 0; padding-left: 1.35rem; }
.ncli-panel__answer li + li { margin-top: .2rem; }
.ncli-panel__answer blockquote { margin: .75rem 0; padding: .1rem 0 .1rem .85rem; border-left: 3px solid var(--ncli-accent); color: var(--ncli-muted); }
.ncli-panel__answer blockquote p { margin: .35rem 0; }
.ncli-panel__answer pre { overflow-x: auto; margin: .75rem 0; padding: .7rem; border: 1px solid var(--ncli-rule); border-radius: calc(var(--ncli-radius) / 2); background: rgba(17, 24, 39, .06); font: .85em/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.ncli-panel__answer code { padding: .08em .25em; border-radius: 3px; background: rgba(17, 24, 39, .08); font: .9em ui-monospace, SFMono-Regular, Consolas, monospace; }
.ncli-panel__answer pre code { padding: 0; background: transparent; }
.ncli-panel__answer hr { margin: .9rem 0; border: 0; border-top: 1px solid var(--ncli-rule); }
.ncli-panel__footer { display: flex; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--ncli-rule); color: var(--ncli-muted); font: 700 .72rem/1.35 var(--ncli-body-font); letter-spacing: .08em; text-transform: uppercase; }
.ncli-panel__credit { margin: .6rem 0 0; color: var(--ncli-muted); font: 400 .78rem/1.4 var(--ncli-body-font); text-align: right; }
.ncli-panel__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ncli-panel__credit a:focus-visible { outline: 3px solid var(--ncli-focus, var(--ncli-accent)); outline-offset: 2px; }
.ncli-limit-notice { max-width: var(--ncli-max); margin: 1rem auto; color: #3c434a; font-size: .95rem; }
@media (max-width: 600px) { .ncli-panel__frame { padding: 1.25rem; } .ncli-panel__footer { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .ncli-panel *, .ncli-panel *::before, .ncli-panel *::after { scroll-behavior: auto; transition: none !important; } }
.ncli-panel__sources { margin-top: .85rem; padding-top: .65rem; border-top: 1px solid var(--ncli-rule); font-size: .9em; }
.ncli-panel__sources-title { margin: 0 0 .3rem; font-weight: 600; color: var(--ncli-muted); }
.ncli-panel__sources-list { margin: 0; padding-left: 1.2rem; }
.ncli-panel__sources-list li { margin: .2rem 0; }
.ncli-panel__sources-list a { overflow-wrap: anywhere; }