/* Chas Berger survey hub, "soft" look.
   Soft structuralism: a light silver-green ground, floating white panels set
   in a hairline tray, Geist type, round-ended buttons, slow eased motion.
   Crucial's brand greens carry every accent; text and filled buttons use the
   darker green so they stay readable (WCAG AA).
   Shapes: panels 22px inside a 7px tray, fields 12px, buttons and labels round. */

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

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

  --ink:#263030;
  --action:#4A7F35; --action-hover:#3F6E2D;
  --green-bg:#EEF5E2; --green-ink:#3D6B2A;
  --amber:#B9862B; --amber-bg:#FBF3DD; --amber-ink:#7A5B1A; --amber-bar:#E2C47A;
  --brick-bg:#F8E9E7; --brick-ink:#8C3B36;
  --chip:#EEF1EC; --tint:#F8FAF6; --hover:#F3F6F0;
  --hair:rgba(38,48,48,.08); --hair-2:rgba(38,48,48,.13);
  --field:#8C9692;       /* field outlines, 3:1 against white */
  --tray:#EAEEE7;

  --r:22px; --r-field:12px;
  --ring:0 0 0 1px var(--hair), 0 0 0 7px var(--tray), 0 0 0 8px var(--hair), 0 1px 2px rgba(38,48,48,.04), 0 28px 56px -32px rgba(38,48,48,.28);
  --lift:0 0 0 1px var(--hair-2), 0 1px 2px rgba(38,48,48,.06), 0 8px 20px -12px rgba(38,48,48,.25);
  --spring:cubic-bezier(.32,.72,0,1);
  --side:272px;
}

* { box-sizing:border-box; }
html {
  -webkit-text-size-adjust:100%; background:var(--bg);
  font:15px/1.55 "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
body { margin:0; min-height:100dvh; color:var(--slate); position:relative; }
/* Brand strip, then a soft lime and green light behind everything */
body::before { content:""; position:fixed; inset:0 0 auto; height:3px; z-index:40; 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:
    radial-gradient(900px 520px at 8% -8%, rgba(204,216,60,.16), transparent 62%),
    radial-gradient(760px 560px at 102% 108%, rgba(84,144,60,.10), transparent 60%);
}
a { color:var(--action); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--action-hover); }
h1, h2, h3 { color:var(--ink); margin:0; font-weight:600; }
h1 { font-size:clamp(30px, 3.4vw, 46px); line-height:1.04; letter-spacing:-.035em; }
h2 { display:flex; align-items:center; gap:10px; font-size:16px; letter-spacing:-.012em; line-height:1.3; }
h2 .ic { width:20px; height:20px; color:var(--green-deep); }
h3 { font-size:15px; }
p { margin:0 0 10px; }
b, strong { color:var(--ink); font-weight:600; }
.muted { color:var(--slate-soft); }
.small { font-size:13px; }
.nowrap { white-space:nowrap; }
.right { text-align:right; }
.mono { font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:12.5px; letter-spacing:.01em; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ic { width:1.15em; height:1.15em; flex:none; display:inline-block; vertical-align:-.2em; }

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

.side {
  position:sticky; top:18px; height:calc(100dvh - 36px); margin:18px 0 18px 18px; z-index:10;
  display:flex; flex-direction:column; gap:24px; padding:26px 16px 18px; overflow-y:auto; scrollbar-width:thin;
  background:rgba(255,255,255,.74); border-radius:28px; box-shadow:var(--ring);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
}
.side-head { display:flex; flex-direction:column; gap:16px; padding:0 8px; }
.brand { display:inline-block; align-self:flex-start; }
.brand img { height:30px; width:auto; display:block; }
/* Chas Berger's own logo sits on a small white plate: whose hub this is */
.client {
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:0; padding:13px 14px 14px;
  border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--hair), 0 1px 2px rgba(38,48,48,.04);
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft);
}
.client img { display:block; height:56px; width:auto; }
.mbar-client { display:block; height:23px; width:auto; margin-right:auto; padding-left:12px; margin-left:12px; border-left:1px solid var(--hair-2); }
.logos { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.logos img + img { padding-left:16px; border-left:1px solid var(--hair-2); }

.side-navs { display:flex; flex-direction:column; gap:22px; }
.newbtn { width:100%; justify-content:space-between; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a {
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:14px;
  color:var(--slate); text-decoration:none; font-weight:500;
  transition:background .5s var(--spring), color .5s var(--spring), box-shadow .5s var(--spring), transform .5s var(--spring);
}
.nav a .ic { width:19px; height:19px; color:var(--slate-soft); transition:color .5s var(--spring), transform .5s var(--spring); }
.nav a .lbl { flex:1; }
.nav a:hover { background:rgba(255,255,255,.9); color:var(--ink); }
.nav a:hover .ic { color:var(--green-deep); transform:translateX(1px); }
.nav a.on { background:#fff; color:var(--ink); font-weight:600; box-shadow:var(--lift); }
.nav a.on .ic { color:var(--action); }
.count {
  min-width: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;
}
.navgroup { display:flex; flex-direction:column; gap:6px; padding-top:18px; border-top:1px solid var(--hair); }
.navlabel { margin:0 0 4px; padding:0 12px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft); }
.viewas { margin:8px 0 0; }
.viewas button { width:100%; }

.me {
  margin-top:auto; padding:16px 8px 0; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:13px;
}
.me .name { flex-basis:100%; font-weight:600; color:var(--ink); }
.me form { margin:0; }
.me a, .me .link { display:inline-flex; align-items:center; gap:5px; font-size:13px; text-decoration:none; }
.me a:hover, .me .link:hover { text-decoration:underline; }

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

/* Staff viewing the hub as Chas Berger */
.preview {
  position:sticky; top:14px; z-index:20; margin:14px 52px 0; padding:8px 8px 8px 20px; border-radius:999px;
  display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  background:rgba(38,48,48,.92); color:#fff; box-shadow:0 18px 40px -20px rgba(38,48,48,.6);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.preview p { margin:0; display:flex; align-items:center; gap:10px; }
.preview .ic { width:20px; height:20px; color:var(--lime); }
.preview b { color:#fff; }
.preview form { margin:0; }
.preview button { background:#fff; color:var(--ink); box-shadow:none; }
.preview button:hover { background:var(--green-bg); }

/* ── Page header ───────────────────────────────────────────────── */
.ph { display:flex; justify-content:space-between; align-items:flex-end; gap:18px 28px; flex-wrap:wrap; margin-bottom:40px; }
.ph-text { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.ph p { margin:0; font-size:16.5px; color:var(--slate); max-width:62ch; }
.ph-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ph-actions form { margin:0; }
.eyebrow {
  display:inline-flex; align-items:center; padding:5px 13px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-ink); background:rgba(255,255,255,.8); box-shadow:0 0 0 1px var(--hair-2);
}
.crumb { display:inline-flex; align-items:center; gap:6px; margin-bottom:22px; font-size:13.5px; font-weight:500; text-decoration:none; color:var(--slate); }
.crumb:hover { color:var(--ink); }
.crumb .ic { transition:transform .5s var(--spring); }
.crumb:hover .ic { transform:translateX(-3px); }

/* ── Panels: a white plate in a hairline tray ──────────────────── */
.panel { position:relative; background:var(--card); border-radius:var(--r); box-shadow:var(--ring); margin:0 0 36px; overflow:hidden; }
.panel-h {
  display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  padding:20px 26px; border-bottom:1px solid var(--hair);
}
.panel-b { padding:22px 26px; }
.panel-b > :last-child { margin-bottom:0; }
.panel.warn::before, .panel.problem::before, .panel.done::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.panel.warn::before { background:var(--amber); }
.panel.problem::before { background:var(--brick); }
.panel.done::before { background:var(--green-deep); }
.more { display:inline-flex; align-items:center; gap:4px; font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.more .ic { transition:transform .5s var(--spring); }
.more:hover .ic { transform:translate(2px, -2px); }
.help { margin:0; padding:13px 26px; font-size:13.5px; color:var(--slate); background:var(--tint); border-bottom:1px solid var(--hair); }

/* ── Overview: a tile grid ─────────────────────────────────────── */
.bento { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:30px; margin-bottom:36px; align-items:start; }
.bento .panel { margin:0; }
.t-visits { grid-column:span 7; grid-row:span 2; }
.t-stats, .t-reports { grid-column:span 5; }
.t-stats { background:transparent; box-shadow:none; overflow:visible; border-radius:0; }

/* ── At-a-glance figures ───────────────────────────────────────── */
/* Cells wrap onto a second row when there are many, and that row stretches to
   the full width, so no empty grey gap is ever left at the end. */
.band {
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--hair); border-radius:var(--r); overflow:hidden; box-shadow:var(--ring); margin:0 0 40px;
}
.stat {
  flex:1 1 150px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:118px;
  padding:20px 22px; background:var(--card); color:inherit; text-decoration:none;
  transition:background .5s var(--spring);
}
a.stat:hover { background:var(--tint); color:inherit; }
.stat-n { font-size:38px; line-height:1; font-weight:600; letter-spacing:-.045em; color:var(--ink); }
.stat-l { font-size:13px; color:var(--slate-soft); line-height:1.35; }
.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:#B3BBB7; }
.stat.money .stat-n { font-size:30px; }

/* On the overview the four figures are their own tiles, one in deep slate */
.t-stats .band { display:grid; grid-template-columns:1fr 1fr; gap:14px; background:none; box-shadow:none; overflow:visible; border-radius:0; margin:0; }
.t-stats .stat { border-radius:20px; box-shadow:var(--ring); min-height:132px; margin:0; }
.t-stats .stat.hl { background:linear-gradient(155deg, #2E3A3A, #1F2828); }
.t-stats .stat.hl .stat-n { color:var(--lime); }
.t-stats .stat.hl .stat-l { color:rgba(255,255,255,.72); }
.t-stats a.stat.hl:hover { background:linear-gradient(155deg, #354343, #243030); }

/* ── 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 { border-top:1px solid var(--hair); }
.cal {
  align-self:start; display:flex; flex-direction:column; align-items:center; padding:8px 0 9px;
  border-radius:16px; background:var(--tint); box-shadow:0 0 0 1px var(--hair-2); line-height:1.1;
}
.day:first-child .cal { background:var(--ink); box-shadow:none; }
.day:first-child .cal .wd, .day:first-child .cal .mm { color:rgba(255,255,255,.7); }
.day:first-child .cal .dd { color:var(--lime); }
.cal .wd { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-soft); }
.cal .dd { font-size:24px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.cal .mm { font-size:12px; color:var(--slate); }
.jobs { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.job { display:flex; flex-direction:column; gap:1px; }
.job a { font-weight:600; color:var(--ink); text-decoration:none; }
.job a:hover { color:var(--action); text-decoration:underline; }
.job .small { color:var(--slate-soft); }
.tag {
  display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px; vertical-align:1px;
  font-size:11.5px; font-weight:600; background:var(--amber-bg); color:var(--amber-ink);
}

/* ── Simple lists ──────────────────────────────────────────────── */
.files { list-style:none; margin:0; padding:6px 0; }
.files li { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 26px; }
.files li + li { border-top:1px solid var(--hair); }
.files .what { min-width:0; 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:12.5px; font-weight:500; color:var(--slate-soft); white-space:nowrap;
  padding:14px 16px 10px; border-bottom:1px solid var(--hair);
}
.tbl td { padding:15px 16px; border-bottom:1px solid var(--hair); vertical-align:top; }
.tbl tr:last-child td { border-bottom:0; }
.tbl th:first-child, .tbl td:first-child { padding-left:26px; }
.tbl th:last-child, .tbl td:last-child { padding-right:26px; }
.tbl tbody tr { transition:background .4s var(--spring); }
.tbl tbody tr:hover { background:var(--tint); }
.tbl .strong { font-weight:600; color:var(--ink); text-decoration:none; }
.tbl a.strong:hover { color:var(--action); text-decoration:underline; }
.sub { display:block; font-size:13px; color:var(--slate-soft); }
.none { color:#9AA39F; }

.prog { display:flex; flex-direction:column; gap:7px; min-width:140px; }
.bar { display:flex; gap:3px; width:140px; height:6px; border-radius:999px; overflow:hidden; }
.bar i { display:block; min-width:5px; border-radius:999px; }
.p-rep { background:var(--green-deep); }
.p-book { background:var(--green); }
.p-wait { background:var(--amber-bar); }
.p-noacc { background:var(--brick); }

/* ── Survey lines on an order ──────────────────────────────────── */
.lines { list-style:none; margin:0; padding:0; }
.line {
  display:grid; grid-template-columns:26px minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1.45fr) 150px;
  gap:4px 22px; align-items:start; padding:20px 26px;
}
.line + .line { border-top:1px solid var(--hair); }
.line:target { background:#FAFCF6; box-shadow:inset 3px 0 0 var(--green); }
.line > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ln-no { padding-top:2px; font-size:12.5px; color:var(--slate-soft); }
.ln-prop b { font-size:15.5px; letter-spacing:-.01em; overflow-wrap:anywhere; }
.ln-state { align-items:flex-start; }
.ln-act { flex-direction:row !important; flex-wrap:wrap; justify-content:flex-end; gap:6px !important; }
.ln-act form { margin:0; }

details.manage { grid-column:2 / -1; margin-top:10px; }
details.manage summary { width:max-content; cursor:pointer; font-size:13px; font-weight:600; color:var(--action); }
.manage-body {
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end;
  margin-top:12px; padding:16px; background:var(--tint); border-radius:16px; box-shadow:inset 0 0 0 1px var(--hair);
}
.ctl { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin:0; }
.ctl label { margin:0; display:flex; flex-direction:column; gap:5px; font-size:12px; }
.ctl input[type=text], .ctl input[type=date], .ctl select { width:auto; padding:7px 11px; font-size:13.5px; }
.ctl input[type=file] { font-size:12.5px; max-width:240px; }
.diarytext { flex-basis:100%; margin:0; font-size:13px; color:var(--slate-soft); max-width:70ch; }

/* ── Pills and flags ───────────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; border-radius:999px; padding:3px 11px; white-space:nowrap;
  font-size:12px; font-weight:600; line-height:1.45; background:var(--chip); color:var(--ink);
}
.pill.ordered, .pill.received { background:#fff; box-shadow:inset 0 0 0 1px var(--hair-2); }
.pill.booked, .pill.in-progress { background:var(--green-bg); color:var(--green-ink); }
.pill.visited { background:#F0F3D9; color:#535F17; }
.pill.report_issued, .pill.complete { background:var(--action); color:#fff; }
.pill.on_hold, .pill.rebook { background:var(--amber-bg); color:var(--amber-ink); }
.pill.no_access, .pill.revisit-needed { background:var(--brick-bg); color:var(--brick-ink); }
.pill.cancelled { background:#EEF0EE; color:var(--slate-soft); text-decoration:line-through; }
.flag { display:inline-block; width:max-content; border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:600; background:var(--amber-bg); color:var(--amber-ink); }
.flag.no_access, .flag.cancelled { background:var(--brick-bg); color:var(--brick-ink); }

/* ── Forms ─────────────────────────────────────────────────────── */
label { display:block; font-size:13px; font-weight:500; color:var(--ink); margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search],
input[type=tel], input[type=number], select, textarea {
  width:100%; font:inherit; color:var(--ink); background:#fff;
  border:1px solid var(--field); border-radius:var(--r-field); padding:10px 13px;
  transition:border-color .4s var(--spring), box-shadow .4s var(--spring);
}
input::placeholder, textarea::placeholder { color:var(--slate-soft); opacity:1; }
textarea { min-height:92px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--action); box-shadow:0 0 0 4px rgba(74,127,53,.18); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--action); outline-offset:3px; border-radius:12px; }
input[type=checkbox] { width:17px; height:17px; accent-color:var(--action); vertical-align:-3px; }
.field { margin-bottom:16px; }
.hint { margin:-8px 0 16px; font-size:13px; color:var(--slate-soft); }
.row3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn, button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:14px; font-weight:500; line-height:1.2; white-space:nowrap;
  padding:10px 18px; border-radius:999px; border:0; cursor:pointer; text-decoration:none;
  background:#fff; color:var(--ink); box-shadow:var(--lift);
  transition:background .5s var(--spring), box-shadow .5s var(--spring), transform .5s var(--spring), color .5s var(--spring);
}
.btn .ic, button .ic { width:17px; height:17px; }
.btn:hover, button:hover { background:var(--tint); color:var(--ink); box-shadow:0 0 0 1px var(--hair-2), 0 2px 4px rgba(38,48,48,.06), 0 14px 26px -14px rgba(38,48,48,.35); }
.btn:active, button:active { transform:scale(.98); }
.btn.primary, button.primary { background:var(--action); color:#fff; box-shadow:0 1px 2px rgba(38,48,48,.12), 0 12px 24px -12px rgba(63,110,45,.7); }
.btn.primary:hover, button.primary:hover { background:var(--action-hover); color:#fff; }
.btn.danger, button.danger { color:var(--brick-ink); box-shadow:inset 0 0 0 1px rgba(176,80,74,.55); }
.btn.danger:hover, button.danger:hover { background:var(--brick-bg); }
.btn.small, button.small { padding:7px 14px; font-size:13px; }
.btn.icon-only { width:38px; height:38px; padding:0; }
.btn.link, button.link { padding:0; background:none; box-shadow:none; color:var(--action); font-weight:500; }
.btn.link:hover, button.link:hover { background:none; box-shadow:none; color:var(--action-hover); }
button:disabled { opacity:.5; cursor:not-allowed; }

/* Main calls to action: the arrow sits in its own circle and leans forward */
.btn.cta, button.cta { padding:6px 6px 6px 22px; gap:14px; }
.cta .bub {
  display:grid; place-items:center; width:34px; height:34px; border-radius:999px; flex:none;
  background:rgba(255,255,255,.16); transition:transform .6s var(--spring), background .6s var(--spring);
}
.cta .bub .ic { width:17px; height:17px; }
.cta:hover .bub { transform:translate(2px, -1px) scale(1.06); background:rgba(255,255,255,.24); }

.inline { display:inline; margin:0; }
.btnrow { display:flex; gap:6px; flex-wrap:wrap; }
.btnrow form { margin:0; }

.search { position:relative; display:flex; gap:8px; flex:1; max-width:580px; margin:0; }
.search .ic { position:absolute; left:14px; top:50%; translate:0 -50%; width:18px; height:18px; color:var(--slate-soft); pointer-events:none; }
.search input { flex:1; padding-left:40px; border-radius:999px; }

.segs { display:inline-flex; padding:4px; gap:2px; background:var(--chip); border-radius:999px; }
.segs a { padding:6px 15px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--slate); text-decoration:none; transition:background .5s var(--spring), color .5s var(--spring); }
.segs a:hover { color:var(--ink); }
.segs a.on { background:#fff; color:var(--ink); font-weight:600; box-shadow:var(--lift); }

details.disclose { margin-bottom:30px; }
details.disclose > summary { cursor:pointer; width:max-content; font-weight:600; color:var(--action); }
details.disclose > div { margin-top:12px; padding:18px 22px; background:var(--card); border-radius:18px; box-shadow:var(--lift); font-size:14px; max-width:80ch; }

/* ── Notices ───────────────────────────────────────────────────── */
.notice { margin-bottom:28px; padding:14px 20px; border-radius:18px; white-space:pre-line; background:#fff; box-shadow:var(--lift); }
.notice.ok { background:var(--green-bg); color:var(--green-ink); box-shadow:inset 0 0 0 1px #D2E4B8; }
.notice.bad { background:var(--brick-bg); color:var(--brick-ink); box-shadow:inset 0 0 0 1px #EBC9C5; }
.notice.warn { background:var(--amber-bg); color:var(--amber-ink); box-shadow:inset 0 0 0 1px #EDD9A8; }
.notice b { color:inherit; }
.notice form { display:inline; }
.notice.secret { background:#fff; box-shadow:inset 0 0 0 2px var(--green-mid); }
.notice.secret .pw { display:inline-block; margin:8px 0; font:600 22px ui-monospace, Consolas, monospace; color:var(--ink); letter-spacing:.02em; }
.statusline { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; margin:-22px 0 30px; font-size:13.5px; color:var(--slate); }
.statusline + .statusline { margin-top:-20px; }
.statusline b { color:var(--green-ink); font-weight:600; }
.statusline form { margin:0; }

.empty { margin:0; padding:44px 26px; text-align:center; color:var(--slate-soft); }
.empty b { display:block; margin-bottom:4px; font-size:16px; color:var(--ink); }
.clear-list { margin:-14px 0 30px; font-size:13.5px; color:var(--slate-soft); }

/* ── New order ─────────────────────────────────────────────────── */
.prices { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.prices span { padding:4px 12px; border-radius:999px; background:var(--chip); font-size:12.5px; }
.prices .lead { padding:0; background:none; color:var(--slate-soft); }

details.paste { border-bottom:1px solid var(--hair); }
details.paste > summary { cursor:pointer; padding:15px 26px; font-weight:600; color:var(--action); }
details.paste[open] > summary { padding-bottom:8px; }
.paste-body { padding:0 26px 18px; }
.paste-body textarea { min-height:100px; font-family:ui-monospace, Consolas, monospace; font-size:12.5px; }
.paste-row { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-top:12px; }
.paste-row label { margin:0; font-weight:500; }
.paste-row select { width:auto; }

.sheet { border-collapse:separate; border-spacing:0; }
.sheet th { text-align:left; font-size:12.5px; font-weight:500; color:var(--slate-soft); white-space:nowrap; padding:12px 12px 10px; border-bottom:1px solid var(--hair); }
.sheet td { padding:0; border-bottom:1px solid var(--hair); border-right:1px solid var(--hair); }
.sheet td:last-child { border-right:0; }
.sheet input, .sheet select { display:block; width:100%; height:46px; padding:0 12px; border:0; border-radius:0; background:transparent; font-size:14px; }
.sheet input:hover, .sheet select:hover { background:var(--tint); }
.sheet input:focus, .sheet select:focus { box-shadow:inset 0 0 0 2px var(--action); background:#fff; }
.sheet .num { width:44px; padding:0 10px; text-align:center; color:var(--slate-soft); font-size:12px; }
.sheet .price { padding:0 14px; white-space:nowrap; text-align:right; font-weight:600; color:var(--ink); }
.sheet .del { padding:0 12px; }
.sheet .w-addr { min-width:230px; }
.sheet .w-pc { min-width:100px; width:110px; }
.sheet .w-type { min-width:250px; }
.sheet .w-ten { min-width:140px; }
.sheet .w-tel { min-width:120px; }
.sheet .w-notes { min-width:180px; }
.sheet-foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 26px; }

.orderbar {
  position:sticky; bottom:18px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap;
  padding:8px 8px 8px 28px; border-radius:999px; background:rgba(255,255,255,.86); box-shadow:var(--ring);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
}
.tot { display:flex; gap:32px; align-items:baseline; }
.tot div { display:flex; flex-direction:column; }
.tot .n { font-size:22px; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1.2; }
.orderbar-r { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* ── Order details and notes ───────────────────────────────────── */
.facts { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:8px 22px; margin:0; }
.facts dt { font-size:13px; color:var(--slate-soft); }
.facts dd { margin:0; white-space:pre-line; }
.notes { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); }
.note-form { padding:22px 26px; border-right:1px solid var(--hair); margin:0; }
.note-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
.note-actions label { margin:0; font-weight:400; }
.timeline { list-style:none; margin:0; padding:22px 26px; display:grid; gap:16px; align-content:start; }
.timeline li { padding-left:16px; border-left:2px solid var(--line); font-size:14px; overflow-wrap:anywhere; }
.timeline .when { display:block; font-size:12.5px; color:var(--slate-soft); }
.timeline .internal { margin-left:8px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:600; background:var(--amber-bg); color:var(--amber-ink); }

/* ── Uploads ───────────────────────────────────────────────────── */
.upload { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:30px; align-items:stretch; padding:26px; }
.drop {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:240px; padding:30px; text-align:center; margin:0; cursor:pointer;
  border:1.5px dashed #B3BCB7; border-radius:18px; background:var(--tint);
  transition:border-color .5s var(--spring), background .5s var(--spring);
}
.drop:hover, .drop:focus-within { border-color:var(--action); background:var(--green-bg); }
.drop input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.drop-ic { display:grid; place-items:center; width:56px; height:56px; margin-bottom:8px; border-radius:999px; background:#fff; box-shadow:var(--lift); color:var(--action); transition:transform .6s var(--spring); }
.drop-ic .ic { width:26px; height:26px; }
.drop:hover .drop-ic { transform:translateY(-3px); }
.drop .big { font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.drop .small { color:var(--slate); }
.upload-help { font-size:14px; }
.upload-help p:last-child { margin:0; }
.results { list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.results:empty { display:none; }
.results li { padding:11px 26px; border-bottom:1px solid var(--hair); font-size:14px; overflow-wrap:anywhere; }
.results li:last-child { border-bottom:0; }
.results li.bad { color:var(--brick-ink); background:var(--brick-bg); }
.results li.sum { font-weight:600; color:var(--ink); }

/* ── Price list, sign-ins ──────────────────────────────────────── */
.tbl td input[type=text], .tbl td input[type=number] { padding:7px 10px; font-size:14px; }
.w-sort { width:80px; }
.adduser { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr) auto; gap:16px; align-items:end; }
.adduser .field { margin:0; }

/* ── Sign in and password ──────────────────────────────────────── */
.bare main { max-width:none; padding:0; }
.auth { min-height:100dvh; display:grid; place-items:center; padding:48px 18px; }
.auth-card {
  width:min(940px, 100%); display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  background:var(--card); border-radius:30px; overflow:hidden; box-shadow:var(--ring);
}
.auth-side {
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:56px; padding:44px;
  background:
    radial-gradient(420px 320px at 15% 110%, rgba(156,192,48,.32), transparent 70%),
    radial-gradient(360px 280px at 110% -10%, rgba(204,216,60,.30), transparent 70%),
    #F3F8EC;
}
.auth-side img { height:36px; width:auto; display:block; align-self:flex-start; }
.auth-side .client { width:fit-content; margin-bottom:26px; padding:16px 18px; box-shadow:0 0 0 1px var(--hair), 0 18px 36px -24px rgba(38,48,48,.35); }
.auth-side .client img { height:72px; }
.auth-side h1 { font-size:clamp(34px, 4vw, 48px); margin-bottom:14px; }
.auth-side p { margin:0; font-size:16px; color:var(--slate); max-width:30ch; }
.auth-form { padding:48px 44px; }
.auth-form h2 { font-size:22px; letter-spacing:-.025em; margin-bottom:24px; }
.auth-form .primary { width:100%; justify-content:space-between; margin-top:6px; }
.auth-form .after { margin:20px 0 0; font-size:13.5px; color:var(--slate-soft); }
.auth-card.single { width:min(480px, 100%); grid-template-columns:1fr; }
.auth-card.single .logos img { height:32px; width:auto; display:block; }
.auth-card.single .logos img + img { height:35px; }
.narrow { max-width:540px; }

/* ── Arrival: blocks rise into place, top to bottom ────────────── */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) {
  main > *, .bento > * { animation:rise .9s var(--spring) both; }
  main > :nth-child(2), .bento > :nth-child(2) { animation-delay:.06s; }
  main > :nth-child(3), .bento > :nth-child(3) { animation-delay:.12s; }
  main > :nth-child(4) { animation-delay:.18s; }
  main > :nth-child(5) { animation-delay:.24s; }
  main > :nth-child(n+6) { animation-delay:.3s; }
}

/* ── Smaller screens ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  main { padding:46px 34px 56px; }
  .foot { padding:0 34px 28px; }
  .preview { margin-inline:34px; }
  .line { grid-template-columns:26px minmax(0, 1fr) minmax(0, 1fr); }
  .line .ln-state { grid-column:2; }
  .line .ln-act { grid-column:3; grid-row:2; justify-content:flex-start; align-self:center; }
  .line .ln-type { grid-column:3; grid-row:1; }
  .t-visits { grid-column:span 12; grid-row:auto; }
  .t-stats, .t-reports { grid-column:span 6; }
}

@media (max-width: 960px) {
  .notes, .upload { grid-template-columns:minmax(0, 1fr); }
  .note-form { border-right:0; border-bottom:1px solid var(--hair); }
  .adduser { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .t-stats, .t-reports { grid-column:span 12; }
  .t-stats .band { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* Phones and small tablets: a floating bar, and the menu opens full screen */
@media (max-width: 900px) {
  .shell { display:block; }
  .mbar {
    position:sticky; top:12px; z-index:30; margin:12px; padding:8px 8px 8px 18px; border-radius:999px;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(255,255,255,.82); box-shadow:var(--ring);
    -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  }
  .mbar .brand img { height:24px; }
  .mbar .brand { flex:none; }
  .navtoggle { display:block; position:absolute; width:1px; height:1px; opacity:0; }
  .burger { position:relative; display:block; width:44px; height:44px; margin:0; border-radius:999px; background:var(--ink); cursor:pointer; }
  .burger span { position:absolute; left:14px; width:16px; height:1.5px; border-radius:2px; background:#fff; transition:transform .6s var(--spring), top .6s var(--spring); }
  .burger span:first-child { top:18px; }
  .burger span:last-child { top:25px; }
  .navtoggle:checked ~ .mbar .burger span:first-child { top:21.5px; transform:rotate(45deg); }
  .navtoggle:checked ~ .mbar .burger span:last-child { top:21.5px; transform:rotate(-45deg); }
  .navtoggle:focus-visible ~ .mbar .burger { outline:2px solid var(--action); outline-offset:3px; }

  .side {
    position:fixed; inset:0; z-index:25; height:auto; margin:0; border-radius:0; box-shadow:none;
    padding:96px 26px 28px; gap:26px;
    background:rgba(244,246,241,.9); -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%);
    visibility:hidden; opacity:0; transform:translateY(-10px);
    transition:opacity .5s var(--spring), transform .6s var(--spring), visibility 0s .6s;
  }
  .side-head .brand { display:none; }
  .navtoggle:checked ~ .side { visibility:visible; opacity:1; transform:none; transition:opacity .5s var(--spring), transform .6s var(--spring), visibility 0s; }
  html:has(.navtoggle:checked) { overflow:hidden; }
  .nav a { font-size:19px; padding:11px 12px; }
  .nav a .ic { width:22px; height:22px; }
  .nav a, .newbtn, .navgroup, .viewas { opacity:0; transform:translateY(18px); }
  .navtoggle:checked ~ .side .nav a, .navtoggle:checked ~ .side .newbtn, .navtoggle:checked ~ .side .viewas {
    opacity:1; transform:none; transition:opacity .6s var(--spring), transform .7s var(--spring);
  }
  .navtoggle:checked ~ .side .navgroup { opacity:1; transform:none; transition:opacity .6s var(--spring) .2s, transform .7s var(--spring) .2s; }
  .navtoggle:checked ~ .side .nav a:nth-child(2) { transition-delay:.04s; }
  .navtoggle:checked ~ .side .nav a:nth-child(3) { transition-delay:.08s; }
  .navtoggle:checked ~ .side .nav a:nth-child(4) { transition-delay:.12s; }
  .navtoggle:checked ~ .side .nav a:nth-child(5) { transition-delay:.16s; }

  main { padding:26px 18px 44px; }
  .foot { padding:0 18px 24px; }
  .preview { top:84px; margin:4px 12px 0; border-radius:20px; }
}

@media (max-width: 640px) {
  h1 { font-size:32px; }
  .ph { margin-bottom:28px; }
  .ph p { font-size:15.5px; }
  .bento { gap:22px; }
  .t-stats .band { grid-template-columns:1fr 1fr; gap:12px; }
  .t-stats .stat { min-height:108px; }
  .band .stat { flex-basis:40%; }
  .stat { padding:16px 18px; min-height:100px; }
  .stat-n { font-size:30px; }
  .panel { margin-bottom:28px; }
  .panel-h, .panel-b { padding-inline:18px; }
  .help { padding-inline:18px; }
  .row3, .adduser { grid-template-columns:minmax(0, 1fr); }
  .day { padding:14px 18px; gap:14px; grid-template-columns:56px minmax(0, 1fr); }
  .files li { padding:12px 18px; }
  .line { grid-template-columns:22px minmax(0, 1fr); padding:16px 18px; gap:8px 12px; }
  .line .ln-type, .line .ln-state, .line .ln-act { grid-column:2; grid-row:auto; }
  .line .ln-act { justify-content:flex-start; }
  details.manage { grid-column:1 / -1; }
  .ctl input[type=file] { max-width:100%; }
  .orderbar { bottom:10px; border-radius:24px; padding:10px 10px 10px 18px; }
  .orderbar-r .small { display:none; }
  .auth-card { grid-template-columns:minmax(0, 1fr); border-radius:24px; }
  .auth-side { gap:28px; padding:30px; }
  .auth-form { padding:30px; }
  .search { max-width:none; }
  .sheet-foot, details.paste > summary { padding-inline:18px; }
  .paste-body { padding-inline:18px; }

  .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; border-bottom:1px solid var(--hair); }
  .tbl.stack tr:last-child { border-bottom:0; }
  .tbl.stack td { display:flex; justify-content:space-between; gap:16px; padding:3px 0 !important; border:0; text-align:right; }
  .tbl.stack td::before { content:attr(data-label); flex:none; font-size:13px; color:var(--slate-soft); text-align:left; }
  .tbl.stack td:first-child { display:block; padding-bottom:6px !important; text-align:left; font-size:15.5px; }
  .tbl.stack td:first-child::before { content:none; }
  .tbl.stack .prog { align-items:flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

@media print {
  .side, .mbar, .preview, .ph-actions, form, details.manage, .orderbar { display:none !important; }
  .shell { display:block; }
  body::before, body::after { display:none; }
  .panel, .band, .stat { box-shadow:none !important; border:1px solid #ccc; }
}