@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* ADL Electrical — Hours Check
   One stylesheet for the whole application. Colours are CSS variables, so a
   module can restyle the interface by overriding them, without touching this
   file: add modules/<name>/assets/theme.css and enqueue it from the module. */

:root{
  /* Ink and ground. The deep indigo is the heading colour throughout, which is
     what gives the interface its settled, un-shouty feel. */
  --ink:#303972; --ink-2:#4b5480; --ink-3:#a098ae;
  --ground:#e6ebee; --surface:#ffffff; --surface-2:#f7f8fb; --surface-3:#ebebf9;
  --line:#e7e9f2; --line-2:#d8dbe8;
  /* The one colour that means "this is the action" */
  --accent:#4d44b5; --accent-2:#635ac9; --accent-soft:#ebebf9; --accent-line:#c9c5ea;
  --rail-bg:#303972; --rail-ink:#c6c9e2; --rail-ink-2:#8f96bd; --rail-hover:#3a4488;
  --ok:#1eba62; --ok-soft:#ddfaea; --ok-line:#a6e8c4;
  --warn:#e09600; --warn-soft:#fffaee; --warn-line:#f3d99a;
  --bad:#fd5353; --bad-soft:#ffeaea; --bad-line:#f9bcbc;
  --coral:#fb7d5b; --coral-soft:#ffeee9;
  --none:#a098ae; --none-soft:#f2f2f6; --none-line:#dedce6;
  /* a fixed, CVD-safe categorical set for charts with several bars — one
     colour per row so a list of days/projects/people reads at a glance */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  --series-5:#e87ba4; --series-6:#008300; --series-7:#4a3aa7; --series-8:#e34948;
  --shadow:0 1px 2px rgba(48,57,114,.04), 0 8px 24px -12px rgba(48,57,114,.18);
  --r:10px;
  --f-ui:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-num:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--f-ui);font-size:14px;line-height:1.5}
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--ink);font-weight:600;letter-spacing:-.01em}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.muted{color:var(--ink-3)}
.spacer{margin-left:auto}
.inline{display:inline}
.req{color:var(--bad)}
.hint{color:var(--ink-3);font-size:12px;margin:4px 0 0}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.rail{background:var(--rail-bg);color:var(--rail-ink);display:flex;flex-direction:column;gap:20px;
      padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.mark{width:34px;height:34px;border-radius:9px;background:var(--accent);
      color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.brand b{font-size:16px;font-weight:700;display:block;line-height:1.15;color:#fff}
.brand span{color:var(--rail-ink-2);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.navgroup{display:flex;flex-direction:column;gap:3px}
.navlabel{color:var(--rail-ink-2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:0 10px 8px;font-weight:700}
/* a section of the menu can be folded away */
button.navlabel{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;border-radius:6px}
button.navlabel:hover{color:#fff}
button.navlabel:focus-visible{outline:2px solid var(--rail-ink-2);outline-offset:2px}
.navcaret{margin-left:auto;font-size:11px;transition:transform .15s}
.navgroup.folded .navcaret{transform:rotate(-90deg)}
.navgroup.folded .navitems{display:none}
.navitems{display:flex;flex-direction:column;gap:3px}
@media (prefers-reduced-motion:reduce){.navcaret{transition:none}}
.nav{border-radius:8px;color:var(--rail-ink);text-decoration:none;display:flex;align-items:center;gap:11px;
     padding:9px 11px;font-size:13.5px;font-weight:500}
.nav:hover{background:var(--rail-hover);color:#fff}
.nav[aria-current="page"]{background:linear-gradient(100deg,var(--accent),var(--accent-2));color:#fff;font-weight:600}
.nav .ic{width:17px;height:17px;flex:none}
.nav .count{margin-left:auto;background:#fff;color:var(--accent);border-radius:20px;font-size:11px;font-weight:700;
            padding:1px 7px;font-family:var(--f-num)}
.navfold>summary{border-radius:8px}
.nav .count-disputes{background:#ffe0e6;color:#9f1239}
.nav .count-questions{background:#fef3c7;color:#92400e}
.nav .count-clock{background:#dbeafe;color:#1e40af}
.navfold>summary.nav-with-counts{flex-wrap:wrap;row-gap:6px}
.navcounts{display:flex;flex-basis:100%;order:2;gap:5px;padding-left:28px}
.navcounts .count{margin-left:0}
.navfold>summary .fold{margin-left:auto;display:inline-flex;color:var(--rail-ink-2);transition:transform .15s}
.navfold[open]>summary{background:var(--rail-hover);color:#fff}
.navfold[open]>summary .fold{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.navfold>summary .fold{transition:none}}
.navsub{display:flex;flex-direction:column;gap:2px;padding:2px 0 2px 26px}
.navsub .nav{padding:7px 11px;font-size:13px}
.railfoot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:12px 10px 2px;
          color:var(--rail-ink-2);font-size:11px;line-height:1.45}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
        flex-wrap:wrap;padding:11px 24px;position:sticky;top:0;z-index:20}
.page-title{font-weight:700;font-size:16px}
.who{display:flex;align-items:center;gap:10px;line-height:1.25;min-width:0}
.who .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-2));
         color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.who b{font-size:14px;display:block}
.who span{color:var(--ink-3);font-size:11.5px}
.iconbtn{background:var(--surface-2);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;
         display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.iconbtn:hover{color:var(--accent);border-color:var(--accent-line)}
.iconbtn .ic{width:17px;height:17px}
.content{padding:24px;display:flex;flex-direction:column;gap:18px;flex:1}

/* ---------- bits ---------- */
.seg{display:flex;background:var(--surface-3);border-radius:8px;padding:2px;gap:2px}
.seg .segbtn,.seg button{background:none;border:0;border-radius:6px;color:var(--ink-2);cursor:pointer;
      font-size:12.5px;padding:5px 11px;font-weight:500;text-decoration:none;display:inline-block}
.seg .segbtn.on,.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600}
.btn{background:var(--surface);border:1px solid var(--line-2);border-radius:8px;color:var(--ink);cursor:pointer;
     font-size:13px;font-weight:500;padding:7px 13px;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.pri:hover{background:#413a9a;border-color:#413a9a}
.btn.danger{color:var(--bad);border-color:var(--bad-line)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn .ic{width:15px;height:15px}

select,input[type=date],input[type=text],input[type=number],input[type=password],input[type=email],input[type=time],input[type=file],textarea{
  background:var(--surface);border:1px solid var(--line-2);border-radius:7px;padding:7px 9px;font-size:13px;max-width:100%}
textarea{width:100%;resize:vertical;font-family:var(--f-ui)}
.field{display:flex;flex-direction:column;gap:4px}
.field>label{color:var(--ink-3);font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.reason-field{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;padding:10px 13px}
.reason-field>label{color:var(--accent)}
/* the pull-down of reasons, for an administrator who may pick instead of type */
.reason-field>select.reasonpick{margin-bottom:6px;font-size:13px}

/* Putting a row of the list right in the cells it is read in. The boxes sit
   flat in the table until they are used, so a page of forty rows still reads
   as a table rather than as a wall of form controls.

   Width is the thing to watch here. Every box added to a row takes space from
   the columns somebody is actually reading, so each one is given a width that
   fits what goes in it — four digits, a time, a job — rather than being left
   to size itself to the longest project name on the list. A closed pull-down
   only has to be wide enough to recognise the job; the full name is there when
   it opens. */
table.editing td{padding:5px 7px}
/* Headings are the widest thing in several of these columns: set in capitals
   with letter-spacing and never allowed to wrap, "Clock machine" alone was
   holding a column open at 128px for a four-digit number. Once they wrap, the
   column is as wide as its figures and the table fits the screen. */
/* The headings are set in capitals and several are one long word, so they are
   allowed to wrap and, where a single word still will not fit, to break. Two
   short lines of heading cost nothing; a heading clipped to "DIFFEREN" looks
   like a fault. */
table.editing th,table.editing th.num{
  padding-left:7px;padding-right:7px;white-space:normal;overflow-wrap:anywhere;
  line-height:1.2;font-size:9.5px;letter-spacing:.04em;vertical-align:bottom;
}
table.editing th a{white-space:normal;overflow-wrap:anywhere}
/* short headings are never worth breaking — DAY down one letter per line
   is worse than any amount of saved width */
table.editing th{word-break:normal;hyphens:none}
table.editing th:nth-child(-n+2){overflow-wrap:normal}
table.editing td.statuscell{white-space:normal}
table.editing td.statuscell .pill{margin-bottom:2px}
/* The columns are given their widths by the colgroup, so the boxes can simply
   fill the cell they are in: no circular sizing, nothing squashed to nothing,
   and the table is exactly as wide as the screen. */
table.editing{table-layout:fixed}
table.editing td,table.editing th{overflow:hidden;text-overflow:ellipsis}
table.editing select.sm,
table.editing input.sm{
  font-size:12.5px;padding:4px 5px;border:1px solid transparent;
  background:transparent;border-radius:6px;width:100%;max-width:100%;min-width:0;
}
table.editing input.time{font-variant-numeric:tabular-nums;text-align:left}
table.editing input.num{text-align:right}
/* a name too long for its column trails off rather than pushing everything
   along — the whole of it is one click away on the day page */
table.editing td a,table.editing td .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%;vertical-align:bottom}
table.editing select.sm:hover,table.editing input.sm:hover{border-color:var(--line-2)}
table.editing select.sm:focus,table.editing input.sm:focus{
  border-color:var(--accent);background:var(--surface);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* the two action columns carry one control each and no heading */
td.tight,th.tight{padding-left:5px;padding-right:5px}

.rowedit{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;min-width:0}
/* the tick keeps its size; the pull-down takes whatever is left of the column */
.rowedit .btn.tick{flex:none}
.rowedit select[name=reason]{flex:1 1 auto;min-width:0;width:auto;font-size:12px;padding:4px 5px}
/* a tick, not the word Save — it is on every row */
.rowedit .btn.tick{padding:4px 6px}
.rowedit .btn.tick .ic{width:14px;height:14px}
/* the box that opens when the reason is not on the list */
.rowedit input.reasonother{
  width:140px;font-size:12px;padding:4px 6px;
  border:1px solid var(--accent);border-radius:7px;background:var(--surface);
}
@media (max-width:900px){
  .rowedit{flex-wrap:wrap}
  .rowedit select[name=reason],.rowedit input.reasonother{max-width:100%;width:100%}
}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.formrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.panel>header{border-bottom:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel>header h2{font-size:15px;font-weight:700}
.panel .body{padding:18px}
.filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:13px 18px;background:var(--surface);
         border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.filters label{color:var(--ink-3);font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:3px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.boardtabs .chip{font-size:12.5px;padding:5px 12px;color:var(--ink-2);text-decoration:none}
.boardtabs .chip:hover{border-color:var(--accent-line)}
.boardtabs .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:20px;font-size:11.5px;padding:2px 9px;
      color:var(--ink-2);font-family:var(--f-num)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;
      display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow)}
.tile .k{color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.tile .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* a long amount (€7,595,454.63) shrinks to fit its tile rather than running out of it */
.tile{min-width:0;container-type:inline-size}
.tile .v{white-space:nowrap;font-size:clamp(15px,12.5cqi,26px)}
.tile .k,.tile .s{overflow-wrap:anywhere}
/* a row of tiles that stays one row on a wide screen (the finance board) */
@media (min-width:900px){
  .tiles.onerow{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:10px}
  .tiles.onerow .tile{padding:12px 13px}
  .tiles.onerow .tile .k{font-size:10px;letter-spacing:.04em}
  .tiles.onerow .tile .s{font-size:11px}
}
.tile .s{color:var(--ink-3);font-size:12px}
.tile.kpi{background:linear-gradient(125deg,var(--accent),var(--accent-2));border-color:transparent}
.tile.kpi .k,.tile.kpi .s{color:rgba(255,255,255,.8)} .tile.kpi .v{color:#fff}
.tile.ok{background:var(--ok-soft);border-color:var(--ok-line)} .tile.ok .v,.tile.ok .k{color:var(--ok)}
.tile.warn{background:var(--warn-soft);border-color:var(--warn-line)} .tile.warn .v,.tile.warn .k{color:var(--warn)}
.tile.bad{background:var(--bad-soft);border-color:var(--bad-line)} .tile.bad .v,.tile.bad .k{color:var(--bad)}

/* dashboard: flow every widget's tiles into one dense grid instead of a
   full-width row per widget, where a couple of tiles stretch into squares */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,190px));gap:12px}
.dash-grid .tile{height:100%}
.dash-grid>.tiles{display:contents}
.dash-grid>.panel,.dash-grid>.grid2{grid-column:1/-1}
.dash-grid .tile{padding:13px 15px;gap:2px}
.dash-grid .tile .v{font-size:clamp(14px,11.5cqi,22px)}
@media (max-width:560px){.dash-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}

.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{color:var(--ink-3);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-align:left;text-transform:uppercase;
   padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
td{border-bottom:1px solid var(--line);padding:9px 12px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.code{font-family:var(--f-num);font-size:12px}
tr.row:hover td{background:var(--surface-2)}
td.stripe{border-left:3px solid transparent;padding-left:11px}
tr.t-ok td.stripe{border-left-color:var(--ok)}
tr.t-warn td.stripe{border-left-color:var(--warn)}
tr.t-bad td.stripe{border-left-color:var(--bad)}
tr.t-none td.stripe{border-left-color:var(--none)}
.delta.pos{color:var(--bad);font-weight:600}
.delta.neg{color:var(--accent);font-weight:600}
.delta.zero{color:var(--ink-3)}
/* settled: the two figures still differ, but it is agreed and no longer counted */
.delta.settled{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}

.pill{border-radius:20px;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
      padding:2px 9px;white-space:nowrap;border:1px solid}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.p-ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.p-warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.p-bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.p-none{background:var(--none-soft);border-color:var(--none-line);color:var(--none)}
.p-acc{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}
.legend i.k-ok{background:var(--ok)} .legend i.k-warn{background:var(--warn)}
.legend i.k-bad{background:var(--bad)} .legend i.k-none{background:var(--none)}
.note{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);
      border-radius:0 8px 8px 0;padding:10px 13px;font-size:12.5px;color:var(--ink-2)}
.dropzone{position:relative;border:2px dashed var(--line);border-radius:12px;padding:26px 16px;text-align:center;background:var(--surface-2);transition:border-color .15s}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone label{pointer-events:none;display:block}
.pvcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:14px;padding:16px}
.pvcard{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.pvhead{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.pvfigs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pvfigs>div{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border-radius:8px;padding:8px 10px}
.pvfigs .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.pvform{display:flex;flex-direction:column;gap:10px}
.pvform select,.pvform textarea{width:100%}
tr.hl td{background:var(--accent-soft)}
span.gain{color:var(--ok);font-weight:600}
span.loss{color:var(--bad);font-weight:600}
dialog.formdialog{border:0;border-radius:14px;padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.formdialog::backdrop{background:rgba(15,18,40,.45)}
dialog.formdialog header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
dialog.formdialog header h2{font-size:16px;margin:0}
dialog.formdialog > form{padding:16px 18px 18px}
.note.warn{background:var(--warn-soft);border-color:var(--warn-line);border-left-color:var(--warn);color:var(--ink);font-size:13px;display:flex;flex-direction:column;gap:4px}
.empty{color:var(--ink-3);font-size:13px;padding:26px;text-align:center}
.flash{border-radius:9px;padding:10px 14px;font-size:13px;border:1px solid}
.flash-ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.flash-warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.flash-bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}

.calc{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.calc .r{display:flex;justify-content:space-between;gap:12px;padding:7px 13px;border-bottom:1px solid var(--line);font-size:13px}
.calc .r:last-child{border-bottom:0}
.calc .r.tot{background:var(--surface-3);font-weight:700}
.calc .r>span:last-child{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.calc .r.rule{color:var(--warn);font-size:12px}

.thread{display:flex;flex-direction:column;gap:10px}
.msg{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.msg.admin{background:var(--accent-soft);border-color:var(--accent-line)}
.msg .m-h{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.msg .m-h b{font-size:12.5px}
.msg .m-h time{color:var(--ink-3);font-size:11px;font-family:var(--f-num);margin-left:auto}
.msg p{margin:0;font-size:13px;white-space:pre-wrap}
.attach{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line-2);
        border-radius:6px;font-size:11.5px;margin-top:7px;padding:3px 8px;color:var(--ink-2);text-decoration:none}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:120px 1fr 66px;align-items:center;gap:10px;font-size:12.5px}
.bar .track{display:block;background:var(--surface-3);border-radius:5px;height:10px;overflow:hidden}
.bar .fill{display:block;background:linear-gradient(90deg,var(--accent),var(--accent-2));height:100%;border-radius:5px;min-width:3px}
.bar .val{font-family:var(--f-num);text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.bar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* a bar's length and colour, as classes rather than an inline style — the
   page's CSP has no 'unsafe-inline' for style-src, so a style="" attribute
   is silently dropped by the browser */
.bar .fill.w0{width:0%} .bar .fill.w5{width:5%} .bar .fill.w10{width:10%}
.bar .fill.w15{width:15%} .bar .fill.w20{width:20%} .bar .fill.w25{width:25%}
.bar .fill.w30{width:30%} .bar .fill.w35{width:35%} .bar .fill.w40{width:40%}
.bar .fill.w45{width:45%} .bar .fill.w50{width:50%} .bar .fill.w55{width:55%}
.bar .fill.w60{width:60%} .bar .fill.w65{width:65%} .bar .fill.w70{width:70%}
.bar .fill.w75{width:75%} .bar .fill.w80{width:80%} .bar .fill.w85{width:85%}
.bar .fill.w90{width:90%} .bar .fill.w95{width:95%} .bar .fill.w100{width:100%}
.bar .fill.series-1{background:var(--series-1)} .bar .fill.series-2{background:var(--series-2)}
.bar .fill.series-3{background:var(--series-3)} .bar .fill.series-4{background:var(--series-4)}
.bar .fill.series-5{background:var(--series-5)} .bar .fill.series-6{background:var(--series-6)}
.bar .fill.series-7{background:var(--series-7)} .bar .fill.series-8{background:var(--series-8)}
.more-link{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;color:var(--accent);text-decoration:none}
.more-link:hover{text-decoration:underline}

/* sign-in and print */
.centered{min-height:100vh;display:grid;place-items:center;padding:24px}

/* ---------- signing in ----------
   A single card on a quiet ground: a coloured band at the top to say whose
   site this is, then the form, then one button that is obviously the way in. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      box-shadow:0 18px 50px -22px rgba(48,57,114,.35), 0 2px 6px rgba(48,57,114,.05);
      width:min(430px,100%);display:flex;flex-direction:column;gap:16px;
      padding:30px 32px 32px;overflow:hidden;position:relative}

.card .band{margin:-30px -32px 4px;height:132px;position:relative;overflow:hidden;
      background:linear-gradient(135deg,#453cab 0%,var(--accent) 45%,#6a61cc 100%)}
/* soft shapes rather than a picture: it scales, it never pixelates, and it
   carries the palette without competing with the form underneath */
.card .band:before,.card .band:after{content:"";position:absolute;border-radius:50%}
.card .band:before{width:250px;height:250px;right:-92px;top:-118px;background:rgba(255,255,255,.09)}
.card .band:after{width:132px;height:132px;left:-38px;bottom:-72px;background:var(--coral);opacity:.42}
.card .band .bm{position:absolute;left:32px;bottom:22px;display:flex;align-items:center;gap:11px;color:#fff}
.card .band .bm .mark{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);
      width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
      font-weight:700;font-size:13px;letter-spacing:.02em}
.card .band .bm b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.card .band .bm span{font-size:11.5px;opacity:.8}

.card h1{font-size:22px;font-weight:600;margin-top:6px}
.card .field>label{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink)}
.card .field input{height:52px;border-radius:var(--r);border-color:var(--line);
      padding:0 16px;font-size:14px;background:var(--surface-2)}
.card .field input:focus{background:var(--surface);border-color:var(--accent-line)}
.card .lead{color:var(--ink-3);font-size:13.5px;line-height:1.55;margin:-8px 0 2px}
.card .field label .req{color:var(--coral)}
.card .btn.pri{height:52px;border-radius:var(--r);font-size:14.5px;font-weight:600;justify-content:center}
.card .foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.printbar{display:flex;gap:10px;align-items:center;padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.sheet{max-width:1000px;margin:0 auto;padding:22px;background:#fff}
.sheet h1{font-size:20px} .sheet .meta{color:var(--ink-3);font-size:12px;margin-bottom:14px}

/* the drawer's own controls, shown on a phone only */
.navtoggle,.navclose{display:none}
.navbackdrop{display:none}
@media (max-width:880px){
  .shell{grid-template-columns:1fr}
  /* the menu is a drawer that slides in from the left, opened by the ☰ in the top bar */
  .rail{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(300px,86vw);z-index:60;
        transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.35);
        padding:14px 12px calc(18px + env(safe-area-inset-bottom))}
  body.nav-open .rail{transform:none}
  body.nav-open{overflow:hidden}
  .navbackdrop{display:block;position:fixed;inset:0;background:rgba(15,18,40,.5);z-index:55;
               opacity:0;pointer-events:none;transition:opacity .2s ease}
  body.nav-open .navbackdrop{opacity:1;pointer-events:auto}
  .navclose{display:inline-flex;margin-left:auto;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
  .nav{padding:10px 12px}           /* a finger, not a mouse */
  .navtoggle{display:inline-flex}
  .content{padding:14px}
  .topbar{padding:8px 12px;flex-wrap:nowrap;gap:8px}
  .topbar .spacer{display:none}
  .page-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
  .who > div{display:none}          /* the initials are enough here */
  .langseg .segbtn{padding:4px 8px}
  .bar{grid-template-columns:96px 1fr 58px}
}
@media (max-width:880px) and (prefers-reduced-motion:reduce){.rail,.navbackdrop{transition:none}}


/* ---------- sortable headings ---------- */
th.sortable{padding:0}
th.sortable a{display:block;padding:9px 12px;color:inherit;text-decoration:none;white-space:nowrap}
th.sortable a:hover{color:var(--accent);background:var(--surface-3)}
th.sortable.num a{text-align:right}
th.sortable.on a{color:var(--accent)}
th.sortable .arrow{font-size:9px;margin-left:5px;opacity:.9}

/* ---------- status filter bar ---------- */
.statusbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spill{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
       border-radius:22px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-2);
       text-decoration:none;box-shadow:var(--shadow)}
.spill:hover{border-color:var(--line-2);color:var(--ink)}
.spill b{font-family:var(--f-num);font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.spill .dot{width:7px;height:7px;border-radius:50%;background:var(--none);flex:none}
.spill.t-ok .dot{background:var(--ok)}
.spill.t-warn .dot{background:var(--warn)}
.spill.t-bad .dot{background:var(--bad)}
.spill.on{background:var(--accent);border-color:transparent;color:#fff}
.spill.on b{color:rgba(255,255,255,.85)}
.spill.on .dot{background:#fff}
details>summary{cursor:pointer;list-style:none;display:inline-flex}
details>summary::-webkit-details-marker{display:none}

/* ---------- settle a difference ---------- */
.matchbox summary{white-space:nowrap}
.matchform{display:flex;flex-direction:column;gap:10px;padding:12px 0;min-width:320px}
.matchform .btn b{font-family:var(--f-num);font-weight:600;color:var(--accent)}
.switches{display:flex;flex-direction:column;gap:10px}
.switch{display:flex;gap:10px;align-items:flex-start;font-size:13px;
        border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:var(--surface-2);cursor:pointer}
.switch:hover{border-color:var(--line-2)}
.switch input{margin-top:3px}
.switch .muted{font-size:12px}

/* ---------- picking many people from a long list ---------- */
.picklist{display:flex;flex-direction:column;max-height:340px;overflow-y:auto;
          border:1px solid var(--line);border-radius:9px;padding:4px}
.pickrow{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:6px;
         font-size:13px;cursor:pointer}
.pickrow:hover{background:var(--surface-2)}
/* a plain class selector ties with the browser's own [hidden] rule on
   specificity, and an author rule wins that tie — so hiding a row by setting
   .hidden in JS would otherwise do nothing without this */
.pickrow[hidden]{display:none}

/* ---------- clickable tiles ---------- */
a.tile{text-decoration:none;color:inherit;position:relative}
a.tile.clickable:hover{border-color:var(--accent-line);transform:translateY(-1px);transition:transform .1s}
a.tile.kpi.clickable:hover{filter:brightness(1.05)}
.tilego{font-size:11px;font-weight:700;color:var(--accent);margin-top:6px}
.tile.kpi .tilego{color:rgba(255,255,255,.85)}
.tile.bad .tilego{color:var(--bad)} .tile.warn .tilego{color:var(--warn)} .tile.ok .tilego{color:var(--ok)}
form.matchform.busy{opacity:.6}

/* ---------- a panel folded away until it is wanted ---------- */
details.foldable>summary{border-bottom:1px solid transparent;padding:14px 18px;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;list-style:none;user-select:none}
details.foldable>summary::-webkit-details-marker{display:none}
details.foldable>summary:hover{background:var(--surface-2)}
details.foldable>summary h2{font-size:15px;font-weight:700}
details.foldable[open]>summary{border-bottom-color:var(--line)}
details.foldable>summary .fold{display:inline-flex;color:var(--ink-3);transition:transform .15s}
details.foldable[open]>summary .fold{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){details.foldable>summary .fold{transition:none}}

/* the panel for putting a mistake right: quiet until it is opened */
details.foldable.danger>summary h2{color:var(--bad)}
details.foldable.danger[open]{border-color:var(--bad-line)}

/* a panel that matters here but is not an alarm */
.panel.attention-soft{border-color:var(--warn-line)}
.panel.attention-soft>header h2{color:var(--warn)}

/* ---------- something is waiting for an answer ---------- */
.panel.attention{border-color:var(--bad-line);box-shadow:0 0 0 3px var(--bad-soft), var(--shadow)}
.panel.attention>header h2{display:flex;align-items:center;gap:9px;color:var(--bad)}
.blip{width:9px;height:9px;border-radius:50%;background:var(--bad);flex:none;animation:blip 1.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--bad-soft)}50%{opacity:.45;box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.blip{animation:none}}
.qcard{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-2)}
.qcard .m-h{display:flex;gap:8px;align-items:baseline;margin-bottom:5px}
.qcard .m-h time{color:var(--ink-3);font-size:11px;font-family:var(--f-num);margin-left:auto}
.qcard p{margin:0;font-size:13.5px;white-space:pre-wrap}
.askbox summary{white-space:nowrap}

/* ---------- claims: a new variation, from a button beside the new application ---------- */
.varbox{position:relative}
.varbox summary{white-space:nowrap}
.varform{position:absolute;left:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;gap:10px;
  width:min(380px,calc(100vw - 32px));padding:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow)}
.askform{display:flex;flex-direction:column;gap:8px;padding:10px 0;min-width:320px}

/* ---------- an admin typing somebody's new password in ---------- */
.pwbox summary{white-space:nowrap}
.pwform{display:flex;flex-direction:column;gap:10px;padding:12px 0;min-width:280px}

/* ---------- maintenance: a checked list of what is and is not done ---------- */
.stack{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.ticks{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.ticks li{display:flex;gap:10px;align-items:baseline;font-size:13px;padding:7px 11px;
  border:1px solid var(--line);border-left-width:3px;border-radius:8px;background:var(--surface-2)}
.ticks li b{font-size:11px;text-transform:uppercase;letter-spacing:.04em;flex:none;min-width:92px}
.ticks li .code{color:var(--ink-2)}
.ticks li.t-ok{border-left-color:var(--ok)} .ticks li.t-ok b{color:var(--ok)}
.ticks li.t-warn{border-left-color:var(--warn)} .ticks li.t-warn b{color:var(--warn)}
.ticks li.t-bad{border-left-color:var(--bad)} .ticks li.t-bad b{color:var(--bad)}
.ticks li.t-none{border-left-color:var(--line)}
@media (max-width:640px){.ticks li{flex-direction:column;gap:2px}.ticks li b{min-width:0}}

/* the clocked figure was not taken exactly as punched — hovering says why */
.adj{
  margin-left:3px;font-size:11px;color:var(--ink-3);cursor:help;
  text-decoration:none;border-bottom:1px dotted var(--ink-3);
}

/* the short message after a row is saved in place */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;max-width:calc(100vw - 32px);
  padding:10px 16px;border-radius:8px;border:1px solid var(--ok-line, #9bd3ae);background:var(--ok-soft, #e8f6ec);
  color:var(--ok, #1d6b3a);font-size:13.5px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.toast-warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.toast-bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}

/* overtime by day: three small figures side by side, each fitting its third */
.otsplit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0 2px}
.otsplit>span{display:flex;flex-direction:column;min-width:0}
.otsplit b{font-size:clamp(13px,7cqi,19px);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.otsplit i{font-style:normal;font-size:10.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the "no rate on file" warning opens into the list of who */
details.flash.unrated>summary{cursor:pointer;list-style:none}
details.flash.unrated>summary::-webkit-details-marker{display:none}
details.flash.unrated>summary b{margin-left:6px;text-decoration:underline}
details.flash.unrated[open]>summary{margin-bottom:10px}
details.flash.unrated table{background:var(--surface);border-radius:8px;color:var(--ink)}

/* search-and-pick: the employee filter */
.empick{position:relative;min-width:240px}
.empick .pickq{width:100%}
.empick-list[hidden]{display:none}
.empick-list{display:block;position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);max-height:320px;overflow:auto;margin:0;padding:4px;
  list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.empick-list li{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empick-list li.on,.empick-list li[data-v]:hover{background:var(--accent-soft, rgba(80,70,200,.1))}
.empick-list li[aria-selected=true]{font-weight:700}
.empick-list .empick-none{color:var(--ink-3);cursor:default}
@media (max-width:640px){.empick{min-width:0;width:100%}}
.payroll-pick{max-width:340px;width:100%}
.google-steps{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:4px}
.google-steps code{word-break:break-all}
.mailpick td,.mailpick th{padding-top:6px;padding-bottom:6px}
.mailpick input[type=checkbox]{width:18px;height:18px}

/* the running total under an application being edited, always in sight */
.claimbar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:14px 0 6px;
  padding:10px 16px;background:var(--surface);border:1px solid var(--accent-line);border-radius:12px;box-shadow:0 -6px 20px rgba(0,0,0,.10)}
.claimbar .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}
.claimbar b{font-size:18px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.claimbar b{font-size:15px}}

/* housing: a card per house, who lives there and what is free */
.houseboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}
.housecard{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:inherit;transition:border-color .1s}
.housecard:hover{border-color:var(--accent-line)}
.housecard.off{opacity:.6}
.housecard .hc-head{display:flex;flex-direction:column;gap:2px}
.housecard .hc-beds{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.housecard .hc-people{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px}
.costbox{border:1px dashed var(--accent-line);border-radius:10px;padding:10px 12px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.stackform{display:flex;flex-direction:column;gap:12px}
.resform .field.grow,.panel .field.grow{flex:1;min-width:220px}
.panel .field.small{max-width:130px}
.tile .v.small{font-size:16px;white-space:normal}
.nopad{padding-top:0;margin-top:-6px}
td.actions{white-space:nowrap;text-align:right}
td.actions .inline{display:inline-flex;gap:6px;align-items:center;margin-left:6px}
/* a number plate, and the vehicle forms */
.plate{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.06em;font-size:13px;
  padding:2px 8px;border:1.5px solid #1b1b1b;border-radius:4px;background:#fff;color:#111;white-space:nowrap}
.plateinput{text-transform:uppercase;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.05em}
.countrypick .chip{font-size:14px;padding:8px 12px;cursor:pointer}
.formdialog.wide{max-width:860px;width:calc(100vw - 32px)}
/* a part of a form shown for one choice only stays hidden, whatever its layout */
[data-show-if][hidden]{display:none!important}

/* housing: the badge that opens a house's tenants, and the tick-to-add list */
.pillbtn{border:0;background:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.pillbtn .pillgo{font-weight:800;color:var(--accent);font-size:14px}
.housecard a.hc-head{text-decoration:none;color:inherit}
.housecard a.hc-head:hover b{color:var(--accent)}
.subhead{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0 0 8px}
.tenantlist{display:flex;flex-direction:column;gap:6px}
.tenantrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:6px 0;border-bottom:1px solid var(--line)}
.tickchosen{display:flex;flex-direction:column;gap:4px;min-height:28px;margin-bottom:10px;padding:8px 10px;border:1px dashed var(--accent-line);border-radius:10px}
.ticklist{max-height:300px;overflow:auto;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.tickrow{display:flex;align-items:center;gap:10px;padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
.tickrow:hover{background:var(--accent-soft)}
.tickrow input{width:18px;height:18px;flex:none}
.tickrow .hint{margin-left:auto}
.tickrow[hidden]{display:none}
.tickchosen .tickrow{border-bottom:0;padding:3px 0;font-weight:600}
.formdialog > div.body{padding:16px 18px 4px}
.ticklist [data-tickpick-start],.ticklist [data-tickpick-nomatch]{padding:9px 10px;margin:0}
.kindtag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent);vertical-align:2px}
.housenotes{white-space:normal;line-height:1.55;font-size:13px}
.costnotes summary h2{color:var(--accent)}
a.tile.clickable.on{outline:2px solid var(--accent);outline-offset:2px}
.onlybar{margin:10px 0 0}
.maplink{font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none;align-self:flex-start}
.maplink:hover{text-decoration:underline}
.landlordgroup .lg-head{display:flex;flex-direction:column;gap:2px}
.bigtick{width:20px;height:20px}
.rentamount{width:110px}
.ticklist.small{max-height:180px}
.note.grow{flex:1}
.deletebox{border-top:1px solid var(--line);padding-top:12px!important;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.roomform input{width:110px}
.roomgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.roomcard{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.roomcard.empty{border-style:dashed;opacity:.75}
.btn.linkish{border:0;background:none;color:var(--bad);padding:2px 4px;text-decoration:underline}
.note.incomplete ul{margin:6px 0 8px 18px;columns:2;column-gap:24px}
@media (max-width:640px){.note.incomplete ul{columns:1}}

/* ---- the app on a phone ---- */
.tabbar{display:none}
.installbar{display:flex;align-items:center;gap:12px;margin:12px 16px 0;padding:10px 12px;border:1px solid var(--accent-line);border-radius:14px;background:var(--accent-soft)}
.installbar[hidden]{display:none}
.installbar img{border-radius:10px;flex:none}
.installbar .ib-text{flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px}
.offline{text-align:center;max-width:420px;margin:12vh auto;padding:0 20px}
.offline img{border-radius:22px}
@media (max-width:880px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);border-top:1px solid var(--line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(0,0,0,.06)}
  .tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;background:none;
    color:var(--ink-3);text-decoration:none;font:inherit;font-size:10.5px;font-weight:600;border-radius:10px;min-width:0}
  .tabbar .tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar .tab .ic,.tabbar .tab svg{width:21px;height:21px}
  .tabbar .tab.on{color:var(--accent);background:var(--accent-soft)}
  .main{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .claimbar{bottom:calc(64px + env(safe-area-inset-bottom))}
  .topbar{padding-top:env(safe-area-inset-top)}
  input,select,textarea{font-size:16px}  /* no zooming in on a phone when a box is tapped */
}
@media (display-mode: standalone){ .topbar{padding-top:max(8px, env(safe-area-inset-top))} }
@media (max-width:880px){ body.nav-open .tabbar{display:none} }

.installtop{display:inline-flex;align-items:center;gap:6px}
.installtop[hidden]{display:none}
@media (max-width:880px){ .installtop span{display:none} .installtop{padding:6px 8px} }

.resetoffer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-line);font-size:13px}
.resetoffer span{flex:1;min-width:180px}

/* ---- roles & access ---- */
.rolegrid th,.rolegrid td{white-space:nowrap}
.rolegrid td:first-child{white-space:normal;min-width:220px}
.rolegrid tr.rg-sec td{background:var(--accent-soft);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.rolegrid select{min-width:120px}
.rolegrid select.lv-none{color:var(--bad, #b42318)}
.rolegrid select.lv-view{color:var(--warn, #b54708)}

/* ---- help & how-to ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.helpform{display:flex;gap:8px}
.helpform input[type=search]{flex:1;min-width:0;font-size:15px;padding:11px 14px;border-radius:12px}
.helpform .btn{display:inline-flex;align-items:center;gap:6px}
.helpanswer{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--accent-soft);border:1px solid var(--accent-line)}
.helpanswer[hidden],.helpanswer [hidden]{display:none!important}
.ha-wait{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:13px}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--accent-line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ha-text{margin:0 0 8px;font-weight:600}
.ha-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ha-note{margin:10px 0 0}
.kb-steps{margin:6px 0 10px;padding-left:22px;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.kb-article{border:1px solid var(--line);border-radius:12px;padding:0 14px;margin-bottom:8px;background:var(--surface)}
.kb-article summary{cursor:pointer;padding:11px 0;font-weight:600;font-size:14px}
.kb-body{padding-bottom:12px}
.kb-sec{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:16px 0 8px}
.kb-sec:first-child{margin-top:0}
.topask{display:flex;align-items:center;gap:6px;padding:0 10px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-3);min-width:200px}
.topask input{border:0;background:none;outline:none;font:inherit;font-size:13px;width:100%;padding:0;min-width:0}
.topask .ic{width:16px;height:16px;flex:none}
.topask-btn{display:none}
@media (max-width:1100px){ .topask{min-width:150px} }
@media (max-width:880px){ .topask{display:none} .topask-btn{display:inline-flex} }
/* the top bar keeps to one line: the ask box gives way first, then the name */
.topbar{flex-wrap:nowrap}
.topask{flex:0 1 240px;min-width:110px}
.who>div{min-width:0}
.who b,.who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;display:block}
@media (max-width:1250px){ .who>div{display:none} }
/* ---- staff documents ---- */
.docs-table td{vertical-align:top}
.docs-table tr.doc-older td{opacity:.65}
.doc-edit summary,.doc-add summary{list-style:none;cursor:pointer;display:inline-flex}
.doc-edit summary::-webkit-details-marker,.doc-add summary::-webkit-details-marker{display:none}
.doc-edit-form{display:flex;flex-direction:column;gap:8px;margin-top:8px;min-width:240px}
.docs-expiring summary.docs-exp-sum{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;flex-wrap:wrap}
/* ---- staff dashboard ---- */
.staffgroup .body{padding-top:4px}
.certbar{height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.certbar span{display:block;height:100%;background:var(--accent);border-radius:6px}
.dashlink{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:12px 16px;border-radius:var(--r);background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--accent);font-weight:600;text-decoration:none}
.dashlink .ic{width:18px;height:18px}
/* documents: one line each */
.docsbody{display:flex;flex-direction:column;gap:12px}
.docgroup-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:4px}
.doclist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.docrow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-top:1px solid var(--line);min-height:40px}
.docrow:first-child{border-top:0}
.docrow.older{opacity:.6}
.docmain{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.doctitle{font-weight:600;font-size:13.5px}
.docnum{font-size:12px;color:var(--ink-3)}
.docfiles{display:inline-flex;gap:5px;flex-wrap:wrap}
.docfile{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px;border-radius:8px;background:var(--accent-soft);
  color:var(--accent);text-decoration:none;font-weight:600}
.docfile .ic{width:13px;height:13px}
.docfile:hover{background:var(--accent);color:#fff}
.docexp{display:flex;align-items:center;gap:4px;white-space:nowrap}
.docq{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--warn-soft, #fff4e5);color:#b54708;font-size:11px;font-weight:700;cursor:help}
.iconbtn.sm{width:28px;height:28px;font-size:13px}
.docolder{margin-top:6px}
.docolder summary{cursor:pointer;font-size:12.5px;padding:2px 0}
/* the viewer */
dialog.docviewer{width:min(1100px,96vw);height:min(92vh,1000px);padding:0;border:0;border-radius:16px;background:var(--surface);display:none;flex-direction:column;overflow:hidden}
dialog.docviewer[open]{display:flex}
dialog.docviewer::backdrop{background:rgba(15,15,35,.6)}
.docviewer header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.docviewer header b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dv-zoom{display:inline-flex;align-items:center;gap:4px}
.dv-zoom[hidden]{display:none}
.dv-stage{flex:1;overflow:auto;background:#2b2b35;display:flex;align-items:flex-start;justify-content:center}
.dv-stage img{display:block;margin:auto;max-width:none;transition:transform .15s;transform-origin:center}
.dv-stage img.fit{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto;align-self:center}
.dv-stage iframe{width:100%;height:100%;border:0;background:#fff}
@media (max-width:600px){ .docviewer header .btn.sm[data-dv-open]{display:none} }

/* ---- progress bars (dashboards) ---- */
.pbars{display:flex;flex-direction:column}
.pbrow{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(120px,2fr) 70px minmax(0,1.6fr);align-items:center;gap:12px;
  padding:9px 4px;border-top:1px solid var(--line);color:inherit;text-decoration:none;font-size:13.5px}
.pbrow:first-child{border-top:0}
.pblabel{font-weight:600;color:inherit}
a.pblabel{text-decoration:none}
a.pblabel:hover{color:var(--accent);text-decoration:underline}
.pbtrack{display:block;height:10px;border-radius:6px;overflow:hidden;background:#f3c9c4}
.pbtrack.gap-warn{background:#f8e0b0}
.pbtrack.gap-none,.pbtrack.share,.pbtrack.empty{background:var(--surface-3, #eceaf3)}
.pbfill{display:block;height:100%;background:#1d9e75;border-radius:6px 0 0 6px}
.pbtrack.share .pbfill{background:var(--accent)}
.pbnums{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.pbnums b{color:var(--ink);font-size:14px}
.pblinks{display:flex;flex-wrap:wrap;gap:5px}
.pbchip{font-size:12px;font-weight:600;padding:2px 8px;border-radius:8px;text-decoration:none;white-space:normal;line-height:1.35}
.pbchip.t-bad{background:#fde8e6;color:#a32d2d}
.pbchip.t-warn{background:#fdf0d8;color:#854f0b}
.pbchip.t-none{background:var(--surface-3, #eceaf3);color:var(--ink-3)}
a.pbchip:hover{filter:brightness(.95)}
@media (max-width:760px){ .pbrow{grid-template-columns:1fr 64px;grid-template-areas:"l n" "t t" "k k";row-gap:6px}
  .pblabel{grid-area:l} .pbnums{grid-area:n} .pbtrack{grid-area:t} .pblinks{grid-area:k} }
.dashsec{margin-bottom:16px}
.dashsec header h2 a{color:inherit;text-decoration:none}
.dashsec header h2 a:hover{text-decoration:underline}
.dashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:16px;align-items:start}
.dashgrid .dashsec{margin:0}
.dashlinks{display:flex;flex-wrap:wrap;gap:8px}
.pb-w0{width:0%}
.pb-w5{width:5%} .pb-w10{width:10%} .pb-w15{width:15%} .pb-w20{width:20%} .pb-w25{width:25%}
.pb-w30{width:30%} .pb-w35{width:35%} .pb-w40{width:40%} .pb-w45{width:45%} .pb-w50{width:50%}
.pb-w55{width:55%} .pb-w60{width:60%} .pb-w65{width:65%} .pb-w70{width:70%} .pb-w75{width:75%}
.pb-w80{width:80%} .pb-w85{width:85%} .pb-w90{width:90%} .pb-w95{width:95%} .pb-w100{width:100%}

.hourscharts{margin-bottom:16px}
.hourscharts>summary{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;list-style:none}
.hourscharts>summary::-webkit-details-marker{display:none}
.hourscharts>summary .ic{width:16px;height:16px}
.hourscharts-body{padding:0 16px 16px}
/* ---- dashboard boxes (ring charts) ---- */
.dboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.dbox{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0}
.dbox.s-bad{border-color:#f3c9c4}
.dbox.s-warn{border-color:#f3dcae}
.dbox-label{font-weight:600;font-size:13px;color:inherit;line-height:1.3}
a.dbox-label{text-decoration:none}
a.dbox-label:hover{color:var(--accent);text-decoration:underline}
.dbox-body{display:flex;align-items:center;gap:12px}
.ring{flex:none}
.ring-track{stroke:#f3c9c4}
.ring-track.t-warn{stroke:#f6dfae}
.ring-track.t-none,.ring-track.t-empty{stroke:var(--surface-3, #eceaf3)}
.ring-fill{stroke:#1d9e75}
.dbox.s-all .ring-fill{stroke:#1d9e75}
.ring-pct{font-size:14px;font-weight:700;fill:var(--ink, #1f1d3a)}
.dbox-nums{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.dbox-nums b{font-size:22px;letter-spacing:-.02em}
.dbox-nums span{color:var(--ink-3)}
.dbox-value{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dbox-bar{display:block;height:8px;border-radius:6px;overflow:hidden;background:var(--surface-3, #eceaf3)}
.dbox-bar .pbfill{background:var(--accent);border-radius:6px}
.dbox-links{display:flex;flex-wrap:wrap;gap:5px}
.dashsec .body .dboxes{margin:0}
@media (max-width:600px){
  .dboxes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dbox{padding:10px;gap:6px}
  .dbox-body{flex-direction:column;align-items:flex-start;gap:6px}
  .ring{width:52px;height:52px}
  .dbox-nums b,.dbox-value{font-size:18px}
  .dbox-label{font-size:12.5px}
}

/* Utilities. The CSP has no 'unsafe-inline' for styles, so templates cannot
   use style="…" attributes; these classes stand in for them. They carry
   !important because an inline style beat every rule in this file, and the
   templates were written against that. Margin sides come after .m0 so that
   "m0 mb8" reads as margin:0 0 8px. */
.vstack{display:flex!important;flex-direction:column!important}
.hstack{display:flex!important}
.g8{gap:8px!important} .g10{gap:10px!important} .g12{gap:12px!important}
.g14{gap:14px!important} .g16{gap:16px!important} .g18{gap:18px!important}
.ai-c{align-items:center!important} .ai-end{align-items:flex-end!important}
.jc-end{justify-content:flex-end!important} .fwrap{flex-wrap:wrap!important}
.flex1{flex:1!important} .flex2{flex:2!important}
.minw0{min-width:0!important} .minw160{min-width:160px!important} .minw180{min-width:180px!important}
.minw200{min-width:200px!important} .minw220{min-width:220px!important} .minw240{min-width:240px!important}
.minw260{min-width:260px!important} .minw300{min-width:300px!important}
.maxw110{max-width:110px!important} .maxw120{max-width:120px!important} .maxw220{max-width:220px!important}
.maxw320{max-width:320px!important} .maxw420{max-width:420px!important}
.w90px{width:90px!important}
.w12p{width:12%!important} .w14p{width:14%!important} .w16p{width:16%!important} .w30p{width:30%!important}
.span-all{grid-column:1/-1!important}
.m0{margin:0!important}
.mt0{margin-top:0!important} .mt2{margin-top:2px!important} .mt8{margin-top:8px!important}
.mt10{margin-top:10px!important} .mt12{margin-top:12px!important} .mt18{margin-top:18px!important}
.mtn8{margin-top:-8px!important}
.mb4{margin-bottom:4px!important} .mb6{margin-bottom:6px!important} .mb8{margin-bottom:8px!important}
.mb10{margin-bottom:10px!important} .mb12{margin-bottom:12px!important} .mb14{margin-bottom:14px!important}
.pt0{padding-top:0!important} .pb0{padding-bottom:0!important} .pl18{padding-left:18px!important}
.py12{padding-top:12px!important;padding-bottom:12px!important}
.pad-12-18{padding:12px 18px!important} .pad-0-16-14{padding:0 16px 14px!important}
.bt{border-top:1px solid var(--line)!important}
.fs10h{font-size:10.5px!important} .fs11{font-size:11px!important} .fs11h{font-size:11.5px!important}
.fs12{font-size:12px!important} .fs12h{font-size:12.5px!important} .fs13{font-size:13px!important}
.fs20{font-size:20px!important}
.lh17{line-height:1.7!important}
.ta-r{text-align:right!important} .ta-c{text-align:center!important}
.break-all{word-break:break-all!important}
.c-accent{color:var(--accent)!important}
.plainlink{text-decoration:none!important;color:inherit!important}
.eyebrow{font-size:11px!important;letter-spacing:.07em!important;text-transform:uppercase!important;font-weight:700!important}
.label-plain{text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important}
.codeinput{font-family:var(--f-num)!important;font-size:20px!important;letter-spacing:.3em!important}
/* editable hours table: column widths in whole percent, set from the colgroup */
col.cw1{width:1%} col.cw2{width:2%} col.cw3{width:3%} col.cw4{width:4%} col.cw5{width:5%}
col.cw6{width:6%} col.cw7{width:7%} col.cw8{width:8%} col.cw9{width:9%} col.cw10{width:10%}
col.cw11{width:11%} col.cw12{width:12%} col.cw13{width:13%} col.cw14{width:14%} col.cw15{width:15%}
col.cw16{width:16%} col.cw17{width:17%} col.cw18{width:18%} col.cw19{width:19%} col.cw20{width:20%}
/* ---- main dashboard: one box per module ---- */
.modboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-items:stretch}
.modbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.modbox-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.modbox-h .muted{font-size:12px}
.modbox-title{font-weight:700;font-size:15px;color:inherit;text-decoration:none}
.modbox-title:hover{color:var(--accent)}
.modbox-main{display:flex;align-items:center;gap:14px}
.modbox-fig{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.modbox-fig .muted{font-size:15px;font-weight:600}
.modbox-lab{color:var(--ink-3);font-size:12.5px;margin-top:2px}
.modbox-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.modbox-lines li{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.modbox-lines li span{color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modbox-lines li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.modbox-lines li b .muted{font-weight:500}
.modbox-more{margin-top:auto;align-self:flex-start;font-weight:600;font-size:13px;color:var(--accent);text-decoration:none;padding-top:4px}
.modbox-more:hover{text-decoration:underline}
.areadash-top{margin-bottom:12px}
@media (max-width:600px){ .modboxes{grid-template-columns:1fr;gap:12px} .modbox-fig{font-size:22px} }

.modbox-period select{font-size:12px;padding:3px 24px 3px 8px;height:auto;min-height:0;border-radius:8px;width:auto}
.modbox-dates{font-size:12px;margin-top:-8px}
/* ---- bank reconciliation ---- */
.m0{margin:0}
.nowrap{white-space:nowrap}
.bank-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.bank-upload{flex:1;margin:0}
.bank-upload>summary,.bank-sum{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;list-style:none;flex-wrap:wrap}
.bank-upload>summary::-webkit-details-marker,.bank-sum::-webkit-details-marker{display:none}
.bank-upload>summary .ic{width:16px;height:16px}
.bank-upload-form,.bank-stack{display:flex;flex-direction:column;gap:10px}
.bank-money{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:14px}
.bank-money .modbox{padding:12px 16px;gap:4px}
.bank-in{color:#1d7f5f}
.bank-out{color:#a32d2d}
.bank-status{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bank-status .chip{text-decoration:none}
.bank-status .chip.on{background:var(--accent);color:#fff}
.bank-status .chip.st-bad:not(.on){background:#fde8e6;color:#a32d2d}
.bank-status .chip.st-warn:not(.on){background:#fdf0d8;color:#854f0b}
.bank-small{font-size:12px}
.bank-small .ic{width:12px;height:12px;vertical-align:-1px}
.bank-table td{vertical-align:top}
.bank-party{max-width:380px}
.bank-head-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.bank-amount{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bank-head-status{text-align:right}
.bank-kv{margin-bottom:10px}
.bank-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start;margin-bottom:16px}
.bank-cols>.panel{margin:0}
.bank-match{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.bank-match.s-confirmed{border-color:#9fd8c3;background:#f2fbf7}
.bank-match.s-rejected{opacity:.6}
.bank-match-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.bank-match-h a{color:inherit}
.bank-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.bank-actions .reasonbox,.bank-actions .field{flex:1;min-width:200px}
.bank-file{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--line);padding-bottom:10px}
.bank-link>summary{list-style:none;cursor:pointer;display:inline-flex}
.bank-link>summary::-webkit-details-marker{display:none}
.bank-accounts{display:flex;flex-direction:column;gap:12px}
@media (max-width:700px){ .bank-top{flex-direction:column} .bank-head-status{text-align:left} }

/* ---- receipts inbox ---- */
.rc-progress .body{display:flex;flex-direction:column;gap:8px}
.rc-check{font-size:12.5px;padding:4px 8px;border-radius:8px;margin-top:4px;line-height:1.4}
.rc-check.t-bad{background:#fde8e6;color:#8a2424}
.rc-check.t-warn{background:#fdf0d8;color:#7a4709}
.rc-check.t-info{background:var(--accent-soft);color:var(--accent)}
.rc-check.t-ok{background:#e6f6ef;color:#16664c}
.rc-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.rc-preview{position:sticky;top:76px;margin:0}
.rc-frame{display:block;width:100%;height:72vh;border:0;background:#fff}
.rc-img{display:block;max-width:100%;max-height:72vh;margin:0 auto;cursor:zoom-in}
.rc-side{display:flex;flex-direction:column;gap:16px}
.rc-side>.panel{margin:0}
.rc-act>summary{cursor:pointer;padding:6px 0}
@media (max-width:980px){ .rc-layout{grid-template-columns:1fr} .rc-preview{position:static} .rc-frame{height:60vh} }
.rc-checks{min-width:300px;max-width:440px}

.bank-method{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:7px;margin-left:4px;background:var(--surface-3, #eceaf3);color:var(--ink-3);vertical-align:1px}
.bank-method.m-card{background:#e7eefc;color:#2d4f9a}
.bank-method.m-fee{background:#fdf0d8;color:#854f0b}

/* the viewer's bar under a receipt opened from a bank suggestion: confirm or turn it down without leaving the list */
.dv-decide{border-top:1px solid var(--line);padding:10px 14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.dv-decide[hidden],.dv-decide form[hidden]{display:none}
.dv-decide-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.dv-decide-form .reason-field{flex:1 1 280px;margin:0}
.dv-decide-btns{display:flex;gap:8px}
.docviewer header [data-dv-details][hidden]{display:none}

/* ---- claims: the evidence behind an application ---- */
.ev-body{display:flex;flex-direction:column;gap:14px}
.ev-part-h{font-size:13.5px;margin:0 0 6px}
.ev-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px}
.ev-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 10px;border-top:1px solid var(--line)}
.ev-row:first-child{border-top:0}
.ev-row .docfile{font-weight:600;word-break:break-word}
.ev-note{font-size:13px}
.ev-del{margin-left:auto}
.ev-del[open]{flex-basis:100%}
.ev-upload{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--line);padding-top:14px}
.mail-ev{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.mail-ev label{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;cursor:pointer}

.rc-tools-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.rc-tools label.check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px}

.rc-strong{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(240px,1.5fr) auto;gap:12px;align-items:end;padding:12px;border-radius:12px;background:var(--acc-soft, #eef0ff)}
.rc-strong .reason-field{margin:0}
@media (max-width:760px){ .rc-strong{grid-template-columns:1fr} }
.rc-cover ul{padding-left:18px;font-size:13.5px;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rc-pay{margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--surface-2, #f5f4fa);display:flex;flex-direction:column;gap:3px}
.rc-pay a{font-weight:600}
.rc-decide[open]{margin-top:4px}

.sup-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rc-sup{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}

/* ---- vehicles: the trackers' days ---- */
.gps-cron{white-space:pre-wrap;word-break:break-all;background:var(--surface-2, #f5f4fa);padding:10px;border-radius:8px;font-size:12.5px;margin:0}
.gps-days{display:flex;flex-direction:column}
.gps-day{border-top:1px solid var(--line)}
.gps-day summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 16px;cursor:pointer;list-style:none}
.gps-day summary::-webkit-details-marker{display:none}
.gps-day.still summary{opacity:.55}
.gps-km{font-weight:700;min-width:80px}
.gps-detail{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:16px;padding:4px 16px 16px}
@media (max-width:700px){ .gps-detail{grid-template-columns:1fr} }
.gps-sketch{width:100%;height:auto;background:var(--surface-2, #f5f4fa);border-radius:10px;color:var(--accent, #4b44c8)}
.gps-stop-dot{fill:#e0702c;stroke:#fff;stroke-width:1.5}
.gps-stop-n{font-size:10px;font-weight:700;fill:var(--ink-2, #444)}
.gps-stops{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:13.5px}

.vh-group{font-size:15px;margin:18px 2px 8px}

/* ---- dashboard: headline figures, the action queue, the areas folded below ---- */
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.dash-kpi{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:inherit;text-decoration:none}
.dash-kpi:hover{border-color:var(--accent, #4b44c8)}
.dash-kpi .k{font-size:13px;font-weight:600;color:var(--ink-2, #444)}
.dash-kpi .v{font-size:22px;font-weight:700}
.dash-kpi .s{font-size:12.5px;color:var(--ink-3, #666)}
.dq-list{list-style:none;margin:0;padding:0}
.dq-item{display:grid;grid-template-columns:auto minmax(110px,180px) 1fr auto;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line)}
.dq-item:first-child{border-top:0}
.dq-area{font-size:13px;color:var(--ink-2, #444);font-weight:600}
.dq-text{font-weight:600;color:inherit}
@media (max-width:640px){ .dq-item{grid-template-columns:auto 1fr;}.dq-item .dq-area{grid-column:2}.dq-item .dq-text{grid-column:1 / -1}.dq-item .btn{display:none} }
.dash-areas{margin-top:16px}
.dash-areas > summary{cursor:pointer;padding:12px 4px;font-size:15px;list-style:none}
.dash-areas > summary::before{content:'▸ ';color:var(--ink-3, #666)}
.dash-areas[open] > summary::before{content:'▾ '}

/* ---- a checklist as a picker (expenses' projects) ---- */
.mp-chips{display:flex;flex-wrap:wrap;gap:6px}
.mp-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:14px;background:var(--acc-soft, #eef0ff);font-size:13px;font-weight:600}
.mp-chip.none{padding:3px 10px;background:var(--surface-2, #f5f4fa);color:var(--ink-2, #444);font-weight:500}
.mp-chip button{border:0;background:transparent;font-size:16px;line-height:1;cursor:pointer;color:inherit;padding:0 4px;border-radius:10px}
.mp-chip button:hover{background:rgba(0,0,0,.08)}
.mp-on .picklist{display:none;max-height:240px}
.mp-on.mp-open .picklist{display:flex}

/* ---- settings: one section at a time, the save bar always at hand ---- */
.set-layout{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
.set-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:76px}
.set-tab{display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;background:transparent;padding:9px 12px;border-radius:9px;font:inherit;font-size:14px;cursor:pointer;color:inherit}
.set-tab:hover{background:var(--surface-2, #f5f4fa)}
.set-tab.on{background:var(--acc-soft, #eef0ff);font-weight:700}
.set-layout:not(.tabs-on) .set-nav{display:none}
.set-layout:not(.tabs-on){grid-template-columns:1fr}
.set-panes{display:flex;flex-direction:column;gap:16px;min-width:0}
.set-panes .field .hint{max-width:62ch}
.set-savebar{position:sticky;bottom:10px;z-index:5;box-shadow:0 6px 24px rgba(20,20,60,.12)}
@media (max-width:760px){ .set-layout{grid-template-columns:1fr}.set-nav{position:static;flex-direction:row;flex-wrap:wrap} }

.hv-bar{margin-top:4px}
.hv-find{max-width:320px;flex:1 1 220px}
.hv-table td{vertical-align:middle}

/* ---- reports: one compact row each ---- */
.rep-list{list-style:none;margin:0;padding:0}
.rep-row{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid var(--line)}
.rep-row:first-child{border-top:0}
.rep-row .minw0{display:flex;flex-direction:column;gap:2px}
.rep-ic{color:var(--accent);display:inline-flex}
.rep-ic .ic{width:18px;height:18px}
.rep-actions{display:flex;gap:8px;white-space:nowrap}
@media (max-width:560px){ .rep-row{grid-template-columns:22px 1fr}.rep-actions{grid-column:2} }

/* ---- readability (design review, 31/10/2026): the pale grey was too light to read (about 2.8:1 on white; now about
   4.7:1), and the labels people read all day were tiny capitals — now ordinary words at a readable size ---- */
:root{--ink-3:#736a8a}
.field>label,.filters label{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-2)}
.tile .k{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-2)}
.tiles.onerow .tile .k{font-size:12px;letter-spacing:0}
th{font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-2)}
.hint{font-size:12.5px}
.claimbar .k,.pvfigs .k{font-size:12px;letter-spacing:0;text-transform:none;font-weight:600}
@media (max-width:640px){ .dash-kpis{grid-template-columns:1fr 1fr;gap:8px}.dash-kpi{padding:10px 12px}.dash-kpi .v{font-size:16px}.dash-kpi .s{display:none} }

/* ---------- the sidebar (design proposal, 31/10/2026): deep charcoal-purple, five short items, one section open,
   the page you are on as a soft pill, the account at the bottom; folds to icons on a wide screen ---------- */
:root{--rail-bg:#221d33;--rail-ink:#e6e2f2;--rail-ink-2:#a9a2c0;--rail-hover:rgba(255,255,255,.06);--rail-pill:rgba(150,135,255,.18);--rail-accent:#a89bff}
.rail{gap:10px;padding:16px 12px}
.brand{border-bottom:0;padding:4px 6px 12px}
.brand span{letter-spacing:.02em;text-transform:none;font-size:12px}
.mark{background:linear-gradient(135deg,#6f5cf0,#8b7cf6)}
.railbtn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--rail-ink-2);cursor:pointer;flex:none}
.railbtn:hover{background:var(--rail-hover);color:#fff}
.railbtn .ic{width:18px;height:18px}
.railmini{margin-left:auto}
.navlist{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;margin-right:-6px;padding-right:6px}
.nav{font-size:14px;color:var(--rail-ink);padding:9px 12px;border-radius:10px}
.nav:hover{background:var(--rail-hover);color:#fff}
.nav[aria-current="page"]{background:var(--rail-pill);color:#fff;font-weight:600}
.nav[aria-current="page"] .ic{color:var(--rail-accent)}
.nav .ic{color:var(--rail-ink-2)}
.navsec{display:flex;flex-direction:column}
.navsec-h{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--rail-ink);
  font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-align:left}
.navsec-h:hover{background:var(--rail-hover);color:#fff}
.navsec-h .ic{width:17px;height:17px;flex:none;color:var(--rail-ink-2)}
.navsec.here>.navsec-h{color:#fff;font-weight:600}
.navsec.here>.navsec-h .ic{color:var(--rail-accent)}
.navsec-h:focus-visible,.nav:focus-visible,.railbtn:focus-visible{outline:2px solid var(--rail-accent);outline-offset:1px}
.navsec .navcaret{margin-left:auto;font-size:11px;color:var(--rail-ink-2);transition:transform .15s;transform:rotate(-90deg)}
.navsec.open .navcaret{transform:none}
.navsec .navitems{display:none;padding:2px 0 6px 14px;gap:1px}
.navsec.open .navitems{display:flex}
.navsec .navitems .nav{font-size:13.5px;padding:7px 12px}
.navsec-h .count{margin-left:auto;margin-right:4px}
.navsec-h .count + .navcaret{margin-left:0}
.nav .count,.navsec-h .count{background:rgba(255,255,255,.12);color:#fff;border-radius:20px;font-size:11px;font-weight:700;padding:1px 7px}
.count-warn{background:#f5b84a!important;color:#3d2600!important}
.navfold[open]>summary{background:transparent;color:#fff}
.navsub{padding:2px 0 2px 28px}
.navsub .nav{padding:6px 12px;font-size:13px}
.railacct{display:flex;align-items:center;gap:6px;padding:10px 4px 2px;border-top:1px solid rgba(255,255,255,.07)}
.railwho{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--rail-ink);text-decoration:none;padding:6px 8px;border-radius:10px}
.railwho:hover{background:var(--rail-hover)}
.railwho .av{width:32px;height:32px;border-radius:50%;background:#3a3354;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.railwho .navtext{display:flex;flex-direction:column;min-width:0}
.railwho b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.railwho .navtext span{font-size:12px;color:var(--rail-ink-2)}
@media (min-width:881px){ .topbar .topwho,.topbar .toplogout{display:none} }
/* folded to icons */
@media (min-width:881px){
  body.rail-mini .shell{grid-template-columns:72px 1fr}
  body.rail-mini .rail{padding:16px 10px;align-items:stretch}
  body.rail-mini .brand{flex-direction:column;gap:8px;padding:4px 0 10px}
  body.rail-mini .brand > div:not(.mark),body.rail-mini .navtext,body.rail-mini .navcaret,body.rail-mini .navsec .navitems,
  body.rail-mini .count,body.rail-mini .navcounts,body.rail-mini .fold{display:none!important}
  body.rail-mini .railmini{margin:0;transform:rotate(180deg)}
  body.rail-mini .nav,body.rail-mini .navsec-h{justify-content:center;padding:10px 0}
  body.rail-mini .railacct{flex-direction:column;padding:10px 0 2px}
  body.rail-mini .railwho{justify-content:center;padding:4px 0}
}
@media (max-width:880px){ .railmini{display:none} }

.dash-areas-h{font-size:16px;margin:22px 2px 10px}

/* ---- the menu's fold-outs: a clear chevron — pointing right when closed, down when open ---- */
.navsec .navcaret,.navfold>summary .fold{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:0;
  color:var(--rail-ink-2);transition:transform .18s ease,background .15s,color .15s;flex:none}
.navsec .navcaret{margin-left:auto;transform:rotate(-90deg)}
.navsec.open .navcaret{transform:none;color:#fff;background:rgba(255,255,255,.08)}
.navfold>summary .fold{margin-left:auto;transform:rotate(-90deg)}
.navfold[open]>summary .fold{transform:none;color:#fff;background:rgba(255,255,255,.08)}
.navsec-h:hover .navcaret,.navfold>summary:hover .fold{color:#fff}
.chev{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.navsec .navcaret,.navfold>summary .fold{transition:none}}

/* ---- vehicles: the route thumbnail, and the route on a street map in a window ---- */
.gps-mapbtn{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.gps-mapbtn:hover .gps-sketch{outline:2px solid var(--accent)}
.gps-mapbtn-label{font-size:13px;font-weight:600;color:var(--accent)}
dialog.routemap{width:min(1200px,96vw);height:min(88vh,860px);padding:0;border:0;border-radius:16px;background:var(--surface);display:none;flex-direction:column;overflow:hidden}
dialog.routemap[open]{display:flex}
dialog.routemap::backdrop{background:rgba(15,15,35,.6)}
.routemap header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.rm-body{flex:1;display:grid;grid-template-columns:1fr 260px;min-height:0}
@media (max-width:760px){ .rm-body{grid-template-columns:1fr;grid-template-rows:1fr auto}.rm-stops{max-height:160px} }
.rm-map{position:relative;overflow:hidden;background:#e8e6ef;cursor:grab;touch-action:none;user-select:none}
.rm-map.dragging{cursor:grabbing}
.rm-tiles{position:absolute;inset:0}
.rm-tiles img{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}
.rm-route{position:absolute;inset:0;pointer-events:none}
.rm-line-halo{fill:none;stroke:#fff;stroke-width:8;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.rm-line{fill:none;stroke:#5b4bdb;stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round}
.rm-route circle{stroke:#fff;stroke-width:2.5}
.rm-route text{font-size:11px;font-weight:700;fill:#fff}
.rm-start circle{fill:#1f9d55}.rm-end circle{fill:#d64545}.rm-stop circle{fill:#e0702c}
.rm-credit{position:absolute;right:6px;bottom:4px;font-size:11px;background:rgba(255,255,255,.85);padding:1px 6px;border-radius:4px}
.rm-stops{margin:0;padding:12px 14px;list-style:none;display:flex;flex-direction:column;gap:8px;overflow:auto;border-left:1px solid var(--line);font-size:13.5px}
.rm-badge{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;margin-right:4px}
.rm-badge.rm-start{background:#1f9d55}.rm-badge.rm-end{background:#d64545}.rm-badge.rm-stop{background:#e0702c}

.rm-stops li{display:block}
.rm-go{display:flex;align-items:center;gap:4px;width:100%;text-align:left;border:0;background:transparent;font:inherit;color:inherit;padding:6px 8px;border-radius:8px;cursor:pointer}
.rm-go:hover{background:var(--surface-2, #f5f4fa)}
.rm-go.on{background:var(--acc-soft, #eef0ff);font-weight:600}
.rm-stops{gap:2px}
/* a button marked hidden stays hidden (the button styles would otherwise show it) */
.btn[hidden],button[hidden]{display:none!important}

/* ---- fleet tracker ---- */
.fleet-chart{width:100%;height:150px;display:block}
.fc-bar{fill:var(--accent, #5b4bdb)}
.fc-we{fill:#e0a24c}
.fc-lab{font-size:9px;fill:var(--ink-3)}
.fleet-chart.fc-labelled{height:auto;max-height:260px}
.fc-val{font-size:10px;font-weight:600;fill:var(--ink-2, #555);pointer-events:none}
.fc-val.in{fill:#fff}
td.t-warn{color:#9a5a00;font-weight:600}

.fleet-out{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;padding:6px 16px 14px}
@media (max-width:900px){ .fleet-out{grid-template-columns:1fr} }
.fo-row{display:grid;grid-template-columns:minmax(150px,1.3fr) 1fr auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.fo-row:hover .fo-name{text-decoration:underline}
.fo-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-bar{display:block;height:9px;border-radius:5px;background:var(--surface-2, #f1eff7);overflow:hidden}
.fo-bar .pbfill{display:block;height:100%;background:#e0a24c}
.fo-val{white-space:nowrap;text-align:right}

/* a sortable table: the headings are buttons, the current order shown by an arrow */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--accent)}
th.sortable::after{content:'↕';opacity:.3;margin-left:4px;font-size:11px}
th.sortable[aria-sort="descending"]::after{content:'↓';opacity:1;color:var(--accent)}
th.sortable[aria-sort="ascending"]::after{content:'↑';opacity:1;color:var(--accent)}
.fo-sort{padding:8px 16px 0}
.fo-sort .chip{border:0;cursor:pointer;font:inherit}

.fleet-chart a{cursor:pointer}
.fc-hit{fill:transparent}
.fleet-chart a:hover .fc-bar,.fleet-chart a:hover .fc-we{opacity:.75}
.fleet-chart a:hover .fc-hit{fill:rgba(91,75,219,.08)}

/* the day's top speed on the route map */
.rm-top circle{fill:#8e24aa;stroke:#fff;stroke-width:2}
.rm-top text{fill:#fff;font-size:12px}
.rm-badge.rm-top{background:#8e24aa;color:#fff}

/* a possible duplicate: the two receipts side by side */
.rc-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.rc-cmp-file{background:var(--surface-2, #f6f5fb);min-height:200px}
.rc-cmp-file .rc-frame{height:62vh}
.rc-cmp-file .rc-img{max-height:62vh}
dd.rc-diff{background:#fff4d6;color:#7a4b00;font-weight:600;border-radius:4px;padding:0 4px}
@media (max-width:900px){ .rc-compare{grid-template-columns:1fr} .rc-cmp-file .rc-frame{height:50vh} }

/* payroll balances: owed in amber, paid over in the accent colour, a compact search box */
.tone-warn{color:var(--warn)} .tone-acc{color:var(--accent)}
.w220px{width:220px;max-width:100%}
table[data-sort-name="pb"] tfoot td{border-top:2px solid var(--line);background:var(--surface-2)}
table[data-sort-name="pb"] td:first-child{white-space:nowrap}
/* the account box stays at the foot of the menu; a long menu scrolls above it instead of running under it */
.railacct{flex:none}
.navlist::-webkit-scrollbar{width:6px}
.navlist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

/* bank review: the payment beside what it is matched to, point by point, with the document */
.bmx-cols{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:1000px){.bmx-cols{grid-template-columns:minmax(0,1fr)}}
.bmx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:12px;align-items:start}
.bmx-grid.bmx-nodoc{grid-template-columns:minmax(0,1fr)}
@media (max-width:720px){.bmx-grid{grid-template-columns:minmax(0,1fr)}}
.bmx-table{font-size:13px}
.bmx-table th:first-child{color:var(--muted);font-weight:600;white-space:nowrap}
.bmx-table td{word-break:break-word}
.bmx-row-bad td{background:#fdf0ef}
.bmx-row-near td{background:#fff8e8}
.bmx-mark{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.bmx-mark.bmx-ok{background:#dff3ea;color:#16754f}
.bmx-mark.bmx-near{background:#fdefd2;color:#8a5a00}
.bmx-mark.bmx-bad{background:#fbdcd9;color:#a8261b}
.bmx-mark.bmx-none{background:var(--line);color:var(--muted)}
.bmx-check{font-size:13px;padding:6px 10px;border-radius:8px}
.bmx-check.bmx-ok{background:#e8f6ef;color:#16754f}
.bmx-check.bmx-near{background:#fff4dc;color:#8a5a00}
.bmx-check.bmx-bad{background:#fdecea;color:#a8261b}
.bmx-check.bmx-none{background:var(--line);color:var(--muted)}
.bmx-doc{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bmx-img{display:block;max-width:100%;max-height:380px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:zoom-in}
.bmx-pdf{width:100%;height:380px;border:1px solid var(--line);border-radius:8px;background:#fff}
@media (prefers-color-scheme:dark){.bmx-row-bad td{background:rgba(220,60,50,.12)}.bmx-row-near td{background:rgba(230,170,40,.12)}}

/* bank statements: each account like the bank shows it, open lines marked */
.bst-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.bst-tab{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel,#fff);color:inherit;text-decoration:none;min-width:190px}
.bst-tab:hover{border-color:var(--acc,#5b5bd6)}
.bst-tab.on{border-color:var(--acc,#5b5bd6);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc,#5b5bd6) 25%,transparent)}
.bst-badge{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#c0392b;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.bst-filters{align-items:flex-end}
.bst-presets{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.bst-table td{vertical-align:top}
.bst-line{display:flex;flex-direction:column;gap:2px;min-width:260px;max-width:620px}
.bst-what.ok{color:#16754f}
.bst-what.sugg{color:#3c3cb0}
.bst-table tr.bst-open td{background:#fdf0ef}
.bst-table tr.bst-open td:first-child{box-shadow:inset 4px 0 0 #c0392b}
.bst-table tr.bst-sugg td{background:#f0f0fd}
.bst-table tr.bst-sugg td:first-child{box-shadow:inset 4px 0 0 #5b5bd6}
.bst-table tr.bst-part td{background:#fff6e5}
.bst-table tr.bst-part td:first-child{box-shadow:inset 4px 0 0 #d68a00}
.bst-table tr.bst-edge td{background:var(--line);font-size:13px}
@media (prefers-color-scheme:dark){.bst-table tr.bst-open td{background:rgba(192,57,43,.13)}.bst-table tr.bst-sugg td{background:rgba(91,91,214,.13)}.bst-table tr.bst-part td{background:rgba(214,138,0,.13)}}
@media (max-width:720px){.bst-tab{min-width:0;flex:1 1 45%}.bst-line{min-width:200px}}
.tile .v.fs16{font-size:18px;line-height:1.3}
.eb-banklist{gap:6px;margin-top:6px}
.vstack.g6{gap:6px}

/* portals: Operations | Accounting | HSE & Assets — shown to whoever has more than one */
.portalswitch{display:flex;gap:4px;padding:4px;margin:0 0 10px;border-radius:12px;background:rgba(255,255,255,.08)}
.portaltab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;border-radius:9px;color:inherit;text-decoration:none;font-size:11px;font-weight:600;line-height:1.15;text-align:center;opacity:.75}
.portaltab:hover{opacity:1;background:rgba(255,255,255,.08)}
.portaltab.on{opacity:1;background:#fff;color:var(--acc,#4d44b5);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.portaltab .ic{width:18px;height:18px}
.rail-mini .portalswitch{flex-direction:column}
.rail-mini .portaltab .navtext{display:none}
.asset-hire{border:1px dashed var(--line);border-radius:12px;padding:10px 12px 12px;margin:0}
.asset-hire legend{padding:0 6px}
.w120{width:120px}
.tone-bad{color:var(--bad,#c0392b)}
.w180{width:180px}

/* looking at the site as another user: always in sight, with the way back */
.viewas-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 16px;background:#fff4dc;color:#7a4b00;border-bottom:1px solid #f0d49a;font-size:13px;font-weight:600}
.viewas-bar .ic{width:16px;height:16px}
.view-as-row{padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.set-sep{display:block;height:1px;background:var(--line);margin:8px 6px}
a.set-tab{text-decoration:none}
.set-frame{margin-top:4px}
@media (max-width:820px){.set-layout.tabs-on{grid-template-columns:1fr}.set-layout.tabs-on .set-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}.set-sep{display:none}}
.chips[data-section-tabs] .chip.on{background:var(--acc,#4d44b5);color:#fff;border-color:var(--acc,#4d44b5)}
details.inline-details{display:inline-block;vertical-align:top}
details.inline-details[open]{display:block;margin-top:6px}
tr.row-late td{background:#fdf0ef}
@media (prefers-color-scheme:dark){tr.row-late td{background:rgba(192,57,43,.13)}}

/* sent emails: the text as it went */
.mail-body { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 14px; line-height: 1.5; background: var(--bg-soft, rgba(127,127,127,.06)); border: 1px solid var(--line, rgba(127,127,127,.2)); border-radius: 8px; padding: 14px 16px; margin: 0; max-height: 60vh; overflow: auto; }
tr.sel td { background: rgba(127,127,127,.08); }