/* Customer service's own part of its dashboard. The rest is the design kit
   (/ds.css, chassis 1.118.0; 3Sry's D-228): its tokens, the shell, the
   templates and their states. What is here is Customer service's own: its colour as
   the kit's primary (Q-1118-1), and the few parts the kit doesn't draw (a
   case's cards, its chips and a ticket's safe HTML). Colours come only
   through the kit's tokens, and every property is logical, so the page
   mirrors right to left (the screen contract's check 8). No web fonts: the
   page loads from this machine only. */

/* Customer service's catalogue colour, #0f766e, as the one primary (Q-1118-1). White
   on it reads 5.47:1, and as a link it reads 4.92:1 or more on every light
   surface. In dark mode the primary stays #0f766e (white on it is still
   5.47:1); its words on the dark surfaces would not pass, so the link and
   the rail's current place take the closest shade that does, #559e98
   (4.66:1 or more). */
:root {
  --primary: #0f766e;
  --primary-hover: #0d6861;
  --primary-tint: #f1f7f6;
  --primary-line: #bcd9d6;
  --link: #0f766e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #0f766e;
    --primary-hover: #0d6861;
    --primary-tint: #0c2d36;
    --primary-line: #0d484b;
    --link: #559e98;
  }
}
:root[data-theme="light"] {
  --primary: #0f766e;
  --primary-hover: #0d6861;
  --primary-tint: #f1f7f6;
  --primary-line: #bcd9d6;
  --link: #0f766e;
}
:root[data-theme="dark"] {
  --primary: #0f766e;
  --primary-hover: #0d6861;
  --primary-tint: #0c2d36;
  --primary-line: #0d484b;
  --link: #559e98;
}

h2 { font-size: var(--text-lg); margin-block: 24px 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row select, .row input:not([type="checkbox"]) { inline-size: auto; flex: 1 1 180px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-block: 0 16px; }
.figure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; }
.figure b { display: block; font-size: var(--text-2xl); }
.figure span { color: var(--ink-2); font-size: var(--text-sm); }
.views { margin-block: 0 12px; }
.chip { display: inline-block; padding-block: 2px; padding-inline: 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); font-size: var(--text-xs); font-weight: 600; margin-block: 0 2px; margin-inline: 0 4px; }
.risk { color: var(--risk); }
.warn { color: var(--attention); }
.good { color: var(--good); }
.muted { color: var(--ink-2); }
.chip.risk { background: var(--risk-tint); }
.chip.warn { background: var(--attention-tint); }
.chip.good { background: var(--good-tint); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-block: 0 12px; }
.card h3 { margin-block: 0 6px; font-size: var(--text-base); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-md); margin-block: 8px; }
.meta { color: var(--ink-2); font-size: var(--text-sm); }
.note { background: var(--surface-2); border-radius: var(--radius-md); padding-block: 10px; padding-inline: 12px; font-size: var(--text-sm); }
label { display: block; font-weight: 600; font-size: var(--text-sm); margin-block: 10px 4px; }
label.row, .t1-group-toggle { font-weight: 500; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { inline-size: 100%; }
textarea { min-block-size: 140px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.send { border: 2px solid var(--primary); }
.error, .saved { position: fixed; inset-inline: 16px; bottom: 76px; z-index: 60; max-inline-size: 760px; margin-inline: auto; padding-block: 12px; padding-inline: 14px; border-radius: var(--radius-md); font-weight: 600; }
.error { background: var(--risk-tint); color: var(--ink); border: 1px solid var(--risk); }
.saved { background: var(--good-tint); color: var(--ink); border: 1px solid var(--good); }
.ds-table-wrap { margin-block: 0 12px; }
@media (min-width: 769px) { .error, .saved { bottom: 16px; } }

/* A ticket's HTML, as the safe tree: no styles of its own reach the page. */
.text.html { white-space: normal; overflow-x: auto; }
.text.html p, .text.html div, .text.html ul, .text.html ol, .text.html blockquote, .text.html pre { margin-block: 0 8px; margin-inline: 0; }
.text.html pre { white-space: pre-wrap; }
.text.html blockquote { border-inline-start: 3px solid var(--line); padding-inline-start: 10px; color: inherit; }
.text.html table { border-collapse: collapse; }
.text.html td, .text.html th { border: 1px solid var(--line); padding-block: 4px; padding-inline: 6px; vertical-align: top; }