/* ============================================================
   RCFE workshop app — shared design system
   Brand green #094E45. Link this on every page. Do not put
   page-specific colours or component styles inline; add them here
   so the whole app stays consistent.
   ============================================================ */

:root{
  /* brand + neutrals */
  --green:#094E45;          /* RCFE brand green */
  --green-700:#063a33;      /* darker, for hover/active */
  --green-50:#e8f0ee;       /* faint tint for backgrounds */
  --ink:#17211f;            /* near-black with a green cast */
  --muted:#5f6b67;          /* secondary text */
  --line:#e2e6e4;           /* borders / dividers */
  --bg:#f4f6f5;             /* page background */
  --card:#ffffff;

  /* status palette — matches the big board's rag colours */
  --ok:#0f7a52;   --ok-bg:#e6f2ec;
  --amber:#b45309; --amber-bg:#fbf1e4;
  --red:#b42318;   --red-bg:#fbeae8;
  --blue:#1d4e89;  --blue-bg:#e8eef6;
  --purple:#6b3fa0; --purple-bg:#efe9f6;

  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(9,78,69,.06), 0 4px 16px rgba(9,78,69,.05);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:16px/1.5 var(--font);
  color:var(--ink);
  background:var(--bg);
}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:22px;font-weight:700;letter-spacing:-.01em}
h2{font-size:18px;font-weight:600}
h3{font-size:16px;font-weight:600}
p{margin:0 0 .8em}
a{color:var(--green)}
.muted{color:var(--muted);font-size:14px}
.small{font-size:13px}
[hidden]{display:none!important}

/* ---------- layout ---------- */
.wrap{max-width:920px;margin:0 auto;padding:20px 18px 48px}
.wrap.narrow{max-width:640px}
.stack>*+*{margin-top:16px}

/* ---------- app header + navigation (injected by rcfe.js) ---------- */
.app-header{
  position:sticky;top:0;z-index:40;
  background:var(--green);color:#fff;
  border-bottom:3px solid var(--green-700);
}
.app-header__bar{
  display:flex;align-items:center;gap:12px;
  max-width:920px;margin:0 auto;padding:12px 16px;
}
.app-header__menu{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:0;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;flex:none;
}
.app-header__menu:hover{background:rgba(255,255,255,.2)}
.app-header__menu svg{width:20px;height:20px}
.app-header__brand{display:inline-flex;align-items:center}
.app-header__logo{height:26px;width:auto;display:block}
.app-header__title{font-weight:500;opacity:.85;font-size:15px;
  border-left:1px solid rgba(255,255,255,.3);padding-left:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-header__spacer{flex:1}
.app-header__who{font-size:13px;opacity:.9;white-space:nowrap}

.app-nav{
  position:fixed;left:0;right:0;top:var(--header-h,62px);z-index:39;
  background:var(--green-700);
  overflow:hidden;max-height:0;transition:max-height .22s ease;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.app-nav.open{max-height:calc(100vh - var(--header-h,62px));overflow-y:auto}
@media (prefers-reduced-motion:reduce){.app-nav{transition:none}}
.app-nav__inner{max-width:920px;margin:0 auto;padding:6px 10px 12px}
.app-nav a,.app-nav button.linklike{
  display:block;width:100%;text-align:left;
  color:#eaf3f0;text-decoration:none;font:inherit;
  padding:11px 12px;border:0;background:transparent;border-radius:var(--radius-sm);
  cursor:pointer;
}
.app-nav a:hover,.app-nav button.linklike:hover{background:rgba(255,255,255,.1)}
.app-nav a.current{background:rgba(255,255,255,.16);font-weight:600}
.app-nav__group{
  color:#9fc3bb;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  padding:12px 12px 4px;margin-top:4px;border-top:1px solid rgba(255,255,255,.12);
}

/* ---------- cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
}
.card+.card{margin-top:16px}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.card h2:first-child,.card h3:first-child{margin-top:0}

/* ---------- forms ---------- */
label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin:12px 0 5px}
input,select,textarea{
  width:100%;padding:11px 12px;font:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;border-color:var(--green);
}
textarea{min-height:88px;resize:vertical}
.field-row{display:flex;gap:12px}
.field-row>*{flex:1;min-width:0}
.check{display:flex;align-items:flex-start;gap:9px;margin-top:10px;font-size:14px;color:var(--ink)}
.check input{width:auto;margin-top:2px}
.hint{font-size:13px;color:var(--muted);margin-top:8px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--green);color:#fff;border:1px solid var(--green);
  border-radius:var(--radius-sm);padding:11px 18px;font:inherit;font-weight:600;
  cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--green-700);border-color:var(--green-700)}
.btn:disabled{opacity:.5;cursor:default}
.btn--ghost{background:#fff;color:var(--green)}
.btn--ghost:hover{background:var(--green-50)}
.btn--danger{background:#fff;color:var(--red);border-color:var(--red)}
.btn--danger:hover{background:var(--red-bg)}
.btn--sm{padding:7px 12px;font-size:14px}
.btn--block{width:100%}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:600;padding:10px 10px;border-bottom:1px solid var(--line);
}
td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
input.cell{width:78px;padding:7px 8px;text-align:right}

/* ---------- status pills ---------- */
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill--ok,.pill--approved{background:var(--ok-bg);color:var(--ok)}
.pill--pending{background:var(--amber-bg);color:var(--amber)}
.pill--declined,.pill--red{background:var(--red-bg);color:var(--red)}
.pill--cancelled{background:#eef0ef;color:var(--muted)}
.pill--info{background:var(--blue-bg);color:var(--blue)}
.pill--purple{background:var(--purple-bg);color:var(--purple)}

/* ---------- stage chips (job lifecycle) ---------- */
.stage{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.stage::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.stage--booked_in{color:var(--blue)}
.stage--in_progress{color:var(--green)}
.stage--ready{color:var(--amber)}
.stage--collected{color:var(--muted)}

/* ---------- balance / stat grid ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.stats .stat b{display:block;font-size:26px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.stats .stat span{font-size:12px;color:var(--muted)}
@media(max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tabs button{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;
}
.tabs button.on{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- home tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tile{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);min-height:96px;
}
.tile:hover{border-color:var(--green);box-shadow:0 2px 4px rgba(9,78,69,.1),0 8px 22px rgba(9,78,69,.08)}
.tile b{font-size:16px}
.tile span{font-size:13px;color:var(--muted)}
.tile .tile__count{margin-top:auto;font-size:13px;font-weight:600;color:var(--amber)}

/* ---------- login card ---------- */
.login{max-width:380px;margin:56px auto;text-align:center}
.login .card{padding:26px}
.login h1{margin-bottom:4px}

/* ---------- misc ---------- */
.notice{background:var(--green-50);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:14px}
.notice--warn{background:var(--amber-bg);border-color:transparent;color:var(--amber)}
.spinner{color:var(--muted);font-size:14px;padding:8px 0}

/* ---------- dashboard (home) ---------- */
.hero{margin-bottom:18px}
.hero h1{font-size:24px;margin:0}
.hero p{color:var(--muted);margin:4px 0 0}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
@media(max-width:560px){.metrics{grid-template-columns:1fr}}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.metric b{display:block;font-size:28px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;line-height:1.1}
.metric span{font-size:13px;color:var(--muted)}
.metric.attn b{color:var(--amber)}
.runbar{display:flex;align-items:center;gap:10px;background:var(--green);color:#fff;border-radius:var(--radius);padding:12px 16px;margin-bottom:18px;text-decoration:none}
.runbar .dot{width:9px;height:9px;border-radius:50%;background:#fff;flex:none;animation:pulse-w 1.6s infinite}
@keyframes pulse-w{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.runbar .go{margin-left:auto;font-size:13px;opacity:.9;white-space:nowrap}
.section-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:22px 0 10px;font-weight:600}
.tile__icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--green-50);color:var(--green);margin-bottom:2px}
.tile__icon svg{width:21px;height:21px}

/* ---------- developer "view as" ---------- */
.viewas-bar{background:var(--amber);color:#fff;font-size:13px;text-align:center;padding:7px 12px}
.viewas-bar button{color:#fff;text-decoration:underline;background:none;border:0;font:inherit;cursor:pointer;margin-left:10px}
.app-nav__viewas{display:block;color:#eaf3f0;font-size:13px;padding:8px 12px}
.app-nav__viewas select{margin-top:6px}

/* ---------- print (job cards etc.) ---------- */
@media print{
  .app-header,.app-nav,.no-print{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #999}
  .wrap{max-width:none;padding:0}
}


/* ============================================================
   SHARED COMPONENTS (added Oct 2026)
   Everything below is used by timesheet.html and holiday.html and
   is meant to be reused by every other page. Nothing above this
   line was changed. Four things below apply to every page that
   links this file: drop-downs get a drawn arrow, buttons and text
   boxes are at least 48px tall (table-cell inputs excepted),
   tick boxes are bigger, and text is smoothed.
   ============================================================ */

:root{
  --signal:#e4570f;         /* hi-vis orange: live timer dot, overtime. Marks only, never body text */
  --signal-ink:#b5420a;     /* the same orange, dark enough to read as text on white */
  --touch:48px;             /* smallest size for anything tapped with a gloved thumb */
  --ink-2:#34403d;          /* body text one step lighter than --ink */
  --shade:rgba(9,30,27,.55);/* backdrop behind sheets */
}

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{-webkit-tap-highlight-color:transparent}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.gap-top{margin-top:14px}

/* ---------- connection strip (rcfe.js shows it when the phone is offline) ---------- */
.app-header__offline{
  background:var(--ink);color:#fff;font-size:14px;text-align:center;padding:7px 14px;
}

/* ---------- page sections ---------- */
.section{margin-top:28px}
.section:first-of-type{margin-top:4px}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.section__head h2{margin:0;font-size:19px;letter-spacing:-.01em}
.section__aside{font-size:14px;color:var(--muted);white-space:nowrap}
.section__aside b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- buttons: extra sizes and states ---------- */
.btn{min-height:var(--touch)}
.btn--sm{min-height:0}
.btn--lg{min-height:58px;font-size:18px;border-radius:10px}
.btn--quiet{background:transparent;border-color:transparent;color:var(--green)}
.btn--quiet:hover{background:var(--green-50);border-color:transparent}
.btn--quiet.btn--danger{color:var(--red)}
.btn--quiet.btn--danger:hover{background:var(--red-bg)}
.btn[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none}
.btn[aria-busy="true"]::after{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;
  border:2.5px solid #fff;border-right-color:transparent;animation:rcfe-spin .7s linear infinite;
}
.btn--ghost[aria-busy="true"]::after,.btn--quiet[aria-busy="true"]::after,
.btn--danger[aria-busy="true"]::after,.btn--onpanel[aria-busy="true"]::after{border-color:var(--green);border-right-color:transparent}
@keyframes rcfe-spin{to{transform:rotate(360deg)}}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.actions--row{flex-direction:row}
.actions--row>*{flex:1}

/* ---------- form extras ---------- */
select{
  appearance:none;-webkit-appearance:none;min-height:var(--touch);padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b67' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
input:not([type=checkbox]):not([type=radio]):not(.cell){min-height:var(--touch)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red);background:#fffafa}
.field-error{color:var(--red);font-size:14px;margin:6px 0 0;font-weight:500}
.check{align-items:center;min-height:44px;margin-top:4px}
.check input{width:22px;height:22px;margin:0;accent-color:var(--green);flex:none}
.check label{margin:0;font-size:15px;color:var(--ink);font-weight:400}

/* hours + minutes pair */
.duration{display:flex;gap:12px}
.duration>div{flex:1;position:relative}
.duration input{padding-right:54px;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.duration span{position:absolute;right:13px;bottom:13px;font-size:14px;color:var(--muted);pointer-events:none}

/* pick-one control (radio buttons drawn as a row of options) */
.seg{display:flex;border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px;gap:3px;background:var(--bg)}
.seg label{flex:1;margin:0;position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:6px;
  font-size:15px;font-weight:500;color:var(--ink-2)}
.seg input:checked+span{background:var(--card);color:var(--green);font-weight:600;box-shadow:0 1px 2px rgba(9,78,69,.18)}
.seg input:focus-visible+span{outline:2px solid var(--green);outline-offset:1px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;font-size:13px;font-weight:500;color:var(--muted);margin:12px 0 5px}

/* ---------- quick-pick chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--touch);max-width:100%;
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);color:var(--ink);font:inherit;font-size:15px;cursor:pointer;text-align:left;
}
.chip b{color:var(--green);white-space:nowrap}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip:hover{border-color:var(--green);background:var(--green-50)}
.chip:disabled{opacity:.5;cursor:default}
.chip[aria-busy="true"]{opacity:.55;pointer-events:none}

/* ---------- running timer ---------- */
.timer{
  background:var(--green);color:#fff;border-radius:var(--radius);
  padding:18px 18px 16px;box-shadow:0 6px 22px rgba(9,78,69,.22);
}
.timer__state{display:flex;align-items:center;gap:9px;font-size:14px;color:#cfe3de}
.timer__dot{width:10px;height:10px;border-radius:50%;background:var(--signal);flex:none;animation:rcfe-live 1.8s ease-out infinite}
@keyframes rcfe-live{0%{box-shadow:0 0 0 0 rgba(228,87,15,.7)}80%,100%{box-shadow:0 0 0 9px rgba(228,87,15,0)}}
.timer__job{font-size:21px;font-weight:700;line-height:1.2;margin-top:12px;letter-spacing:-.01em}
.timer__task{font-size:15px;color:#cfe3de;margin-top:3px}
.timer__clock{
  font-variant-numeric:tabular-nums;font-weight:700;line-height:1;letter-spacing:-.03em;
  font-size:clamp(64px,21vw,96px);margin:14px 0 16px;white-space:nowrap;
}
.timer__clock small{font-size:.42em;font-weight:600;color:#a9cbc3;letter-spacing:-.01em;margin-left:.08em}
.timer__warn{background:rgba(0,0,0,.22);border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;margin:-4px 0 14px}
.timer__actions{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}
.timer__actions .btn{padding-left:10px;padding-right:10px;white-space:nowrap}
.btn--onpanel{background:#fff;color:var(--green);border-color:#fff}
.btn--onpanel:hover{background:var(--green-50);border-color:var(--green-50)}
.btn--onpanel-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--onpanel-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.timer .btn:focus-visible{outline-color:#fff}

/* ---------- week strip ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.week__day{
  display:flex;flex-direction:column;align-items:center;gap:1px;min-height:74px;
  padding:7px 0 0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  background:var(--card);color:var(--ink);font:inherit;cursor:pointer;
}
.week__day i{font-style:normal;font-size:12px;color:var(--muted)}
.week__day b{font-size:16px;font-weight:600;line-height:1.2}
.week__day em{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.week__day u{display:block;width:100%;height:5px;margin-top:auto;background:var(--line);text-decoration:none}
.week__day u s{display:block;height:100%;background:var(--green);text-decoration:none}
.week__day u s.over{background:var(--signal)}
.week__day.is-today b{color:var(--green);font-weight:700}
.week__day[aria-current="date"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--green-50)}
.week__day:disabled{opacity:.4;cursor:default;background:transparent}
.week__nav{display:flex;align-items:center;gap:6px}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--green);cursor:pointer;
}
.iconbtn:hover{background:var(--green-50)}
.iconbtn:disabled{opacity:.35;cursor:default}
.iconbtn svg{width:20px;height:20px}

/* ---------- progress against a target (day total, allowance) ---------- */
.meter{height:10px;border-radius:5px;background:var(--line);overflow:hidden;display:flex}
.meter>span{display:block;height:100%}
.meter__fill{background:var(--green)}
.meter__over{background:var(--signal)}
.meter__pending{background:repeating-linear-gradient(135deg,var(--amber) 0 4px,#e2a25e 4px 8px)}
.meter--tall{height:16px;border-radius:8px}
.meter-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);margin-top:7px}
.meter-line b{color:var(--ink);font-variant-numeric:tabular-nums}
.meter-line .over{color:var(--signal-ink);font-weight:600}

/* ---------- lists of records (sessions, requests) ---------- */
.rows{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.row{
  display:flex;align-items:flex-start;gap:12px;width:100%;padding:14px 16px;min-height:64px;
  border:0;border-top:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left;
}
.row:first-child{border-top:0}
button.row{cursor:pointer}
button.row:hover{background:#fafbfb}
.row__main{flex:1;min-width:0}
.row__title{font-weight:600;line-height:1.3}
.row__title span{font-weight:400}
.row__sub{font-size:14px;color:var(--ink-2);margin-top:1px}
.row__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.row__note{font-size:14px;color:var(--ink-2);margin-top:5px;overflow-wrap:anywhere}
.row__end{flex:none;text-align:right;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.3}
.row__end small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.row--live{background:var(--green-50)}
.row--live .row__end{color:var(--green)}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);margin-right:6px;vertical-align:1px}
.pill--rejected{background:var(--red-bg);color:var(--red)}

/* ---------- empty + loading states ---------- */
.empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:15px}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:3px}
.skel{border-radius:6px;background:linear-gradient(90deg,#e9edeb 0%,#f4f6f5 45%,#e9edeb 90%);background-size:220% 100%;animation:rcfe-skel 1.3s linear infinite}
@keyframes rcfe-skel{to{background-position:-220% 0}}
.skel--row{height:64px;border-radius:0;border-top:1px solid var(--card)}
.skel--line{height:16px;margin:8px 0}
.loadfail{padding:18px;text-align:center}
.loadfail p{margin-bottom:12px}

/* ---------- allowance summary ---------- */
.allow__headline{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.allow__headline.is-over{color:var(--red)}
.allow__sub{color:var(--muted);font-size:15px;margin:3px 0 14px}
.key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:14px;color:var(--ink-2)}
.key span{display:inline-flex;align-items:center;gap:7px}
.key i{width:12px;height:12px;border-radius:3px;flex:none}
.key b{font-variant-numeric:tabular-nums}

/* ---------- live summary under a form ---------- */
.summary{margin-top:16px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--green-50);font-size:15px;color:var(--ink)}
.summary.is-warn{background:var(--red-bg);color:var(--red)}
.summary:empty{display:none}

/* ---------- fold-away section ---------- */
details.fold{margin-top:14px}
details.fold>summary{
  display:flex;align-items:center;gap:8px;min-height:var(--touch);cursor:pointer;list-style:none;
  color:var(--green);font-weight:600;font-size:15px;
}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"";width:8px;height:8px;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s}
details.fold[open]>summary::before{transform:rotate(45deg)}

/* ---------- sheet (slides up on a phone, centred box on a wide screen) ---------- */
dialog.sheet{
  width:100%;max-width:520px;max-height:92dvh;margin:auto auto 0;padding:0;border:0;
  border-radius:18px 18px 0 0;background:var(--card);color:var(--ink);
  box-shadow:0 -8px 40px rgba(9,30,27,.3);overflow:auto;overscroll-behavior:contain;
}
dialog.sheet::backdrop{background:var(--shade)}
dialog.sheet[open]{animation:rcfe-sheet .2s cubic-bezier(.2,.8,.2,1)}
@keyframes rcfe-sheet{from{transform:translateY(28px);opacity:0}}
.sheet__head{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 0}
.sheet__head h2{flex:1;margin:0;font-size:20px;letter-spacing:-.01em;padding-top:8px}
.sheet__close{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--bg);color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.sheet__close:hover{background:var(--line)}
.sheet__close svg{width:18px;height:18px}
.sheet__body{padding:4px 18px calc(20px + env(safe-area-inset-bottom))}
.sheet__body>p:first-child{margin-top:6px}
.sheet__lead{color:var(--ink-2);font-size:15px;margin:2px 0 0}
@media(min-width:600px){
  dialog.sheet{margin:auto;border-radius:16px;box-shadow:0 20px 60px rgba(9,30,27,.35)}
}

/* ---------- toasts ---------- */
.toasts{
  position:fixed;left:0;right:0;bottom:0;z-index:2147483000;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 12px calc(16px + env(safe-area-inset-bottom));
  /* shown through the popover API so they sit above an open sheet */
  width:auto;height:auto;margin:0;border:0;background:transparent;overflow:visible;inset:auto 0 0 0;
}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:6px;width:100%;max-width:480px;
  background:var(--ink);color:#fff;border-radius:10px;padding:6px 6px 6px 16px;min-height:52px;
  font-size:15px;box-shadow:0 8px 28px rgba(9,30,27,.35);animation:rcfe-toast .18s ease-out;
}
.toast--error{background:var(--red)}
.toast__msg{flex:1;padding:6px 0}
.toast button{
  flex:none;min-height:40px;padding:0 14px;border:0;border-radius:7px;background:rgba(255,255,255,.16);
  color:#fff;font:inherit;font-weight:600;cursor:pointer;
}
.toast button:hover{background:rgba(255,255,255,.28)}
@keyframes rcfe-toast{from{transform:translateY(10px);opacity:0}}

@media (prefers-reduced-motion:reduce){
  dialog.sheet[open],.toast,.skel,.timer__dot{animation:none}
}
@media print{.toasts,.app-header__offline{display:none!important}}
.key__left{background:var(--line)}
.row__action{margin-top:10px;min-height:40px}


/* ============================================================
   HOME + REPORTS COMPONENTS (added Oct 2026)
   ============================================================ */

:root{
  /* chart colours, checked for colour-blind separation as a pair. Data marks only, never text. */
  --chart-1:#14907c;        /* main series */
  --chart-2:#e4570f;        /* second series (overtime) */
  --chart-quiet:#b3bfbc;    /* context series (workshop / internal time) */
  --grid:#e6eae8;           /* chart gridlines */
}

/* ---------- page heading ---------- */
.pagehead{margin:4px 0 18px}
.pagehead h1{font-size:26px;letter-spacing:-.02em;margin:0}
.pagehead p{color:var(--muted);margin:2px 0 0}

/* ---------- compact running-timer link (home) ---------- */
.timer--bar{display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;color:#fff}
.timer--bar .timer__dot{width:11px;height:11px}
.timer--bar__main{flex:1;min-width:0}
.timer--bar__main b{display:block;font-size:17px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer--bar__main span{font-size:14px;color:#cfe3de}
.timer--bar__clock{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer--bar:focus-visible{outline-color:var(--ink)}

/* ---------- stat tiles: a few headline numbers ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat-tile{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;color:inherit;text-decoration:none;min-width:0;
}
a.stat-tile:hover{border-color:var(--green)}
.stat-tile__label{font-size:14px;color:var(--ink-2)}
.stat-tile__value{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:2px}
.stat-tile__value small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.stat-tile__sub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.35}
.stat-tile .meter{margin-top:9px;height:6px}

/* ---------- navigation cards (home) ---------- */
.navgrid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:620px){.navgrid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.navgrid{grid-template-columns:1fr 1fr 1fr}}
.navcard{
  display:flex;align-items:center;gap:13px;min-height:68px;padding:11px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;
}
.navcard:hover{border-color:var(--green);background:#fbfdfc}
.navcard__icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:10px;background:var(--green-50);color:var(--green)}
.navcard__icon svg{width:22px;height:22px}
.navcard__text{flex:1;min-width:0}
.navcard__text b{display:block;font-size:16px;line-height:1.25}
.navcard__text span{display:block;font-size:13.5px;color:var(--muted);line-height:1.3;margin-top:1px}
.navcard__count{flex:none;min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:var(--amber-bg);color:var(--amber);
  font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

/* row that is a link */
a.row{text-decoration:none;color:inherit}
a.row:hover{background:#fafbfb}
.row__chev{flex:none;align-self:center;color:var(--muted)}
.row__chev svg{width:18px;height:18px;display:block}
.row__lead{flex:none;width:118px}
@media(max-width:520px){.row--stack{flex-wrap:wrap}.row--stack .row__lead{width:100%;margin-bottom:-4px}}

/* ---------- tab bar (scrolls sideways on a phone) ---------- */
.tabbar{display:flex;gap:6px;overflow-x:auto;margin:0 -18px 18px;padding:2px 18px 6px;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{
  flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:22px;
  background:var(--card);color:var(--ink-2);font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.tabbar button:hover{border-color:var(--green)}
.tabbar button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}

/* ---------- period picker ---------- */
.periodbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.periodbar .seg{flex:0 1 330px;min-width:250px}
.periodbar .seg span{min-height:38px;font-size:14.5px;padding:0 6px}
.periodbar__nav{display:flex;align-items:center;gap:6px;flex:1;min-width:230px}
.periodbar__label{flex:1;text-align:center;font-weight:600;font-size:15px}
.periodbar__custom{display:flex;gap:8px;align-items:center;flex:1;min-width:250px;font-size:14px;color:var(--muted)}
.periodbar__custom input{min-height:44px;padding:8px 10px}

/* ---------- filter row above a report ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.filterbar>*{flex:1 1 180px;min-width:0}
.filterbar .seg span{min-height:38px;font-size:14.5px}
.filterbar .btn{flex:0 0 auto}
.filterbar input,.filterbar select{min-height:44px;padding:8px 12px}
.filterbar select{padding-right:38px}

/* ---------- horizontal bars: name | bar | value ---------- */
.bars{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:9px 12px;align-items:center;font-size:14.5px}
.bars__name{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.bars__name small{display:block;color:var(--muted);font-size:13px}
.bars__val{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bars__val small{color:var(--muted);font-size:13px;margin-left:4px}
.bartrack{position:relative;height:14px;display:flex;gap:2px;min-width:40px}
.bartrack i{display:block;height:100%;background:var(--chart-1);min-width:0}
.bartrack i:last-of-type{border-radius:0 4px 4px 0}
.bartrack i.c2{background:var(--chart-2)}
.bartrack i.quiet{background:var(--chart-quiet)}
.bartrack i.ok{background:var(--ok)}
.bartrack i.warn{background:#d98a1f}
.bartrack i.bad{background:var(--red)}
.bartrack i[style*="width:0%"],.bartrack i[style*="width: 0%"]{display:none}
.bartrack--scale{background:linear-gradient(var(--grid),var(--grid)) left center/100% 1px no-repeat}
.bartrack__mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:1px}
.bars--2{grid-template-columns:1fr auto}
.bars--live{grid-template-columns:minmax(80px,30%) 1fr auto;align-items:start}
@media(max-width:520px){
  .bars:not(.bars--2):not(.bars--live){grid-template-columns:1fr auto}
  .bars:not(.bars--2):not(.bars--live) .bars__name{grid-column:1/-1;margin-bottom:-5px}
  .bars:not(.bars--2):not(.bars--live) .bartrack{grid-column:1}
}
.meter__ok{background:var(--ok)}.meter__warn{background:#d98a1f}.meter__bad{background:var(--red)}
.datatable th.col-bar{width:28%;min-width:140px}
details.attn-more{margin:0;border-top:1px solid var(--line)}
details.attn-more>summary{padding:0 16px}
details.attn-more[open]>summary{border-bottom:1px solid var(--line)}
.key .sw-1{background:var(--chart-1)}.key .sw-2{background:var(--chart-2)}.key .sw-quiet{background:var(--chart-quiet)}
.key .sw-ok{background:var(--ok)}.key .sw-warn{background:#d98a1f}.key .sw-bad{background:var(--red)}
.key .sw-mark{width:2px;height:14px;border-radius:1px;background:var(--ink)}

/* ---------- svg chart + hover readout ---------- */
.colchart{position:relative}
.colchart svg{display:block;width:100%;height:auto;overflow:visible}
.colchart text{font-family:var(--font);fill:var(--muted);font-size:11px}
.colchart .gridline{stroke:var(--grid);stroke-width:1}
.colchart .col{cursor:default}
.colchart .col:hover rect.hit,.colchart .col:focus rect.hit{fill:rgba(9,78,69,.06)}
.colchart .col:focus{outline:none}
.charttip{
  position:absolute;z-index:5;pointer-events:none;min-width:130px;padding:8px 10px;border-radius:8px;
  background:var(--ink);color:#fff;font-size:13px;line-height:1.45;box-shadow:0 6px 20px rgba(9,30,27,.3);
}
.charttip b{font-variant-numeric:tabular-nums}
.charttip div{display:flex;justify-content:space-between;gap:14px}
.charttip div span i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.charttip__head{color:#cfe3de;margin-bottom:2px}

/* ---------- report tables ---------- */
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
.datatable{min-width:680px}
.datatable th{white-space:nowrap;text-transform:none;letter-spacing:0;font-size:13px}
.datatable td{vertical-align:middle}
.datatable td.num,.datatable th.num{text-align:right}
.datatable .sub{display:block;color:var(--muted);font-size:13px}
.datatable tr.is-link{cursor:pointer}
.datatable tr.is-link:hover td{background:#fafbfb}
.datatable tr.detail td{background:var(--green-50);vertical-align:top}
.datatable .caret{display:inline-block;transition:transform .15s;color:var(--muted)}
.datatable tr.open .caret{transform:rotate(90deg)}
.datatable .meter{min-width:70px;height:7px;margin-top:5px}
.neg{color:var(--red);font-weight:600}
.pos{color:var(--ok);font-weight:600}
.drilldown{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.drilldown h4{margin:0 0 6px;font-size:14px}
.drilldown table{font-size:13.5px}
.drilldown td,.drilldown th{padding:6px 8px}
.pagebar{display:flex;align-items:center;gap:10px;margin-top:12px}
.pagebar span{flex:1;text-align:center;font-size:14px;color:var(--muted)}

.stack-16 .card h3{font-size:16.5px;margin:0}
.stack-16 .card__head{flex-wrap:wrap}
.stack-16 .card__head a,.linklike-inline{font-size:14px;font-weight:600;color:var(--green);cursor:pointer;background:none;border:0;padding:0;font-family:inherit;text-decoration:underline;text-underline-offset:2px}
.card__note{font-size:13.5px;color:var(--muted);margin:10px 0 0;line-height:1.45}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cols-2>.card{margin-top:0;min-width:0}
@media(max-width:760px){.cols-2{grid-template-columns:1fr}}
.stack-16>*+*{margin-top:16px}
.stack-16 .card__head{margin-bottom:14px;align-items:center}
.datatable th.c-job{min-width:190px}
.nowrap{white-space:nowrap}
td.num,th.num{white-space:nowrap}
table.plain th{text-transform:none;letter-spacing:0;font-size:13px}
.bars__val small.flag{color:var(--red);font-weight:600}
.filterbar .seg{flex:0 1 270px}
.filterbar select{flex:0 1 215px}
@media(max-width:520px){.filterbar>*,.filterbar .seg,.filterbar select{flex:1 1 100%}.filterbar .btn{flex:1 1 100%}}


/* ============================================================
   JOB BOARD + JOB ESTIMATES COMPONENTS (added Oct 2026)
   ============================================================ */

:root{
  --pink:#a3245d; --pink-bg:#f9e8f0;   /* "paperwork" job status */
}

/* ---------- job status: always a word as well as a colour ---------- */
.jstatus{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.jstatus::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.jstatus--green{background:var(--ok-bg);color:var(--ok)}
.jstatus--duein{background:var(--blue-bg);color:var(--blue)}
.jstatus--amber{background:var(--amber-bg);color:var(--amber)}
.jstatus--red{background:var(--red-bg);color:var(--red)}
.jstatus--rework{background:var(--purple-bg);color:var(--purple)}
.jstatus--paperwork{background:var(--pink-bg);color:var(--pink)}

/* ---------- job cards ---------- */
.jobgrid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){.jobgrid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.jobgrid{grid-template-columns:1fr 1fr 1fr}}
.jobcard{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 16px 13px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  color:var(--ink);text-decoration:none;overflow:hidden;
}
.jobcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.jobcard.s-green::before{background:var(--ok)} .jobcard.s-duein::before{background:var(--blue)}
.jobcard.s-amber::before{background:var(--amber)} .jobcard.s-red::before{background:var(--red)}
.jobcard.s-rework::before{background:var(--purple)} .jobcard.s-paperwork::before{background:var(--pink)}
a.jobcard:hover{border-color:var(--green)}
.jobcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.jobcard__ref{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.jobcard__who{font-size:14px;color:var(--muted);margin-top:2px}
.jobcard__machine{font-size:16px;font-weight:600;line-height:1.3}
.jobcard__prog{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-2);margin-bottom:5px}
.jobcard__prog b{font-variant-numeric:tabular-nums}
.jobcard .meter{height:7px}
.jobcard__foot{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:9px;margin-top:auto}
.jobcard__foot b{color:var(--ink);font-weight:600}
.livetag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:3px 10px;border-radius:999px;
  background:var(--green-50);color:var(--green);font-size:13px;font-weight:600}
.livetag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);animation:rcfe-live 1.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.livetag::before{animation:none}}

.boardhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin:4px 0 16px}
.boardhead h1{font-size:26px;letter-spacing:-.02em;margin:0}
.boardhead p{color:var(--muted);margin:2px 0 0}
.boardhead__actions{display:flex;gap:8px;flex-wrap:wrap}
.boardbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.boardbar .seg{flex:0 1 420px}
.boardbar .seg span{min-height:40px;font-size:14.5px}
.boardbar input{flex:1 1 200px;min-height:44px;padding:8px 12px}

/* notices: a round button bottom-left that opens a panel (takes no space until opened) */
.noticebubble{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:52px;height:52px;border-radius:50%;
  border:0;background:var(--green);color:#fff;box-shadow:0 6px 20px rgba(9,30,27,.35);cursor:pointer;display:flex;align-items:center;justify-content:center}
.noticebubble svg{width:23px;height:23px}
.noticebubble__count{position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 5px;border-radius:11px;
  background:var(--signal);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.noticepanel{position:fixed;left:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:61;width:min(380px,calc(100vw - 32px));max-height:60vh;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(9,30,27,.3)}
.noticepanel__head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line)}
.noticepanel__head h2{font-size:16px;margin:0}
.notice-item{padding:12px 16px;border-top:1px solid var(--line);font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.notice-item:first-of-type{border-top:0}
.notice-item.is-pinned{background:var(--green-50);font-weight:600}

/* ---------- workshop TV: dark, large, read from across the room ---------- */
body.tv{background:var(--green);color:#fff;font-size:18px}
body.tv .tvwrap{max-width:none;padding:26px 32px 32px}
.tvhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:20px}
.tvhead__brand{display:flex;align-items:center;gap:20px}
.tvhead__brand img{height:62px;width:auto;display:block}
.tvhead h1{font-size:30px;margin:0;letter-spacing:-.01em}
.tvhead p{margin:4px 0 0;color:#bcd6d0;font-size:17px}
.tvstats{display:flex;gap:12px}
.tvstat{min-width:120px;padding:10px 18px;border-radius:12px;background:rgba(255,255,255,.08);text-align:center}
.tvstat b{display:block;font-size:40px;line-height:1.05}
.tvstat span{font-size:15px;color:#bcd6d0}
.tvstat.is-attn b{color:#ffc56b}
.tvnotices{display:grid;gap:8px;margin-bottom:20px}
.tvnotices div{background:#fff;color:var(--ink);border-radius:12px;padding:12px 18px;font-size:21px;line-height:1.35;font-weight:500}
.tvnotices div.is-pinned{font-weight:700;box-shadow:inset 6px 0 0 var(--signal)}
body.tv .jobgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
body.tv .jobcard{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none;padding:16px 18px 15px 22px;gap:12px}
body.tv .jobcard::before{width:6px}
body.tv .jobcard__ref{font-size:32px}
body.tv .jobcard__who,body.tv .jobcard__foot{color:#bcd6d0;font-size:16px}
body.tv .jobcard__foot b{color:#fff}
body.tv .jobcard__machine{font-size:21px}
body.tv .jobcard__prog{color:#dbe9e5;font-size:16px}
body.tv .jobcard .meter{background:rgba(255,255,255,.18);height:9px}
body.tv .jobcard .meter__fill{background:#fff}
body.tv .jobcard__foot{border-top-color:rgba(255,255,255,.16)}
body.tv .jstatus{font-size:15px;padding:4px 12px 4px 10px}
body.tv .jobcard.s-green::before,body.tv .jstatus--green{--c:#7fe0a8}
body.tv .jobcard.s-duein::before,body.tv .jstatus--duein{--c:#8ec8f2}
body.tv .jobcard.s-amber::before,body.tv .jstatus--amber{--c:#ffc56b}
body.tv .jobcard.s-red::before,body.tv .jstatus--red{--c:#ff8a80}
body.tv .jobcard.s-rework::before,body.tv .jstatus--rework{--c:#cdb2f5}
body.tv .jobcard.s-paperwork::before,body.tv .jstatus--paperwork{--c:#f5a9c9}
body.tv .jobcard::before{background:var(--c,rgba(255,255,255,.3))}
body.tv .jstatus{background:rgba(0,0,0,.22);color:var(--c,#fff)}
body.tv .livetag{background:#fff;color:var(--green);font-size:16px;padding:4px 12px}
body.tv .empty,body.tv .loadfail{color:#dbe9e5}
body.tv .empty b{color:#fff}

/* ---------- job estimates ---------- */
.hours-pair{display:flex;align-items:center;gap:6px;white-space:nowrap}
.hours-pair input{width:62px;min-height:40px!important;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums}
.hours-pair span{color:var(--muted);font-size:14px}
.datatable input.name{min-width:190px;min-height:40px!important;padding:6px 10px}
.datatable select.compact{min-height:40px;padding:6px 34px 6px 10px;font-size:14px;width:auto;max-width:200px;background-position:right 9px center}
.datatable .field-error{font-size:13px;white-space:normal;max-width:220px}
.savestate{display:block;font-size:12.5px;color:var(--ok);min-height:18px;margin-top:2px}
.savestate.is-err{color:var(--red)}
tr.is-hidden-task td{opacity:.55}
.rowbtns{display:flex;gap:6px;flex-wrap:wrap}
.rowbtns .btn{min-height:38px;padding:6px 12px;font-size:14px}

/* guide range against real times, drawn on one scale per row */
.rangestrip{position:relative;height:18px;min-width:150px;margin:4px 0 3px}
.rangestrip::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--grid)}
.rangestrip__guide{position:absolute;top:1px;bottom:1px;border:2px solid var(--green);border-radius:5px;background:rgba(9,78,69,.06)}
.rangestrip__real{position:absolute;top:6px;bottom:6px;background:var(--chart-2);border-radius:3px;min-width:3px}
.rangestrip__med{position:absolute;top:-1px;bottom:-1px;width:3px;margin-left:-1.5px;background:var(--ink);border-radius:2px}
.key .sw-guide{border:2px solid var(--green);background:rgba(9,78,69,.06)}
.key .sw-real{background:var(--chart-2);height:6px}
.key .sw-med{width:3px;height:14px;background:var(--ink)}
.realtext{font-size:13.5px;color:var(--ink-2);line-height:1.35}
.realtext b{font-variant-numeric:tabular-nums}
.flagtext{display:block;font-size:13px;font-weight:600;color:var(--amber)}

/* dot plot of every recorded time for one task */
.dotplot{position:relative}
.dotplot svg{display:block;width:100%;height:auto;overflow:visible}
.dotplot text{font-family:var(--font);fill:var(--muted);font-size:11px}
.dotplot circle.dot{fill:var(--chart-1);stroke:var(--card);stroke-width:2}
.dotplot circle.dot.is-over{fill:var(--chart-2)}
.dotplot g.pt:hover circle.dot,.dotplot g.pt:focus circle.dot{stroke:var(--ink)}
.dotplot g.pt:focus{outline:none}

.qrtoken{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.12em;font-size:15px}
.jobtag{display:inline-flex;align-items:center;gap:2px;margin:2px 6px 2px 0;padding:2px 2px 2px 10px;border-radius:999px;background:var(--green-50);color:var(--green);font-size:13.5px;font-weight:600}
.jobtag button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;font-size:17px;line-height:1}
.jobtag button:hover{background:var(--red-bg);color:var(--red)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.formgrid .span-2{grid-column:1/-1}
@media(max-width:480px){.formgrid{grid-template-columns:1fr}}
.override{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:end;padding:12px 0;border-top:1px solid var(--line)}
.override>.formgrid{grid-column:1/-1}
.override:first-child{border-top:0}
.override label{margin-top:0}
.override .hours-pair input{width:58px}

.qrsheet .qrlabel{margin:12px auto 0}
.copies{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.copies label{margin:0}
.copies select{width:auto;min-width:80px}
.dotplot .gridline{stroke:var(--grid);stroke-width:1}
.override .savestate{grid-column:1/-1;margin:0}
.taskrow{padding:14px 16px;border-top:1px solid var(--line)}
.taskrow:first-child{border-top:0}
.taskrow__fields{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(130px,1fr) 184px 268px;gap:6px 12px;align-items:start}
.taskrow__fields input.name{width:100%;min-height:42px;padding:7px 10px}
.taskrow__real{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,1.4fr) auto;gap:4px 18px;align-items:center;margin-top:6px}
.taskrow__real .btn{min-height:36px;padding:4px 10px;font-size:14px}
.taskrow .rowbtns{flex-wrap:nowrap}
.taskrow--head{padding-top:10px;padding-bottom:6px;font-size:13px;font-weight:600;color:var(--muted)}
.taskrow .rowbtns{justify-content:flex-end}
select.compact{min-height:42px;padding:6px 34px 6px 10px;font-size:14.5px;width:100%;background-position:right 9px center}
@media(max-width:820px){
  .taskrow--head{display:none}
  .taskrow__fields{grid-template-columns:1fr auto}
  .taskrow__fields>[data-field]:first-child{grid-column:1/-1}
  .taskrow .rowbtns{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
  .taskrow__real{grid-template-columns:1fr}
  .taskrow__real .btn{justify-self:start}
}
.rowbtns select.compact{width:auto;max-width:280px}


/* ============================================================
   VEHICLE CHECK + WRITE-UPS COMPONENTS (added Oct 2026)
   ============================================================ */

/* ---------- one-line status above a form (due / up to date) ---------- */
.statusline{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);font-size:15px;line-height:1.4;background:var(--green-50);color:var(--ink)}
.statusline::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px;background:var(--ok)}
.statusline--due{background:var(--amber-bg)}
.statusline--due::before{background:var(--amber)}
.statusline b{font-weight:600}

/* ---------- pick one of a few described options (check lists) ---------- */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.choice{
  display:block;min-width:0;min-height:var(--touch);padding:12px 14px;text-align:left;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;color:var(--ink);overflow-wrap:anywhere;
}
.choice b{display:block;font-size:15.5px;line-height:1.3}
.choice span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.choice:hover{border-color:var(--green)}
.choice[aria-pressed="true"]{border-color:var(--green);background:var(--green-50);box-shadow:inset 0 0 0 1px var(--green)}
.choice[aria-pressed="true"] b{color:var(--green)}

/* ---------- registration plate field ---------- */
input.plate{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.chips--sm .chip{min-height:40px;padding:6px 12px;font-size:14.5px;letter-spacing:.04em;font-weight:600}
.chip[aria-pressed="true"]{border-color:var(--green);background:var(--green-50);color:var(--green)}
.hint.is-warn{color:var(--red);font-weight:600}

/* ---------- check list: a section of items ---------- */
.checksec{margin-top:22px}
.checksec__head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px}
.checksec__head h2{flex:1;min-width:0;margin:0;font-size:18px;overflow-wrap:anywhere}
.checksec__count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.checksec__count.is-full{color:var(--ok);font-weight:600}
.checksec__head .btn{min-height:40px;padding:6px 14px;font-size:14.5px}
.checksec .meter{height:4px;margin-bottom:10px}
.checksec .meter__fill{background:var(--ok);transition:width .25s ease}

.checkitem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.checkitem:first-child{border-top:0}
.checkitem__name{font-size:15.5px;line-height:1.3;overflow-wrap:anywhere}
.checkitem.is-bad{background:#fffafa}
.checkitem.is-bad .checkitem__name{font-weight:600;color:var(--red)}
.checkitem.is-flash{animation:rcfe-flash 1.2s ease-out}
@keyframes rcfe-flash{0%,30%{background:var(--amber-bg)}100%{background:transparent}}
.checkitem__note{grid-column:1/-1}
.checkitem__note textarea{min-height:64px;border-color:var(--red);font-size:15px}
.checkitem__note .field-error{margin-top:4px}

.answer{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78px,1fr);gap:6px}
.answer button{
  min-height:var(--touch);padding:0 10px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);color:var(--ink-2);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.answer button:hover{border-color:#a9b5b1}
.answer button[aria-pressed="true"].a-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.answer button[aria-pressed="true"].a-bad{background:var(--red);border-color:var(--red);color:#fff}
.answer button[aria-pressed="true"].a-na{background:#6f7b78;border-color:#6f7b78;color:#fff}
@media(max-width:560px){
  .checkitem{grid-template-columns:minmax(0,1fr)}
  .answer{grid-auto-columns:1fr}
}

/* ---------- sticky progress + save bar at the foot of a long form ---------- */
.savebar{
  position:sticky;bottom:0;z-index:20;margin:20px -18px 0;padding:10px 18px calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(9,30,27,.07);
}
.savebar__in{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.savebar__prog{flex:1 1 200px;min-width:0}
.savebar__prog b{font-size:15px;font-variant-numeric:tabular-nums}
.savebar__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.savebar__prog small{font-size:13.5px;color:var(--muted)}
.savebar__prog small.is-warn{color:var(--red);font-weight:600}
.savebar__prog .meter{height:6px;margin-top:6px}
.savebar__btns{display:flex;gap:8px;flex:0 1 auto}
.savebar__next{min-height:0;padding:0;margin:0;border:0;background:none;color:var(--green);font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media(max-width:520px){.savebar__btns{flex:1 1 100%}.savebar__btns .btn{flex:1}}

/* ---------- printed / previewed check sheet ---------- */
.printsheet{display:none}
.printsheet__tools{display:flex;gap:8px;margin:0 0 16px}
@media screen{
  body.preview main{display:none}
  body.preview .printsheet{display:block;max-width:860px;margin:0 auto;padding:20px 18px 48px}
  body.preview .printsheet__paper{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
}
@media print{
  body.printsheet-page main,body.printsheet-page .app-header,body.printsheet-page .app-nav,body.printsheet-page .viewas-bar,
  body.printsheet-page .app-header__offline,.printsheet__tools{display:none!important}
  body.printsheet-page .printsheet{display:block!important}
  @page{size:A4;margin:12mm}
}
.printsheet__paper{color:#000;font-size:12px}
.po-head{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--green);padding-bottom:8px}
.po-head img{height:44px;width:auto;flex:none}
.po-brand{font-weight:800;color:var(--green);font-size:13px;line-height:1.15}
.po-sub{font-size:10.5px;color:#333}
.po-meta{display:grid;grid-template-columns:repeat(5,auto);gap:2px 16px;margin:10px 0 2px;font-size:11px}
.po-meta span{color:#555;text-transform:uppercase;font-size:9px;letter-spacing:.04em}
.po-meta b{font-size:12px}
table.po{width:100%;border-collapse:collapse;font-size:11px;margin-top:10px}
table.po th,table.po td{border:1px solid #999;padding:4px 6px;text-align:left;overflow-wrap:break-word;vertical-align:top}
table.po td.po-ok,table.po td.po-bad,table.po th{white-space:nowrap}
table.po td:last-child{white-space:normal}
table.po th{background:#eef2f1;font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:#333}
table.po tr.po-sec td{background:#f5f7f6;font-weight:700;font-size:10px}
table.po td.po-ok{background:#dff0e6}
table.po td.po-bad{background:#f6dcd9;font-weight:700}
@media(max-width:560px){.po-meta{grid-template-columns:repeat(2,auto)}}

/* ---------- write-ups list: one row per job, a link per engineer's card ---------- */
.wucards{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wucard{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:5px 8px 5px 6px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);text-decoration:none;font-size:14.5px;
}
.wucard:hover{border-color:var(--green);background:var(--green-50)}
.wucard__init{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 4px;border-radius:7px;background:var(--green-50);color:var(--green);font-weight:700;font-size:13px;flex:none}
.wucard__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wucard__hrs{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wucard svg{width:16px;height:16px;color:var(--muted);flex:none}
.wucard--old .wucard__init{background:#eef0ef;color:var(--muted)}
.row mark{background:#fff1c2;color:inherit;border-radius:3px;padding:0 1px}
.showmore{display:flex;justify-content:center;padding:12px}
.row__meta>span+span{position:relative}
input.plate::placeholder{text-transform:none;letter-spacing:0;font-weight:400;font-size:16px}


/* ============================================================
   LABOUR RATES (added Oct 2026)
   ============================================================ */
.money{position:relative}
.money>span{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-size:18px;color:var(--muted);pointer-events:none}
.money>span:first-child{left:14px;font-weight:600}
.money>span:last-child{right:14px;font-size:14px}
.money input{padding-left:32px;padding-right:86px;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.stat-tile__value .pill{vertical-align:4px;margin-left:6px}
.row__end .pos,.row__end .neg{font-size:13px;font-weight:600}
.row .btn--quiet.btn--sm{min-height:36px;padding:4px 10px;margin:6px 0 -4px -10px}
.section-list>.section:first-of-type{margin-top:28px}
.money input::-webkit-outer-spin-button,.money input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.money input{-moz-appearance:textfield;appearance:textfield}


/* ============================================================
   JOB PAGE + NEW JOB (added Oct 2026)
   ============================================================ */
.backlink{display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:-6px 0 6px;color:var(--green);font-weight:600;font-size:15px;text-decoration:none}
.backlink:hover{text-decoration:underline}

/* ---------- the job's header card ---------- */
.jobhead{position:relative;overflow:hidden;padding-left:22px}
.jobhead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line)}
.jobhead.s-green::before{background:var(--ok)}.jobhead.s-duein::before{background:var(--blue)}
.jobhead.s-amber::before{background:var(--amber)}.jobhead.s-red::before{background:var(--red)}
.jobhead.s-rework::before{background:var(--purple)}.jobhead.s-paperwork::before{background:var(--pink)}
.jobhead__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.jobhead__eyebrow{font-size:14px;color:var(--muted);font-weight:500}
.jobhead__eyebrow b{color:var(--ink);font-size:16px;letter-spacing:.01em}
.jobhead h1{font-size:24px;letter-spacing:-.015em;margin:6px 0 0;overflow-wrap:anywhere}
.jobhead__desc{color:var(--ink-2);margin:6px 0 0;font-size:15px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 16px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.facts div{min-width:0}
.facts dt{font-size:12.5px;color:var(--muted)}
.facts dd{margin:0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.jobhead__prog{margin-top:16px}
.jobhead__prog .meter{height:10px}
.jobhead__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.jobhead__actions .btn{min-height:44px;padding:8px 14px;font-size:15px}
.jobhead__actions select{flex:1 1 220px;min-height:44px;padding-top:8px;padding-bottom:8px;font-weight:600}
.archbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);background:#eef0ef;font-size:15px}
.archbar span{flex:1 1 220px}

/* ---------- running timer strip ---------- */
.runstrip{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:var(--radius);background:var(--green);color:#fff}
.runstrip .timer__dot{width:11px;height:11px}
.runstrip__main{flex:1;min-width:0}
.runstrip__main b{display:block;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.runstrip__main span{font-size:13.5px;color:#cfe3de}
.runstrip__clock{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.runstrip--other .runstrip__clock{color:var(--ink)}
.runstrip .btn{min-height:44px;padding:8px 16px}
.runstrip--other{background:var(--amber-bg);color:var(--ink)}
.runstrip--other .runstrip__main span{color:var(--ink-2)}

/* ---------- task sections ---------- */
.tasktools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0 4px}
.tasktools h2{flex:1 1 100%;margin:0;font-size:19px}
.tasktools label{margin:0;font-size:14px;color:var(--ink-2)}
.tasktools select{width:auto;min-width:170px;min-height:42px;padding:6px 36px 6px 12px;font-size:14.5px}
.tsec{margin-top:14px}
.tsec__head{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--touch);padding:4px 2px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tsec__head h3{flex:1;min-width:0;margin:0;font-size:17px;overflow-wrap:anywhere}
.tsec__count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tsec__count.is-full{color:var(--ok);font-weight:600}
.tsec__caret{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 6px 4px 4px;transition:transform .15s}
.tsec.is-shut .tsec__caret{transform:rotate(-45deg);margin-bottom:0}
.tsec.is-shut .rows{display:none}
.tsec .meter{height:4px;margin:2px 0 8px}
.tsec .meter__fill{background:var(--ok)}

.jtask{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.jtask:first-child{border-top:0}
.jtask.is-done{background:#f7fbf9}
.jtask.is-live{background:var(--green-50)}
.jtask__check{
  flex:none;width:44px;height:44px;margin:-2px 0 -2px -2px;border-radius:10px;border:2px solid #b9c4c1;background:var(--card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;
}
.jtask__check svg{width:22px;height:22px;opacity:0}
.jtask__check:hover{border-color:var(--ok)}
.jtask.is-done .jtask__check{background:var(--ok);border-color:var(--ok)}
.jtask.is-done .jtask__check svg{opacity:1}
.jtask__main{flex:1;min-width:0;padding-top:1px}
.jtask__title{display:block;width:100%;padding:0;border:0;background:none;font:inherit;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink);text-align:left;cursor:pointer;overflow-wrap:anywhere}
.jtask__title:hover{text-decoration:underline;text-underline-offset:3px}
.jtask.is-done .jtask__title{color:var(--ink-2);font-weight:500}
.jtask__meta{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:4px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.jtask__meta .signed{color:var(--ok);font-weight:600}
.jtask__meta .over{color:var(--amber);font-weight:600}
.jtask__meta .live{color:var(--green);font-weight:600}
.jtask__note{margin-top:5px;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere;white-space:pre-line}
.jtask__why{margin-top:8px}
.jtask__why select{min-height:42px;padding-top:6px;padding-bottom:6px;font-size:14.5px;border-color:var(--amber)}
.jtask__why p{margin:0;font-size:13.5px;color:var(--amber);font-weight:600}
.jtask__end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.jtask__end .btn{min-height:44px;min-width:76px;padding:6px 14px;font-size:15px}
.jtask__clock{font-size:14px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.btn--stop{background:var(--signal-ink);border-color:var(--signal-ink)}
.btn--stop:hover{background:#923506;border-color:#923506}

/* ---------- pick from a list of standard tasks ---------- */
.picklist{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:8px}
.picklist label{display:flex;align-items:center;gap:10px;min-height:46px;margin:0;padding:6px 12px;border-top:1px solid var(--line);font-size:15px;color:var(--ink);font-weight:400;cursor:pointer}
.picklist label:first-child{border-top:0}
.picklist label:hover{background:#fafbfb}
.picklist input{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--green)}
.picklist span{flex:1;min-width:0}
.picklist em{font-style:normal;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.picklist .empty{padding:14px}
.hint.is-caution{color:var(--amber);font-weight:600}
.chip--inline{min-height:36px;padding:4px 12px;font-size:14px;margin-top:6px}
input[autocapitalize="characters"]{text-transform:uppercase}
input[autocapitalize="characters"]::placeholder{text-transform:none}


/* ============================================================
   SCAN PAGE + JOB WRITE-UP (added Oct 2026)
   ============================================================ */
.inlineform{display:flex;gap:8px;margin-top:10px}
.inlineform input{flex:1;min-width:0}
.inlineform .btn{flex:none}
.notice__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.notice__row span{flex:1 1 200px}
.notice .btn{min-height:40px;padding:6px 14px;font-size:14.5px}
.timer__note{margin:-4px 0 14px;font-size:14px;color:#cfe3de}
.timer__note b{color:#fff}
button.row:disabled{cursor:default}
.row__end small.live{color:var(--green);font-weight:700}
.row__end small.over{color:var(--amber);font-weight:600}
.row__end--quiet{font-weight:500;font-size:14px;color:var(--muted)}

/* ---------- write-up: who's card, parts rows ---------- */
.cardbar{margin-top:16px}
.cardbar .chip{min-height:44px}
.viewing{margin-top:10px}
.matrows{display:grid;gap:8px}
.matrow{display:grid;grid-template-columns:76px 120px minmax(0,1fr) 130px 96px 44px;gap:8px;align-items:center}
.matrow input,.matrow select{min-height:44px;padding:8px 10px}
.matrow select{padding-right:32px;background-position:right 8px center}
.matrow--head{font-size:13px;font-weight:500;color:var(--muted)}
.matrow .iconbtn{color:var(--red)}
.matrow .iconbtn:hover{background:var(--red-bg)}
@media(max-width:640px){
  .matrow{grid-template-columns:76px minmax(0,1fr) 44px;grid-template-areas:"q u x" "d d d" "p l l";padding:10px 0;border-top:1px solid var(--line)}
  .matrow:first-child,.matrow--head+.matrow{border-top:0}
  .matrow--head{display:none}
  .matrow .m-q{grid-area:q}.matrow .m-u{grid-area:u}.matrow .m-x{grid-area:x}.matrow .m-d{grid-area:d}.matrow .m-p{grid-area:p}.matrow .m-l{grid-area:l}
}
.logged{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--green-50);font-size:14.5px}
.logged span{flex:1 1 220px}
.logged .btn{min-height:38px;padding:4px 12px;font-size:14px}
.savestamp{font-size:14px;color:var(--muted)}

/* ---------- printed job card (John Deere layout) ---------- */
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:2px solid var(--green);padding-bottom:6px}
.pc-head img{height:40px;width:auto;flex:none}
.pc-brand{display:flex;align-items:center;gap:8px}
.pc-logo{font-weight:800;font-size:13px;color:var(--green);line-height:1.1}
.pc-title{background:var(--green);color:#fff;font-weight:700;letter-spacing:2px;padding:5px 22px;border-radius:3px;white-space:nowrap}
.pc-jd{text-align:right;font-size:10px;color:#333}
.pc-row{display:flex;gap:10px;margin-top:6px}
.pc-f{border:1px solid #999;padding:4px 6px;flex:1;min-height:24px;min-width:0;overflow-wrap:break-word}
.pc-f b,.pc-block b{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.5px;color:#555}
.pc-block{border:1px solid #999;margin-top:6px;padding:5px 6px;min-height:34px;white-space:pre-wrap;overflow-wrap:break-word}
.pc-block b{margin-bottom:2px}
.pc-block--tall{min-height:120px}
.pc-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
table.pc-t{width:100%;border-collapse:collapse;font-size:10px}
table.pc-t th,table.pc-t td{border:1px solid #999;padding:3px 4px;text-align:left;vertical-align:top}
table.pc-t th{background:#eef2f1;font-size:8px;text-transform:uppercase;color:#333;letter-spacing:.03em}
.pc-legend{font-size:8px;color:#444;margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}
.pc-sign{border:1px solid #999;height:46px;margin-top:2px}
.pc-cert{font-size:9px;margin-top:8px}
.pc-small{font-size:8px;margin-top:6px}
@media(max-width:560px){.pc-row{flex-wrap:wrap}.pc-row .pc-f{flex:1 1 40%}.pc-2{grid-template-columns:1fr}}
button.row[aria-busy="true"]{opacity:.55;pointer-events:none}
button.row .row__main>span{display:block}


/* ============================================================
   APPROVALS: TIMESHEETS + HOLIDAYS (added Oct 2026)
   ============================================================ */
.waitbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.waitbar span{flex:1 1 240px}
.waitbar .btn{min-height:40px;padding:6px 14px;font-size:14.5px}

.apgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.apgroup+.apgroup{margin-top:12px}
.apgroup__head{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 6px}
.apgroup__toggle{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:var(--touch);padding:4px 6px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:var(--radius-sm)}
.apgroup__toggle:hover{background:#fafbfb}
.apgroup__toggle b{display:block;font-size:17px;line-height:1.25}
.apgroup__toggle small{display:block;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.apgroup__toggle small .waiting{color:var(--amber);font-weight:600}

.apcaret{flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin:0 4px 0 6px;transition:transform .15s}
[aria-expanded="true"]>.apcaret{transform:rotate(45deg)}
.apgroup__head .btn{flex:none;min-height:42px;padding:6px 14px;font-size:14.5px}
.apflags{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px 37px;margin-top:-4px}
.apflag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--amber-bg);color:var(--amber);font-size:13px;font-weight:600}
.apflag--info{background:var(--blue-bg);color:var(--blue)}
.apgroup__body{border-top:1px solid var(--line);background:var(--bg);padding:12px}
.apjob+.apjob{margin-top:12px}
.apjob__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 2px 6px}
.apjob__head b{flex:1 1 200px;min-width:0;font-size:15px;overflow-wrap:anywhere}
.apjob__head span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.apjob__head .btn{min-height:36px;padding:4px 12px;font-size:14px}
.aprow{display:grid;grid-template-columns:118px minmax(0,1fr) 64px 132px;gap:4px 12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:var(--card)}
.aprow:first-child{border-top:0}
.aprow__when b{display:block;font-size:14.5px}
.aprow__when small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.aprow__what{font-size:14.5px;min-width:0}
.aprow__what small{display:block;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.aprow__hrs{font-weight:700;font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
.aprow__act{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.aprow__act .btn{min-height:38px;padding:4px 12px;font-size:14px}
.aprow.is-approved{background:#fbfcfc}
@media(max-width:620px){
  .aprow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"when hrs" "what what" "act act"}
  .aprow__when{grid-area:when}.aprow__hrs{grid-area:hrs}.aprow__what{grid-area:what}.aprow__act{grid-area:act;justify-content:flex-start}
  .apflags{padding-left:16px}
}

/* ---------- holiday requests ---------- */
.hreq{padding:16px;border-top:1px solid var(--line)}
.hreq:first-child{border-top:0}
.hreq__top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.hreq__who{flex:1 1 220px;min-width:0}
.hreq__who b{display:block;font-size:17px}
.hreq__who span{font-size:15px;color:var(--ink-2)}
.hreq__days{text-align:right;font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2}
.hreq__days small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.hreq__facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hreq__reason{margin:10px 0 0;font-size:15px;color:var(--ink-2)}
.hreq__note{margin-top:12px}
.hreq__note input{min-height:44px}
.hreq .actions{margin-top:12px}
.entrow{display:grid;grid-template-columns:minmax(0,1fr) 150px 200px;gap:6px 14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.entrow:first-child{border-top:0}
.entrow__who b{display:block}
.entrow__who small{font-size:13px;color:var(--muted)}
.entrow .hours-pair input{width:76px}
.entrow__use{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.entrow__use .meter{height:6px;margin-top:5px}
@media(max-width:620px){.entrow{grid-template-columns:minmax(0,1fr) auto}.entrow__use{grid-column:1/-1}}


/* ============================================================
   TIMESHEET APPROVALS + HOLIDAY APPROVALS (added Oct 2026)
   ============================================================ */
.apgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.apgroup+.apgroup{margin-top:12px}
.apgroup.has-waiting{border-color:#e7c89e}
.aphead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px}
.aphead__who{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.aphead__who b{display:block;font-size:17px;line-height:1.25}
.aphead__who small{display:block;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.aphead__caret{flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin:0 4px}
.apgroup.is-open .aphead__caret{transform:rotate(45deg)}
.aphead .btn{min-height:42px;padding:6px 14px;font-size:14.5px}
.apflags{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 16px 12px;font-size:14px;color:var(--amber);font-weight:600}
.apflags span::before{content:"! ";}
.week--mini{padding:0 16px 14px}
.week--mini .week__day{cursor:default;min-height:64px}
.apbody{display:none;border-top:1px solid var(--line);background:#fafbfb;padding:4px 16px 14px}
.apgroup.is-open .apbody{display:block}
.apjob{margin-top:12px}
.apjob__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.apjob__head b{flex:1 1 200px;min-width:0;font-size:15px}
.apjob__head span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.apjob__head .btn{min-height:38px;padding:4px 12px;font-size:14px}
.aprow{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-top:1px solid var(--line)}
.aprow:first-child{border-top:0}
.aprow__main{flex:1;min-width:0}
.aprow__title{font-weight:600;font-size:15px}
.aprow__sub{font-size:14px;color:var(--ink-2)}
.aprow__note{font-size:14px;color:var(--ink-2);margin-top:3px;overflow-wrap:anywhere}
.aprow__flag{font-size:13.5px;color:var(--amber);font-weight:600;margin-top:3px}
.aprow__end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.aprow__end b{font-size:17px;font-variant-numeric:tabular-nums}
.aprow__end .btn{min-height:38px;padding:4px 12px;font-size:14px}
.aprow.is-approved .aprow__title{color:var(--ink-2);font-weight:500}
.togglerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.togglerow .check{margin:0;min-height:40px}

/* holiday requests */
.reqcard .row__main{display:flex;flex-direction:column;gap:3px}
.reqline{font-size:14px;color:var(--ink-2)}
.reqline.ok{color:var(--ok);font-weight:600}
.reqline.warn{color:var(--red);font-weight:600}
.reqline.clash{color:var(--amber);font-weight:600}
.reqcard .actions--row{margin-top:10px;max-width:360px}
.reqcard .actions--row .btn{min-height:44px}
.allowrow .row__end{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500}
.allowrow .row__end input{width:84px;min-height:44px;padding:6px 10px;text-align:right;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.allowrow .savestate{text-align:right}


/* ============================================================
   PAYROLL + JOB VALUE (added Oct 2026)
   ============================================================ */
.payfigs{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.payfigs div{text-align:right;min-width:62px}
.payfigs b{display:block;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.2}
.payfigs span{font-size:12.5px;color:var(--muted)}
.payfigs .ot b{color:var(--signal-ink)}
.payfigs small{display:block;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.payleave{display:flex;flex-wrap:wrap;gap:4px 14px;padding:0 16px 12px;font-size:14px;color:var(--ink-2)}
.payleave b{font-weight:600}
.payday{margin-top:12px}
.payday__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-size:14.5px}
.payday__head b{flex:1 1 160px;font-size:15px}
.payday__head span{color:var(--muted);font-variant-numeric:tabular-nums}
.payday__head .ot{color:var(--signal-ink);font-weight:600}
.payentry{display:flex;gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:14.5px}
.payentry:first-child{border-top:0}
.payentry div{flex:1;min-width:0}
.payentry small{display:block;color:var(--muted);font-size:13.5px}
.payentry b{flex:none;font-variant-numeric:tabular-nums}
@media(max-width:560px){.payfigs{margin-left:0;width:100%;justify-content:space-between}.payfigs div{text-align:left}}

/* job value */
.jvrow .row__end small.neg,.jvrow .row__end small.pos{font-weight:600}
.jvsum{margin-top:16px;display:grid;gap:6px}
.jvsum div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.jvsum div span{color:var(--ink-2)}
.jvsum div b{font-variant-numeric:tabular-nums}
.jvsum .meter{margin:4px 0}
.money--plain input{padding-right:14px}
button.row .row__main>.row__meta{display:flex}
button.row .row__main>.meter{display:flex}
.filterbar .seg--wide{flex:0 1 400px}


/* ============================================================
   VEHICLE CHECK ADMIN, CHECK LISTS, PEOPLE, PERMISSIONS (added Oct 2026)
   ============================================================ */
.platetag{display:inline-block;padding:2px 8px;border-radius:5px;background:#f6d531;color:#1a1a1a;font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums;font-size:14.5px;line-height:1.4;white-space:nowrap}
.vcdetail{padding:4px 16px 16px;background:#fafbfb;border-top:1px solid var(--line)}
.vcdetail h4{margin:12px 0 6px;font-size:14.5px}
.vcdetail h4.bad{color:var(--red)}
.vcdetail ul{margin:0;padding-left:20px}
.vcdetail li{margin:4px 0;font-size:14.5px}
.vcdetail li span{color:var(--ink-2)}
.vcdetail .notesbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;font-size:14.5px;white-space:pre-wrap}
.vcitem{border-top:1px solid var(--line)}
.vcitem:first-child{border-top:0}
.vcitem>.row{border-top:0}

/* check list editor */
.editrow{display:flex;align-items:center;gap:6px;padding:6px 0}
.editrow input{flex:1;min-width:0;min-height:44px}
.editrow .iconbtn{width:40px;height:40px}
.editrow .iconbtn--del:hover{background:var(--red-bg);color:var(--red)}
.sechead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.sechead input{flex:1 1 200px;font-weight:600;min-height:44px}
.sechead select{flex:0 1 220px;min-height:44px}
.badge{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:2px;background:var(--green);color:#fff}
.badge--grey{background:#7a8683}
.row.is-off{opacity:.65}
.rowbtns--wrap{flex-wrap:wrap;margin-top:10px}
.rowbtns--wrap .btn{min-height:40px}

/* people */
.persona{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:10px;background:var(--green-50);color:var(--green);font-weight:700;font-size:14px}
.row.is-off .persona{background:#eef0ef;color:var(--muted)}
.rolehelp{font-size:13.5px;color:var(--muted);margin:6px 0 0}

/* permissions: on/off switches */
.permgroup+.permgroup{margin-top:20px}
.permgroup h2{font-size:16px;margin:0 0 8px;color:var(--ink-2)}
.switchrow{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line);margin:0;cursor:pointer;color:var(--ink);font-size:15.5px;font-weight:400}
.switchrow:first-child{border-top:0}
.switchrow>span:first-child{flex:1;min-width:0}
.switchrow small{display:block;font-size:13px;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace}
.switchrow.is-locked{cursor:default}
.switch{position:relative;flex:none;width:52px;height:30px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.switch i{position:absolute;inset:0;border-radius:15px;background:#c7d0cd;transition:background .15s;pointer-events:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked+i{background:var(--green)}
.switch input:checked+i::after{transform:translateX(22px)}
.switch input:focus-visible+i{outline:2px solid var(--green);outline-offset:2px}
.switch input:disabled{cursor:default}
.switch input:disabled+i{opacity:.55}
.rolebar .seg{flex:1 1 100%}
.rolebar .seg span{min-height:44px;font-size:14.5px}
@media(max-width:520px){.rolebar .seg{flex-wrap:wrap}.rolebar .seg label{flex:1 1 30%}}
.datatable--fit{min-width:0}


/* ============================================================
   NOTICES, JOB SHEET, COMPLETED JOBS, CALENDAR, PRIVACY (added Oct 2026)
   ============================================================ */
/* notices: preview of the board banner */
.boardpreview{background:var(--green);border-radius:var(--radius);padding:14px;display:grid;gap:8px}
.boardpreview div{background:#fff;color:var(--ink);border-radius:10px;padding:10px 14px;font-size:15.5px;line-height:1.4;overflow-wrap:anywhere}
.boardpreview div.is-pinned{font-weight:700;box-shadow:inset 5px 0 0 var(--signal)}
.boardpreview p{margin:0;color:#cfe3de;font-size:14px}
.noticerow .row__title{font-weight:500;white-space:pre-line;overflow-wrap:anywhere}
.noticerow .rowbtns{margin-top:10px;flex-wrap:wrap}
.noticerow .rowbtns .btn{min-height:40px}
.charcount{font-size:13px;color:var(--muted);text-align:right;margin-top:4px}
.charcount.is-warn{color:var(--amber);font-weight:600}

/* printed job sheet */
.sheettools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sheettools .spacer{flex:1}
.sheettools .check{margin:0}
.sheetpaper{background:#fff;color:#111;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px 36px;font-size:13.5px}
.sp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:2px solid var(--green);padding-bottom:12px}
.sp-head .co{font-size:21px;font-weight:700;color:var(--green);line-height:1.15}
.sp-head .co small{display:block;font-size:11.5px;font-weight:500;color:#555;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.sp-head img{height:62px;width:auto}
.sp-title{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0}
.sp-title .t{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#555}
.sp-title .d b{color:#555;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:11px;margin-right:6px}
table.sp-details td{border:1px solid #222;padding:8px 10px;vertical-align:top;overflow-wrap:anywhere;font-size:13.5px}
table.sp-details .k{background:#f3f3f3;font-weight:600;width:16%;white-space:nowrap}
table.sp-jobs{margin-top:16px}
table.sp-jobs th{border:1px solid #222;background:var(--green);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;text-align:left}
table.sp-jobs td{border:1px solid #222;padding:8px 10px;font-size:13px;vertical-align:top}
table.sp-jobs .c-time{text-align:right;white-space:nowrap}
table.sp-jobs .c-init{text-align:center}
table.sp-jobs .sec td{background:#eef3f1;font-weight:700;color:var(--green);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
table.sp-jobs .tick{color:var(--green);font-weight:700}
table.sp-jobs .blank td{height:30px}
.sp-summary{margin-top:16px;background:#f3f3f3;border:1px solid #222;padding:9px 12px;border-radius:4px}
.sp-foot{margin-top:24px;display:flex;justify-content:space-between;gap:30px;font-size:12.5px}
.sp-foot>div{flex:1}
.sp-foot .lbl{color:#555;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.sp-foot .line{border-top:1px solid #222;padding-top:5px;color:#555}
@media(max-width:560px){.sheetpaper{padding:16px 12px 24px}.sp-head img{height:44px}.sp-head .co{font-size:17px}table.sp-jobs th,table.sp-jobs td{padding:6px;font-size:12px}}
@media print{
  .sheetpaper{border:0;border-radius:0;box-shadow:none;padding:0}
  .sheettools{display:none!important}
  @page{size:A4;margin:14mm}
}

/* calendar */
.calframe{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.calframe iframe{width:100%;height:72vh;min-height:480px;border:0;display:block}
.setup ol{margin:10px 0 0;padding-left:22px}
.setup li{margin:6px 0;font-size:15px}
.setup code{background:var(--green-50);padding:1px 6px;border-radius:4px;font-size:13.5px}
.wrap.wide{max-width:1100px}
.offlist .row{min-height:56px;padding:10px 16px}

/* privacy notice (readable without signing in) */
.pubhead{background:var(--green);color:#fff;border-bottom:3px solid var(--green-700)}
.pubhead__bar{display:flex;align-items:center;gap:12px;max-width:920px;margin:0 auto;padding:12px 16px}
.pubhead__bar img{height:26px;width:auto;display:block}
.pubhead__bar span{font-weight:500;opacity:.85;font-size:15px;border-left:1px solid rgba(255,255,255,.3);padding-left:12px}
.doc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px 30px}
.doc h1{font-size:26px;letter-spacing:-.02em;margin:0 0 4px}
.doc h2{font-size:18px;margin:28px 0 8px}
.doc p,.doc li{font-size:15.5px;color:var(--ink-2);line-height:1.6}
.doc ul{padding-left:22px;margin:0 0 12px}
.doc li{margin-bottom:6px}
.doc .meta{font-size:14px;color:var(--muted)}
.doc table{font-size:14.5px;min-width:560px}
.doc th{text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--ink)}
.doc td{color:var(--ink-2)}
.doc .toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 4px;padding:12px 14px;background:var(--bg);border-radius:var(--radius-sm);font-size:14.5px}
.todo{background:#fde68a;color:#422006;padding:0 4px;border-radius:3px;font-weight:600}
@media(max-width:560px){.doc{padding:18px 16px 24px}}
@media print{.pubhead{display:none}.doc{border:0;box-shadow:none;padding:0}}
.setup code{overflow-wrap:anywhere;word-break:break-all}