/* Crucial Intake Hub. The Worthing Homes portal's look (David, 8 Oct 2026:
   his apps look like his property portals), copied from its hub.css.
   Crucial Environmental's brand palette, in a calm "soft structural" layout:
   a warm off-white page, white cards that sit in a faint tray (a 6px light
   ring and a hairline round each one, so they read as plates in a frame),
   pill buttons, and slow spring-like motion. Geist is served by the hub
   itself; nothing is loaded from anywhere else.
   Text colours keep WCAG AA contrast: the brand's mid green is too faint for
   white text, so buttons and links use a darker brand green. */

@font-face { font-family:"Geist"; src:url(/static/geist.woff2) format("woff2-variations"), url(/static/geist.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url(/static/geist-mono.woff2) format("woff2-variations"), url(/static/geist-mono.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --slate:#485454; --slate-deep:#333E3E; --slate-soft:#5F6D6B;
  --green:#9CC030; --green-mid:#78A83C; --green-deep:#54903C; --lime:#CCD83C;
  --brick:#B0504A; --bg:#F4F6F1; --line:#E2E6DF; --card:#FFFFFF;

  --ink:#2C3636;
  --action:#4A7F35; --action-hover:#3F6E2D;
  --green-bg:#EDF5E1; --green-ink:#3D6B2A;
  --amber:#B9862B; --amber-bg:#FBF3DD; --amber-ink:#7A5B1A;
  --brick-bg:#F9ECEA; --brick-ink:#8C3B36;
  --chip:#EEF1EB; --tint:#F8F9F6; --hover:#F5F7F2;
  --hair:rgba(51,62,62,.075); --hair-2:rgba(51,62,62,.13);
  --field:#8A9591;
  /* A quiet grey for zeros and other "nothing here" numbers: still 3:1 or better on every surface. */
  --quiet:#7F8A86;

  --r-xl:28px; --r-lg:22px; --r-md:14px; --r-sm:10px;
  --h-compact:38px;
  --spring:cubic-bezier(.32,.72,0,1);
  --out:cubic-bezier(.16,1,.3,1);

  --tray:0 0 0 6px rgba(255,255,255,.6), 0 0 0 7px rgba(51,62,62,.05);
  --lift:0 1px 1px rgba(51,62,62,.03), 0 14px 34px -16px rgba(51,62,62,.16), 0 34px 64px -44px rgba(51,62,62,.2);
  --lift-hi:0 2px 4px rgba(51,62,62,.04), 0 22px 44px -18px rgba(51,62,62,.22), 0 44px 80px -48px rgba(51,62,62,.26);
  --inner:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(51,62,62,.045);

  --font:"Geist", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:"Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --side:276px;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100dvh; background:var(--bg); color:var(--slate);
  font:400 15px/1.55 var(--font); letter-spacing:-.006em;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* The brand strip, and a faint glow and paper grain fixed behind everything. */
body::before {
  content:""; position:fixed; inset:0 0 auto; height:3px; z-index:30;
  background:linear-gradient(90deg, var(--lime), var(--green), var(--green-deep));
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 92% -12%, rgba(204,216,60,.16), transparent 62%),
    radial-gradient(900px 640px at -12% 112%, rgba(84,144,60,.09), transparent 60%);
}

a { color:var(--action); text-underline-offset:3px; text-decoration-thickness:1px; transition:color .3s var(--spring); }
a:hover { color:var(--action-hover); }
h1, h2, h3 { color:var(--ink); margin:0; font-weight:620; }
h1 { font-size:clamp(30px, 3.3vw, 46px); line-height:1.04; letter-spacing:-.038em; text-wrap:balance; overflow-wrap:anywhere; }
h2 { font-size:17px; line-height:1.3; letter-spacing:-.018em; }
h3 { font-size:15px; }
p { margin:0 0 10px; }
b, strong { color:var(--ink); font-weight:620; }
.muted { color:var(--slate-soft); }
.small { font-size:13px; }
.nowrap { white-space:nowrap; }
.right { text-align:right; }
.mono { font-family:var(--mono); font-size:.88em; letter-spacing:0; white-space:nowrap; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ic { flex:none; display:inline-block; vertical-align:-3px; }
.none { color:var(--slate-soft); font-style:italic; }
.sub { display:block; font-size:12.5px; color:var(--slate-soft); }
.bad-text { color:var(--brick-ink); }
.late-text { color:var(--brick-ink); font-weight:620; }
::selection { background:rgba(156,192,48,.32); }

/* ── Shell: a floating side island and the page ─────────────────── */
.shell { display:grid; grid-template-columns:var(--side) minmax(0, 1fr); min-height:100dvh; }
.topbar { display:none; }

.side { position:sticky; top:0; height:100dvh; padding:18px 0 18px 18px; }
.side-in {
  height:100%; display:flex; flex-direction:column; gap:28px; overflow-y:auto; scrollbar-width:none;
  padding:26px 14px 16px; border-radius:var(--r-xl);
  background:rgba(255,255,255,.66); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:var(--tray), var(--lift), var(--inner);
}
.side-in::-webkit-scrollbar { display:none; }
.side-head { display:flex; flex-direction:column; gap:18px; padding:0 10px; }
.brand { display:inline-block; align-self:flex-start; }
.brand img { height:30px; width:auto; display:block; }
.client { margin:0; display:flex; flex-direction:column; gap:1px; }
.client span { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft); }
.client b { font-size:19px; letter-spacing:-.025em; line-height:1.2; }

/* The client this hub is for: a badge in the side menu. */
.client-card {
  display:flex; flex-direction:column; gap:12px; padding:14px 16px 16px; border-radius:18px; background:#fff;
  box-shadow:0 1px 2px rgba(51,62,62,.05), 0 12px 26px -16px rgba(51,62,62,.28), inset 0 0 0 1px rgba(51,62,62,.06);
}
.client-cap { font-size:10.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft); }
.client-name { font-size:19px; font-weight:620; letter-spacing:-.025em; line-height:1.2; color:var(--ink); overflow-wrap:anywhere; }
.side-navs { display:flex; flex-direction:column; gap:24px; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a {
  position:relative; display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:var(--r-md); color:var(--slate); text-decoration:none; font-weight:500; font-size:14.5px;
  transition:background .5s var(--spring), color .3s var(--spring), box-shadow .5s var(--spring), transform .5s var(--spring);
}
.nav a .ic { color:var(--slate-soft); transition:color .3s var(--spring), transform .5s var(--spring); }
.nav a:hover { background:rgba(51,62,62,.045); color:var(--ink); }
.nav a:hover .ic { transform:translateX(1px); }
.nav a.on {
  background:#fff; color:var(--ink); font-weight:620;
  box-shadow:0 1px 2px rgba(51,62,62,.06), 0 8px 18px -10px rgba(51,62,62,.3), inset 0 0 0 1px rgba(51,62,62,.05);
}
.nav a.on .ic { color:var(--green-deep); }
.nav .nav-t { flex:1; min-width:0; }
.count {
  min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--brick); color:#fff;
  font-size:11.5px; font-weight:700; line-height:22px; text-align:center; box-shadow:0 4px 10px -4px rgba(176,80,74,.7);
}
.navgroup { display:flex; flex-direction:column; gap:8px; }
.navlabel { margin:0; padding:0 12px; font-size:10.5px; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-soft); }

.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.linkstate { display:flex; align-items:center; gap:8px; margin:0; padding:0 12px; font-size:12.5px; color:var(--slate-soft); }
.linkstate .dot, .statusline .dot { width:8px; height:8px; border-radius:50%; background:#A3ACA8; flex:none; }
.linkstate.ok .dot, .statusline.ok .dot { background:var(--green-deep); box-shadow:0 0 0 4px rgba(84,144,60,.14); }
.linkstate.bad .dot { background:var(--brick); box-shadow:0 0 0 4px rgba(176,80,74,.14); }
.linkstate.bad { color:var(--brick-ink); }
.linkstate.off .dot { background:transparent; box-shadow:inset 0 0 0 1.5px var(--slate-soft); }
.viewas { margin:0; display:flex; flex-direction:column; gap:8px; }
.viewas select { height:var(--h-compact); font-size:13px; border-radius:999px; }
.viewas button { width:100%; }
.me { display:flex; align-items:center; gap:10px; padding:12px 6px 0 8px; box-shadow:inset 0 1px 0 var(--hair); }
.me form { margin:0; }
.avatar {
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, #F2F8E6, #E2EFD0); color:var(--green-ink); font-size:12.5px; font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(84,144,60,.18);
}
.me .name { flex:1; min-width:0; font-size:13px; line-height:1.25; font-weight:620; color:var(--ink); overflow-wrap:anywhere; }

.main-col { min-width:0; display:flex; flex-direction:column; }
main { width:100%; max-width:1260px; margin:0 auto; padding:58px 52px 72px; flex:1; }
.foot { max-width:1260px; width:100%; margin:0 auto; padding:0 52px 32px; font-size:12.5px; color:var(--slate-soft); }

/* Staff viewing the hub as a client: a dark floating pill. */
.preview {
  position:sticky; top:14px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  margin:16px 52px 0; padding:8px 8px 8px 20px; border-radius:999px;
  background:rgba(44,54,54,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#E9EEE7;
  box-shadow:0 18px 40px -18px rgba(20,28,28,.55);
}
.preview p { margin:0; display:flex; align-items:center; gap:10px; font-size:13.5px; }
.preview b { color:#fff; }
.preview form { margin:0; }
.preview button { background:#fff; color:var(--ink); }

/* ── Page header ───────────────────────────────────────────────── */
.ph { display:flex; justify-content:space-between; align-items:flex-end; gap:20px 32px; flex-wrap:wrap; margin-bottom:42px; }
.ph-text { min-width:0; max-width:820px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:6px; margin:0 0 16px; padding:5px 12px; border-radius:999px;
  font-size:10.5px; font-weight:650; letter-spacing:.17em; text-transform:uppercase; color:var(--green-ink);
  background:rgba(156,192,48,.14); box-shadow:inset 0 0 0 1px rgba(84,144,60,.16);
}
.eyebrow .mono { font-size:11px; letter-spacing:.04em; text-transform:none; }
.ph-sub { margin:14px 0 0; font-size:16px; color:var(--slate); max-width:64ch; }
.ph-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ph-actions form { margin:0; }
.crumb {
  display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; font-size:13px; font-weight:550; text-decoration:none; color:var(--slate-soft);
  transition:color .3s var(--spring), transform .5s var(--spring);
}
.crumb:hover { color:var(--ink); transform:translateX(-2px); }

/* ── Cards (panels): a white plate in a faint tray ─────────────── */
.panel {
  position:relative; background:var(--card); border-radius:var(--r-lg); margin:0 0 32px; overflow:hidden;
  box-shadow:var(--tray), var(--lift), var(--inner);
}
.panel-h {
  display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap;
  padding:20px 26px; box-shadow:inset 0 -1px 0 var(--hair);
}
.panel-h h2 { display:flex; align-items:center; gap:10px; }
.panel-h .ic.muted { color:#A3ACA8; }
.panel-b { padding:24px 26px; }
.panel-b > :last-child { margin-bottom:0; }
.panel.warn::before, .panel.problem::before, .panel.done::before {
  content:""; position:absolute; left:0; top:22px; width:3px; height:26px; border-radius:0 3px 3px 0; background:var(--amber);
}
.panel.problem::before { background:var(--brick); }
.panel.done::before { background:var(--green-deep); }
.more {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:gap .5s var(--spring);
}
.more:hover { gap:9px; }
.help { margin:0; padding:13px 26px; font-size:13.5px; color:var(--slate); background:var(--tint); box-shadow:inset 0 -1px 0 var(--hair); }
.split { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:32px; align-items:start; }
.split > .panel { margin-bottom:32px; }
.narrow { max-width:540px; }

/* ── At a glance: an asymmetric bento of counts ────────────────── */
.bento { display:grid; gap:22px; margin:0 0 44px; }
.bento.board { grid-template-columns:minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); }
.bento.five { grid-template-columns:minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); }
.stat {
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:134px;
  padding:22px 24px; border-radius:var(--r-lg); background:var(--card); color:inherit; text-decoration:none;
  box-shadow:var(--tray), var(--lift), var(--inner);
  transition:transform .7s var(--spring), box-shadow .7s var(--spring);
}
a.stat:hover { transform:translateY(-3px); box-shadow:var(--tray), var(--lift-hi), var(--inner); color:inherit; }
a.stat:active { transform:translateY(-1px) scale(.99); }
.stat-l { font-size:13.5px; font-weight:550; color:var(--slate-soft); max-width:20ch; padding-right:36px; }
.stat-n { font-size:46px; line-height:.95; font-weight:600; letter-spacing:-.045em; color:var(--ink); }
.stat-note { font-size:13px; color:var(--slate); }
.stat-go {
  position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:rgba(51,62,62,.05); color:var(--slate); transition:transform .6s var(--spring), background .4s var(--spring), color .3s;
}
a.stat:hover .stat-go { transform:translate(2px, -2px) scale(1.06); background:var(--action); color:#fff; }
.stat.warn .stat-n { color:var(--amber-ink); }
.stat.good .stat-n { color:var(--green-ink); }
.stat.bad .stat-n { color:var(--brick-ink); }
.stat.zero .stat-n { color:var(--quiet); }
.stat.hero { grid-row:span 2; min-height:290px; background:linear-gradient(165deg, #FFFFFF 30%, #F4F9EA 100%); }
.stat.hero.bad { background:linear-gradient(165deg, #FFFFFF 30%, #FBEFEC 100%); }
.stat.hero .stat-l { font-size:15px; color:var(--slate); }
.stat.hero .stat-n { font-size:clamp(76px, 8vw, 112px); letter-spacing:-.06em; }
.bento.five .stat.hero { grid-row:auto; min-height:134px; }
.bento.five .stat.hero .stat-n { font-size:58px; }

/* ── Booked visits, by day ─────────────────────────────────────── */
.agenda { list-style:none; margin:0; padding:6px 0; }
.day { display:grid; grid-template-columns:62px minmax(0, 1fr); gap:20px; padding:16px 26px; }
.day + .day { box-shadow:inset 0 1px 0 var(--hair); }
.cal {
  align-self:start; display:flex; flex-direction:column; align-items:center; padding:8px 0 9px; line-height:1.1;
  border-radius:16px; background:linear-gradient(170deg, #fff, var(--tint)); box-shadow:inset 0 0 0 1px var(--hair-2), 0 6px 14px -10px rgba(51,62,62,.4);
}
.cal .wd { font-size:10.5px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--green-ink); }
.cal .dd { font-size:25px; font-weight:650; letter-spacing:-.04em; color:var(--ink); }
.cal .mm { font-size:12px; color:var(--slate-soft); }
.day-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.day-item { display:flex; flex-direction:column; gap:4px; }
.day-a { color:var(--ink); text-decoration:none; }
.day-t { font-weight:620; letter-spacing:-.01em; }
.day-a:hover .day-t { color:var(--action); text-decoration:underline; }
.day-item .pill { padding:2px 9px; font-size:11px; margin-right:4px; }
.who { font-weight:620; color:var(--slate-deep); }
.tag {
  display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px; vertical-align:1px;
  font-size:11.5px; font-weight:620; background:var(--amber-bg); color:var(--amber-ink);
}

/* ── Simple lists ──────────────────────────────────────────────── */
.files { list-style:none; margin:0; padding:4px 0; }
.files li { display:flex; align-items:center; gap:14px; padding:14px 26px; }
.files li + li { box-shadow:inset 0 1px 0 var(--hair); }
.file-ic { width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--tint); color:var(--slate-soft); box-shadow:inset 0 0 0 1px var(--hair); }
.files .what { min-width:0; flex:1; display:flex; flex-direction:column; }
.files .what b { overflow-wrap:anywhere; }

/* ── Tables ────────────────────────────────────────────────────── */
.tablewrap { position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; }
.tbl th {
  text-align:left; font-size:10.5px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft); white-space:nowrap;
  padding:14px 16px 12px; box-shadow:inset 0 -1px 0 var(--hair);
}
.tbl td { padding:16px; vertical-align:top; box-shadow:inset 0 -1px 0 var(--hair); }
.tbl tr:last-child td { box-shadow:none; }
.tbl th:first-child, .tbl td:first-child { padding-left:26px; }
.tbl td:first-child { min-width:200px; }
.tbl td.survey { min-width:170px; }
.tbl td.nowrap { width:1%; }
.tbl th:last-child, .tbl td:last-child { padding-right:26px; }
.tbl tbody tr { transition:background .4s var(--spring); }
.tbl tbody tr:hover { background:#FAFBF8; }
.tbl .strong { font-weight:620; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.tbl a.strong:hover { color:var(--action); text-decoration:underline; }
.tbl.compact th { padding:10px 12px; }
.tbl.compact td { padding:10px 12px; font-size:12.5px; }
.tbl.compact th:first-child, .tbl.compact td:first-child { padding-left:26px; }
.tbl tr.dim td { color:var(--slate-soft); }
tr.warnrow td { background:#FDF9EE; }
.clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
td.clamp { display:table-cell; max-width:320px; }

/* ── Pills, chips and flags ────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; border-radius:999px; padding:4px 11px; white-space:nowrap;
  font-size:12px; font-weight:620; line-height:1.3; background:var(--chip); color:var(--slate-deep);
}
.count-pill { padding:2px 9px; font-size:11.5px; }
.pill.received { background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2); }
.pill.arranging { background:var(--chip); color:var(--slate-deep); }
.pill.needs_details { background:var(--brick-bg); color:var(--brick-ink); }
.pill.on_hold { background:var(--amber-bg); color:var(--amber-ink); }
.pill.booked { background:var(--green-bg); color:var(--green-ink); }
.pill.confirmed { background:var(--action); color:#fff; }
.pill.visited { background:#F0F3D9; color:#535F17; }
.pill.cancelled { background:#EEF0EE; color:var(--slate-soft); text-decoration:line-through; }


.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.chips:empty { display:none; }
.flag { display:inline-flex; max-width:100%; border-radius:8px; padding:2px 9px; font-size:11.5px; font-weight:700; line-height:1.45; background:var(--amber-bg); color:var(--amber-ink); }
.ok-text { display:inline-flex; align-items:center; gap:4px; color:var(--green-ink); font-weight:600; font-size:12.5px; }

/* ── Buttons: pills, with an arrow in its own well on the main ones */
.btn, button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px;
  font:620 13.5px/1 var(--font); letter-spacing:-.006em; white-space:nowrap; text-decoration:none; cursor:pointer;
  border:0; border-radius:999px; background:#fff; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-2), 0 1px 2px rgba(51,62,62,.05);
  transition:transform .5s var(--spring), background .4s var(--spring), box-shadow .5s var(--spring), color .3s var(--spring);
}
.btn:hover, button:hover { background:#FBFCF9; color:var(--ink); transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(51,62,62,.22), 0 8px 18px -10px rgba(51,62,62,.32); }
.btn:active, button:active { transform:scale(.98); }
.btn.primary, button.primary {
  background:var(--action); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(30,50,20,.18), 0 10px 22px -12px rgba(74,127,53,.85);
}
.btn.primary:hover, button.primary:hover { background:var(--action-hover); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(30,50,20,.18), 0 16px 28px -14px rgba(74,127,53,.9); }
.btn .ic, button .ic { vertical-align:0; }
.btn:has(.bi), button:has(.bi) { padding-right:5px; }
.bi {
  width:30px; height:30px; margin-left:4px; border-radius:50%; display:inline-grid; place-items:center; flex:none;
  background:rgba(51,62,62,.06); transition:transform .6s var(--spring), background .4s var(--spring);
}
.primary .bi { background:rgba(255,255,255,.17); }
.btn:hover .bi, button:hover .bi { transform:translate(2px, -1px) scale(1.06); }
.btn.small, button.small { height:32px; padding:0 13px; font-size:12.5px; gap:6px; }
.btn.small:has(.bi), button.small:has(.bi) { padding-right:4px; }
.small .bi { width:24px; height:24px; }
.btn.danger, button.danger { color:var(--brick-ink); box-shadow:inset 0 0 0 1px rgba(176,80,74,.45); }
.btn.danger:hover, button.danger:hover { background:var(--brick-bg); color:var(--brick-ink); }
.btn.ghost, button.ghost { background:transparent; box-shadow:inset 0 0 0 1px var(--hair-2); }
.btn.link, button.link { height:auto; padding:0; background:none; box-shadow:none; color:var(--action); font-weight:500; text-decoration:underline; }
.btn.link:hover, button.link:hover { background:none; box-shadow:none; transform:none; color:var(--action-hover); }
.iconlink {
  width:34px; height:34px; padding:0; border-radius:50%; display:inline-grid; place-items:center; flex:none;
  background:transparent; color:var(--slate-soft); box-shadow:none;
}
.iconlink:hover { background:rgba(51,62,62,.06); color:var(--ink); box-shadow:none; }
.wide { width:100%; }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.inline { display:inline; margin:0; }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; }
.btnrow form { margin:0; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--action); outline-offset:3px; }

/* ── Fields ────────────────────────────────────────────────────── */
label { display:block; font-size:12.5px; font-weight:600; color:var(--slate-deep); margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=search],
input[type=tel], input[type=number], input[type=datetime-local], select, textarea {
  width:100%; height:44px; font:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  border:0; border-radius:12px; padding:0 14px; box-shadow:inset 0 0 0 1px var(--field);
  transition:box-shadow .4s var(--spring), background .3s;
}
select {
  appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%236B7877' d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") no-repeat right 13px center / 14px;
}
textarea { height:auto; min-height:104px; padding:12px 14px; resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder { color:#8F9995; opacity:1; }
input:focus, select:focus, textarea:focus { outline:none; box-shadow:inset 0 0 0 1.5px var(--action), 0 0 0 4px rgba(156,192,48,.25); }
input[type=checkbox] { width:17px; height:17px; accent-color:var(--action); vertical-align:-3px; margin:0 6px 0 0; }
input[type=file] { font:inherit; font-size:13px; }
.field { margin-bottom:16px; }
.hint { margin:-6px 0 16px; font-size:12.5px; color:var(--slate-soft); }
label.check { display:inline-flex; align-items:center; margin:0; font-weight:500; font-size:13px; }
/* The few boxes that must be filled in, in forms where most are optional. */
.req { color:var(--brick); margin-left:3px; font-weight:700; }
/* A box the form came back about: the label turns brick and the box wears a brick ring. */
.field.bad > label, .field.bad > .lbl { color:var(--brick-ink); }
.field.bad input, .field.bad textarea, .field.bad select { box-shadow:inset 0 0 0 1.5px var(--brick); }
.field.bad input:focus, .field.bad textarea:focus, .field.bad select:focus { box-shadow:inset 0 0 0 1.5px var(--brick), 0 0 0 4px rgba(176,80,74,.18); }
.field-why { display:block; margin-top:5px; font-size:12.5px; font-weight:500; color:var(--brick-ink); }

.search { position:relative; display:flex; gap:8px; flex:1; max-width:560px; margin:0; align-items:center; }
.search input { flex:1; padding-left:40px; border-radius:999px; height:40px; }
.search-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--slate-soft); display:grid; pointer-events:none; }
.panel-h.tools { padding-block:16px; }

/* Filter tabs: a segmented pill */
.segs { display:inline-flex; padding:4px; gap:2px; background:var(--chip); border-radius:999px; box-shadow:inset 0 1px 2px rgba(51,62,62,.06); flex-wrap:wrap; }
.segs a { padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--slate); text-decoration:none; transition:background .5s var(--spring), color .3s, box-shadow .5s var(--spring); }
.segs a:hover { color:var(--ink); }
.segs a.on { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(51,62,62,.1), 0 4px 10px -6px rgba(51,62,62,.3); }

/* ── Notices ───────────────────────────────────────────────────── */
.notice {
  margin-bottom:26px; padding:14px 20px; border-radius:16px; white-space:pre-line; font-size:14px;
  background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2);
}
.notice.ok { background:var(--green-bg); color:var(--green-ink); box-shadow:inset 0 0 0 1px rgba(84,144,60,.22); }
.notice.bad { background:var(--brick-bg); color:var(--brick-ink); box-shadow:inset 0 0 0 1px rgba(176,80,74,.25); }
.notice.warn { background:var(--amber-bg); color:var(--amber-ink); box-shadow:inset 0 0 0 1px rgba(185,134,43,.28); }
.notice b { color:inherit; }
.notice a { color:inherit; font-weight:620; }
.notice.secret { background:#fff; box-shadow:inset 0 0 0 1.5px var(--green-mid), var(--lift); }
.notice.secret .pw { display:inline-block; margin:8px 0; font:600 20px var(--mono); color:var(--ink); }
.withbtn { display:flex; justify-content:space-between; align-items:flex-start; gap:12px 20px; white-space:normal; }
.withbtn > div { white-space:pre-line; }
.withbtn form { margin:0; flex:none; }
.statusline { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:-18px 0 30px; font-size:13px; color:var(--slate); }
.statusline b { color:var(--green-ink); }

.empty { display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; padding:44px 24px; text-align:center; color:var(--slate-soft); font-size:14px; }
.empty b { font-size:15.5px; color:var(--ink); letter-spacing:-.01em; }
.empty-ic { width:52px; height:52px; margin-bottom:10px; border-radius:50%; display:grid; place-items:center; background:var(--green-bg); color:var(--green-deep); box-shadow:inset 0 0 0 1px rgba(84,144,60,.16); }
.empty .btn { margin-top:14px; }

/* ── Cards (the jobs that need the client's details) ───────────── */
.cards { list-style:none; margin:0; padding:0; }
.card {
  display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.55fr) minmax(0, .9fr) minmax(0, 1.05fr);
  gap:8px 26px; align-items:start; padding:22px 26px; transition:background .5s var(--spring);
}
.card + .card { box-shadow:inset 0 1px 0 var(--hair); }
.card:hover { background:#FBFCF9; }
.card > div { display:flex; flex-direction:column; gap:5px; min-width:0; }
.card .strong { font-size:16.5px; font-weight:620; color:var(--ink); text-decoration:none; letter-spacing:-.018em; overflow-wrap:anywhere; }
.card a.strong:hover { color:var(--action); text-decoration:underline; }
.c-act { align-items:flex-end; text-align:right; gap:8px !important; }
.c-act form { margin:0; }

/* ── One job ───────────────────────────────────────────────────── */
.jobgrid { display:grid; grid-template-columns:minmax(0, 1.62fr) minmax(320px, 1fr); gap:32px; align-items:start; }
.jobgrid-main, .jobgrid-side { min-width:0; }
.facts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 30px; margin:0; }
.facts > div { display:flex; flex-direction:column; gap:4px; padding-top:14px; box-shadow:inset 0 1px 0 var(--hair); }
.facts > .wide { grid-column:1 / -1; }
.facts dt { font-size:10.5px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft); }
.facts dd { margin:0; color:var(--ink); white-space:pre-line; overflow-wrap:anywhere; }
.facts.one { grid-template-columns:minmax(0, 1fr); gap:12px; }
.code { display:inline-block; padding:1px 7px; border-radius:6px; background:var(--tint); box-shadow:inset 0 0 0 1px var(--hair); color:var(--slate-deep); }
details.more-detail { box-shadow:inset 0 1px 0 var(--hair); }
details.more-detail > summary, details.manage > summary {
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:15px 26px; font-size:13.5px; font-weight:600; color:var(--action); transition:background .4s var(--spring);
}
details.more-detail > summary::-webkit-details-marker, details.manage > summary::-webkit-details-marker { display:none; }
details.more-detail > summary::before, details.manage > summary::before {
  content:""; width:18px; height:18px; flex:none; border-radius:50%; background:var(--green-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%233D6B2A' d='M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z'/%3E%3C/svg%3E") no-repeat center / 10px;
  transition:transform .5s var(--spring);
}
details[open].more-detail > summary::before, details[open].manage > summary::before { transform:rotate(90deg); }
details.more-detail > summary:hover, details.manage > summary:hover { background:var(--tint); }
details.more-detail[open] > summary { box-shadow:inset 0 -1px 0 var(--hair); }
details.manage { margin:0; box-shadow:inset 0 1px 0 var(--hair); }
.manage-body {
  display:flex; flex-wrap:wrap; gap:16px 20px; align-items:flex-end;
  margin:0 20px 20px; padding:18px; background:var(--tint); border-radius:18px; box-shadow:inset 0 0 0 1px var(--hair);
}
.ctl { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin:0; }
.ctl + .ctl { margin-top:18px; padding-top:18px; box-shadow:inset 0 1px 0 var(--hair); }
.ctl label { flex:1 1 170px; margin:0; display:flex; flex-direction:column; gap:5px; font-size:12px; }
.ctl input[type=text], .ctl input[type=date], .ctl select { width:auto; height:var(--h-compact); font-size:13.5px; }
.ctl label > input[type=text] { width:100%; }
.ctl input[type=file] { max-width:240px; }
.ctl.diary { flex-basis:100%; flex-direction:column; align-items:flex-start; gap:8px; }

.visit { display:flex; align-items:center; gap:14px; font-size:17px; margin:0 0 20px; }
.visit b { letter-spacing:-.015em; }
.visit-ic { width:46px; height:46px; flex:none; border-radius:15px; display:grid; place-items:center; background:var(--green-bg); color:var(--green-deep); box-shadow:inset 0 0 0 1px rgba(84,144,60,.16); }
.section-title { margin:44px 0 18px; font-size:20px; letter-spacing:-.025em; }
.diarybox { display:flex; flex-direction:column; gap:8px; margin:0 0 20px; }
.diaryline {
  display:flex; align-items:flex-start; gap:10px; margin:0 0 18px; padding:12px 14px; border-radius:14px; font-size:13.5px;
  background:var(--tint); box-shadow:inset 0 0 0 1px var(--hair);
}
.diarybox .diaryline { margin:0; }
.diaryline > .ic { margin-top:2px; color:var(--slate-soft); }
.diaryline > span { flex:1; min-width:0; }
.diaryline .btn { flex:none; }
.diaryline.ok { background:var(--green-bg); box-shadow:inset 0 0 0 1px rgba(84,144,60,.18); }
.diaryline.ok > .ic { color:var(--green-deep); }
.diaryline.bad { background:var(--brick-bg); color:var(--brick-ink); box-shadow:inset 0 0 0 1px rgba(176,80,74,.2); }
.diaryline.bad > .ic, .diaryline.bad b { color:var(--brick-ink); }

details.mini { margin-top:16px; }
details.mini > summary { cursor:pointer; font-size:12.5px; font-weight:600; color:var(--action); width:max-content; }
.stackform { display:flex; flex-direction:column; gap:12px; margin:12px 0 0; }
.stackform label { margin:0; display:flex; flex-direction:column; gap:5px; font-size:12px; }
.stackform input { height:40px; }
.stackform button { align-self:flex-start; }
.stackform .hint { margin:0; }

.row2 { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:10px; }
.row2 label { margin:0; display:flex; flex-direction:column; gap:5px; font-size:12px; }
.row2 input, .row2 select { height:40px; font-size:13.5px; }
ul.plain { margin:0 0 12px; padding-left:18px; }
ul.plain li { margin-bottom:4px; }

/* Notes and the timeline */
.notes { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); }
.note-form { padding:24px 26px; margin:0; box-shadow:inset -1px 0 0 var(--hair); }
.note-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
.timeline { list-style:none; margin:0; padding:24px 26px; display:grid; gap:18px; align-content:start; }
.timeline li { position:relative; padding-left:20px; font-size:14px; overflow-wrap:anywhere; white-space:pre-line; }
.timeline li::before { content:""; position:absolute; left:3px; top:7px; width:7px; height:7px; border-radius:50%; background:#C5CCC7; }
.timeline li::after { content:""; position:absolute; left:6px; top:20px; bottom:-14px; width:1px; background:var(--hair-2); }
.timeline li:last-child::after { display:none; }
.timeline .when { display:block; font-size:12px; color:var(--slate-soft); white-space:normal; }
.timeline .internal, .files .internal { margin-left:8px; padding:1px 8px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.04em; background:var(--amber-bg); color:var(--amber-ink); }

/* ── Uploads ───────────────────────────────────────────────────── */
.upload { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:28px; align-items:stretch; padding:24px; }
.drop {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:240px; padding:32px; text-align:center; margin:0; cursor:pointer;
  border-radius:20px; background:var(--tint);
  box-shadow:inset 0 0 0 1.5px rgba(51,62,62,.16); outline:1.5px dashed rgba(84,144,60,.45); outline-offset:-10px;
  transition:background .5s var(--spring), outline-offset .5s var(--spring), transform .6s var(--spring);
}
.drop:hover, .drop:focus-within, .drop.over { background:var(--green-bg); outline-offset:-6px; }
.drop.over { transform:scale(1.01); }
.drop input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.drop-ic { width:64px; height:64px; margin-bottom:8px; border-radius:20px; display:grid; place-items:center; background:#fff; color:var(--green-deep); box-shadow:var(--lift), inset 0 0 0 1px var(--hair); transition:transform .6s var(--spring); }
.drop:hover .drop-ic { transform:translateY(-3px); }
.drop .big { font-size:18px; font-weight:620; letter-spacing:-.02em; color:var(--ink); }
.drop .small { color:var(--slate); }
.upload-help { font-size:14px; align-self:center; }
.upload-help p:last-child { margin:0; }
.results { list-style:none; margin:0; padding:0; box-shadow:inset 0 1px 0 var(--hair); }
.results:empty { display:none; }
.results li { padding:12px 26px; font-size:13.5px; overflow-wrap:anywhere; }
.results li + li { box-shadow:inset 0 1px 0 var(--hair); }
.results li.bad { color:var(--brick-ink); background:var(--brick-bg); }
.results li.sum { font-weight:700; color:var(--ink); }
.results li a { font-weight:650; }

/* ── Sign-ins ──────────────────────────────────────────────────── */
.adduser { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr) auto; gap:14px; align-items:end; }
.adduser .field { margin:0; }

/* ── Sign in: an editorial split ───────────────────────────────── */
.bare-main { display:block; }
.auth { min-height:100dvh; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); align-items:center; gap:56px; max-width:1240px; margin:0 auto; padding:56px 52px; }
.auth.single { grid-template-columns:minmax(0, 1fr); justify-items:center; max-width:560px; }
.auth.single .auth-card, .auth.single .panel { width:100%; }
.auth-hero { display:flex; flex-direction:column; align-items:flex-start; }
.auth-logo { height:36px; width:auto; display:block; margin-bottom:56px; }
.auth-brands { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:52px; }
.auth-brands > img { height:36px; width:auto; display:block; }
.auth-for { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft); }
.client-tile {
  display:inline-flex; padding:10px 14px; border-radius:16px; background:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.55), 0 0 0 6px rgba(51,62,62,.05), 0 14px 30px -16px rgba(51,62,62,.3), inset 0 0 0 1px rgba(51,62,62,.05);
}
.client-tile img { height:56px; width:auto; display:block; }
.auth-hero h1 { font-size:clamp(42px, 5.6vw, 76px); line-height:.98; letter-spacing:-.05em; font-weight:650; }
.auth-hero h1 span { color:var(--green-deep); }
.auth-lede { margin:26px 0 0; font-size:18px; line-height:1.5; color:var(--slate); max-width:42ch; }
.auth-card { background:var(--card); border-radius:var(--r-xl); box-shadow:var(--tray), var(--lift-hi), var(--inner); }
.auth-form { padding:40px; }
.auth-form h2 { font-size:24px; letter-spacing:-.03em; margin-bottom:24px; }
.auth-form .auth-logo { margin-bottom:32px; height:32px; }
.auth-form .primary.wide { height:48px; margin-top:6px; font-size:14.5px; padding-right:6px; }
.auth-form .primary.wide .bi { width:36px; height:36px; margin-left:auto; }
.auth-form .after { margin:20px 0 0; font-size:13px; color:var(--slate-soft); }
.nf { margin-bottom:12px; }

/* ── The Intake Hub's own pieces ────────────────────────────────── */
[hidden] { display:none !important; }
.pad { margin:0; padding:18px 26px; }
.lbl { display:block; font-size:12.5px; font-weight:600; color:var(--slate-deep); margin-bottom:8px; }

/* The office board: seven counts, the first one large. */
.bento.seven { grid-template-columns:minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.bento.seven .stat.hero { grid-row:span 2; min-height:290px; }
.bento.seven .stat { min-height:134px; }
.tbl.dense td { padding-block:12px; font-size:14px; }

/* ── The journey rail: where a job is, as five steps ────────────────
   Received, Arranging a visit, Booked, Confirmed, Visited. Done steps are
   filled green, the step it is on wears a ring, the rest are hollow. On
   hold pauses it in amber where it got to; cancelled ends it in grey. On a
   phone the labels give way to one caption under the dots. */
.railwrap { margin:-18px 0 30px; }
.rail { list-style:none; display:flex; margin:0; padding:0 2px; }
.rail li { position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:9px; padding:0 14px 0 0; font-size:13px; color:var(--slate-soft); }
.rail li::before { content:""; position:absolute; left:28px; right:8px; top:11px; height:2px; border-radius:2px; background:var(--hair-2); }
.rail li:last-child { flex:0 0 auto; padding-right:0; }
.rail li:last-child::before { display:none; }
.rail li.done::before { background:var(--green-mid); }
.rail-dot {
  position:relative; z-index:1; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:#fff; box-shadow:inset 0 0 0 1.5px var(--hair-2);
}
.rail-dot .ic { vertical-align:0; }
.rail li.done .rail-dot { background:var(--green-deep); box-shadow:none; }
.rail li.now .rail-dot { background:#fff; box-shadow:inset 0 0 0 6px var(--action), 0 0 0 4px rgba(156,192,48,.22); }
.rail li.now.done .rail-dot, .rail:not(.ended):not(.paused) li.now .rail-dot:has(.ic) { background:var(--green-deep); color:#fff; box-shadow:0 0 0 4px rgba(156,192,48,.22); }
.rail-t { font-weight:500; line-height:1.25; letter-spacing:-.005em; }
.rail li.done .rail-t { color:var(--slate); }
.rail li.now .rail-t { color:var(--ink); font-weight:620; }
.rail-s { margin-top:-5px; font-size:12px; font-weight:550; color:var(--green-ink); }
.rail.needs li.now .rail-dot { box-shadow:inset 0 0 0 6px var(--brick), 0 0 0 4px rgba(176,80,74,.16); }
.rail.needs .rail-s { color:var(--brick-ink); }
.rail.paused li.now .rail-dot { background:var(--amber-bg); color:var(--amber-ink); box-shadow:inset 0 0 0 1.5px var(--amber), 0 0 0 4px rgba(185,134,43,.16); }
.rail.paused .rail-s { color:var(--amber-ink); }
.rail.ended li::before, .rail.ended li.done::before { background:var(--hair-2); }
.rail.ended li.done .rail-dot { background:var(--chip); color:var(--slate-soft); box-shadow:none; }
.rail.ended li.now .rail-dot { background:var(--brick-bg); color:var(--brick-ink); box-shadow:inset 0 0 0 1.5px var(--brick); }
.rail.ended .rail-t, .rail.ended li.now .rail-t, .rail.ended li.done .rail-t { color:var(--slate-soft); font-weight:500; }
.rail.ended .rail-s { color:var(--brick-ink); }
.rail-cap { display:none; margin:12px 0 0; font-size:13.5px; color:var(--slate); }
.rail-cap .rail-cap-n { display:inline-block; margin-right:10px; font-size:10.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft); }
.rail-cap b { color:var(--ink); }
.rail-cap .rail-cap-s { display:block; margin-top:2px; color:var(--green-ink); font-weight:550; }
.rail.needs + .rail-cap .rail-cap-s { color:var(--brick-ink); }
.rail.paused + .rail-cap .rail-cap-s { color:var(--amber-ink); }
.rail.ended + .rail-cap .rail-cap-s { color:var(--brick-ink); }
/* The sign-in page's demonstration of it. */
.auth-hero .railwrap { margin:40px 0 0; width:100%; max-width:560px; }
.auth-hero .rail-dot { box-shadow:inset 0 0 0 1.5px rgba(51,62,62,.16); }
.auth-hero .rail-cap { display:none !important; }

/* The rail in miniature, beside a status pill. */
.st { display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; }
.mini-rail { display:inline-flex; gap:3px; align-items:center; }
.mini-rail i { width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.2px var(--hair-2); }
.mini-rail i.done { background:var(--green-deep); box-shadow:none; }
.mini-rail i.now { background:#fff; box-shadow:inset 0 0 0 2.3px var(--action); }
.mini-rail.needs i.now { box-shadow:inset 0 0 0 2.3px var(--brick); }
.mini-rail.paused i.now { background:var(--amber); box-shadow:none; }
.mini-rail.ended i, .mini-rail.ended i.done { background:var(--chip); box-shadow:none; }
.mini-rail.ended i.now { background:#D8C4C2; }

/* ── Through the door today: the board's ledger of ways in ─────────
   One line of tallies under the counts, not a second row of tiles: an
   icon, the number and the way in, with the week's figure at the end. */
.doors { margin:0 0 32px; border-radius:var(--r-lg); background:var(--card); overflow:hidden; box-shadow:var(--tray), var(--lift), var(--inner); }
.doors-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px 18px; flex-wrap:wrap; padding:18px 26px 10px; }
.doors-row {
  list-style:none; margin:0; padding:0 14px 14px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.door { flex:1 0 196px; min-width:196px; scroll-snap-align:start; }
.door a {
  display:flex; align-items:center; gap:10px; height:100%; padding:10px 14px; border-radius:14px; color:inherit; text-decoration:none;
  background:var(--tint); box-shadow:inset 0 0 0 1px var(--hair);
  transition:transform .6s var(--spring), background .4s var(--spring), box-shadow .5s var(--spring);
}
.door a:hover { background:#fff; color:inherit; transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--hair-2), 0 12px 24px -16px rgba(51,62,62,.45); }
.door-ic { color:var(--slate-soft); line-height:0; flex:none; }
.door-n { font-size:20px; line-height:1; font-weight:620; letter-spacing:-.03em; color:var(--ink); min-width:2ch; text-align:right; }
.door-t { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.door-l { font-size:12.5px; font-weight:600; line-height:1.2; color:var(--slate-deep); overflow-wrap:anywhere; }
.door-w { font-size:11.5px; line-height:1.2; color:var(--slate-soft); white-space:nowrap; }
.door.quiet .door-n, .door.quiet .door-ic { color:var(--quiet); }
.door.live a { background:#fff; box-shadow:inset 0 0 0 1px rgba(84,144,60,.24), 0 8px 18px -14px rgba(51,62,62,.3); }
.door.live .door-ic { color:var(--green-deep); }

/* A file form that takes dropped files too. */
.dropzone {
  position:relative; padding:14px 16px; border-radius:16px; background:var(--tint);
  box-shadow:inset 0 0 0 1px var(--hair); outline:1.5px dashed rgba(84,144,60,.4); outline-offset:-7px;
  transition:background .4s var(--spring), outline-offset .4s var(--spring);
}
.dropzone.over { background:var(--green-bg); outline-offset:-4px; }
.dropzone .hint { flex-basis:100%; margin:0; }

/* An issued password: shown once, with a Copy button. */
.notice.secret.issued { white-space:normal; padding:22px 24px; }
.notice.secret .eyebrow { margin-bottom:10px; }
.notice.secret.issued > b { display:block; margin-top:4px; font-size:16px; letter-spacing:-.01em; }
.pw-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 14px; }
.pw-well { display:inline-flex; align-items:center; padding:9px 16px; border-radius:12px; background:var(--tint); box-shadow:inset 0 0 0 1px var(--hair-2); }
.notice.secret .pw-well .pw { margin:0; font-size:21px; overflow-wrap:anywhere; }

/* What a job still needs, as a short list. */
ul.missing { margin:6px 0 0; padding-left:18px; }
ul.missing li { margin:2px 0; }
.notice ul.missing { margin-bottom:0; }

/* The client's tally of statuses. */
.tally { list-style:none; margin:0; padding:10px 26px 18px; display:grid; gap:2px; }
.tally li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; box-shadow:inset 0 -1px 0 var(--hair); }
.tally li:last-child { box-shadow:none; }
.tally a, .tally b { font-size:22px; font-weight:620; letter-spacing:-.03em; color:var(--ink); text-decoration:none; }
.tally a:hover { color:var(--action); }
.tally li.zero b { color:var(--quiet); }

/* The jobs that need the client's details. */
.card.needs { grid-template-columns:minmax(0, 1.2fr) minmax(0, 1.4fr) auto; }

/* Forms: the job form's sections and sites, two boxes to a row. */
.jobform { margin:0; }
.formgrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 20px; align-items:start; }
.formgrid .field { margin-bottom:14px; }
.formgrid .field.wide { grid-column:1 / -1; }
.formgrid label > input, .formgrid label > select, .formgrid label > textarea { margin-top:6px; }
.formgrid label .muted { font-weight:500; }
fieldset { margin:0; padding:0; border:0; min-width:0; }
legend { padding:0; font-size:13px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-soft); }
.site-block { position:relative; margin:0 0 18px; padding:20px 20px 6px; border-radius:18px; background:var(--tint); box-shadow:inset 0 0 0 1px var(--hair); }
.site-block legend { float:left; width:100%; margin-bottom:14px; }
.site-remove { position:absolute; top:12px; right:12px; }
.addsite { display:flex; gap:12px; align-items:center; margin:0; }
/* A client's extra questions (Octopus, Stiltz): a panel like every other
   section of the form, its legend worn as the panel's heading. */
.form-section.extra { padding:0; }
.form-section.extra > legend {
  float:left; width:100%; margin:0; padding:20px 26px; box-shadow:inset 0 -1px 0 var(--hair);
  font-size:17px; font-weight:620; line-height:1.3; letter-spacing:-.018em; text-transform:none; color:var(--ink);
}
.form-section.extra > .panel-b { clear:both; padding-bottom:10px; }
.site-block .formgrid { clear:both; }
.checks { display:flex; flex-wrap:wrap; gap:4px 18px; }
.checks label.check { min-height:36px; padding:4px 0; }
.check.tall { min-height:44px; margin-top:20px; }
.filepick { position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; cursor:pointer;
  font-size:13.5px; font-weight:620; color:var(--ink); background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2); }
.filepick:hover { background:#FBFCF9; }
.filepick input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
/* The real box is the invisible one, so the pill shows its focus instead. */
.filepick:focus-within, .drop:focus-within { outline:2px solid var(--action); outline-offset:3px; }
.filepick input[type=file]:focus, .drop input[type=file]:focus { outline:none; box-shadow:none; }
.filepick.big { height:48px; }
.filepick span { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fileform { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0; }
.fileform .hint { flex-basis:100%; margin:0; order:3; }
/* The office's file form: Add files and Upload on one line, "This is" under them. */
.fileform .inline-l { flex:1 1 100%; order:2; }
.fileform .inline-l select { flex:1; width:auto; max-width:260px; }
.inline-l { display:inline-flex; align-items:center; gap:8px; margin:0; font-weight:500; }
.inline-l select { width:auto; height:var(--h-compact); font-size:13px; }
.formfoot { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 32px; }
.formfoot .btn, .formfoot button { height:48px; }
.formfoot .primary { padding-left:22px; }

/* The office's job filters: four pickers, the search and the button, on a
   grid that fits the panel instead of a row that wraps where it runs out. */
.filters { align-items:end; }
.filters label { display:flex; flex-direction:column; gap:5px; margin:0; font-size:12px; }
.filters select { width:100%; min-width:0; height:var(--h-compact); font-size:13.5px; }
.filters .search { min-width:0; max-width:none; }
.filters .search input { height:var(--h-compact); }
.filters .btn.small, .filters button.small, .filters a.small { height:var(--h-compact); }
@media (min-width: 901px) {
  .filters { display:grid; grid-template-columns:repeat(4, minmax(110px, 1fr)) minmax(170px, 1.4fr) auto auto; gap:10px 12px; }
}
.hint.fixed { display:flex; gap:8px; align-items:flex-start; margin:18px 0 0; }
.hint.fixed .ic { margin-top:2px; }
.timeline.tight { padding:18px 26px; gap:12px; }
.timeline.tight li { font-size:13px; }

/* ── Motion: content rises into place, gently ──────────────────── */
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
main > * { animation:rise .9s var(--out) both; }
main > *:nth-child(2) { animation-delay:.05s; }
main > *:nth-child(3) { animation-delay:.1s; }
main > *:nth-child(4) { animation-delay:.15s; }
main > *:nth-child(5) { animation-delay:.2s; }
main > *:nth-child(6) { animation-delay:.25s; }
main > *:nth-child(n+7) { animation-delay:.3s; }
.auth-hero, .auth-card { animation:rise 1s var(--out) both; }
.auth-card { animation-delay:.12s; }
@supports (animation-timeline: view()) {
  .cards .card, .agenda .day, .files li {
    animation:rise var(--out) both; animation-timeline:view(); animation-range:entry 0% entry 55%;
  }
}

/* ── Smaller screens ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  main { padding:48px 36px 64px; }
  .foot { padding:0 36px 28px; }
  .preview { margin-inline:36px; }
  .card { grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); }
}
@media (max-width: 1080px) {
  .jobgrid { grid-template-columns:minmax(0, 1fr); }
  .jobgrid-side { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 32px; }
  .bento.seven { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .bento.seven .stat.hero { grid-column:1 / -1; grid-row:auto; min-height:150px; }
  .split, .upload { grid-template-columns:minmax(0, 1fr); }
  .bento.five { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .bento.five .stat.hero { grid-column:1 / -1; }
  .auth { grid-template-columns:minmax(0, 1fr); gap:36px; max-width:620px; }
  .auth-logo { margin-bottom:36px; }
}

/* Phones and small tablets: a floating pill bar, and the menu opens as a
   full-screen sheet with its links rising in one after another. */
@media (max-width: 900px) {
  .shell { display:block; }
  .topbar {
    position:sticky; top:10px; z-index:35; display:flex; align-items:center; gap:10px;
    margin:12px 12px 0; height:58px; padding:0 8px 0 18px; border-radius:999px;
    background:rgba(255,255,255,.76); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
    box-shadow:0 0 0 5px rgba(255,255,255,.5), 0 0 0 6px rgba(51,62,62,.05), var(--lift);
  }
  .topbar .brand img { height:26px; }
  .topclient { display:flex; align-items:center; min-width:0; margin-left:12px; padding-left:12px; box-shadow:inset 1px 0 0 var(--hair-2);
    font-size:13.5px; font-weight:620; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topcount { margin-left:auto; padding:4px 11px; border-radius:999px; background:var(--brick); color:#fff; font-size:12px; font-weight:700; text-decoration:none; }
  .topcount:hover { color:#fff; }
  .burger { position:relative; width:42px; height:42px; padding:0; margin-left:auto; border-radius:50%; background:var(--ink); box-shadow:none; }
  .topcount + .burger { margin-left:0; }
  .burger:hover { background:var(--slate-deep); transform:none; box-shadow:none; }
  .burger i { position:absolute; left:13px; width:16px; height:1.5px; border-radius:2px; background:#fff; transition:transform .6s var(--spring), top .6s var(--spring); }
  .burger i:nth-of-type(1) { top:17px; }
  .burger i:nth-of-type(2) { top:24px; }
  .menu-open .burger i:nth-of-type(1) { top:20.5px; transform:rotate(45deg); }
  .menu-open .burger i:nth-of-type(2) { top:20.5px; transform:rotate(-45deg); }
  html.menu-open { overflow:hidden; }

  .side {
    position:fixed; inset:0; z-index:34; height:100dvh; padding:96px 20px 22px;
    visibility:hidden; opacity:0; transition:opacity .55s var(--spring), visibility 0s .55s;
    background:rgba(244,246,241,.84); backdrop-filter:blur(28px) saturate(1.2); -webkit-backdrop-filter:blur(28px) saturate(1.2);
  }
  .menu-open .side { visibility:visible; opacity:1; transition:opacity .55s var(--spring); }
  .side-in { height:100%; padding:0; gap:22px; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; }
  .side-head { display:none; }
  .nav a { font-size:24px; font-weight:600; letter-spacing:-.03em; padding:10px 8px; gap:14px; opacity:0; transform:translateY(26px);
    transition:opacity .7s var(--spring), transform .7s var(--spring), background .4s var(--spring); }
  .nav a .ic { width:24px; height:24px; }
  .nav a.on { background:#fff; }
  .menu-open .nav a { opacity:1; transform:none; }
  .menu-open .nav a:nth-child(1) { transition-delay:.06s; }
  .menu-open .nav a:nth-child(2) { transition-delay:.11s; }
  .menu-open .nav a:nth-child(3) { transition-delay:.16s; }
  .menu-open .navgroup .nav a:nth-child(1) { transition-delay:.21s; }
  .menu-open .navgroup .nav a:nth-child(2) { transition-delay:.26s; }
  .menu-open .navgroup .nav a:nth-child(3) { transition-delay:.31s; }
  .menu-open .navgroup .nav a:nth-child(4) { transition-delay:.36s; }
  .menu-open .navgroup .nav a:nth-child(5) { transition-delay:.41s; }
  .menu-open .nav a:nth-child(n+6) { transition-delay:.46s; }
  .side-foot { opacity:0; transform:translateY(16px); transition:opacity .7s var(--spring) .3s, transform .7s var(--spring) .3s; }
  .menu-open .side-foot { opacity:1; transform:none; }

  main { padding:34px 22px 56px; }
  .foot { padding:0 22px 26px; }
  .preview { margin:14px 12px 0; top:80px; border-radius:20px; }
}

@media (max-width: 760px) {
  .jobgrid-side { display:block; }
  .bento.seven { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .formgrid { grid-template-columns:minmax(0, 1fr); }
  .card.needs { grid-template-columns:minmax(0, 1fr); }
  .bento.board { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bento.board .stat.hero { grid-column:1 / -1; grid-row:auto; min-height:190px; }
  .bento.five { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .notes { grid-template-columns:minmax(0, 1fr); }
  .note-form { box-shadow:inset 0 -1px 0 var(--hair); }
  .adduser { grid-template-columns:minmax(0, 1fr); }
  .facts { grid-template-columns:minmax(0, 1fr); }
}

@media (max-width: 640px) {
  main { padding:28px 16px 48px; }
  .foot { padding:0 16px 22px; }
  h1 { font-size:32px; }
  .ph { margin-bottom:30px; }
  .ph-sub { font-size:15px; }
  .ph-actions { width:100%; }
  .bento { gap:16px; margin-bottom:32px; }
  .stat { min-height:116px; padding:18px; }
  .stat-n { font-size:38px; }
  .stat.hero .stat-n { font-size:72px; }
  /* The client's three small counts in one row under the big one. */
  .bento.five { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  .bento.five .stat.hero { grid-column:1 / -1; margin-bottom:6px; }
  .bento.five .stat:not(.hero) { min-height:0; padding:14px 12px 14px 14px; gap:10px; }
  .bento.five .stat:not(.hero) .stat-l { font-size:12px; padding-right:0; }
  .bento.five .stat:not(.hero) .stat-n { font-size:30px; }
  .bento.five .stat:not(.hero) .stat-go { display:none; }
  .panel { margin-bottom:26px; border-radius:20px; }
  .panel-h, .panel-b { padding-inline:18px; }
  .help { padding-inline:18px; }
  .day { padding:14px 18px; gap:14px; grid-template-columns:54px minmax(0, 1fr); }
  .files li, .results li { padding-inline:18px; }
  .card { grid-template-columns:minmax(0, 1fr); padding:18px; gap:10px; }
  .c-act { grid-column:auto; grid-row:auto; }
  .c-act { align-items:flex-start; text-align:left; flex-direction:row !important; flex-wrap:wrap; }
  .row2 { grid-template-columns:minmax(0, 1fr); }
  .withbtn { flex-direction:column; }
  details.more-detail > summary, details.manage > summary { padding-inline:18px; }
  .manage-body { margin:0 12px 14px; padding:14px; }
  .tbl.compact th:first-child, .tbl.compact td:first-child { padding-left:18px; }
  td.clamp { display:flex; max-width:none; }
  .ctl input[type=file] { max-width:100%; }
  .search { max-width:none; }
  .upload { padding:16px; }
  .auth { padding:32px 18px; }
  .auth-form { padding:28px 22px; }
  .site-block { padding:16px 14px 6px; }
  .filters label { flex:1 1 140px; }

  /* The journey rail: dots in a row, one caption under them. */
  .railwrap { margin:-6px 0 24px; }
  .rail li { padding-right:6px; gap:0; }
  .rail li::before { left:26px; right:2px; top:10px; }
  .rail-dot { width:22px; height:22px; }
  .rail-t, .rail-s { display:none; }
  .rail-cap { display:block; }
  .auth-hero .railwrap { margin-top:28px; }
  .doors { margin-bottom:26px; border-radius:20px; }
  .doors-h { padding:16px 18px 10px; }
  .doors-row { padding:0 10px 12px; }
  .door { flex:0 0 196px; min-width:196px; }
  .dropzone { padding:12px; }

  /* Thumbs: nothing to press is under 40px tall. */
  .segs { gap:4px; }
  .segs a { padding:10px 14px; }
  .btn.small, button.small { height:40px; padding:0 15px; }
  .btn.small:has(.bi), button.small:has(.bi) { padding-right:6px; }
  .iconlink { width:44px; height:44px; }
  .checks label.check { min-height:44px; }
  .ctl label { flex-basis:100%; }

  /* Tables marked .stack become one block per row: the label sits at the
     left of each line, and the cell's words and sub-line flow on the right
     as they do on a desk, however they are made up. */
  .tbl.stack thead { display:none; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display:block; width:100%; }
  .tbl.stack tr { padding:14px 18px; box-shadow:inset 0 -1px 0 var(--hair); }
  .tbl.stack tr:last-child { box-shadow:none; }
  .tbl.stack td { position:relative; min-width:0; width:100%; padding:4px 0 4px 112px !important; box-shadow:none; text-align:left; }
  .tbl.stack td::before { content:attr(data-label); position:absolute; left:0; top:4px; font-size:12.5px; color:var(--slate-soft); text-align:left; }
  .tbl.stack td .st { justify-content:flex-start; }
  .tbl.stack td:first-child { padding:0 0 8px !important; text-align:left; font-size:15.5px; }
  .tbl.stack td:first-child::before { content:none; }
  .tbl.stack td.right { padding-left:0 !important; padding-top:10px !important; text-align:right; }
  .tbl.stack td.right .btnrow { justify-content:flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .nav a, .side-foot { opacity:1 !important; transform:none !important; }
}

@media print {
  .side, .topbar, .preview, .ph-actions, form, details.manage, details.mini, body::after, .doors { display:none !important; }
  .rail-cap { display:none; }
  .shell { display:block; }
  body::before { display:none; }
  .panel, .stat { box-shadow:none; border:1px solid var(--line); }
  main > * { animation:none; }
}