/* LISA.ai — shared shell (header + left nav rail + workspace frame) */

/* -------- F08: PROTOTYPE BANNER -------- */
/* One line, above everything, on every page. It is never part of the scaled
   1440x900 canvas, so it stays legible at every size instead of shrinking
   with it. .stage below is shortened by its height so nothing is pushed
   off-screen. */
/* The prototype banner was removed by request; --banner-h stays at 0 so every
   calc() that reserved space for it collapses cleanly instead of leaving a gap. */
:root { --banner-h: 0px; }
.proto-banner {
  position: fixed; top: 0; left: 0; right: 0; height: var(--banner-h);
  z-index: 200;
  background: #1a2236; color: var(--ink-inv-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  border-bottom: 1px solid #2b3448;
}

html, body { width: 100%; height: 100%; }
body {
  display: flex; align-items: center; justify-content: center;
  background: #0b1220;
}
.stage {
  width: 100vw; height: calc(100vh - var(--banner-h));
  margin-top: var(--banner-h);
  overflow: hidden;
  position: relative;
}
.app {
  width: 1440px;
  height: 900px;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: 52px 1fr;
  background: var(--workspace);
  overflow: hidden;
  /* Placed at the stage's top-left and positioned by shell.js (translate + scale),
     so it never depends on how a grid track happens to size itself. */
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  flex-shrink: 0;
}



/* -------- HEADER -------- */
.hdr {
  grid-column: 1 / -1;
  height: 52px;
  background: var(--header);
  color: var(--ink-inv);
  display: flex;
  align-items: center;
  padding: 0 14px 0 12px;
  gap: 16px;
  border-bottom: 1px solid #000;
  position: relative;
  z-index: 3;
  min-width: 0;
}
.hdr .brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hdr .brand .logo {
  width: 30px; height: 30px; border-radius: 5px;
  object-fit: contain; flex-shrink: 0; display: block;
}
.hdr .brand .name {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
}
.hdr .brand .tag {
  font-size: 10.5px; color: var(--ink-inv-2); font-weight: 400;
  border-left: 1px solid #2b3448; padding-left: 10px; margin-left: 2px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hdr .brand { min-width: 0; }

.hdr .mode {
  display: inline-flex; align-items: center;
  background: #0a1220; border: 1px solid #232c42; border-radius: 6px;
  padding: 2px; height: 28px;
}
.hdr .mode button {
  background: transparent; border: 0; color: var(--ink-inv-2);
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  padding: 0 10px; height: 22px; border-radius: 4px; cursor: pointer;
}
.hdr .mode button.active { background: #2b3448; color: #fff; }
.hdr .mode button.surge.active { background: #6d3906; color: #fde68a; }

.hdr .metrics {
  display: flex; align-items: center; gap: 16px;
  margin-left: 4px;
  flex-shrink: 0;
}
.hdr .metric {
  display: flex; flex-direction: column; gap: 1px; line-height: 1;
}
/* The simulation clock shares this row, so the labels must not wrap. */
.hdr .metric .k {
  font-size: 10px; color: #8a94ab; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.hdr .metric .v {
  font-family: var(--ff-mono); font-size: 15px; font-weight: 600; color: #fff;
}
.hdr .metric .v.warn { color: #fbbf24; }

.hdr .surge-chip {
  display: none;
  align-items: center; gap: 6px;
  background: #3a1f04; border: 1px solid #6d3906; color: #fbbf24;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  padding: 4px 8px; border-radius: 4px; text-transform: uppercase;
}
.hdr .surge-chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fbbf24;
  animation: pulse 1.6s ease-in-out infinite;
}
body[data-mode="surge"] .hdr .surge-chip { display: inline-flex; }
@keyframes pulse {
  0%,100% { opacity: 1; } 50% { opacity: .35; }
}

.hdr .spacer { flex: 1; }

.hdr .user {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-inv-2);
  flex-shrink: 0;
  white-space: nowrap;
}
.hdr .user .avatar {
  width: 24px; height: 24px; border-radius: 50%; background: #2b3448;
  color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600;
}
.hdr .disclaimer {
  font-size: 10px; color: #6b7590; letter-spacing: 0.04em;
  border-left: 1px solid #2b3448; padding-left: 10px;
  white-space: nowrap; flex-shrink: 0;
}

/* -------- LEFT NAV RAIL -------- */
.nav {
  background: #FFFFFF;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 8px 0;
  gap: 2px;
}
.nav a {
  text-decoration: none;
  color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nav a:hover { background: var(--panel-2); color: var(--ink-2); }
.nav a.active {
  color: var(--primary);
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.nav a .ico {
  width: 20px; height: 20px; display: grid; place-items: center;
}
.nav a .ico svg { width: 18px; height: 18px; stroke-width: 1.7; }
.nav a .lbl {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center; line-height: 1.1;
}

/* -------- WORKSPACE -------- */
.ws {
  overflow: hidden;
  padding: 8px 8px 8px 8px;
  display: grid;
  grid-template-columns: 596px 1fr 280px;
  gap: 8px;
  height: calc(900px - 52px);
  min-width: 0;
}
.ws > .panel { min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.panel .p-hdr {
  height: 36px;
  display: flex; align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  gap: 10px;
  flex-shrink: 0;
}
.panel .p-hdr .title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.panel .p-hdr .sub {
  font-size: 11px; color: var(--ink-4); font-weight: 400;
}
.panel .p-hdr .spacer { flex: 1; }

/* Generic chips */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 3px; text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--panel-2); color: var(--ink-2);
  line-height: 1;
  height: 18px;
}

/* Tier chips */
.tier { color: #fff; padding: 2px 5px; border-radius: 2px; font-size: 10px; font-weight: 700; font-family: var(--ff-mono); letter-spacing: 0.05em; line-height: 1; display: inline-block; }
.tier-a { background: var(--tier-a); }
.tier-b { background: var(--tier-b); }
.tier-c { background: var(--tier-c); }
.tier-d { background: var(--tier-d); }
.tier-e { background: var(--tier-e); }

.tier-word {
  font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.tier-a-w { color: var(--tier-a); }
.tier-b-w { color: var(--tier-b); }
.tier-c-w { color: var(--tier-c); }
.tier-d-w { color: var(--tier-d); }
.tier-e-w { color: var(--tier-e); }

/* Focus scroll bars minimal */
.scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll::-webkit-scrollbar-thumb { background: #D0D5DD; border-radius: 3px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* -------- SIMULATION CLOCK (F01) -------- */
/* Sits in the header next to the mode toggle. Starts paused at minute 0 with
   10x selected, so the presenter opens on a still queue and presses Play. */
.hdr .clock {
  display: inline-flex; align-items: center; gap: 6px;
  background: #0a1220; border: 1px solid #232c42; border-radius: 6px;
  padding: 2px 4px; height: 28px;
  flex-shrink: 0;
}
.hdr .clock button {
  background: transparent; border: 0; color: var(--ink-inv-2);
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  padding: 0 8px; height: 22px; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.hdr .clock button:hover { background: #1b2336; color: #fff; }
.hdr .clock .run svg { width: 11px; height: 11px; display: block; }
.hdr .clock .run.on { background: #6d3906; color: #fde68a; }
.hdr .clock .run.on:hover { background: #7d4207; }
.hdr .clock .speeds {
  display: inline-flex; align-items: center; gap: 2px;
  border-left: 1px solid #232c42; border-right: 1px solid #232c42;
  padding: 0 3px; margin: 0 1px;
}
.hdr .clock .speeds button { padding: 0 6px; font-family: var(--ff-mono); font-size: 10.5px; }
.hdr .clock .speeds button.active { background: #2b3448; color: #fff; }
.hdr .clock .t {
  font-size: 12px; font-weight: 600; color: #fff;
  padding: 0 6px 0 2px; min-width: 56px; text-align: right;
}

/* -------- DEMO SCENARIO CONTROLS (F02) -------- */
/* Next to the clock: a toggle that plays the scripted events, and Step. */
.hdr .scn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #0a1220; border: 1px solid #232c42; border-radius: 6px;
  padding: 2px 4px; height: 28px; flex-shrink: 0;
}
.hdr .scn-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; cursor: pointer; }
.hdr .scn-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.hdr .scn-toggle .sw {
  width: 22px; height: 12px; border-radius: 6px; background: #2b3448; position: relative;
  transition: background .12s;
}
.hdr .scn-toggle .sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ink-inv-2); transition: left .12s;
}
.hdr .scn-toggle.on .sw { background: #B54708; }
.hdr .scn-toggle.on .sw::after { left: 12px; background: #fde68a; }
.hdr .scn-toggle .lbl { font-size: 11px; font-weight: 500; color: var(--ink-inv-2); white-space: nowrap; }
.hdr .scn-toggle.on .lbl { color: #fde68a; }
.hdr .scn-step {
  background: transparent; border: 0; border-left: 1px solid #232c42; color: var(--ink-inv-2);
  font-size: 11px; font-weight: 500; height: 22px; padding: 0 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: 0 4px 4px 0;
}
.hdr .scn-step:hover:not(:disabled) { background: #1b2336; color: #fff; }
.hdr .scn-step:disabled { opacity: .4; cursor: default; }
.hdr .scn-step .n { font-family: var(--ff-mono); font-size: 10px; color: #8a94ab; }

/* The demo scenario controls need the room the tagline takes. The tagline is
   decoration; the PROTOTYPE disclaimer and the user block are not. */
.hdr:has(.scn) .brand .tag { display: none; }
.hdr:has(.scn) { gap: 10px; }
.hdr:has(.scn) .metrics { gap: 10px; }
.hdr:has(.scn) .scn-toggle { padding: 0 4px; }
.hdr:has(.scn) .clock .t { min-width: 50px; }
.hdr:has(.scn) .disclaimer { letter-spacing: 0.04em; }
/* In Surge the extra "Surge 3x active" chip would push the header off the
   canvas. The amber Surge button beside it already says the same thing. */
body[data-mode="surge"] .hdr:has(.scn) .surge-chip { display: none; }

/* The scenario is held while a conflict panel waits for a decision. */
.hdr .scn.held { border-color: #6d3906; }
.hdr .scn.held .scn-step { color: #fde68a; }

/* -------- F08: FULL SCREEN BUTTON -------- */
.hdr .fullscreen-btn {
  background: transparent; border: 1px solid #232c42; color: var(--ink-inv-2);
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hdr .fullscreen-btn:hover { background: #1b2336; color: #fff; }
.hdr .fullscreen-btn svg { width: 15px; height: 15px; }
.hdr .fullscreen-btn[hidden] { display: none; }

/* -------- F08: TAP-OR-HOVER EXPLANATION -------- */
/* Nothing on LISA requires hover: an element with a data-tip="..." attribute
   shows that text on hover AND on tap, through one shared popover shell.js
   appends to <body> (see wireTips()). It lives outside every panel's own
   overflow:hidden or overflow:auto, which this design uses for scroll
   containers everywhere, so the popover is never clipped no matter which
   panel the trigger sits in. */
[data-tip] { cursor: help; }
.tip-popover {
  display: none;
  position: fixed; z-index: 500;
  max-width: 260px;
  background: #101828; color: #fff;
  font-family: var(--ff-sans); font-size: 10.5px; font-weight: 500; line-height: 1.4;
  padding: 7px 9px; border-radius: 5px;
  box-shadow: 0 6px 16px rgba(16,24,40,.28);
  pointer-events: none;
}
.tip-popover.open { display: block; }

/* -------- F08: TABLET DRAWER (Command Center's patient detail) -------- */
/* At >=1280px this wrapper is invisible plumbing: its children (.center and
   .decision) lay out exactly as they did before F08, as the grid's own 2nd
   and 3rd columns. This base rule is what makes that true: display:contents
   takes .drawer-wrap itself out of layout entirely, so .center and .decision
   are still direct grid items of .ws, not stacked inside one shared box.
   Below 1280px the media query below replaces it with a slide-in panel,
   opened by selecting a queue row and closed by the backdrop or the X. */
.drawer-wrap { display: contents; }
/* Only meaningful at tablet width (closes the slide-in panel). At
   >=1280px it must be display:none, not just visually redundant: with
   .drawer-wrap unwrapped via display:contents, an unhidden button here
   would become an unwanted extra item in .ws's 3-column grid, pushing
   .center into the 3rd column and .decision onto a new row. */
.drawer-close { display: none; }
.tablet-drawer-backdrop { display: none; }
@media (max-width: 1279px) {
  .drawer-wrap[data-drawer-open] { display: block; }
  .drawer-wrap:not([data-drawer-open]) { display: none; }
  .drawer-wrap[data-drawer-open] {
    position: fixed; top: var(--banner-h); right: 0; bottom: 0; width: min(420px, 92vw);
    z-index: 120; display: flex; flex-direction: column; gap: 8px; padding: 8px;
    background: var(--workspace); overflow-y: auto;
    box-shadow: -8px 0 24px rgba(16,24,40,.24);
    animation: drawer-in 0.18s ease-out;
  }
  @keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
  /* Only rendered in the DOM at all when the drawer is open (workstation.js),
     so it can never sit invisibly on top of the queue intercepting clicks. */
  .tablet-drawer-backdrop {
    display: block; position: fixed; inset: var(--banner-h) 0 0 0; z-index: 110;
    background: rgba(16,24,40,.32);
  }
  .drawer-close {
    display: block;
    position: sticky; top: 0; align-self: flex-end;
    width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border-strong);
    background: #fff; color: var(--ink-2); font-size: 18px; cursor: pointer; z-index: 1;
  }
}

/* -------- F08: TABLET LAYOUT (1024-1279px) -------- */
/* Below 1280px the fixed 1440x900 canvas stops scaling down (text would
   become unreadable) and instead goes fluid: shell.js clears the transform
   and each page's own CSS (below, and in queue.css/capacity.css/audit.css)
   reflows its grid for the narrower width. Above 1280px nothing here applies
   and the canvas scales exactly as it always has. */
@media (max-width: 1279px) {
  body { display: block; background: var(--workspace); }
  .stage {
    width: 100%; height: auto; min-height: calc(100vh - var(--banner-h));
    overflow: visible;
  }
  .app {
    grid-template-rows: auto 1fr;
    position: static;
    width: 100%; height: auto; min-height: calc(100vh - var(--banner-h));
    transform: none !important;
  }
  .hdr { flex-wrap: wrap; height: auto; min-height: 52px; row-gap: 6px; }
  .ws, .cap-ws, .aud-ws { height: auto; min-height: calc(100vh - var(--banner-h) - 52px); }

  /* Minimum touch target on a touch-first layout: standalone buttons and
     bay tiles are at least 44x44, per the spec. A small status chip embedded
     in a dense table row (.cf-chip, .next-chip, .od-chip) keeps its compact
     size instead: forcing it to 44px would break the row's fixed height and
     bleed into the row below, so its own tap area is grown with padding at
     the row level instead (queue.css). Desktop density (>=1280px) is
     untouched either way. */
  button, [role="button"], .bay {
    min-height: 44px;
  }
  button, [role="button"] { min-width: 44px; }
  .tie-chip { min-height: 32px; }
  /* .cf-chip is a literal <button>, so it matches the bare selector above;
     it keeps its compact size instead (see queue.css) since 44px would break
     the fixed-height queue row it sits inside. */
  .cf-chip { min-height: 0; min-width: 0; }
}