/* QAS IT Help Desk — Apple-inspired styles. Light and dark mode follow the device, unless someone picks one (top bar or Profile). */

@layer base, layout, components, utilities;

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light dark;

  /* Apple system palette (light) */
  --blue: #0071e3;
  --green: #248a3d;
  --red: #d70015;
  --orange: #c93400;
  --yellow: #a05a00;
  --purple: #8944ab;
  --teal: #0071a4;
  --gray: #6e6e73;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --separator: rgb(0 0 0 / 0.08);
  --field-border: rgb(0 0 0 / 0.14);
  --field-bg: #ffffff;
  --glass: rgb(255 255 255 / 0.72);
  --sidebar-bg: rgb(246 246 248 / 0.85);
  --selection-bg: rgb(0 113 227 / 0.12);
  --segment-bg: rgb(118 118 128 / 0.12);
  --segment-active: #ffffff;
  --accent: var(--blue);
  --accent-text: #ffffff;
  --danger: var(--red);

  /* Charts (validated: blue/orange pass CVD + contrast on #fff and #1c1c1e) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --viz-grid: #ececef;
  --viz-axis: #c7c7cc;
  --viz-ink: #6e6e73;
  --viz-good: #006300;
  --viz-bad: #d70015;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.03);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --shadow-segment: 0 1px 3px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.04);

  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;
  --pill: 980px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  accent-color: var(--accent);
}


/* Dark colors: when the device is dark (unless someone picked Light), or when someone picked Dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --blue: #0a84ff;
  --green: #30d158;
  --red: #ff453a;
  --orange: #ff9f0a;
  --yellow: #ffd60a;
  --purple: #bf5af2;
  --teal: #64d2ff;
  --gray: #98989d;
  
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #232325;
  --text: #f5f5f7;
  --muted: #98989d;
  --separator: rgb(255 255 255 / 0.1);
  --field-border: rgb(255 255 255 / 0.16);
  --field-bg: #2c2c2e;
  --glass: rgb(28 28 30 / 0.72);
  --sidebar-bg: rgb(28 28 30 / 0.85);
  --selection-bg: rgb(10 132 255 / 0.22);
  --segment-bg: rgb(118 118 128 / 0.24);
  --segment-active: #636366;
  --shadow-sm: none;
  --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-segment: 0 1px 3px rgb(0 0 0 / 0.4);
  --series-1: #3987e5;
  --series-2: #d95926;
  --viz-grid: #2c2c2e;
  --viz-axis: #48484a;
  --viz-ink: #98989d;
  --viz-good: #30d158;
  --viz-bad: #ff453a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #0a84ff;
  --green: #30d158;
  --red: #ff453a;
  --orange: #ff9f0a;
  --yellow: #ffd60a;
  --purple: #bf5af2;
  --teal: #64d2ff;
  --gray: #98989d;
  
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #232325;
  --text: #f5f5f7;
  --muted: #98989d;
  --separator: rgb(255 255 255 / 0.1);
  --field-border: rgb(255 255 255 / 0.16);
  --field-bg: #2c2c2e;
  --glass: rgb(28 28 30 / 0.72);
  --sidebar-bg: rgb(28 28 30 / 0.85);
  --selection-bg: rgb(10 132 255 / 0.22);
  --segment-bg: rgb(118 118 128 / 0.24);
  --segment-active: #636366;
  --shadow-sm: none;
  --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-segment: 0 1px 3px rgb(0 0 0 / 0.4);
  --series-1: #3987e5;
  --series-2: #d95926;
  --viz-grid: #2c2c2e;
  --viz-axis: #48484a;
  --viz-ink: #98989d;
  --viz-good: #30d158;
  --viz-bad: #ff453a;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Base ---------- */
@layer base {
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font: 1rem/1.47 var(--font);
    letter-spacing: -0.01em;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }
  h1 { margin: 0 0 16px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; }
  h2 { margin: 28px 0 10px; font-size: 1.2rem; font-weight: 600; }
  p { text-wrap: pretty; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  :focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
  ::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }

  input:not([type=checkbox], [type=radio]), select, textarea {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 36px;
    padding: 8px 12px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  textarea { resize: vertical; line-height: 1.45; }
  :is(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
  }
  ::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
  input[type=checkbox], input[type=radio] { inline-size: 1.05rem; block-size: 1.05rem; margin: 0; }
  table { border-collapse: collapse; }
  hr { border: 0; border-top: 1px solid var(--separator); margin: 18px 0; }

  @media (forced-colors: active) {
    :is(input, select, textarea):focus-visible { outline: 2px solid Highlight; }
  }
}

/* ---------- Layout ---------- */
@layer layout {
  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 52px;
    padding: 6px 20px;
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-block-end: 1px solid var(--separator);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    &:hover { text-decoration: none; }
    & img { block-size: 32px; inline-size: auto; }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand img { filter: brightness(0) invert(1); }
  }
  :root[data-theme="dark"] .brand img { filter: brightness(0) invert(1); }
  .topbar nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    font-size: 0.9rem;
  }

  .layout { display: flex; align-items: flex-start; }
  .layout > main {
    flex: 1;
    min-inline-size: 0;
    box-sizing: border-box;
    max-inline-size: 1080px;
    margin-inline: auto;
    padding: 32px 20px 72px;
  }
  body.agent .layout > main { max-inline-size: 1280px; padding-inline: 32px; }

  .sidebar {
    position: sticky;
    inset-block-start: 53px;
    flex: 0 0 220px;
    box-sizing: border-box;
    block-size: calc(100dvh - 53px);
    overflow-y: auto;
    padding: 16px 10px;
    background: var(--sidebar-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-inline-end: 1px solid var(--separator);
    & a {
      display: block;
      margin: 1px 0;
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 0.92rem;
      &:hover { background: var(--segment-bg); text-decoration: none; }
      &.active { background: var(--selection-bg); color: var(--accent); font-weight: 600; }
    }
  }
  .side-heading {
    margin: 18px 12px 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  @media (max-width: 820px) {
    .layout { flex-direction: column; }
    .sidebar {
      position: sticky;
      inset-block-start: 53px;
      z-index: 5;
      block-size: auto;
      inline-size: 100%;
      display: flex;
      gap: 4px;
      overflow-x: auto;
      padding: 8px 12px;
      border-inline-end: 0;
      border-block-end: 1px solid var(--separator);
      & a { flex: none; white-space: nowrap; }
    }
    .side-heading { display: none; }
    body.agent .layout > main { padding-inline: 16px; }
  }

  .two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  @media (max-width: 900px) {
    .two-col { grid-template-columns: 1fr; }
    /* One column: ticket controls come before the conversation, not after it. */
    .two-col > aside.ticket-side { order: -1; position: static; max-block-size: none; overflow: visible; }
  }
  .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .stack { display: flex; flex-direction: column; gap: 16px; max-inline-size: 760px; margin-block-start: 16px; }
  .stack > .button { align-self: flex-start; }
  .form-card { padding: 24px 26px 26px; }
  .notice + .form-card, h1 + .notice { max-inline-size: 760px; box-sizing: border-box; }
  aside .stack > .button { align-self: stretch; }
  .heading-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .heading-row h1, .heading-row h2 { margin-block: 0; }
}

/* ---------- Components ---------- */
@layer components {
  /* Cards */
  .card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 20px 22px;
  }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
  .cards .card h2 { margin-block-start: 0; }
  .hero { margin: 32px 0 28px; }
  .hero h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); }
  .hero p { color: var(--muted); font-size: 1.15rem; margin: 0; }

  /* Buttons */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-block-size: 36px;
    padding: 8px 18px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--pill);
    background: var(--accent);
    color: var(--accent-text);
    font: inherit;
    font-size: 0.93rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s, background-color 0.15s, transform 0.05s;
    &:hover { filter: brightness(1.08); text-decoration: none; }
    &:active { transform: scale(0.98); }
    &.secondary { background: var(--segment-bg); color: var(--accent); filter: none; }
    &.secondary:hover { background: color-mix(in oklab, var(--segment-bg), var(--text) 6%); }
    &.success { background: var(--green); color: #fff; }
    &.danger-text { background: transparent; color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
  }
  .small-button { min-block-size: 30px; padding: 4px 14px; font-size: 0.85rem; }
  button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
  .topbar .button { color: var(--accent-text); }
  .inline { display: inline; margin: 0; }

  /* Forms */
  .field label, .field > legend { display: block; margin-block-end: 6px; font-size: 0.88rem; font-weight: 600; }
  .field label.check, label.check {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 400;
    font-size: 0.93rem;
  }
  .has-error :is(input, select, textarea),
  .field :is(input, select, textarea):user-invalid {
    border-color: var(--danger);
  }
  .error { color: var(--danger); margin: 6px 0 0; font-size: 0.85rem; }
  .hint { color: var(--muted); font-size: 0.85rem; margin: 6px 0 0; }
  .hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
  fieldset.visibility-choice { border: 0; margin: 0; padding: 0; min-inline-size: 0;
    & label.check { align-items: flex-start; margin-block: 10px; }
    & input { margin-block-start: 3px; } }
  fieldset.issue-list { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  fieldset.issue-list[hidden], [data-summary][hidden] { display: none; }
  ul.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px 16px;
    & li { display: flex; gap: 8px; align-items: center; }
    & label { font-weight: 400; margin: 0; font-size: 0.93rem; }
  }

  /* Notices */
  .notice, .flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--accent) 10%, var(--surface));
    color: var(--text);
    font-size: 0.93rem;
  }
  .flash { margin-block-end: 18px; transition: opacity 0.35s ease, transform 0.35s ease; }
  .flash.flash-gone { opacity: 0; transform: translateY(-6px); }
  @media (prefers-reduced-motion: reduce) { .flash { transition: none; } }
  .flash-error { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); }

  /* Segmented control (tabs) */
  .tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    margin: 4px 0 18px;
    border-radius: 10px;
    background: var(--segment-bg);
    & a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 8px;
      color: var(--text);
      font-size: 0.88rem;
      font-weight: 500;
      &:hover { text-decoration: none; background: color-mix(in oklab, var(--segment-active) 50%, transparent); }
      &.active { background: var(--segment-active); box-shadow: var(--shadow-segment); font-weight: 600; }
    }
    & .count { color: var(--muted); font-size: 0.8rem; font-weight: 500; font-variant-numeric: tabular-nums; }
    & a.active .count { color: var(--accent); }
  }

  /* Filter bar */
  .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    & select, & input:not([type=checkbox]) { inline-size: auto; min-block-size: 34px; padding-block: 6px; font-size: 0.88rem; }
    & input[type=search] { flex: 1 1 220px; border-radius: var(--pill); padding-inline: 16px; }
    & label.check { font-size: 0.88rem; color: var(--muted); }
  }

  /* Bulk action bar */
  .bulkbar {
    position: sticky;
    inset-block-start: 64px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-end: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--shadow-md);
    & select { inline-size: auto; min-block-size: 30px; padding: 4px 10px; font-size: 0.85rem; }
  }

  /* Tables */
  .table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  table.tickets {
    inline-size: 100%;
    font-size: 0.92rem;
    & th {
      text-align: start;
      padding: 12px 14px;
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      border-block-end: 1px solid var(--separator);
    }
    & td { padding: 12px 14px; vertical-align: top; }
    & tbody tr:not(:last-child) td { border-block-end: 1px solid var(--separator); }
    & tbody tr:hover td { background: var(--surface-2); }
    & a strong { font-weight: 600; }
  }
  tr.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
  .ticket-no { font-weight: 600; font-variant-numeric: tabular-nums; }

  /* Badges: soft tinted pills */
  .badge {
    --c: var(--gray);
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--pill);
    background: color-mix(in oklab, var(--c) 14%, transparent);
    color: var(--c);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .status-new { --c: var(--blue); }
  .status-in_progress { --c: var(--orange); }
  :is(.status-waiting_requester, .status-waiting_vendor) { --c: var(--yellow); }
  .status-waiting_package { --c: var(--teal); }
  .status-on_hold { --c: var(--red); }
  .status-resolved { --c: var(--green); }
  .status-canceled, .status-merged { --c: var(--gray); }
  .priority-low { --c: var(--gray); }
  .priority-medium { --c: var(--blue); }
  .priority-high { --c: var(--orange); }
  .priority-critical { --c: var(--red); }
  .badge.overdue { background: var(--danger); color: #fff; }
  .internal-badge { --c: var(--yellow); }
  .source-email { --c: var(--teal); }

  /* Ticket details */
  .meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    margin: 16px 0;
    font-size: 0.93rem;
    & dt { color: var(--muted); }
    & dd { margin: 0; }
  }
  .comment {
    margin-block-end: 10px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    & header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.9rem; }
    & time { color: var(--muted); font-size: 0.8rem; }
    & p { margin: 6px 0 0; }
    &.internal { background: color-mix(in oklab, var(--yellow) 10%, var(--surface)); }
    &.resolution { background: color-mix(in oklab, var(--green) 10%, var(--surface)); box-shadow: inset 4px 0 0 var(--green), var(--shadow-sm); }
    & .resolution-label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--green); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  }
  aside.card { position: sticky; inset-block-start: 72px; }
  /* Ticket side panel: stays in view and scrolls on its own when it's taller than the window. */
  aside.ticket-side { max-block-size: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .side-label { margin: 0 0 4px; color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
  .assigned-box p { margin: 0 0 10px; }
  .device-box p { margin: 0 0 10px; }
  .device-picker { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  .device-picker legend { padding: 0; margin-block-end: 6px; font-weight: 600; font-size: 0.9rem; }
  .device-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
  .device-picker .device-option {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer; margin: 0; font-weight: 400;
    border: 1px solid var(--separator); border-radius: var(--radius-sm); background: var(--surface);
    & > span { display: grid; gap: 2px; min-inline-size: 0; }
    & input { flex: none; inline-size: auto; margin: 3px 0 0; }
    &:has(input:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
  }
  .side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; & form { margin: 0; } }
  .follower-list {
    list-style: none; margin: 0 0 10px; padding: 0;
    & li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 6px; border-block-end: 1px solid var(--separator); }
    & form { margin: 0; }
  }
  .followers-box .hint { margin-block-end: 0; }
  .device-picks {
    list-style: none; margin: 0 0 10px; padding: 0;
    & form { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 6px; border-block-end: 1px solid var(--separator); }
  }
  .device-lookup { display: flex; gap: 8px; & input { flex: 1; min-inline-size: 0; } }
  .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em; }
  .sync-line .badge { margin-inline-end: 4px; }
  .history {
    list-style: none; margin: 0 0 8px; padding: 0;
    & li { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap;
           padding: 10px 14px; border-inline-start: 3px solid var(--separator); margin-block-end: 6px;
           background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
    & li.current { border-inline-start-color: var(--accent); }
  }
  .attachments {
    display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 8px 0 12px; padding: 0;
    & li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    & .thumb img {
      display: block; inline-size: 120px; block-size: 90px; object-fit: cover;
      border-radius: var(--radius-sm); border: 1px solid var(--separator); background: var(--segment-bg);
    }
    & .file-chip {
      display: inline-flex; align-items: center; gap: 6px; max-inline-size: 240px; padding: 8px 12px;
      border: 1px solid var(--separator); border-radius: var(--radius-sm); background: var(--surface);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    & form.inline button { padding: 0; }
  }
  input[type=file] { max-inline-size: 100%; font: inherit; }
  .device-box details summary { cursor: pointer; color: var(--accent); margin-block: 6px; }
  .pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block-start: 16px; }

  /* Dashboard */
  .dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 8px 0 20px; }
  .dash-card {
    color: inherit;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
    & h2 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
  }
  a.dash-card:hover { text-decoration: none; transform: translateY(-2px); }
  .big {
    margin: 2px 0;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    & .small { font-weight: 400; letter-spacing: 0; }
  }
  .big.danger { color: var(--danger); }
  .inbox-status { margin-block-end: 18px; & h2 { margin-block-start: 0; font-size: 1rem; } & p { margin: 6px 0 0; } }
  .prio-row { display: flex; justify-content: space-around; gap: 6px; margin-block-start: 10px; font-size: 0.8rem;
    & > span { text-align: center; min-inline-size: 0; }
    & .muted { font-size: 0.72rem; }
    & .prio-short { display: none; } }
  /* Narrow cards (phones): Crit / High / Med / Low so the labels don't run together. */
  @media (max-width: 600px) { .prio-row .prio-full { display: none; } .prio-row .prio-short { display: inline; } }

  /* Admin: users & teams */
  .add-user { margin-block-end: 18px; & summary { cursor: pointer; } & form { margin-block-start: 14px; align-items: end; } }
  .add-team { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 14px 0 22px; & .field { flex: 1; min-inline-size: 220px; } }
  .team-card { margin-block-end: 18px; & h2 { margin: 0; } }
  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-block-start: 14px;
    & fieldset { margin: 0; padding: 10px 14px 14px; border: 0; border-radius: var(--radius); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--separator); }
    & legend { padding: 0; font-weight: 600; font-size: 0.88rem; float: left; inline-size: 100%; margin-block-end: 6px; }
    & label.check { margin: 6px 0; clear: both; }
  }
  .inline-field {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
    font-size: 0.9rem;
    clear: both;
    & input { inline-size: 4.5em !important; min-block-size: 30px; padding: 4px 8px; }
  }
}

/* ---------- Analytics ---------- */
@layer components {
  .viz-filters { gap: 10px; }
  .segmented {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px;
    border-radius: 10px; background: var(--segment-bg);
    & label { position: relative; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; cursor: pointer; }
    & label.active, & label:has(input:checked) { background: var(--segment-active); box-shadow: var(--shadow-segment); font-weight: 600; }
    &:has(input:checked) label.active:not(:has(input:checked)) { background: none; box-shadow: none; font-weight: 500; }
    & label:has(input:focus-visible) { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); }
    & input { position: absolute; opacity: 0; pointer-events: none; }
  }
  .range-note { margin: -6px 0 16px; }

  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-block-end: 18px; }
  .kpi { padding: 16px 18px; & p { margin: 0; } }
  .kpi-label { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
  .kpi-value { font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; margin-block: 4px !important; }
  .kpi-note, .kpi-delta { font-size: 0.8rem; color: var(--muted); }
  .kpi-delta.good { color: var(--viz-good); }
  .kpi-delta.bad { color: var(--viz-bad); }
  .kpi-delta .muted { color: var(--muted); }

  .viz-card { margin-block-end: 18px; & h2 { margin: 0 0 14px; font-size: 1rem; } }
  .viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
  .viz-grid .viz-card { margin: 0; }
  .viz-grid + .viz-card { margin-block-start: 18px; }

  .legend { display: flex; gap: 16px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted); }
  .legend li { display: flex; align-items: center; gap: 6px; }
  .key { display: inline-block; flex: none; }
  .key-line { inline-size: 14px; block-size: 2px; border-radius: 1px; vertical-align: middle; }
  .key.series-1 { background: var(--series-1); }
  .key.series-2 { background: var(--series-2); }

  .line-chart { position: relative; }
  .line-chart svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; font-size: 11px; }
  .line-chart svg:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 4px; border-radius: 6px; }
  .line-chart .grid { stroke: var(--viz-grid); stroke-width: 1; }
  .line-chart .axis { stroke: var(--viz-axis); stroke-width: 1; }
  .line-chart .tick { fill: var(--viz-ink); font-variant-numeric: tabular-nums; }
  .line-chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .line-chart .series.series-1 { stroke: var(--series-1); }
  .line-chart .series.series-2 { stroke: var(--series-2); }
  .line-chart .dot { stroke: var(--surface); stroke-width: 2; }
  .line-chart .dot.series-1 { fill: var(--series-1); }
  .line-chart .dot.series-2 { fill: var(--series-2); }
  .line-chart .crosshair { stroke: var(--viz-axis); stroke-width: 1; }
  .line-chart .hit { fill: transparent; cursor: crosshair; }
  .viz-tooltip {
    position: absolute; inset-block-start: 0; z-index: 3; min-inline-size: 130px; pointer-events: none;
    padding: 8px 12px; border-radius: 10px; background: var(--glass); box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-size: 0.82rem;
    & p { margin: 2px 0; display: flex; align-items: center; gap: 6px; }
    & .tt-title { color: var(--muted); font-weight: 600; }
    & strong { font-variant-numeric: tabular-nums; }
  }
  .data-table { margin-block-start: 12px; font-size: 0.88rem; & summary { cursor: pointer; color: var(--accent); } & .table-wrap { margin-block-start: 10px; box-shadow: none; } }
  td.num, th.num { text-align: start; font-variant-numeric: tabular-nums; }  /* numbers sit right under their heading */
  .table-wrap.flat { box-shadow: none; }

  .hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .hbar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr; gap: 12px; align-items: center; font-size: 0.88rem; }
  .hbar-label { overflow-wrap: anywhere; }
  .hbar-track { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
  .hbar-fill {
    /* every bar scales against the same width (the track minus room for its value) */
    inline-size: max(calc((100% - 3.5em) * var(--p)), 3px); block-size: 14px; flex: none;
    background: var(--series-1); border-radius: 0 4px 4px 0; transition: filter 0.15s;
  }
  .hbar:hover .hbar-fill { filter: brightness(1.15); }
  .hbar-value { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }

  @media (forced-colors: active) {
    .hbar-fill, .key { background: CanvasText; forced-color-adjust: none; }
    .line-chart .series { stroke: CanvasText; }
  }
}

/* ---------- Help & knowledge base ---------- */
@layer components {
  .chat-card { margin-block-end: 24px; & h2 { margin-block-start: 0; font-size: 1.05rem; } }
  .ticket-chat { box-sizing: border-box; margin-block-end: 18px;
    & summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
    &[open] summary { margin-block-end: 12px; } }
  .chat-log { display: flex; flex-direction: column; gap: 8px; max-block-size: 420px; overflow-y: auto; padding: 4px 0 12px; }
  .bubble {
    max-inline-size: 85%; padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere;
    font-size: 0.95rem; line-height: 1.45;
    &.bot { align-self: flex-start; background: var(--segment-bg); border-end-start-radius: 6px; }
    &.me { align-self: flex-end; background: var(--accent); color: var(--accent-text); border-end-end-radius: 6px; }
    &.waiting { color: var(--muted); font-style: italic; }
    & .sources { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); white-space: normal; }
  }
  .chat-form { display: flex; gap: 8px; align-items: flex-end; & textarea { resize: none; border-radius: 18px; padding-inline: 16px; } }
  .chat-escalate { margin-block-start: 10px; }
  /* Live chat with IT */
  .bubble-name { display: block; margin-block-end: 2px; font-size: 0.74rem; font-weight: 600; opacity: 0.75; white-space: normal; }
  .chat-note { align-self: center; max-inline-size: 90%; color: var(--muted); font-size: 0.8rem; text-align: center; }
  .livechat { margin-block-end: 18px; }
  .livechat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    & h2 { margin: 0; font-size: 1.05rem; } & p { margin: 2px 0 0; } }
  .livechat-body { margin-block-start: 12px; }
  .livechat-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-block-end: 0; }
  .staff-chat .chat-log { min-block-size: 280px; max-block-size: 60vh; }
  .chat-log.transcript { max-block-size: none; }
  .closures { margin-block: 20px; & h2 { margin: 0; font-size: 1.05rem; } & .heading-row form { margin: 0; } }
  .closure-list {
    list-style: none; margin: 8px 0 12px; padding: 0;
    & li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--separator); }
    & form { margin: 0; }
  }
  .closure-form { align-items: end; }
  .chat-list {
    list-style: none; margin: 0 0 16px; padding: 0; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    & li:not(:last-child) { border-block-end: 1px solid var(--separator); }
    & a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text); }
    & a:hover { background: var(--surface-2); text-decoration: none; }
    & .chat-list-main { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
    & .chat-list-main .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .chat-list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
    & li.waiting a { box-shadow: inset 3px 0 0 var(--orange); }
    & li.unread strong { color: var(--accent); }
  }
  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kb-browse h2 { margin-block: 22px 8px; }
  .kb-browse .kb-count { margin-block: 4px 0; min-block-size: 1.2em; }
  .kb-group[hidden], .kb-list li[hidden] { display: none; }
  .kb-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
  .kb-list li a { display: block; padding: 12px 18px; color: var(--text); }
  .kb-list li:not(:last-child) { border-block-end: 1px solid var(--separator); }
  .kb-list li a:hover { background: var(--surface-2); text-decoration: none; color: var(--accent); }
  .kb-article { max-inline-size: 760px; margin-block-end: 16px; & h1 { margin-block-start: 0; } }
  .kb-body { font-size: 1rem; line-height: 1.6; tab-size: 4; }
}

/* ---------- Utilities ---------- */
@layer utilities {
  .muted { color: var(--muted); }
  .small { font-size: 0.82rem; }
  .prewrap { white-space: pre-wrap; }
  .break { overflow-wrap: anywhere; }
  [hidden] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .dash-card { transition: none; }
  a.dash-card:hover { transform: none; }
}

.role-form { display: flex; gap: 6px; align-items: center; }
.role-form select { inline-size: auto; min-block-size: 30px; padding: 4px 8px; font-size: 0.85rem; }


/* Floating help assistant */
.chat-fab {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 20;
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; padding: 0 20px 0 16px;
  border: 0; border-radius: 980px; background: var(--accent); color: var(--accent-text);
  font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.18), 0 1px 3px rgb(0 0 0 / 0.12);
  transition: transform 0.15s, filter 0.15s;
}
.chat-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
.chat-fab:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 3px; }
.chat-popover {
  position: fixed; inset: auto 20px 80px auto; margin: 0; z-index: 21;
  inline-size: min(400px, calc(100vw - 40px)); max-block-size: min(600px, calc(100dvh - 120px));
  box-sizing: border-box; overflow-y: auto; border: 0; padding: 16px 18px;
  color: var(--text); box-shadow: 0 12px 40px rgb(0 0 0 / 0.22), 0 2px 8px rgb(0 0 0 / 0.1);
}
.chat-popover-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.chat-popover-head h2 { margin: 0; font-size: 1rem; }
.chat-close {
  inline-size: 30px; block-size: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--segment-bg); color: var(--muted); font-size: 1.2rem; line-height: 1;
}
.chat-popover .chat-log { max-block-size: 340px; }
.chat-popover .hint { margin-block-start: 10px; }
@media (max-width: 600px) {
  .chat-fab { inset-block-end: 14px; inset-inline-end: 14px; }
  .chat-popover { inset: auto 0 0 0; inline-size: 100%; max-block-size: 85dvh; border-radius: 18px 18px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .chat-fab { transition: none; } .chat-fab:hover { transform: none; } }
@media print { .chat-fab, .chat-popover { display: none !important; } }

/* Profile avatar in the top bar, and the Profile page */
.avatar {
  display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 18%, var(--surface)); color: var(--accent);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; flex: none;
}
img.avatar { object-fit: cover; background: var(--segment-bg); }
.avatar-lg { inline-size: 72px; block-size: 72px; font-size: 1.5rem; }
.avatar-sm { inline-size: 22px; block-size: 22px; font-size: 0.6rem; vertical-align: middle; margin-inline-end: 6px; }
.photo-actions { display: flex; align-items: center; gap: 12px; margin-block-start: 8px; }
.photo-actions form { margin: 0; }
.photo-actions label.button { cursor: pointer; }
#photo:focus-visible + label { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.avatar-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); border-radius: 980px; padding: 2px 10px 2px 2px; }
.avatar-link:hover, .avatar-link.active { background: var(--segment-bg); text-decoration: none; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-block-end: 20px; }
.profile-head h1 { margin: 0; }
.profile-head p { margin: 2px 0 0; }
.profile-form { max-inline-size: 720px; }
.profile-form h2 { margin: 0; font-size: 1.05rem; }
.prefs { list-style: none; margin: 0; padding: 0; }
.prefs li + li { border-block-start: 1px solid var(--separator); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; cursor: pointer; }
.switch {
  appearance: none; flex: none; position: relative; inline-size: 44px; block-size: 26px; margin: 0;
  border-radius: 980px; background: var(--segment-bg); cursor: pointer; transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 22px; block-size: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.2s;
}
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }
.signout-form { margin-block-start: 32px; max-inline-size: 720px; }

/* Live counts in the IT sidebar (refreshed every 30 seconds with the bell) */
.side-count {
  margin-inline-start: auto; min-inline-size: 20px; padding: 1px 7px; box-sizing: border-box;
  border-radius: 980px; background: var(--segment-bg); color: var(--muted);
  font-size: 0.74rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
}
.side-count[hidden] { display: none; }
.side-count.alert { background: color-mix(in oklab, var(--orange) 18%, transparent); color: var(--orange); }
.sidebar a.active .side-count { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.side-count.bump { animation: count-bump 1.2s ease-out; }
@keyframes count-bump {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); }
  25% { transform: scale(1.25); }
  100% { transform: scale(1); box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) { .side-count.bump { animation: none; } }

/* Page transitions: the top bar and sidebar stay put while the page content cross-fades.
   Browsers without cross-document View Transitions just load pages normally. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.sidebar { view-transition-name: sidebar; }
::view-transition-old(topbar), ::view-transition-new(topbar),
::view-transition-old(sidebar), ::view-transition-new(sidebar) { animation: none; }
::view-transition-old(root) { animation: 120ms ease-out both vt-fade-out; }
::view-transition-new(root) { animation: 180ms ease-out both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Notification bell (IT team) */
.bell {
  position: relative; display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px;
  border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
}
.bell:hover { background: var(--segment-bg); }
.bell:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
.bell-count {
  position: absolute; inset-block-start: 1px; inset-inline-end: -2px; min-inline-size: 18px; block-size: 18px;
  padding: 0 5px; box-sizing: border-box; border-radius: 980px; background: var(--red); color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.bell-count[hidden] { display: none; }
.notif-popover {
  position: fixed; inset: 56px 20px auto auto; margin: 0; z-index: 21;
  inline-size: min(380px, calc(100vw - 40px)); max-block-size: min(520px, calc(100dvh - 80px));
  box-sizing: border-box; overflow-y: auto; border: 0; padding: 14px 6px 8px;
  color: var(--text); box-shadow: 0 12px 40px rgb(0 0 0 / 0.22), 0 2px 8px rgb(0 0 0 / 0.1);
}
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 8px; }
.notif-head h2 { margin: 0; font-size: 1rem; }
.notif-head form { margin: 0; }
.notif-actions { display: flex; gap: 14px; }
.notif-popover > p { padding: 0 12px; }
.notif-list {
  list-style: none; margin: 0; padding: 0;
  & a { display: grid; gap: 2px; padding: 10px 12px 10px 22px; border-radius: var(--radius-sm); color: var(--text); position: relative; }
  & a:hover { background: var(--segment-bg); text-decoration: none; }
  & .unread a::before {
    content: ""; position: absolute; inset-inline-start: 8px; inset-block-start: 16px;
    inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent);
  }
  & .notif-ticket { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .notif-msg { font-size: 0.85rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  & .unread .notif-msg { color: var(--text); }
}
@media (max-width: 600px) {
  .notif-popover { inset: 0 0 auto 0; inline-size: 100%; max-block-size: 85dvh; border-radius: 0 0 18px 18px; }
}
@media print { .bell, .notif-popover { display: none !important; } }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }


/* ---------- Phones ---------- */
.mobile-label { display: none; }
@media (max-width: 820px) {
  /* The column layout must stretch children to the screen width (flex-start let them grow past it). */
  .layout { align-items: stretch; }
  /* Auto inline margins (used to center main on desktop) beat stretch in a column flexbox, so pin the width. */
  .layout > main, body.agent .layout > main { inline-size: 100%; margin-inline: 0; padding: 20px 16px 96px; }

  .topbar { padding: 8px 16px; gap: 6px 12px; }
  .topbar nav { gap: 6px 14px; }
  .hide-sm { display: none; }

  /* IT menu: one swipeable row of pills */
  .sidebar {
    position: static; flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
    block-size: auto; min-block-size: 0; overflow-x: auto; overflow-y: hidden;
    padding: 8px 12px; scrollbar-width: none;
  }
  .sidebar a { flex: none; margin: 0; padding: 6px 12px; white-space: nowrap; border-radius: 980px; }

  h1 { font-size: 1.5rem; }
  .hero { margin: 8px 0 20px; }

  /* Segmented tabs scroll sideways instead of overflowing */
  .tabs { display: flex; flex-wrap: nowrap; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs a { flex: none; white-space: nowrap; }
  .segmented { display: flex; flex-wrap: nowrap; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmented label { flex: none; white-space: nowrap; }

  /* Filters: search on its own line, the rest two per line */
  .filters input[type=search] { flex: 1 1 100%; }
  .filters select { flex: 1 1 calc(50% - 8px); min-inline-size: 0; }
  .filters .button { flex: 1 1 100%; }

  /* Ticket list becomes cards */


  .bulkbar { inset-block-start: 8px; }
  .two-col { gap: 16px; }
  aside.card { position: static; }
  .card { padding: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-value { font-size: 1.5rem; }
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .big { font-size: 2rem; }
  .meta { grid-template-columns: 1fr; gap: 2px; }
  .meta dd { margin-block-end: 8px; }
  .heading-row { gap: 8px; }
  .role-form { flex-wrap: wrap; }
}


/* Ticket and device lists turn into cards on phones and tablets, where the sidebar leaves little room for a table. */
@media (max-width: 1024px) {
  .ticket-list thead { display: none; }
  .ticket-list, .ticket-list tbody { display: block; }
  .ticket-list tr {
    display: grid; grid-template-columns: 28px auto 1fr; gap: 6px 8px; align-items: center;
    padding: 12px 14px; border-block-end: 1px solid var(--separator);
  }
  .ticket-list tbody tr:last-child { border-block-end: 0; }
  .ticket-list td { display: block; padding: 0 !important; border: 0 !important; }
  .ticket-list td:nth-child(1) { grid-row: 1 / span 4; align-self: start; padding-block-start: 2px !important; }
  .ticket-list td:nth-child(2) { grid-column: 2 / 4; }
  .ticket-list td:nth-child(3) { grid-column: 2; }
  .ticket-list td:nth-child(4) { grid-column: 3; justify-self: start; }
  .ticket-list td:nth-child(5), .ticket-list td:nth-child(6) { grid-column: 2 / 4; font-size: 0.85rem; }
  .ticket-list td[colspan] { grid-column: 1 / -1; }
  .ticket-list .mobile-label { display: inline; color: var(--muted); }
  .ticket-list td:nth-child(5) .muted.small:last-child { display: none; }
  .ticket-list tbody tr:hover td { background: none; }

  .asset-list thead { display: none; }
  .asset-list, .asset-list tbody { display: block; }
  .asset-list tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 12px 14px; border-block-end: 1px solid var(--separator); }
  .asset-list tbody tr:last-child { border-block-end: 0; }
  .asset-list td { display: block; padding: 0 !important; border: 0 !important; }
  .asset-list td:nth-child(1) { grid-column: 1; }
  .asset-list td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
  .asset-list td:nth-child(2), .asset-list td:nth-child(3), .asset-list td:nth-child(4) { grid-column: 1 / -1; font-size: 0.85rem; }
  .asset-list td[colspan] { grid-column: 1 / -1; }
  .asset-list .mobile-label { display: inline; color: var(--muted); }
  .asset-list td:nth-child(5) .muted { display: none; }
  .asset-list tbody tr:hover td { background: none; }
}


/* ---------- IT sidebar ---------- */
.sidebar { display: flex; flex-direction: column; gap: 14px; padding: 14px 10px 10px; }
.sidebar .side-group { display: flex; flex-direction: column; gap: 2px; }
.sidebar .side-heading { margin: 0 10px 4px; }
.sidebar a {
  position: relative; display: flex; align-items: center; gap: 10px; margin: 0;
  min-block-size: 36px; padding: 6px 10px; box-sizing: border-box; border-radius: 9px;
  color: var(--text); font-size: 0.94rem; font-weight: 500;
}
.sidebar a:hover { background: var(--segment-bg); text-decoration: none; }
.sidebar a.active { background: var(--selection-bg); color: var(--accent); font-weight: 600; }
.sidebar a.active::before {
  content: ""; position: absolute; inset-block: 8px; inset-inline-start: -10px;
  inline-size: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.side-icon { flex: none; inline-size: 19px; block-size: 19px; color: var(--muted); }
.sidebar a.active .side-icon, .sidebar a:hover .side-icon { color: var(--accent); }
.side-label-text { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-collapse {
  display: flex; align-items: center; gap: 10px; margin-block-start: auto; padding: 8px 10px;
  border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer;
  & svg { flex: none; inline-size: 18px; block-size: 18px; transition: transform 0.2s; }
  &:hover { background: var(--segment-bg); color: var(--text); }
  &:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 1px; }
}
.sidebar a:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 1px; }

/* Collapsed to icons (desktop only): counts become small badges on the icon. */
@media (min-width: 821px) {
  .side-collapsed .sidebar { flex-basis: 64px; padding-inline: 8px; }
  .side-collapsed .sidebar .side-heading { block-size: 1px; margin: 4px 10px 6px; overflow: hidden; color: transparent; background: var(--separator); }
  .side-collapsed .sidebar a, .side-collapsed .side-collapse { justify-content: center; padding-inline: 0; }
  .side-collapsed .side-label-text { display: none; }
  .side-collapsed .sidebar a.active::before { inset-inline-start: -8px; }
  .side-collapsed .sidebar .side-count {
    position: absolute; inset-block-start: 2px; inset-inline-end: 4px; min-inline-size: 16px; padding: 0 4px;
    font-size: 0.62rem; line-height: 16px;
  }
  .side-collapsed .side-collapse svg { transform: rotate(180deg); }
}

/* Phones: one swipeable row of icon pills; no headings or collapse button. */
@media (max-width: 820px) {
  .sidebar { flex-direction: row; gap: 4px; padding: 8px 12px; }
  .sidebar .side-group { flex-direction: row; gap: 4px; }
  .sidebar .side-heading, .side-collapse { display: none; }
  .sidebar a { min-block-size: 34px; padding: 6px 12px; border-radius: 980px; font-size: 0.9rem; gap: 6px; }
  .sidebar a.active::before { display: none; }
  .side-icon { inline-size: 17px; block-size: 17px; }
  .side-label-text { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .side-collapse svg { transition: none; } }


/* ---------- Dashboard ---------- */
.health { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: -4px 0 16px; }
.health-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 980px;
  color: var(--text); font-size: 0.82rem;  /* glass background: see "Liquid glass, everyone" */
  & .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--gray); flex: none; }
  &.ok .dot { background: var(--green); }
  &.bad .dot { background: var(--red); }
  &.bad { color: var(--red); }
}
a.health-item:hover, button.health-item:hover { text-decoration: none; filter: brightness(1.05); }
button.health-item { border: 0; font: inherit; font-size: 0.82rem; cursor: pointer; }
.health-problem { margin: -6px 0 16px; padding: 10px 14px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--red) 12%, var(--surface)); font-size: 0.88rem; }
.chats-waiting {
  margin-block-end: 18px; border-inline-start: 4px solid var(--orange);
  & h2 { margin: 0 0 8px; font-size: 1rem; }
  & ul { list-style: none; margin: 0; padding: 0; }
  & li { display: flex; align-items: center; gap: 12px; padding-block: 8px; }
  & li + li { border-block-start: 1px solid var(--separator); }
  & form { margin: 0; }
}
.dash-card .big.warn { color: var(--orange); }
.dash-small { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-block-start: -6px; }
.dash-small .dash-card { padding: 14px 16px; }
.dash-small .dash-card h2 { font-size: 0.82rem; }
.dash-small .big { font-size: 1.6rem; margin-block: 4px; }
.dash-small .dash-card p.small { margin: 2px 0 0; }
.warn-text { color: var(--orange); }
.dash-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-block-end: 20px; }
.dash-list {
  & h2 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
  & ul { list-style: none; margin: 8px -8px 0; padding: 0; }
  & li a { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: var(--radius-sm); color: var(--text); }
  & li a:hover { background: var(--segment-bg); text-decoration: none; }
  & li + li { border-block-start: 1px solid var(--separator); }
  & > p.muted:last-child { margin-block-end: 0; }
}
.dl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dl-sub { margin: 2px 0 0; }
.dl-main { display: grid; gap: 2px; flex: 1; min-inline-size: 0;
  & strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.dl-meta { display: flex; align-items: center; gap: 6px; flex: none; }
.count-pill { padding: 1px 8px; border-radius: 980px; background: color-mix(in oklab, var(--orange) 18%, transparent); color: var(--orange); font-size: 0.75rem; }
@media (max-width: 600px) {
  .dash-lists { grid-template-columns: 1fr; }
  .dl-meta .muted { display: none; }
}

.viz-section { margin: 28px 0 12px; font-size: 1.15rem; }


/* Chat with IT in the top bar (students, teachers, staff) */
.chat-open-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 980px;
  background: var(--segment-bg); color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer;
  & svg { inline-size: 17px; block-size: 17px; flex: none; }
  &:hover { background: color-mix(in oklab, var(--accent) 14%, var(--segment-bg)); text-decoration: none; color: var(--text); }
  &:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
}
.chat-dot {
  position: absolute; inset-block-start: 3px; inset-inline-end: 3px; inline-size: 9px; block-size: 9px;
  border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--surface);
  &.unread { background: var(--red); animation: count-bump 1.2s ease-out 2; }
}
.chat-dot[hidden] { display: none; }
/* Opens from the corner Help button, so it sits just above it. */
.livechat-popover { inset: auto 20px 80px auto; max-block-size: min(620px, calc(100dvh - 120px)); }
.chat-fab .chat-dot { inset-block-start: 2px; inset-inline-end: 2px; inline-size: 11px; block-size: 11px; box-shadow: 0 0 0 2px var(--accent); }
.livechat-embedded .livechat-head { align-items: center; }
.livechat-embedded .chat-log { max-block-size: min(360px, 50dvh); }
@media (max-width: 600px) {
  .chat-open-btn { padding: 6px 9px; }
  .livechat-popover { inset: auto 0 0 0; inline-size: 100%; max-block-size: 90dvh; border-radius: 18px 18px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .chat-dot.unread { animation: none; } }


/* Light/dark toggle in the top bar */
.theme-btn {
  display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
  & svg { inline-size: 19px; block-size: 19px; display: none; }
  &[data-current="auto"] .t-auto, &[data-current="light"] .t-light, &[data-current="dark"] .t-dark { display: block; }
  &:not([data-current]) .t-auto { display: block; }
  &:hover { background: var(--segment-bg); color: var(--text); }
  &:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
}
.appearance { border: 0; margin: 0; padding: 0; & legend { padding: 0; } }


/* ---------- Submit a ticket ---------- */
.submit-page { max-inline-size: 780px; }
.submit-head { margin-block-end: 18px; & h1 { margin-block-end: 6px; } }
.lead { margin: 0; color: var(--muted); font-size: 1.02rem; }
.submit-page .livechat { display: block; margin-block-end: 18px; padding: 14px 18px;
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.submit-page .livechat-head h2 { font-size: 1rem; }
.ticket-form { display: flex; flex-direction: column; gap: 16px; }
.form-step {
  display: flex; flex-direction: column; gap: 16px; padding: 20px 22px;
  & > h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.05rem; }
  & .field { margin: 0; }
  & fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  & legend { padding: 0; margin-block-end: 8px; font-weight: 600; font-size: 0.9rem; }
}
.step {
  display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-text); font-size: 0.82rem; font-weight: 700;
}
.who { display: flex; align-items: center; gap: 10px; margin: 0; }
.type-switch { display: flex; inline-size: fit-content; max-inline-size: 100%; }
.type-switch { align-items: center; padding: 3px; border-radius: 10px; }
.field .type-switch label {
  display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 7px 18px;
  border-radius: 8px; font-size: 0.9rem; font-weight: 500; line-height: 1.2; color: var(--text); white-space: nowrap;
  transition: background 0.15s;
}
.field .type-switch label:has(input:checked) { font-weight: 600; background: var(--accent); color: var(--accent-text); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18); }
.field .type-switch label:not(:has(input:checked)):hover { background: color-mix(in oklab, var(--segment-active) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .field .type-switch label { transition: none; } }
@media (max-width: 600px) {
  .field .type-switch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; inline-size: 100%; overflow: visible; }
  .field .type-switch label { padding: 8px 6px; white-space: normal; text-align: center; font-size: 0.85rem; }
}
.notify-other summary { cursor: pointer; color: var(--accent); margin-block-end: 8px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 12px 14px; border: 1.5px solid var(--separator); border-radius: 12px; background: var(--surface); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  & input { position: absolute; opacity: 0; pointer-events: none; }
  & svg { grid-row: 1 / 3; inline-size: 24px; block-size: 24px; color: var(--muted); }
  & .tile-title { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
  & .tile-hint { color: var(--muted); font-size: 0.76rem; line-height: 1.3; }
  &:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--separator)); }
  &:has(input:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
  &:has(input:checked) svg { color: var(--accent); }
  &:has(input:focus-visible) { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-input { position: absolute; opacity: 0; pointer-events: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 980px; cursor: pointer;
  border: 1.5px solid var(--separator); background: var(--surface); font-size: 0.88rem; font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
  &:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--separator)); }
  &.chip-other { border-style: dashed; color: var(--muted); }
}
.chip-input:checked + .chip { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.chip-input:checked + .chip::before { content: "✓"; font-weight: 700; }
.chip-input:focus-visible + .chip { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
.chip-input:disabled + .chip { display: none; }

.dropzone-box {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed var(--field-border); border-radius: 12px;
  background: var(--field-bg); cursor: pointer; font-weight: 400 !important; font-size: 0.92rem !important;
  & svg { inline-size: 30px; block-size: 30px; flex: none; color: var(--accent); }
  &:hover, &.over { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--field-bg)); }
}
#attachments:focus-visible + .dropzone-box, .dropzone:has(#attachments:focus-visible) .dropzone-box { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); }
.dropzone-files { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.85rem; color: var(--muted);
  & li::before { content: "📎 "; } }
.dropzone-files:empty { display: none; }

.submit-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 4px 24px; }
.submit-button { padding: 12px 28px; font-size: 1rem; }
@media (max-width: 600px) {
  .form-step { padding: 16px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submit-button { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tile, .chip { transition: none; } }

.ai-transcript { margin-block-end: 12px; padding-block-end: 8px; border-block-end: 1px solid var(--separator);
  & summary { cursor: pointer; margin-block-end: 8px; } }
.bubble.assistant-bubble { align-self: flex-start; background: color-mix(in oklab, var(--teal) 14%, var(--segment-bg)); border-end-start-radius: 6px; }

/* "Still need help?" under the assistant's answer; stronger when the assistant says it needs IT. */
.livechat-next, .chat-escalate { margin-block: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--segment-bg); }
.livechat-next p, .chat-escalate p { margin: 0 0 8px; }
.livechat-next .next-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.livechat-next.needs-it, .chat-escalate.needs-it {
  background: color-mix(in oklab, var(--orange) 14%, var(--surface)); border: 1px solid color-mix(in oklab, var(--orange) 40%, transparent);
}
.chat-escalate.needs-it .escalate-title strong::after { content: " This one needs IT."; font-weight: 400; color: var(--muted); }

.guest-badge { --c: var(--teal); font-size: 0.68rem; vertical-align: middle; }
.guest-avatar { background: color-mix(in oklab, var(--teal) 20%, var(--surface)); color: var(--teal); }

.guest-form { margin-block-start: 8px; }
.guest-form .guest-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block-end: 8px; }
.guest-form label { display: grid; gap: 3px; margin: 0; font-size: 0.8rem; font-weight: 600; }
.guest-form label.wide { grid-column: 1 / -1; }
.guest-form input { font: inherit; font-weight: 400; font-size: 0.9rem; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); }
@media (max-width: 600px) { .guest-form .guest-fields { grid-template-columns: 1fr; } }

.fixed-it { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-end: 10px; padding-block-end: 10px; border-block-end: 1px solid var(--separator); }
.fixed-it[hidden] { display: none; }

.outcome-fixed { --c: var(--green); }
.outcome-not_fixed { --c: var(--red); }
.outcome-it { --c: var(--blue); }
.outcome-ticket { --c: var(--orange); }
.outcome-ai { --c: var(--gray); }
.plain-list { margin: 0; padding-inline-start: 18px; }
.gap-list li { margin-block: 4px; }



/* Announcements: site-wide banners ("Canvas is down") and IT's page for posting them */
.announce {
  --c: var(--blue);
  display: flex; align-items: flex-start; gap: 10px;
  margin-block-end: 14px; padding: 10px 12px 10px 14px;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--c) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--c) 35%, transparent);
  &[hidden] { display: none; }
  & .announce-text { flex: 1; min-inline-size: 0; line-height: 1.45; }
  & .announce-text span { color: var(--muted); }
  & .announce-close { background: none; border: 0; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 0 4px; cursor: pointer; }
  & .announce-close:hover { color: inherit; }
}
.announce-outage { --c: var(--red); }
.announce-issue { --c: var(--orange); }
.announce-kind {
  flex: none; display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: #fff; background: var(--c, var(--blue));
}
.announce-form { margin-block-end: 28px; }
.announce-form h2 { margin: 0; }
.kind-picker {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  & label { --c: var(--blue); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 12px 14px; border-radius: var(--radius); cursor: pointer; font-weight: 400;
    background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--separator); }
  & label.announce-outage { --c: var(--red); }
  & label.announce-issue { --c: var(--orange); }
  & label:has(input:checked) { background: color-mix(in oklab, var(--c) 12%, var(--surface));
    box-shadow: inset 0 0 0 2px var(--c); }
  & label:has(input:focus-visible) { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
  & input { position: absolute; opacity: 0; pointer-events: none; }
}
.announce-form fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.announce-admin-list {
  list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px;
  & .announce-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
    padding: 12px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--separator); }
  & .announce-item > div { min-inline-size: 0; }
  & p { margin: 4px 0 0; }
  &.past .announce-item { padding-block: 8px; }
}

/* Knowledge base: article editor toolbar, preview and pictures */
.editor {
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--separator); background: var(--surface-2);
  & textarea { display: block; inline-size: 100%; border-start-start-radius: 0; border-start-end-radius: 0; tab-size: 4; }
}
.editor-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px;
  & button { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 34px; justify-content: center;
    padding: 5px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer; }
  & button:hover { background: var(--segment-bg); }
  & button:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); }
  & .editor-status { margin-inline-start: 6px; }
}
.editor-preview { margin-block-start: 10px;
  & summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; }
  & .kb-body { margin-block-start: 8px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--separator); }
}
.kb-image {
  display: block; max-inline-size: 100%; block-size: auto; max-block-size: 520px; margin-block: 8px;
  border-radius: 10px; box-shadow: 0 0 0 1px var(--separator);
}

/* Ticket controls: status, priority, assignee, team and due date at the top of the side panel */
.ticket-controls { margin: 0; }
.controls-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px;
  & .field { margin: 0; min-inline-size: 0; }
  & .span-2 { grid-column: 1 / -1; }
  & label { font-size: 0.75rem; color: var(--muted); font-weight: 600; margin-block-end: 4px; }
  & .side-row label { margin: 0; }
  & .side-row { margin-block-end: 4px; }
  & :is(select, input) { inline-size: 100%; }
}
.ticket-controls .hint { margin-block: 8px 0; }
.ticket-controls [data-save-button] { margin-block-start: 10px; inline-size: 100%; }
.ticket-controls.saving { opacity: 0.6; pointer-events: none; transition: opacity 0.2s; }

/* Requester's ticket page: who's helping, when it's expected, and "It's fixed" */
.ticket-progress {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px 24px; align-items: center; margin-block: 16px;
  & p { margin: 0; }
  & form { margin: 0; }
}
@media (max-width: 700px) { .ticket-progress { grid-template-columns: 1fr; } .ticket-progress .button { inline-size: 100%; } }


/* Front desk: "log a problem" on a device page */
.walk-in { margin-block-end: 20px;
  & summary { cursor: pointer; } & form { margin-block-start: 12px; } }

.email-preview { display: block; inline-size: 100%; max-inline-size: 640px; block-size: 900px; border: 0; border-radius: var(--radius); background: #f5f5f7; }

/* AI suggested reply on the IT ticket page */
.ai-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  color: #fff; background: var(--teal); vertical-align: 1px; }
.ai-draft { margin-block: 16px; border: 1px solid color-mix(in oklab, var(--teal) 35%, transparent);
  & summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
  & p { margin: 12px 0; } }
.ai-draft-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ai-note { margin-block: 12px; }

/* Classroom emergency (teachers and staff) in the Help chat, and on IT's chat list */
.emergency { margin-block-end: 10px; }
.emergency[hidden] { display: none; }
.emergency-btn {
  display: flex; align-items: center; gap: 8px; inline-size: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, var(--red) 40%, transparent); background: color-mix(in oklab, var(--red) 10%, var(--surface));
  color: var(--red); font: inherit; font-weight: 600; cursor: pointer; text-align: start;
  & .muted { font-weight: 400; }
}
.emergency-btn:hover { background: color-mix(in oklab, var(--red) 16%, var(--surface)); }
.emergency-btn[hidden] { display: none; }
.emergency-form { padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--red) 7%, var(--surface));
  & p { margin: 6px 0 0; } & textarea { inline-size: 100%; } }
.button.danger-btn { background: var(--red); border-color: var(--red); color: #fff; }
.chat-list li.urgent > a { box-shadow: inset 4px 0 0 var(--red); }
.alerts-card { margin-block: 20px; }

.signout-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; padding-block: 12px;
  & p { margin: 0; flex: 1 1 320px; } }

/* Profile: Appearance as three picture tiles (Auto / Light / Dark) */
.theme-picker { display: flex; flex-wrap: wrap; gap: 14px; margin-block: 4px 2px; }
.theme-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  & input { position: absolute; opacity: 0; pointer-events: none; }
  & .theme-name { font-size: 0.85rem; font-weight: 500; }
  &:has(input:checked) .theme-name { font-weight: 600; color: var(--accent); }
  &:has(input:checked) .theme-preview { box-shadow: 0 0 0 3px var(--accent); }
  &:has(input:focus-visible) .theme-preview { outline: 3px solid color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 4px; }
}
.theme-preview {
  --bg: #ffffff; --bar: #e8e8ed; --side: #f2f2f7; --ink: #d1d1d6; --accent-dot: #0071e3;
  position: relative; display: block; inline-size: 96px; block-size: 64px; border-radius: 10px; overflow: hidden;
  background: var(--bg); box-shadow: 0 0 0 1px var(--separator);
  transition: box-shadow 0.15s;
  & .tp-bar { position: absolute; inset: 0 0 auto 0; block-size: 12px; background: var(--bar); }
  & .tp-side { position: absolute; inset: 12px auto 0 0; inline-size: 24px; background: var(--side); }
  & .tp-line { position: absolute; inset-inline-start: 32px; inset-block-start: 22px; inline-size: 50px; block-size: 6px; border-radius: 3px; background: var(--ink); }
  & .tp-line.short { inset-block-start: 34px; inline-size: 32px; background: var(--accent-dot); }
}
.theme-preview-dark { --bg: #1c1c1e; --bar: #2c2c2e; --side: #242426; --ink: #48484a; --accent-dot: #0a84ff; }
/* Auto: half light, half dark */
.theme-preview-auto::after {
  content: ""; position: absolute; inset: 0; background: #1c1c1e; clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.92;
}

/* ---------- Phone fixes ---------- */
/* Top bar on one row when signed in: "QAS IT", icons and "+ New". (IT's Help page is in their menu.) */
@media (max-width: 600px) {
  .brand-long, .hide-xs { display: none; }
  .topbar:has(.avatar-link) { flex-wrap: nowrap; padding-inline: 12px; }
  .topbar:has(.avatar-link) nav { flex-wrap: nowrap; gap: 6px 10px; }
  .topbar:has(.avatar-link) .brand { min-inline-size: 0; flex: 0 1 auto; }
  /* "QAS IT" shortens (QAS I…) instead of running under the bell when IT's extra buttons need the room. */
  .topbar:has(.avatar-link) .brand > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  /* IT (the bell) on a phone: just the crest, since their extra buttons leave no room for the name. */
  .topbar:has(.bell) .brand > span { display: none; }
  .topbar:has(.bell) .brand { flex: none; }
}
/* The ticket side panel: one column, so no inner scroll area (this beats the desktop rule in its layer). */
@media (max-width: 900px) {
  aside.ticket-side { position: static; max-block-size: none; overflow: visible; }
}
/* Appearance tiles: all three on one row, sized to fit */
.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); gap: 12px; }
.theme-tile .theme-preview { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; }
/* Emergency alerts box on the Profile page */
.alerts-card { & h2 { margin: 0; } & p { margin: 0; } & .form-actions { justify-content: flex-start; } }

/* ---------- Classroom emergency ---------- */
/* Top bar button: red for teachers; for IT, quiet unless something is open */
.button.emergency-top { display: inline-flex; align-items: center; gap: 6px; background: var(--red); border-color: var(--red); color: #fff; }
.button.emergency-top.is-quiet { background: transparent; border-color: color-mix(in oklab, var(--red) 45%, transparent); color: var(--red); }
.button.emergency-top:not(.is-quiet) { animation: em-pulse 1.6s ease-in-out infinite; }
.emergency-count { display: inline-grid; place-items: center; min-inline-size: 18px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--red); font-size: 0.75rem; font-weight: 700; }
@keyframes em-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--red) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .button.emergency-top:not(.is-quiet) { animation: none; } }
a.emergency-btn { text-decoration: none; margin-block-end: 10px; }

/* Teacher page */
.emergency-page { max-inline-size: 640px; margin-inline: auto; display: grid; gap: 16px; }
.emergency-head { display: flex; gap: 14px; align-items: flex-start;
  & h1 { margin: 0 0 4px; } & p { margin: 0; } }
.emergency-icon { flex: none; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 14px; background: var(--red); color: #fff; }
.emergency-card { display: grid; gap: 14px;
  & .field { margin: 0; } & fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  & input[name=room] { font-size: 1.1rem; padding-block: 10px; } }
.emergency-issues { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.emergency-issue { position: relative; cursor: pointer;
  & input { position: absolute; opacity: 0; pointer-events: none; }
  & span { display: flex; align-items: center; justify-content: center; text-align: center; min-block-size: 48px; padding: 8px 10px;
    border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--separator); font-weight: 500; }
  & input:checked + span { background: color-mix(in oklab, var(--red) 14%, var(--surface)); box-shadow: inset 0 0 0 2px var(--red); font-weight: 600; }
  & input:focus-visible + span { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); } }
.button.emergency-go { inline-size: 100%; min-block-size: 56px; font-size: 1.15rem; font-weight: 700; background: var(--red); border-color: var(--red); color: #fff; }
.emergency-card .hint { margin: 0; text-align: center; }
.emergency-live { display: grid; gap: 10px;
  & .chat-log { max-block-size: 50vh; min-block-size: 120px; } }
.emergency-status { font-size: 1.05rem; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--red) 10%, var(--surface)); }
.emergency-done { display: flex; justify-content: center; }

/* IT page */
.emergency-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.emergency-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; box-shadow: inset 4px 0 0 var(--red), var(--shadow-md);
  & form { margin: 0; } }
.emergency-row-main { display: grid; gap: 2px; min-inline-size: 0; flex: 1 1 260px; color: inherit; text-decoration: none; }
.emergency-room { font-size: 1.15rem; font-weight: 700; color: var(--red); }
.emergency-row-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button.emergency-take { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.emergency-none { padding: 16px; }

/* ---------- IT chat page: one header with the actions, conversation underneath ---------- */
.chat-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px;
  max-inline-size: 860px; margin-block-end: 16px; padding: 18px 20px;
  & h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; }
  & p { margin: 4px 0 0; }
  &.urgent { box-shadow: inset 4px 0 0 var(--red), var(--shadow-md); }
  &.urgent h1 { color: var(--red); font-size: 1.9rem; }
}
.chat-head-main { min-inline-size: 0; flex: 1 1 320px; }
.chat-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px !important;
  color: var(--red); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.chat-who { font-size: 1.02rem; }
.chat-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chat-head-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; & form { margin: 0; } }
.staff-chat { max-inline-size: 860px; }
.staff-chat .chat-log { padding-inline: 2px; }
.staff-chat .bubble { max-inline-size: min(75%, 560px); }
.quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px 10px; }
.quick-chip {
  padding: 6px 12px; border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 8%, transparent); color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.quick-chip:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
@media (max-width: 600px) {
  .chat-head { padding: 14px 16px; }
  .chat-head-side { align-items: flex-start; inline-size: 100%; }
  .chat-head-actions { justify-content: flex-start; }
}

.alerts-card.compact { margin-block: 0; & h2 { font-size: 1.05rem; } }

/* Profile: notifications as a table, Email and This device side by side */
.notif-grid { display: grid; gap: 0; }
.notif-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px 100px; align-items: center; gap: 12px;
  padding-block: 10px; border-block-end: 1px solid var(--separator);
  & > span:not(:first-child) { justify-self: center; }
}
.notif-head { padding-block: 0 6px; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
@media (max-width: 480px) { .notif-row { grid-template-columns: minmax(0, 1fr) 56px 84px; gap: 8px; } }

/* Delete (IT owner only) */
.delete-form { margin: 4px 0 8px; }
.delete-form .link, .danger-text { display: inline-flex; align-items: center; gap: 6px; }

/* Chats page: emergencies and regular chats in their own sections */
.chat-section { display: flex; align-items: center; gap: 8px; margin-block: 24px 10px; }
.emergency-heading { color: var(--red); }
.chat-subsection { margin: 14px 0 6px; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.emergency-room-inline { color: var(--red); }

/* Analytics: Right now */
.kpi-alert { box-shadow: inset 0 3px 0 var(--red), var(--shadow-md); & .kpi-value { color: var(--red); } }
.now-list { & li { display: grid; gap: 2px; padding-block: 6px; border-block-end: 1px solid var(--separator); } & li:last-child { border: 0; } }

/* Photos and files in chats */
.chat-file-buttons { display: flex; gap: 2px; align-self: flex-end; }
.chat-file-buttons[hidden] { display: none; }
.icon-btn { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--segment-bg); color: var(--text); }
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; white-space: normal; inline-size: fit-content; max-inline-size: 100%; }
.bubble.photo-only { background: none; padding: 0; & .bubble-name { color: var(--muted); opacity: 1; } & .chat-files { margin: 0; } }
.chat-img img { display: block; inline-size: auto; max-inline-size: min(240px, 60vw); max-block-size: 240px; border-radius: 12px; object-fit: cover; }
.chat-file { display: inline-block; padding: 6px 10px; border-radius: 10px; background: color-mix(in oklab, currentColor 12%, transparent); color: inherit; font-size: 0.85rem; }
.bubble.me .chat-file { color: var(--accent-text); }

/* Phones: keep the top bar on one line */
.show-xs { display: none; }
.topbar .brand > span, .topbar .button { white-space: nowrap; }
@media (max-width: 600px) {
  .show-xs { display: inline-block; }
  .topbar .get-help { display: inline-grid; place-items: center; }
}

.chat-video { display: block; inline-size: min(280px, 70vw); max-block-size: 320px; border-radius: 12px; background: #000; }

/* "Someone else" on the ticket form: name suggestions under the name box (submit.html). */
.person-search { position: relative; }
.person-results {
  position: absolute; z-index: 20; inset-inline: 0; inset-block-start: calc(100% - 18px); margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
  max-block-size: 280px; overflow-y: auto;
}
.person-results[hidden] { display: none; }
.person-results button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; inline-size: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
.person-results button:hover, .person-results button:focus-visible { background: var(--surface-2); outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
[data-show-when-for][hidden], .device-picker[hidden] { display: none; }

/* Quick "Assign to me" (ticket page and ticket list). */
button.assign-me {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border: 0; border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent);
  font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
button.assign-me:hover { background: var(--accent); color: var(--accent-text); }
button.assign-me:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { button.assign-me { transition: none; } }
.sync-buttons { display: flex; flex-wrap: wrap; gap: 8px; & form { margin: 0; } }
.bulkbar .bulk-note { flex: 1 1 220px; min-inline-size: 0; inline-size: auto; }

/* Get help: the help-articles card above the chat. Submit a ticket: the optional quick-fix line. */
.kb-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-block-end: 16px; }
.kb-jump > div { flex: 1 1 220px; & h2 { margin: 0; font-size: 1.05rem; } & p { margin: 2px 0 0; } }
.kb-jump .filters { flex: 1 1 260px; margin: 0; & input { flex: 1; min-inline-size: 0; } }
.quick-fix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-block: 12px; margin-block-end: 16px; }
.quick-fix p { margin: 0; flex: 1 1 260px; }


/* Photo pop-up (static/lightbox.js) */
.lightbox {
  inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; padding: 0;
  border: 0; background: rgb(0 0 0 / 0.88); color: #fff;
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
.lightbox-stage { display: grid; place-items: center; min-block-size: 0; padding: 56px 64px 8px; }
.lightbox-stage img { max-inline-size: 100%; max-block-size: calc(100dvh - 120px); object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.5); }
.lightbox-bar { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px 18px; font-size: 0.9rem; color: rgb(255 255 255 / 0.85); }
.lightbox-bar a { color: #fff; text-decoration: underline; }
.lightbox-btn {
  position: absolute; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 0.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.lightbox-btn:hover, .lightbox-btn:focus-visible { background: rgb(255 255 255 / 0.28); outline: none; }
.lightbox-btn[hidden] { display: none; }
.lightbox-close { inset-block-start: 12px; inset-inline-end: 12px; }
.lightbox-prev { inset-inline-start: 12px; inset-block-start: 50%; translate: 0 -50%; }
.lightbox-next { inset-inline-end: 12px; inset-block-start: 50%; translate: 0 -50%; }
@media (max-width: 600px) { .lightbox-stage { padding-inline: 12px; } .lightbox-prev, .lightbox-next { inset-block-start: auto; inset-block-end: 56px; translate: none; } }

/* Chat reactions (static/chatreact.js) */
[data-react-log] { padding-block-start: 18px; }
[data-react-log] [data-message-id] { position: relative; }
[data-react-log] .bubble:has(> .reactions) { margin-block-start: 12px; }
.reactions { position: absolute; inset-block-start: -15px; display: flex; gap: 3px; white-space: nowrap; }
.bubble.me > .reactions { inset-inline-start: -8px; }
.bubble.bot > .reactions { inset-inline-end: -8px; }
.reaction {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--separator); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  color: var(--text); font-size: 0.8rem; font-style: normal; font-weight: 600;
}
.reaction.mine { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.react-btn {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; display: grid; place-items: center; inline-size: 26px; block-size: 26px;
  padding: 0; border: 1px solid var(--separator); border-radius: 50%; background: var(--surface); color: var(--muted);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.bubble.me > .react-btn { inset-inline-start: -32px; }
.bubble.bot > .react-btn { inset-inline-end: -32px; }
.can-react [data-message-id]:hover > .react-btn, .react-btn:focus-visible { opacity: 1; }
@media (hover: none) { .react-btn { display: none; } }  /* touch: press and hold the message instead */
@media (prefers-reduced-motion: reduce) { .react-btn { transition: none; } }
.react-picker {
  position: absolute; inset-block-end: calc(100% + 6px); z-index: 30; display: flex; gap: 2px; padding: 4px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--separator); box-shadow: 0 6px 22px rgb(0 0 0 / 0.2);
  white-space: nowrap;
}
.react-picker.below { inset-block-end: auto; inset-block-start: calc(100% + 6px); }
.bubble.me > .react-picker { inset-inline-end: 0; }
.bubble.bot > .react-picker { inset-inline-start: 0; }
.react-picker button { inline-size: 36px; block-size: 36px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.react-picker button:hover, .react-picker button:focus-visible, .react-picker button.picked { background: var(--segment-bg); outline: none; }
.remind-box { margin-block-end: 14px; & .button { display: inline-flex; align-items: center; gap: 6px; } & .hint { margin: 6px 0 0; } }
.reply-checks { display: flex; flex-wrap: wrap; gap: 4px 22px; & .field { margin: 0; } }
.schedule-fields[hidden], p[data-schedule][hidden] { display: none; }

/* ===================== Color & motion =====================
   A little more color, and gentle motion. Every animation is off for "Reduce motion". */

/* School colors running along the bottom of the top bar. */
.topbar::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 3px;
  /* School colors: navy at the ends, gold through the middle. */
  background: linear-gradient(90deg, #0b2263, #c4961f 18%, #f0c94a 50%, #c4961f 82%, #0b2263);
}

:root[data-theme="light"] .topbar::after { background: linear-gradient(90deg, #0b2263, #a87a10 18%, #d4a017 50%, #a87a10 82%, #0b2263); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .topbar::after { background: linear-gradient(90deg, #0b2263, #a87a10 18%, #d4a017 50%, #a87a10 82%, #0b2263); }
}

/* Each "What do you need help with?" tile gets its own color. */
.tile[data-tile="device"] { --tile: var(--blue); }
.tile[data-tile="app"] { --tile: var(--yellow); }
.tile[data-tile="canvas"] { --tile: var(--red); }
.tile[data-tile="classroom"] { --tile: var(--teal); }
.tile[data-tile="sis"] { --tile: var(--green); }
.tile[data-tile="printer"] { --tile: var(--orange); }
.tile[data-tile="other"] { --tile: var(--muted); }
.tile[data-tile] {
  & svg { box-sizing: content-box; padding: 7px; border-radius: 10px; color: var(--tile);
          background: color-mix(in oklab, var(--tile) 13%, transparent); }
  &:hover { border-color: color-mix(in oklab, var(--tile) 55%, var(--separator)); }
  &:has(input:checked) { border-color: var(--tile); background: color-mix(in oklab, var(--tile) 9%, var(--surface)); }
  &:has(input:checked) svg { color: #fff; background: var(--tile); }
}

/* Big page titles: a soft school-color gradient. */
.hero h1, .submit-head h1 {
  background: linear-gradient(100deg, var(--text) 10%, var(--blue) 70%, var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* The ticket-submitted check mark. */
.done-check { display: block; inline-size: 64px; block-size: 64px; margin-block-end: 10px; color: var(--green); }
.done-check circle { fill: color-mix(in oklab, var(--green) 14%, transparent); }

/* The crest intro (static/intro.js). */
.intro {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: var(--bg); color: #091f5b; transition: background-color 0.45s ease, opacity 0.45s ease;
}
:root[data-theme="dark"] .intro { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .intro { color: #fff; } }
.intro-crest { block-size: min(34vh, 220px); inline-size: auto; overflow: visible; }
.intro-crest :is(path, rect, circle, ellipse, polygon, polyline, line) {
  fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1;
}
.intro.drawing .intro-crest :is(path, rect, circle, ellipse, polygon, polyline, line) {
  animation: crest-draw 0.9s cubic-bezier(.4,0,.2,1) var(--d, 0ms) forwards, crest-fill 0.45s ease-out calc(0.7s + var(--d, 0ms)) forwards;
}
.intro-name { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); opacity: 0; }
.intro.drawing .intro-name { animation: rise 0.5s ease-out 0.9s forwards; }
.intro.leaving { background-color: transparent; pointer-events: none; }
.intro.leaving .intro-name { opacity: 0; transition: opacity 0.2s; animation: none; }
@keyframes crest-draw { to { stroke-dashoffset: 0; } }
@keyframes crest-fill { to { fill-opacity: 1; stroke-opacity: 0; } }

@keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes pop { from { opacity: 0; scale: 0.92; } to { opacity: 1; scale: 1; } }
@keyframes slide-down { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes check-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ring { 0%, 100% { rotate: 0deg; } 15% { rotate: 14deg; } 30% { rotate: -12deg; } 45% { rotate: 9deg; } 60% { rotate: -6deg; } 75% { rotate: 3deg; } }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--red) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }

@media (prefers-reduced-motion: no-preference) {
  /* Smooth fades between pages (browsers that support it; others just switch). */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.18s ease-in both vt-out; }
  ::view-transition-new(root) { animation: 0.28s ease-out both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; translate: 0 6px; } }

  /* Cards and tiles arrive in a quick stagger. */
  .dash > *, .kpis > *, .tiles > *, .dash-lists > *, .viz-grid > *, .kb-group, .form-step, .emergency-card {
    animation: rise 0.42s cubic-bezier(.2,.7,.2,1) backwards;
  }
  :is(.dash, .kpis, .tiles, .dash-lists, .viz-grid) > :nth-child(2) { animation-delay: 40ms; }
  :is(.dash, .kpis, .tiles, .dash-lists, .viz-grid) > :nth-child(3) { animation-delay: 80ms; }
  :is(.dash, .kpis, .tiles, .dash-lists, .viz-grid) > :nth-child(4) { animation-delay: 120ms; }
  :is(.dash, .kpis, .tiles, .dash-lists, .viz-grid) > :nth-child(5) { animation-delay: 160ms; }
  :is(.dash, .kpis, .tiles, .dash-lists, .viz-grid) > :nth-child(6) { animation-delay: 200ms; }
  :is(.dash, .kpis, .tiles, .dash-lists, .viz-grid) > :nth-child(n+7) { animation-delay: 240ms; }
  .form-step:nth-of-type(2) { animation-delay: 60ms; } .form-step:nth-of-type(3) { animation-delay: 120ms; }

  /* Things you can click lift a little, and press in. */
  .tile, .kpi, .button, .quick-chip, .chip { transition: border-color 0.15s, background 0.15s, translate 0.15s, scale 0.1s, box-shadow 0.15s; }
  .tile:hover, a.card:hover, .kb-jump .button:hover { translate: 0 -2px; }
  .tile:hover, a.dash-card:hover { box-shadow: 0 8px 20px rgb(0 0 0 / 0.08); }
  .button:active, .tile:active, .chip:active { scale: 0.97; }

  /* Messages pop in; confirmations slide in. */
  .chat-log .bubble { animation: pop 0.22s cubic-bezier(.2,.8,.3,1.2) backwards; transform-origin: bottom right; }
  .chat-log .bubble.bot { transform-origin: bottom left; }
  .chat-log .chat-note { animation: rise 0.3s ease-out backwards; }
  .flash { animation: slide-down 0.3s ease-out; }
  .reaction { animation: pop 0.25s cubic-bezier(.2,.8,.3,1.3); }

  /* The ticket-submitted check draws itself. */
  .done-check circle { animation: pop 0.35s ease-out backwards; }
  .done-check path { stroke-dasharray: 1; animation: check-draw 0.45s ease-out 0.25s backwards; }

  /* IT: the Emergency button pulses while one is waiting; the bell rings when something new arrives. */
  .button.emergency-top:not(.is-quiet) { animation: pulse-red 1.8s ease-out infinite; }
  .bell.ringing svg { animation: ring 0.9s ease-in-out; transform-origin: 50% 10%; }
}

/* The green check that draws itself (success messages, resolved tickets, "it's fixed"). */
.check-draw { inline-size: 1.3em; block-size: 1.3em; flex: none; color: var(--green); overflow: visible; }
.check-draw circle { fill: color-mix(in oklab, var(--green) 16%, transparent); }
.check-draw path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.check-draw.big { inline-size: 56px; block-size: 56px; }
.check-draw.big path { stroke-width: 2.2; }
.flash-success { display: flex; align-items: center; gap: 10px; background: color-mix(in oklab, var(--green) 12%, var(--surface)); }
@media (prefers-reduced-motion: no-preference) {
  .check-draw circle { animation: pop 0.3s ease-out backwards; transform-origin: center; transform-box: fill-box; }
  .check-draw path { stroke-dasharray: 1; animation: check-draw 0.45s ease-out 0.2s backwards; }
}
.resolved-card { display: flex; align-items: center; gap: 16px; margin-block: 14px; background: color-mix(in oklab, var(--green) 9%, var(--surface));
  & p { margin: 0; } & .resolved-title { font-size: 1.15rem; font-weight: 700; color: var(--green); } }
.chat-note.done-note { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.emergency-fixed { display: flex; align-items: center; gap: 16px; background: color-mix(in oklab, var(--green) 9%, var(--surface));
  & p { margin: 0; } & .resolved-title { font-size: 1.15rem; font-weight: 700; color: var(--green); } }

/* ===================== Floating navigation (students, teachers, staff) =====================
   No top bar: the crest and the profile float at the top, and big buttons sit in a dock at the bottom. */
.floating-nav .layout > main { padding-block: 84px 132px; }
.float-top {
  position: fixed; inset-block-start: 12px; inset-inline: 14px; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none;
}
.float-pill {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--separator);
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 6px 22px rgb(0 0 0 / 0.1);
}
.float-top .brand { color: var(--text); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.float-top .brand img { block-size: 32px; inline-size: auto; }
.float-tools { gap: 6px; padding: 5px; }
.float-tools .theme-btn { inline-size: 40px; block-size: 40px; }
.float-tools .avatar { inline-size: 40px; block-size: 40px; font-size: 0.95rem; }
.float-tools .avatar-link { display: inline-flex; border-radius: 50%; }

.dock {
  position: fixed; inset-block-end: max(16px, env(safe-area-inset-bottom)); inset-inline-start: 50%; translate: -50% 0; z-index: 30;
  display: flex; gap: 6px; padding: 8px; border-radius: 26px; border: 1px solid var(--separator);
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.16), 0 2px 8px rgb(0 0 0 / 0.08);
}
.dock-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-inline-size: 92px; min-block-size: 70px; padding: 8px 14px; border: 0; border-radius: 20px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  & svg { inline-size: 28px; block-size: 28px; }
  &:hover { text-decoration: none; background: var(--segment-bg); }
  &.active { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); }
  &.primary { background: var(--accent); color: var(--accent-text); }
  &.primary.active { box-shadow: inset 0 0 0 2px color-mix(in oklab, #fff 40%, transparent); }
  &.danger { color: var(--red); }
  &.danger.active, &.danger:hover { background: color-mix(in oklab, var(--red) 14%, transparent); }
  &:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; }
  & .chat-dot { position: absolute; inset-block-start: 8px; inset-inline-end: 22px; }
}
/* The help chat opens above the dock. */
.floating-nav .chat-popover { inset-block-end: 112px; inset-inline-end: 50%; translate: 50% 0; }
@media (max-width: 600px) {
  .floating-nav .layout > main { padding-block: 76px 116px; }
  .float-top { inset-inline: 10px; inset-block-start: 8px; }
  .float-top .brand-long { display: none; }
  .dock { inset-inline: 8px; translate: none; inset-block-end: max(8px, env(safe-area-inset-bottom)); justify-content: space-around; gap: 2px; padding: 6px; }
  .dock-btn { min-inline-size: 0; flex: 1; min-block-size: 62px; padding: 6px 4px; font-size: 0.72rem; & svg { inline-size: 26px; block-size: 26px; } }
  .floating-nav .chat-popover { inset: auto 0 0 0; translate: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .dock { animation: dock-in 0.45s cubic-bezier(.2,.8,.3,1.1) backwards; }
  .float-top { animation: slide-down 0.4s ease-out backwards; }
  .dock-btn { transition: background 0.15s, scale 0.1s, translate 0.15s; }
  .dock-btn:hover { translate: 0 -2px; }
  .dock-btn:active { scale: 0.95; }
}
@keyframes dock-in { from { opacity: 0; translate: -50% 24px; } to { opacity: 1; translate: -50% 0; } }
@media (max-width: 600px) { @keyframes dock-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } } }

/* The help chat on its own page: the conversation fills the screen. */
.chat-page { max-inline-size: 820px; margin-inline: auto; }
.chat-page .livechat { margin: 0; }
/* As tall as the screen allows, with the typing box still above the dock; the messages scroll inside. */
.chat-page .chat-log { max-block-size: none; block-size: max(240px, calc(100dvh - 400px)); }
.floating-nav .chat-page .chat-log { block-size: max(220px, calc(100dvh - 470px)); }

/* Liquid glass for the floating crest, profile and dock (Apple style): very see-through, strong blur,
   a bright rim along the top edge and a soft sheen across the top half. */
.float-pill, .dock {
  --glass-tint: rgb(255 255 255 / 0.12);
  --glass-rim: rgb(255 255 255 / 0.95);
  --glass-edge: rgb(255 255 255 / 0.45);
  --glass-sheen: rgb(255 255 255 / 0.5);
  --glass-shadow: 0 10px 34px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.06);
  isolation: isolate; overflow: hidden;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.06);
  backdrop-filter: blur(12px) saturate(200%) brightness(1.06);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 rgb(255 255 255 / 0.18),
    inset 0 0 18px rgb(255 255 255 / 0.12),
    var(--glass-shadow);
}
.float-pill { position: relative; }  /* the dock is already position: fixed */
.float-pill::before, .dock::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-sheen), transparent 52%),
              radial-gradient(120% 60% at 50% -10%, rgb(255 255 255 / 0.35), transparent 60%);
  opacity: 0.85;
}
:root[data-theme="dark"] :is(.float-pill, .dock)::before { opacity: 0.6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.float-pill, .dock)::before { opacity: 0.6; } }
:root[data-theme="dark"] :is(.float-pill, .dock) {
  --glass-tint: rgb(40 44 52 / 0.38); --glass-rim: rgb(255 255 255 / 0.28); --glass-edge: rgb(255 255 255 / 0.14);
  --glass-sheen: rgb(255 255 255 / 0.14); --glass-shadow: 0 12px 36px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.float-pill, .dock) {
    --glass-tint: rgb(40 44 52 / 0.38); --glass-rim: rgb(255 255 255 / 0.28); --glass-edge: rgb(255 255 255 / 0.14);
    --glass-sheen: rgb(255 255 255 / 0.14); --glass-shadow: 0 12px 36px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
  }
}
/* Buttons inside the dock: a glass lens when picked; tinted glass for New ticket and Emergency. */
.dock-btn { isolation: isolate; }
.dock-btn:hover { background: rgb(255 255 255 / 0.22); }
.dock-btn.active:not(.primary, .danger) {
  background: rgb(255 255 255 / 0.42); color: var(--accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 1px rgb(0 0 0 / 0.04), 0 2px 10px rgb(0 0 0 / 0.08);
}
.dock-btn.primary {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 78%, #fff), color-mix(in oklab, var(--accent) 92%, #000));
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -2px 6px rgb(0 0 0 / 0.12), 0 6px 18px color-mix(in oklab, var(--accent) 40%, transparent);
}
.dock-btn.primary.active { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), inset 0 0 0 2px rgb(255 255 255 / 0.35), 0 6px 18px color-mix(in oklab, var(--accent) 45%, transparent); }
.dock-btn.danger { color: var(--red); }
.dock-btn.danger:hover, .dock-btn.danger.active {
  background: color-mix(in oklab, var(--red) 16%, rgb(255 255 255 / 0.3));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 2px 10px color-mix(in oklab, var(--red) 20%, transparent);
}
:root[data-theme="dark"] .dock-btn:hover { background: rgb(255 255 255 / 0.08); }
:root[data-theme="dark"] .dock-btn.active:not(.primary, .danger) { background: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 2px 10px rgb(0 0 0 / 0.3); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dock-btn:hover { background: rgb(255 255 255 / 0.08); }
  :root:not([data-theme="light"]) .dock-btn.active:not(.primary, .danger) { background: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 2px 10px rgb(0 0 0 / 0.3); color: #fff; }
}
/* Browsers without backdrop blur: a solid frosted fallback so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .float-pill, .dock { background: var(--surface); }
}

/* Students, teachers and staff: every page uses the same centered column, so boxes don't change
   width from page to page. */
.floating-nav .layout > main { max-inline-size: 880px; }
.floating-nav :is(.submit-page, .chat-page, .emergency-page, .stack, .profile-form, .signout-form, .kb-article,
                  .notice + .form-card, h1 + .notice) {
  max-inline-size: none;
}
.floating-nav .emergency-page, .floating-nav .chat-page { margin-inline: 0; }
/* A live classroom emergency: the messages fit the screen so the typing box and "It's fixed" sit above the
   dock instead of under it. */
.floating-nav .emergency-live .chat-log { max-block-size: none; block-size: max(160px, calc(100dvh - 615px)); }

/* ---------- Liquid glass, everyone ----------
   A soft navy and gold light (the school colors) behind every page, and the panels on top of it are see-through glass: a bright
   rim along the top edge, a sheen across the top, light passing through. Bars that content scrolls under
   (IT's top bar and sidebar, the bulk bar, menus) also blur what's behind them. In the components layer,
   so colored variants (urgent, internal note, resolution...) keep their own colors. */
:root {
  --lg-fill: rgb(255 255 255 / 0.4);
  --lg-card: rgb(255 255 255 / 0.86);  /* content boxes: mostly solid so text and edges stay crisp */
  --lg-bar: rgb(255 255 255 / 0.42);
  --lg-lens: rgb(255 255 255 / 0.7);
  --lg-rim: rgb(255 255 255 / 1);
  --lg-edge: rgb(255 255 255 / 0.8);
  --lg-line: rgb(0 0 0 / 0.06);
  /* Glossy: a bright highlight along the top fading out, plus a soft light spot near the top-left corner. */
  --lg-sheen:
    radial-gradient(70% 55% at 18% 0%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.12) 38%, rgb(255 255 255 / 0) 60%,
                    rgb(0 40 100 / 0) 75%, rgb(0 40 100 / 0.035));  /* a touch of shade at the bottom: curved glass */
  --lg-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 30px rgb(30 60 110 / 0.08);
  --lg-wash:
    radial-gradient(55% 45% at 0% 0%, rgb(12 35 100 / 0.22), transparent 70%),
    radial-gradient(50% 45% at 100% 8%, rgb(212 160 30 / 0.34), transparent 70%),
    radial-gradient(60% 50% at 85% 100%, rgb(12 35 100 / 0.17), transparent 70%),
    radial-gradient(50% 40% at 5% 95%, rgb(212 160 30 / 0.26), transparent 70%);
}
:root[data-theme="dark"] {
  --lg-fill: rgb(48 50 58 / 0.5);
  --lg-card: rgb(38 40 46 / 0.82);
  --lg-bar: rgb(30 32 38 / 0.55);
  --lg-lens: rgb(255 255 255 / 0.13);
  --lg-rim: rgb(255 255 255 / 0.2);
  --lg-edge: rgb(255 255 255 / 0.09);
  --lg-line: rgb(255 255 255 / 0.06);
  --lg-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 46%);
  --lg-shadow: 0 12px 34px rgb(0 0 0 / 0.45);
  --lg-wash:
    radial-gradient(55% 45% at 0% 0%, rgb(30 64 160 / 0.5), transparent 70%),
    radial-gradient(50% 45% at 100% 8%, rgb(212 160 30 / 0.26), transparent 70%),
    radial-gradient(60% 50% at 85% 100%, rgb(30 64 160 / 0.38), transparent 70%),
    radial-gradient(50% 40% at 5% 95%, rgb(212 160 30 / 0.18), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-fill: rgb(48 50 58 / 0.5);
    --lg-card: rgb(38 40 46 / 0.82);
    --lg-bar: rgb(30 32 38 / 0.55);
    --lg-lens: rgb(255 255 255 / 0.13);
    --lg-rim: rgb(255 255 255 / 0.2);
    --lg-edge: rgb(255 255 255 / 0.09);
    --lg-line: rgb(255 255 255 / 0.06);
    --lg-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 46%);
    --lg-shadow: 0 12px 34px rgb(0 0 0 / 0.45);
    --lg-wash:
      radial-gradient(55% 45% at 0% 0%, rgb(30 64 160 / 0.5), transparent 70%),
      radial-gradient(50% 45% at 100% 8%, rgb(212 160 30 / 0.26), transparent 70%),
      radial-gradient(60% 50% at 85% 100%, rgb(30 64 160 / 0.38), transparent 70%),
      radial-gradient(50% 40% at 5% 95%, rgb(212 160 30 / 0.18), transparent 70%);
  }
}

@layer components {
  body { background: var(--lg-wash), var(--bg); background-attachment: fixed; }

  /* Content boxes: nearly solid, with the glass edge and sheen. (Apple keeps clear glass for the controls
     that float over content, not the content itself.) */
  .card, .table-wrap, .comment, .kb-list, .chat-list {
    background: var(--lg-sheen), var(--lg-card);
    box-shadow: inset 0 1px 0 var(--lg-rim), inset 0 0 0 1px var(--lg-edge), inset 0 -1px 0 rgb(0 30 80 / 0.05), var(--lg-shadow);
  }
  .health-item {
    background: var(--lg-sheen), var(--lg-fill);
    -webkit-backdrop-filter: blur(16px) saturate(200%); backdrop-filter: blur(16px) saturate(200%);
    box-shadow: inset 0 1px 0 var(--lg-rim), inset 0 0 0 1px var(--lg-edge), 0 2px 10px rgb(30 60 110 / 0.07);
  }
  .comment { box-shadow: inset 0 1px 0 var(--lg-rim), inset 0 0 0 1px var(--lg-edge), 0 4px 16px rgb(30 60 110 / 0.05); }

  /* Bars and menus: frosted glass that blurs whatever scrolls under it */
  .topbar, .sidebar, .bulkbar, .notif-popover {
    background: var(--lg-sheen), var(--lg-bar);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    backdrop-filter: blur(24px) saturate(200%);
  }
  .topbar { border-block-end: 1px solid var(--lg-line); box-shadow: inset 0 -1px 0 var(--lg-edge), 0 4px 20px rgb(30 60 110 / 0.05); }
  .sidebar { border-inline-end: 1px solid var(--lg-line); box-shadow: inset -1px 0 0 var(--lg-edge); }
  .bulkbar, .notif-popover { box-shadow: inset 0 1px 0 var(--lg-rim), inset 0 0 0 1px var(--lg-edge), 0 14px 40px rgb(0 0 0 / 0.16); }
  @media (max-width: 820px) { .sidebar { border-block-end: 1px solid var(--lg-line); } }

  /* The picked sidebar item and segmented tab: a raised glass lens */
  .sidebar a.active, .tabs a.active, .segmented label.active, .segmented label:has(input:checked) {
    background: var(--lg-lens);
    box-shadow: inset 0 1px 0 var(--lg-rim), 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(30 60 110 / 0.1);
  }
  .sidebar a:hover:not(.active) { background: color-mix(in oklab, var(--lg-lens) 55%, transparent); }
  .segmented, .tabs { background: var(--lg-fill); box-shadow: inset 0 0 0 1px var(--lg-edge), inset 0 1px 3px rgb(0 0 0 / 0.06); }

  /* Buttons: glossy glass */
  .button {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 55%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -1px 2px rgb(0 0 0 / 0.1),
                0 4px 14px color-mix(in oklab, var(--accent) 28%, transparent);
  }
  .button.success { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -1px 2px rgb(0 0 0 / 0.1), 0 4px 14px rgb(36 138 61 / 0.25); }
  .button.secondary {
    background: var(--lg-sheen), var(--lg-fill);
    box-shadow: inset 0 1px 0 var(--lg-rim), inset 0 0 0 1px var(--lg-edge), 0 2px 8px rgb(30 60 110 / 0.07);
  }
  .button.secondary:hover { background: var(--lg-sheen), var(--lg-lens); }
  .button.danger-text { background-image: none; box-shadow: none; }
  .topbar .button { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 2px 8px color-mix(in oklab, var(--accent) 25%, transparent); }
}

/* Small pop-ups (unlayered like the rules they restyle) */
.person-results, .react-picker {
  background: var(--lg-sheen), var(--lg-bar);
  -webkit-backdrop-filter: blur(24px) saturate(200%); backdrop-filter: blur(24px) saturate(200%);
  border-color: var(--lg-edge);
}

/* People who turn on Reduce transparency get solid panels. */
@media (prefers-reduced-transparency: reduce) {
  body { background: var(--bg); }
  .card, .table-wrap, .comment, .kb-list, .chat-list, .health-item, .button.secondary,
  .topbar, .sidebar, .bulkbar, .notif-popover, .person-results, .react-picker { background: var(--surface); }
}

/* Merging duplicates on IT's ticket page (app/merge.py). */
.merge-box .device-lookup { margin-block-start: 6px; }
.merged-notice a { font-weight: 600; }

/* Dashboard count cards (All open, Assigned to me, ...): one even row on a computer, two by two on an iPad
   or a narrow window, so none sits alone on a row. */
.dash:not(.dash-small) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
@media (max-width: 1180px) { .dash:not(.dash-small) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Back buttons ("Back to tickets", "My tickets", ...): a real button with a chevron, like Apple's Back. */
.back-row { margin: 0 0 14px; }
.button.back-button { min-block-size: 34px; padding: 6px 16px 6px 12px; gap: 8px; font-weight: 600; }
.button.back-button::before {
  content: ""; inline-size: 8px; block-size: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M7 1 1 7l6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M7 1 1 7l6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .button.back-button::before { transition: translate 0.15s; }
  .button.back-button:hover::before { translate: -2px 0; }
}

/* Floating dock in the school colors: New ticket is navy glass with a gold rim, the page you're on is a
   gold glass lens, and the other icons are navy (white in dark mode, so gold only marks where you are).
   Emergency stays red so it reads as urgent. */
.dock {
  --navy: #0b2263; --navy-2: #1d3f9a;
  --gold: #d4a017; --gold-soft: rgb(212 160 23 / 0.28); --gold-rim: rgb(240 201 74 / 0.85);
  --dock-icon: var(--navy);
}
.dock-btn:not(.primary, .danger) svg { color: var(--dock-icon); }
.dock-btn.active:not(.primary, .danger) svg { color: currentColor; }  /* the page you're on: gold in dark mode */
.dock-btn:hover:not(.primary, .danger) { background: rgb(212 160 23 / 0.12); }
.dock-btn.active:not(.primary, .danger) {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 60%), var(--gold-soft);
  color: var(--navy);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 1px rgb(212 160 23 / 0.45), 0 3px 12px rgb(212 160 23 / 0.25);
}
.dock-btn.primary {
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1.5px var(--gold-rim), 0 6px 18px rgb(11 34 99 / 0.35);
}
.dock-btn.primary svg { color: var(--gold-rim); }
.dock-btn.primary.active {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 0 0 2.5px var(--gold-rim), 0 6px 20px rgb(212 160 23 / 0.35);
}
:root[data-theme="dark"] .dock { --dock-icon: var(--text); }
:root[data-theme="dark"] .dock-btn:hover:not(.primary, .danger) { background: rgb(212 160 23 / 0.1); }
:root[data-theme="dark"] .dock-btn.active:not(.primary, .danger) {
  background: rgb(212 160 23 / 0.2); color: #f3d27a;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(212 160 23 / 0.45), 0 3px 12px rgb(0 0 0 / 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dock { --dock-icon: var(--text); }
  :root:not([data-theme="light"]) .dock-btn:hover:not(.primary, .danger) { background: rgb(212 160 23 / 0.1); }
  :root:not([data-theme="light"]) .dock-btn.active:not(.primary, .danger) {
    background: rgb(212 160 23 / 0.2); color: #f3d27a;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(212 160 23 / 0.45), 0 3px 12px rgb(0 0 0 / 0.35);
  }
}

/* The crest in school gold: a deeper gold on light backgrounds, a brighter gold in dark mode (where it
   sits on the navy glow). Swapped with content: url(); browsers without it keep the regular crest. */
.brand img { content: url("crest-gold-deep.svg"); }
:root[data-theme="dark"] .brand img { content: url("crest-gold.svg"); filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { content: url("crest-gold.svg"); filter: none; }
}
.intro { color: #b0820c; }
:root[data-theme="dark"] .intro { color: #e2b53e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .intro { color: #e2b53e; } }

/* Main buttons (Submit, Add, Reply, + New ticket...) in school navy with a faint gold rim, in light mode.
   Dark mode keeps the brighter blue, since navy disappears on black. Links stay blue everywhere. */
:root[data-theme="light"] .button:not(.secondary, .success, .danger-text, .danger-btn, .emergency-go, .emergency-take, .emergency-top) {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 55%), linear-gradient(180deg, #1d3f9a, #0b2263);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(212 160 23 / 0.55), 0 4px 14px rgb(11 34 99 / 0.28);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .button:not(.secondary, .success, .danger-text, .danger-btn, .emergency-go, .emergency-take, .emergency-top) {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 55%), linear-gradient(180deg, #1d3f9a, #0b2263);
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(212 160 23 / 0.55), 0 4px 14px rgb(11 34 99 / 0.28);
  }
}

/* The floating dock as a rail down the left side, with bigger buttons (iPads and computers). Phones keep
   it along the bottom, where a side rail would take too much of the narrow screen. */
@media (min-width: 601px) {
  .dock {
    inset-block: 50% auto; inset-inline-start: max(14px, env(safe-area-inset-left)); translate: 0 -50%;
    flex-direction: column; gap: 8px; padding: 10px; border-radius: 30px;
  }
  .dock-btn {
    inline-size: 108px; min-inline-size: 0; min-block-size: 88px; padding-inline: 6px; gap: 6px; border-radius: 22px; font-size: 0.92rem;
    & svg { inline-size: 34px; block-size: 34px; }
    & .chat-dot { inset-block-start: 10px; inset-inline-end: 24px; }
  }
  /* Room for the rail on the left; nothing along the bottom any more. */
  .floating-nav .layout { padding-inline-start: 158px; }  /* the rail is 14 + 130 wide */
  .floating-nav .layout > main { padding-block-end: 48px; }
  .floating-nav .chat-page .chat-log { block-size: max(240px, calc(100dvh - 380px)); }
  .floating-nav .emergency-live .chat-log { block-size: max(180px, calc(100dvh - 580px)); }
}
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  .dock { animation: rail-in 0.45s cubic-bezier(.2,.8,.3,1.1) backwards; }
  .dock-btn:hover { translate: 3px 0; }
}
@keyframes rail-in { from { opacity: 0; translate: -24px -50%; } to { opacity: 1; translate: 0 -50%; } }
/* Short windows (an iPad on its side with the keyboard up, a small laptop): slightly smaller buttons. */
@media (min-width: 601px) and (max-height: 640px) {
  .dock-btn { min-block-size: 70px; & svg { inline-size: 28px; block-size: 28px; } }
}

/* The crest and name sit straight on the page (no bubble), a little larger. The top row stays put and the
   page scrolls under it, softly blurred there (fading out downwards) so the name stays readable. */
.floating-nav::before {
  content: ""; position: fixed; inset: 0 0 auto; block-size: 80px; z-index: 29; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
.float-top .brand {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; padding: 4px 6px;
  font-size: 1.15rem; font-weight: 700;
  & img { block-size: 40px; }
}

/* "Turn on notifications" prompt (templates/_push_prompt.html, static/pushprompt.js). */
.push-prompt {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px;
  border-radius: var(--radius-lg); background: var(--lg-sheen, none), var(--lg-card, var(--surface));
  box-shadow: inset 0 1px 0 var(--lg-rim, transparent), inset 0 0 0 1px var(--lg-edge, var(--separator)), inset 4px 0 0 #d4a017, var(--shadow-md);
  & p { flex: 1 1 260px; margin: 0; font-size: 0.93rem; }
  & .push-prompt-actions { display: flex; align-items: center; gap: 14px; }
  & .push-prompt-icon { inline-size: 26px; block-size: 26px; flex: none; color: #b0820c; }
  &.done { box-shadow: inset 0 0 0 1px var(--lg-edge, var(--separator)), inset 4px 0 0 var(--green), var(--shadow-md); }
  &.done .push-prompt-icon { color: var(--green); }
  &[hidden] { display: none; }
}
.push-prompt-inline { margin-block-start: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .push-prompt:not([hidden]) { animation: rise 0.4s ease-out both; }
  .push-prompt.leaving { opacity: 0; translate: 0 -6px; transition: opacity 0.3s, translate 0.3s; }
}
.notify-on { color: var(--green); font-weight: 600; white-space: nowrap; }
.audience-picks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.audience-badge { display: inline-block; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: color-mix(in oklab, #d4a017 18%, transparent); color: #8a6508; white-space: nowrap; }
:root[data-theme="dark"] .audience-badge { color: #f0c94a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .audience-badge { color: #f0c94a; } }
.start-chat { margin-block-end: 18px; & summary { cursor: pointer; } & form { margin-block-start: 12px; } }

/* School admins: the teacher layout plus Admin tools (templates/admin_tools.html). Admin pages get more room. */
.floating-nav.wide-page .layout > main { max-inline-size: 1180px; }
.dock-btn.admin { border-block-start: 1px solid var(--lg-line, var(--separator)); border-radius: 0 0 22px 22px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 18px 0; }
.admin-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; color: var(--text); text-decoration: none;
  & .big { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
  & .big small { font-size: 1.1rem; color: var(--muted); font-weight: 600; }
  & > span:last-child { color: var(--muted); font-size: 0.88rem; font-weight: 600; }
  &.warn .big { color: var(--red); } }
a.admin-stat:hover, a.admin-tile:hover { text-decoration: none; translate: 0 -2px; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.admin-tile { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; color: var(--text); text-decoration: none;
  & svg { inline-size: 30px; block-size: 30px; flex: none; color: #b0820c; }
  & > span { display: flex; flex-direction: column; gap: 4px; }
  & strong { font-size: 1.05rem; } }
.danger-text-inline { color: var(--red); }
@media (prefers-reduced-motion: no-preference) { .admin-stat, .admin-tile { transition: translate 0.15s; } }

/* IT's top bar and sidebar, floating: detached from the window edges, rounded glass with a soft shadow,
   the page's navy and gold glow showing around them. Same layout and links as before. */
body.agent:not(.floating-nav) {
  --float-gap: 12px;
  --bar-h: 56px;
  & .topbar {
    inset-block-start: var(--float-gap); margin: var(--float-gap) var(--float-gap) 0; min-block-size: var(--bar-h);
    border-radius: 22px; border: 1px solid var(--lg-edge); overflow: hidden;
    box-shadow: inset 0 1px 0 var(--lg-rim), 0 10px 30px rgb(11 34 99 / 0.12), 0 2px 6px rgb(0 0 0 / 0.05);
  }
  & .topbar::after { inset-inline: 0; inset-block-end: 0; }
  & .sidebar {
    inset-block-start: calc(var(--bar-h) + var(--float-gap) * 2);
    block-size: calc(100dvh - var(--bar-h) - var(--float-gap) * 3);
    margin: var(--float-gap) 0 var(--float-gap) var(--float-gap);
    border-radius: 22px; border: 1px solid var(--lg-edge); border-inline-end: 1px solid var(--lg-edge);
    box-shadow: inset 0 1px 0 var(--lg-rim), 0 10px 30px rgb(11 34 99 / 0.12), 0 2px 6px rgb(0 0 0 / 0.05);
  }
  & .sidebar a.active::before { display: none; }  /* the raised lens is enough inside a floating panel */
  & .bulkbar { inset-block-start: calc(var(--bar-h) + var(--float-gap) * 2); }
  & aside.card.ticket-side { inset-block-start: calc(var(--bar-h) + var(--float-gap) * 2 + 8px); }
  & .notif-popover { inset-block-start: calc(var(--bar-h) + var(--float-gap) * 1.6); inset-inline-end: calc(var(--float-gap) + 8px); }
}
:root[data-theme="dark"] body.agent:not(.floating-nav) :is(.topbar, .sidebar) { box-shadow: inset 0 1px 0 var(--lg-rim), 0 12px 34px rgb(0 0 0 / 0.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.agent:not(.floating-nav) :is(.topbar, .sidebar) { box-shadow: inset 0 1px 0 var(--lg-rim), 0 12px 34px rgb(0 0 0 / 0.5); }
}
@media (max-width: 820px) {
  body.agent:not(.floating-nav) .sidebar {
    inset-block-start: calc(var(--bar-h) + var(--float-gap) * 2); block-size: auto;
    margin: var(--float-gap) var(--float-gap) 0; inline-size: auto;
  }
}
@media (max-width: 600px) {
  body.agent:not(.floating-nav) { --float-gap: 8px; }
  body.agent:not(.floating-nav) .topbar { border-radius: 18px; }
}
/* Soft blur in the gap above IT's floating top bar, so scrolled content fades out instead of peeking through. */
body.agent:not(.floating-nav)::before {
  content: ""; position: fixed; inset: 0 0 auto; block-size: 44px; z-index: 9; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
/* Pinned: on a computer or iPad the floating top bar and sidebar never move; only the page scrolls. */
@media (min-width: 821px) {
  body.agent:not(.floating-nav) {
    --side-w: 220px;
    & .topbar { position: fixed; inset: var(--float-gap) var(--float-gap) auto; margin: 0; }
    & .sidebar {
      position: fixed; z-index: 8; inset: calc(var(--bar-h) + var(--float-gap) * 2) auto var(--float-gap) var(--float-gap);
      inline-size: var(--side-w); block-size: auto; margin: 0; flex: none;
    }
    & .layout { padding-block-start: calc(var(--bar-h) + var(--float-gap)); padding-inline-start: calc(var(--side-w) + var(--float-gap)); }
  }
  .side-collapsed body.agent:not(.floating-nav) { --side-w: 64px; }
}

/* IT's sidebar Emergencies: red and pulsing while an emergency is open (like the old top bar button). */
.sidebar a.emergency-side:not(.is-quiet) {
  background: var(--red); color: #fff; font-weight: 600;
  & .side-icon { color: #fff; }
  & .side-count { background: #fff; color: var(--red); }
}
.sidebar a.emergency-side:not(.is-quiet):hover { background: color-mix(in oklab, var(--red) 88%, #000); }
@media (prefers-reduced-motion: no-preference) {
  .sidebar a.emergency-side:not(.is-quiet) { animation: pulse-red 1.8s ease-out infinite; }
}
/* The floating top bar has a set height, so the pinned sidebar always starts a clear gap below it. */
body.agent:not(.floating-nav) { --bar-h: 60px; --float-gap: 14px; }
body.agent:not(.floating-nav) .topbar { block-size: var(--bar-h); box-sizing: border-box; padding-block: 0; flex-wrap: nowrap; }
@media (max-width: 600px) { body.agent:not(.floating-nav) { --float-gap: 8px; } }

/* Ticket lists: a Due column, and the list uses the full width on big screens. */
body.agent .layout > main:has(.ticket-list), .floating-nav.wide-page .layout > main:has(.ticket-list) { max-inline-size: none; }
.ticket-list .due-cell { white-space: nowrap; }
.ticket-list .due-cell .small { color: var(--muted); }
.ticket-list .due-cell.late { color: var(--red); font-weight: 600; }
@media (max-width: 1024px) {
  .ticket-list td:nth-child(7) { grid-column: 2 / 4; font-size: 0.85rem; }
  .ticket-list .due-cell { white-space: normal; }
  .ticket-list .due-cell .small { display: inline; margin-inline-start: 4px; }
}
/* With no emergencies open, Emergencies stays visible: a red outline and red text instead of the solid red. */
.sidebar a.emergency-side.is-quiet {
  color: var(--red); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--red) 55%, transparent);
  & .side-icon { color: var(--red); }
}
.sidebar a.emergency-side.is-quiet:hover { background: color-mix(in oklab, var(--red) 10%, transparent); }
.sidebar a.emergency-side.is-quiet.active { background: color-mix(in oklab, var(--red) 12%, transparent); }