/* New Pen Ops Hub — the one stylesheet the pages share: colour tokens, buttons, status chips, inputs, focus.
   Load it FIRST on a page (before the page's own <style>), so page-specific rules still win where they differ.
   Buttons and tappable chips are at least 40px tall: these pages are used on phones, often one-handed. */
:root {
  --ink:#1c2733; --muted:#6b7a8c; --bg:#f6f7f9; --card:#fff; --border:#e3e8ee;
  --accent:#275e9e; --accent-soft:#e5eef8; --accent-ink:#1c4a80;
  --green:#0b7a4b; --green-soft:#e3f4ec; --red:#b3261e; --red-soft:#fdecea;
  --amber:#9a5b00; --amber-soft:#fff4e0; --amber-bg:#fff4e0; --amber-bd:#f0d9a8; --blue:#275e9e; --blue-soft:#e5eef8; --purple:#5a2d91; --purple-soft:#efe6fa;
}
/* keyboard focus is visible everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }
/* inputs: never smaller than a fingertip */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font:inherit; min-height:40px; }
/* buttons */
.btn { font:inherit; font-size:.9rem; font-weight:700; border-radius:10px; padding:8px 14px; min-height:40px; cursor:pointer; border:1.5px solid var(--border); background:var(--card); color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1.2; vertical-align:middle; }
.btn.go { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.small, .mini { font:inherit; font-size:.82rem; font-weight:700; border-radius:9px; padding:6px 12px; min-height:40px; cursor:pointer; border:1.5px solid var(--border); background:var(--card); color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:5px; line-height:1.2; vertical-align:middle; }
.btn.go.small, .mini.go { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.danger { color:var(--red); border-color:#f0c9c5; }
.mini.danger, .btn.small.danger { color:var(--red); border-color:#f0c9c8; background:var(--red-soft); }
/* the text floor: the second line on a calendar chip is lighter, not smaller */
.occ small, .it small, .wday small, .dayc small { font-size:inherit; font-weight:500; opacity:.92; }
.btn.ghost { background:#fff; color:var(--accent); }
.btn[disabled] { opacity:.5; cursor:default; }
/* the glyph buttons inside chips (remove a holder, edit a number, take a photo) get a real hit area */
.chip button, .item button, .shift button { min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; margin:-8px -6px -8px 0; padding:0 6px; }
/* phone pass: every tappable thing is at least 40px — icon-only buttons get a minimum width too */
.btn.small, .mini { min-width:40px; }
.tabs button, .page-tabs button, .presets button, .picks label, .lf .chips button, .layers button { min-height:40px; }
.picks label { padding:6px 12px; }
input[type=range] { min-height:40px; }
.zoom button { min-height:40px; }
select, input[type=text], input[type=search], input[type=email], input[type=tel] { max-width:100%; }   /* a long option list never pushes a page sideways on a phone */
.site-nav button { min-height:40px; padding:6px 10px; }
/* one status chip for every page: ok / warn / crit / info / muted */
.status { display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:800; letter-spacing:.01em; border-radius:999px; padding:3px 10px; background:#eef1f5; color:var(--muted); white-space:nowrap; vertical-align:middle; }
.status.ok { background:var(--green-soft); color:var(--green); }
.status.warn { background:var(--amber-soft); color:var(--amber); }
.status.crit { background:var(--red-soft); color:var(--red); }
.status.info { background:var(--accent-soft); color:var(--accent); }
/* small text still readable on a phone */
.muted { color:var(--muted); }
@media (max-width: 600px) { .m, .muted, .when, .sub { font-size:max(.84rem, 1em); } }
/* the header's section tabs (site-nav.js) */
.site-tabs { background:#fff; border-bottom:1px solid var(--border); display:flex; gap:2px; padding:4px 10px 0; overflow-x:auto; white-space:nowrap; scrollbar-width:none; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.site-tabs::-webkit-scrollbar { display:none; }
.site-tabs a { color:var(--muted); text-decoration:none; font-size:.86rem; font-weight:700; padding:9px 12px; border-bottom:3px solid transparent; flex:none; min-height:40px; display:inline-flex; align-items:center; }
.site-tabs a.on { color:var(--accent); border-bottom-color:var(--accent); }
.site-tabs a:hover { color:var(--ink); }
@media print { .site-tabs { display:none !important; } }
/* type scale (design review, 2 Oct 2026). Pages set their own heading rules, so each page repeats these numbers:
   page title 1.4–1.5rem · section heading 1.19rem/700 ink, sentence case, no emoji, 32px above + 12px below (12px below at the top of a card)
   card title 1rem/600 · body 1rem/1.5 · meta .875rem muted · small capitals only for urgency labels and table column headings.
   Spacing steps: 4 8 12 16 24 32 48. Cards: 14–16px inside, 12px apart. */
/* ---- The urgency scale (design review, 2 Oct 2026). ONE look for every task, job, fault, hire, clash, check and clearance.
   Put .lvl and a level class on a card: <div class="lvl l4"><span class="lvl-lab">Urgent</span>…</div>. The word label is always shown
   (colour is never the only signal). Thin = on the radar, thick = time is running out, flashing = gone to management.
   1 New · 2 Needs attention · 3 Getting urgent · 4 Urgent · 5 Urgent, no action yet · 6 Escalated. */
:root { --u1:#1f4e8c; --u1-soft:#e8eff9; --u2:#e38b1b; --u2-text:#8a4f00; --u2-soft:#fff3e2; --u3:#b25600; --u3-text:#8f4300; --u3-soft:#ffe9d6; --u4:#c62828; --u4-text:#a61d1d; --u4-soft:#fdecea; --u6:#b0141a; }
.lvl { background:var(--card); border:2px solid var(--border); border-radius:12px; padding:12px 14px; display:grid; gap:6px; }
.lvl.l1 { border:2px solid var(--u1); }
.lvl.l2 { border:2px solid var(--u2); }
.lvl.l3 { border:4px solid var(--u3); }
.lvl.l4 { border:2px solid var(--u4); }
.lvl.l5 { border:4px solid var(--u4); }
.lvl.l6 { border:6px solid var(--u6); animation:lvl-flash 1.6s ease-in-out infinite; }
.lvl-lab { justify-self:start; font-size:.72rem; font-weight:800; line-height:1; letter-spacing:.05em; text-transform:uppercase; padding:4px 7px; border-radius:5px; white-space:nowrap; }
.lvl.l1 .lvl-lab, .lvl-lab.l1 { color:var(--u1); background:var(--u1-soft); }
.lvl.l2 .lvl-lab, .lvl-lab.l2 { color:var(--u2-text); background:var(--u2-soft); }
.lvl.l3 .lvl-lab, .lvl-lab.l3 { color:var(--u3-text); background:var(--u3-soft); }
.lvl.l4 .lvl-lab, .lvl-lab.l4, .lvl.l5 .lvl-lab, .lvl-lab.l5 { color:var(--u4-text); background:var(--u4-soft); }
.lvl.l6 .lvl-lab, .lvl-lab.l6 { color:#fff; background:var(--u6); }
.lvl-t { font-weight:650; font-size:1rem; line-height:1.3; }
.lvl-m { color:var(--muted); font-size:.875rem; }
@keyframes lvl-flash { 0%,100% { border-color:var(--u6); box-shadow:0 0 0 0 rgba(176,20,26,0); } 50% { border-color:#f0a3a3; box-shadow:0 0 0 4px rgba(176,20,26,.18); } }
@media (prefers-reduced-motion: reduce) { .lvl.l6 { animation:none; } }   /* the thick border and the solid red label still say it */
/* count pills: the quick overview at the top of a page (replaces the number tiles). Level pills use the same colours as the cards. */
.cps { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.cp { font:inherit; display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1.5px solid var(--border); color:var(--ink); border-radius:999px; padding:6px 13px; min-height:40px; font-size:.875rem; font-weight:600; white-space:nowrap; cursor:pointer; }
.cp b { font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }
.cp.on { background:var(--accent-soft); border-color:var(--accent); }
.cp.l1 { border-color:var(--u1); color:var(--u1); } .cp.l2 { border-color:var(--u2); color:var(--u2-text); }
.cp.l3 { border:3px solid var(--u3); color:var(--u3-text); } .cp.l4 { border-color:var(--u4); color:var(--u4-text); }
.cp.l5 { border:3px solid var(--u4); color:var(--u4-text); } .cp.l6 { background:var(--u6); border-color:var(--u6); color:#fff; }
.cp-sep { align-self:center; width:1px; height:22px; background:var(--border); }
/* a level label leading a list row (Home alerts, clash lines, "to chase" lines) */
.line > .lvl-lab, .row > .lvl-lab { flex:none; align-self:flex-start; margin-right:10px; }
.cp { text-decoration:none; }
.site-tabs .more-toggle { font:inherit; font-size:.86rem; font-weight:700; color:var(--muted); background:none; border:0; border-bottom:3px solid transparent; padding:9px 12px; min-height:40px; cursor:pointer; flex:none; }
/* emoji are gone from the pages; any icon slot that is now empty takes no space */
.ico:empty, .e:empty, .emoji:empty, .ic:empty, .big:empty { display:none; }
/* quieter pills: the week at a glance under the urgency counts */
.cp.soft { border-color:transparent; background:#eef1f5; min-height:34px; padding:4px 12px; font-size:.84rem; font-weight:600; color:var(--muted); } .cp.soft b { font-size:.92rem; color:var(--ink); }
.cp.l4, .cp.l5 { background:#fff; }
/* the details fold inside a task pill */
.vdet { margin-top:10px; } .vdet summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:.9rem; min-height:32px; display:flex; align-items:center; } .vdet .q, .vdet .trail { font-size:.88rem; color:var(--muted); line-height:1.5; margin-top:6px; } .vdet .q b { color:var(--ink); }