/* TRT Australia — Care Operations
 * Work-management layout. Tabs across the top, Tickets as the primary view.
 *
 * Brand tokens taken from TRT Australia's own site source: Jost for display,
 * Instrument Serif for figures, their navy and blue ramp, 18–22px radius,
 * their soft depth-shadow. The eyebrow (mono, .24em, uppercase) is their
 * signature micro-label.
 *
 * Structure borrows from issue trackers where they genuinely work: readable
 * ticket keys, a dense sortable table, a filter bar, and a detail page with
 * fields on the right. Not their grey-on-grey.
 */

:root {
  --navy:    #0c1a2b;
  --deep:    #1f7ec2;
  --deep-tx: #1a6ba5;
  --blue:    #56b3e8;
  --cyan:    #8fd9ff;
  --grad:    linear-gradient(100deg, #1f7ec2, #56b3e8 38%, #8fd9ff 78%, #c4ecff);
  --tint:    #eaf1f9;
  --surface: #ffffff;
  --line:    #e3eaf3;
  --line-2:  #d4deeb;
  --shadow:  0 1px 2px rgba(13,26,43,.04), 0 12px 30px -16px rgba(13,26,43,.18);
  --shadow-2:0 1px 2px rgba(13,26,43,.04), 0 18px 46px -24px rgba(13,26,43,.22);
  --shadow-3:0 30px 60px -30px rgba(13,26,43,.35);
  --glow:    0 10px 24px -10px rgba(31,126,194,.55);

  --bg:     #f4f7fb;
  --raised: #f7fafc;
  --hover:  #eef4fa;

  --ink:    #0c1a2b;
  --ink-2:  #33455c;
  --dim:    #57677e;
  --dimmer: #6a7a90;

  --physician: #1a6ba5;  --physician-bg: #e6f1fa;
  --nursing:   #6b3fb8;  --nursing-bg:   #f0eafc;
  --support:   #0e7285;  --support-bg:   #e2f3f7;
  --held:      #b02020;  --held-bg:      #fdebeb;
  --ok:        #16733f;  --ok-bg:        #e7f5ec;
  --warn:      #8d5406;  --warn-bg:      #fdf2de;
  --mute-bg:   #eef3f9;

  --topbar: 56px;
  --side:   236px;
  --r:      18px;
  --r-card: 22px;

  --display: "Jost", "Century Gothic", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(940px 460px at 14% -6%, rgba(86,179,232,.13), transparent 62%),
    radial-gradient(820px 420px at 94% 2%,  rgba(143,217,255,.11), transparent 64%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; border-radius: 8px; }

.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 600; color: var(--deep-tx);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important;
                           animation-duration: .001ms !important; }
}

/* ============================================================ chrome */

/* Sidebar layout. Grouped navigation reads better than a tab strip once
   there are more than about four destinations, and it leaves the full
   width of the page for dense tables. */
.shell {
  display: grid;
  grid-template-columns: var(--side) 1fr;
  grid-template-rows: var(--topbar) 1fr;
  grid-template-areas: "brand topbar" "side main";
  height: 100vh;
}

.brand {
  grid-area: brand; display: flex; align-items: center; gap: 11px;
  padding: 0 18px; background: var(--surface);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.brand img { height: 24px; width: auto; object-fit: cover; object-position: top center;
             aspect-ratio: 1100/330; }
.brand .nm { font-family: var(--display); font-weight: 600; font-size: 13px;
             color: var(--ink-2); border-left: 1px solid var(--line-2);
             padding-left: 11px; }

.topbar { grid-area: topbar; display: flex; align-items: center; gap: 13px;
          padding: 0 20px; background: var(--surface);
          border-bottom: 1px solid var(--line); }
.icon-btn { display: none; width: 34px; height: 34px; border-radius: 10px;
            align-items: center; justify-content: center; color: var(--dim); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--hover); color: var(--navy); }

.search { display: flex; align-items: center; gap: 9px; background: var(--bg);
          border: 1px solid var(--line); border-radius: 11px; padding: 0 13px;
          height: 36px; width: 330px; max-width: 42vw;
          transition: border-color .2s, box-shadow .2s, background .2s; }
.search:focus-within { border-color: var(--blue); background: var(--surface);
                       box-shadow: 0 0 0 3px rgba(86,179,232,.16); }
.search svg { width: 15px; height: 15px; color: var(--dimmer); flex: none; }
.search input { flex: 1; background: none; border: 0; outline: none; font-size: 13.2px; }
.search input::placeholder { color: var(--dimmer); }
.kbd { font-family: var(--mono); font-size: 10.5px; color: var(--dimmer);
       border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; }
.topbar .spacer { flex: 1; }
.who { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dim); }
.av { border-radius: 50%; display: grid; place-items: center; color: #fff;
      font-family: var(--display); font-weight: 700; flex: none; }
.av-sm { width: 27px; height: 27px; font-size: 10.5px; }
.av-md { width: 32px; height: 32px; font-size: 11.5px; border-radius: 11px; }
.av-lg { width: 46px; height: 46px; font-size: 15px; border-radius: 16px; }

/* ---- sidebar ---- */

.side { grid-area: side; background: var(--surface); border-right: 1px solid var(--line);
        overflow-y: auto; overflow-x: hidden; padding: 14px 11px; }
.side-label { font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
              text-transform: uppercase; font-weight: 600; color: var(--dimmer);
              padding: 16px 11px 7px; }
.nav {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: 11px; color: var(--ink-2);
  font-family: var(--display); font-size: 13.4px; font-weight: 500; text-align: left;
  transition: background .18s, color .18s;
}
.nav:hover { background: var(--hover); color: var(--navy); }
.nav svg { width: 16px; height: 16px; flex: none; color: var(--dimmer);
           transition: color .18s, transform .25s cubic-bezier(.2,.8,.3,1); }
.nav:hover svg { color: var(--deep-tx); transform: translateX(1px); }
.nav[aria-current="true"] { background: var(--tint); color: var(--navy); font-weight: 600; }
.nav[aria-current="true"] svg { color: var(--deep); }
/* Active marker grows out from the centre rather than blinking on. */
.nav[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 58%; border-radius: 0 3px 3px 0; background: var(--grad);
  animation: markIn .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes markIn { from { height: 0; opacity: 0; } }
.nav .n { margin-left: auto; font-family: var(--display); font-size: 11px;
          font-weight: 700; color: var(--dim); background: var(--mute-bg);
          border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center; }
.nav[aria-current="true"] .n { background: var(--surface); color: var(--deep-tx); }
.nav .n.alert { background: var(--held-bg); color: var(--held); }

.main { grid-area: main; overflow-y: auto; position: relative; }
/* Hairline of the brand gradient where the content meets the chrome. */
.main::before { content: ""; position: sticky; top: 0; display: block; height: 2px;
                background: var(--grad); opacity: .5; z-index: 5; }

/* ---- motion ----
   Deceleration on arrival, 300ms, per the motion guidance. Everything here
   is suppressed under prefers-reduced-motion at the top of the file. */

@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } }
.wrap > * { animation: riseIn .3s cubic-bezier(.2,.8,.3,1) backwards; }
.wrap > *:nth-child(2) { animation-delay: .04s; }
.wrap > *:nth-child(3) { animation-delay: .08s; }
.wrap > *:nth-child(4) { animation-delay: .12s; }

/* 30ms per row — inside the 20-40ms window, so a long table never crawls. */
tbody tr { animation: riseIn .3s cubic-bezier(.2,.8,.3,1) backwards; }
.ticket, .row, .stat, .col { animation: riseIn .3s cubic-bezier(.2,.8,.3,1) backwards; }

/* ============================================================= page */

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.page-head h1 { font-family: var(--serif); font-size: 30px; font-weight: 400;
                letter-spacing: -.01em; }
.page-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--dim); max-width: 62ch; }
.page-head .spacer { flex: 1; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
       border-radius: 999px; font-family: var(--display); font-size: 13px;
       font-weight: 600; color: var(--ink-2); background: var(--surface);
       border: 1px solid var(--line-2); box-shadow: var(--shadow);
       transition: transform .2s, border-color .2s, background .2s; }
.btn:hover { border-color: rgba(86,179,232,.55); transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
.btn.primary { background: linear-gradient(135deg, #1f7ec2, #3c9bd8); color: #fff;
               border-color: transparent; box-shadow: var(--glow); }
.btn.ghost { background: none; border-color: transparent; box-shadow: none; }
.btn.sm { padding: 6px 12px; font-size: 12.5px; }

/* ========================================================== filters */

.filterbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 12px;
}
.sel { position: relative; }
.sel > button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12.8px; color: var(--ink-2); transition: border-color .15s;
}
.sel > button:hover { border-color: rgba(86,179,232,.55); }
.sel > button.on { background: var(--tint); border-color: transparent;
                   color: var(--deep-tx); font-weight: 600; }
.sel > button svg { width: 13px; height: 13px; opacity: .6; }
.pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 198px;
       background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
       padding: 6px; box-shadow: var(--shadow-3); }
.pop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px;
              border-radius: 9px; font-size: 13px; color: var(--ink-2); text-align: left; }
.pop button:hover { background: var(--hover); }
.pop button[aria-current="true"] { background: var(--tint); font-weight: 600; }
.pop .tick { margin-left: auto; color: var(--deep); display: inline-flex; }
.pop .tick svg { width: 14px; height: 14px; }
.filterbar .spacer { flex: 1; }
.filterbar .count { font-size: 12.5px; color: var(--dim); }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line);
       border-radius: 999px; padding: 2px; }
.seg button { padding: 5px 13px; border-radius: 999px; font-family: var(--display);
              font-size: 12.5px; font-weight: 600; color: var(--dim); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--navy);
                                   box-shadow: var(--shadow); }

/* ============================================================ table */

.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; color: var(--dimmer);
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: var(--raised); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--deep-tx); }
thead th .arr { opacity: .55; margin-left: 4px; }
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13.2px;
           vertical-align: middle; }
tbody tr { cursor: pointer; transition: background .14s; }
tbody tr:hover { background: var(--hover); }
tbody tr:last-child td { border-bottom: none; }

.key { font-family: var(--mono); font-size: 12px; color: var(--deep-tx); font-weight: 600;
       white-space: nowrap; }
.sum { font-weight: 500; color: var(--navy); }
.sub { font-size: 11.5px; color: var(--dimmer); margin-top: 2px; }
.who-cell { display: flex; align-items: center; gap: 9px; white-space: nowrap; }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
       border-radius: 999px; font-family: var(--display); font-size: 11px;
       font-weight: 600; white-space: nowrap; }
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
               background: currentColor; flex: none; }
.tag.bare::before { display: none; }
.t-physician { background: var(--physician-bg); color: var(--physician); }
.t-nursing   { background: var(--nursing-bg);   color: var(--nursing); }
.t-support   { background: var(--support-bg);   color: var(--support); }
.t-held      { background: var(--held-bg);      color: var(--held); }
.t-ok        { background: var(--ok-bg);        color: var(--ok); }
.t-warn      { background: var(--warn-bg);      color: var(--warn); }
.t-mute      { background: var(--mute-bg);      color: var(--dim); }

.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.3px;
      font-weight: 600; white-space: nowrap; }
.st svg { width: 13px; height: 13px; }
.st-open     { color: var(--dim); }
.st-progress { color: var(--deep-tx); }
.st-waiting  { color: var(--warn); }
.st-resolved { color: var(--ok); }

.pri { display: inline-flex; align-items: center; gap: 6px; font-size: 12.3px;
       font-weight: 600; white-space: nowrap; }
.pri svg { width: 13px; height: 13px; }
.pri-urgent { color: var(--held); }
.pri-high   { color: var(--warn); }
.pri-normal { color: var(--dim); }
.pri-low    { color: var(--dimmer); }

.empty { padding: 56px 24px; text-align: center; color: var(--dimmer); font-size: 13.5px;
         background: radial-gradient(420px 200px at 50% 40%, rgba(86,179,232,.08), transparent 70%); }
.empty svg { width: 34px; height: 34px; margin-bottom: 12px; opacity: .45; }

/* ============================================================ board */

.board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.col { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
       display: flex; flex-direction: column; min-height: 220px; }
.col-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex;
            align-items: center; gap: 9px; }
.col-head .nm { font-family: var(--display); font-size: 12.5px; font-weight: 700; }
.col-head .n { margin-left: auto; font-family: var(--display); font-size: 11px;
               font-weight: 700; color: var(--dim); background: var(--surface);
               border-radius: 999px; padding: 1px 8px; }
.col-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
          padding: 12px 13px; text-align: left; box-shadow: var(--shadow);
          transition: transform .2s, box-shadow .2s, border-color .2s; }
.ticket:hover { transform: translateY(-3px); box-shadow: var(--shadow-2);
                border-color: rgba(86,179,232,.45); }
.ticket .k { font-family: var(--mono); font-size: 10.5px; color: var(--deep-tx);
             font-weight: 600; }
.ticket .s { font-size: 12.8px; margin: 5px 0 9px; line-height: 1.45; color: var(--navy); }
.ticket .m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* =========================================================== detail */

.detail { display: grid; grid-template-columns: 1fr 312px; gap: 18px; align-items: start; }
.det-main .card { padding: 22px 24px; }
.det-head h1 { font-size: 22px; line-height: 1.32; margin-bottom: 10px; }
.det-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.msg { border: 1px solid var(--line); border-radius: 16px; background: var(--raised);
       padding: 16px 18px; margin: 18px 0 0; }
.msg-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.msg-from { font-family: var(--display); font-size: 13.5px; font-weight: 700; }
.msg-addr { font-size: 11.5px; color: var(--dimmer); }
.msg-time { margin-left: auto; font-size: 11.5px; color: var(--dimmer); }
.msg-body { font-size: 13.8px; color: var(--ink-2); line-height: 1.68; white-space: pre-wrap; }
.attach { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px;
          padding: 8px 13px; border-radius: 999px; background: var(--surface);
          border: 1px solid var(--line); font-size: 12.5px; }
.attach svg { width: 14px; height: 14px; color: var(--dim); }

.note { border-left: 3px solid var(--deep); background: var(--tint); padding: 13px 16px;
        border-radius: 0 12px 12px 0; font-size: 13px; color: var(--ink-2);
        line-height: 1.6; margin-top: 18px; }
.note.held { border-left-color: var(--held); background: var(--held-bg); }
.note .eyebrow { display: block; margin-bottom: 7px; }
.note.held .eyebrow { color: var(--held); }

.activity { margin-top: 22px; }
.act { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 11px 0;
       border-bottom: 1px solid var(--line); }
.act:last-child { border-bottom: none; }
.act-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--raised);
           border: 1px solid var(--line); display: grid; place-items: center;
           color: var(--dim); }
.act-dot svg { width: 13px; height: 13px; }
.act-t { font-size: 13px; }
.act-d { font-size: 11.5px; color: var(--dimmer); margin-top: 2px; }

.det-side .card { padding: 18px; margin-bottom: 12px; }
.det-side h3 { margin-bottom: 13px; }
.field { display: flex; justify-content: space-between; align-items: center; gap: 12px;
         padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.8px; }
.field:last-child { border-bottom: none; }
.field .k { color: var(--dim); }
.field .v { font-weight: 600; text-align: right; }

/* ========================================================= overview */

.hero { position: relative; overflow: hidden; border-radius: 26px; padding: 30px 32px 58px;
        background: linear-gradient(118deg, #0a1826 0%, #14507f 46%, #1f7ec2 100%);
        box-shadow: 0 24px 48px -28px rgba(13,26,43,.55); }
.hero::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 58%;
                aspect-ratio: 1; pointer-events: none;
                background: radial-gradient(circle, rgba(143,217,255,.5), transparent 62%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
               background: var(--grad); }
.hero h1 { position: relative; font-family: var(--serif); font-size: 36px; font-weight: 400;
           color: #fff; line-height: 1.12; }
.hero p { position: relative; margin: 8px 0 0; font-size: 14.5px; color: rgba(255,255,255,.85); }

.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
         margin-top: -38px; position: relative; z-index: 2; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
        padding: 20px 22px; box-shadow: 0 18px 38px -24px rgba(13,26,43,.42);
        position: relative; overflow: hidden;
        transition: transform .25s, box-shadow .25s, border-color .25s; }
.stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
               background: var(--line-2); }
.stat.info::after { background: var(--grad); }
.stat.bad::after  { background: var(--held); }
.stat.warn::after { background: var(--warn); }
.stat.good::after { background: var(--ok); }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-3);
              border-color: rgba(86,179,232,.45); }
.stat .n { font-family: var(--serif); font-size: 42px; line-height: .95; color: var(--navy); }
.stat .l { font-family: var(--display); font-size: 13px; font-weight: 600;
           color: var(--ink-2); margin-top: 8px; }
.stat .s { font-size: 11.5px; color: var(--dimmer); margin-top: 4px; }

.grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-top: 18px;
         align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden;
         margin-bottom: 14px; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px;
              border-bottom: 1px solid var(--line);
              background: linear-gradient(180deg, var(--raised), transparent); }
.panel-head h2 { font-size: 14px; }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 8px 18px 16px; }
.panel-body.flush { padding: 0; }
.row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center;
       width: 100%; padding: 12px 18px; border-bottom: 1px solid var(--line);
       text-align: left; transition: background .14s; }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--hover); }
.row .rt { font-family: var(--display); font-size: 13.2px; font-weight: 600; }
.row .rd { font-size: 12px; color: var(--dim); margin-top: 2px; }

.load { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.load .ln { font-family: var(--display); font-size: 12.5px; font-weight: 600;
            width: 92px; flex: none; }
.load .lb { flex: 1; height: 9px; background: var(--mute-bg); border-radius: 999px;
            overflow: hidden; }
.load .lb i { display: block; height: 100%; border-radius: 999px; }
.load .lc { font-family: var(--serif); font-size: 17px; width: 24px; text-align: right; }

/* ========================================================= schedule */

.routines { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 20px; }
.routine { background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--r-card); padding: 20px; box-shadow: var(--shadow-2);
           transition: transform .25s, box-shadow .25s; }
.routine:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.routine-top { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; }
.routine-ico { width: 38px; height: 38px; border-radius: 13px; display: grid;
               place-items: center; background: linear-gradient(140deg, var(--tint), #dceefb);
               color: var(--deep-tx); flex: none; }
.routine-ico svg { width: 18px; height: 18px; }
.routine h3 { font-size: 15px; margin-bottom: 3px; }
.routine .rs { font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.rwhen { display: flex; align-items: baseline; gap: 10px; padding: 12px 15px;
         background: var(--raised); border-radius: 13px; margin-bottom: 12px; }
.rwhen .rv { font-family: var(--serif); font-size: 19px; margin-left: auto; }
.steps { display: flex; gap: 7px; flex-wrap: wrap; }
.step { flex: 1 1 100px; min-width: 92px; background: var(--raised);
        border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; }
.step .st2 { font-family: var(--display); font-size: 11.8px; font-weight: 600; }
.step .sd { font-size: 10.8px; color: var(--dim); margin-top: 2px; line-height: 1.4; }
.step.dim { opacity: .55; }

.day { display: flex; align-items: baseline; gap: 11px; padding: 18px 2px 9px;
       border-bottom: 2px solid var(--line-2); }
.day .dd { font-family: var(--display); font-size: 13.5px; font-weight: 700; }
.day .dn { font-size: 11.5px; color: var(--dimmer); }
.day .dt { margin-left: auto; }
.ev { display: grid; grid-template-columns: 78px 32px 1fr auto; gap: 13px;
      align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: none; }
.ev-t { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.ev-w { font-family: var(--display); font-size: 13.2px; font-weight: 600; }
.ev-d { font-size: 12.2px; color: var(--dim); margin-top: 2px; }

/* ====================================================== responsive */

@media (max-width: 1180px) {
  .detail { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(2,1fr); }
  .grid2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 800px) {
  .search { width: 180px; }
  .who span { display: none; }
  .board { grid-template-columns: 1fr; }
  .routines { grid-template-columns: 1fr; }
  .hero h1 { font-size: 27px; }
  .page-head { flex-wrap: wrap; }
  table thead th:nth-child(4), table tbody td:nth-child(4),
  table thead th:nth-child(6), table tbody td:nth-child(6) { display: none; }
  .ev { grid-template-columns: 66px 1fr; }
  .ev .av { display: none; }
}

/* ------------------------------------------------- responsive sidebar */

@media (max-width: 1024px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: var(--topbar) 1fr;
           grid-template-areas: "topbar" "main"; }
  .brand { display: none; }
  .icon-btn { display: inline-flex; }
  .side {
    position: fixed; inset: var(--topbar) auto 0 0; width: 264px; z-index: 60;
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.8,.3,1);
    box-shadow: var(--shadow-3);
  }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(12,26,43,.34); z-index: 55;
           opacity: 0; pointer-events: none; transition: opacity .26s; }
  .scrim.on { opacity: 1; pointer-events: auto; }
}

/* --------------------------------------------- alignment corrections */

/* The page heading, its blurb, the filter bar and the table all have to
   share one left edge. They were on different paddings, so the heading
   appeared to hang outside the cards below it. */
.wrap { max-width: 1320px; margin: 0 auto; padding: 26px 28px 52px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { line-height: 1.16; }
.page-head p { margin-top: 6px; }

/* Detail page: two columns that both start at the top, with the fields
   panel sticky so it stays beside a long conversation instead of ending
   up marooned at the bottom. */
.detail { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px;
          align-items: start; }
.det-main { min-width: 0; }
.det-side { position: sticky; top: 16px; }
.det-side .card { background: var(--surface); border: 1px solid var(--line);
                  border-radius: var(--r-card); box-shadow: var(--shadow-2); }

@media (max-width: 1180px) {
  .detail { grid-template-columns: minmax(0,1fr); }
  .det-side { position: static; }
}
@media (max-width: 720px) {
  .wrap { padding: 18px 16px 40px; }
  .page-head h1 { font-size: 25px; }
}

/* ===================================================================
   CONTRAST SYSTEM — three tones
   ===================================================================
   Everything was one tone (white on white), which is why it read flat.
   Three surfaces now, layered as primitive → semantic → component so the
   scheme can be changed in one place:

     navigation   deep navy    — the anchor, and it frames the content
     chrome       white        — topbar, cards, tables
     ground       tinted wash  — the page behind the cards

   Text on navy is checked: #eef4fb on #0b1725 is 14.6:1, and the dimmed
   variant #93a9c0 is 6.1:1, both well clear of 4.5:1.
*/

:root {
  /* primitive */
  --navy-900: #0b1725;
  --navy-800: #0f2032;
  --navy-700: #16304a;
  --navy-600: #1d3f5f;

  /* semantic — navigation surface */
  --nav-bg:        var(--navy-900);
  --nav-bg-2:      var(--navy-800);
  --nav-ink:       #eef4fb;
  --nav-ink-dim:   #93a9c0;
  --nav-ink-faint: #6b8299;
  --nav-line:      rgba(255,255,255,.08);
  --nav-active-bg: rgba(86,179,232,.16);
}

/* ---- navigation surface ---- */

.brand { background: var(--nav-bg); border-right-color: var(--nav-line);
         border-bottom-color: var(--nav-line); }
.brand .nm { color: var(--nav-ink); border-left-color: var(--nav-line);
             white-space: nowrap; font-size: 12.5px; }
/* The wordmark is built for dark backgrounds — on navy the full lockup
   shows, so it no longer needs cropping. */
.brand img { aspect-ratio: auto; height: 30px; object-fit: contain; }

.side { background: var(--nav-bg); border-right-color: var(--nav-line); }
.side-label { color: var(--nav-ink-faint); }
.nav { color: var(--nav-ink-dim); }
.nav svg { color: var(--nav-ink-faint); }
.nav:hover { background: var(--nav-bg-2); color: var(--nav-ink); }
.nav:hover svg { color: var(--cyan); }
.nav[aria-current="true"] { background: var(--nav-active-bg); color: #fff; }
.nav[aria-current="true"] svg { color: var(--cyan); }
.nav .n { background: rgba(255,255,255,.09); color: var(--nav-ink-dim); }
.nav[aria-current="true"] .n { background: rgba(255,255,255,.16); color: #fff; }
.nav .n.alert { background: rgba(248,113,113,.2); color: #ffb4b4; }

/* ---- overflow ----
   The real cause of the clipped sidebar labels: a grid child defaults to
   min-width:auto, so the wide ticket table refused to shrink and pushed the
   whole grid past the viewport. The page then scrolled sideways and cut the
   first character off the sidebar. */
.shell { overflow: hidden; }
.main { min-width: 0; }
.wrap { min-width: 0; }
.card { max-width: 100%; }
.table-scroll { overflow-x: auto; }

/* ---- topbar sits on white, against the navy ---- */
.topbar { background: var(--surface); }
.search { background: var(--bg); }

@media (max-width: 1024px) {
  .side { box-shadow: 0 30px 60px -20px rgba(11,23,37,.6); }
}

/* ---- topbar proportions ----
   It was 56px with a 36px search inside it, which left almost no breathing
   room and made the bar feel cramped rather than compact. */
:root { --topbar: 60px; }
.topbar { gap: 14px; padding: 0 22px; }
.brand { padding: 0 16px; gap: 10px; }
.who { gap: 10px; }
.who .av-sm { width: 28px; height: 28px; }

/* Page heading sits closer to the chrome so the content starts higher. */
.wrap { padding: 22px 28px 52px; }

/* ===================================================================
   MOBILE
   ===================================================================
   A client may well open this on a phone, so it has to hold up at 375px
   rather than merely not break.
*/

/* The brand was hidden entirely below 1024px, which left a client opening
   this on a phone with no logo anywhere. It moves into the topbar instead. */
@media (max-width: 1024px) {
  /* These rules used to move the brand into the topbar. The brand is now a
     grid area and a sibling of .topbar, so `display: flex; grid-area: unset`
     was un-hiding it and dropping it into auto placement at the bottom of
     the page - the logo appeared under the content on every phone. The
     .topbar .brand / .topbar .search selectors matched nothing at all. */
  .topbar { gap: 11px; padding: 0 14px; }
}

@media (max-width: 760px) {
  /* A seven-column table cannot work at this width. Each row becomes a
     card, with the column name carried through as a label so no value
     loses its meaning. */
  .table-scroll { overflow-x: visible; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 14px 16px; margin: 0 0 10px;
    box-shadow: var(--shadow);
  }
  tbody tr:last-child { margin-bottom: 0; }
  tbody td { border: 0; padding: 0; display: flex; align-items: center;
             justify-content: space-between; gap: 14px; min-height: 30px; }
  tbody td::before {
    content: attr(data-l);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--dimmer); flex: none;
  }
  /* Key and summary lead the card, so they drop their label and sit full width. */
  tbody td.key, tbody td.cell-sum { display: block; }
  tbody td.key::before, tbody td.cell-sum::before { display: none; }
  tbody td.key { font-size: 11px; margin-bottom: 3px; }
  tbody td.cell-sum { margin-bottom: 11px; padding-bottom: 11px;
                      border-bottom: 1px solid var(--line); }
  tbody td.cell-sum .sum { font-size: 14.5px; line-height: 1.4; }
  .card { background: none; border: 0; box-shadow: none; border-radius: 0; }

  /* This used to scroll sideways with the scrollbar hidden. With only three
     filters and the view toggle it bought nothing, and the toggle ended up
     clipped mid-word at the right edge with no hint that the strip scrolled
     - it read as broken, and the toggle was a primary control hidden inside
     a scroller. Two wrapped rows show everything at once. */
  .filterbar { flex-wrap: wrap; border-radius: 14px; padding: 10px 12px; }
  .filterbar .spacer, .filterbar .count { display: none; }
  .filterbar .seg { margin-left: auto; }
  .sel > button { white-space: nowrap; }

  .stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -28px; }
  .stat { padding: 15px 16px; }
  .stat .n { font-size: 33px; }
  .hero { padding: 24px 20px 46px; border-radius: 20px; }
  .hero h1 { font-size: 26px; }
  .grid2 { gap: 10px; }
  .who span { display: none; }
  .search { max-width: none; }
  .kbd { display: none; }

  .det-side { position: static; }
  .detail { gap: 14px; }
  .det-main .card { padding: 18px 16px; }
  .det-head h1 { font-size: 19px; }
  .msg { padding: 14px 15px; }
  .ev { grid-template-columns: 62px 1fr; }
  .ev .av { display: none; }
  .ev > span:last-child { grid-column: 2; }
}

@media (max-width: 400px) {
  .wrap { padding: 16px 12px 36px; }
  .stats { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 23px; }
}

/* ===================================================================
   COLLAPSIBLE SIDEBAR
   =================================================================== */

:root { --side-collapsed: 64px; }

.shell.collapsed { grid-template-columns: var(--side-collapsed) 1fr; }
.shell.collapsed .brand { padding: 0; justify-content: center; }
.shell.collapsed .logo-full,
.shell.collapsed .brand .nm { display: none; }
.shell.collapsed .logo-mark { display: grid; }
.shell.collapsed .collapse { display: none; }
/* Every target is the same 44px square, centred in the 64px rail, so the icons
   sit on one axis and the hover pills do not change shape row to row. */
/* The hover tooltip is positioned outside the rail, and `.side` scrolls, so
   any overflow value other than visible clips it away completely — which it
   did. The rail holds nine fixed items that fit any desktop height, so it has
   nothing to scroll; if sections are ever added here, this needs revisiting. */
.shell.collapsed .side { padding: 12px 0; overflow: visible; }
.shell.collapsed .nav {
  position: relative; width: 44px; height: 44px; margin: 0 auto 2px;
  padding: 0; justify-content: center; border-radius: 13px;
}
.shell.collapsed .nav > span:not(.n) { display: none; }
.shell.collapsed .nav svg { width: 20px; height: 20px; }
/* Hover nudges the icon sideways when there is a label to move toward. There
   is not one here, so it would just look like a wobble. */
.shell.collapsed .nav:hover svg { transform: none; }

/* Counts become a fixed 16px disc pinned to the icon, not a pill that grows
   with the number — a variable-width badge left the right edge of the rail
   ragged. The ring punches it out of the icon underneath. */
.shell.collapsed .nav .n {
  position: absolute; margin: 0; padding: 0; box-sizing: border-box;
  width: 17px; height: 17px; min-width: 0;
  display: grid; place-items: center; border-radius: 999px;
  font-size: 9px; line-height: 1; letter-spacing: -.03em;
  box-shadow: 0 0 0 2px var(--nav-bg);
  /* Tucked into the button's corner, clipping only the corner of the 20px
     icon. The disc is a fixed width whatever the number, which is what the
     column actually needed — a pill that grew with the digits left the right
     edge ragged. Any deeper and the ring cuts the icon in half. */
  top: 2px; right: 2px;
}
/* The ring punches the badge out of whatever is behind it, so it has to track
   the button's own background through hover and the active tint. The active
   pill is translucent, so its value is pre-blended over the rail colour. */
.shell.collapsed .nav:hover .n { box-shadow: 0 0 0 2px var(--nav-bg-2); }
.shell.collapsed .nav[aria-current="true"] .n { box-shadow: 0 0 0 2px #173044; }

/* Group headings have no room for their text, so they become a short centred
   rule. A full-width border sat at a different inset to the icons and made
   the column look bent. */
.shell.collapsed .side-label {
  font-size: 0; padding: 0; border-top: 0;
  width: 24px; height: 1px; margin: 11px auto;
  background: var(--nav-line);
}

/* The active marker is anchored to the rail edge rather than the button edge:
   half the 20px of space either side of the 44px button. */
.shell.collapsed .nav[aria-current="true"]::before { left: -10px; height: 44%; }

.logo-mark {
  display: none; width: 32px; height: 32px; border-radius: 11px;
  background: var(--grad); place-items: center; color: #06243c;
  font-family: var(--display); font-weight: 700; font-size: 15px; flex: none;
}

.collapse {
  margin-left: auto; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; color: var(--nav-ink-faint);
  transition: background .16s, color .16s;
}
.collapse:hover { background: rgba(255,255,255,.08); color: var(--nav-ink); }
.collapse svg { width: 16px; height: 16px; }

/* A collapsed rail without labels is a memory test, so each icon carries
   its name on hover. */
.shell.collapsed .nav::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--navy-800); color: var(--nav-ink);
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
  box-shadow: var(--shadow-3); opacity: 0; pointer-events: none;
  transition: opacity .16s, transform .16s; z-index: 70;
}
.shell.collapsed .nav:hover::after { opacity: 1; transform: translateY(-50%); }

/* ===================================================================
   TOPBAR CONTROLS
   =================================================================== */

.cmd-trigger {
  display: flex; align-items: center; gap: 10px; height: 36px;
  padding: 0 13px; border-radius: 11px; background: var(--bg);
  border: 1px solid var(--line); color: var(--dimmer); font-size: 13.2px;
  width: 300px; max-width: 40vw; transition: border-color .18s, background .18s;
}
.cmd-trigger:hover { border-color: var(--blue); background: var(--surface); }
.cmd-trigger svg { width: 15px; height: 15px; flex: none; }
.cmd-trigger span:not(.kbd) { flex: 1; text-align: left; }

.menu-wrap { position: relative; }
.icon-btn.bell { display: inline-flex; position: relative; }
.bdot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
        border-radius: 50%; background: var(--held);
        box-shadow: 0 0 0 2px var(--surface); }

.whobtn { display: flex; align-items: center; gap: 9px; padding: 5px 9px 5px 5px;
          border-radius: 999px; transition: background .16s; }
.whobtn:hover { background: var(--hover); }
.whotxt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.wn { font-family: var(--display); font-size: 12.8px; font-weight: 600; color: var(--ink); }
.wr { font-size: 10.5px; color: var(--dim); }
.whobtn .chev { width: 14px; height: 14px; color: var(--dimmer); }

.pop-notif, .pop-who { right: 0; left: auto; }
.pop-notif { width: 372px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.notif-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px;
              border-bottom: 1px solid var(--line); }
.notif-head h3 { font-size: 13.5px; }
.notif-head .spacer { flex: 1; }
.notif-list { max-height: 400px; overflow-y: auto; }
.nrow { display: grid; grid-template-columns: 30px 1fr; gap: 12px; width: 100%;
        padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left;
        transition: background .14s; }
.nrow:last-child { border-bottom: none; }
.nrow:hover { background: var(--hover); }
.nico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; }
.nico svg { width: 15px; height: 15px; }
.nico.esc  { background: var(--held-bg); color: var(--held); }
.nico.held { background: var(--held-bg); color: var(--held); }
.nico.mail { background: var(--physician-bg); color: var(--physician); }
.nico.chat { background: var(--nursing-bg); color: var(--nursing); }
.nico.auto { background: var(--tint); color: var(--deep-tx); }
.nico.done { background: var(--ok-bg); color: var(--ok); }
.ntxt { font-size: 13px; font-weight: 600; line-height: 1.4; }
.nsub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.ntime { font-size: 11px; color: var(--dimmer); margin-top: 3px; }

.pop-who { width: 248px; }
.pop-who .cap { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
                text-transform: uppercase; color: var(--dimmer); font-weight: 600;
                padding: 9px 12px 5px; }

/* ===================================================================
   COMMAND PALETTE
   =================================================================== */

.cmd-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(11,23,37,.44);
               display: flex; align-items: flex-start; justify-content: center;
               padding: 12vh 20px 20px; animation: fadeIn .16s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.cmd { width: 100%; max-width: 620px; background: var(--surface); border-radius: 20px;
       box-shadow: 0 40px 90px -30px rgba(11,23,37,.6); overflow: hidden;
       animation: cmdIn .2s cubic-bezier(.2,.8,.3,1); }
@keyframes cmdIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
.cmd-input { display: flex; align-items: center; gap: 12px; padding: 17px 20px;
             border-bottom: 1px solid var(--line); }
.cmd-input svg { width: 18px; height: 18px; color: var(--dimmer); flex: none; }
.cmd-input input { flex: 1; border: 0; outline: none; font-size: 15.5px; background: none; }
.cmd-input input::placeholder { color: var(--dimmer); }
.cmd-results { max-height: 52vh; overflow-y: auto; padding: 7px; }
.cmd-group { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
             text-transform: uppercase; color: var(--dimmer); font-weight: 600;
             padding: 11px 13px 6px; }
.cmd-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 13px;
            border-radius: 11px; text-align: left; transition: background .12s; }
.cmd-item:hover, .cmd-item.sel { background: var(--tint); }
.cmd-item .ci { width: 28px; height: 28px; border-radius: 9px; display: grid;
                place-items: center; background: var(--bg); color: var(--dim); flex: none; }
.cmd-item .ci svg { width: 14px; height: 14px; }
.cmd-item .ct { font-size: 13.5px; font-weight: 500; }
.cmd-item .cs { font-size: 11.8px; color: var(--dim); margin-top: 1px; }
.cmd-item .ck { margin-left: auto; font-family: var(--mono); font-size: 10.5px;
                color: var(--dimmer); }
.cmd-empty { padding: 34px 20px; text-align: center; color: var(--dimmer); font-size: 13px; }

/* ===================================================================
   COMMENTS
   =================================================================== */

.comments { margin-top: 22px; }
.comment { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 13px 0;
           border-bottom: 1px solid var(--line); }
.comment:last-of-type { border-bottom: none; }
.cm-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.cm-who { font-family: var(--display); font-size: 13px; font-weight: 700; }
.cm-role { font-size: 11px; color: var(--dimmer); }
.cm-time { margin-left: auto; font-size: 11px; color: var(--dimmer); }
.cm-body { font-size: 13.3px; color: var(--ink-2); line-height: 1.6; }
.cm-form { display: grid; grid-template-columns: 32px 1fr; gap: 12px; margin-top: 14px; }
.cm-box { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
          background: var(--surface); transition: border-color .18s; }
.cm-box:focus-within { border-color: var(--blue); }
.cm-box textarea { width: 100%; min-height: 66px; border: 0; outline: none; resize: vertical;
                   padding: 12px 14px; font-family: var(--body); font-size: 13.3px;
                   line-height: 1.6; background: none; }
.cm-bar { display: flex; align-items: center; gap: 9px; padding: 9px 12px;
          border-top: 1px solid var(--line); background: var(--raised); }
.cm-bar .hint { font-size: 11px; color: var(--dimmer); }

/* ===================================================================
   SIGN IN
   =================================================================== */

.signin { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
          background: linear-gradient(140deg, #0a1826 0%, #14507f 55%, #1f7ec2 100%); }
.signin::before { content: ""; position: absolute; inset: -30% -10% auto auto;
                  width: 55%; aspect-ratio: 1; pointer-events: none;
                  background: radial-gradient(circle, rgba(143,217,255,.45), transparent 62%); }
.signin-card { position: relative; background: var(--surface); border-radius: 26px;
               padding: 40px 42px 34px; width: min(400px, calc(100vw - 40px));
               text-align: center; box-shadow: 0 40px 90px -30px rgba(11,23,37,.6); }
.signin-logo { height: 30px; width: auto; object-fit: cover; object-position: top center;
               aspect-ratio: 1100/330; margin-bottom: 18px; }
.signin-card h1 { font-family: var(--serif); font-size: 27px; font-weight: 400;
                  margin-bottom: 5px; }
.signin-card p { margin: 0 0 22px; font-size: 13.5px; color: var(--dim); }
.signin-card .btn { width: 100%; justify-content: center; padding: 11px; }
.signin-note { display: block; margin-top: 16px; font-family: var(--mono);
               font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
               color: var(--dimmer); }

@media (max-width: 1024px) {
  .shell.collapsed { grid-template-columns: 1fr; }
  .collapse { display: none; }
  .cmd-trigger span:not(.kbd) { display: none; }
  .cmd-trigger { width: auto; padding: 0 11px; }
  .cmd-trigger .kbd { display: none; }
  .whotxt { display: none; }
  .whobtn .chev { display: none; }
}

.pop button > svg { width: 15px; height: 15px; flex: none; color: var(--dimmer); }

/* Below 1024px the rail becomes an off-canvas drawer with room for labels,
   so a collapsed state carried over from the desktop must not follow it in. */
@media (max-width: 1024px) {
  .shell.collapsed .side { padding: 14px 11px; }
  .shell.collapsed .nav { width: 100%; height: auto; margin: 0;
                          justify-content: flex-start; padding: 9px 12px;
                          border-radius: 11px; }
  .shell.collapsed .nav > span:not(.n) { display: inline; }
  .shell.collapsed .nav svg { width: 16px; height: 16px; }
  .shell.collapsed .nav .n { position: static; display: block; margin-left: auto;
                             min-width: 22px; height: auto; padding: 1px 8px;
                             font-size: 11px; line-height: normal;
                             box-shadow: none; }
  .shell.collapsed .nav::after { content: none; }
  .shell.collapsed .nav[aria-current="true"]::before { left: 0; height: 58%; }
  .shell.collapsed .side-label { font-size: 10px; width: auto; height: auto;
                                 background: none; padding: 16px 11px 7px; margin: 0; }
}


/* ===================================================================
   MODAL — used by New ticket
   =================================================================== */

.modal-overlay {
  position: fixed; inset: 0; z-index: 210; background: rgba(11,23,37,.44);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 20px 20px; overflow-y: auto; animation: fadeIn .16s ease;
}
.modal {
  width: 100%; max-width: 620px; background: var(--surface); border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(11,23,37,.6); overflow: hidden;
  animation: cmdIn .2s cubic-bezier(.2,.8,.3,1);
}
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 20px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 18px 20px 4px; }
.modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--raised);
}
.modal-foot .spacer { flex: 1; }
.modal-foot .hint { font-size: 11.5px; color: var(--dimmer); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f { margin-bottom: 14px; }
.f > label {
  display: block; font-family: var(--display); font-size: 12px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 5px;
}
.f input[type="text"], .f textarea, .f select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px;
  font-family: var(--body); font-size: 13.4px; color: var(--ink);
  background: var(--surface); transition: border-color .16s, box-shadow .16s;
}
.f textarea { min-height: 78px; resize: vertical; line-height: 1.55; }
.f select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7d92' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
  padding-right: 32px; }
.f input:focus, .f textarea:focus, .f select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint);
}
.f .sub { font-size: 11.5px; color: var(--dimmer); margin-top: 5px; }
.f.bad input, .f.bad textarea { border-color: var(--held); }
.f .err { font-size: 11.5px; color: var(--held); margin-top: 5px; display: none; }
.f.bad .err { display: block; }

/* The classifier holds clinical wording for a person. A ticket typed by hand
   bypasses that entirely, so the same signal is surfaced here as a prompt
   rather than a block - a person is deciding, and may have good reason. */
.clin-note {
  display: none; gap: 10px; padding: 11px 13px; margin-bottom: 14px;
  background: var(--held-bg); border-left: 3px solid var(--held); border-radius: 10px;
}
.clin-note.on { display: flex; }
.clin-note svg { width: 16px; height: 16px; color: var(--held); flex: none; margin-top: 1px; }
.clin-note .t { font-size: 12.6px; color: var(--ink-2); line-height: 1.5; }
.clin-note b { font-family: var(--display); font-weight: 700; color: var(--held); }

/* ===================================================================
   ASK — floating button
   =================================================================== */

/* A floating target rather than another topbar icon: the topbar is already
   carrying search, notifications and the account menu, and a fourth icon
   there went unnoticed. This is the one control that invites a question, so
   it gets its own place on the page. */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 118;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(145deg, var(--deep) 0%, var(--navy-700) 100%);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 16px 34px -12px rgba(11,23,37,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(11,23,37,.6); }
.fab:active { transform: translateY(0); }
.fab svg { width: 24px; height: 24px; }

/* Names itself on hover so the icon does not have to carry the meaning. */
.fab::after {
  content: attr(data-label);
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(5px);
  background: var(--navy-800); color: var(--nav-ink);
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 9px; white-space: nowrap;
  box-shadow: var(--shadow-3); opacity: 0; pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.fab:hover::after { opacity: 1; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .fab, .fab::after { transition: none; }
  .fab:hover { transform: none; }
}

@media (max-width: 1024px) {
  /* Clear of the home indicator on phones that have one. */
  .fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
         width: 52px; height: 52px; }
  .fab::after { display: none; }
}

/* ===================================================================
   ASK PANEL
   =================================================================== */

.askpanel {
  position: fixed; top: var(--topbar); right: 0; bottom: 0; width: 404px;
  z-index: 120; background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -30px rgba(11,23,37,.4);
  display: flex; flex-direction: column;
  animation: askIn .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes askIn { from { transform: translateX(22px); opacity: 0; } }

.ask-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.ask-mark {
  width: 30px; height: 30px; border-radius: 10px; background: var(--grad);
  display: grid; place-items: center; color: #06243c; flex: none;
}
.ask-mark svg { width: 16px; height: 16px; }
.ask-head h2 { font-family: var(--display); font-size: 14px; font-weight: 700; }
.ask-head .sub { font-size: 11.5px; color: var(--dimmer); margin-top: 1px; }
.ask-head .spacer { flex: 1; }

.ask-log { flex: 1; overflow-y: auto; padding: 16px; }
.ask-msg { margin-bottom: 14px; }
.ask-msg.you { display: flex; justify-content: flex-end; }
.ask-msg.you .bub {
  background: var(--deep); color: #fff; border-radius: 14px 14px 4px 14px;
  padding: 9px 13px; font-size: 13.2px; max-width: 80%; line-height: 1.5;
}
.ask-msg.bot .bub {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px; padding: 11px 13px;
  font-size: 13.2px; line-height: 1.55; color: var(--ink-2);
}
.ask-msg.bot .bub b { font-family: var(--display); color: var(--ink); font-weight: 700; }
.ask-hits { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ask-hit {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  text-align: left; transition: border-color .15s, background .15s;
}
.ask-hit:hover { border-color: var(--blue); background: var(--tint); }
.ask-hit .k { font-family: var(--mono); font-size: 11px; color: var(--deep-tx); flex: none; }
.ask-hit .s { font-size: 12.4px; flex: 1; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }

.ask-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ask-chip {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: 12.2px; color: var(--ink-2);
  transition: border-color .15s, background .15s;
}
.ask-chip:hover { border-color: var(--blue); background: var(--tint); }

.ask-foot { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--raised); }
.ask-box {
  display: flex; align-items: flex-end; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 13px;
  transition: border-color .16s;
}
.ask-box:focus-within { border-color: var(--blue); }
.ask-box input {
  flex: 1; border: 0; outline: none; background: none; padding: 7px 0;
  font-family: var(--body); font-size: 13.3px; color: var(--ink);
}
.ask-send {
  width: 32px; height: 32px; border-radius: 10px; background: var(--deep);
  color: #fff; display: grid; place-items: center; flex: none;
  transition: opacity .16s, transform .16s;
}
.ask-send:hover { transform: translateY(-1px); }
.ask-send:disabled { opacity: .4; transform: none; }
.ask-send svg { width: 15px; height: 15px; }
.ask-note {
  display: block; margin-top: 9px; font-size: 11px; color: var(--dimmer);
  line-height: 1.45; text-align: center;
}

/* The panel overlays the content rather than resizing the grid: re-flowing a
   board behind a transient panel is more disruptive than covering part of it. */
.ask-scrim { position: fixed; inset: var(--topbar) 0 0 0; z-index: 115;
             background: rgba(12,26,43,.18); animation: fadeIn .2s ease; }

@media (max-width: 1024px) {
  .askpanel { width: 100%; border-left: 0; }
  .ask-scrim { display: none; }
}
@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .modal-overlay { padding: 0; }
  .modal { max-width: none; min-height: 100%; border-radius: 0; }
}

/* The overlays set their own display (grid/flex) to lay themselves out, and an
   author rule beats the browser's own [hidden] { display: none }. Without this
   the sign-in screen and the command palette are painted on every page load
   and toggling .hidden from script does nothing. Hidden means hidden. */
[hidden] { display: none !important; }