/*
 * dokoticket — one stylesheet for both screens: the signed-in board and the
 * wall (display.html), which has its own section near the end.
 *
 * dokocal's look: Palette 02 Navy, the same two literal ramps (--l-* light,
 * --d-* dark) lifted from public/app.css, mapped one direction only onto the
 * names below, and Heebo self-hosted. Teal is the primary action. Alert is for
 * errors and nothing else, so an open ticket is never painted red for being
 * open: the board is a list of work, not a list of alarms.
 *
 * No inline styles anywhere. The Worker's CSP has no 'unsafe-inline'.
 */

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---- Palette 02 Navy, the two literal ramps (from public/app.css) ---- */
:root {
  --l-bg:#eff3f7;--l-surface:#fff;--l-surface2:#dfeaf4;--l-rule:#d0dce7;
  --l-ink:#0e2136;--l-muted:#5d7085;--l-alert:#b3382c;--l-open:#0b5567;
  --l-openbg:#d6edf2;--l-openborder:#a8d5df;--l-opentext:#fff;
  --d-bg:#0c1b2b;--d-surface:#14293d;--d-surface2:#1e3a54;--d-rule:#1e3346;
  --d-ink:#e9f1f8;--d-muted:#6b8299;--d-alert:#f0663f;--d-open:#6fd4e2;
  --d-openbg:#0f3e4a;--d-openborder:#2b6d7a;--d-opentext:#06222b;

  --sans: 'Heebo', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-app='light'] {
  --appbg:var(--l-bg);--appcard:var(--l-surface);--appcard2:var(--l-surface2);--apprule:var(--l-rule);
  --appink:var(--l-ink);--appmuted:var(--l-muted);--appalert:var(--l-alert);--appopen:var(--l-open);
  --openbg:var(--l-openbg);--openborder:var(--l-openborder);--opentext:var(--l-opentext);
  --appshadow:0 1px 2px rgba(0,0,0,.06);
  color-scheme: light;
}
html[data-app='dark'] {
  --appbg:var(--d-bg);--appcard:var(--d-surface);--appcard2:var(--d-surface2);--apprule:var(--d-rule);
  --appink:var(--d-ink);--appmuted:var(--d-muted);--appalert:var(--d-alert);--appopen:var(--d-open);
  --openbg:var(--d-openbg);--openborder:var(--d-openborder);--opentext:var(--d-opentext);
  --appshadow:none;
  color-scheme: dark;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans); font-weight: 400; letter-spacing: .01em;
  -webkit-text-size-adjust: 100%;
  background: var(--appbg); color: var(--appink);
}
:focus-visible { outline: 2px solid var(--appopen); outline-offset: 2px; }

/* ---- the mark, inline; see mark() in ticket.js ---- */
.mark { flex: none; width: 20px; height: 20px; color: var(--appink); }
.mark .mk-b { fill: currentColor; }
.mark .mk-c { fill: var(--appbg); }

/* ---- the shell and top bar, as dokocal's ---- */
.shell { max-width: 560px; margin: 0 auto; padding: 0 0 96px; }
.topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px 10px; }
.topbar .brand { font-weight: 500; font-size: 18px; color: var(--appink); }
.topbar .who { font-size: 12px; color: var(--appmuted); margin-inline-start: auto; }

/* dokocal's toolbar pills, reused as they are. No new pill shapes. */
.pill {
  appearance: none; font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
  border: 1px solid var(--apprule); border-radius: 20px; background: none;
  color: var(--appmuted); padding: 7px 13px; cursor: pointer;
}
.pill:hover { color: var(--appink); border-color: var(--appmuted); }
.pill.quiet { border-color: transparent; }
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }

/* ---- forms ---- */
.field { margin: 0 0 12px; }
.field label { display: block; font-size: 12px; color: var(--appmuted); margin: 0 0 5px; }
.field input {
  width: 100%; font-family: var(--sans); font-size: 16px; font-weight: 400;
  color: var(--appink); background: var(--appcard);
  border: 1px solid var(--apprule); border-radius: 8px; padding: 11px 12px;
}
.btn {
  width: 100%; appearance: none; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--appopen); color: var(--opentext);
  font-family: var(--sans); font-size: 15px; font-weight: 500; padding: 13px;
}
.btn:disabled { opacity: .55; cursor: default; }

.notice {
  border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--openborder); background: var(--openbg); color: var(--appink);
}
.notice.bad { border-color: var(--appalert); background: transparent; color: var(--appalert); }
.notice.boot { max-width: 420px; margin: 48px auto; }

/* ---- sign in ---- */
.auth { padding: 48px 22px 40px; max-width: 420px; margin: 0 auto; }
.authbrand { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.authbrand .mark { width: 30px; height: 30px; }
.auth h1 { font-weight: 700; font-size: 30px; margin: 0; color: var(--appink); }
.auth .toolbar { padding: 0 0 22px; }
.auth h2 { font-weight: 500; font-size: 17px; margin: 0 0 16px; color: var(--appink); }
.auth .btn { margin-top: 6px; }
.auth .alt { font-size: 13px; color: var(--appmuted); margin: 18px 0 0; }
.auth .alt a { color: var(--appopen); }
.auth .foot { font-size: 12px; color: var(--appmuted); line-height: 1.6; margin: 22px 0 0; }

/* Read by a screen reader, not shown. dokocal's rule. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- the wall card, admins only; dokocal's admin card ---- */
.pill[aria-pressed='true'] {
  background: var(--appopen); border-color: var(--appopen); color: var(--opentext);
}
.pill[aria-expanded='true'] { color: var(--appink); border-color: var(--appink); }
.pill.off { opacity: .55; pointer-events: none; }
a.pill { text-decoration: none; display: inline-block; }
.wallcard {
  margin: 0 12px 18px; padding: 14px;
  background: var(--appcard); border: 1px solid var(--apprule); border-radius: 12px;
  box-shadow: var(--appshadow);
}
.wallcard h2 { font-weight: 500; font-size: 16px; margin: 0 0 6px; color: var(--appink); }
.wallcard h3 { font-weight: 500; font-size: 13px; margin: 16px 0 0; color: var(--appink); }
.wallcard .hint { display: block; font-size: 12.5px; color: var(--appmuted); margin: 0 0 10px; line-height: 1.5; }
.wallcard .notice { margin: 0 0 10px; }
.wallpath {
  display: block; width: 100%; font-family: var(--sans); font-size: 13px;
  color: var(--appink); background: var(--appbg); border: 1px solid var(--apprule);
  border-radius: 8px; padding: 10px 12px;
}
.rowbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.warn { font-size: 12px; color: var(--appmuted); margin: 8px 0 0; line-height: 1.5; }

/* ---- the post box ---- */
.post {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin: 0 12px 18px; padding: 14px 14px 4px;
  background: var(--appcard); border: 1px solid var(--apprule); border-radius: 12px;
  box-shadow: var(--appshadow);
}
.post .fnum input {
  font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  padding: 8px 12px;
}
.post .btn { margin: 0 0 12px; }
.posterr .notice { margin: 0 0 12px; }

/* ---- the list ---- */
.listhead { display: flex; align-items: baseline; gap: 10px; padding: 0 14px 8px; }
.listhead h2 { font-weight: 500; font-size: 14px; color: var(--appink); margin: 0; }
.listhead .count { font-size: 13px; color: var(--appmuted); font-variant-numeric: tabular-nums; }
.status { margin: 0 14px 8px; font-size: 12.5px; color: var(--appalert); }
.status:empty { display: none; }
.empty { margin: 8px 14px; font-size: 14px; color: var(--appmuted); }

.tickets { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 12px; }
.ticket {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--appcard); border: 1px solid var(--apprule); border-radius: 12px;
  padding: 10px 14px 10px; box-shadow: var(--appshadow);
}
/* The number is the point. Tabular figures, so a column of them lines up.
   The block takes the card's direction, so it starts where the note and the
   meta start (the right, in Hebrew); the span inside it is dir="ltr", so the
   sign and the digits keep their order. */
.tnum {
  font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--appink); text-align: start;
  overflow-wrap: anywhere;
}
.tnum .hash { color: var(--appmuted); font-weight: 400; margin-inline-end: 2px; }
.tnote { margin: 0; font-size: 15px; line-height: 1.45; color: var(--appink); overflow-wrap: anywhere; }
.tfoot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.tmeta { font-size: 12.5px; color: var(--appmuted); min-width: 0; }
/* Your own posts: your name reads "You", in the action colour. Nothing louder. */
.ticket.mine .who { color: var(--appopen); font-weight: 500; }
.done {
  margin-inline-start: auto; flex: none; appearance: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--appink);
  background: none; border: 1px solid var(--apprule); border-radius: 8px; padding: 8px 14px;
}
.done:hover { border-color: var(--appopen); color: var(--appopen); }

/* ---- undo, pinned to the bottom while a clear is pending ----
   Sticky, not fixed. It sits in the flow after the list and takes up its own
   height there, so scrolled to the end, the last card's button is above the
   toasts rather than under them, however many toasts there are. Scrolled
   anywhere else it holds to the bottom of the screen, as a fixed bar would. */
.toasts {
  position: sticky; bottom: 12px; z-index: 10; margin: 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.toasts:not(:empty) { padding-top: 12px; }
.toast {
  pointer-events: auto; width: 100%; max-width: 480px;
  display: flex; align-items: center; gap: 12px;
  background: var(--appink); color: var(--appbg); border-radius: 10px; padding: 8px 8px 8px 14px;
  font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
[dir='rtl'] .toast { padding: 8px 14px 8px 8px; }
.undo {
  margin-inline-start: auto; appearance: none; cursor: pointer; border: 0; background: none;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--appbg);
  text-decoration: underline; padding: 8px 10px;
}

/* ---- wider screens: the post box on one row ---- */
@media (min-width: 600px) {
  .post { grid-template-columns: 14rem 1fr auto; column-gap: 10px; align-items: end; }
  .post .btn { width: auto; padding: 12px 22px; }
  .post .posterr { grid-column: 1 / -1; }
}

/* ---- a desk monitor or a TV: a grid of cards, bigger numbers ---- */
@media (min-width: 900px) {
  .shell { max-width: 1280px; padding-inline: 12px; }
  .tickets { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .ticket { padding: 14px 16px 12px; }
  .tnum { font-size: clamp(40px, 3.4vw, 64px); }
  .tnote { font-size: 16px; }
}

@media (max-width: 420px) {
  .auth { padding: 40px 16px 32px; }
  .topbar, .toolbar, .listhead { padding-inline: 10px; }
  .post { margin-inline: 10px; }
  .tickets { padding: 0 10px; }
}

/* ---------------------------------------------------------------------------
 * The wall: display.html, the open tickets on a screen nobody touches.
 *
 * dokocal's wall rules (public/app.css). Every length is a multiple of --u, a
 * share of the screen rather than a pixel count, so one stylesheet reads the
 * same on a 1080p monitor and a 4K one. The .fit-N classes are a density
 * ladder 3% apart; ticket.js binary-searches it for the largest rung the
 * screen still holds, so a quiet board prints large and a busy one small.
 * Nothing clips: past the last rung the page scrolls.
 * ------------------------------------------------------------------------- */
.wall {
  --u: min(1cqi, 1.7778dvh);
  container-type: inline-size;
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: calc(2.2 * var(--u)) calc(2.4 * var(--u));
}
.wall.fit-1 { --u: min(0.9700cqi, 1.7245dvh); }
.wall.fit-2 { --u: min(0.9409cqi, 1.6727dvh); }
.wall.fit-3 { --u: min(0.9127cqi, 1.6226dvh); }
.wall.fit-4 { --u: min(0.8853cqi, 1.5739dvh); }
.wall.fit-5 { --u: min(0.8587cqi, 1.5267dvh); }
.wall.fit-6 { --u: min(0.8330cqi, 1.4809dvh); }
.wall.fit-7 { --u: min(0.8080cqi, 1.4364dvh); }
.wall.fit-8 { --u: min(0.7837cqi, 1.3933dvh); }
.wall.fit-9 { --u: min(0.7602cqi, 1.3515dvh); }
.wall.fit-10 { --u: min(0.7374cqi, 1.3110dvh); }
.wall.fit-11 { --u: min(0.7153cqi, 1.2717dvh); }
.wall.fit-12 { --u: min(0.6938cqi, 1.2335dvh); }
.wall.fit-13 { --u: min(0.6730cqi, 1.1965dvh); }
.wall.fit-14 { --u: min(0.6528cqi, 1.1606dvh); }
.wall.fit-15 { --u: min(0.6333cqi, 1.1258dvh); }
.wall.fit-16 { --u: min(0.6143cqi, 1.0920dvh); }
.wall.fit-17 { --u: min(0.5958cqi, 1.0593dvh); }
.wall.fit-18 { --u: min(0.5780cqi, 1.0275dvh); }
.wall.fit-19 { --u: min(0.5606cqi, 0.9967dvh); }
.wall.fit-20 { --u: min(0.5438cqi, 0.9668dvh); }
.wall.fit-21 { --u: min(0.5275cqi, 0.9378dvh); }
.wall.fit-22 { --u: min(0.5117cqi, 0.9096dvh); }
.wall.fit-23 { --u: min(0.4963cqi, 0.8823dvh); }
.wall.fit-24 { --u: min(0.4814cqi, 0.8559dvh); }
.wall.fit-25 { --u: min(0.4670cqi, 0.8302dvh); }
.wall.fit-26 { --u: min(0.4530cqi, 0.8053dvh); }
.wall.fit-27 { --u: min(0.4394cqi, 0.7811dvh); }
.wall.fit-28 { --u: min(0.4262cqi, 0.7577dvh); }
.wall.fit-29 { --u: min(0.4134cqi, 0.7350dvh); }
.wall.fit-30 { --u: min(0.4010cqi, 0.7129dvh); }
.wall.fit-31 { --u: min(0.3890cqi, 0.6915dvh); }
.wall.fit-32 { --u: min(0.3773cqi, 0.6708dvh); }
.wall.fit-33 { --u: min(0.3660cqi, 0.6507dvh); }
.wall.fit-34 { --u: min(0.3550cqi, 0.6311dvh); }
.wall.fit-35 { --u: min(0.3444cqi, 0.6122dvh); }
.wall.fit-36 { --u: min(0.3340cqi, 0.5938dvh); }
.wall.fit-37 { --u: min(0.3240cqi, 0.5760dvh); }
.wall.fit-38 { --u: min(0.3143cqi, 0.5587dvh); }
.wall.fit-39 { --u: min(0.3049cqi, 0.5420dvh); }
.wall.fit-40 { --u: min(0.2957cqi, 0.5257dvh); }
.wbar {
  display: flex; align-items: baseline; gap: calc(1.8 * var(--u));
  padding-bottom: calc(1.4 * var(--u)); border-bottom: 1px solid var(--apprule);
  margin-bottom: calc(1.8 * var(--u));
}
.wbar .mark { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); align-self: center; }
.wb { font-weight: 500; font-size: calc(2.6 * var(--u)); }
.wd { font-size: calc(1.6 * var(--u)); color: var(--appmuted); }
/* The whole screen when there is no list to show: a refused token, or a first
   load that failed. Where the brand would be, in the error colour. */
.wd.bad { color: var(--appalert); }
.wcount { color: var(--appink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wclock {
  margin-inline-start: auto; display: flex; align-items: center; gap: calc(1 * var(--u));
  font-size: calc(1.5 * var(--u)); color: var(--appmuted); font-variant-numeric: tabular-nums;
}
.pulse {
  width: calc(.7 * var(--u)); height: calc(.7 * var(--u)); border-radius: 50%;
  background: var(--appopen); animation: beat 3.4s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

.wtickets {
  display: grid; gap: calc(1.2 * var(--u));
  grid-template-columns: repeat(auto-fill, minmax(calc(26 * var(--u)), 1fr));
}
.wticket {
  display: flex; flex-direction: column; gap: calc(.6 * var(--u));
  background: var(--appcard); border: 1px solid var(--apprule); border-radius: calc(.9 * var(--u));
  padding: calc(1.4 * var(--u)) calc(1.7 * var(--u)) calc(1.3 * var(--u)); box-shadow: var(--appshadow);
}
.wall .tnum { font-size: calc(5 * var(--u)); }
.wall .tnote { font-size: calc(1.8 * var(--u)); }
.wall .tmeta { font-size: calc(1.4 * var(--u)); margin-top: auto; }
.wempty {
  margin: auto; padding: calc(4 * var(--u)) 0; text-align: center;
  font-size: calc(3 * var(--u)); color: var(--appmuted);
}
.wfoot {
  display: flex; align-items: center; gap: calc(1.6 * var(--u)); margin-top: auto;
  padding-top: calc(1.4 * var(--u)); border-top: 1px solid var(--apprule);
  font-size: calc(1.3 * var(--u)); color: var(--appmuted);
}
/* The footer's margin-top: auto pins it to the bottom; this keeps a gap
   between it and a list that fills the screen. */
.wtickets, .wempty { margin-bottom: calc(1.8 * var(--u)); }
.wfail { font-size: calc(1.5 * var(--u)); color: var(--appalert); margin-inline-start: auto; }

/* A phone opened on the wall URL: one column at a fixed size, and it scrolls.
   ticket.js does not fit below this width. */
@media (max-width: 700px) {
  .wall { --u: 6px; }
  .wtickets { grid-template-columns: 1fr; }
  .wbar { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}