/* The Service desk pages of /next/ (pages/desk.js and pages/desk/*.js): tickets, tasks, requests, workflows, documentation, assets, reports.
   Only the layout these pages need on top of the component library in next.css; every colour, size and radius is a token from next.css.
   No inline styles anywhere (the /next/ CSP is style-src 'self'). Class names start with dk-. */

/* ---------- page parts ---------- */
.dk-page { min-width: 0; }
.dk-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); align-items: start; }
.dk-stack { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.dk-right { justify-content: flex-end; }
.dk-inline { display: inline-flex; vertical-align: middle; }
.dk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--s-5); align-items: start; }
.dk-main, .dk-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.dk-wide { display: block; }
.dk-narrow { display: none; }
.dk-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-14); color: var(--ink-2); }
.dk-cust { font-size: var(--t-14); overflow-wrap: anywhere; }
.dk-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-14); }
.dk-links li { overflow-wrap: anywhere; }
.dk-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-13); }
.dk-hist time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.dk-hist li { overflow-wrap: anywhere; }
.dk-ev--crit { color: var(--red); } .dk-ev--warn { color: var(--amber); }

/* facts in a side card or a request: a narrower label column, tighter rows */
.dk-side .facts { grid-template-columns: minmax(84px, 120px) minmax(0, 1fr); }
.dk-req .facts { grid-template-columns: minmax(100px, 180px) minmax(0, 1fr); }
.dk-req .facts dt, .dk-req .facts dd { padding: 6px 0; }
.dk-doc { padding: var(--s-6) var(--s-7); }

/* a two-line table cell: the main words and a quiet line under them */
.dk-cell2 { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.dk-cell2__main { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; white-space: normal; }
.dk-cell2__sub { font-size: var(--t-12); color: var(--muted); font-weight: 400; overflow-wrap: anywhere; white-space: normal; }
.tbl__table th.is-pinned .dk-cell2 { min-width: 200px; max-width: 360px; }

/* priority words, a person's initials (tags are the shared .tag) */
.dk-pri { font-size: var(--t-13); font-weight: 600; }
.dk-pri--urgent { color: var(--red); } .dk-pri--high { color: var(--amber); } .dk-pri--low { color: var(--muted); font-weight: 500; }
.dk-who { display: inline-flex; align-items: center; gap: var(--s-2); }
.dk-av { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--selected); color: var(--selected-ink); font-size: var(--t-12); font-weight: 600; }
.dk-av--sm { width: 24px; height: 24px; font-size: 11px; }
.dk-av--none { background: var(--sunk); color: var(--muted); }

/* ---------- one ticket ---------- */
.dk-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.dk-controls.is-busy { opacity: .7; }
.dk-thread { list-style: none; margin: 0; padding: 0; }
.dk-msg { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-soft); }
.dk-msg:first-child { border-top: 0; }
.dk-msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-2); margin-bottom: var(--s-2); font-size: var(--t-13); }
.dk-msg__who { font-weight: 600; font-size: var(--t-14); color: var(--ink); overflow-wrap: anywhere; }
.dk-msg__kind { color: var(--muted); }
.dk-msg__head time { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.dk-msg__body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-15); line-height: 1.55; color: var(--ink); }
.dk-msg--out { background: color-mix(in srgb, var(--info-bg) 55%, var(--surface)); }
.dk-msg--note { background: var(--amber-bg); }
.dk-msg--note .dk-msg__kind { color: var(--amber); font-weight: 600; }
.dk-msg--system { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-13); color: var(--muted); padding-top: 10px; padding-bottom: 10px; }
.dk-msg__sys { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dk-att { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dk-att__file { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-sm); padding: 0 var(--s-3); border: 1px solid var(--line-btn); border-radius: var(--r); font-size: var(--t-13); color: var(--ink); max-width: 100%; }
.dk-att__file span { overflow-wrap: anywhere; }
.dk-att__file.is-gone { color: var(--muted); border-style: dashed; }
.dk-composer--note { border-color: var(--amber-line); }
.dk-composer textarea.field__control { min-height: 140px; }
.dk-composer .seg__item .kbd { margin-left: 2px; }
.dk-fields3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dk-preview { padding: var(--s-3) var(--s-4); border: 1px solid var(--info-line); background: var(--info-bg); border-radius: var(--r-md); }
.dk-preview.is-bad { border-color: var(--amber-line); background: var(--amber-bg); }
.dk-preview__title { font-size: var(--t-13); font-weight: 600; margin-bottom: 4px; }
.dk-preview__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-14); }
.dk-preview mark { background: var(--amber-line); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.dk-devs { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.dk-dev { display: flex; align-items: center; gap: var(--s-2); border-top: 1px solid var(--line-soft); }
.dk-dev:first-child { border-top: 0; }
.dk-dev > .check, .dk-dev > .mono { flex: 1; min-width: 0; }
.dk-dev__open { display: inline-grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r); color: var(--muted); flex: none; }
.dk-dev__open:hover { background: var(--sunk); color: var(--ink); }
.dk-timer { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.dk-clock { font: 600 var(--t-20)/1 var(--mono); font-variant-numeric: tabular-nums; }
.dk-tes { list-style: none; margin: 0; padding: 0; }
.dk-te { padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-14); }
.dk-te:first-child { border-top: 0; }
.dk-te__top { display: flex; flex-wrap: wrap; gap: 4px var(--s-2); align-items: baseline; }
.dk-te__when { margin-left: auto; color: var(--muted); font-size: var(--t-13); }
.dk-te__sub { font-size: var(--t-13); color: var(--muted); }
.dk-te__note { overflow-wrap: anywhere; color: var(--ink-2); }
.dk-te .btn-row { margin-top: 6px; }
.dk-tadd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.dk-picks { display: flex; flex-direction: column; }
.dk-held { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.dk-held__item { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); }
.dk-held__from, .dk-held__subj, .dk-held__body { overflow-wrap: anywhere; }
.dk-held__subj { font-weight: 600; margin: 4px 0; }
.dk-held__body { color: var(--ink-2); font-size: var(--t-14); white-space: pre-wrap; }

/* ---------- tasks ---------- */
.dk-qa__body { padding-top: var(--s-5); }
.dk-qa__row { display: flex; gap: var(--s-3); align-items: flex-end; }
.dk-qa__row > .field { flex: 1; }
.dk-qa__prev { min-height: 24px; margin-top: var(--s-3); font-size: var(--t-14); display: flex; flex-wrap: wrap; gap: 4px var(--s-2); align-items: center; }
.dk-tasks { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; container-type: inline-size; }
.dk-task { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2) 0 var(--s-4); border-top: 1px solid var(--line-soft); min-height: 60px; }
.dk-task:first-child { border-top: 0; }
.dk-task:hover { background: var(--hover); }
.dk-task__done { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 8px; border: 2px solid var(--control); border-radius: 50%; background: var(--surface); color: transparent; }
.dk-task__done:hover { border-color: var(--green); color: var(--green); }
.dk-task__dot { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 8px; border: 2px solid var(--line-btn); border-radius: 50%; color: var(--on-accent); }
.dk-task__dot.is-on { background: var(--green); border-color: var(--green); }
.dk-task__undo { flex: none; }
.dk-task__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-4); min-height: 60px; padding: 8px var(--s-3) 8px 0; color: var(--ink); text-decoration: none; }
.dk-task__link:hover { color: var(--ink); }
.dk-task__link:focus-visible { outline-offset: -2px; }
.dk-task__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk-task__title { font-size: var(--t-15); font-weight: 500; overflow-wrap: anywhere; }
.dk-task__meta { font-size: var(--t-13); color: var(--muted); overflow-wrap: anywhere; }
.dk-task__side { flex: none; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-13); }
.dk-task__due { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-task__st { color: var(--accent); font-weight: 500; }
.dk-task.is-over .dk-task__due { color: var(--red); font-weight: 600; }
.dk-task.is-today .dk-task__due { color: var(--amber); font-weight: 600; }
.dk-task.is-done .dk-task__title { text-decoration: line-through; color: var(--muted); }
@container (max-width: 560px) {
  .dk-task__link { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dk-task__side { flex-wrap: wrap; }
  .dk-who__name { display: none; }
}
.dk-check { list-style: none; margin: 0; padding: 0; }
.dk-check__item { display: flex; align-items: center; gap: var(--s-2); border-top: 1px solid var(--line-soft); }
.dk-check__item:first-child { border-top: 0; }
.dk-check__item > .check { flex: 1; min-width: 0; }
.dk-check__item.is-done .check__text > span:first-child { text-decoration: line-through; color: var(--muted); }
.dk-check + .dk-qa__row { margin-top: var(--s-3); }

/* ---------- requests ---------- */
.dk-reqs { display: flex; flex-direction: column; gap: var(--s-4); }
.dk-req { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.dk-req__head { display: flex; flex-wrap: wrap; gap: 4px var(--s-3); align-items: center; }
.dk-req__head .status { margin-left: auto; }
.dk-req__sum { font-size: var(--t-15); overflow-wrap: anywhere; }
.dk-req__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; margin-top: var(--s-2); }
.dk-req__acts > .field { flex: 1 1 240px; }

/* ---------- workflows ---------- */
.dk-seats { margin: var(--s-3) 0 0; padding-left: 20px; font-size: var(--t-14); }
.dk-steps { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.dk-step { border-top: 1px solid var(--line-soft); }
.dk-step:first-child { border-top: 0; }
.dk-step.is-skipped { opacity: .7; }
.dk-step__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 20px; gap: var(--s-3); align-items: center; width: 100%; min-height: 60px; padding: 10px var(--s-5); border: 0; background: none; color: var(--ink); text-align: left; font: inherit; }
.dk-step__row:hover { background: var(--hover); }
.dk-step__row:focus-visible { outline-offset: -2px; border-radius: 0; }
.dk-step__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sunk); color: var(--ink-2); font-size: var(--t-13); font-weight: 600; flex: none; }
.dk-step__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-step__text strong { font-weight: 600; overflow-wrap: anywhere; }
.dk-step__sub { font-size: var(--t-13); color: var(--muted); overflow-wrap: anywhere; }
.dk-step__caret { color: var(--muted); transition: transform .12s var(--ease); }
.dk-step__row[aria-expanded="true"] .dk-step__caret { transform: rotate(180deg); }
.dk-step__det { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--s-5) var(--s-4) calc(var(--s-5) + 44px); font-size: var(--t-13); overflow-wrap: anywhere; }
.dk-would { font-size: var(--t-12); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 6px 8px; overflow-wrap: anywhere; }
.dk-byhand { padding: var(--s-3) var(--s-4); border-left: 3px solid var(--amber); background: var(--amber-bg); border-radius: var(--r-sm); font-size: var(--t-14); overflow-wrap: anywhere; }
@container (max-width: 560px) {
  .dk-step__row { grid-template-columns: 32px minmax(0, 1fr) 20px; padding: 10px var(--s-4); }
  .dk-step__needs { grid-column: 2; grid-row: 2; }
  .dk-step__det { padding-left: var(--s-4); }
}
.dk-wsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.dk-wstep { padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.dk-wstep.is-current { border-color: var(--accent-fill); box-shadow: 0 0 0 1px var(--accent-fill); }
.dk-wstep--skipped { opacity: .75; }
.dk-wstep__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.dk-wstep__head strong { overflow-wrap: anywhere; }
.dk-wstep__text { font-size: var(--t-14); color: var(--ink-2); overflow-wrap: anywhere; }
.dk-det .dk-step__det { padding: var(--s-2) 0 0; }
.dk-reveal { padding: var(--s-4); border: 1px dashed var(--accent); border-radius: var(--r-md); background: var(--info-bg); display: flex; flex-direction: column; gap: var(--s-2); }
.dk-reveal.is-shown { border-style: solid; border-color: var(--amber-line); background: var(--amber-bg); }
.dk-reveal.is-gone { border-color: var(--line); background: var(--surface-2); }
.dk-secret { margin: 0; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--t-17); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

/* ---------- documentation: a page drawn from Markdown (all escaped text) ---------- */
.dk-md { font-size: var(--t-15); line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.dk-md .dk-md__h { margin-top: var(--s-3); line-height: 1.3; }
.dk-md h2.dk-md__h { font-size: var(--t-20); } .dk-md h3.dk-md__h { font-size: var(--t-17); } .dk-md h4.dk-md__h, .dk-md h5.dk-md__h { font-size: var(--t-15); }
.dk-md ul, .dk-md ol { margin: 0; padding-left: 24px; }
.dk-md li + li { margin-top: 2px; }
.dk-md .dk-md__d1 { margin-left: 20px; } .dk-md .dk-md__d2 { margin-left: 40px; }
.dk-md .dk-md__task { list-style: none; margin-left: -24px; display: flex; gap: var(--s-2); align-items: flex-start; }
.dk-md__box { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 3px; border: 2px solid var(--control); border-radius: 5px; color: var(--on-accent); }
.dk-md__box.is-on { background: var(--accent-fill); border-color: var(--accent-fill); }
.dk-md code { font-size: .92em; padding: 1px 5px; border-radius: 4px; background: var(--sunk); }
.dk-md__code { margin: 0; padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r); overflow-x: auto; font-size: var(--t-13); }
.dk-md__code code { background: none; padding: 0; }
.dk-md blockquote { margin: 0; padding: var(--s-2) var(--s-4); border-left: 3px solid var(--line-btn); color: var(--ink-2); }
.dk-md hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-2) 0; width: 100%; }
.dk-md__tw { overflow-x: auto; max-width: 100%; border: 1px solid var(--line-soft); border-radius: var(--r); }
.dk-md__table { border-collapse: collapse; width: 100%; font-size: var(--t-14); }
.dk-md__table th, .dk-md__table td { padding: 8px var(--s-3); border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.dk-md__table thead th { border-top: 0; background: var(--surface-2); font-weight: 600; color: var(--ink-2); }
.dk-md__table .dk-md--center { text-align: center; } .dk-md__table .dk-md--right { text-align: right; }
.dk-md__img { max-width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line-soft); }

/* ---------- reports ---------- */
.dk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.dk-card { padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-14); color: var(--ink-2); min-width: 0; }
.dk-card__head { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: space-between; color: var(--ink); font-size: var(--t-15); }

/* ---------- narrow screens ---------- */
@media (max-width: 1099px) { .dk-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) {
  .dk-wide { display: none; }
  .dk-narrow { display: block; }
  .dk-filters { grid-template-columns: minmax(0, 1fr); }
  .dk-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-4); }
  .dk-page .btn .kbd, .dk-page .seg__item .kbd { display: none; } /* no keyboard on a phone */
  .dk-msg { padding: var(--s-3) var(--s-4); }
  .dk-msg__head time { margin-left: 0; flex-basis: 100%; }
  .dk-qa__row { flex-direction: column; align-items: stretch; }
  .dk-req { padding: var(--s-4); }
  .dk-doc { padding: var(--s-4); }
  .dk-wstep { padding: var(--s-4); }
}