/* KIMSE: single real-app composition for 450x800 video and narrow mobile.
 * Extend existing Tabler/senior design primitives rather than maintaining a fake filming UI.
 * Content remains reachable by scrolling / disclosure; do not crop medical explanations.
 */
.kimse-app, .kimse-app .page, .kimse-app .page > * { min-width:0; }
.kimse-app img, .kimse-app svg { max-width:100%; }
.kimse-app .page-title, .kimse-app .page-desc,
.kimse-app .research-personal-note, .kimse-app .screen-footnote {
  word-break:keep-all; overflow-wrap:break-word;
}
.kimse-app .hero-actions > *, .kimse-app .card-grid > *,
.kimse-app .research-factor-row > * { min-width:0; }

/* Evidence is a real user screen, not a slide: concise four-signal summary first.
 * Original study details are accessible to every user with <details>. */
.screen-evidence-proof .kimse-evidence-references {
  margin:12px 0 14px; padding:0; border:1px solid #d3e3de;
  border-radius:17px; background:#fff; overflow:hidden;
}
.screen-evidence-proof .kimse-evidence-references > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:10px; padding:14px 15px;
  min-height:76px; color:#153f34;
}
.screen-evidence-proof .kimse-evidence-references > summary::-webkit-details-marker { display:none; }
.screen-evidence-proof .kimse-evidence-references > summary > span:first-child { min-width:0; }
.screen-evidence-proof .kimse-evidence-references > summary strong,
.screen-evidence-proof .kimse-evidence-references > summary small { display:block; line-height:1.35; }
.screen-evidence-proof .kimse-evidence-references > summary strong { font-size:17px; font-weight:850; }
.screen-evidence-proof .kimse-evidence-references > summary small { font-size:14px; color:#547065; margin-top:4px; }
.screen-evidence-proof .kimse-source-open { flex:0 0 auto; font-size:14px; font-weight:800; color:#137455; }
.screen-evidence-proof .kimse-evidence-references[open] .kimse-source-open i { display:inline-block; transform:rotate(180deg); }
.screen-evidence-proof .kimse-evidence-references .evidence-story-list { margin:0 12px 13px; padding-top:12px; border-top:1px solid #e5eee9; }
.screen-evidence-proof .kimse-evidence-references > summary:focus-visible { outline:3px solid #155bba; outline-offset:-3px; }

/* Use the same responsive hierarchy on an actual phone and in the 450px recorder.
 * The outer desktop viewport must not select a desktop layout inside the recorder. */
@media(max-width:520px) {
  .screen-evidence-proof .evidence-signals { gap:8px!important; margin:10px 0 14px!important; }
  .screen-evidence-proof .evidence-signal { min-width:0; padding:11px 12px!important; }
  .screen-evidence-proof .evidence-section-title { margin:12px 0 7px!important; }
  .screen-evidence-proof .evidence-study-intro { margin-bottom:8px!important; }
  .screen-research-engine .research-source-stack { grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important; }
  .screen-research-engine .research-source { display:flex!important;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;gap:5px!important;min-width:0;min-height:88px!important;padding:10px 6px!important; }
  .screen-research-engine .research-source i { font-size:22px!important; }
  .screen-research-engine .research-source small { font-size:13px!important;line-height:1.25!important; }
  .screen-research-engine .research-source strong { font-size:15px!important;line-height:1.3!important; }
  .screen-research-engine .research-review-gate { grid-template-columns:28px minmax(0,1fr)!important; padding:10px 12px!important; }
  .screen-research-engine .research-review-gate span { grid-column:2!important; }
  .screen-research-engine .research-personal-engine { gap:7px!important; margin:8px 0!important; }
  .screen-research-engine .research-factor-panel { padding:11px 12px!important; }
  .screen-research-engine .research-factor-row { margin-top:6px!important;gap:6px!important; }
  .screen-research-engine .research-factor-row em { font-size:14px!important; padding:5px 9px!important; }
  .screen-brain-map .brain-domain-tabs { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;overflow:visible!important;margin:7px 0 9px!important; }
  .screen-brain-map .brain-domain-tabs > button { grid-column:auto!important;min-width:0!important;
    min-height:48px!important;padding:7px 5px!important;font-size:14px!important;line-height:1.25!important;white-space:normal!important; }
  .screen-brain-map .brain-domain-tabs > button span { font-size:17px!important; }
  .screen-brain-map .brain-visual { height:195px!important;max-height:195px!important; }
  .screen-brain-map .brain-map-stage { padding:11px 12px!important; }
  .screen-brain-map .brain-focus-summary { padding:10px 12px!important;margin:8px 0!important; }
  .screen-brain-trends .trend-domain-tabs { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;overflow:visible!important; }
  .screen-brain-trends .trend-domain-tabs button { min-width:0!important;width:100%!important;min-height:44px!important;padding:7px 5px!important;font-size:14px!important;white-space:normal!important; }
  .screen-brain-trends .overall-trend { height:205px!important; }
  .screen-caregiver-home .kimse-caregiver-quick .card-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .screen-consent .kimse-consent-options { min-width:0; }
}
.capture-frame-mode .screen-evidence-proof .evidence-signals { gap:8px!important;margin:10px 0 14px!important; }
.capture-frame-mode .screen-evidence-proof .evidence-signal { min-width:0;padding:11px 12px!important; }
.capture-frame-mode .screen-evidence-proof .evidence-section-title { margin:12px 0 7px!important; }
.capture-frame-mode .screen-evidence-proof .evidence-study-intro { margin-bottom:8px!important; }
.capture-frame-mode .screen-research-engine .research-source-stack { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important; }
.capture-frame-mode .screen-research-engine .research-source { display:flex!important;flex-direction:column!important;justify-content:center;align-items:center;text-align:center;gap:5px!important;min-width:0;min-height:88px!important;padding:10px 6px!important; }
.capture-frame-mode .screen-research-engine .research-source i { font-size:22px!important; }
.capture-frame-mode .screen-research-engine .research-source small { font-size:13px!important; }
.capture-frame-mode .screen-research-engine .research-source strong { font-size:15px!important; }
.capture-frame-mode .screen-research-engine .research-review-gate { grid-template-columns:28px minmax(0,1fr)!important;padding:10px 12px!important; }
.capture-frame-mode .screen-research-engine .research-personal-engine { gap:7px!important;margin:8px 0!important; }
.capture-frame-mode .screen-research-engine .research-factor-panel { padding:11px 12px!important; }
.capture-frame-mode .screen-research-engine .research-factor-row { margin-top:6px!important; }
.capture-frame-mode .screen-brain-map .brain-domain-tabs { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;overflow:visible!important;margin:7px 0 9px!important; }
.capture-frame-mode .screen-brain-map .brain-domain-tabs > button { grid-column:auto!important;min-height:48px!important;min-width:0!important;padding:7px 5px!important;font-size:14px!important;white-space:normal!important; }
.capture-frame-mode .screen-brain-map .brain-visual { height:195px!important;max-height:195px!important; }
.capture-frame-mode .screen-brain-map .brain-map-stage { padding:11px 12px!important; }
.capture-frame-mode .screen-brain-map .brain-focus-summary { padding:10px 12px!important;margin:8px 0!important; }
.capture-frame-mode .screen-brain-trends .trend-domain-tabs { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;overflow:visible!important; }
.capture-frame-mode .screen-brain-trends .trend-domain-tabs button { width:100%!important;min-width:0!important;min-height:44px!important;padding:7px 5px!important;font-size:14px!important;white-space:normal!important; }
.capture-frame-mode .screen-brain-trends .overall-trend { height:205px!important; }
.capture-frame-mode .screen-caregiver-home .kimse-caregiver-quick .card-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }

/* For real screens use native scrolling (not hidden controls), with a predictable
 * top viewport and no horizontal page motion. */
@media(max-width:520px) {
 .kimse-app { overflow-x:clip; }
 .kimse-app .page { width:100%;min-width:0;padding-inline:16px; }
 .kimse-app .page .context-chip, .kimse-app .page .research-source { max-width:100%; }
}
.capture-frame-mode .kimse-app { overflow-x:hidden!important; }
.capture-frame-mode .page { max-width:100%!important; min-width:0!important; }
@media(min-width:521px) {
  .capture-frame-mode .kimse-app { box-shadow:0 18px 50px rgba(25,50,92,.20); }
}
@media(prefers-reduced-motion:reduce) {
 .kimse-evidence-references .kimse-source-open i { transition:none; }
}

/* Monitoring: next action remains visible; supporting rationale is expandable. */
.screen-monitoring-status .kimse-stage-explanation { margin:8px 0 4px;padding:0;border-top:1px solid #e5ede9; }
.screen-monitoring-status .kimse-stage-explanation > summary { cursor:pointer;display:flex;align-items:center;min-height:45px;font-size:15px;font-weight:800;color:#165f4a; }
.screen-monitoring-status .kimse-stage-explanation[open] > .list-row { margin:0 0 9px;padding:9px 11px;border-radius:12px;background:#f4faf7; }
@media(max-width:520px) {
 .screen-monitoring-status .observation-stage-card { padding:13px 14px!important;margin:9px 0!important; }
 .screen-monitoring-status .observation-stage-card h2 { font-size:18px!important;line-height:1.25!important;margin:3px 0; }
 .screen-monitoring-status .observation-stage-card p { font-size:15px!important;line-height:1.45!important;margin:5px 0; }
 .screen-monitoring-status .observation-stage-card .list-row { padding:8px 10px;min-height:0; }
 .screen-monitoring-status .page-desc { font-size:15px!important;margin-bottom:8px!important; }
 .screen-monitoring-status .page-title { font-size:27px!important;line-height:1.19!important; }
 .screen-monitoring-status .monitoring-level-card { margin:9px 0!important;padding:11px 13px!important; }
}
.capture-frame-mode .screen-monitoring-status .observation-stage-card { padding:13px 14px!important;margin:9px 0!important; }
.capture-frame-mode .screen-monitoring-status .observation-stage-card h2 { font-size:18px!important;line-height:1.25!important; }
.capture-frame-mode .screen-monitoring-status .observation-stage-card p { font-size:15px!important;line-height:1.45!important;margin:5px 0!important; }
.capture-frame-mode .screen-monitoring-status .observation-stage-card .list-row { padding:8px 10px!important;min-height:0!important; }
.capture-frame-mode .screen-monitoring-status .page-desc { font-size:15px!important;margin-bottom:8px!important; }
.capture-frame-mode .screen-monitoring-status .page-title { font-size:27px!important;line-height:1.19!important; }
.capture-frame-mode .screen-monitoring-status .monitoring-level-card { margin:9px 0!important;padding:11px 13px!important; }

/* Accessibility at narrow widths and browser zoom: do not squeeze 3 columns
 * into a 220px equivalent viewport. Keep controls legible and tappable. */
@media(max-width:360px){
 .screen-research-engine .research-source-stack { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
 .screen-research-engine .research-source:last-child:nth-child(odd) { grid-column:1/-1; }
 .screen-brain-map .brain-domain-tabs,
 .screen-brain-trends .trend-domain-tabs { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media(max-width:260px){
 .screen-research-engine .research-source-stack,
 .screen-brain-map .brain-domain-tabs,
 .screen-brain-trends .trend-domain-tabs { grid-template-columns:minmax(0,1fr)!important; }
 .screen-research-engine .research-source:last-child:nth-child(odd) { grid-column:auto; }
 .screen-evidence-proof .kimse-evidence-references > summary { flex-wrap:wrap; }
 .screen-evidence-proof .kimse-source-open { flex-basis:100%; }
}
/* Video should not silently drop the caregiver header that real users see. */
.capture-frame-mode.real-app-capture-running #app:has(.screen-caregiver-home) .app-header { display:block!important; }
.capture-frame-mode.real-app-capture-running #app:has(.screen-caregiver-home) .screen-caregiver-home { padding-top:12px!important; }
.large-text .screen-evidence-proof .kimse-evidence-references > summary strong { font-size:20px!important; }
.large-text .screen-evidence-proof .kimse-evidence-references > summary small { font-size:17px!important; }
.high-contrast .screen-evidence-proof .kimse-evidence-references { border:2px solid #111; background:#fff; }

/* Real monitoring screen: no four-panel journey, essential content fits in the first fold. */
.screen-monitoring-status:has(>.kimse-monitoring-one-screen){max-width:560px!important;padding:13px 15px 20px!important}
.screen-monitoring-status .kimse-monitoring-one-screen{display:grid;gap:10px;min-width:0}
.screen-monitoring-status .kimse-one-screen-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.screen-monitoring-status .kimse-one-screen-kicker{font-size:16px!important;line-height:1.3;font-weight:800;color:#496d5e}
.screen-monitoring-status .kimse-one-screen-badge{flex-shrink:0;border:1px solid #cbded5;border-radius:999px;padding:5px 9px;font-size:16px!important;font-weight:850;line-height:1.25;color:#1d5949;background:#f0f7f3}
.screen-monitoring-status .kimse-one-screen-badge.level-warning,.screen-monitoring-status .kimse-one-screen-badge.level-danger{background:#fff4e8;border-color:#e4cdaa;color:#79551d}
.screen-monitoring-status .kimse-one-screen-badge.level-serious,.screen-monitoring-status .kimse-one-screen-badge.level-urgent{background:#fff0ed;border-color:#e8c5bc;color:#923d32}
.screen-monitoring-status .kimse-one-screen-headline.page-title{margin:0!important;font-size:clamp(23px,5.6vw,27px)!important;line-height:1.2!important;color:#123b39!important;letter-spacing:-.03em!important;word-break:keep-all;overflow-wrap:break-word}
.screen-monitoring-status .kimse-one-screen-intro{margin:0!important;color:#526b64;font-size:14px;line-height:1.45}
.screen-monitoring-status .kimse-one-screen-signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:3px 0 0}
.screen-monitoring-status .kimse-one-screen-signal{min-width:0;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;gap:7px;padding:13px 9px;border:1px solid #dae7df;border-radius:16px;background:#fffdfa}
.screen-monitoring-status .kimse-one-screen-name{font-size:14px;font-weight:850;line-height:1.35;color:#35594e;word-break:keep-all;overflow-wrap:break-word}
.screen-monitoring-status .kimse-one-screen-delta{font-size:24px;font-weight:900;letter-spacing:-.035em;line-height:1;color:#12413c;white-space:nowrap;font-variant-numeric:tabular-nums}
.screen-monitoring-status .kimse-one-screen-more{font-size:14px;line-height:1.4;color:#5d786e}
.screen-monitoring-status .kimse-one-screen-empty{padding:17px 12px;border-radius:16px;background:#eff8f2;font-size:15px;font-weight:800;color:#345b4e}
.screen-monitoring-status .kimse-one-screen-next{display:grid;gap:7px;margin:2px 0 0;padding:15px;border:1px solid #cddfd5;border-radius:18px;background:#eef7f1}
.screen-monitoring-status .kimse-one-screen-next-label{font-size:16px!important;line-height:1.3;font-weight:850;color:#537567}
.screen-monitoring-status .kimse-one-screen-advice{font-size:16px;line-height:1.4;font-weight:850;color:#173c33;word-break:keep-all;overflow-wrap:break-word}
.screen-monitoring-status .kimse-one-screen-links{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px;margin-top:3px}
.screen-monitoring-status .kimse-one-screen-links a{display:flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;padding:9px 8px;min-width:0;min-height:49px;font-size:15px;line-height:1.25;font-weight:850;border-radius:13px;word-break:keep-all}
.screen-monitoring-status .kimse-one-screen-primary{color:#fff;background:#155849}
.screen-monitoring-status .kimse-one-screen-secondary{color:#1b5140;background:#fff;border:1px solid #c0d8cc}
.screen-monitoring-status .kimse-monitoring-details{margin:13px 0 0;border-top:1px solid #d9e7df;padding:0}
.screen-monitoring-status .kimse-monitoring-details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:49px;padding:10px 4px;font-size:14px;font-weight:800;color:#33685a;cursor:pointer}
.screen-monitoring-status .kimse-monitoring-details>summary::-webkit-details-marker{display:none}
.screen-monitoring-status .kimse-monitoring-details>summary:after{content:'⌄';font-size:20px}
.screen-monitoring-status .kimse-monitoring-details[open]>summary:after{transform:rotate(180deg)}
.screen-monitoring-status .kimse-monitoring-details>.eyebrow,.screen-monitoring-status .kimse-monitoring-details>.page-title,.screen-monitoring-status .kimse-monitoring-details>.page-desc{display:none}
.screen-monitoring-status .kimse-monitoring-details .summary-card{margin:8px 0;padding:13px}
.screen-monitoring-status .kimse-monitoring-details .result-change-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:7px 0!important}
.screen-monitoring-status .kimse-monitoring-details .result-change{min-width:0!important}
.screen-monitoring-status .kimse-monitoring-details .monitoring-level-card{margin:8px 0!important}
.screen-monitoring-status .kimse-monitoring-details .monitoring-detail-link{display:flex;margin-top:8px!important}
.capture-frame-mode .screen-monitoring-status:has(>.kimse-monitoring-one-screen){padding:12px 15px!important}
@media(max-width:360px){.screen-monitoring-status .kimse-one-screen-delta{font-size:21px}.screen-monitoring-status .kimse-one-screen-signals{gap:6px}.screen-monitoring-status .kimse-one-screen-signal{padding:12px 8px}.screen-monitoring-status .kimse-one-screen-links a{font-size:14px}}
@media(max-width:260px){.screen-monitoring-status .kimse-one-screen-signals,.screen-monitoring-status .kimse-one-screen-links{grid-template-columns:1fr}.screen-monitoring-status .kimse-one-screen-signal{min-height:66px}.screen-monitoring-status .kimse-one-screen-meta{flex-wrap:wrap}}
.large-text .screen-monitoring-status .kimse-one-screen-advice{font-size:20px}
.high-contrast .screen-monitoring-status .kimse-one-screen-signal,.high-contrast .screen-monitoring-status .kimse-one-screen-next{background:#fff;border:2px solid #111;color:#111}

/* Keep the 200%-zoom trends controls within the narrow reading column. */
@media(max-width:260px){
 .screen-brain-trends .trend-filter-stack,
 .screen-brain-trends .compact-range,
 .screen-brain-trends .trend-domain-tabs{min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important}
 .screen-brain-trends .compact-range{grid-auto-flow:row!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-columns:minmax(0,1fr)!important}
 .screen-brain-trends .compact-range button,
 .screen-brain-trends .trend-domain-tabs button{min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
}

/* Reading layout wins over the film-only three-tile presentation on real phones.
   Research source names must remain readable in normal, large-text and contrast modes. */
@media(max-width:480px){
  .screen-research-engine .research-source-stack{grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
  .screen-research-engine .research-source{
    display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;
    align-items:center!important;justify-content:stretch!important;text-align:left!important;
    min-height:70px!important;gap:12px!important;padding:12px 15px!important;
  }
  .screen-research-engine .research-source i{font-size:27px!important}
  .screen-research-engine .research-source small{font-size:16px!important;line-height:1.35!important}
  .screen-research-engine .research-source strong{font-size:18px!important;line-height:1.35!important;overflow-wrap:anywhere}
}
@media(max-width:360px){
  .screen-research-engine .research-source-stack{grid-template-columns:minmax(0,1fr)!important}
  .screen-research-engine .research-source:last-child:nth-child(odd){grid-column:auto!important}
}
