/* ── Clear Passage ──────────────────────────────────────────────────
   Deep navy #0f1e38 · Gold #c9a96e · Cream #f5f0e8

   Light and welcoming, with gold leading and navy supporting.

   The brand gold is soft and warm, and that single fact decides most of
   what follows. Measured against the light surfaces it is 1.97:1 on cream
   and 2.24:1 on white — so it can be a **fill** and can never be **text**.
   Gold with navy on top is 7.4:1, which is both accessible and the most
   striking thing on the page, so that is the primary action.

   Where gold has to read as a word — a link, a small label — it is
   #856831: the same hue at 39°, darkened until it clears AA on both cream
   and white. Not a second brand colour, the same one made legible.

   Navy is deliberately not the primary. It carries text and structure
   because at 14.7:1 on cream it reads at any size, but nothing large is
   filled with it: a navy-filled page is a corporate product, and this one
   is meant to feel like somewhere you would happily spend a Tuesday.
   ------------------------------------------------------------------ */
:root{
  /* The three, exactly as given. */
  --navy:#0f1e38;
  --gold:#c9a96e;
  --cream:#f5f0e8;

  /* Derived, and each for a stated reason. */
  --gold-ink:#856831;   /* gold as a word — 4.6:1 cream, 5.2:1 white */
  --gold-hover:#bd9a5a; /* the fill, one step deeper for press states */
  --gold-wash:#f5efe4;  /* active nav, quiet surfaces */
  --gold-edge:#e4d5b8;
  --navy-2:#3a4a63;     /* body copy — 8.3:1 on cream */
  --navy-3:#6f7d92;     /* muted labels */
  --navy-wash:#eef0f3;
  --navy-edge:#d5dae2;

  --ink:var(--navy); --ink-2:var(--navy-2); --ink-3:var(--navy-3);
  --paper:var(--cream); --card:#FFFFFF;
  --rule:#E5DED1; --rule-2:#F0EAE0;

  /* Semantic, outside the brand and checked against cream rather than
     white, because cream is what they actually sit on. */
  --pine:#2C6349; --pine-lt:#E8F0EB;
  --rust:#9B3125; --rust-lt:#FAE8E4;
  --amber:#8F4309; --amber-lt:#FBEFE2;
  /* Old names kept so nothing that used them breaks. */
  --brass:var(--amber); --brass-lt:var(--amber-lt); --brass-dk:var(--amber);
  --brand:var(--gold); --brand-dk:var(--gold-ink); --brand-lt:var(--gold-wash);
  --gold-dk:var(--gold-ink); --gold-lt:var(--gold-wash);

  /* The rail is white against the cream page — lifted by being lighter
     than its surroundings rather than darker, which is the difference
     between welcoming and administrative. */
  --nav:#FFFFFF; --nav-ink:var(--navy); --nav-ink-2:var(--navy-3);
  --nav-rule:var(--rule);
  --nav-active-bg:var(--gold-wash); --nav-active-ink:var(--navy);

  --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --display:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;

  /* Warm shadows. A neutral grey shadow over cream turns it muddy, so
     these are tinted with the navy the palette already contains. */
  --shadow-lift:0 1px 2px rgba(15,30,56,.035),0 4px 14px rgba(15,30,56,.045);
  --shadow:0 2px 4px rgba(15,30,56,.04),0 14px 34px rgba(15,30,56,.07);
  --r:12px; --r-sm:8px; --r-lg:16px;
  --nav-w:216px;
}

/* Industry moves an accent on the client's own content, never the chrome.
   One chrome is one product they recognise as theirs. */
[data-industry="salon"]      { --accent:#9C3A2A }
[data-industry="gym"]        { --accent:#2563EB }
[data-industry="restaurant"] { --accent:#D93A2B }
[data-industry="real_estate"]{ --accent:#14532D }
[data-industry="cafe"]       { --accent:#8A5E12 }
:root                        { --accent:var(--navy) }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:4px}
a{color:var(--brand-dk);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}

.wrap{max-width:960px;margin:0 auto;padding:34px 24px 80px}
.hd{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.hd b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em}
.hd .eb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-top:3px;display:block}
.hd .who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.hd .av{width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--display);font-size:12px}

h1{font-family:var(--display);font-size:29px;font-weight:800;letter-spacing:-.035em;line-height:1.08;margin-bottom:6px}
h2{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em}
.sub{color:var(--ink-2);font-size:14.5px;max-width:68ch;line-height:1.6;margin-bottom:22px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--brass-dk);font-weight:500}

.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.card>header{padding:16px 18px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:11px}
.card .pad{padding:18px}
.card .note{font-size:12.5px;color:var(--ink-3);padding:14px 18px;background:#FCFAF6;border-top:1px solid var(--rule-2);line-height:1.6}

label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.inp,select{font:inherit;font-size:14px;padding:9px 12px;border:1.5px solid var(--rule);border-radius:var(--r-sm);width:100%;background:var(--card);color:var(--ink)}
.inp:focus,select:focus{outline:2.5px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.field{margin-bottom:14px}

.btn{padding:9px 16px;border-radius:var(--r-sm);border:1.5px solid var(--rule);background:var(--card);font-size:13.5px;font-weight:600;transition:.14s;color:var(--ink)}
.btn:hover{border-color:var(--ink-3);background:#FDFBF8}
.btn.pri{background:var(--brass);border-color:var(--brass);color:#241C17}
.btn.pri:hover{background:var(--brass-dk);border-color:var(--brass-dk);color:#fff}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.tag{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:20px;font-weight:500;white-space:nowrap;display:inline-block}
.t-ok{background:var(--pine-lt);color:var(--pine)}
.t-bad{background:var(--rust-lt);color:var(--rust)}
.t-off{background:#F0EAE0;color:var(--ink-3)}
.t-wait{background:var(--brass-lt);color:var(--brass-dk)}

.err{background:var(--rust-lt);border:1.5px solid #EFCDC2;border-radius:var(--r);padding:12px 16px;color:#7A2A1C;font-size:13.5px;margin-bottom:16px}
.ok{background:var(--pine-lt);border:1.5px solid #C8DCCF;border-radius:var(--r);padding:12px 16px;color:#2A4A38;font-size:13.5px;margin-bottom:16px}

.row{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.hero{background:var(--ink);color:#fff;border-radius:14px;padding:22px 26px;margin-bottom:18px;box-shadow:var(--shadow)}
.hero .eb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.hero h1{color:#fff;margin:8px 0 10px}
.hero p{color:#C4B5A6;max-width:60ch}

.blocked{background:var(--rust);color:#fff;border-radius:8px;padding:2px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.cleared{background:var(--pine);color:#fff;border-radius:8px;padding:2px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}

.tasklist{list-style:none}
.tasklist li{display:flex;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rule-2)}
.tasklist li:last-child{border-bottom:none}
.tasklist b{font-weight:600;font-size:14.5px}
.tasklist small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.tasklist .btn{margin-left:auto}
.tasklist .done b{color:var(--ink-3);text-decoration:line-through}
.tasklist .done small{color:var(--ink-3)}

.stat{display:flex;gap:20px;align-items:baseline}
.stat .n{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--brass)}
.stat .l{font-size:13px;color:var(--ink-2)}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);margin-bottom:16px}
.crumb button{color:var(--brass-dk);font-weight:600;padding:0}
.crumb button:hover{text-decoration:underline}

.pay{padding:0 18px}
.payrow{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule-2);align-items:center}
.payrow:last-child{border-bottom:none}
.payrow.cur{background:#FCFAF6;margin:0 -18px;padding-left:18px;padding-right:18px;border-left:3px solid var(--brass)}
.payrow .when{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);width:96px;flex-shrink:0}
.payrow .mid{flex:1;min-width:0}
.payrow .amt{font-family:var(--mono);font-size:15px;font-weight:500;text-align:right}

.pill{display:inline-block;padding:2px 8px;background:var(--rule-2);border-radius:20px;font-family:var(--mono);font-size:10px;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}

.docs{list-style:none}
.docs li{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--rule-2)}
.docs li:last-child{border-bottom:none}
.docs li.gap{background:#FDFBF6}
.docs li.gap.blocking{background:var(--rust-lt)}
.docs .mid{flex:1;min-width:0}
.docs b{font-weight:600;font-size:14.5px;display:block}
.docs small{display:block;color:var(--ink-3);font-size:12px;margin-top:3px}
.docs .act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}

.upl{margin:0 18px 16px;padding:16px;border:1.5px dashed var(--rule);border-radius:var(--r);background:#FCFAF6}
.upl .row{align-items:flex-end}
.upl input[type=file]{font:inherit;font-size:13px;max-width:230px}
.upl .field{margin-bottom:0}

.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--rule);border-top-color:var(--brass);border-radius:50%;animation:s .8s linear infinite;vertical-align:middle}
@keyframes s{to{transform:rotate(360deg)}}
.muted{color:var(--ink-3);font-size:13px}
/* ── kiosk ────────────────────────────────────────────────────────────
   A different set of rules from the rest of the application. Used
   standing up, one-handed, in a hurry, from arm's length — so nothing
   here is under 18px and no target is under 64px. */

.k-wrap{min-height:100vh;background:var(--ink);color:#fff;display:flex;
  flex-direction:column;padding:28px;box-sizing:border-box}
.k-top{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:26px;opacity:.75;font-size:15px}
.k-top b{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.k-h{font-family:var(--display);font-size:clamp(28px,4vw,44px);font-weight:700;
  letter-spacing:-.02em;margin:0 0 6px}
.k-sub{font-size:18px;opacity:.7;margin:0 0 26px}

.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px}
.k-name{background:#252119;border:1.5px solid #3a352a;border-radius:16px;
  padding:26px 20px;font-size:22px;font-weight:600;color:#fff;text-align:left;
  cursor:pointer;min-height:104px;display:flex;flex-direction:column;
  justify-content:center;gap:8px;transition:background .12s,border-color .12s}
.k-name:hover{background:#2f2a21;border-color:var(--brass)}
.k-name .k-state{font-size:14px;font-weight:500;opacity:.75}
.k-name.on{border-color:var(--sage);background:#232a22}
.k-name.on .k-state{color:var(--sage)}

.k-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:340px;margin:0 auto}
.k-key{background:#252119;border:1.5px solid #3a352a;border-radius:14px;
  height:76px;font-size:28px;font-weight:600;color:#fff;cursor:pointer;
  font-family:var(--mono)}
.k-key:hover{background:#332d23}
.k-key.wide{grid-column:span 1;font-size:16px;font-family:var(--sans)}

.k-dots{display:flex;gap:14px;justify-content:center;margin:28px 0 30px}
.k-dot{width:18px;height:18px;border-radius:50%;border:2px solid #4a4335}
.k-dot.on{background:var(--brass);border-color:var(--brass)}

.k-done{text-align:center;padding:60px 20px}
.k-done .k-big{font-family:var(--display);font-size:clamp(34px,6vw,60px);
  font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.k-done.in .k-big{color:var(--sage)}
.k-done.out .k-big{color:var(--brass)}

.k-err{background:#3a1f1a;border:1.5px solid var(--rust);color:#ffd9d2;
  border-radius:12px;padding:16px 18px;font-size:17px;margin:0 auto 22px;
  max-width:520px;text-align:center}
.k-foot{margin-top:auto;padding-top:24px;opacity:.4;font-size:13px;
  display:flex;justify-content:space-between}
.k-foot button{background:none;border:none;color:inherit;font:inherit;
  text-decoration:underline;cursor:pointer;padding:0}

/* ── phones ───────────────────────────────────────────────────────────
   Every screen a worker actually touches — their schedule, the clock,
   their documents, their time off — is opened on a phone standing in a
   back room, not on a laptop. The desktop layout is the exception here,
   not the default it was written as.

   Three things carry most of the weight: rows stop being rows, actions
   stop being 12px, and the navigation stops assuming a wide header. */

@media (max-width: 720px) {
  body { font-size: 15.5px; }

  .wrap { padding: 18px 14px 90px; }

  /* The header wraps instead of squeezing. On a narrow screen the tenant
     name and the sign-out button were colliding. */
  .hd { flex-wrap: wrap; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; }
  .hd .who { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; }

  /* Navigation buttons become a scrollable strip rather than eight
     wrapped lines pushing the content off the screen. */
  .hd .who { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px;
             -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hd .who::-webkit-scrollbar { display: none; }
  .hd .who .btn { flex: 0 0 auto; }
  .hd .av { display: none; }   /* an avatar is not worth a row of width */

  .hero { padding: 18px 18px; border-radius: 12px; }
  .hero p { max-width: none; }
  h1 { font-size: 26px; }

  .card { border-radius: 12px; margin-bottom: 14px; }
  .card > header { padding: 14px; flex-wrap: wrap; gap: 8px; }
  .card .pad { padding: 14px; }
  .card .note { padding: 12px 14px; font-size: 12.5px; }

  /* A .row is a horizontal form on a desktop and a stack on a phone.
     Every explicit width in the markup is overridden here rather than
     removed there, because the desktop layout still wants them. */
  .row { flex-direction: column; align-items: stretch; gap: 0; }
  .row > .field { width: 100% !important; margin-bottom: 12px; }
  .row .inp, .row select, .field .inp, .field select { width: 100% !important; }
  .row > .btn, .row > button { width: 100%; margin-bottom: 10px; }
  .row > label { margin-bottom: 12px !important; }

  /* Anything tapped is at least 44px tall. A 6px-padded button is a
     miss-tap on a phone held in one hand. */
  .btn { padding: 12px 16px; font-size: 14.5px; min-height: 44px; }
  .btn.sm { padding: 10px 14px; font-size: 13.5px; min-height: 40px; }
  .inp, select { padding: 12px; font-size: 16px; }  /* 16px stops iOS zooming on focus */

  /* List rows stack: name and detail on top, actions underneath and full
     width, rather than a 40px-wide button squeezed against the edge. */
  .tasklist li, .docs li {
    flex-direction: column; align-items: stretch; gap: 10px; padding: 14px;
  }
  .tasklist .btn, .docs .act { margin-left: 0; }
  .docs .act { flex-wrap: wrap; }
  .docs .act .btn, .docs .act select { flex: 1 1 auto; min-width: 120px; }
  .docs small { font-size: 12.5px; line-height: 1.5; }

  .upl { margin: 0 14px 14px; padding: 14px; }
  .upl input[type=file] { max-width: 100%; }

  table { display: block; overflow-x: auto; }
}

/* Very narrow — an older phone, or a split screen. */
@media (max-width: 400px) {
  .wrap { padding: 14px 10px 80px; }
  h1 { font-size: 23px; }
  .hero { padding: 16px 14px; }
}

/* The kiosk has its own rules. A tablet held in portrait is narrow enough
   to hit the breakpoints above, and none of them should apply to it. */
@media (max-width: 720px) {
  .k-wrap { padding: 20px 16px; }
  .k-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .k-name { padding: 20px 16px; font-size: 19px; min-height: 92px; }
  .k-pad { max-width: 100%; gap: 12px; }
  .k-key { height: 68px; font-size: 26px; }
  .k-h { font-size: 26px; }
}

/* Somebody who prefers less motion gets less of it. The spinner is the
   only thing that moves here, and it is not load-bearing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Product switcher. Two products, one company — a signpost between them
   rather than a shared login. */
.switcher{display:inline-flex;gap:4px;align-items:center;margin-right:8px}
.switcher .pill{font-size:11px;padding:4px 9px}
.switcher .pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.switcher .pill.link{text-decoration:none;color:var(--ink-2);cursor:pointer}
.switcher .pill.link:hover{background:var(--brass-lt);border-color:var(--brass)}

/* ── Shell ──────────────────────────────────────────────────────────
   A persistent rail and a wide working area, rather than a centred
   column with a row of buttons above it. The rail is the thing that
   makes this read as software somebody runs a business from: it is
   always there, it says where you are, and it does not move when the
   content does.
   ------------------------------------------------------------------ */
.shell{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh}

.nav{
  background:var(--nav);color:var(--nav-ink);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid var(--nav-rule);
  /* Held apart from the page by a soft edge rather than by being dark. */
  box-shadow:1px 0 0 rgba(22,39,61,.02),4px 0 24px rgba(22,39,61,.04);
}
/* No navy blocks. They were tried and they anchored the rail, but they
   also made the first thing you see a dark panel — which is the opposite
   of the point. The rail is white throughout, lifted by being lighter
   than the cream page rather than by being weighted against it. */
.nav-brand{padding:20px 18px 16px;display:flex;gap:11px;align-items:flex-start}
/* Gold block, navy monogram. The one place both colours meet at full
   strength, which is what makes it read as a mark rather than a chip. */
/* Gold block, navy monogram — the one place both meet at full strength,
   which is what makes it read as a mark rather than a chip. */
.nav-mark{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:var(--gold);color:var(--navy);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:-.03em;
  box-shadow:0 1px 3px rgba(201,169,110,.5);
}
.nav-name{font-family:var(--display);font-weight:800;font-size:14.5px;letter-spacing:-.01em;line-height:1.2}
.nav-kind{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--nav-ink-2);margin-top:3px;display:block;
}

.nav-group{padding:0 10px;margin-top:14px}
.nav-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nav-ink-2);padding:0 8px 7px;display:block;
}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--nav-ink);
  text-align:left;line-height:1.3;margin-bottom:1px;
}
.nav-item:hover{background:var(--navy-lt)}
/* Active is a gold wash with a gold edge, not a filled gold pill. On a
   light rail a solid block of primary shouts; a wash with an indicator
   says the same thing quietly, which is what "elevated" means here. */
.nav-item.on{
  background:var(--nav-active-bg);color:var(--nav-active-ink);font-weight:700;
  box-shadow:inset 2.5px 0 0 var(--gold);
}
.nav-item.on .ico{opacity:1;color:var(--gold-ink)}
.nav-item .ico{width:16px;flex:none;opacity:.85;font-size:13px;text-align:center}
.nav-item .badge{
  margin-left:auto;background:var(--rust);color:#fff;
  font-size:10.5px;font-weight:700;min-width:18px;height:18px;
  border-radius:9px;display:grid;place-items:center;padding:0 5px;
}
.nav-item.on .badge{background:var(--rust);color:#fff}

.nav-foot{margin-top:auto;border-top:1px solid var(--nav-rule);padding:14px 16px}
.nav-who{display:flex;gap:10px;align-items:center}
/* Navy disc, gold monogram: on a white rail the avatar is the one small
   piece of weight at the foot, which is enough. */
.nav-av{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--navy);color:var(--gold);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:11px;
}
.nav-who b{font-size:13px;font-weight:650;display:block;line-height:1.25}
.nav-who small{font-size:11px;color:var(--nav-ink-2);display:block}
.nav-tenant{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--nav-rule);
  font-size:12.5px;color:var(--nav-ink-2);display:flex;align-items:center;gap:6px;
}

.main{min-width:0;padding:30px 34px 90px;max-width:1180px}

/* AUDIT-343 — an empty screen: one sentence, one button. */
.empty-state{text-align:center;padding:26px 18px}
.empty-state p{margin:0 0 12px;color:var(--ink-3);font-size:14.5px}

/* AUDIT-343 — the header row: which company, then which product. */
.topbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:4px}
.topbar .switcher{margin-right:0}
.topbar .co-switch{width:auto;max-width:min(360px,100%);min-width:0;font-size:13px;font-weight:600;padding:6px 10px}
.topbar .co-name{font-size:13px;font-weight:650;color:var(--ink);max-width:min(360px,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Greeting ───────────────────────────────────────────────────── */
.greet{display:flex;align-items:flex-start;gap:20px;margin-bottom:22px}
.greet h1{font-size:31px;margin-bottom:4px}
.greet .sub{margin-bottom:0;font-size:15px}
.greet-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}

/* ── The metric row ──────────────────────────────────────────────
   Five things, each with a number, what it is, and what to do about it.
   The action link is the point — a number with nothing to press is a
   number somebody has to go and find the screen for.
   ---------------------------------------------------------------- */
.metrics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:13px;margin-bottom:22px;
}
.metric{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:17px 17px 14px;box-shadow:var(--shadow-lift);
  display:flex;flex-direction:column;
  transition:box-shadow .15s,transform .15s;
}
.metric:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.metric .mi{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;margin-bottom:11px;
}
.metric .mi.b{background:var(--navy-lt);color:var(--navy)}
.metric .mi.warn{background:var(--rust-lt);color:var(--rust)}
.metric .mi.wait{background:var(--amber-lt);color:var(--amber)}
.metric .mi.ok{background:var(--gold-wash);color:var(--gold-ink)}
.metric .n{font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.04em;line-height:1}
.metric .n.sm{font-size:17px;letter-spacing:-.02em;padding:5px 0}
.metric .l{font-size:12.5px;color:var(--ink-2);line-height:1.35;margin-top:5px;flex:1}
.metric .go{
  margin-top:12px;font-size:12.5px;font-weight:700;color:var(--gold-ink);
  display:flex;align-items:center;gap:5px;text-align:left;
}
.metric .go:hover{gap:8px}

/* ── Two columns ─────────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
.cols>*{min-width:0}

/* Cards sit a little higher and rounder than before. */
.card{border-radius:var(--r-lg);box-shadow:var(--shadow-lift)}
.card>header h2{font-size:16px}

/* ── Quick actions ───────────────────────────────────────────────── */
.quick{margin-top:24px}
.quick .eyebrow{margin-bottom:10px;display:block}
.quick-row{display:flex;flex-wrap:wrap;gap:10px}
.quick-btn{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:13px 15px;min-width:126px;box-shadow:var(--shadow-lift);
  display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  color:var(--ink-2);line-height:1.3;text-align:left;
}
.quick-btn:hover{border-color:var(--gold);color:var(--gold-dk);box-shadow:var(--shadow)}
.quick-btn .ico{font-size:15px;opacity:.8;flex:none}

/* ── Narrow ──────────────────────────────────────────────────────
   The words stay.

   Two earlier versions of this hid them — first by turning the rail into
   a top bar, then by collapsing it to icons below 1080px — and both times
   the report was the same: "I can't see the tabs." Both times I checked
   at 1400px and called it fixed. A 1280px laptop with a browser window
   that is not maximised is under 1080, which is most laptops most of the
   time.

   So the rail narrows by taking space from padding and type, not by
   deleting the only thing that says where you are. Icons are the last
   resort, at a width where a sidebar and readable content genuinely
   cannot both fit.
   ---------------------------------------------------------------- */
@media (max-width:1180px){
  :root{--nav-w:186px}
  .nav-item{font-size:13px;padding:7px 9px;gap:8px}
  .nav-brand{padding:17px 14px 13px}
  .nav-foot{padding:12px 13px}
  .main{padding:26px 24px 80px}
}

@media (max-width:980px){
  :root{--nav-w:168px}
  .nav-item{font-size:12.5px;padding:6px 8px;gap:7px}
  .nav-item .ico{font-size:12px;width:14px}
  .nav-label{font-size:8.5px;padding:0 6px 5px}
  .nav-group{margin-top:11px}
  .main{padding:22px 18px 80px}
  .cols{grid-template-columns:1fr}
}

@media (max-width:760px){
  :root{--nav-w:152px}
  .nav-name{font-size:13px}
  .nav-mark{width:26px;height:26px;font-size:11px}
  .nav-item{font-size:12px;padding:6px 7px}
  .nav-who small,.nav-tenant{display:none}
  .greet h1{font-size:24px}
  .metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .main{padding:18px 14px 70px}
}

/* Only here, where 132px of rail plus readable content stops being
   possible, do the words go — and the name survives as a tooltip. */
@media (max-width:560px){
  :root{--nav-w:56px}
  .nav-brand{padding:14px 0 12px;justify-content:center}
  .nav-brand>div:last-child{display:none}
  .nav-group{padding:0 6px;margin-top:10px}
  .nav-label{font-size:0;padding:0;margin:0 5px 7px;height:1px;background:var(--nav-rule);display:block}
  .nav-item{justify-content:center;padding:9px 0;gap:0;position:relative}
  .nav-item>span:not(.ico):not(.badge){display:none}
  .nav-item .ico{font-size:15px;width:auto}
  .nav-item .badge{position:absolute;margin:0;transform:translate(12px,-11px);
                   min-width:15px;height:15px;font-size:9px}
  .nav-foot{padding:10px 6px}
  .nav-who{justify-content:center}
  .nav-who>div:last-child{display:none}
}

/* ── A maintenance thread ────────────────────────────────────────────
   The tenant's messages sit right, management's left, because a
   conversation somebody has to read twice to work out who said what is
   not doing its job. Deliberately plain: this is a repair request, not
   a chat app, and anything livelier would suggest somebody is waiting
   at the other end. Nothing here notifies anybody. */
.thread { margin: 10px 0 4px; border-left: 2px solid #e2e5eb; padding-left: 12px; }
.thread .msg { margin: 0 0 10px; max-width: 82%; }
.thread .msg.theirs { margin-right: auto; }
.thread .msg.mine { margin-left: auto; text-align: right; }
.thread .msg > div {
  display: inline-block; padding: 7px 11px; border-radius: 10px;
  background: #f4f5f7; color: #16181d; font-size: 14px; line-height: 1.45;
  text-align: left;
}
.thread .msg.mine > div { background: #e8eefb; }
.thread .msg small { display: block; margin-bottom: 3px; font-size: 12px; }

/* ── Stat tiles ──────────────────────────────────────────────────────
   From the gym reference J shared: a ring of colour behind an icon,
   ONE number large, the label small and grey underneath, and an action
   link at the foot.

   The energy in that design does not come from its palette — it comes
   from giving one number room. Our existing .stat puts the number and
   label on a baseline together, which reads as a table row. These are
   cards, and a card can carry a colour without shouting.

   Deliberately built on the semantic colours already in this file
   (pine, rust, amber, gold) rather than importing the reference's blue.
   Those were checked against cream, which is what they sit on here. */
.tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin:0 0 22px;
}
.tile{
  background:var(--card); border:1px solid var(--rule);
  border-radius:12px; padding:16px 16px 13px;
  display:flex; flex-direction:column; gap:9px;
  transition:border-color .12s ease, transform .12s ease;
}
.tile:hover{ border-color:var(--gold-edge); transform:translateY(-1px); }

/* The ring. 40px, the icon centred, the tint carrying the meaning. */
.tile .ring{
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1;
}
.tile.ok   .ring{ background:var(--pine-lt);  color:var(--pine); }
.tile.bad  .ring{ background:var(--rust-lt);  color:var(--rust); }
.tile.warn .ring{ background:var(--amber-lt); color:var(--amber); }
.tile.calm .ring{ background:var(--gold-wash);color:var(--gold-ink); }
.tile.flat .ring{ background:var(--navy-wash);color:var(--navy-2); }

.tile .n{
  font-family:var(--display); font-size:30px; font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--ink);
}
.tile .l{ font-size:12.5px; line-height:1.35; color:var(--ink-3); }
/* The action, in the tile's own colour, so a tile that needs something
   says so twice — once in the ring and once at the foot. */
.tile .go{
  margin-top:auto; padding-top:9px; font-size:12.5px; font-weight:600;
  background:none; border:0; cursor:pointer; text-align:left; padding-left:0;
}
.tile.ok   .go{ color:var(--pine); }
.tile.bad  .go{ color:var(--rust); }
.tile.warn .go{ color:var(--amber); }
.tile.calm .go,
.tile.flat .go{ color:var(--gold-ink); }
.tile .go:hover{ text-decoration:underline; }

/* A number that is zero is not a problem, whatever its tile says. */
.tile.quiet .n{ color:var(--ink-3); font-weight:700; }
.tile.quiet .ring{ background:var(--navy-wash); color:var(--navy-3); }

/* ── Row accents ─────────────────────────────────────────────────────
   The reference marks each schedule row with a coloured left edge, so
   state is readable without reading. Three pixels, and it does more
   work than the pill beside it. */
.row-accent{ border-left:3px solid var(--rule-2); padding-left:13px; }
.row-accent.ok  { border-left-color:var(--pine); }
.row-accent.bad { border-left-color:var(--rust); }
.row-accent.warn{ border-left-color:var(--amber); }
.row-accent.calm{ border-left-color:var(--gold); }

/* ═══ AUDIT-323 · the scheduling workspace ═══════════════════════════════
   Built from the tokens above — navy, gold, cream, pine, rust, amber — and
   the existing .btn/.tag/.card/.inp. Roles get a TONE and always a text
   label; nothing here is said by colour alone. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ws{--tone-a:#e7edf7;--tone-a-ink:#23406f;--tone-b:#e8f0eb;--tone-b-ink:#2c6349;--tone-c:#efe9f6;--tone-c-ink:#57397e;
    --tone-d:#fbefe2;--tone-d-ink:#8f4309;--tone-e:#e6f1f3;--tone-e-ink:#1f5c69;--tone-f:#f6e9ee;--tone-f-ink:#7c2f4d}
.ws-panel,.my{--tone-a:#e7edf7;--tone-a-ink:#23406f;--tone-b:#e8f0eb;--tone-b-ink:#2c6349;--tone-c:#efe9f6;--tone-c-ink:#57397e;
    --tone-d:#fbefe2;--tone-d-ink:#8f4309;--tone-e:#e6f1f3;--tone-e-ink:#1f5c69;--tone-f:#f6e9ee;--tone-f-ink:#7c2f4d}
.tone-a{background:var(--tone-a);color:var(--tone-a-ink);border-color:#c5d3ea}
.tone-b{background:var(--tone-b);color:var(--tone-b-ink);border-color:#c6dccd}
.tone-c{background:var(--tone-c);color:var(--tone-c-ink);border-color:#d8cbe8}
.tone-d{background:var(--tone-d);color:var(--tone-d-ink);border-color:#efd5b6}
.tone-e{background:var(--tone-e);color:var(--tone-e-ink);border-color:#c3dde2}
.tone-f{background:var(--tone-f);color:var(--tone-f-ink);border-color:#e6c9d4}
.tone-none{background:#f3efe8;color:var(--ink-2);border-color:var(--rule)}

.ws-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:12px}
.ws-title{font-family:var(--display);font-size:22px;line-height:1.1;margin-right:2px;white-space:nowrap}
.ws-ctl select{width:auto;min-width:130px;padding:7px 10px;font-size:13.5px}
.ws-where{font-weight:600;font-size:13.5px;color:var(--ink-2);padding:0 4px}
.ws-date{width:134px;padding:6px 8px;font-size:12.5px}
.ws-range{display:flex;align-items:center;gap:5px;margin-right:auto}
.ws-range b{font-size:13.5px;min-width:0;text-align:center;white-space:nowrap;padding:0 4px}
.ws-seg{display:inline-flex;border:1.5px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.ws-seg button{padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink-2);border-right:1px solid var(--rule)}
.ws-seg button:last-child{border-right:none}
.ws-seg button.on{background:var(--navy);color:#fff}
.ws-seg.sm button{padding:5px 11px;font-size:12px}
.ws-tabrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;border-bottom:1.5px solid var(--rule);margin-bottom:14px}
.ws-tabs{display:flex;gap:4px;overflow-x:auto;margin-right:auto}
.ws-actions{display:flex;gap:8px;padding-bottom:7px}
.ws-tabs button{padding:10px 14px;font-weight:600;font-size:13.5px;color:var(--ink-3);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;white-space:nowrap}
.ws-tabs button.on{color:var(--navy);border-bottom-color:var(--gold)}
.ws-scope{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;font-size:12.5px}
.ws-foot{font-size:12px;color:var(--ink-3);margin-top:14px;max-width:96ch;line-height:1.6}
.ws-issue{background:var(--amber-lt);border:1.5px solid #efd5b6;border-radius:var(--r);padding:10px 16px;margin-bottom:12px}
.ws-issue summary{cursor:pointer;font-size:13px}
.ws-issue[open] summary u{display:none}
.ws-issue>.muted{display:block;font-size:12.5px;margin-top:6px}
.ws-issue b{color:var(--amber)}
.ws-issue ul{list-style:none;margin-top:6px;display:grid;gap:6px}
.ws-issue li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #efd5b6;border-radius:var(--r-sm);padding:8px 10px;font-size:13px}

/* week */
.ws-gridwrap{overflow:auto;max-height:calc(100vh - 120px);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-lift)}
.ws-grid{border-collapse:separate;border-spacing:0;width:100%;min-width:1020px;table-layout:fixed}
.ws-grid th,.ws-grid td{border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);vertical-align:top;padding:6px;text-align:left}
.ws-grid thead th{position:sticky;top:0;z-index:3;background:#fcfaf6;padding:0}
.ws-grid thead th.emp,.ws-grid thead th.hrs{padding:10px;font-size:12px;color:var(--ink-3);font-weight:600}
.ws-grid th.emp{position:sticky;left:0;z-index:2;background:#fff;width:150px;font-weight:400}
.ws-grid thead th.emp{z-index:4;background:#fcfaf6}
.ws-grid th.emp b{display:block;font-size:13.5px}
.ws-grid th.emp small{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;font-size:11px;color:var(--ink-3)}
.ws-grid th.emp .ws-chip{margin-top:3px}
.ws-grid .hrs{width:104px;text-align:right}
.ws-grid td.hrs b{display:block;font-size:14px}
.ws-grid td.hrs small{display:block;font-size:10.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.ws-grid th.today,.ws-grid td.today{background:#fbf7ee}
.ws-dayhead{display:block;width:100%;padding:8px 6px;text-align:center}
.ws-dayhead span{display:block;font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.ws-dayhead b{font-size:13.5px}
.ws-dayhead:hover b{text-decoration:underline}
.ws-role{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:20px;border:1px solid;margin:0 3px 3px 0}
.ws-card{display:block;width:100%;text-align:left;border:1.5px solid;border-radius:8px;padding:6px 8px;margin-bottom:5px;font-size:12px;line-height:1.35}
.ws-card .t{display:block;font-weight:700;font-size:12px}
.ws-card .r,.ws-card .x{display:block}
.ws-card .x{font-size:11px;opacity:.9}
.ws-card .st{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;border:1px dashed currentColor;border-radius:10px;padding:0 5px;margin-left:3px}
.ws-card.draft{border-style:dashed;background-image:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.55) 7px 14px)}
.ws-card.open{border-style:dotted}
.ws-card.noloc,.ws-bar-shift.noloc{border-color:var(--amber);border-style:dashed}
.ws-card .nl{color:var(--amber);font-weight:700}
.ws-card:hover{filter:brightness(.97)}
.ws-states{display:flex;flex-wrap:wrap;gap:3px}
.ws-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid var(--rule);color:var(--ink-3);background:#faf8f4;margin:0 3px 3px 0}
.ws-chip.leave{background:var(--navy-wash);border-color:var(--navy-edge);color:var(--navy);font-weight:600}
.ws-chip.unavail{background:var(--rust-lt);border-color:#eccdc7;color:var(--rust);font-weight:600}
.ws-chip.prefers{background:var(--amber-lt);border-color:#efd5b6;color:var(--amber)}
.ws-chip.avail{background:var(--pine-lt);border-color:#c6dccd;color:var(--pine)}
.ws-chip.unknown{border-style:dashed;font-style:italic}
.ws-chip .x{font-weight:700;padding:0 2px}
.ws-addcell{display:block;width:100%;margin-top:3px;padding:3px;border:1px dashed var(--rule);border-radius:6px;font-size:11px;color:var(--ink-3);opacity:0}
.ws-grid td:hover .ws-addcell,.ws-addcell:focus-visible{opacity:1}
.ws-gaps th.emp,.ws-gaps td{background:#fdf6f4}
.ws-open th.emp,.ws-open td{background:#fcfaf6}
.ws-gap{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--rust);border-left-width:5px;border-radius:8px;padding:6px 8px;margin-bottom:5px;font-size:12px;color:var(--rust);line-height:1.35}
.ws-gap b,.ws-gap span{display:block}
.ws-gap span{color:var(--ink-2);font-size:11.5px}
.ws-gap i{font-style:normal;font-weight:700;font-size:11px;text-decoration:underline}
.ws-gap.wide{display:flex;gap:12px;align-items:center}
.ws-gap.wide i{margin-left:auto}
.dash{color:var(--rule);display:block;text-align:center}

/* day */
.ws-day{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow-lift);padding:8px 0 4px;overflow-x:auto}
.ws-tl{min-width:880px}
.ws-tl-row{display:grid;grid-template-columns:150px 1fr;align-items:center;min-height:50px;border-bottom:1px solid var(--rule-2)}
.ws-tl-row.head{min-height:26px}
.ws-tl-row.sep{min-height:34px;background:#fcfaf6}
.ws-tl-row.cov{min-height:46px}
.ws-tl-row .who{padding:6px 12px;font-size:13px}
.ws-tl-row .who small{display:block;font-size:10.5px;color:var(--ink-3)}
.ws-tl-row .lane{position:relative;height:100%;min-height:inherit;margin-right:30px}
.ws-tl .tick{position:absolute;top:4px;transform:translateX(-50%);font-size:10.5px;color:var(--ink-3);font-family:var(--mono);white-space:nowrap}
.ws-tl .grid{position:absolute;top:0;bottom:0;width:1px;background:var(--rule-2)}
.ws-bar-shift{position:absolute;top:8px;bottom:8px;border-radius:8px;overflow:hidden;border:1.5px solid var(--navy-edge);padding:0;background:#fff}
.ws-bar-shift.draft{border-style:dashed}
.ws-bar-shift .seg{position:absolute;top:0;bottom:0;border:none;border-right:1px solid rgba(255,255,255,.9);display:flex;align-items:center;overflow:hidden}
.ws-bar-shift .seg em{font-style:normal;font-size:11px;font-weight:600;padding:0 7px;white-space:nowrap}
.ws-bar-shift .seg.relief{box-shadow:inset 0 0 0 2px var(--navy);z-index:1}
.ws-bar-shift .seg.relief em{font-size:10px;padding:0 3px}
.ws-bar-shift .brk{position:absolute;top:0;bottom:0;z-index:2;background:repeating-linear-gradient(135deg,#fff 0 4px,#d9d2c5 4px 8px);border-left:1.5px solid var(--ink-3);border-right:1.5px solid var(--ink-3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ws-bar-shift .brk em{font-style:normal;font-size:9.5px;font-weight:700;background:#fff;padding:0 2px;border-radius:3px;color:var(--ink-2)}
.cov-seg{position:absolute;top:7px;bottom:7px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;overflow:hidden;white-space:nowrap;border:1px solid}
.cov-seg.ok{background:var(--pine-lt);color:var(--pine);border-color:#c6dccd}
.cov-seg.none{background:#f6f3ee;color:var(--ink-3);border-color:var(--rule-2)}
/* The block is EXACTLY as wide as the deficient interval — that width is the
   claim. So the label is a pill centred over it and allowed to overflow,
   rather than a min-width that would stretch 30 minutes into 50. */
.cov-seg.below{background:var(--rust);border-color:var(--rust);z-index:2;overflow:visible;box-shadow:0 0 0 2px #fff;padding:0}
.cov-seg.below b,.cov-seg.below span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--rust);color:#fff;padding:0 6px;border-radius:10px}
.cov-seg.below b{top:-1px;font-size:11.5px}
.cov-seg.below span{bottom:-3px;font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 0 0 1.5px #fff}
.ws-agenda{display:none;padding:12px 14px}
.ws-agenda h3{font-size:15px;margin-bottom:8px}
.ws-agenda ul{list-style:none;display:grid;gap:8px}
.ws-agenda-item{display:grid;gap:2px;width:100%;text-align:left;border:1px solid var(--rule);border-radius:10px;padding:10px 12px;font-size:13px}

/* panels */
.ws-scrim{position:fixed;inset:0;background:rgba(15,30,56,.32);z-index:40}
.ws-panel{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--card);z-index:41;box-shadow:-12px 0 40px rgba(15,30,56,.18);display:flex;flex-direction:column}
.ws-panel>header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--rule)}
.ws-panel>header h2{font-family:var(--display);font-size:20px;line-height:1.2}
.ws-panel>header h2:focus{outline:none}
.ws-panel>header p{font-size:13px;color:var(--ink-2);margin-top:3px}
.ws-panel .body{flex:1;overflow:auto;padding:16px 20px 24px;display:grid;gap:12px;align-content:start}
.ws-panel>footer{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--rule);background:#fcfaf6}
.ws-panel h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-top:6px}
.ws-panel h4{font-size:12.5px;margin-top:8px}
.ws-form{display:grid;gap:12px}
.ws-form label,.ws-panel label{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ws-form label small,.ws-panel label small{font-weight:400;color:var(--ink-3)}
.ws-form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-form fieldset,.ws-panel fieldset{border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px 12px;display:grid;gap:8px}
.ws-form legend,.ws-panel legend{font-size:12px;font-weight:600;color:var(--ink-3);padding:0 6px}
.ws-panel label.radio{display:flex;gap:8px;align-items:flex-start;font-weight:500}
.ws-panel label.need{background:var(--amber-lt);border:1px solid #efd5b6;border-radius:var(--r-sm);padding:10px}
.brkrow{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:6px;align-items:center}
.hint{font-size:12px;color:var(--ink-3);line-height:1.55}
.ws-err{background:var(--rust-lt);color:var(--rust);border:1px solid #eccdc7;border-radius:var(--r-sm);padding:10px 12px;font-size:13px;display:grid;gap:6px}
.ws-err ul,.ws-warn ul{margin-left:18px}
.ws-warn{background:var(--amber-lt);color:#5f3208;border:1px solid #efd5b6;border-radius:var(--r-sm);padding:10px 12px;font-size:13px;display:grid;gap:6px}
.ws-ok{background:var(--pine-lt);color:var(--pine);border:1px solid #c6dccd;border-radius:var(--r-sm);padding:10px 12px;font-size:13px}
.ws-check{border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px 12px;display:grid;gap:6px;font-size:13px;background:#fcfaf6}
.ws-check ul{list-style:none;display:grid;gap:5px}
.ws-count{border-radius:var(--r);padding:14px 16px;display:grid;gap:2px}
.ws-count b{font-family:var(--display);font-size:30px;line-height:1}
.ws-count small{font-size:11.5px;opacity:.85}
.ws-count.bad{background:var(--rust-lt);color:var(--rust)}
.ws-count.ok{background:var(--pine-lt);color:var(--pine)}
.ws-people{list-style:none;display:grid;gap:8px}
.ws-people li{border:1px solid var(--rule);border-radius:var(--r-sm);padding:9px 11px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px}
.ws-people li.picked{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy-wash)}
.ws-people li>span:not(.tag){color:var(--ink-2);flex-basis:100%;font-size:12.5px}
.ws-preview{border:1.5px solid var(--navy);border-radius:var(--r);padding:12px;display:grid;gap:10px}
.ws-preview .tbl td,.ws-preview .tbl th{padding:6px 8px;font-size:12.5px}
.ws-preview tr.bad td{background:var(--rust-lt)}
.ws-person{border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px 12px;display:grid;gap:8px}
.ws-person h3{margin:0;color:var(--ink);text-transform:none;letter-spacing:0;font-size:14.5px}
.segs,.brks{list-style:none;display:grid;gap:4px;font-size:13px}
.segs em{font-style:normal;color:var(--ink-3);font-size:12px}
.brks li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* team, settings, requests */
.ws-team{width:100%;table-layout:fixed}
.ws-team td,.ws-team th{vertical-align:top;padding:10px 14px;text-align:left}
.ws-team .btn.sm{margin-top:4px}
.ws-mini{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.ws-mini select,.ws-mini .inp{width:auto;padding:4px 6px;font-size:12px}
.ws-mini.wide select,.ws-mini.wide .inp{padding:7px 9px;font-size:13px}
.ws-rolesedit{border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px 10px;margin-top:6px;display:grid;gap:5px;font-size:13px}
.ws-rolesedit label{display:flex;gap:7px;align-items:center}
.ws-notices{list-style:none;margin-top:8px;display:grid;gap:4px;font-size:12.5px}
.ws-notices li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* the employee's phone */
.my{max-width:460px;margin:0 auto;display:grid;gap:12px}
.my-head h1{font-family:var(--display);font-size:24px}
.my-head p{color:var(--ink-3);font-size:13px}
.my-h{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-top:6px}
.my-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:14px 16px;display:grid;gap:8px}
.my-card .top{display:flex;justify-content:space-between;align-items:center}
.my-card .time{font-family:var(--display);font-size:22px;line-height:1.1}
.my-card .where{color:var(--ink-2);font-size:13.5px}
.my-card .brk{font-size:13px}
.my-card .pend{background:var(--amber-lt);border-radius:var(--r-sm);padding:8px 10px;font-size:12.5px;color:var(--amber)}
.my-card .acts,.my-actions{display:flex;flex-wrap:wrap;gap:8px}
.my-card .acts .btn,.my-actions .btn,.my-card .acts select{min-height:44px;flex:1 1 auto}
.my-form{display:grid;gap:8px}
.my-form label{display:grid;gap:3px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.my-form .btn,.my-form .inp,.my-form select{min-height:44px}

@media (max-width:760px){
  .ws-title{font-size:20px;flex-basis:100%}
  .ws-range{margin-right:0;flex-basis:100%;flex-wrap:wrap}
  .ws-range b{min-width:0;flex:1}
  .ws-bar .btn{min-height:42px}
  .ws-tl{display:none}
  .ws-agenda{display:block}
  .ws-day{overflow:visible}
  .ws-addcell{opacity:1}
  .ws-panel{width:100vw}
  .brkrow{grid-template-columns:1fr 1fr}
}

/* AUDIT-339 · 285 — time off is a hard block: grey, labelled, never a "+ Add" */
.ws-grid td.off{background:repeating-linear-gradient(135deg,#eceae6 0 6px,#e4e1db 6px 12px)}
.ws-offcell{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:1px solid #cfcac1;border-radius:6px;background:#e9e6e0;color:var(--ink-2);padding:5px 7px;font:inherit;font-size:11.5px;cursor:pointer}
.ws-offcell b{color:var(--ink);font-weight:700}
.ws-offcell small{color:var(--ink-3);font-size:10.5px}
.ws-chip.off{background:#e9e6e0;border-color:#cfcac1;color:var(--ink-2);font-weight:600;cursor:pointer}
.ws-tl-off{padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.ws-offchip{border:1px solid #cfcac1;background:#e9e6e0;border-radius:20px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer}
.ws-to{border:1px solid var(--rule);border-radius:8px;padding:10px 12px;margin:10px 0;background:#f4f2ee}
.ws-to h3{margin:0 0 4px;font-size:14px}
.ws-changes{margin:0 0 12px;border:1px solid var(--rule);border-radius:8px;background:var(--card);padding:8px 12px}
.ws-changes summary{cursor:pointer}
.ws-changelist{margin:8px 0 0;padding-left:20px;font-size:13px}
.ws-changelist li{margin:3px 0}
.ws-changelist small{display:block;color:var(--ink-3)}
.ws-emails{list-style:none;padding:0;margin:6px 0}
.ws-emails li{border:1px solid var(--rule);border-radius:8px;padding:8px 10px;margin:6px 0}
.ws-emails .subj{font-weight:700;margin-top:2px}
.ws-emails .line{font-size:13px;color:var(--ink-2)}
.ws-mail{white-space:pre-wrap;font-family:var(--mono);font-size:11.5px;background:#faf8f4;border:1px solid var(--rule);padding:8px;border-radius:6px;max-height:320px;overflow:auto}
.ws-blockform{display:flex;flex-wrap:wrap;gap:6px;align-items:end;margin-top:6px}
.ws-blockform small{flex-basis:100%;color:var(--ink-3)}
.ws-closure{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.my-off{background:#e9e6e0;border-color:#cfcac1}
.my-removed{border-left:4px solid var(--amber)}
.my-removed ul{margin:6px 0;padding-left:18px}
/* AUDIT-365 · Fill a form — the field map editor */
.ff-map{overflow-x:auto}
.ff-map table{border-collapse:collapse;width:100%;min-width:880px}
.ff-map th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 6px 6px;font-weight:500}
.ff-map td{padding:4px 6px;border-top:1px solid var(--rule-2);vertical-align:middle}
.ff-map .inp,.ff-map select{padding:6px 8px;font-size:13px}
.ff-map td:first-child{min-width:170px}
.ff-map td:nth-child(3){min-width:200px}