/* Desktop experience — layout, density and affordances that only make sense with a
   pointer, a keyboard and a wide viewport. Layered over experience.css. Everything
   here is gated at >=1200px so phone and tablet keep the mobile-parity layout.
   No shared logic is touched: this file is presentation only. */

/* ---------- Desktop-only tokens ---------- */
@media (min-width:1200px){
 :root{
  --dt-rail:264px;          /* sidebar */
  --dt-list:400px;          /* master column in split views */
  --dt-measure:68ch;        /* reading measure for prose */
  --dt-gap:20px;
 }
}

/* =========================================================================
   1. SHELL — a real desktop chrome instead of a widened phone page
   ========================================================================= */
@media (min-width:1200px){
 .app-shell{grid-template-columns:var(--dt-rail) minmax(0,1fr)}
 .content-wrap{max-width:1560px;padding:24px 40px 64px}

 /* Sidebar gains grouping and a quieter rhythm. */
 .sidebar{padding:28px 18px 22px}
 .nav-section-label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);padding:18px 14px 6px;margin:0}
 .nav-item{padding:10px 14px;min-height:40px;gap:12px;font-size:14px}
 .nav-item .nav-count{margin-left:auto;font-size:11px;font-weight:800;color:var(--stone);
  background:var(--surface-subtle);border-radius:999px;padding:2px 8px;min-width:22px;text-align:center}
 .nav-item.active .nav-count{background:var(--button-fill);color:var(--button-text)}

 /* Topbar earns its 78px: context on the left, tools on the right. */
 .topbar{padding:0 40px;gap:20px;height:64px}
 .topbar-context{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
 .topbar-context .crumb{font-size:13px;color:var(--stone);white-space:nowrap}
 .topbar-context .crumb-sep{color:var(--sand)}
 .topbar-context .crumb-current{font-weight:750;color:var(--ink)}
 .global-search{order:0;flex:0 0 auto;min-width:300px;justify-content:flex-start;
  border:1px solid var(--sand);border-radius:999px;padding:0 14px;height:38px;cursor:pointer}
 .global-search:hover{border-color:var(--stone)}
 .global-search .kbd-hint{margin-left:auto;font-size:11px;font-weight:700;color:var(--stone);
  border:1px solid var(--sand);border-radius:6px;padding:1px 6px;background:var(--paper)}
}

/* =========================================================================
   2. TODAY — restore a composed grid instead of five stacked full-bleed slabs
   ========================================================================= */
@media (min-width:1200px){
 /* experience.css collapses this to display:block, which is the phone stack. */
 #view-today .dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--dt-gap);
  align-items:start;
 }
 #view-today .hero-panel{grid-column:1/-1}
 #view-today .ask-panel{grid-column:1/2;grid-row:span 2}
 #view-today .labs-panel{grid-column:2/3}
 #view-today .change-panel{grid-column:3/4}
 #view-today .brief-panel{grid-column:2/3}
 #view-today .care-panel{grid-column:3/4}
 #view-today .ask-composer{max-width:none}
 /* Dead decoration: renders at width 0 and display:none already. */
 #view-today .calm-panel{display:none}

 #today-attention{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--dt-gap)}
}

/* =========================================================================
   3. READING MEASURE — prose stops running the full 1376px
   ========================================================================= */
@media (min-width:1200px){
 .panel p:not(.semantic-label):not(.eyebrow):not(.panel-kicker),
 .attention-card>p:not(.semantic-label),
 .record-card p,.setting-card p,.first-record>p,
 .detail-summary p,.finding p,.modal-card>p{max-width:var(--dt-measure)}
 .hero-panel h2{max-width:20ch}
 .page-intro h1{max-width:16ch}
}

/* =========================================================================
   4. SPLIT VIEW — list left, detail docked right, instead of a modal that
      dims 1680px of screen to show an 820px sheet.
      Below 1200px the split collapses and the modal behaves exactly as before.
   ========================================================================= */
.split-body{display:block}
.split-detail{display:none}

@media (min-width:1200px){
 .split-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dt-gap);align-items:start}
 .split-body.has-detail{grid-template-columns:minmax(0,var(--dt-list)) minmax(0,1fr)}
 .split-list{min-width:0;display:grid;gap:var(--space-4);align-content:start}
 .split-detail{display:block;position:sticky;top:88px;max-height:calc(100vh - 112px);min-width:0}
 .split-detail[hidden]{display:none}
 .split-detail .modal-card.docked{width:100%;max-width:none;max-height:calc(100vh - 112px);
  overflow:auto;box-shadow:none;border:1px solid var(--sand);border-radius:var(--radius-card);padding:24px 28px}
 .split-detail .modal-card.docked .modal-close{position:sticky;float:right;top:0;right:0;margin-left:12px}
 .split-placeholder{border:1px dashed var(--sand);border-radius:var(--radius-card);padding:40px 28px;text-align:center}

 /* With the detail open the list becomes a column of rows, not a card grid. */
 .split-body.has-detail .record-grid,
 .split-body.has-detail .labs-grid:not(.as-table){grid-template-columns:minmax(0,1fr)}
 .split-body.has-detail .lab-big{font-size:24px;margin:8px 0 6px}

 .record-row.kb-active,.lab-card.kb-active{outline:2px solid var(--info-text);outline-offset:3px}
 .lab-table-row.kb-active td{background:var(--surface-subtle)}
}

/* =========================================================================
   5. LABS TABLE — dense, sortable, scannable. The view a wide screen earns.
   ========================================================================= */
.view-toggle{display:none}
@media (min-width:1200px){
 .view-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--sand);
  border-radius:999px;background:var(--surface-subtle);align-self:flex-end}
 .view-toggle button{min-height:34px;border:0;background:transparent;color:var(--stone);
  border-radius:999px;padding:0 16px;font-size:13px;font-weight:700;cursor:pointer}
 .view-toggle button.selected{background:var(--paper);color:var(--ink)}

 .labs-grid.as-table{display:block}
 .lab-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper);
  border:1px solid var(--sand);border-radius:var(--radius-card);overflow:hidden}
 .lab-table thead th{text-align:left;padding:0;border-bottom:1px solid var(--sand);
  background:var(--surface-subtle);position:sticky;top:64px;z-index:1}
 .lab-table .col-sort{width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:12px 16px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink);min-height:44px}
 .lab-table .col-sort:hover{background:var(--sand)}
 .lab-table td{padding:12px 16px;border-top:1px solid var(--sand);vertical-align:middle}
 .lab-table tbody tr{cursor:pointer}
 .lab-table tbody tr:hover td{background:var(--surface-subtle)}
 .lab-table .col-value{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
 .lab-table .col-ref,.lab-table .col-date{color:var(--stone);font-size:13px;white-space:nowrap}
 .lab-table .col-name{font-weight:650}
}

/* =========================================================================
   6. COMMAND PALETTE — ⌘K over records, results, terms and screens
   ========================================================================= */
.palette{display:none;position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.34);
 backdrop-filter:blur(8px);padding:12vh 24px 24px;justify-content:center}
.palette.open{display:flex}
.palette-card{width:min(680px,94vw);height:max-content;max-height:64vh;display:flex;flex-direction:column;
 background:var(--paper);border:1px solid var(--sand);border-radius:var(--radius-sheet);
 box-shadow:0 30px 100px rgba(0,0,0,.22);overflow:hidden}
.palette-card input{border:0;border-bottom:1px solid var(--sand);border-radius:0;
 height:60px;min-height:60px;padding:0 22px;font-size:17px;background:var(--paper);color:var(--ink)}
.palette-card input:focus{outline:none}
.palette-list{list-style:none;margin:0;padding:8px;overflow:auto;flex:1}
.palette-list li{display:flex;align-items:baseline;gap:12px;padding:11px 14px;border-radius:14px;cursor:pointer}
.palette-list li.active{background:var(--surface-subtle)}
.palette-kind{flex:0 0 66px;font-size:10px;font-weight:800;letter-spacing:.12em;
 text-transform:uppercase;color:var(--stone)}
.palette-label{flex:1;min-width:0;font-size:14px;font-weight:650;color:var(--ink);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-hint{flex:0 0 auto;font-size:12px;color:var(--stone)}
.palette-empty{color:var(--stone);font-size:14px;cursor:default}
.palette-foot{margin:0;padding:10px 20px;border-top:1px solid var(--sand);
 background:var(--surface-subtle);color:var(--stone);font-size:11px}
.palette-foot kbd{border:1px solid var(--sand);border-radius:5px;background:var(--paper);
 padding:1px 5px;margin-right:3px;font:inherit;font-size:10px;font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:1199px){.palette{display:none!important}}

/* =========================================================================
   7. LIST COLUMN DENSITY — with a detail open the list is ~400px, so the
      filter controls stack instead of being squeezed into three columns.
   ========================================================================= */
@media (min-width:1200px){
 .split-body.has-detail .records-toolbar{grid-template-columns:minmax(0,1fr);gap:12px;margin:16px 0 8px}
 .split-body.has-detail .record-row{grid-template-columns:32px minmax(0,1fr);gap:12px;row-gap:8px;align-items:start}
 .split-body.has-detail .record-row .record-type-icon{width:32px}
 .split-body.has-detail .record-row .record-identity{grid-column:2}
 .split-body.has-detail .record-row .record-status{grid-column:2;justify-self:start}
 .split-body.has-detail .record-row>.text-btn{grid-column:2;justify-self:start}
 .split-body.has-detail .record-list-heading{margin-top:4px}
 /* Without a detail the list should not stretch a three-field toolbar across 1336px. */
 .split-body:not(.has-detail) .split-list{max-width:1100px}
}