/* Demo Help Desk: the service desk console (docs/design.md, D3), built from mocks/a-service-desk/.
   A help desk tool's own queue screen, opened to the public: an ink band carries the line (the number, its lamp, the
   day's minutes), and the queue is a dense, quiet table that restacks into one block per ticket on a phone.
   The type is Demohelpdesk Sans, a Latin subset of Adobe's Source Sans 3 (SIL OFL 1.1); fonts/OFL.txt explains the
   name. No inline styles anywhere: the CSP allows this file and nothing else. */

@font-face { font-family: "Demohelpdesk Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("demohelpdesk-sans-400.64e4936129.woff2") format("woff2"); }
@font-face { font-family: "Demohelpdesk Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("demohelpdesk-sans-600.7eec00bd6a.woff2") format("woff2"); }
@font-face { font-family: "Demohelpdesk Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("demohelpdesk-sans-700.1b361590bc.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --canvas: #ECEFF3;       /* the console's backdrop */
  --surface: #FFFFFF;      /* the queue panel */
  --surface-sunk: #F4F6F9; /* table header row */
  --ink: #17202B;          /* text */
  --ink-2: #2B3644;        /* field values */
  --muted: #556273;        /* captions, labels, times */
  --line: #DDE2E8;         /* row rules */
  --line-strong: #C5CDD6;  /* rail rules */
  --band: #14212E;         /* header band */
  --band-2: #22344A;       /* the mark's tile and the meter's track on the band */
  --band-ink: #F3F6F9;
  --band-muted: #B4C1CE;
  --lamp: #3FCF7E;         /* line open */
  --lamp-ring: rgba(63, 207, 126, 0.28);
  --lamp-off: #F0A63A;     /* line closed */
  --lamp-off-ring: rgba(240, 166, 58, 0.28);
  --accent: #2455C7;       /* links */
  --new-bg: #E1EAFC;       /* the New status pill */
  --new-ink: #1C449C;
  --urgent: #B3261E;
  --urgent-row: #FDF3F2;
  --urgent-cut: #FFFFFF;   /* the "!" cut out of the warning glyph */
  --tip-bg: #FFF4D9;
  --tip-edge: #C98A07;
  --warn-ink: #8A4B00;     /* "Couldn't refresh" */
  --focus: #2455C7;
  --sans: "Demohelpdesk Sans", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #0C1116;
    --surface: #131A21;
    --surface-sunk: #18212A;
    --ink: #E3E9EF;
    --ink-2: #CBD4DD;
    --muted: #98A6B4;
    --line: #232D38;
    --line-strong: #34414F;
    --band: #172839;
    --band-2: #24394F;
    --band-ink: #F3F6F9;
    --band-muted: #AEBDCC;
    --lamp: #4DD88C;
    --lamp-ring: rgba(77, 216, 140, 0.25);
    --lamp-off: #F2AE4B;
    --lamp-off-ring: rgba(242, 174, 75, 0.25);
    --accent: #8CB0FF;
    --new-bg: #1C2D4F;
    --new-ink: #BACCFF;
    --urgent: #FF8D82;
    --urgent-row: #22171A;
    --urgent-cut: #22171A;
    --tip-bg: #2A2414;
    --tip-edge: #E1A932;
    --warn-ink: #F2B35B;
    --focus: #8CB0FF;
  }
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
}
h1, h2, p, ul, dl, dd { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* ---------- The band: name, number, line state ---------- */

.band { background: var(--band); color: var(--band-ink); }
.band-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 40px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 72px;
  align-items: end;
}
.brand { display: flex; align-items: center; gap: 14px; }
.mark { flex: none; width: 42px; height: 42px; padding: 8px; border-radius: 10px; background: var(--band-2); color: var(--band-ink); }
h1, .site-name { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.intro { margin-top: 16px; max-width: 50ch; color: var(--band-muted); font-size: 17px; }

.line { min-width: 0; }
.line-label { color: var(--band-muted); font-size: 15px; font-weight: 600; }
.number {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
  color: var(--band-ink);
  font-size: 58px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.number:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.band a:focus-visible { outline-color: var(--band-ink); }
.handset { flex: none; width: 0.6em; height: 0.6em; color: var(--lamp); }

/* The line's four states share one grid cell, so the box is always sized for the longest, and switching between them
   moves nothing. app.js sets data-lines; only the open state's text changes, and it is never the longest. */
.lines { display: grid; margin-top: 12px; font-size: 16px; font-weight: 600; }
.lines > p { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 10px; visibility: hidden; }
.lines[data-lines="wait"] .lines-wait,
.lines[data-lines="open"] .lines-open,
.lines[data-lines="minutes"] .lines-minutes,
.lines[data-lines="switch"] .lines-switch { visibility: visible; }
.lines .keep { white-space: nowrap; }   /* a narrow screen breaks the closed line at its dot */
.lines-wait { color: var(--band-muted); }
.lamp { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 3px var(--lamp-ring); }
.lines-wait .lamp { background: transparent; box-shadow: inset 0 0 0 2px var(--band-muted); }
.lines-minutes .lamp, .lines-switch .lamp { background: var(--lamp-off); box-shadow: 0 0 0 3px var(--lamp-off-ring); }

/* The day's minutes left, in half-hour segments: an SVG whose width app.js sets as an attribute, so the page carries
   no style attribute at all. */
.meter { height: 8px; margin-top: 12px; border-radius: 4px; overflow: hidden; background: var(--band-2); }
.meter svg { display: block; width: 100%; height: 100%; }
.meter-fill { fill: var(--lamp); }
.meter-gap { stroke: var(--band); stroke-width: 2px; }

/* ---------- Workspace: notices rail and the queue ---------- */

.workspace {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 40px 8px;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.notices h2 { padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: 17px; font-weight: 700; line-height: 1.3; }
.notice-list { list-style: none; padding: 0; }
.notice-list li { position: relative; padding: 10px 0 10px 20px; border-bottom: 1px solid var(--line-strong); font-size: 15.5px; line-height: 1.45; break-inside: avoid; }
.notice-list li::before { content: ""; position: absolute; left: 1px; top: 1.05em; width: 7px; height: 7px; border-radius: 2px; background: var(--muted); }
.tip { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--tip-edge); background: var(--tip-bg); font-size: 15.5px; line-height: 1.45; }

.queue { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.queue-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 20px; padding: 16px 20px 14px; }
.queue-head h2 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.queue-sub { margin-top: 3px; color: var(--muted); font-size: 15px; }
/* Two lines kept for the count and the feed's state, at a fixed width, so neither text can change the head's size. */
.queue-meta { flex: 0 0 14em; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: right; }
.queue-count, .feed-note { min-height: 1.5em; }
.queue-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.queue[data-feed="error"] .feed-note { color: var(--warn-ink); font-weight: 600; }
.queue-msg { padding: 18px 20px 20px; border-top: 1px solid var(--line); }
#msg-loading, #msg-unavailable { color: var(--muted); }

.tickets { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.tickets thead th {
  padding: 9px 12px;
  border-block: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.tickets tbody th, .tickets tbody td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.tickets tbody tr:last-child > * { border-bottom: 0; }
.tickets .c-id { padding-left: 20px; }
.tickets .c-time { padding-right: 20px; }
.tickets tbody .c-id { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tickets tbody .c-time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-cat { white-space: nowrap; }

/* A caller's words can run long and unbroken (an error code, say); they wrap anywhere rather than widen the table. */
.sum { color: var(--ink); overflow-wrap: anywhere; }
.facts { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 7px; font-size: 14px; }
.facts div { display: flex; gap: 5px; min-width: 0; }
.facts dt { flex: none; color: var(--muted); }
.facts dd { min-width: 0; color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; }
.by { margin-top: 3px; color: var(--muted); font-size: 14px; }

.pill { display: inline-block; padding: 0 9px; border-radius: 999px; background: var(--new-bg); color: var(--new-ink); font-size: 13.5px; font-weight: 700; line-height: 1.65; white-space: nowrap; }
.pri { white-space: nowrap; }
.pri::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; vertical-align: 0.07em; }
.pri-normal::before { background: var(--muted); }
.pri-low::before { box-shadow: inset 0 0 0 1.5px var(--muted); }
.pri-urgent { color: var(--urgent); font-weight: 700; }
.pri-urgent::before { display: none; }
.pri-urgent svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -0.16em; }
.pri-urgent .cut { stroke: var(--urgent-cut); }
.is-urgent { background: var(--urgent-row); }
.is-urgent > .c-id { box-shadow: inset 4px 0 0 var(--urgent); }

/* ---------- Footer ---------- */

.foot { max-width: 1280px; margin: 0 auto; padding: 24px 40px 44px; color: var(--muted); font-size: 14.5px; }
.foot p + p { margin-top: 4px; }

/* ---------- The 404 page ---------- */

.band-inner.solo { grid-template-columns: minmax(0, 1fr); }
.brand-link { color: var(--band-ink); text-decoration: none; }
.brand-link:hover .site-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lost { max-width: 1280px; margin: 0 auto; padding: 40px 40px 16px; }
.lost h1 { font-size: 28px; }
.lost p { max-width: 60ch; margin-top: 12px; font-size: 17px; }

/* ---------- Tablet width: the rail moves above the queue ---------- */

@media (max-width: 1179px) {
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .band-inner { column-gap: 48px; }
  .notice-list { columns: 2; column-gap: 32px; }
}

/* ---------- Phone width: the band stacks, and each ticket becomes one block ---------- */

@media (max-width: 899px) {
  .band-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 16px 24px; }
  h1, .site-name { font-size: 25px; }
  .mark { width: 36px; height: 36px; padding: 7px; }
  .intro { margin-top: 12px; font-size: 16px; }
  .number { gap: 10px; font-size: clamp(30px, 10.5vw, 46px); }
  .lines { font-size: 15px; }

  .workspace { gap: 24px; padding: 20px 16px 4px; }
  .queue-head { padding: 14px 16px 12px; }
  .queue-meta { flex-basis: 100%; text-align: left; }
  .queue-msg { padding: 16px; }

  .tickets, .tickets tbody { display: block; }
  .tickets thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* A wrapping row rather than a grid: the number and its status on the first line with the time in the corner, then
     the category and priority, which drop to separate lines rather than overflow if a narrow screen needs it. */
  .tickets tbody tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 14px 16px 15px;
    border-top: 1px solid var(--line);
  }
  .tickets tbody tr::before { content: ""; order: 3; flex-basis: 100%; margin-top: -6px; }
  .tickets tbody th, .tickets tbody td { display: block; padding: 0; border: 0; }
  .tickets tbody .c-id { order: 1; padding: 0; }
  .tickets tbody .c-status { order: 2; margin-left: -6px; }
  .tickets tbody .c-time { position: absolute; top: 14px; right: 16px; padding: 0; }
  .tickets tbody .c-cat { order: 4; }
  .tickets tbody .c-pri { order: 5; }
  .tickets tbody .c-sum { order: 6; flex: 1 0 100%; margin-top: 2px; }
  .tickets tbody .c-cat::before, .tickets tbody .c-pri::before { content: attr(data-label) / ""; margin-right: 6px; color: var(--muted); font-size: 13.5px; }
  .is-urgent { box-shadow: inset 4px 0 0 var(--urgent); }
  .is-urgent > .c-id { box-shadow: none; }

  .lost { padding: 28px 16px 8px; }
  .lost h1 { font-size: 24px; }
  .foot { padding: 20px 16px 36px; }
}