/*
 * dokoticket — one stylesheet for the one screen.
 *
 * 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; }

/* ---- 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; }
}

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