/* ==================================================================
   SPTC Passenger Care - demo interface

   Three looks, one stylesheet:
     hcis  - the default. Matches the HCIS product the client already
             sells, so the two read as one platform. Navy rail, near
             white page, white cards, coloured icon chips.
     dark  - the original control-room look. Dense and high contrast.
     light - the same, for a projector that washes darks out.

   Two colour ideas are kept apart on purpose. --brand is the
   customer's identity and can be changed by anybody at any time.
   --amber, --coral, --teal and the seven section colours MEAN
   something (past target, a warning clock, Operations) and must not
   move when somebody changes the house colour.
   ================================================================== */

@font-face{font-family:Archivo;src:url(fonts/archivo-var.woff2) format('woff2');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');
  font-weight:500;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/ibm-plex-mono-600.woff2) format('woff2');
  font-weight:600;font-display:swap}

/* --brand is the one colour the customer's own identity drives. It is kept
   separate from --amber deliberately: amber also MEANS something here (P2,
   a warning clock, work in progress) and must not move when somebody
   changes the house colour. --brand-ink is the text that sits on top of it. */

:root{
  --bg:#070d16; --bg-2:#0a121d;
  --panel:#0d1826; --panel-2:#122232; --panel-3:#16293b;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.15);
  --txt:#e8eff7; --dim:#8ba0b6; --faint:#5d738c;
  --amber:#f0a828; --teal:#2fd6a6; --coral:#ff6058; --blue:#4aa3ff;
  --ocean:#0d8ab4; --violet:#9d8bf5;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.7);
  --r:3px;
  --brand:#f0a828; --brand-ink:#151007;
  /* the rail carries its own palette so a dark sidebar can sit beside a
     light page without every label in it inheriting the page's text colour */
  --rail-bg:#0a121d; --rail-txt:#e8eff7; --rail-dim:#8ba0b6; --rail-faint:#5d738c;
  --rail-line:rgba(255,255,255,.085); --rail-line-2:rgba(255,255,255,.15);
  --rail-on:#122232; --rail-hover:#0d1826;
  --brand-head:transparent; --brand-head-ink:var(--txt);
}
:root[data-theme=light]{
  --bg:#eeeae1; --bg-2:#e7e2d7;
  --panel:#fffdf9; --panel-2:#f6f2ea; --panel-3:#efe9de;
  --line:rgba(20,30,40,.12); --line-2:rgba(20,30,40,.22);
  --txt:#14202c; --dim:#5b6c7d; --faint:#8494a3;
  --amber:#b57108; --teal:#0d8f6c; --coral:#d13c33; --blue:#1d6fd0;
  --ocean:#0a6f91; --violet:#6a51d8;
  --shadow:0 1px 2px rgba(30,40,50,.08),0 10px 26px -14px rgba(30,40,50,.35);
  --brand:#b57108; --brand-ink:#fffdf9;
  --rail-bg:#e7e2d7; --rail-txt:#14202c; --rail-dim:#5b6c7d; --rail-faint:#8494a3;
  --rail-line:rgba(20,30,40,.12); --rail-line-2:rgba(20,30,40,.22);
  --rail-on:#f6f2ea; --rail-hover:#fffdf9;
  --brand-head:transparent; --brand-head-ink:var(--txt);
}

/* ------------------------------------------------------------------
   HCIS house style — the default.
   The client asked for this demonstration to look like the other
   product he sells, so the two read as one platform rather than two
   unrelated purchases. Measured off his own HCIS build rather than
   guessed: navy #1d2a45 rail, #f8fafb page, white cards, blue #2563eb
   primary, soft shadows, 10px corners.
   ------------------------------------------------------------------ */
:root[data-theme=hcis]{
  --bg:#f8fafb; --bg-2:#ffffff;
  --panel:#ffffff; --panel-2:#f8fafb; --panel-3:#eef1f5;
  --line:#e9edf2; --line-2:#dbe1e9;
  --txt:#1f2937; --dim:#6b7280; --faint:#9aa3af;
  --amber:#ef750c; --teal:#16a34a; --coral:#e0384a; --blue:#208ad2;
  --ocean:#0da1ad; --violet:#8f47f0;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px -8px rgba(16,24,40,.12);
  --r:10px;
  --brand:#2d3283; --brand-ink:#ffffff;   /* SPTC blue, read out of their logo */
  --rail-bg:#1d2a45; --rail-txt:#f2f6fb; --rail-dim:#a7b3c9; --rail-faint:#78859e;
  --rail-line:rgba(255,255,255,.09); --rail-line-2:rgba(255,255,255,.16);
  --rail-on:#313c56; --rail-hover:#26324c;
  --brand-head:var(--brand); --brand-head-ink:var(--brand-ink);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:Archivo,'Helvetica Neue',Helvetica,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
/* faint grain so large dark panels are not flat */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
:root[data-theme=light] body::after{opacity:.85}

.mono{font-family:'Plex Mono',ui-monospace,Menlo,Consolas,monospace}
.lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* ---------------- shell ---------------- */
#app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

.rail{
  background:var(--rail-bg);border-right:1px solid var(--rail-line);
  color:var(--rail-txt);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{padding:16px 16px;border-bottom:1px solid var(--rail-line);position:relative;
  display:flex;align-items:center;gap:11px;
  background:var(--brand-head);color:var(--brand-head-ink)}
.brand::after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--brand),transparent)}
/* SPTC's mark is a full-colour roundel on white. It needs a white disc
   under it or the navy and the blue band eat the black lettering. */
.brand .bmark{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.25)}
.brand .bmark img{width:36px;height:36px;display:block;object-fit:contain}
.brand .btxt{min-width:0}
.brand b{display:block;font-size:15px;font-weight:700;letter-spacing:-.015em}
.brand span{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rail-faint);font-weight:600;margin-top:2px}

/* on the blue header band the mark and the strapline are white, not brand */
:root[data-theme=hcis] .brand::after{background:none}
:root[data-theme=hcis] .brand span{color:color-mix(in srgb,currentColor 70%,transparent)}

.nav{padding:12px 10px;flex:1;overflow:auto}
.nav .lbl{padding:12px 10px 6px;color:var(--rail-faint)}
.nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
  text-decoration:none;color:var(--rail-dim);font-weight:500;font-size:13.5px;
  border-left:2px solid transparent;transition:.14s;
}
.nav a:hover{color:var(--rail-txt);background:var(--rail-hover)}
.nav a.on{color:var(--rail-txt);background:var(--rail-on);border-left-color:var(--brand)}
.nav a .ct{margin-left:auto;font-size:11px;color:var(--rail-faint);font-family:'Plex Mono',monospace}
.nav a.on .ct{color:var(--rail-txt)}
.ico{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}

/* HCIS marks the current page with a soft pill, not an edge rule */
:root[data-theme=hcis] .nav a{border-left-width:0;padding-left:12px}
:root[data-theme=hcis] .nav a.on{font-weight:600}

.railfoot{padding:12px;border-top:1px solid var(--rail-line);font-size:11px;color:var(--rail-faint)}
.railfoot button{
  width:100%;background:transparent;border:1px solid var(--rail-line-2);color:var(--rail-dim);
  padding:7px;border-radius:var(--r);cursor:pointer;font-size:11.5px;transition:.14s
}
.railfoot button:hover{border-color:var(--coral);color:var(--coral)}

/* --- brand colour picker ---
   Here because SPTC's own colours are not known yet. One click recolours
   the whole interface, so the question "will it be in our colours" gets
   answered in the meeting instead of in a follow-up email. */
.brandpick{margin-bottom:11px}
.brandpick .lbl{color:var(--rail-faint);margin-bottom:6px}
.brandpick .sw{display:flex;gap:6px}
.brandpick .sw button{
  width:0;flex:1;height:18px;padding:0;border-radius:5px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:var(--b);transition:.14s}
:root[data-theme=light] .brandpick .sw button{border-color:rgba(20,30,40,.2)}
.brandpick .sw button:hover{transform:translateY(-1px)}
.brandpick .sw button.on{box-shadow:0 0 0 2px var(--rail-bg),0 0 0 3.5px var(--b)}

/* ---------------- top bar ---------------- */
.top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:0 22px;height:56px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)
}
.top h1{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em}
.top .sub{color:var(--faint);font-size:12px}
.spacer{flex:1}
.live{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 70%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 60%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.seg{display:flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.seg button{background:transparent;border:0;padding:6px 11px;font-size:12px;color:var(--dim);
  cursor:pointer;transition:.14s}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--panel-2);color:var(--txt)}

.who{display:flex;align-items:center;gap:9px;padding-left:14px;border-left:1px solid var(--line)}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;
  font-weight:700;letter-spacing:.02em;background:var(--panel-3);color:var(--txt);
  border:1px solid var(--line-2)}
.who .nm{font-size:12.5px;font-weight:600;line-height:1.15}
.who .tt{font-size:10.5px;color:var(--faint)}

.iconbtn{background:transparent;border:1px solid var(--line-2);color:var(--dim);width:30px;height:30px;
  border-radius:var(--r);display:grid;place-items:center;cursor:pointer;transition:.14s}
.iconbtn:hover{color:var(--brand);border-color:var(--brand)}

/* ---------------- content ---------------- */
main{padding:24px 22px 60px;max-width:1500px}
.pagehead{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.pagehead h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.03em}
.pagehead p{margin:2px 0 0;color:var(--dim);font-size:13px}

.grid{display:grid;gap:14px}
.k4{grid-template-columns:repeat(4,1fr)}
.k3{grid-template-columns:repeat(3,1fr)}
.k2{grid-template-columns:1fr 1fr}
.c23{grid-template-columns:1.35fr 1fr}

/* NO overflow:hidden here. It makes the card the containing block for the
   sticky table head, which then parks itself 56px down from the card's own
   top edge and sits on top of the first row - covering the most urgent case
   in the queue and swallowing the click. The KPI tiles clip themselves. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);position:relative}
.card>header{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.card>header h3{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.card>header .lbl{margin-left:auto}
.card .body{padding:16px}

/* KPI tiles */
.kpi{padding:15px 16px 14px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--k,var(--amber))}
.kpi .n{font-size:31px;font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:6px 0 3px;
  font-family:'Plex Mono',monospace}
.kpi .d{font-size:11.5px;color:var(--dim)}
.kpi .trend{position:absolute;right:14px;top:14px;font-size:11px;font-weight:600;
  font-family:'Plex Mono',monospace}
.up{color:var(--coral)} .down{color:var(--teal)} .flat{color:var(--faint)}

/* ---------------- pills, chips ---------------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2.5px 8px;border-radius:2px;
  font-size:10.5px;font-weight:600;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap}
.pill i{width:5px;height:5px;border-radius:1px;background:currentColor;flex:none}
.s-New{color:var(--blue);background:color-mix(in srgb,var(--blue) 13%,transparent);border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
.s-Assigned{color:var(--violet);background:color-mix(in srgb,var(--violet) 13%,transparent);border-color:color-mix(in srgb,var(--violet) 30%,transparent)}
.s-Inprogress{color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.s-Awaitingpassenger{color:var(--dim);background:color-mix(in srgb,var(--dim) 12%,transparent);border-color:var(--line-2)}
.s-Resolved{color:var(--teal);background:color-mix(in srgb,var(--teal) 13%,transparent);border-color:color-mix(in srgb,var(--teal) 30%,transparent)}
.s-Closed{color:var(--faint);background:color-mix(in srgb,var(--faint) 10%,transparent);border-color:var(--line-2)}

.pri{font-family:'Plex Mono',monospace;font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:2px;border:1px solid}
.p-P1{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 45%,transparent);background:color-mix(in srgb,var(--coral) 11%,transparent)}
.p-P2{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 11%,transparent)}
.p-P3{color:var(--dim);border-color:var(--line-2)}
.p-NA{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 40%,transparent);background:color-mix(in srgb,var(--teal) 10%,transparent)}

.route{font-family:'Plex Mono',monospace;font-weight:600;font-size:11.5px;padding:2px 6px;
  border-radius:2px;background:var(--panel-3);border:1px solid var(--line-2)}

/* ---------------- SLA ---------------- */
.sla{display:flex;flex-direction:column;gap:3px;min-width:96px}
.sla .t{font-family:'Plex Mono',monospace;font-size:11.5px;font-weight:600}
.sla .bar{height:3px;background:var(--panel-3);border-radius:2px;overflow:hidden}
.sla .bar i{display:block;height:100%;border-radius:2px;transition:width .6s ease}
.ok .t{color:var(--teal)}      .ok .bar i{background:var(--teal)}
.warn .t{color:var(--amber)}   .warn .bar i{background:var(--amber)}
.bad .t{color:var(--coral)}    .bad .bar i{background:var(--coral);animation:blink 1.9s infinite}
.done .t{color:var(--faint)}   .done .bar i{background:var(--faint)}
@keyframes blink{50%{opacity:.42}}

/* ---------------- table ---------------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--line);
  position:sticky;top:56px;background:var(--panel);z-index:5}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
/* The top bar and the table head are both sticky, so anything scrolled
   to would otherwise land underneath them and be unclickable. Found by
   the browser test failing to click the first row. */
.tbl tbody tr{cursor:pointer;transition:background .12s;scroll-margin-top:112px}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl tbody tr td:first-child{box-shadow:inset 2px 0 0 transparent;transition:box-shadow .12s}
.tbl tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--brand)}
.tbl .ref{font-family:'Plex Mono',monospace;font-size:11.5px;color:var(--dim)}
.tbl .sum{font-weight:600;font-size:13px}
.tbl .meta{font-size:11.5px;color:var(--faint);margin-top:1px}
.rowin{animation:rowin .32s both}
@keyframes rowin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------------- filters ---------------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters select,.filters input{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  padding:7px 9px;font-size:12.5px;min-width:120px;outline:0;transition:.14s}
.filters select:focus,.filters input:focus{border-color:var(--brand)}
.filters input[type=search]{min-width:220px}
.chipbtn{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  padding:7px 11px;font-size:12px;color:var(--dim);cursor:pointer;transition:.14s}
.chipbtn:hover{color:var(--txt);border-color:var(--line-2)}
.chipbtn.on{background:color-mix(in srgb,var(--brand) 15%,transparent);color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 45%,transparent)}

/* ---------------- charts ---------------- */
.bars{display:flex;flex-direction:column;gap:9px}
.bars .row{display:grid;grid-template-columns:172px 1fr 42px;align-items:center;gap:10px}
.bars .nm{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .tr{height:16px;background:var(--panel-3);border-radius:2px;overflow:hidden}
.bars .tr i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ocean) 85%,transparent),var(--amber));
  transform-origin:left;animation:grow .7s cubic-bezier(.2,.8,.3,1) both}
.bars .vv{font-family:'Plex Mono',monospace;font-size:12px;text-align:right;color:var(--txt)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.spark{width:100%;height:88px;display:block;overflow:visible}
.spark rect{transition:.2s}
.spark rect:hover{opacity:.75}

.gauge{display:flex;align-items:center;gap:18px}
.gauge svg{flex:none}
.gauge .big{font-family:'Plex Mono',monospace;font-size:30px;font-weight:600;letter-spacing:-.03em}
.gauge .sm{font-size:11.5px;color:var(--dim);margin-top:2px}

.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:1px}

/* workload */
.wl{display:flex;flex-direction:column;gap:11px}
.wl .r{display:grid;grid-template-columns:26px 1fr 34px;gap:10px;align-items:center}
.wl .tr{height:6px;background:var(--panel-3);border-radius:3px;overflow:hidden}
.wl .tr i{display:block;height:100%;background:var(--blue);animation:grow .7s cubic-bezier(.2,.8,.3,1) both}
.wl .nn{font-size:12.5px}
.wl .sub{font-size:11px;color:var(--faint)}

/* ---------------- ticket detail ---------------- */
.back{background:transparent;border:0;color:var(--dim);cursor:pointer;font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px;padding:0;margin-bottom:14px}
.back:hover{color:var(--brand)}

.tkhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.tkhead h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.025em}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.facts div{padding:10px 0;border-bottom:1px solid var(--line)}
.facts .k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600}
.facts .v{font-size:13px;margin-top:3px}

.quote{background:var(--panel-2);border-left:2px solid var(--ocean);padding:13px 15px;
  border-radius:0 var(--r) var(--r) 0;font-size:13.5px;line-height:1.62}

.tl{position:relative;padding-left:22px}
.tl::before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:1px;background:var(--line-2)}
.tl .ev{position:relative;padding-bottom:18px}
.tl .ev::before{content:'';position:absolute;left:-21px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--panel);border:2px solid var(--faint)}
.tl .ev.reply::before{border-color:var(--blue)}
.tl .ev.internal::before{border-color:var(--amber)}
.tl .ev.resolution::before{border-color:var(--teal)}
.tl .ev .when{font-size:11px;color:var(--faint);font-family:'Plex Mono',monospace}
.tl .ev .txt{font-size:13px;margin-top:4px;line-height:1.6}
.tl .ev .who2{font-size:11.5px;color:var(--dim);font-weight:600;margin-top:2px}

.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt);padding:8px 13px;
  border-radius:var(--r);cursor:pointer;font-size:12.5px;font-weight:500;transition:.14s}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.08);color:var(--brand-ink)}
.btn.good{border-color:color-mix(in srgb,var(--teal) 50%,transparent);color:var(--teal)}
.btn.good:hover{background:color-mix(in srgb,var(--teal) 12%,transparent)}

textarea,.frm input,.frm select{width:100%;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:var(--r);padding:9px 11px;font-size:13px;outline:0;transition:.14s;resize:vertical}
textarea:focus,.frm input:focus,.frm select:focus{border-color:var(--brand);background:var(--panel)}
.frm{display:grid;gap:13px}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.frm label{display:block}
.frm label>span{display:block;margin-bottom:5px}
.hint{font-size:11.5px;color:var(--faint);margin-top:5px}

.empty{padding:44px 20px;text-align:center;color:var(--faint);font-size:13px}

.toast{position:fixed;right:22px;bottom:22px;z-index:400;background:var(--panel-3);
  border:1px solid var(--line-2);border-left:2px solid var(--teal);border-radius:var(--r);
  padding:12px 16px;box-shadow:var(--shadow);font-size:13px;animation:tin .3s both}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.banner{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--amber) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);border-radius:var(--r);
  padding:11px 14px;font-size:12.5px;color:var(--dim);margin-bottom:18px}
.banner b{color:var(--amber);font-weight:600}

@media(max-width:1180px){
  .k4{grid-template-columns:repeat(2,1fr)} .c23,.k2{grid-template-columns:1fr} .k3{grid-template-columns:1fr}
}
@media(max-width:900px){
  /* min-width:0 or the grid tracks size to their content and the nav's own
     horizontal scroller widens the whole page instead of scrolling itself. */
  #app{grid-template-columns:1fr}
  #app>*{min-width:0}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;
    overflow-x:auto;min-width:0;max-width:100%}
  .nav a{white-space:nowrap}
  .nav{display:flex;gap:4px;padding:8px} .nav .lbl{display:none} .railfoot{display:none}
  .facts{grid-template-columns:1fr}
  .top{padding:0 14px;gap:9px} .who .nm,.who .tt{display:none} .top .sub{display:none}
  .who{padding-left:9px}
}
@media(max-width:520px){
  .live{display:none}   /* the wall clock is the first thing worth losing */
}

/* On a phone the queue becomes a stack of cards rather than a table in a
   side-scroller. A horizontal scroller technically fits, but it parks the
   status and the time target off-screen with no cue that they exist - so
   the one column that says "this is late" is the one nobody ever sees. */
@media(max-width:720px){
  main{padding:16px 12px 50px}
  .pagehead h2{font-size:20px}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
    margin:0 0 10px;padding:6px 0}
  .tbl tbody tr:hover td:first-child{box-shadow:none}
  .tbl td{border:0;padding:6px 13px;display:flex;gap:14px;align-items:flex-start;
    justify-content:space-between;text-align:right}
  .tbl td::before{content:attr(data-label);flex:none;text-align:left;
    font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
    font-weight:600;padding-top:3px}
  .tbl td>*{margin-left:auto}
  .tbl .meta,.tbl .sum{text-align:right}
  .sla{align-items:flex-end;min-width:120px}
  .sla .bar{width:120px}
  /* flex:1 on the selects squeezed them to ~40px - empty-looking slivers
     with no visible label. A two-column grid gives each one a real width. */
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filters input[type=search]{grid-column:1/-1;min-width:0;width:100%}
  .filters select{min-width:0;width:100%}
  .filters .chipbtn{white-space:nowrap;min-width:0}
  .filters .spacer{display:none}
  .filters .btn.primary{grid-column:1/-1;text-align:center}
  .top h1{white-space:nowrap;font-size:14px}
  .seg button{padding:5px 8px;font-size:11px}
  .card>header{padding:11px 13px} .card .body{padding:13px}
  .bars .row{grid-template-columns:104px 1fr 34px}
}

/* ==================================================================
   Routing, sections and notifications
   Added after the first meeting with SPTC, who asked that choosing
   the subject of a complaint should send it straight to the section
   that resolves it, and that a few managers should be told so they
   can keep track. Everything below serves those two sentences.
   ================================================================== */

/* Each section gets its own colour, and it is the same colour on the
   queue, the case, the intake screen and the alert log. A manager
   should be able to learn "orange means Operations" once. */
:root{
  --sc-care:#4aa3ff; --sc-ops:#f0a828; --sc-crew:#9d8bf5; --sc-fleet:#3fb6d8;
  --sc-infra:#2fd6a6; --sc-fin:#e08bbf; --sc-safety:#ff6058;
}
:root[data-theme=light]{
  --sc-care:#1d6fd0; --sc-ops:#b57108; --sc-crew:#6a51d8; --sc-fleet:#0a6f91;
  --sc-infra:#0d8f6c; --sc-fin:#b0468a; --sc-safety:#d13c33;
}
.secpill{display:inline-block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:2px 6px;border-radius:2px;vertical-align:middle;white-space:nowrap;
  background:color-mix(in srgb,var(--sc) 16%,transparent);color:var(--sc);
  border:1px solid color-mix(in srgb,var(--sc) 34%,transparent)}
.sc-care{--sc:var(--sc-care)}   .sc-ops{--sc:var(--sc-ops)}     .sc-crew{--sc:var(--sc-crew)}
.sc-fleet{--sc:var(--sc-fleet)} .sc-infra{--sc:var(--sc-infra)} .sc-fin{--sc:var(--sc-fin)}
.sc-safety{--sc:var(--sc-safety)}

/* --- by section board --- */
.secgrid .sec-card{cursor:pointer;transition:border-color .14s,transform .14s}
.secgrid .sec-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.sec-top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.sec-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  padding-top:11px;border-top:1px solid var(--line)}
.big2{font-size:22px;font-weight:700;line-height:1.15;margin-top:2px}
.sec-head{display:flex;gap:9px;align-items:center;padding-top:11px;border-top:1px solid var(--line)}

/* --- the section panel on a case --- */
.secbox{display:flex;gap:10px;align-items:flex-start}
.movebox{margin-top:12px;padding:11px;border-radius:var(--r);
  background:color-mix(in srgb,var(--violet) 8%,transparent);
  border-left:2px solid var(--violet)}

/* --- the routing box on the intake form ---
   Deliberately loud. It is the answer to the question SPTC actually
   asked, and an agent should not be able to save a case without
   having seen where it is about to go. */
.routebox{padding:13px;border-radius:var(--r);background:var(--panel-2);
  border:1px solid var(--line);border-left:2px solid var(--amber)}
.rb-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.rb-top .auto{color:var(--teal);letter-spacing:.08em}
.rb-top .auto.hand{color:var(--amber)}
.rb-mid{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.rb-mid select{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--r);padding:7px 9px;font-size:12.5px}
.rb-told{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.p1note{margin-top:9px;color:var(--coral)}

.who-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  background:var(--panel-3);border:1px solid var(--line);border-radius:11px;padding:2px 8px 2px 3px;
  white-space:nowrap}
.rules .who-chip{padding:3px 9px}

/* --- notification log --- */
.rulechip{font-family:'Plex Mono',monospace;font-size:10.5px;font-weight:600;
  background:var(--panel-3);border:1px solid var(--line);border-radius:2px;
  padding:2px 5px;color:var(--dim)}
.alist{display:flex;flex-direction:column}
.al{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:flex-start;
  padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.al:last-child{border-bottom:0}
.al:hover{background:var(--panel-2)}
.al.unread{background:color-mix(in srgb,var(--amber) 5%,transparent)}
.al.unread .al-t{font-weight:600}
.al.unread::before{content:'';position:absolute;left:0;width:2px;height:100%;background:var(--amber)}
.al{position:relative}
.al-t{font-size:13px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.al-to{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:7px}
.al-r{font-size:11px;color:var(--faint);white-space:nowrap;padding-top:2px}
.al .meta{margin-top:3px}
.nav a .ct.hot{color:var(--amber);font-weight:600}

/* --- who has been told, on a case --- */
.tal{display:flex;flex-direction:column;gap:1px}
.tal-r{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;
  padding:8px 0;border-bottom:1px solid var(--line)}
.tal-r:last-child{border-bottom:0}

/* --- the rules screen --- */
.rules{display:flex;flex-direction:column;gap:11px}
.rule{padding:12px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.rule-h{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
.rule-h b{font-size:13px;font-weight:600}
.rule-b{font-size:12.5px;color:var(--dim);margin-bottom:9px;line-height:1.55}
.rule-w{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.notrules{display:flex;flex-direction:column;gap:0}
.nr{font-size:12.5px;color:var(--dim);padding:9px 0 9px 16px;border-bottom:1px solid var(--line);
  position:relative;line-height:1.55}
.nr:last-child{border-bottom:0}
.nr::before{content:'';position:absolute;left:2px;top:15px;width:5px;height:5px;
  border-radius:50%;background:var(--coral)}

/* a routing entry in the case timeline reads differently from a note */
.tl .ev.routing::before{background:var(--violet)}
.tl .ev.routing .txt{color:var(--dim);font-style:italic}

@media(max-width:900px){
  .sec-nums{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .al{grid-template-columns:36px 1fr;padding:11px 13px}
  .al-r{grid-column:2;padding-top:0}
  .rb-mid{flex-wrap:wrap}
  /* the rules table carries five columns of prose; stacked, as the queue is */
  .rules .rule-h{gap:7px}
}

/* ==================================================================
   HCIS house style — the pieces that are shape rather than colour.
   The client sells HCIS to the same market and asked that this read
   as the same product family. Everything below was measured off his
   own build (screenshots/01-dashboard.png) rather than eyeballed.
   ================================================================== */

/* the grain exists to stop large dark panels looking flat; on a white
   page it only makes the white look dirty */
:root[data-theme=hcis] body::after{display:none}

/* a white top bar over a near-white page needs a real edge, not a blur */
:root[data-theme=hcis] .top{
  height:64px;background:var(--panel);backdrop-filter:none;border-bottom:1px solid var(--line)}
:root[data-theme=hcis] .top h1{font-size:19px;font-weight:700;letter-spacing:-.02em}
:root[data-theme=hcis] .top .sub{font-size:12.5px}
:root[data-theme=hcis] .tbl th{top:64px}
:root[data-theme=hcis] .tbl tbody tr{scroll-margin-top:124px}

/* HCIS cards: no visible outline, a soft lift, generous corners */
:root[data-theme=hcis] .card{border-color:var(--line)}
:root[data-theme=hcis] .card>header{padding:15px 18px}
:root[data-theme=hcis] .card>header h3{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
:root[data-theme=hcis] .card .body{padding:18px}
:root[data-theme=hcis] .tbl th{background:var(--panel-2);color:var(--dim);
  letter-spacing:.08em;font-size:10.5px}
:root[data-theme=hcis] .tbl td{padding:13px 16px}

/* segmented control as a soft track with a solid brand pill */
:root[data-theme=hcis] .seg{background:var(--panel-3);border:0;padding:3px;border-radius:9px;gap:2px}
:root[data-theme=hcis] .seg button{border-radius:6px;padding:5px 12px;font-weight:600}
:root[data-theme=hcis] .seg button.on{background:var(--brand);color:var(--brand-ink)}

/* status and priority chips are fully rounded in HCIS */
:root[data-theme=hcis] .pill,
:root[data-theme=hcis] .pri,
:root[data-theme=hcis] .secpill,
:root[data-theme=hcis] .route,
:root[data-theme=hcis] .rulechip{border-radius:999px;padding-left:9px;padding-right:9px}
:root[data-theme=hcis] .iconbtn{width:36px;height:36px;border-radius:9px}
:root[data-theme=hcis] .av{width:34px;height:34px;font-size:11.5px;
  background:var(--brand);color:var(--brand-ink);border:0}

/* ---- stat tiles: coloured icon chip, then the number, then the caption ---- */
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:12px}
.kchip{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--k) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 32%,transparent)}
.kchip svg{width:19px;height:19px;stroke:var(--k);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.klabel{font-size:13px;font-weight:600;margin-top:2px}
.kpi .trend{position:static}          /* it now sits in the top row */

/* HCIS fills the chip solid and drops the accent rule down the edge */
:root[data-theme=hcis] .kpi{padding:17px 18px 16px}
:root[data-theme=hcis] .kpi::before{display:none}
:root[data-theme=hcis] .kchip{background:var(--k);border:0}
:root[data-theme=hcis] .kchip svg{stroke:#fff;stroke-width:2}
:root[data-theme=hcis] .kpi .n{font-family:inherit;font-size:29px;font-weight:700;
  letter-spacing:-.03em;margin:2px 0 4px}
:root[data-theme=hcis] .kpi .trend{font-family:inherit;font-weight:600;font-size:12px;
  padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,currentColor 12%,transparent)}

/* ---- the notification bell in the top bar ---- */
.bell{position:relative;text-decoration:none}
.bell .bdg{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;line-height:1;border:2px solid var(--bg);
  font-family:Archivo,sans-serif}
:root[data-theme=hcis] .bell .bdg{border-color:var(--panel)}
.bell .bdg.zero{display:none}
.bell.here{color:var(--brand);border-color:var(--brand)}

@media(max-width:900px){
  /* the rail turns into a horizontal strip on a phone; the brand block and
     the colour picker are the two things that do not belong in a strip */
  .brand{display:none}
  .brandpick{display:none}
  /* the bell is the redundant control here - Notifications is already in
     the nav strip carrying the same count - and dropping it is what keeps
     the avatar inside the viewport instead of 29px past it */
  .bell{display:none}
  :root[data-theme=hcis] .top{height:56px}
  :root[data-theme=hcis] .tbl th{top:56px}
  :root[data-theme=hcis] .top h1{font-size:15px}
  :root[data-theme=hcis] .av{width:28px;height:28px;font-size:10.5px}
  :root[data-theme=hcis] .iconbtn{width:30px;height:30px;border-radius:8px}
}

/* The teal-to-amber bar gradient belongs to the control-room look; against
   the HCIS palette it reads as a second, competing accent. One colour, the
   customer's own, and the length of the bar carries the information. */
:root[data-theme=hcis] .bars .tr i{background:var(--brand)}
:root[data-theme=hcis] .bars .tr,
:root[data-theme=hcis] .wl .tr,
:root[data-theme=hcis] .sla .bar{background:var(--panel-3)}
:root[data-theme=hcis] .wl .tr i{background:var(--brand)}
:root[data-theme=hcis] .quote{border-left-color:var(--brand);border-radius:var(--r)}
:root[data-theme=hcis] .routebox{border-left-width:3px}
:root[data-theme=hcis] .banner{border-radius:var(--r)}
:root[data-theme=hcis] .kpi .trend.down{color:var(--teal)}

/* The routing table's second column must never wrap: a section name that
   folds under its own pill turns every row of that section into two lines
   and makes the table look like a mistake. The column sizes to whatever the
   longest name is instead of to a number somebody guessed. */
.tbl.nowrap2 td:nth-child(2),
.tbl.nowrap2 th:nth-child(2){white-space:nowrap}
@media(max-width:720px){
  /* stacked into cards on a phone, where nowrap would push the card wide */
  .tbl.nowrap2 td:nth-child(2){white-space:normal}
}

/* ==================================================================
   Human Resources module
   Same shell, second menu. Nothing below introduces a new visual
   language - an ERP that looks like two products is not an ERP.
   ================================================================== */

/* --- module switch --- */
/* auto-fit rather than a fixed count: a third module was added and a
   hardcoded `1fr 1fr` put it on a row of its own. This adapts. */
.modsw{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;
  padding:10px;border-bottom:1px solid var(--rail-line)}
.modsw a{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 3px;border-radius:var(--r);text-decoration:none;
  color:var(--rail-faint);font-size:9.8px;font-weight:600;line-height:1.25;
  text-align:center;transition:.14s;border:1px solid transparent}
.modsw a:hover{color:var(--rail-txt);background:var(--rail-hover)}
.modsw a.on{color:var(--brand-ink);background:var(--brand);border-color:var(--brand)}
.modsw a .ico{width:18px;height:18px}

/* only the menu belonging to the current module is on screen */
.navset{display:none}
:root[data-mod=care] .navset[data-mod=care]{display:block}
:root[data-mod=hr]   .navset[data-mod=hr]{display:block}
:root[data-mod=pay]  .navset[data-mod=pay]{display:block}

/* --- people chips --- */
.empchip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:12.5px;background:var(--panel-3);border:1px solid var(--line);
  border-radius:999px;padding:2px 10px 2px 3px;transition:.14s}
.empchip:hover{border-color:var(--brand);color:var(--brand)}
.chiprow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}

/* --- status pills, by tone rather than by name, so a new status only
       needs a tone and not a new rule --- */
.pill.st-ok{color:var(--teal);background:color-mix(in srgb,var(--teal) 13%,transparent);
  border-color:color-mix(in srgb,var(--teal) 32%,transparent)}
.pill.st-warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);
  border-color:color-mix(in srgb,var(--amber) 32%,transparent)}
.pill.st-bad{color:var(--coral);background:color-mix(in srgb,var(--coral) 13%,transparent);
  border-color:color-mix(in srgb,var(--coral) 32%,transparent)}
.pill.st-new{color:var(--blue);background:color-mix(in srgb,var(--blue) 13%,transparent);
  border-color:color-mix(in srgb,var(--blue) 32%,transparent)}
.pill.st-off{color:var(--faint);background:color-mix(in srgb,var(--faint) 10%,transparent);
  border-color:var(--line-2)}
.lateish{color:var(--coral)}

/* --- the numbered form blocks ---
   The section number is printed in the margin because that is how the
   paper form reads, and somebody working from a completed PM/05 needs
   to be able to find section 9 without counting cards. */
.fsec{margin-bottom:12px}
.fsec>header{gap:12px}
.fnum{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;background:var(--brand);color:var(--brand-ink)}
.formnote{background:var(--panel-2);border:1px solid var(--line);border-left:2px solid var(--brand);
  border-radius:var(--r);padding:12px 15px;font-size:12.5px;color:var(--dim);
  margin-bottom:14px;line-height:1.6}
.subblock{padding:13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-2);margin-bottom:11px}
.subblock:last-child{margin-bottom:0}
.subblock .lbl{margin-bottom:10px}
.chk{display:inline-flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--dim);
  cursor:pointer;line-height:1.45}
.chk input{width:15px;height:15px;flex:none;margin:1px 0 0;accent-color:var(--brand)}

/* the one thing on these screens that is a finding rather than a field */
.dupnote{border-left:2px solid var(--amber)}
.dupnote .body{font-size:12.5px;color:var(--dim);line-height:1.65}
.dupnote b{color:var(--amber)}
.hiredbox{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:color-mix(in srgb,var(--teal) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);
  border-radius:var(--r);padding:11px 14px;font-size:12.5px;margin-bottom:14px}

/* --- employee record --- */
.leavebox{text-align:left}
.edulist{display:flex;flex-direction:column}
.edu{padding:11px 0;border-bottom:1px solid var(--line)}
.edu:first-child{padding-top:0}
.edu:last-child{border-bottom:0;padding-bottom:0}
.edu-h{display:flex;gap:10px;align-items:baseline;justify-content:space-between;margin-bottom:3px}
.edu-h b{font-size:13px;font-weight:600}
.tbl.mini td{padding:7px 0;font-size:12.5px}
.tbl.mini tr:last-child td{border-bottom:0}

/* an <a> used as a button has to sit on the same baseline as a <button> */
a.btn{display:inline-flex;align-items:center;text-decoration:none}

@media(max-width:900px){
  /* the rail is a horizontal strip here, so the switch has to be one too */
  .modsw{grid-template-columns:auto auto;gap:6px;padding:8px;border-bottom:0;
    border-right:1px solid var(--rail-line);flex:none}
  .modsw a{flex-direction:row;white-space:nowrap;padding:7px 10px;font-size:11.5px}
}
@media(max-width:720px){
  .fsec>header{padding-left:13px}
  .edu-h{flex-direction:column;gap:2px}
}

/* ==================================================================
   Leave, discipline, announcements and the reference tables

   Appended at the END of the stylesheet on purpose. An earlier edit
   opened a new @media block in the MIDDLE of this file and closed the
   640px one early, which silently rehomed every rule after it. New
   work goes at the bottom, and any media query here is opened and
   closed in one place.
   ================================================================== */

/* a single-column facts list, for the narrow side of a 2:3 grid where
   two columns of key/value would wrap every value onto its own line */
.kvs{display:grid;grid-template-columns:1fr;gap:0}
.kvs>div{padding:9px 0;border-bottom:1px solid var(--line)}
.kvs>div:last-child{border-bottom:0}
.kvs .k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:600}
.kvs .v{font-size:13px;margin-top:3px}

/* the live calculation under a form field: how many working days, who
   this reaches, which employee that identity number belongs to */
.calcbox{border:1px solid var(--line-2);border-radius:var(--r);
  padding:10px 12px;font-size:12.5px;line-height:1.5;background:var(--panel-2)}
.calcbox.ok{border-color:color-mix(in srgb,var(--teal) 42%,transparent);
  background:color-mix(in srgb,var(--teal) 8%,transparent)}
.calcbox.bad{border-color:color-mix(in srgb,var(--coral) 42%,transparent);
  background:color-mix(in srgb,var(--coral) 8%,transparent)}
.calcbox .meta{margin-top:4px}

.frm .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
@media(max-width:720px){.frm .three{grid-template-columns:1fr}}

/* a file that is recorded but not stored */
.docline{display:flex;gap:11px;align-items:center;padding:10px 0;
  border-top:1px solid var(--line)}
.docline:first-child{border-top:0}
.dicon{flex:none;width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;background:var(--panel-3)}
.dicon svg{width:17px;height:17px;fill:none;stroke:var(--dim);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* photograph plus name plus number, the block that proves a lookup
   found the right person */
.idcard{display:flex;gap:14px;align-items:center}
.face{border-radius:50%;object-fit:cover;display:block;
  border:1px solid var(--line-2);background:var(--panel-3)}
.tkhead .face,.empchip .face{flex:none}

/* a file input is unstyleable, so the input is hidden and its label is
   the button. The label must therefore look and behave like one. */
.filebtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel);color:var(--txt);
  border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600}
.filebtn:hover{border-color:var(--brand);color:var(--brand)}

.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;
  margin:2px 0 10px}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--brand);margin:0}
@media(max-width:720px){.checks{grid-template-columns:1fr}}

button.danger{border-color:color-mix(in srgb,var(--coral) 45%,transparent);
  color:var(--coral)}
button.danger:hover{background:color-mix(in srgb,var(--coral) 10%,transparent);
  border-color:var(--coral)}

/* a multiple-select left at its default height shows three rows and
   looks broken next to everything else on the form */
.frm select[multiple]{min-height:170px;padding:6px}
.frm select[multiple] option{padding:4px 6px;border-radius:5px}

/* A key on the left, a number on the right. `.row` looked like the
   class for this and is not: it is only ever defined INSIDE `.bars`,
   so a bare .row has no display:flex and justify-content does nothing
   at all. The rows came out as run-on text and no assertion about the
   words being present could have caught it. */
.kvline{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:5px 0}
.kvline.total{border-top:1px solid var(--line);margin-top:5px;padding-top:8px}
.kvline .mono{white-space:nowrap}

/* a row of buttons under a form */
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* --- PM/05: the one-page / step-by-step switch, and the stepper --- */
.modesw{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.modesw>span:first-child{font-weight:600;font-size:13px}
.modesw .hint{margin:0}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg2 button{border:0;background:var(--panel);color:var(--dim);padding:7px 14px;
  font:inherit;font-size:13px;cursor:pointer}
.seg2 button+button{border-left:1px solid var(--line)}
.seg2 button:hover{background:var(--panel-2)}
.seg2 button.on{background:var(--brand);color:var(--brand-ink)}

/* scroll-margin-top or changing step parks the stepper UNDERNEATH the
   sticky header and the user cannot see which step they are on — the same
   trap .tbl rows already hit, so the same two numbers. */
.stepbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin:0 0 16px;scroll-margin-top:112px}
:root[data-theme=hcis] .stepbar{scroll-margin-top:124px}
.steprule{flex:1 1 18px;min-width:14px;height:1px;background:var(--line)}
.stepitem{display:flex;align-items:center;gap:9px;background:none;border:0;
  padding:4px 6px;font:inherit;cursor:pointer;border-radius:var(--r);text-align:left}
.stepitem:hover{background:var(--panel-2)}
.stepdot{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-2);border:1px solid var(--line);color:var(--dim);
  font-size:13px;font-weight:600}
.steptxt{display:flex;flex-direction:column;line-height:1.25}
.steptxt b{font-size:13px}
.steptxt span{font-size:12px;color:var(--dim)}
.stepitem.on .stepdot{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.stepitem.on .steptxt b{color:var(--txt)}
.stepitem.done .stepdot{background:var(--panel-2);border-color:var(--brand);
  color:var(--brand)}

.stepnav{display:flex;align-items:center;gap:12px;margin-top:16px}
.stepnav .mono{flex:1;text-align:center;color:var(--dim);font-size:12px}
.stepnav button:disabled{opacity:.42;cursor:default}

@media (max-width:820px){
  .steptxt span{display:none}
  .steprule{flex-basis:8px;min-width:6px}
  .stepbar{padding:11px 12px}
}

/* ==================================================================
   Payment runs
   Appended at the END on purpose. An edit in the middle of this file
   once closed a media query early and took a whole breakpoint with it.
   ================================================================== */

/* the state of the run, which is the permission rule made visible */
.paybar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin:0 0 16px;scroll-margin-top:112px}
:root[data-theme=hcis] .paybar{scroll-margin-top:124px}
.payst{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r);
  font-size:12.5px;font-weight:600;color:var(--faint)}
.payst.on{color:var(--txt);background:var(--panel-2)}
.payst.done{color:var(--dim)}
.paystdot{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;
  background:var(--panel-3);color:var(--dim);border:1px solid var(--line-2)}
.payst.on .paystdot{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.payst.done .paystdot{background:var(--panel-2);color:var(--dim)}
.paystrule{flex:1 1 10px;min-width:8px;height:1px;background:var(--line-2)}

/* requested / adjustments / would be paid */
.paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.paybig{font-size:22px;font-weight:700;letter-spacing:-.4px;margin-top:2px}
.paybig.good{color:var(--brand)}

.payflag{border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:var(--r);padding:11px 13px;margin-bottom:9px;background:var(--panel-2)}
.payflag.bad{border-left-color:#d9822b}
.payflag b{display:block;margin-bottom:3px;font-size:13px}
.payflag div{font-size:12.5px;color:var(--dim);line-height:1.55}

.paydiffrow{display:grid;grid-template-columns:190px 1fr;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px;line-height:1.6}
.paydiffrow:last-child{border-bottom:0}
.paydiffrow b{color:var(--dim);font-size:12.5px}

.payact{display:flex;gap:8px;flex-wrap:wrap}
.paypill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;
  font-weight:600;background:var(--panel-3);color:var(--dim);border:1px solid var(--line-2)}
.paypill.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}

/* cut days */
.paymodal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:20px}
.paycardm{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;width:100%;max-width:400px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.paycardm h3{margin:0 0 4px;font-size:16px}
.paycardm label{display:block;margin:14px 0 0;font-size:12.5px;color:var(--dim)}
.paycardm input,.paycardm select{width:100%;margin-top:5px}
.paypre{margin:14px 0;padding:10px 12px;border-radius:var(--r);
  background:var(--panel-2);font-size:12.5px;color:var(--dim)}

@media (max-width:820px){
  .paydiffrow{grid-template-columns:1fr;gap:2px}
  .payst{font-size:11.5px;padding:5px 7px}
  .paystrule{display:none}
}

/* ==================================================================
   Sign in

   The HCIS sign-in page's shape, in this stylesheet's own tokens:
   photograph and dark wash down the left, white card on the right.

   It sits OUTSIDE the three-theme system on purpose. A sign-in screen
   is the customer's front door and it should look the same whichever
   look somebody left the application in - and the theme control lives
   inside the application, where nobody has been yet.
   ================================================================== */

.signin{
  position:fixed; inset:0; z-index:9000; display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  background:#f8fafb; font-family:Archivo,system-ui,sans-serif;
  opacity:1; transition:opacity .2s ease;
}
.signin.gone{opacity:0; pointer-events:none}

/* --- left: the photograph --- */
.si-art{position:relative; overflow:hidden; background:#16215c}
.si-art img#si_bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Light enough that SPTC's own buses are recognisable, heavy enough that
   white text over a blown-out sky is still readable. The photograph is
   brightest at the top left, which is why the wash is darkest there. */
.si-wash{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(4,147,81,.16), transparent 62%),
    radial-gradient(ellipse at 78% 84%, rgba(74,163,255,.12), transparent 60%),
    linear-gradient(150deg, rgba(11,16,46,.86), rgba(22,33,92,.66) 46%, rgba(10,15,42,.84));
}
/* with no photograph the wash has to carry the panel by itself */
.signin.nobg .si-wash{
  background:
    radial-gradient(ellipse at 25% 15%, rgba(4,147,81,.42), transparent 58%),
    radial-gradient(ellipse at 80% 82%, rgba(252,219,46,.16), transparent 55%),
    linear-gradient(135deg,#16215c,#2d3283 48%,#101740);
}
.si-art-in{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:48px 56px; color:#fff;
}
.si-crest{
  width:112px; height:112px; border-radius:50%; background:#fff; display:grid;
  place-items:center; overflow:hidden; padding:9px; margin-bottom:26px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.65);
}
.si-crest img{width:100%; height:100%; object-fit:contain}
.si-art-in h1{
  font-size:29px; line-height:1.22; font-weight:700; margin:0; letter-spacing:-.02em;
  max-width:15ch; text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.si-rule{
  display:block; width:64px; height:4px; border-radius:99px; margin:18px auto 14px;
  background:linear-gradient(90deg,#049351,#4aa3ff);
}
.si-sub{margin:0; font-size:16px; font-weight:600; color:rgba(255,255,255,.94);
  text-shadow:0 1px 12px rgba(0,0,0,.45)}
.si-gov{margin:5px 0 0; font-size:13px; color:rgba(255,255,255,.7);
  text-shadow:0 1px 10px rgba(0,0,0,.45)}
.si-tiles{
  margin-top:38px; display:grid; gap:12px; width:100%; max-width:400px;
}
.si-tiles div{
  padding:13px 15px; border-radius:12px; text-align:left;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
}
.si-tiles b{display:block; font-size:13.5px; font-weight:650}
.si-tiles span{display:block; font-size:11.5px; margin-top:2px; color:rgba(255,255,255,.62)}
.si-foot{
  position:absolute; left:0; right:0; bottom:22px; margin:0;
  font-size:11px; color:rgba(255,255,255,.42);
}

/* --- right: the card --- */
.si-form{display:grid; place-items:center; padding:28px; overflow-y:auto}
.si-card{
  width:100%; max-width:412px; background:#fff; border-radius:16px; padding:30px;
  border:1px solid #e7ecf1; box-shadow:0 1px 2px rgba(20,32,44,.05),0 22px 48px -26px rgba(20,32,44,.35);
}
.si-card.shake{animation:si-shake .3s}
@keyframes si-shake{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)}
  60%{transform:translateX(5px)}
}
.si-mob{display:none; align-items:center; gap:10px; margin-bottom:20px}
.si-mob .si-crest.sm{width:44px; height:44px; padding:4px; margin:0; box-shadow:none; border:1px solid #e7ecf1}
.si-mob b{font-size:17px; color:#1d2a45}
.si-mob span{font-size:11.5px; color:#8494a3}
.si-card h2{margin:0; font-size:23px; font-weight:700; color:#1d2a45; letter-spacing:-.01em}
.si-lead{margin:5px 0 20px; font-size:13px; color:#7a8a9a}

.si-err{
  margin-bottom:16px; padding:11px 13px; border-radius:10px; font-size:12.5px;
  background:#fef2f2; border:1px solid #fecaca; color:#b42318; line-height:1.45;
}

.si-card label{display:block; margin-bottom:14px}
.si-card label>span{
  display:block; font-size:11.5px; font-weight:600; color:#5b6c7d; margin-bottom:6px;
}
.si-card input{
  width:100%; padding:11px 13px; border:1px solid #dfe6ec; border-radius:10px;
  font:inherit; font-size:14px; color:#14202c; background:#fff; outline:0;
  transition:border-color .12s, box-shadow .12s;
}
.si-card input:focus{border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.si-pw{position:relative; display:block}
.si-pw input{padding-right:62px}
.si-pw button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#7a8a9a; font:inherit; font-size:11.5px;
  font-weight:600; cursor:pointer; padding:6px 8px; border-radius:7px;
}
.si-pw button:hover{background:#f1f5f9; color:#1d2a45}

.si-go{
  width:100%; margin-top:4px; padding:12px; border:0; border-radius:10px;
  background:#1d2a45; color:#fff; font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; transition:background .12s;
}
.si-go:hover{background:#2563eb}

/* --- the demonstration accounts --- */
.si-demo{margin-top:22px; border-top:1px solid #eef2f6; padding-top:16px}
.si-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:9px 11px; border-radius:9px; border:1px solid #fde68a; background:#fffbeb;
  color:#92400e; font:inherit; font-size:12px; cursor:pointer;
}
.si-toggle:hover{background:#fef3c7}
.si-toggle b{font-weight:650}
.si-hint{margin:12px 2px 9px; font-size:11.5px; color:#7a8a9a; line-height:1.5}
.si-warn{
  margin:11px 2px 0; font-size:11px; color:#8494a3; line-height:1.55;
  border-top:1px dashed #e7ecf1; padding-top:10px;
}
.acct{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  padding:9px 10px; margin-bottom:6px; border:1px solid #eef2f6; border-radius:10px;
  background:#fff; font:inherit; cursor:pointer; transition:border-color .12s, background .12s;
}
.acct:hover{border-color:#bfdbfe; background:#f5f9ff}
.acct .si-av{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#1d2a45,#2d3283); color:#fff; font-size:11.5px; font-weight:700;
}
.acct .si-who{min-width:0; flex:1; display:block}
.acct .si-who b{display:block; font-size:13px; color:#1d2a45; font-weight:600}
.acct .si-who .si-tt{display:block; font-size:11px; color:#5b6c7d}
.acct .si-who .si-nt{display:block; font-size:10.5px; color:#94a3b8; margin-top:1px}
.acct .si-un{
  flex:0 0 auto; font-size:10.5px; color:#7a8a9a; background:#f6f8fa;
  border:1px solid #eef2f6; border-radius:6px; padding:3px 6px;
}

/* one column once the photograph has nowhere useful to go */
@media (max-width:900px){
  .signin{grid-template-columns:1fr}
  .si-art{display:none}
  .si-mob{display:flex}
  .si-form{align-items:start; padding:20px 16px 40px}
}

/* the way back out, in the rail */
.signout{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  margin-top:8px; padding:8px; border-radius:8px; cursor:pointer; font:inherit;
  font-size:11.5px; color:var(--rail-dim); background:transparent;
  border:1px solid var(--rail-line-2); transition:color .12s, border-color .12s;
}
.signout:hover{color:var(--rail-txt); border-color:var(--rail-txt)}


/* --- the live e-ticketing site, linked from both halves --- */

/* left panel: above the DataBytes line, quiet but findable */
.si-link{
  position:absolute; left:0; right:0; bottom:44px; margin:0; font-size:12px;
}
.si-link a{
  color:rgba(255,255,255,.82); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:1px;
}
.si-link a:hover{color:#fff; border-bottom-color:#fff}

/* the card: the left panel is hidden on a phone, and a passenger looking
   for support is exactly the person most likely to be on one */
.si-support{
  margin:16px 0 0; padding-top:14px; border-top:1px solid #eef2f6;
  font-size:11.5px; color:#7a8a9a; line-height:1.5;
}
.si-support a{color:#2563eb; text-decoration:none; font-weight:600}
.si-support a:hover{text-decoration:underline}


/* --- New Employee form --- */

/* A file input that is honest about what it does: the file is never read
   and never leaves the browser, only its name is kept. */
.fileinp{
  width:100%; padding:8px 10px; border:1px dashed var(--line-2); border-radius:var(--r);
  background:var(--panel-2); color:var(--dim); font:inherit; font-size:12px; cursor:pointer;
}
.fileinp::file-selector-button{
  border:0; border-radius:6px; padding:5px 10px; margin-right:9px; cursor:pointer;
  background:var(--brand); color:var(--brand-ink); font:inherit; font-size:11.5px; font-weight:600;
}

.formactions{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:14px 0 30px;
}