/* ===========================================================================
   Alliance IT Helpdesk - Workbench stylesheet
   ===========================================================================

   The one stylesheet for every page: the signed-in app, the error page and
   the sign-in page (its own section near the end).

   LAYOUT
   A fixed-height app: the sandbox bar (when on), then a sidebar beside a main
   column that scrolls on its own. The queue and the ticket page are one
   workbench (body.is-workbench): the queue list on the left, the ticket (or
   an empty state) beside it, each scrolling independently.

   MOTION
   Pages load for real, so the smoothness comes from two things. Content that
   enters is hidden from the first paint (html.wb-enter, set in base.html's
   head) and staggered in by workbench.js - no flash of the finished page
   first. And the few things that "move" between pages - the sidebar's
   current-page bar, the tab underline, the selected-row highlight - slide
   from where they were on the last page to where they are now (workbench.js
   saves their positions as a page is left and plays them back on arrival).

   THEMES
   The bare :root block is the complete light palette. Dark redefines only
   tokens, in a prefers-color-scheme block (guarded so an explicit light choice
   wins) and again under [data-theme="dark"] for the toggle. No component rule
   declares a colour in either block.

   STATE
   SLA, status and priority are always said in words as well as colour, and
   priority also as a shape, so nothing depends on telling hues apart.
   ========================================================================= */

:root {
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --scheme: light; --sun: none; --moon: block;

  --bg: #F5F7FA; --surface: #FFFFFF; --surface-2: #F8FAFC; --raised: #FFFFFF;
  --side: #EBEFF4; --side-hover: #E0E6EC; --side-cur: #FFFFFF;
  --sunken: #EDF1F5; --badge: #DAE1E8; --hover: #F1F4F8; --sel: #E3EEF8;
  --line: #DDE3EA; --line-2: #EAEEF2; --field: #7F8C99;
  --text: #15202B; --text-2: #4B5A68; --text-3: #5F6D79;
  --accent: #1F6FA8; --accent-hover: #195C8C; --on-accent: #FFFFFF; --accent-soft: #E6F0F8; --accent-text: #1F6FA8; --focus: #1F6FA8;
  --ok: #16855A; --ok-text: #11714C; --ok-soft: #E8F5EE;
  --warn: #B87503; --warn-text: #8A5A00; --warn-soft: #FDF3E1;
  --crit: #C0392B; --crit-text: #A93226; --crit-soft: #FCEBE9; --crit-line: #E2A69F; --on-crit: #FFFFFF;
  --paused: #7B8B96; --paused-text: #5A6975;
  --internal-tint: #FFF7E6; --note-line: #B8862B; --note-ink: #7A4D00; --on-note: #FFFFFF;
  --tip-bg: #15202B; --tip-fg: #F5F7FA; --tip-fg-2: #B9C4CE; --toast-ok: #3FBE86;
  --av0-bg: #DCEAF6; --av0-fg: #174F78; --av1-bg: #DDF1EA; --av1-fg: #135C45;
  --av2-bg: #F2E6D8; --av2-fg: #6E4417; --av3-bg: #E6EAEF; --av3-fg: #3D4A57;
  --series-a: #2A78D6; --series-b: #D9622B;
  --si-bg: #12324F; --si-glow: rgba(95, 176, 232, .35);
  --shadow-pop: 0 16px 40px rgba(21, 32, 43, .18), 0 2px 8px rgba(21, 32, 43, .08);
  --shadow-seg: 0 1px 2px rgba(21, 32, 43, .12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Older names the metrics page script and a few templates read. */
  --sans: var(--font); --ink: var(--text); --ink-soft: var(--text-2);
  --border: var(--line); --surface-3: var(--badge);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scheme: dark; --sun: block; --moon: none;
    --bg: #0F151B; --surface: #161E26; --surface-2: #131A21; --raised: #1A232D;
    --side: #0B1116; --side-hover: #151D25; --side-cur: #18212A;
    --sunken: #0F151B; --badge: #1E2831; --hover: #1B242E; --sel: #1B2A38;
    --line: #25303B; --line-2: #1D2630; --field: #6B7A88;
    --text: #E4EAF0; --text-2: #A9B6C2; --text-3: #8C9AA7;
    --accent: #5FB0E8; --accent-hover: #7CC0EE; --on-accent: #06121C; --accent-soft: #16293A; --accent-text: #7CC0EE; --focus: #7CC0EE;
    --ok: #3FBE86; --ok-text: #5CD39C; --ok-soft: #12261D;
    --warn: #E0A02E; --warn-text: #EDB451; --warn-soft: #33280F;
    --crit: #EF6E60; --crit-text: #F58A7E; --crit-soft: #3A1D1B; --crit-line: #7A3A33; --on-crit: #1A0B09;
    --paused: #6E7F8B; --paused-text: #93A3AF;
    --internal-tint: #2B2413; --note-line: #8C6A26; --note-ink: #F2C66D; --on-note: #1E1606;
    --tip-bg: #E4EAF0; --tip-fg: #0F151B; --tip-fg-2: #3D4A57; --toast-ok: #16855A;
    --av0-bg: #1D3A52; --av0-fg: #A9D4F5; --av1-bg: #173A31; --av1-fg: #9FDCC6;
    --av2-bg: #3A2C1C; --av2-fg: #E8C7A0; --av3-bg: #26313C; --av3-fg: #C5D0DA;
    --series-a: #5FB0E8; --series-b: #F08A55;
    --si-bg: #0A1C2C; --si-glow: rgba(95, 176, 232, .22);
    --shadow-pop: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-seg: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --scheme: dark; --sun: block; --moon: none;
  --bg: #0F151B; --surface: #161E26; --surface-2: #131A21; --raised: #1A232D;
  --side: #0B1116; --side-hover: #151D25; --side-cur: #18212A;
  --sunken: #0F151B; --badge: #1E2831; --hover: #1B242E; --sel: #1B2A38;
  --line: #25303B; --line-2: #1D2630; --field: #6B7A88;
  --text: #E4EAF0; --text-2: #A9B6C2; --text-3: #8C9AA7;
  --accent: #5FB0E8; --accent-hover: #7CC0EE; --on-accent: #06121C; --accent-soft: #16293A; --accent-text: #7CC0EE; --focus: #7CC0EE;
  --ok: #3FBE86; --ok-text: #5CD39C; --ok-soft: #12261D;
  --warn: #E0A02E; --warn-text: #EDB451; --warn-soft: #33280F;
  --crit: #EF6E60; --crit-text: #F58A7E; --crit-soft: #3A1D1B; --crit-line: #7A3A33; --on-crit: #1A0B09;
  --paused: #6E7F8B; --paused-text: #93A3AF;
  --internal-tint: #2B2413; --note-line: #8C6A26; --note-ink: #F2C66D; --on-note: #1E1606;
  --tip-bg: #E4EAF0; --tip-fg: #0F151B; --tip-fg-2: #3D4A57; --toast-ok: #16855A;
  --av0-bg: #1D3A52; --av0-fg: #A9D4F5; --av1-bg: #173A31; --av1-fg: #9FDCC6;
  --av2-bg: #3A2C1C; --av2-fg: #E8C7A0; --av3-bg: #26313C; --av3-fg: #C5D0DA;
  --series-a: #5FB0E8; --series-b: #F08A55;
  --si-bg: #0A1C2C; --si-glow: rgba(95, 176, 232, .22);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-seg: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* IBM Plex (SIL Open Font License 1.1), served from this app rather than
   Google Fonts: no third-party request holding up every page, and nothing to
   break if Google's font servers are slow. Latin subset; Sans is one
   variable-weight file. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/ibm-plex-sans.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================== base ==== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: var(--scheme); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); color: var(--text); font: 400 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl { margin: 0; }
a { color: var(--accent-text); }
code { font: 12.5px var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--sunken); }
::selection { background: var(--accent-soft); }
::placeholder { color: var(--text-3); opacity: 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* The hidden file input sits under its Attach button. Opening the picker focuses
   it, and the browser scrolls the page to reveal whatever it focuses: on a long
   ticket that threw the page thousands of pixels down, to a blank screen. Pinned
   to the window, focusing it has nowhere to scroll to. */
input[type="file"].sr-only { position: fixed !important; top: 0; left: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mono, .num { font-family: var(--mono); font-size: .93em; font-variant-numeric: tabular-nums; }
.hint { font-size: 12px; line-height: 1.45; color: var(--text-3); }
.upload-warning { color: var(--crit); font-weight: 500; }
.cell-dim { color: var(--text-2); }
kbd { font: 500 11px/1 var(--mono); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--line); border-bottom-width: 2px; color: var(--text-2); background: var(--surface); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 12px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.no-js .js-only { display: none; }
html:not(.no-js) .js-hide { display: none; }

/* ======================================================= sandbox bar ==== */
/* The first thing on every screen, and it never scrolls away: a notice that
   scrolls off with the page is a notice somebody misses. */
.sandbox-bar { flex: none; background: var(--note-ink); color: var(--on-note); font-size: 13px; }
.sandbox-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 34px; padding: 5px 16px; }
.sandbox-tag { padding: 1px 7px; border-radius: 4px; border: 1px solid currentColor; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sandbox-words { flex: 1 1 260px; }
.sandbox-link { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.sandbox-link:focus-visible { outline-color: currentColor; }

/* ============================================================= shell ==== */
.app { flex: 1; min-height: 0; display: flex; }
.main-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
main:focus { outline: none; }

.sidebar {
  flex: none; width: 232px; display: flex; flex-direction: column; gap: 10px; min-height: 0;
  padding: 10px 10px 12px; background: var(--side); border-right: 1px solid var(--line);
  position: relative; z-index: 5; transition: width .22s var(--ease);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-left: 6px; }
.mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px; }
.brand-t { display: grid; line-height: 1.25; min-width: 0; }
.brand-t strong { font-size: 14px; font-weight: 600; }
.brand-t span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.jump { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 7px 0 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 13px; cursor: pointer; text-align: left; }
.jump:hover { border-color: var(--field); color: var(--text); }
.jump .i { width: 16px; height: 16px; }
.jump-l { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { flex: 1; min-height: 0; overflow: auto; margin: 0 -10px; padding: 0 10px 8px; scrollbar-width: thin; }
.nav-h { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 14px 12px 5px; }
.nav-a { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 12px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.nav-a .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-a:hover { background: var(--side-hover); color: var(--text); }
.nav-a[aria-current] { background: var(--side-cur); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.nav-a[aria-current] .i { color: var(--accent-text); }
.nav-a.sub { height: 32px; padding-left: 28px; font-size: 13px; }
.nav-a.sub .i { width: 16px; height: 16px; }
/* The current-page bar. A real element rather than a pseudo-element so the
   view transition can slide it from the old page's link to the new one's. */
.nav-ind { position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); transform-origin: 0 0; }
.count { flex: none; min-width: 22px; padding: 0 6px; border-radius: 8px; text-align: center; font: 500 11px/17px var(--mono); background: var(--badge); color: var(--text-2); }
.count.crit { background: var(--crit); color: var(--on-crit); }

.side-foot { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.me { position: relative; display: flex; align-items: center; gap: 10px; padding: 2px 4px 2px 7px; min-width: 0; }
.me .av { width: 30px; height: 30px; font-size: 11px; }
.me .lbl { display: grid; line-height: 1.25; min-width: 0; }
.me strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { font-size: 11.5px; color: var(--text-3); }
.side-tools { display: flex; align-items: center; gap: 2px; }
.viewer-enter { display: contents; }
/* Shown only while an admin is in viewer mode: says so, and is the way out. */
.viewer-pill { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font: 500 12.5px/1.25 var(--font); text-align: left; cursor: pointer; }
.viewer-pill .lbl { display: grid; }
.viewer-pill b { font-weight: 600; color: var(--text); }
.viewer-pill:hover { border-style: solid; }
.signout { margin-left: auto; }

.icon-btn { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: var(--side-hover); color: var(--text); }
.icon-btn.drawer-close { display: none; margin-left: auto; }
.theme-toggle .i-sun { display: var(--sun); }
.theme-toggle .i-moon { display: var(--moon); }

/* The phone bar. Only shown below 1024px, where the sidebar becomes a
   drawer; the menu button is the first thing reached by keyboard there. */
.topbar {
  display: none; flex: none; align-items: center; gap: 4px; height: 56px; padding: 0 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-title { flex: 1; min-width: 0; display: grid; line-height: 1.2; padding-left: 4px; }
.topbar-title strong { font-size: 14px; font-weight: 600; }
.topbar-title span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.menu-button:hover {
  background: var(--hover);
}
.menu-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.drawer-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(8, 12, 16, .5); }

/* Rail: the sidebar folded to its icons. Labels stay in the DOM as the
   links' accessible names and come back as tooltips on hover and focus. */
@media (min-width: 1024px) {
  [data-rail="1"] .sidebar { width: 64px; }
  [data-rail="1"] .sidebar .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-rail="1"] .nav { overflow: visible; }
  [data-rail="1"] .nav-h { height: 1px; padding: 0; margin: 10px 12px; background: var(--line); }
  [data-rail="1"] .nav-a, [data-rail="1"] .nav-a.sub { height: 36px; padding-left: 12px; }
  [data-rail="1"] .nav-a.sub .i { width: 18px; height: 18px; }
  [data-rail="1"] .sidebar .count { position: absolute; top: 1px; left: 24px; min-width: 18px; padding: 0 4px; font-size: 10px; line-height: 15px; border: 1.5px solid var(--side); }
  [data-rail="1"] .jump { width: 44px; padding: 0; justify-content: center; }
  [data-rail="1"] .me { padding: 2px 0; justify-content: center; }
  [data-rail="1"] .side-tools { flex-direction: column; }
  [data-rail="1"] .signout { margin: 0; width: 32px; padding: 0; }
  [data-rail="1"] .viewer-pill { justify-content: center; padding: 6px 0; }
  [data-rail="1"] [data-tip]:hover::after, [data-rail="1"] [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 50;
    padding: 5px 8px; border-radius: 6px; background: var(--tip-bg); color: var(--tip-fg);
    font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-pop);
  }
}

/* =========================================================== buttons ==== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--field); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none; }
.btn .i { width: 16px; height: 16px; }
.btn:hover { background: var(--hover); }
.btn-sm { padding: 0 10px; font-size: 12.5px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-danger { background: var(--crit); border-color: var(--crit); color: var(--on-crit); }
.btn-danger:hover { background: var(--crit); filter: brightness(1.08); }
.btn-danger-o { background: var(--surface); border-color: var(--crit-line); color: var(--crit-text); }
.btn-danger-o:hover { background: var(--crit-soft); }
.btn-block { width: 100%; }
.btn:disabled { cursor: not-allowed; background: var(--sunken); border-color: var(--line); color: var(--text-3); }

/* ============================================================= forms ==== */
input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="datetime-local"], select, textarea {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--field); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 13px;
}
select { padding-right: 30px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { height: auto; min-height: 110px; padding: 9px 11px; line-height: 1.5; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
input[aria-invalid="true"] { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.field { display: grid; gap: 4px; min-width: 0; margin-bottom: 12px; }
.field > label { font-size: 12px; font-weight: 500; color: var(--text-2); }
label.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); cursor: pointer; }
label.check input { margin-top: 2px; flex: none; }
.fld { display: grid; gap: 6px; min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.fld-l { padding: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.opt { font-size: 12px; font-weight: 400; color: var(--text-3); }
.inp { height: 38px; padding: 0 12px; font-size: 14px; }
textarea.inp { height: auto; min-height: 130px; padding: 10px 12px; line-height: 1.5; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.files li { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border-radius: 6px; background: var(--sunken); font-size: 12.5px; }
.files .mono { margin-left: auto; color: var(--text-3); }

/* ==================================================== page scaffolding === */
.page { padding: 24px 32px 88px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 20px; }
.page-head h1 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.page-head p, .page-sub { margin-top: 3px; max-width: 72ch; color: var(--text-2); }
.panel { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.panel + .panel { margin-top: 16px; }
.panel > h2 { font-size: 14px; font-weight: 600; }
.panel .sub, .section-note { margin: 2px 0 12px; font-size: 12.5px; color: var(--text-2); }
.sec-head { margin: 28px 0 10px; }
.sec-head h2 { font-size: 15px; font-weight: 600; }
.sec-head p { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.caveat { margin-top: 14px; max-width: 75ch; font-size: 12.5px; color: var(--text-3); }
.note-line { margin-bottom: 18px; font-size: 13px; color: var(--text-2); }
.empty, .dt-empty, .empty-page { display: grid; justify-items: start; gap: 6px; max-width: 460px; padding: 36px 22px; }
.empty h2, .dt-empty h2, .empty-page h2 { font-size: 15px; font-weight: 600; }
.empty p, .dt-empty p, .empty-page p { font-size: 13px; color: var(--text-2); }
.empty .btn, .empty-page .btn, .empty-actions { margin-top: 8px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.e-ic { width: 28px; height: 28px; color: var(--text-3); margin-bottom: 4px; stroke-width: 1.5; }
.dt-empty { padding: 64px 32px; }
.err-code { font-size: 13px; color: var(--text-3); }

/* Tables: the metrics fallbacks, settings, my tickets, deleted. */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); text-align: left; white-space: nowrap; }
td { padding: 9px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.table-wrap, .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.panel > .table-wrap { margin: 12px -16px -14px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.tbl { min-width: 560px; }
.tbl td.mono { white-space: nowrap; color: var(--text-2); }
.tbl .ticket-link { font-weight: 500; }
.tbl tbody tr:hover { background: var(--hover); }
.cell-act { width: 1%; white-space: nowrap; }
.ticket-link { color: var(--accent-text); }

/* =============================================== badges, glyphs, chips === */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.badge.st-new::before, .badge.st-open::before, .badge.st-waiting::before, .badge.st-resolved::before, .badge.st-closed::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.badge.st-new::before { border: 1.5px solid var(--accent); }
.badge.st-open::before { background: conic-gradient(var(--accent) 0 50%, transparent 0); border: 1.5px solid var(--accent); }
.badge.st-waiting::before { border: 1.5px dashed var(--paused); }
.badge.st-resolved::before { background: var(--ok); }
.badge.st-closed::before { background: var(--paused); }
.badge.pr-critical { color: var(--crit-text); font-weight: 600; }
.badge.pr-high { color: var(--warn-text); }
.pg { width: 14px; height: 14px; flex: none; display: inline-block; }
.pg .off { fill: var(--line); }
.pg-low .on { fill: var(--text-3); }
.pg-normal .on { fill: var(--text-2); }
.pg-high .on { fill: var(--warn); }
.pg .pc { fill: var(--crit); }
.pg .pc-x { fill: none; stroke: var(--on-crit); stroke-width: 1.8; stroke-linecap: round; }
.sla { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: 5px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.sla .i { width: 13px; height: 13px; stroke-width: 2; }
.sla-breached { background: var(--crit-soft); color: var(--crit-text); }
.sla-due-soon { background: var(--warn-soft); color: var(--warn-text); }
.sla-met { padding-left: 0; color: var(--ok-text); }
.sla-paused { padding-left: 0; color: var(--paused-text); }
.sla-flag { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 4px; font: 500 11.5px var(--font); white-space: nowrap; }
.sla-flag.is-breached { background: var(--crit-soft); color: var(--crit-text); }
.sla-flag.is-due-soon { background: var(--warn-soft); color: var(--warn-text); }
.sla-flag.is-met { background: var(--ok-soft); color: var(--ok-text); }
.sla-flag.is-paused { background: var(--sunken); color: var(--paused-text); }
.av { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; font: 600 10px/1 var(--font); letter-spacing: .02em; background: var(--av3-bg); color: var(--av3-fg); }
.av-0 { background: var(--av0-bg); color: var(--av0-fg); }
.av-1 { background: var(--av1-bg); color: var(--av1-fg); }
.av-2 { background: var(--av2-bg); color: var(--av2-fg); }
.av-none { background: transparent; border: 1.5px dashed var(--field); }

/* ======================================================== list pane ===== */
.is-workbench main { overflow: hidden; }
.is-workbench .page { height: 100%; padding: 0; }
.workbench { display: flex; height: 100%; }
.list-pane { flex: none; width: clamp(340px, 32vw, 460px); display: flex; flex-direction: column; min-height: 0; position: relative; background: var(--surface); border-right: 1px solid var(--line); container: list / inline-size; }
.list-head { display: grid; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.lh-top { display: flex; align-items: baseline; gap: 8px; }
.lh-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.lh-count { font-size: 12.5px; color: var(--text-3); }
.tabs { position: relative; display: flex; gap: 2px; margin: 0 -14px; padding: 0 8px; border-bottom: 1px solid var(--line-2); }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border-radius: 6px 6px 0 0; color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.tab:hover, .tab[aria-current] { color: var(--text); }
.tab:focus-visible { outline-offset: -2px; }
.tab .n { font: 500 11px/16px var(--mono); padding: 0 5px; border-radius: 4px; background: var(--sunken); color: var(--text-2); }
.tab .n.crit { background: var(--crit-soft); color: var(--crit-text); }
.tab-ind { position: absolute; left: 4px; right: 4px; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 0 0; }
.lh-search { display: flex; gap: 6px; }
.search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 10px; border: 1px solid var(--field); border-radius: 7px; background: var(--surface); color: var(--text-3); cursor: text; }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.search .i { width: 16px; height: 16px; }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none; font-size: 13px; color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* A filter chip is a native select wearing a pill: keyboard, screen readers
   and phones get the platform's own picker for free. */
.chip { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 32px; max-width: 230px; padding: 0 0 0 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--field); color: var(--text); }
.chip:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.chip-k::after { content: ":"; }
.chip select { width: auto; max-width: 150px; height: 30px; padding: 0 26px 0 0; border: 0; background-color: transparent; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; color: inherit; font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; outline: none; }
button.chip { padding-right: 11px; }
.chip-clear { display: inline-flex; align-items: center; height: 32px; padding: 0 6px; font-size: 12.5px; font-weight: 500; }
.list-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.list-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; scrollbar-width: thin; }
.rows { list-style: none; margin: 0; padding: 0 0 72px; }
.row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); border-bottom: 1px solid var(--line-2); }
.row:not(.row:has(.ck-hit)) { grid-template-columns: 12px minmax(0, 1fr); }
.row:not(.is-sel):hover { background: var(--hover); }
.row.is-picked { background: var(--sel); }
/* The open ticket's highlight. Its own element, so the view transition can
   slide it from the previous row to this one when the next ticket opens. */
.hl { position: absolute; inset: 0; background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); pointer-events: none; transform-origin: 0 0; }
.ck-hit { position: relative; z-index: 1; display: grid; place-items: center; padding-left: 6px; cursor: pointer; }
.row-check { opacity: 0; }
.row:hover .row-check, .row-check:focus-visible, .row-check:checked, .has-sel .row-check { opacity: 1; }
.row-link { position: relative; z-index: 1; grid-column: 2; display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 8px; row-gap: 3px; padding: 8px 14px 8px 4px; color: inherit; text-decoration: none; min-width: 0; }
.row-link:focus-visible { outline-offset: -2px; }
.row-link > .pg { grid-row: 1; align-self: center; }
.l1, .l2 { grid-column: 2; display: flex; align-items: center; gap: 8px; min-width: 0; }
.r-subj { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-time { flex: none; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.r-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-tags { flex: none; display: flex; align-items: center; gap: 8px; }
@container list (width < 380px) {
  .row-link { padding-top: 6px; padding-bottom: 6px; row-gap: 2px; }
  .l2 { flex-wrap: wrap; row-gap: 3px; }
  .r-meta { flex-basis: 100%; }
  .tabs { gap: 0; padding: 0 6px; }
  .tab { padding: 0 5px; gap: 4px; font-size: 12.5px; }
  .lf-info { display: none; }
}
.list-foot { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 14px; border-top: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--text-3); }
.pick-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pager { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.page-n { padding: 0 6px; color: var(--text-2); white-space: nowrap; }
/* Floats over the list only once something is ticked. A delete control on
   screen permanently invites the accident it exists to prevent. */
.bulk-bar { position: absolute; left: 8px; right: 8px; bottom: 50px; z-index: 6; display: grid; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-fg); box-shadow: var(--shadow-pop); --focus: var(--tip-fg); }
.bulk-row { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.bulk-count { margin-right: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bulk-bar .btn-ghost { color: var(--tip-fg); }
.bulk-bar .btn-ghost:hover { background: rgba(127, 140, 153, .25); color: var(--tip-fg); }
.bulk-confirm { display: grid; gap: 8px; padding: 8px 8px 6px 0; border-top: 1px solid var(--tip-fg-2); font-size: 12.5px; }
.bulk-confirm a { color: inherit; }
.bulk-confirm .field { margin: 0; }
.bulk-confirm .field > label { color: var(--tip-fg); }
.bulk-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ====================================================== detail pane ===== */
.detail { flex: 1; min-width: 0; overflow: auto; background: var(--surface); container: detail / inline-size; scrollbar-width: thin; }
.page-ticket { container: detail / inline-size; }
.page-ticket .dt { padding: 0; }
.dt { padding: 16px 28px 56px; }
.dt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 34px; font-size: 12.5px; color: var(--text-3); }
.back { display: none; margin-left: -8px; }
.back.is-always { display: inline-flex; }
.dt-ref { font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 2px 6px; border-radius: 4px; background: var(--sunken); }
.dt-owner { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.owner { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); line-height: 1.2; }
.owner .av { width: 28px; height: 28px; font-size: 10.5px; }
.owner small { display: block; font-size: 11px; color: var(--text-3); }
.dt-title { margin: 8px 0 10px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dt-title:focus { outline: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12.5px; color: var(--text-2); }
.tag .i { width: 14px; height: 14px; color: var(--text-3); }
.sla-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; padding: 8px 12px; border-radius: 7px; font-size: 13px; }
.sla-strip > .i { width: 16px; height: 16px; }
.ss-main { font-weight: 600; }
.ss-sub { flex-basis: 100%; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.ss-sub .sla-flag { height: 18px; margin: 0 2px; }
.sla-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sla-strip.sla-due-soon { background: var(--warn-soft); color: var(--warn-text); }
.sla-strip.sla-breached { background: var(--crit-soft); color: var(--crit-text); }
.sla-strip.sla-met { background: var(--ok-soft); color: var(--ok-text); }
.sla-strip.sla-paused { background: var(--sunken); color: var(--paused-text); }
.dt-body { margin-top: 20px; }
.dt-main { min-width: 0; }
.thread { list-style: none; margin: 0; padding: 0; position: relative; }
.thread::before { content: ""; position: absolute; left: 15.5px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.msg { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 8px 0 14px; }
.msg > .av { position: relative; width: 32px; height: 32px; font-size: 11px; box-shadow: 0 0 0 4px var(--surface); }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 22px; font-size: 13px; }
.msg-head strong { font-weight: 600; }
.role { padding: 0 5px; border-radius: 4px; background: var(--sunken); font-size: 11px; font-weight: 500; line-height: 17px; color: var(--text-2); }
.msg-kind { color: var(--text-3); }
.msg-head time { margin-left: auto; font: 400 12px var(--mono); color: var(--text-3); }
.msg-body { margin-top: 3px; max-width: 90ch; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.note .msg-main { position: relative; padding: 10px 14px 12px 20px; border: 1px solid var(--note-line); border-radius: 8px; background: var(--internal-tint); overflow: hidden; }
.msg.note .msg-main::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(-45deg, var(--note-line) 0 3px, transparent 3px 6px); }
.note-label { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--note-ink); }
.note-label .i { width: 13px; height: 13px; stroke-width: 2; }
.msg.note .role { background: transparent; border: 1px solid var(--note-line); color: var(--note-ink); }
.att { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 12.5px; color: var(--text); text-decoration: none; max-width: 100%; }
.att:hover { border-color: var(--field); }
.att .i { width: 15px; height: 15px; color: var(--text-3); }
.att span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .mono { color: var(--text-3); }

/* The composer. Reply or internal note is a switch above the box, and while
   Internal note is picked the whole form changes colour - it is the one
   irreversible choice on the page. */
.composer { margin-top: 6px; padding-left: 44px; }
.composer-h { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.seg { position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; padding: 3px; border-radius: 8px; background: var(--sunken); }
.seg-o { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.seg-o .i { width: 15px; height: 15px; }
.seg-o:has(:checked) { color: var(--text); }
.seg-o:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-seg), 0 0 0 1px var(--line); transition: transform .26s cubic-bezier(.3, 1.3, .5, 1), background-color .2s; }
.seg:has(#internal:checked) .seg-ind { transform: translateX(100%); }
.c-box { border: 1px solid var(--field); border-radius: 9px; background: var(--surface); }
.c-box:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.note-flag { display: flex; align-items: center; gap: 6px; padding: 9px 12px 0; font-size: 12.5px; font-weight: 600; color: var(--note-ink); }
.note-flag .i { width: 14px; height: 14px; }
.c-box textarea { display: block; min-height: 96px; padding: 10px 12px; border: 0; border-radius: 9px 9px 0 0; background: none; outline: none; font-size: 14px; }
.c-cc { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-top: 1px solid var(--line-2); }
.c-cc label { flex: none; font-size: 12px; font-weight: 500; color: var(--text-3); }
.c-cc input { height: 34px; padding: 0; border: 0; background: none; outline: none; }
.c-box .files, .c-box .upload-warning { margin: 0 10px 8px; }
.c-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px; border-top: 1px solid var(--line-2); }
.sr-only:focus-visible + .attach, .sr-only:focus-visible + .drop { outline: 2px solid var(--focus); outline-offset: 2px; }
.c-limit { font-size: 12px; color: var(--text-3); }
.c-sp { flex: 1; }
.c-kbd { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-3); }
.c-foot { margin-top: 6px; font-size: 12px; color: var(--text-3); }
form.is-internal-draft .seg-ind { background: var(--internal-tint); box-shadow: 0 0 0 1px var(--note-line); }
form.is-internal-draft .seg-o:has(:checked) { color: var(--note-ink); }
form.is-internal-draft .c-box { border-style: dashed; border-color: var(--note-line); background: var(--internal-tint); }
form.is-internal-draft .c-bar, form.is-internal-draft .c-cc { border-top-color: var(--note-line); }
form.is-internal-draft #post-update { background: var(--note-ink); border-color: var(--note-ink); color: var(--on-note); }
.history { margin: 18px 0 0 44px; }
.disclosure > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "\25B8\00a0\00a0"; }
.disclosure[open] > summary::before { content: "\25BE\00a0\00a0"; }
.disclosure[open] > summary { margin-bottom: 10px; }
.disclosure > summary:hover { color: var(--text); }
.audit { display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.audit-time { font: 11.5px var(--mono); color: var(--text-3); }
.audit-actor { font-weight: 600; color: var(--text); }

/* === Ticket page === */
.props { padding: 2px 14px 14px; border-radius: 10px; background: var(--surface-2); }
.props-sec + .props-sec { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.props-h { margin: 10px 0; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.props .field { margin-bottom: 10px; }
.props p { font-size: 13px; }
.kv { display: grid; gap: 9px; }
.kv > div { display: grid; gap: 1px; }
.kv dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.kv dt .i { width: 14px; height: 14px; }
.kv dd { margin: 0 0 0 20px; font-size: 13px; overflow-wrap: anywhere; }
.watcher-list, .attachment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.watcher-list li { display: flex; align-items: center; gap: 6px; }
.watcher-list li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.watcher-remove { min-height: 24px; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: var(--crit-text); font-size: 12px; font-weight: 500; cursor: pointer; }
.watcher-remove:hover { background: var(--crit-soft); }
.danger .props-h { color: var(--crit-text); }
.danger .hint { margin-top: 8px; }
.danger-toggle > summary { list-style: none; }
.danger-toggle > summary::-webkit-details-marker { display: none; }
.danger-toggle[open] > summary { margin-bottom: 10px; }
.danger-toggle form { display: grid; gap: 8px; }
.danger-toggle .field { margin: 0; }
@container detail (width >= 700px) {
  .dt-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(248px, 22cqw, 340px); gap: 28px; align-items: start; }
}
@media (min-width: 1021px) {
  /* The action panel stays in reach while the thread scrolls, with its own
     scroll for a long panel on a short screen - only where the detail pane
     is wide enough for two columns. Stacked, it must not pin over the thread. */
  @container detail (width >= 700px) {
    .ticket-side > .panel:first-child {
      position: sticky;
      top: 16px;
      max-height: calc(100vh - 96px);
      overflow-y: auto;
    }
  }
}
@container detail (width < 700px) {
  .dt { padding: 12px 16px 72px; }
  .dt-body { display: flex; flex-direction: column; gap: 18px; }
  .composer, .history { padding-left: 0; margin-left: 0; }
  .ss-sub { margin-left: 0; }
}
/* === end Ticket page === */

/* ======================================================= new ticket ===== */
.nt { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 340px); gap: 40px; align-items: start; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.cats label, .pri-opt { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.cats label { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; font-size: 13px; }
.cats label:hover, .pri-opt:hover { border-color: var(--field); }
.cats label:has(:checked), .pri-opt:has(:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cats label:has(:focus-visible), .pri-opt:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.cats input, .pri-opt input { flex: none; }
.pris { display: grid; gap: 6px; margin-top: 4px; }
.pri-opt { display: grid; grid-template-columns: 16px 104px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; }
.po-n { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.po-d { font-size: 13px; color: var(--text-2); }
.po-t { font: 500 12px var(--mono); color: var(--text-2); white-space: nowrap; }
.drop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--field); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.drop:hover { border-color: var(--accent); color: var(--text); }
.drop .i { width: 20px; height: 20px; }
.drop strong { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }
.nt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 4px; }
.nt-aside { position: sticky; top: 0; display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.nt-aside h2 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.nt-aside p { font-size: 13px; color: var(--text-2); }
.nt-aside hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--line); }

/* The confirmation a requester lands on straight after raising a ticket. */
.raised { display: flex; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--ok); border-radius: 10px; background: var(--ok-soft); }
.raised-ic { width: 28px; height: 28px; color: var(--ok-text); stroke-width: 1.6; }
.raised-body { display: grid; gap: 6px; min-width: 0; }
.raised h2 { font-size: 16px; font-weight: 600; color: var(--ok-text); }
.raised p { max-width: 70ch; font-size: 13.5px; color: var(--text); }
.raised-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Sandbox diversion on the pages where a real request would be lost. */
.divert { margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--note-line); border-radius: 10px; background: var(--internal-tint); color: var(--note-ink); }
.divert h2 { margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.divert p { margin: 0 0 12px; max-width: 62ch; font-size: 13.5px; line-height: 1.55; }
.divert .btn-primary { background: var(--note-ink); border-color: var(--note-ink); color: var(--on-note); }
.divert-foot { margin: 10px 0 0; font-size: 12.5px; }
.divert-slim { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.divert-slim p { margin: 0; flex: 1 1 320px; }

/* ========================================================== metrics ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--line); overflow: hidden; }
.kpi { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 14px 16px 16px; background: var(--surface); }
.kpi-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.kpi-v { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-n { font-size: 12px; color: var(--text-3); }
.kpi.is-crit .kpi-l, .kpi.is-crit .kpi-v { color: var(--crit-text); }
.kpi.is-warn .kpi-l, .kpi.is-warn .kpi-v { color: var(--warn-text); }
.kpi.is-ok .kpi-v { color: var(--ok-text); }
.chart-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.chart-cols > .panel + .panel { margin-top: 0; }
.chart-title { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.chart-sub { margin: 0 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.chart-wrap { position: relative; min-width: 0; }
canvas { max-height: 340px; }
.loading { padding: 30px 0; text-align: center; font-size: 13px; color: var(--text-2); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
.legend div { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.bar-row { margin-bottom: 11px; }
.bar-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 12.5px; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { flex: none; font: 12px var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
/* display:block is load-bearing: the fill is a span, and an inline span
   ignores width - you would get the number beside an empty track. */
.bar-fill { display: block; height: 100%; width: var(--pct, 0%); border-radius: 999px; background: var(--series, var(--accent)); transform-origin: left; animation: grow .7s var(--ease) both; }
.disclosure { margin-top: 12px; }
.disclosure .table-wrap { margin: 0; }

/* ========================================================= settings ===== */
.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-form > .panel + .panel { margin-top: 0; }
.settings-section h2 { margin-bottom: 10px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.settings-grid .field-wide { grid-column: 1 / -1; }
.settings-save { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 -32px; padding: 12px 32px; border-top: 1px solid var(--line); background: var(--bg); }
.ro-label { width: 40%; color: var(--text-2); }
.ro-value { font: 12.5px var(--mono); overflow-wrap: anywhere; }
td.ref { font: 12px var(--mono); color: var(--text-2); }

/* ============================================================ toasts ==== */
/* Confirmations fade out by themselves (workbench.js); warnings and errors
   wait for the person to dismiss them. */
.flashes { position: fixed; top: 16px; right: 16px; z-index: 90; display: grid; gap: 8px; justify-items: end; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.flash { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 6px 8px 12px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-fg); box-shadow: var(--shadow-pop); font-size: 13px; --focus: var(--tip-fg); }
.flash > .i { color: var(--toast-ok); stroke-width: 2.2; }
.flash-warn > .i { color: var(--warn); }
.flash-error { background: var(--crit); color: var(--on-crit); }
.flash-error > .i { color: inherit; }
.flash-x { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 4px; border: 0; border-radius: 6px; background: none; color: inherit; opacity: .75; cursor: pointer; }
.flash-x:hover { opacity: 1; background: rgba(127, 140, 153, .22); }
.flash-x .i { width: 15px; height: 15px; }

#idle-warning { position: fixed; left: 50%; bottom: 16px; z-index: 95; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-fg); box-shadow: var(--shadow-pop); font-size: 13px; --focus: var(--tip-fg); }
#idle-warning[hidden] { display: none; }
#idle-warning b { font-family: var(--mono); }

/* =========================================================== palette ==== */
dialog.palette { width: min(620px, calc(100vw - 32px)); max-height: min(560px, 76vh); margin: 12vh auto 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden; }
dialog.palette[open] { display: flex; flex-direction: column; }
dialog.palette::backdrop { background: rgba(8, 12, 16, .5); }
.pal-search { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.pal-search input { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: none; outline: none; font-size: 15px; }
.pal-list { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 6px; overflow: auto; }
.pal-g { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.pal-o { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 10px; border-radius: 7px; font-size: 13.5px; cursor: pointer; }
.pal-o[aria-selected="true"] { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.pal-o .i { width: 16px; height: 16px; color: var(--text-3); }
.pal-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-l .mono { margin-right: 6px; color: var(--text-2); }
.pal-empty { padding: 18px 12px; font-size: 13px; color: var(--text-2); }
.pal-foot { flex: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 14px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--text-3); }
.pal-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* ================================================== queue layouts ===== */
/* The layout switch: split, table or board, as a segmented control whose
   pill slides to the chosen layout (workbench.js plays it across the page
   load). In the narrow list pane only the icons show; the labels stay as
   their accessible names. */
.view-switch { position: relative; margin-left: auto; display: inline-flex; flex: none; padding: 3px; border-radius: 8px; background: var(--sunken); }
.vs-o { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; color: var(--text-2); font-size: 12.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.vs-o:hover { color: var(--text); }
.vs-o[aria-current] { color: var(--text); }
.vs-o:focus-visible { outline-offset: 0; }
.vs-o .i { position: relative; z-index: 1; width: 16px; height: 16px; }
.vs-l { position: relative; z-index: 1; }
.vs-ind { position: absolute; inset: 0; z-index: 0; border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-seg), 0 0 0 1px var(--line); transform-origin: 0 0; }
.list-pane .vs-o { padding: 0 7px; }
.list-pane .vs-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lh-top { align-items: center; }

/* Table and board: the header runs the full width, search beside filters. */
.is-queue-wide main { overflow: hidden; }
.is-queue-wide .page { height: 100%; padding: 0; }
.queue-wide { display: flex; flex-direction: column; height: 100%; min-width: 0; background: var(--surface); }
.queue-wide .list-head { grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 16px 24px 12px; }
.queue-wide .lh-top, .queue-wide .tabs { grid-column: 1 / -1; }
.queue-wide .tabs { margin: 0 -24px; padding: 0 18px; }
.qw-body { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; }
.queue-wide .empty { margin: 0 auto; }
.queue-wide .bulk-bar { left: 0; right: 0; width: min(560px, calc(100% - 32px)); margin: 0 auto; }

/* The table: dense, every field in a column, header pinned while it scrolls
   (sideways too on a narrow screen, never the page). */
.qtable-wrap { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.qtable { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.qtable th { position: sticky; top: 0; z-index: 2; padding: 0 14px; height: 38px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); text-align: left; white-space: nowrap; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.th-sort .i { width: 13px; height: 13px; opacity: .35; }
.th-sort:hover .i, th[aria-sort="ascending"] .th-sort .i, th[aria-sort="descending"] .th-sort .i { opacity: 1; color: var(--accent-text); }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--text); }
.qtable td { padding: 9px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; white-space: nowrap; }
.qtable tbody tr { position: relative; }
.qtable tbody tr:hover { background: var(--hover); }
.qtable tbody tr.is-picked { background: var(--sel); }
.qtable tr.t-sla-breached td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.qtable tr.t-sla-due-soon td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.qtable .pick-cell { position: relative; z-index: 1; width: 44px; padding-right: 0; }
.qtable .ck-hit { padding-left: 0; }
.t-subj { width: 40%; min-width: 280px; white-space: normal; }
.qtable .ticket-link { display: block; color: var(--text); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.qtable .ticket-link::after { content: ""; position: absolute; inset: 0; }
.qtable .ticket-link:hover { color: var(--accent-text); }
.qtable .ticket-link:focus-visible { outline: none; }
.qtable tbody tr:has(.ticket-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.t-cat { display: block; margin-top: 1px; font-size: 12px; color: var(--text-3); }
.t-owner { display: inline-flex; align-items: center; gap: 7px; }
.t-time { color: var(--text-3); }

/* The board: one lane per SLA state, worst first. Each lane scrolls on its
   own, so a long Within target lane never pushes Breached off screen. */
.board { flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(270px, 1fr)); gap: 14px; padding: 16px 24px; overflow-x: auto; background: var(--bg); }
.lane { --lane: var(--paused); --lane-soft: var(--sunken); --lane-ink: var(--paused-text);
  display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-top: 3px solid var(--lane); border-radius: 10px; background: var(--surface-2); }
.lane-breached { --lane: var(--crit); --lane-soft: var(--crit-soft); --lane-ink: var(--crit-text); }
.lane-due-soon { --lane: var(--warn); --lane-soft: var(--warn-soft); --lane-ink: var(--warn-text); }
.lane-met { --lane: var(--ok); --lane-soft: var(--ok-soft); --lane-ink: var(--ok-text); }
.lane-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; }
.lane-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--lane-soft); color: var(--lane-ink); }
.lane-ic .i { width: 16px; height: 16px; }
.lane-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.lane-t h2 { font-size: 14px; font-weight: 600; }
.lane-t span { font-size: 12px; color: var(--text-3); }
.lane-n { font: 600 18px var(--mono); color: var(--lane-ink); }
.lane-cards { flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0 10px 12px; display: grid; align-content: start; gap: 8px; scrollbar-width: thin; }
.card { display: grid; gap: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-seg); }
.card:hover { border-color: var(--field); }
.card:focus-visible { outline-offset: 1px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-top .mono { font-size: 11.5px; color: var(--text-3); }
.card-subj { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.card-meta { font-size: 12px; color: var(--text-2); }
.card-foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.card-time { margin-left: auto; font: 11.5px var(--mono); color: var(--text-3); }
.lane-empty { padding: 18px 10px; border: 1px dashed var(--line); border-radius: 9px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ============================================================ sign-in === */
/* Split screen: a product showcase on the left (the pitch, and a small
   illustration of the helpdesk built from its own components), the sign-in
   on the right. Stacks on narrow screens, showcase first and shorter. The
   page scrolls normally, unlike the fixed-height app. */
body.signin { height: auto; min-height: 100vh; min-height: 100dvh; overflow: auto; }
.si { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); min-height: 0; }
.si-show {
  --si-grid: rgba(255, 255, 255, .06); --si-ink: #F1F6FB; --si-ink-2: #B8CCDD;
  position: relative; display: flex; flex-direction: column; gap: 28px; padding: 40px 48px; overflow: hidden;
  background: radial-gradient(circle at 78% 30%, var(--si-glow), transparent 55%), linear-gradient(var(--si-grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--si-grid) 1px, transparent 1px) 0 0 / 32px 32px, var(--si-bg);
  color: var(--si-ink);
}
.si-brand { display: flex; align-items: center; gap: 10px; }
.si-brand .mark { background: var(--si-ink); color: var(--si-bg); }
.si-brand strong { display: block; font-size: 15px; font-weight: 600; }
.si-brand span span { font-size: 12.5px; color: var(--si-ink-2); }
.si-pitch { margin-top: auto; }
.si-pitch h2 { max-width: 16ch; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.si-pitch p { max-width: 46ch; margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--si-ink-2); }

/* The illustration: real component shapes, slightly turned, layered. The
   tilt uses `rotate`, not transform, so Motion's movement can't erase it. */
.si-art { position: relative; flex: 1; min-height: 340px; max-height: 470px; max-width: 620px; margin-bottom: auto; }
.art { position: absolute; display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(4, 14, 24, .45), 0 2px 6px rgba(4, 14, 24, .25); }
.art-ticket { top: 4%; left: 0; width: min(330px, 56%); rotate: -1.5deg; }
.art-reply { top: 44%; left: 14%; width: min(360px, 72%); rotate: 1deg; }
.art-toast { top: 2%; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-fg); rotate: 2deg; }
.art-sla { bottom: 2%; right: 4%; display: flex; align-items: center; gap: 12px; rotate: -2deg; }
.art-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-3); }
.art-subj { font-size: 15px; font-weight: 600; line-height: 1.3; }
.art-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.art-who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.art-who b { color: var(--text); font-weight: 600; }
.art-body { font-size: 13.5px; line-height: 1.5; }
.art-toast .i { color: var(--toast-ok); stroke-width: 2.2; }
.art-toast strong { display: block; font-size: 13px; }
.art-toast span { font-size: 12px; color: var(--tip-fg-2); }
.art-ring { width: 42px; height: 42px; flex: none; }
.art-ring circle { fill: none; stroke-width: 4; }
.art-ring .track { stroke: var(--sunken); }
.art-ring .fill { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 28; transform: rotate(-90deg); transform-origin: 50% 50%; }
.art-sla strong { display: block; font-size: 13.5px; }
.art-sla span { font-size: 12px; color: var(--text-2); }

/* The sign-in column. */
.si-side { position: relative; display: grid; place-items: center; padding: 40px 32px; background: var(--bg); }
.si-tools { position: absolute; top: 14px; right: 14px; }
.si-card { width: min(400px, 100%); display: grid; gap: 18px; }
.si-card h1 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.si-card .sub { margin-top: 4px; font-size: 14.5px; color: var(--text-2); }
.si-error { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--crit-line); border-radius: 8px; background: var(--crit-soft); color: var(--crit-text); font-size: 13.5px; }
.si-error .i { margin-top: 1px; }
.btn-microsoft { height: 48px; gap: 10px; font-size: 15px; font-weight: 600; }
.si-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.si-notes li { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.si-notes .i { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); }
.si-notes b { color: var(--text); font-weight: 600; }
.si-foot { padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--text-3); }

@media (max-width: 960px) {
  .si { grid-template-columns: minmax(0, 1fr); }
  .si-show { padding: 24px 20px 28px; gap: 18px; }
  .si-art { min-height: 230px; }
  .art-sla, .art-reply { display: none; }
  .art-ticket { width: 88%; }
  .art-toast { top: auto; bottom: 0; right: 0; }
  .si-side { place-items: start center; padding: 28px 20px 40px; }
}

/* ===================================================== employee side ===== */
/* An admin's notice for everyone: between the topbar and the page, never
   scrolling away. Amber, the colour this app already uses for "attention,
   not an error". */
.notice { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--warn); background: var(--warn-soft); font-size: 13.5px; }
.notice > .i { margin-top: 1px; color: var(--warn-text); }
.notice p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.notice-t { font-weight: 600; overflow-wrap: anywhere; }
.notice-m { font-size: 12.5px; color: var(--text-2); }

/* Status changes in the conversation: a quieter entry on the same thread
   line, with the note IT left set apart under it. */
.msg.ev { padding-block: 4px 12px; }
.ev-dot { display: grid; place-items: center; width: 32px; height: 22px; }
.ev-dot .i { width: 16px; height: 16px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--surface); color: var(--text-3); }
.ev-waiting .ev-dot .i { color: var(--warn-text); }
.ev-resolved .ev-dot .i, .ev-closed .ev-dot .i { color: var(--ok-text); }
.ev-what { color: var(--text-2); }
.ev-what strong { color: var(--text); font-weight: 600; }
.ev-note { margin-top: 6px; max-width: 90ch; padding: 8px 12px 10px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: var(--surface-2); }
.ev-waiting .ev-note { border-left-color: var(--warn); background: var(--warn-soft); }
.ev-resolved .ev-note { border-left-color: var(--ok); background: var(--ok-soft); }
.ev-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ev-note .msg-body { margin-top: 2px; }

/* What the requester needs to do next, above the conversation. Same shape as
   the "ticket submitted" card, in the colour of its state. */
.ask { display: flex; gap: 14px; margin: 4px 0 18px; padding: 16px 18px; border: 1px solid var(--warn); border-radius: 10px; background: var(--warn-soft); }
.ask.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.ask.is-quiet { border-color: var(--line); background: var(--surface-2); }
.ask.is-quiet .ask-ic { color: var(--text-3); }
.ask-ic { width: 28px; height: 28px; color: var(--warn-text); stroke-width: 1.6; }
.ask.is-ok .ask-ic { color: var(--ok-text); }
.ask-body { display: grid; gap: 10px; min-width: 0; }
.ask h2 { font-size: 16px; font-weight: 600; }
.ask-q { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ask-q p { max-width: 80ch; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-q footer { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ask-actions form { display: contents; }

/* The reply box, when sending will reopen the ticket. */
.c-warn { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); border-radius: 9px 9px 0 0; background: var(--warn-soft); color: var(--warn-text); font-size: 12.5px; }
.c-warn .i { width: 15px; height: 15px; margin-top: 1px; }
.c-warn b { color: var(--text); font-weight: 600; }

/* Withdrawing a ticket. */
.withdraw > summary { list-style: none; }
.withdraw > summary::-webkit-details-marker { display: none; }
.withdraw[open] > summary { margin-bottom: 10px; }
.withdraw-form { display: grid; gap: 10px; }
.withdraw-form .field { margin: 0; }
.wd-reasons { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wd-reasons legend { margin-bottom: 6px; padding: 0; font-size: 12px; font-weight: 500; color: var(--text-2); }
.wd-o { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 13px; cursor: pointer; }
.wd-o:hover { border-color: var(--field); }
.wd-o:has(:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wd-o:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.wd-o input { flex: none; margin: 0; }

/* New ticket: what IT needs for the category picked. */
.need { padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.need-h { font-size: 12.5px; color: var(--text-2); }
.need-h b { color: var(--text); font-weight: 600; }
.need ul { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

/* My tickets. */
.waiting-note { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--warn-soft); font-size: 13.5px; }
.waiting-note .i { color: var(--warn-text); }
.waiting-note a { white-space: nowrap; }
.tbl tr.is-waiting td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.badge.is-you { color: var(--warn-text); font-weight: 600; }
/* Fixed columns, so the lists stacked on this page line up with each other.
   Wide screens only: on a phone the table scrolls and sizes to its content. */
@media (min-width: 721px) {
  .tbl-mine { table-layout: fixed; }
  .tbl-mine th:nth-child(1) { width: 118px; }
  .tbl-mine th:nth-child(3) { width: 150px; }
  .tbl-mine th:nth-child(4) { width: 112px; }
  .tbl-mine th:nth-child(5) { width: 170px; }
  .tbl-mine th:nth-child(6) { width: 104px; }
  .tbl-mine .ticket-link { overflow-wrap: anywhere; }
}
.sub-sec { margin-top: 28px; }
.sub-sec .sec-head { margin-top: 0; }

/* Settings: the notice. */
.notice-panel { margin-bottom: 16px; }
.notice-form { display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; align-items: end; gap: 12px; }
.notice-form .field { margin: 0; }
.notice-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--warn-soft); }
@media (max-width: 720px) { .notice-form { grid-template-columns: minmax(0, 1fr); } }

/* Sign-in: who to call when you can't sign in. */
.si-foot p + p { margin-top: 8px; }
.si-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.si-contact a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.si-contact .i { width: 15px; height: 15px; }

/* ============================================================ motion ==== */
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Entering content is invisible from the first paint until workbench.js
   staggers it in (or base.html's timer gives up waiting). The list rows are
   left alone when a ticket was opened from the list: it is the same list. */
.wb-enter:not(.wb-entered) :is(.page-head, .m-in, .empty),
.wb-enter:not(.wb-entered):not(.wb-from-list) .rows > .row:nth-child(-n+14),
.wb-enter:not(.wb-entered) .qtable tbody tr:nth-child(-n+14),
.wb-enter:not(.wb-entered) .lane { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-a, .icon-btn, .jump, .chip, .tab, .row, .vs-o, .qtable tbody tr { transition: background-color .15s, border-color .15s, color .15s; }
  .card { transition: border-color .15s, box-shadow .2s, transform .2s var(--ease); }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ======================================================== responsive ==== */
@media (hover: none) { .row-check { opacity: 1; } }
@media (max-width: 1100px) {
  .nt, .settings-form { grid-template-columns: minmax(0, 1fr); }
  .nt-aside { position: static; }
}
@media (max-width: 1023px) {
  .topbar { display: flex; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw); visibility: hidden; transform: translateX(-100%); box-shadow: var(--shadow-pop); transition: transform .24s var(--ease), visibility .24s; }
  .sidebar.is-open { visibility: visible; transform: none; }
  .icon-btn.drawer-close { display: inline-grid; }
  .rail-btn { display: none; }
  .nav-a, .nav-a.sub { height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .jump { height: 44px; }
  .page { padding: 18px 16px 88px; }
  .settings-save { margin: 0 -16px; padding: 12px 16px; }
}
@media (max-width: 900px) {
  .list-pane { width: 100%; border-right: 0; }
  .list-head { padding: 12px 16px; }
  .tabs { margin: 0 -16px; padding: 0 10px; }
  /* One swipeable row of filters rather than five stacked ones. */
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
  .chip { flex: none; }
  .workbench[data-pane="list"] .detail { display: none; }
  .workbench[data-pane="detail"] .list-pane { display: none; }
  .back { display: inline-flex; }
  .ck-hit { padding-left: 10px; }
  .row { grid-template-columns: 36px minmax(0, 1fr); }
  .row-link { padding-right: 16px; }
  .flashes { top: 64px; left: 16px; right: 16px; justify-items: stretch; max-width: none; }
  .queue-wide .list-head { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .queue-wide .tabs { margin: 0 -16px; padding: 0 10px; }
  .queue-wide .vs-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .queue-wide .vs-o { padding: 0 8px; }
  /* Lanes side by side, swiped one at a time. */
  .board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; padding: 12px 16px; scroll-snap-type: x mandatory; }
  .lane { scroll-snap-align: start; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .btn, .chip, .tab, .seg-o, .att, .search, .inp, select, .pal-o, .cats label, .wd-o { min-height: 44px; }
  .chip select { height: 42px; }
  .search { height: 44px; }
  .row-link { padding-top: 11px; padding-bottom: 11px; }
  .row-check { width: 20px; height: 20px; }
}
@media (max-width: 720px) {
  .hide-sm { display: none; }
  .pri-opt { grid-template-columns: 16px minmax(0, 1fr); }
  .po-d, .po-t { grid-column: 2; }
  .c-kbd { display: none; }
  .dt-owner { margin-left: 0; }
}
/* No script, no drawer: the sidebar is simply the top of the page. */
@media (max-width: 1023px) {
  .no-js .app { flex-direction: column; overflow: auto; }
  .no-js .sidebar { position: static; visibility: visible; transform: none; width: auto; box-shadow: none; }
  .no-js .topbar { display: none; }
}