/* =============================================================================
   Copyright (c) 2026 Integrate IT AI Pty Ltd. All rights reserved.
   The /start/ experience — design tokens lifted from the marketing site (design/),
   kept separate from the app's base.html so the novice flow can be tuned freely.
   ========================================================================== */
:root {
  --bg:#EDF0F4; --ink:#1B2433; --muted:#5B6675; --line:#DBE1E8;
  --accent:#2A6FDB; --accent-ink:#FAFBFC; --card:#FAFBFC;
  --done:#3F9E5A; --done-bg:#E7F4EB; --pending:#B8C0CC; --warn-bg:#FFF5E6;
  --shadow:0 24px 60px -30px rgba(26,26,24,0.3);
}
* { box-sizing:border-box; }
/* reserve the scrollbar so navigating between a long page (landing) and a short one
   (wizard) doesn't shift/resize the centred layout. */
html { scrollbar-gutter:stable; }
body.start {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.start a { color:var(--accent); text-decoration:none; }
.start a:hover { text-decoration:underline; }

/* header */
.start-header {
  position:sticky; top:0; z-index:40; background:rgba(237,240,244,0.9);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
.start-header .inner { max-width:1600px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:16px; }
.start-brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px;
  letter-spacing:-0.02em; color:var(--ink); }
.start-brand .mono { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.18em;
  color:var(--muted); }
.start-header .spacer { flex:1; }
.start-header .who { color:var(--muted); font-size:13px; }
/* which tenant/account you're working in — sys (curator/Internal) gets a loud amber badge */
.tenant-chip { font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px;
  background:#E2ECFB; color:#1F4E8F; white-space:nowrap; }
.tenant-chip.sys { background:#FCEEDD; color:#9a5a16; box-shadow:inset 0 0 0 1px #E9C79A; }

.start-main { max-width:1600px; margin:32px auto; padding:0 24px; }
.start-h1 { font-size:32px; font-weight:800; letter-spacing:-0.03em; margin:0 0 6px; }
.start-sub { color:var(--muted); font-size:16px; margin:0 0 28px; }

/* buttons */
.s-btn { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:15px; padding:12px 20px; border-radius:10px;
  background:var(--accent); color:var(--accent-ink); }
.s-btn:hover { text-decoration:none; opacity:.93; }
.s-btn.ghost { background:transparent; color:var(--ink); border:1px solid #C2CAD4; }
.s-btn.sm { padding:7px 12px; font-size:13px; border-radius:8px; }
/* beat the `.start a {color}` rule (higher specificity) so button labels aren't blue-on-blue */
.start a.s-btn, .start button.s-btn { color:var(--accent-ink); }
.start a.s-btn.ghost, .start button.s-btn.ghost { color:var(--ink); }

/* cards + grid */
.s-card { background:var(--card); border:1px solid var(--line); border-radius:14px; }
.s-card.pad { padding:20px 22px; }
/* generic table in the /start language (muted small headers, hairline row rules) */
.s-table { width:100%; border-collapse:collapse; font-size:14px; }
.s-table th { text-align:left; color:var(--muted); font-weight:600; font-size:12px;
  padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.s-table td { padding:10px 14px; border-bottom:1px solid #EEF1F5; }
.s-table tr:last-child td { border-bottom:0; }
.s-table.card-wrap { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
/* form controls in the /start language (shared by customer + back-office pages) */
.start input[type=text], .start input[type=email], .start input[type=number], .start input[type=password],
.start input[type=search], .start select, .start textarea {
  font-family:inherit; font-size:14px; padding:8px 11px; border:1px solid var(--line);
  border-radius:9px; background:#fff; color:var(--ink); }
.start .s-h2 { font-size:18px; font-weight:700; margin:28px 0 10px; color:var(--ink); }
.s-pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:99px; white-space:nowrap; }
.s-pill.ok { background:#ECFDF5; color:#065F46; }
.s-pill.off { background:#F1F4F8; color:#5B6675; }
.s-rows { display:flex; flex-direction:column; }
/* fixed widths on the right-hand columns so every row's columns line up (each row is
   its own grid — an `auto` actions column made the status column drift per row). */
.s-row { display:grid; grid-template-columns:minmax(0,1fr) 150px 110px 300px; gap:16px;
  align-items:center; padding:16px 20px; border-bottom:1px solid #EAEEF3; }
.s-row:last-child { border-bottom:0; }
/* leading cell: checkbox + plan thumbnail + title/meta, so the 4-col grid stays intact */
.s-rowmain { display:flex; align-items:center; gap:12px; min-width:0; }
.s-thumb { width:60px; height:44px; flex:0 0 auto; object-fit:cover; border-radius:6px;
  border:1px solid #E5E9F0; background:#F0F2F5; }
.s-thumb.noimg { display:flex; align-items:center; justify-content:center; text-align:center;
  border-style:dashed; border-color:#D7DDE6; font-size:9px; line-height:1.15; color:#9AA4B0; }
.s-sample .s-thumb { width:64px; height:48px; }
/* AI summary + latest comment + inline comment box under a project's title */
.s-summary { font-size:12.5px; color:#5B6672; margin-top:6px; line-height:1.45; max-width:640px; }
.s-comment { font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.4; max-width:640px; }
.s-commentform { display:flex; gap:6px; margin-top:7px; max-width:520px; }
.s-commentform input[type=text] { flex:1; min-width:0; padding:5px 9px; font-size:12.5px;
  border:1px solid #DBE2EA; border-radius:6px; }
.s-row .title { font-weight:700; font-size:15px; }
.s-row .meta { color:var(--muted); font-size:13px; }
.s-row .actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* badges + status */
.s-badge { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:0.08em; padding:3px 9px; border-radius:20px; background:#E2ECFB; color:#1F4E8F; }
.s-status { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); }
.s-status .dot { width:8px; height:8px; border-radius:50%; background:var(--pending); display:inline-block; }
.s-status.done .dot { background:var(--done); }
.s-status.processing { color:var(--accent); }
.s-status.processing .dot { background:var(--accent); animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* sample callout */
.s-sample { background:linear-gradient(180deg,#FAFBFC,#F3F7FF); border:1.5px solid #C3D8F5;
  border-radius:14px; padding:20px 22px; display:flex; align-items:center; gap:18px;
  box-shadow:var(--shadow); margin-bottom:24px; }
.s-sample .grow { flex:1; }

/* stepper (used by the wizard, Phase B) — centred to align with the step cards */
.s-stepper { display:flex; align-items:center; gap:10px;
  max-width:760px; margin:8px auto 24px; }
.s-step { display:flex; align-items:center; gap:9px; flex:none; }
.s-step .num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700; color:#fff; background:var(--pending); }
.s-step.done .num { background:var(--done); }
.s-step.current .num { background:var(--accent); }
.s-step .lbl { font-size:13px; color:var(--muted); white-space:nowrap; }
.s-step.current .lbl { color:var(--ink); font-weight:700; }
/* connector bar is a SIBLING of .s-step — flex:1 so steps space out evenly across the row */
.s-stepper > .bar { flex:1; min-width:16px; height:2px; background:var(--line); border-radius:2px; }

.s-empty { text-align:center; padding:56px 24px; color:var(--muted); }
.s-muted { color:var(--muted); }

/* styled confirmation dialog */
.cm-overlay { position:fixed; inset:0; z-index:300; background:rgba(20,24,33,.5);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); align-items:center; justify-content:center; }
.cm-box { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;
  box-shadow:0 30px 70px -25px rgba(20,24,33,.6); max-width:420px; width:calc(100% - 40px); }
.cm-title { font-size:18px; font-weight:800; margin-bottom:6px; }
.cm-msg { color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:20px; }
.cm-actions { display:flex; justify-content:flex-end; gap:10px; }
.s-btn.danger, .start button.s-btn.danger { background:#dc2626; color:#fff; }

/* =============================================================================
   Room editor (redesigned room finder) — docs/plans/room-finder-redesign.md
   ========================================================================== */
.layout{display:flex;gap:16px;align-items:flex-start}
.pages{width:250px;flex:none;display:flex;flex-direction:column;gap:12px;max-height:72vh;overflow:auto;padding:2px}
.pages .cap{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);padding:0 2px 2px}
/* flex:none so the column flexbox doesn't SHRINK thumbnails to fit its height — they
   keep full height and the rail scrolls (this is why they looked tiny before). */
.thumb{flex:none;position:relative;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;overflow:hidden;text-decoration:none;display:block}
.thumb:hover{border-color:#9FB6E0;text-decoration:none}
.thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
/* cover+top so the sheet fills the thumbnail edge-to-edge (no letterbox margins) — reads much larger */
.thumb .pic{height:200px;width:100%;object-fit:cover;object-position:top;background:#f0f2f5;display:block}
.thumb .lbl{font-size:12px;padding:6px 8px;color:var(--muted);text-align:center;border-top:1px solid #EEF1F5}
.thumb.active .lbl{color:var(--accent);font-weight:700}
/* red dot = this sheet has a labelled wet room not yet boxed (worth reviewing) */
.thumb.review{border-color:#f3b9b9}
.thumb .dot{position:absolute;top:8px;right:8px;width:13px;height:13px;border-radius:50%;background:#e23b3b;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:2;animation:pulse 1.5s ease-in-out infinite}
.pages .hint{font-size:11px;color:var(--muted);line-height:1.5;padding:4px 2px}
.main{flex:1;min-width:0}

.cmdbar{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex-wrap:wrap}
.cmdbar .spacer{flex:1}
.cmd-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted)}
.cmdbar select.plan{font-family:inherit;font-size:14px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;max-width:280px}

.infobar{display:flex;align-items:center;gap:14px;background:#F3F7FF;border:1px solid #D6E2F7;border-radius:12px;padding:11px 16px;margin-top:12px}
.infobar .ico{font-size:18px;flex:none}
.infobar .facts strong{font-size:14px;display:block}
.infobar .facts .dim{font-size:12px;color:var(--muted)}
.infobar .spacer{flex:1}
.pill{font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;white-space:nowrap}
.pill.ok{background:#E7F4EB;color:#2f7d46}.pill.warn{background:#FFF1DB;color:#9a6a16}

.stagewrap{position:relative;margin-top:14px}
.stage{position:relative;height:72vh;overflow:auto;border:1px solid var(--line);border-radius:12px;
  background-color:#EDF0F4;
  background-image:linear-gradient(#dbe1e8 1px,transparent 1px),linear-gradient(90deg,#dbe1e8 1px,transparent 1px);
  background-size:26px 26px;background-position:-1px -1px}
.page{position:relative;width:62%;margin:28px auto;background:#fff;border:1px solid #d2dae3;border-radius:4px;
  box-shadow:0 18px 44px -22px rgba(26,26,24,.45);touch-action:none}
.page #plan{display:block;width:100%;height:auto;border-radius:4px;user-select:none;-webkit-user-drag:none}
#boxLayer{position:absolute;inset:0;z-index:4}
/* Boxes must read clearly over dense architectural linework: thick border + a white
   halo (outer box-shadow) so the outline never disappears into the plan's own lines. */
/* outline-only (no page tint) — the bold border + white halo do all the visibility work */
#boxLayer .box{position:absolute;border:3px solid var(--accent);background:transparent;border-radius:3px;
  box-sizing:border-box;box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 2px 8px rgba(42,111,219,.35)}
#boxLayer .box.ai{border-style:dashed;border-color:#d99125;background:transparent}
#boxLayer .box .tag{position:absolute;top:-12px;left:6px;background:var(--accent);color:#fff;font-size:11px;
  font-weight:700;padding:2px 9px;border-radius:11px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.28)}
#boxLayer .box.ai .tag{background:#d99125}
/* a freshly drawn box pops once so it's obvious the room registered */
#boxLayer .box.just{animation:boxpop .45s ease-out}
@keyframes boxpop{0%{box-shadow:0 0 0 6px rgba(42,111,219,.45),0 0 0 1.5px #fff}
  100%{box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 2px 8px rgba(42,111,219,.35)}}

.dock{position:absolute;display:flex;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px -12px rgba(26,26,24,.35);-webkit-backdrop-filter:saturate(140%) blur(4px);
  backdrop-filter:saturate(140%) blur(4px);padding:6px;gap:6px;z-index:5}
.dock .t{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--ink);
  font-family:inherit;font-weight:600;font-size:13px;padding:8px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
.dock .t:hover{background:#EEF3FE}.dock .t.active{background:var(--accent);color:#fff}
.dock .sep{width:1px;background:var(--line);margin:4px 2px}
.dock-cap{position:absolute;top:-9px;left:12px;background:#fff;border:1px solid var(--line);border-radius:20px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--muted);padding:1px 8px}
.dock.tl{top:14px;left:14px}
.dock.tr{top:14px;right:14px}
.dock.lc{left:14px;top:50%;transform:translateY(-50%);flex-direction:column;align-items:stretch}
.dock.br{right:14px;bottom:14px;flex-direction:column;align-items:stretch}
.zoom .t{justify-content:center;min-width:40px}
.zlabel{text-align:center;font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace;padding:2px}

/* responsive: editor is desktop+tablet; reflow on narrow, nudge on phone */
@media (max-width:760px){
  .layout{flex-direction:column}
  .pages{width:100%;flex-direction:row;max-height:none;overflow-x:auto}
  .thumb{flex:none;width:120px}
}

/* coverage markers — a labelled wet room with no box yet (dismissable). The layer
   passes clicks through (so you can still draw under a marker); only the × is clickable. */
#markerLayer{position:absolute;inset:0;z-index:7;pointer-events:none}
#markerLayer .marker{position:absolute;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;
  background:#e23b3b;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);animation:pulse 1.5s ease-in-out infinite}
#markerLayer .marker .mx{position:absolute;top:-12px;right:-12px;width:18px;height:18px;border-radius:50%;
  border:1px solid #ccc;background:#fff;color:#9b2c2c;font-size:12px;line-height:14px;cursor:pointer;padding:0;
  pointer-events:auto;animation:none}

/* room name callouts (leader line + bubble) — user-selectable label mode */
#leaderSvg{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
#labelLayer{position:absolute;inset:0;pointer-events:none;z-index:6}
#labelLayer .callout{position:absolute;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:11px;white-space:nowrap;transform:translateY(-50%);box-shadow:0 3px 8px rgba(0,0,0,.2)}

/* room editor — selected box + resize handle + room-details panel */
#boxLayer .box.sel{border-width:4px;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 5px rgba(42,111,219,.3)}
/* untyped = drawn but no room type yet: still boldly visible (amber halo), just dashed to nudge a type */
#boxLayer .box.untyped{border-color:#e8851a;border-style:dashed;background:transparent;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 2px 8px rgba(232,133,26,.4)}
#boxLayer .box.untyped .tag{background:#e8851a}
#boxLayer .box.drawing{border-style:dashed;border-color:#1565ff;background:rgba(42,111,219,.10)}
#boxLayer .box .rs{position:absolute;right:-7px;bottom:-7px;width:15px;height:15px;background:#fff;
  border:2px solid var(--accent);border-radius:3px;cursor:nwse-resize}
.roompanel{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;display:flex;align-items:center;gap:10px;min-height:54px;flex-wrap:wrap}
.roompanel .rpf{font-family:inherit;font-size:14px;padding:8px 11px;border:1px solid var(--line);
  border-radius:9px;background:#fff;max-width:150px;width:auto}

/* rooms-on-this-sheet list: live proof every drawn room registered */
.roomlist{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.roomlist .rl-cap{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.rl-items{display:flex;flex-wrap:wrap;gap:8px}
.rl-empty{font-size:13px;color:var(--muted)}
.rl-chip{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;cursor:pointer;
  background:#fff;border:1.5px solid var(--accent);color:var(--ink);border-radius:999px;padding:5px 8px 5px 11px}
.rl-chip b{color:var(--accent);font-weight:700}
.rl-chip.sel{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(42,111,219,.35)}
.rl-chip.sel b{color:#fff}
.rl-chip.untyped{border-color:#e8851a}.rl-chip.untyped b{color:#e8851a}
.rl-chip.untyped.sel{background:#e8851a}.rl-chip.untyped.sel b{color:#fff}
.rl-chip .rl-txt{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-chip .rl-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.07);color:inherit;font-size:13px;line-height:1}
.rl-chip .rl-x:hover{background:#e23b3b;color:#fff}

/* fullscreen: fill the screen (no black band) + a discoverable close button */
#stagewrap:fullscreen{background:var(--bg)}
#stagewrap:fullscreen .stage{height:100vh;border-radius:0;border:0}
#stagewrap:-webkit-full-screen{background:var(--bg)}
#stagewrap:-webkit-full-screen .stage{height:100vh;border-radius:0;border:0}
.fs-close{position:absolute;top:14px;right:14px;display:none;z-index:9}
#stagewrap:fullscreen .fs-close{display:inline-flex}
#stagewrap:-webkit-full-screen .fs-close{display:inline-flex}

/* dwelling pins — the layer passes clicks through (so you can draw under it); only
   the pins themselves are interactive. (Without this, the full-plan pin layer
   intercepts every click and breaks drawing + selecting.) */
#pinLayer{position:absolute;inset:0;z-index:8;pointer-events:none}
#pinLayer .pin{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:2px;pointer-events:auto;
  background:#fff;border:1px solid #C2CAD4;border-radius:14px;padding:2px 5px 2px 4px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
#pinLayer .pinhead{cursor:grab;font-size:14px;user-select:none}
#pinLayer .pinname{border:0;font-family:inherit;font-size:12px;font-weight:700;width:60px;background:transparent;color:var(--ink)}
#pinLayer .pinname:focus{outline:1px solid var(--accent);border-radius:3px}
#pinLayer .pinrm{border:0;background:transparent;color:#9b2c2c;font-size:13px;cursor:pointer;padding:0 2px;line-height:1}

/* loupe — mirror room boxes inside the magnifier (green = the box being drawn) */
#reLoupe{overflow:hidden}
#reLoupe .maglayer{position:absolute;inset:0;pointer-events:none}
#reLoupe .mbox{position:absolute;border:4px solid #1565ff;box-sizing:border-box;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
#reLoupe .mbox.ai{border-color:#ff8f00;border-style:dashed}
#reLoupe .mbox.drawing{border-color:#00e676;border-width:4px;background:rgba(0,230,118,.12)}

/* ============================================================================
   Takeoff review (Focus + Overview) — see docs/plans/takeoff-review-redesign.md
   ========================================================================== */
.tk-banner{margin-top:14px;padding:13px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tk-banner .pi-main{display:flex;flex-direction:column;gap:2px}
.tk-banner .pi-main strong{font-size:16px;font-weight:800}
.tk-banner .pi-addr{color:var(--muted);font-size:13px}
.tk-banner .pi-tag{display:flex;flex-direction:column;gap:1px;font-size:13px;font-weight:600}
.tk-banner .cap{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--muted)}

.tk-nudge{margin-top:12px;padding:10px 16px;background:var(--warn-bg);border:1px solid #F0D9A8;border-radius:11px;
  display:flex;align-items:center;gap:10px;font-size:13px}

.tk-actions{margin-top:12px;padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tk-actions .tk-est{font-weight:800;font-size:16px}
.tk-actions .tk-est small{font-weight:600;color:var(--muted);font-size:12px}
.pill{font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap;display:inline-block}
.pill.ok{background:var(--done-bg);color:#1f7a44}
.pill.warn{background:#FDEFD6;color:#9a6a16}

.tk-modebar{margin:16px 0 12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.seg{display:inline-flex;background:#E4E9F0;border-radius:11px;padding:4px}
.seg button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:13px;color:var(--muted);
  padding:8px 16px;border-radius:8px;cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}

.tk-panel{padding:0}
.tk-stub{padding:40px 28px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.tk-stub strong{font-size:17px}

/* ---- Focus mode ---------------------------------------------------------- */
.fx-nav{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;margin-bottom:14px;flex-wrap:wrap}
.fx-nav #fxCounter{font-size:14px}
.fx-sel{font-family:inherit;font-size:13px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.fx-progress{flex:1;min-width:120px;height:8px;background:#E2E7EE;border-radius:99px;overflow:hidden}
.fx-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}

.fx-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
.fx-cropcard{padding:14px}
.fx-cropctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;margin-bottom:10px}
.fx-chk{display:inline-flex;align-items:center;gap:5px;font-size:12px;margin:0}
.fx-color{width:28px;height:24px;padding:0;border:1px solid var(--line);border-radius:5px}
.fx-cropwrap{border:1px solid var(--line);border-radius:10px;background:#fff;height:60vh;overflow:auto;position:relative}
.fx-stage{position:relative;width:100%}
#fxImg{display:block;width:100%;height:auto}
#fxImg.zoomed{cursor:grab}#fxImg.panning{cursor:grabbing}
.fx-box{position:absolute;border:3px solid #ffeb3b;box-shadow:0 0 0 1px rgba(0,0,0,.35);border-radius:2px;cursor:move}
.fx-box.dirty{border-color:#0f766e}
.fx-box .h{position:absolute;width:10px;height:10px;background:#ffeb3b;border:1px solid #333;border-radius:1px}
.fx-box.dirty .h{background:#0f766e}
.fx-box .h.nw{left:-6px;top:-6px;cursor:nwse-resize}.fx-box .h.ne{right:-6px;top:-6px;cursor:nesw-resize}
.fx-box .h.sw{left:-6px;bottom:-6px;cursor:nesw-resize}.fx-box .h.se{right:-6px;bottom:-6px;cursor:nwse-resize}
.fx-box .h.n{left:50%;top:-6px;margin-left:-5px;cursor:ns-resize}.fx-box .h.s{left:50%;bottom:-6px;margin-left:-5px;cursor:ns-resize}
.fx-box .h.w{left:-6px;top:50%;margin-top:-5px;cursor:ew-resize}.fx-box .h.e{right:-6px;top:50%;margin-top:-5px;cursor:ew-resize}
#fxEmpty{padding:24px;text-align:center}
.fx-planwrap{position:relative;border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:70vh;margin-top:10px}
#fxPlanInner{position:relative;width:100%}#fxPlanImg{width:100%;display:block}
#fxPlanBox{position:absolute;border:3px solid #dc2626;box-shadow:0 0 0 9999px rgba(0,0,0,.35);display:none;pointer-events:none}
#fxPlanBox:not([hidden]){display:block}

.fx-detail{padding:18px;display:flex;flex-direction:column;gap:2px}
.fx-dhead{display:flex;align-items:center;justify-content:space-between}
.fx-dhead .s-muted{font-size:12px}
.fx-detail h2{margin:8px 0 2px;font-size:22px;font-weight:800}
.fx-detail h2+p{margin:0 0 8px}
.fx-alert{margin:6px 0;padding:8px 10px;border-radius:8px;background:#FFF3CD;color:#7a5c00;font-size:13px}
.fx-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 11px;margin-top:8px}
.fx-fields label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);font-weight:600}
.fx-fields .fx-wide{grid-column:1/-1}
.fx-fields input,.fx-fields select,.fx-fields textarea{font-family:inherit;font-size:14px;padding:8px 10px;
  border:1px solid var(--line);border-radius:9px;background:#fff;width:100%}
.fx-price{margin-top:12px}
.fx-bd{width:100%;border-collapse:collapse;font-size:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fx-bd th{background:#F4F6F9;text-align:left;font-weight:700;color:var(--muted);padding:7px 9px;font-size:11px}
.fx-bd td{padding:6px 9px;border-top:1px solid #EEF1F5}.fx-bd .tot td{font-weight:800;background:#F0F4F8}
.fx-bd .num,.num{text-align:right;font-variant-numeric:tabular-nums}.fx-bd .dim,.dim{color:#9aa4b0}
.fx-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.fx-kbd{font-size:12px}
.fx-rail{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.fx-rail .rd{width:12px;height:12px;border-radius:50%;border:0;background:#CBD3DC;cursor:pointer;padding:0}
.fx-rail .rd.flag{background:#E8A33B}.fx-rail .rd.rev{background:var(--done)}
.fx-rail .rd.cur{background:var(--accent);box-shadow:0 0 0 3px rgba(42,111,219,.25)}
.fx-done{padding:40px 28px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.fx-done strong{font-size:20px}
@media (max-width:900px){ .fx-grid{grid-template-columns:1fr} }

/* ---- Overview (triage) --------------------------------------------------- */
.ov-toolbar{margin-bottom:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ov-chips{display:inline-flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;font-family:inherit;font-weight:700;font-size:13px;color:var(--muted);
  padding:7px 13px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .n{font-variant-numeric:tabular-nums;opacity:.85}
.ov-search{font-family:inherit;font-size:13px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;min-width:170px}
.ov-bulk{margin-bottom:12px;padding:10px 16px;display:flex;align-items:center;gap:10px}

.ov-tablecard{overflow:hidden;padding:0}
.ov-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ov-tbl thead th{position:sticky;top:0;background:#F4F6F9;text-align:left;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);z-index:1}
.ov-tbl td{padding:7px 12px;border-bottom:1px solid #EEF1F5;vertical-align:middle}
.ov-grp td{background:#F0F3F7;font-weight:700}
.ov-grp.done td{background:#E7F4EB}
.ov-grplabel{margin-right:10px}
.ov-roomdone{font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;background:none;border:0;float:right}
.ov-roomtick{font-size:11px;font-weight:700;color:#1f7a44;float:right}
.ov-row{cursor:pointer}
.ov-row:hover td{background:#EEF6FE}
/* confirmed = green, still-to-confirm flagged = yellow (left accent + tint) */
.ov-row.rev td{background:#F1FAF4}
.ov-row.rev td:first-child{box-shadow:inset 4px 0 0 var(--done)}
.ov-row.pending td{background:#FFFBF0}
.ov-row.pending td:first-child{box-shadow:inset 4px 0 0 #E8A33B}
.ov-row.rev .ov-thumb{border-color:#9ad6b0}
.ov-row.pending .ov-thumb{border-color:#e6c884}
.ov-thumb{width:46px;height:34px;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:#fff;display:block;cursor:zoom-in}
.lowconf{color:#b7791f;font-weight:700}
.ov-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ov-step button{border:0;background:#fff;width:24px;height:26px;font-size:15px;cursor:pointer;color:var(--muted);line-height:1}
.ov-step button:hover{background:#EEF3FE}
.ov-step .ov-q{min-width:26px;text-align:center;font-weight:700;font-size:13px}
.ov-revwrap{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.ov-footer{padding:11px 14px;font-size:12px;border-top:1px solid var(--line)}
.ov-preview{position:absolute;z-index:300;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 50px -16px rgba(26,26,24,.5);padding:6px;pointer-events:none;max-width:420px}
.ov-preview img{display:block;max-width:400px;max-height:360px;border-radius:6px}

/* ---- design previews on the landing page ---- */
.tk-previews{margin-top:28px;background:linear-gradient(180deg,#FAFBFC,#F3F7FF);border:1.5px solid #C3D8F5;
  border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.tk-previews .tp-head{display:flex;align-items:flex-start;gap:16px}
.tk-previews .tp-head>div:first-child{flex:1}
.tk-previews .tp-title{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:9px 0 0}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.tp-card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;
  text-decoration:none;color:var(--ink);transition:border-color .12s,box-shadow .12s,transform .12s}
.tp-card:hover{border-color:#9FB6E0;box-shadow:0 12px 26px -16px rgba(26,26,24,.4);transform:translateY(-1px);text-decoration:none}
.tp-name{font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tp-open{font-size:12px;font-weight:700;color:var(--accent)}
.tp-blurb{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5}