:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #0a66c2;
  --accent-hover: #0958a8;
  --accent-weak: #e8f1fc;
  --on-accent: #ffffff;
  --danger: #c4312b;
  --wet: #b42318;
  --wet-bg: #fdecea;
  --dry: #157a3f;
  --dry-bg: #e5f6ec;
  --warn: #8a5a00;
  --warn-bg: #fff3d6;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04);
  --radius: 12px;
  --sk-bg: #fbfcfe;
  --sk-grid0: #eef1f5;
  --sk-grid1: #dfe4eb;
  --sk-grid2: #cdd4de;
  --sk-wall: #1e293b;
  --sk-room: rgba(10, 102, 194, .06);
  --sk-aff: #2f80ed;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #1c232c;
    --text: #e6edf3;
    --muted: #8b98a8;
    --border: #2a323d;
    --border-strong: #3a4452;
    --accent: #4d94e8;
    --accent-hover: #6aa6ee;
    --accent-weak: #172a42;
    --on-accent: #ffffff;
    --danger: #f07167;
    --wet: #ff9b91;
    --wet-bg: #3a1a1a;
    --dry: #7ad7a0;
    --dry-bg: #13301f;
    --warn: #f2c46d;
    --warn-bg: #3a2c10;
    --shadow: none;
    --sk-bg: #12171e;
    --sk-grid0: #1b222b;
    --sk-grid1: #252e39;
    --sk-grid2: #313b48;
    --sk-wall: #dbe4ee;
    --sk-room: rgba(77, 148, 232, .08);
    --sk-aff: #5aa0f0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
p { margin: .4rem 0; }
.muted { color: var(--muted); }
.sm { font-size: .82rem; }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }
.code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.ok-text { color: var(--dry); }

/* ---------- Shell ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 10px max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand, .auth-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.logo { width: 26px; height: 26px; color: var(--accent); flex: none; }
.mainnav { display: flex; gap: 2px; }
.mainnav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.mainnav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.mainnav a.on { background: var(--accent-weak); color: var(--accent); }
.savestate { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.savestate.saving::before, .savestate.pending::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-right: 6px; }
.savestate.saved::before { content: "✓ "; color: var(--dry); }
.savestate.error { color: var(--danger); }
.me { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-weak); color: var(--accent); font-weight: 700; font-size: .8rem; }
.me-name { display: flex; flex-direction: column; line-height: 1.2; font-size: .85rem; font-weight: 600; }
.me-name small { color: var(--muted); font-weight: 400; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 80px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 18px; }

@media (max-width: 760px) {
  .top { flex-wrap: wrap; gap: 8px 12px; }
  .mainnav { order: 3; width: 100%; overflow-x: auto; }
  .me-name { display: none; }
  .savestate { margin-left: auto; }
  main { padding-top: 16px; }
  h1 { font-size: 1.35rem; }
}

/* ---------- Controls ---------- */

.btn, button {
  font: inherit; font-weight: 600; font-size: .9rem; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; min-height: 38px;
  border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover, button:hover { background: var(--surface-2); text-decoration: none; }
button:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn.danger.ghost { border-color: transparent; }
.btn.sm { padding: 5px 10px; min-height: 30px; font-size: .82rem; border-radius: 7px; }
.btn.block { width: 100%; }
button.link { background: none; border: 0; padding: 2px 6px; min-height: 0; color: var(--accent); font-weight: 500; font-size: .85rem; }
button.link:hover { background: none; text-decoration: underline; }
button.x { background: none; border: 0; min-height: 0; padding: 2px 8px; color: var(--muted); font-size: 1.15rem; font-weight: 400; line-height: 1; }
button.x:hover { color: var(--danger); background: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input, select, textarea {
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 8px 11px; min-height: 40px; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 0; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; accent-color: var(--accent); margin: 0; }
.sm-select { width: auto; min-height: 32px; padding: 4px 8px; font-size: .85rem; }
.num-input { width: 96px; min-height: 32px; padding: 4px 8px; text-align: right; }

label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; font-weight: 500; color: var(--muted); }
.lbl-row { display: flex; justify-content: space-between; align-items: center; }
.lbl-row .link { padding: 0; font-size: .78rem; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; min-height: 32px; padding: 5px 12px; color: var(--muted); border-radius: 7px; font-weight: 500; }
.seg button:hover { color: var(--text); background: transparent; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.seg.block { display: flex; width: 100%; }
.seg.block button { flex: 1; }
.scroll-x { overflow-x: auto; max-width: 100%; }

.check { flex-direction: row; align-items: center; gap: 7px; cursor: pointer; color: var(--text); font-size: .85rem; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks .check { padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); user-select: none; }
.checks .check:has(input:checked) { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }

/* ---------- Layout pieces ---------- */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; margin-right: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.grid .wide, .grid .grid-title { grid-column: 1 / -1; }
.grid .span2 { grid-column: span 2; }
.grid-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.grid > .grid-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.card > .grid-title { margin: 18px 0 10px; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.bar input { max-width: 360px; }
.inline { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.inline input { width: auto; min-height: 32px; padding: 4px 8px; }
.help { margin: -4px 0 16px; font-size: .85rem; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.empty.sm { padding: 14px; border-radius: 9px; }
.alert { background: var(--wet-bg); color: var(--wet); padding: 10px 12px; border-radius: 9px; font-size: .88rem; margin-bottom: 4px; }

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid .span2 { grid-column: 1 / -1; }
  .card { padding: 16px; }
}

/* ---------- Pills, chips, tags ---------- */

.pill, .tag, .badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.pill { padding: 3px 10px; background: var(--surface-2); color: var(--muted); }
.st-new { background: var(--accent-weak); color: var(--accent); }
.st-drying { background: var(--warn-bg); color: var(--warn); }
.st-ready-for-pickup { background: var(--dry-bg); color: var(--dry); }
.st-completed { background: var(--surface-2); color: var(--text); }
.tag { padding: 2px 8px; background: var(--surface-2); color: var(--muted); }
.tag.wet { background: var(--wet-bg); color: var(--wet); }
.tag.dry { background: var(--dry-bg); color: var(--dry); }
.tag.on { background: var(--accent-weak); color: var(--accent); }
.badge { margin-left: 6px; min-width: 18px; height: 18px; justify-content: center; padding: 0 5px; background: var(--accent-weak); color: var(--accent); }
.badge.wet { background: var(--wet-bg); color: var(--wet); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; color: var(--text); }
.chip.ok { background: var(--dry-bg); border-color: transparent; color: var(--dry); }
.chip.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.chip.mat { font-size: .75rem; padding: 2px 9px; }
.btn-chip { min-height: 0; font-weight: 500; cursor: pointer; }
.btn-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }

/* ---------- Tables ---------- */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
.t th { text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.t td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tfoot td { border-top: 2px solid var(--border-strong); font-weight: 600; }
.t .num { text-align: right; font-variant-numeric: tabular-nums; }
.t tr.inactive td { opacity: .55; }
.t.entry input { min-height: 36px; padding: 5px 9px; max-width: 120px; }
.t.entry td:first-child { white-space: nowrap; }
.t.matrix td.wet { background: var(--wet-bg); color: var(--wet); font-weight: 600; }
.t.matrix td.dry { background: var(--dry-bg); color: var(--dry); font-weight: 600; }
.t.hist td { white-space: nowrap; line-height: 1.35; }
.t.prices input, .t.prices select { min-height: 34px; padding: 4px 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--muted); vertical-align: middle; }
.dot.zone { background: var(--accent); }
.dot.dehu { background: var(--dry); }

/* ---------- Auth ---------- */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 500px at 50% -10%, var(--accent-weak), transparent); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: 0 10px 40px rgba(15, 23, 42, .08); display: flex; flex-direction: column; gap: 14px; }
.auth-brand { font-size: 1.4rem; }
.auth-brand .logo { width: 34px; height: 34px; }
.auth-card > .muted { margin-top: -8px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-card h2 { margin: 0; }
.code-big { font: 700 2rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .18em; text-align: center; padding: 18px; background: var(--accent-weak); color: var(--accent); border-radius: 12px; user-select: all; }

/* ---------- Jobs list ---------- */

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.search { flex: 1 1 260px; max-width: 420px; }
.joblist { display: flex; flex-direction: column; gap: 8px; }
.jobrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow); transition: border-color .12s, transform .12s; }
.jobrow:hover { border-color: var(--accent); text-decoration: none; }
.jr-main, .jr-meta { display: flex; flex-direction: column; min-width: 0; }
.jr-main span, .jr-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .jobrow { grid-template-columns: minmax(0, 1fr) auto; }
  .jr-meta { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Job page ---------- */

.jobhead { margin-bottom: 14px; }
.crumb { font-size: .85rem; color: var(--muted); }
.jobtitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
.jobsub { font-size: .9rem; }
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 18px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; padding: 10px 14px; color: var(--muted); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat .v { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .l { font-size: .82rem; font-weight: 600; }
.stat .s { font-size: .78rem; color: var(--muted); }

.todo { list-style: none; margin: 0; padding: 0; }
.todo li + li { border-top: 1px solid var(--border); }
.todo a { display: flex; justify-content: space-between; padding: 10px 2px; color: var(--text); font-weight: 500; }
.todo a:hover { color: var(--accent); text-decoration: none; }

.datenav { display: flex; align-items: center; gap: 4px; }
.datenav input { width: auto; min-height: 34px; padding: 4px 8px; }
.datenav .btn { min-width: 34px; }

/* Rooms */
.title-input { flex: 1; min-width: 160px; font-size: 1.05rem; font-weight: 700; border-color: transparent; background: transparent; padding: 4px 8px; margin-left: -8px; }
.title-input:hover { border-color: var(--border-strong); }
.rooms { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.room { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.room.open { background: var(--surface); border-color: var(--accent); }
.room-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.room-acts { display: flex; align-items: center; gap: 2px; }
.room-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: .8rem; color: var(--muted); }
.room-stats b { color: var(--text); font-size: .92rem; margin-right: 4px; font-variant-numeric: tabular-nums; }
.room-notes { font-size: .85rem; color: var(--muted); margin: 6px 0 0; }
.roomform { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.addroom { margin-top: 12px; }
.addroom summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 6px 0; list-style: none; }
.addroom summary::-webkit-details-marker { display: none; }
.addroom[open] summary { margin-bottom: 4px; }
.addroom .roomform { margin-top: 6px; }

.mgroup h3 { margin-top: 0; }
.mgroup + .mgroup { margin-top: 18px; }

/* Equipment */
.unitpick { margin-bottom: 10px; }
.unitpick .checks { margin-top: 4px; }
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.unit { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.unit.out { background: var(--accent-weak); border-color: transparent; }
.unit .x { position: absolute; top: 4px; right: 2px; }

/* Line items */
.li-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.quick:empty { display: none; }
.grand { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 1.1rem; }
.grand strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* ---------- Sketch ---------- */

.sk-card { padding: 12px; }
.sk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-bar .seg button { padding: 5px 10px; }
.sk-eq { width: auto; min-height: 34px; padding: 4px 8px; }
.sk-hint { font-size: .8rem; margin: 8px 2px; min-height: 1.2em; }
.sk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; }
.sk-svg { width: 100%; height: min(68vh, 640px); background: var(--sk-bg); border: 1px solid var(--border); border-radius: 10px; touch-action: none; user-select: none; display: block; }
.sk-svg[data-tool="select"] { cursor: default; }
.sk-svg:not([data-tool="select"]) { cursor: crosshair; }
.sk-props { display: flex; flex-direction: column; gap: 10px; font-size: .88rem; }
.sk-props h3 { margin: 0; }
.sk-props .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sk-props .btn { align-self: flex-start; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: .8rem; }
.legend span { display: flex; align-items: center; gap: 6px; }
.lg { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.lg.room { border: 2px solid var(--sk-wall); background: var(--sk-room); }
.lg.aff { background: repeating-linear-gradient(45deg, var(--sk-aff) 0 2px, transparent 2px 5px); opacity: .7; }
.lg.pt { border-radius: 50%; }
.lg.pt.wet { background: var(--wet); }
.lg.pt.dry { background: var(--dry); }
@media (max-width: 860px) {
  .sk-wrap { grid-template-columns: 1fr; }
  .sk-svg { height: 58vh; }
}

.sketch line, .sketch rect, .sketch circle { vector-effect: non-scaling-stroke; }
.sketch .hatch { vector-effect: none; stroke: var(--sk-aff); stroke-width: .09; }
.sketch .grid line { stroke-width: 1; }
.sketch .g0 { stroke: var(--sk-grid0); }
.sketch .g1 { stroke: var(--sk-grid1); }
.sketch .g2 { stroke: var(--sk-grid2); }
.sketch text { text-anchor: middle; dominant-baseline: middle; fill: var(--text); font-family: system-ui, sans-serif; pointer-events: none; }
.sketch .room rect { fill: var(--sk-room); stroke: var(--sk-wall); stroke-width: 3; }
.sketch .room .lbl { font-weight: 700; }
.sketch .dim { fill: var(--muted); }
.sketch .aff rect { stroke: var(--sk-aff); stroke-width: 1.5; stroke-dasharray: 5 3; opacity: .75; }
.sketch .line .wall { stroke: var(--sk-wall); stroke-width: 4; stroke-linecap: round; }
.sketch .line .hit { stroke: transparent; stroke-width: 16; }
.sketch .note { font-weight: 600; text-anchor: start; }
.sketch .point circle { fill: var(--muted); stroke: var(--surface); stroke-width: 1.5; }
.sketch .point.wet circle { fill: var(--wet); }
.sketch .point.dry circle { fill: var(--dry); }
.sketch .point text { fill: #fff; font-weight: 700; }
.sketch .equip rect { fill: var(--accent); stroke: none; }
.sketch .equip.k-DH rect { fill: #0e9384; }
.sketch .equip.k-AS rect { fill: #7a5af8; }
.sketch .equip.k-HT rect { fill: #dc6803; }
.sketch .equip text { fill: #fff; font-weight: 700; }
.sketch .selbox { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.sketch .handle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; cursor: nwse-resize; }
.sketch.static { width: 100%; max-height: 520px; display: block; background: var(--sk-bg); border: 1px solid var(--border); border-radius: 8px; }

/* ---------- Report ---------- */

.report { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.report h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0 0 10px; }
.report h3 { font-size: .9rem; margin: 14px 0 6px; }
.report section { margin-top: 26px; break-inside: avoid-page; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--text); }
.rp-co { font-weight: 700; color: var(--muted); }
.rp-meta { text-align: right; font-size: .85rem; color: var(--muted); }
.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: .9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.rp-notes { font-size: .9rem; white-space: pre-wrap; }
.rp-sign { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 24px; margin-top: 56px; font-size: .8rem; color: var(--muted); }
.rp-sign div { border-top: 1px solid var(--text); padding-top: 6px; }
@media (max-width: 640px) {
  .report { padding: 18px; }
  .rp-two { grid-template-columns: 1fr; }
  .rp-head { flex-direction: column; align-items: flex-start; }
  .rp-meta { text-align: left; }
}

/* ---------- Toasts ---------- */

#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: toast-in .18s ease-out; transition: opacity .3s, transform .3s; }
.toast.err { background: var(--danger); }
.toast.out { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Print ---------- */

@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #f4f4f4; --text: #000; --muted: #444; --border: #ccc; --border-strong: #999;
    --sk-bg: #fff; --sk-wall: #000; --shadow: none;
  }
  body { font-size: 11pt; }
  .no-print, .top, #toasts, .bar { display: none !important; }
  main { padding: 0; max-width: none; }
  .report { border: 0; padding: 0; }
  .t.matrix td.wet, .t.matrix td.dry, .tag, .sketch { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sketch.static { max-height: 7in; border: 0; }
}

/* ---------- Trips ---------- */

.tripcard { padding-bottom: 16px; }
.trips { display: flex; gap: 8px; padding-bottom: 4px; }
.trip { flex: none; flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 8px 14px; border-radius: 10px; background: var(--surface-2); border-color: var(--border); font-weight: 500; }
.trip b { font-size: .95rem; }
.trip span { font-size: .78rem; color: var(--muted); font-weight: 500; }
.trip.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.trip.on span { color: var(--accent); }
.tripedit { display: grid; grid-template-columns: repeat(4, minmax(130px, auto)) minmax(160px, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.tripedit input, .tripedit select { min-height: 36px; padding: 5px 9px; }
.timepair { display: flex; gap: 4px; }
.timepair input { min-width: 0; }
@media (max-width: 860px) {
  .tripedit { grid-template-columns: 1fr 1fr; }
  .tripedit .trip-notes { grid-column: 1 / -1; }
}

/* ---------- Switches ---------- */

.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.t tr.off td:not(:first-child) { opacity: .45; }

.pricecat { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.pricecat summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.pricecat summary::-webkit-details-marker { display: none; }
.pricecat summary > span:first-child { flex: 1; }
.pricecat summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.pricecat[open] summary::before { transform: rotate(90deg); }
.pricecat .scroll { padding: 0 8px 8px; }
.bar input[type="search"] { max-width: 320px; }

/* ---------- Rooms & moisture extras ---------- */

.sublabel { font-size: .82rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.wall-len { color: var(--muted); font-size: .78rem; }
input[readonly] { background: var(--surface-2); color: var(--muted); }
.room-top .tag { margin-left: 6px; }
.goal-input { max-width: 80px !important; }
.dt-input { width: auto; min-height: 32px; padding: 3px 6px; font-size: .82rem; }
.eqt td { white-space: nowrap; }

/* ---------- Sketch extras ---------- */

.sk-tools { max-width: 100%; }
.sk-label { font-size: .82rem; font-weight: 500; color: var(--muted); }
.wallpick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wallpick .chip { justify-content: center; }
.btn-chip.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.sk-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: .85rem; }
.sk-facts dt { color: var(--muted); }
.sk-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lg.wetwall { height: 5px; border-radius: 2px; background: var(--sk-aff); }
.lg.eq { background: var(--accent); }
.sketch .room .wetwall { stroke: var(--sk-aff); stroke-width: 7; stroke-linecap: round; opacity: .85; pointer-events: none; }
.sketch .equip.unlinked rect { opacity: .45; }

[hidden] { display: none !important; }
.tripedit > * { min-width: 0; }
.timepair input { flex: 1; }
.t.entry input { min-width: 64px; }
@media (max-width: 860px) {
  .tripedit .x { justify-self: start; }
}

/* ---------- Devices: phones, tablets, touch ---------- */

/* iOS zooms the page when focusing text smaller than 16px. */
input, select, textarea { font-size: 16px; }
body { padding-bottom: env(safe-area-inset-bottom); }
.top { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (pointer: coarse) {
  .btn, button { min-height: 44px; }
  .btn.sm, .seg button, .trip { min-height: 38px; }
  button.x { min-width: 36px; min-height: 36px; }
  .checks .check { padding: 9px 13px; }
  .tabs a { padding: 12px 14px; }
}
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

a.savestate { text-decoration: none; }
a.savestate[href]:hover { color: var(--accent); }
.savestate.local::before, .savestate.pushing::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-right: 6px; }
.savestate.pushed::before { content: "\2713  "; color: var(--dry); }
.savestate.offline, .savestate.error { color: var(--warn); }
.alert.info { background: var(--warn-bg); color: var(--warn); margin-bottom: 14px; }

.jobhead-top { display: flex; justify-content: space-between; align-items: center; }
.crumb.on { color: var(--accent); font-weight: 600; }

/* ---------- Jobs dashboard ---------- */

.stats.dash { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat-btn { display: block; text-align: left; width: 100%; min-height: 0; font: inherit; color: var(--text); cursor: pointer; }
.stat-btn:hover { border-color: var(--accent); background: var(--surface); }
.stat-btn.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.stat-btn .l { font-size: .85rem; }
.stat.tone-warn .v { color: var(--warn); }
.jobrow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(120px, .7fr) auto; }
.jr-dry { display: flex; flex-direction: column; gap: 4px; }
.meter { height: 6px; border-radius: 999px; background: var(--wet-bg); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 999px; background: var(--dry); }
.jr-flags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.due { background: var(--accent-weak); color: var(--accent); }
@media (max-width: 860px) {
  .jobrow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .jr-meta, .jr-dry { grid-column: 1 / -1; }
  .jr-flags { grid-column: 2; grid-row: 1; }
}

/* ---------- Warnings ---------- */

.warns { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.card .warns { margin-bottom: 0; }
.warns li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: .88rem; background: var(--surface-2); }
.warns li.w-warn { background: var(--warn-bg); color: var(--warn); }
.warns li > span:nth-child(2) { flex: 1; }
.warns a { font-weight: 600; white-space: nowrap; }
.w-icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .75rem; color: var(--surface); background: var(--muted); }
.w-warn .w-icon { background: var(--warn); }
.warns.compact li { padding: 8px 12px; }

/* ---------- Readings ---------- */

.read-input { max-width: 110px; }
.prev { font-size: .72rem; color: var(--muted); margin-top: 2px; }
input::placeholder { color: var(--muted); opacity: .6; }

/* ---------- Line item browser ---------- */

.block-search { width: 100%; max-width: none; margin-bottom: 10px; }
.li-tabs { display: flex; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.li-tabs button { flex: none; min-height: 34px; padding: 5px 12px; border-radius: 999px; font-weight: 500; font-size: .85rem; background: var(--surface-2); border-color: var(--border); }
.li-tabs button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.li-tabs button.on .muted { color: inherit; opacity: .8; }
.li-list { max-height: 460px; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
.li-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 150px auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.li-row:last-child { border-bottom: 0; }
.li-code { font: 600 .78rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--accent); white-space: nowrap; }
.li-name { font-size: .92rem; }
.li-qty { display: flex; align-items: center; gap: 6px; }
.li-qty input { min-height: 36px; padding: 4px 8px; text-align: right; }
.li-unit { font-size: .78rem; color: var(--muted); width: 30px; }
.li-custom summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; }
.li-custom[open] { flex-basis: 100%; }
.code-input { width: 92px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }
@media (max-width: 640px) {
  .li-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code price" "name name" "qty add"; gap: 4px 10px; padding: 10px 2px; }
  .li-code { grid-area: code; }
  .li-name { grid-area: name; }
  .li-price { grid-area: price; text-align: right; }
  .li-qty { grid-area: qty; }
  .li-row > .btn { grid-area: add; }
}

/* ---------- Photos ---------- */

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.file-btn { position: relative; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ph { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ph-img { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); min-height: 0; }
.ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cap { min-height: 34px; padding: 4px 8px; }
.ph-row { display: flex; align-items: center; gap: 4px; }
.ph-row .sm-select { flex: 1; min-width: 0; }
@media (max-width: 480px) { .photo-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

.viewer { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .92); display: flex; flex-direction: column; color: #fff; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.viewer-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.viewer-bar .btn { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }
.viewer-stage { flex: 1; position: relative; display: grid; place-items: center; min-height: 0; padding: 0 8px; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; font-size: 2rem; background: rgba(255, 255, 255, .12); border: 0; color: #fff; border-radius: 10px; }
.viewer-nav.prev { left: 10px; }
.viewer-nav.next { right: 10px; }
.viewer-cap { padding: 12px 16px 18px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.viewer-cap span { font-size: .8rem; opacity: .7; }

/* ---------- Report: summary, charts, photos ---------- */

.report-bar { gap: 12px; }
.rp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rp-tiles div { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.rp-tiles b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.rp-tiles span { font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) { .rp-tiles { grid-template-columns: 1fr 1fr; } }
.drycharts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.drychart { margin: 0; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 4px; break-inside: avoid; }
.drychart figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .9rem; }
.drychart svg { width: 100%; height: auto; display: block; overflow: visible; }
.dc-grid { stroke: var(--border); stroke-width: 1; }
.dc-axis { fill: var(--muted); font-size: 10px; font-family: system-ui, sans-serif; }
.dc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.dc-hit { fill: transparent; }
.dc-pt:hover .dc-dot { r: 6; }
.dc-val { fill: var(--text); font-size: 11px; font-weight: 700; font-family: system-ui, sans-serif; }
.rp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rp-photos figure { margin: 0; break-inside: avoid; }
.rp-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.rp-photos figcaption { font-size: .8rem; margin-top: 4px; display: flex; flex-direction: column; }
.rp-photos figcaption span { color: var(--muted); font-size: .72rem; }
@media (max-width: 640px) { .rp-photos { grid-template-columns: 1fr 1fr; } }
@media print {
  .rp-break { break-before: page; }
  .drychart, .rp-photos figure, .rp-tiles { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-photos { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Brand ---------- */

.logo { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 2px rgba(10, 79, 163, .25)); }
.wordmark { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: var(--text); }
.wordmark b { color: var(--accent); font-weight: 800; }
.auth-brand .logo { width: 40px; height: 40px; }
.auth-brand .wordmark { font-size: 1.55rem; }
.brand { gap: 9px; }

/* ---------- Levels ---------- */

.sk-levels { display: flex; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.sk-levels button { flex: none; min-height: 34px; padding: 5px 14px; border-radius: 999px; font-weight: 600; font-size: .85rem; background: var(--surface-2); border-color: var(--border); }
.sk-levels button.on { background: var(--text); border-color: var(--text); color: var(--surface); }
.sk-levels button.on .muted { color: inherit; opacity: .7; }
.card.level > .card-head { gap: 8px; }
.card.level > .card-head .title-input { flex: 0 1 260px; }
.level-acts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.level-acts .btn { min-width: 34px; padding: 4px 8px; }
.level-list { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.level-item { display: flex; align-items: center; gap: 6px; }
.level-item input { flex: 1; }
.rp-plan { margin: 0 0 16px; }
.rp-plan figcaption { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }

/* ---------- Chambers ---------- */

.chamber-row { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.chamber-row:first-of-type { padding-top: 0; }
.chamber-top { display: flex; align-items: center; gap: 8px; }
.title-input.sm { font-size: .95rem; flex: 0 1 260px; min-width: 120px; }

/* ---------- Team & roles ---------- */

.person { display: inline-flex; align-items: center; gap: 8px; }
.avatar.sm { width: 26px; height: 26px; font-size: .68rem; }
.team-add { margin-top: 14px; margin-bottom: 0; }
.team-add select { max-width: 340px; }
.roles-table th.perm-h { font-size: .68rem; white-space: normal; min-width: 92px; line-height: 1.25; vertical-align: bottom; }
.roles-table td { vertical-align: middle; }
.role-name { min-width: 150px; min-height: 36px; padding: 5px 9px; }
.switch input:disabled + span { opacity: .55; cursor: default; }

/* ---------- Readings & jobs list ---------- */

.history-card > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.history-card > summary::-webkit-details-marker { display: none; }
.history-card > summary h2 { margin: 0; }
.history-card > summary::after { content: "Show"; margin-left: auto; color: var(--accent); font-size: .85rem; font-weight: 600; }
.history-card[open] > summary::after { content: "Hide"; }
.history-card[open] > summary { margin-bottom: 10px; }
.status-filter { margin-left: auto; }
@media (max-width: 640px) { .status-filter { margin-left: 0; } }

/* ---------- Themes (Settings → Appearance). No attribute = follow the device. ---------- */

:root[data-theme="dark"] {
  --bg: #0d1117; --surface: #161b22; --surface-2: #1c232c; --text: #e6edf3; --muted: #8b98a8;
  --border: #2a323d; --border-strong: #3a4452; --accent: #4d94e8; --accent-hover: #6aa6ee; --accent-weak: #172a42; --on-accent: #ffffff;
  --danger: #f07167; --wet: #ff9b91; --wet-bg: #3a1a1a; --dry: #7ad7a0; --dry-bg: #13301f; --warn: #f2c46d; --warn-bg: #3a2c10; --shadow: none;
  --sk-bg: #12171e; --sk-grid0: #1b222b; --sk-grid1: #252e39; --sk-grid2: #313b48; --sk-wall: #dbe4ee; --sk-room: rgba(77, 148, 232, .08); --sk-aff: #5aa0f0;
  color-scheme: dark;
}

/* Cool: deep navy with a bright sky-blue accent. */
:root[data-theme="cool"] {
  --bg: #0a1624; --surface: #0f2133; --surface-2: #142a40; --text: #e2f0fb; --muted: #8aa7bf;
  --border: #1e3a54; --border-strong: #2a4d6b; --accent: #38bdf8; --accent-hover: #67cdfa; --accent-weak: #0d3350; --on-accent: #04202e;
  --danger: #fb7185; --wet: #fda4af; --wet-bg: #3a1526; --dry: #6ee7b7; --dry-bg: #0d3a2c; --warn: #fcd34d; --warn-bg: #36290a; --shadow: none;
  --sk-bg: #0c1b2b; --sk-grid0: #13283c; --sk-grid1: #1b3550; --sk-grid2: #244463; --sk-wall: #d4ebfa; --sk-room: rgba(56, 189, 248, .08); --sk-aff: #38bdf8;
  color-scheme: dark;
}
:root[data-theme="cool"] .auth { background: radial-gradient(1200px 500px at 50% -10%, #0d3350, transparent); }

.theme-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 620px; }
.theme-opt { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; min-height: 0; border-radius: 12px; font-weight: 600; }
.theme-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.theme-swatch { height: 46px; border-radius: 8px; border: 1px solid var(--border); display: flex; align-items: flex-end; gap: 4px; padding: 6px; }
.theme-swatch i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.sw-system { background: linear-gradient(135deg, #f4f6f9 50%, #0d1117 50%); }
.sw-light { background: #f4f6f9; }
.sw-light i:first-child { background: #0a66c2; } .sw-light i:last-child { background: #ffffff; border: 1px solid #e2e8f0; }
.sw-dark { background: #0d1117; }
.sw-dark i:first-child { background: #4d94e8; } .sw-dark i:last-child { background: #1c232c; }
.sw-cool { background: #0a1624; }
.sw-cool i:first-child { background: #38bdf8; } .sw-cool i:last-child { background: #142a40; }
@media (max-width: 560px) { .theme-pick { grid-template-columns: 1fr 1fr; } }

/* ---------- Line items: where, rows, helper, calculator ---------- */

.li-where { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; margin-bottom: 12px; }
.li-row { grid-template-columns: 92px minmax(0, 1fr) auto 130px 112px auto; }
.act-select { min-width: 0; width: 100%; }
.level-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 2px 10px; }
.li-level > .card:last-child { margin-bottom: 0; }
.num-input.need { border-color: var(--warn); background: var(--warn-bg); }
.num-input.filled, .qty-target.filled { animation: filled .9s ease-out; }
@keyframes filled { from { box-shadow: 0 0 0 4px var(--accent-weak); border-color: var(--accent); } }
.qty-target { text-align: right; }
.t.items .act-select { width: auto; min-width: 104px; }
.card-head .sm-select { max-width: 220px; }

.qty-helper {
  position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 15; margin-top: 16px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}
.qh-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qh-top .btn.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
.qh-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.qh-chips .btn-chip { flex: none; min-height: 34px; }
.qh-chips .btn-chip:disabled { opacity: .45; cursor: default; }
.calc { margin-top: 10px; display: grid; gap: 8px; max-width: 360px; }
.calc-display { font: 600 1.15rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-keys button { min-height: 42px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.calc-keys button.op { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.calc-out { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calc-result { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .li-where { grid-template-columns: 1fr 1fr; }
  .li-row { grid-template-areas: "code price" "name name" "qty act" "add add"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .li-row > .act-select { grid-area: act; }
  .li-row > .btn { grid-area: add; }
  .calc { max-width: none; }
}

/* ---------- Recommended equipment ---------- */

.rec-chip { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding: 6px 10px; border-radius: 9px; background: var(--accent-weak); color: var(--accent); font-size: .82rem; }
.rec-chip:hover { text-decoration: none; filter: brightness(1.05); }
.rec-val { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.rec-val.ok { background: var(--dry-bg); color: var(--dry); }
.rec-val.low { background: var(--warn-bg); color: var(--warn); }
.rec-card tfoot td { font-weight: 600; }

/* =====================================================================
   v0.3 — navigation, trips, favorites, recommendations, pricing, review
   ===================================================================== */

:root { --improve: #1d6fb8; --improve-bg: #e6f0fb; }
:root[data-theme="dark"], :root[data-theme="cool"] { --improve: #8cc4ff; --improve-bg: #16304d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --improve: #8cc4ff; --improve-bg: #16304d; } }

.loading { padding: 48px 16px; text-align: center; color: var(--muted); }
.loading::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Main navigation: icons + labels; a bottom tab bar on phones. */
.mainnav a { display: inline-flex; align-items: center; gap: 6px; }
.nav-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 760px) {
  .mainnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; order: 0; width: auto; overflow: visible;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); padding: 4px 4px max(4px, env(safe-area-inset-bottom));
  }
  .mainnav a { flex-direction: column; gap: 2px; padding: 6px 2px; font-size: .7rem; border-radius: 10px; min-height: 48px; justify-content: center; }
  .mainnav a.on { background: transparent; color: var(--accent); }
  .nav-ic { width: 22px; height: 22px; }
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .qty-helper { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .top { flex-wrap: nowrap; }
}
@media print { .mainnav { display: none !important; } }

/* Job header quick actions */
.quick-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pill.tp-onsite { background: var(--dry-bg); color: var(--dry); }
.pill.tp-planned { background: var(--surface-2); color: var(--muted); }
.pill.tp-confirmed { background: var(--accent-weak); color: var(--accent); }
.pill.tp-completed { background: var(--dry-bg); color: var(--dry); }
.pill.tp-canceled { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.pill.st-final { background: var(--dry-bg); color: var(--dry); }
.jr-next { font-size: .78rem; color: var(--accent); font-weight: 600; }

/* Warnings: resolve with an explanation */
.w-acts { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.w-acts .link { font-size: .82rem; }
.review-form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.review-form input { flex: 1 1 240px; min-height: 36px; padding: 5px 9px; }
.resolved { margin-top: 12px; }
.resolved > summary { cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 600; padding: 4px 0; }
.resolved .warns { margin-top: 8px; }
.warns li.w-ok { background: var(--surface-2); color: var(--text); }
.w-ok .w-icon { background: var(--dry); }

/* Moisture points */
.tag.improving { background: var(--improve-bg); color: var(--improve); }
.spark { width: 64px; height: 20px; vertical-align: middle; overflow: visible; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark .sp-goal { stroke: var(--dry); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.mtable td.st { white-space: nowrap; }
.mtable td:first-child { white-space: normal; min-width: 150px; }
.addpoint > summary { cursor: pointer; list-style: none; }
.addpoint > summary::-webkit-details-marker { display: none; }
.addpoint > summary h2 { margin: 0; color: var(--accent); }
.addpoint[open] > summary { margin-bottom: 14px; }
.trip-crew { margin: 10px 0 0; }
.t.matrix sup { color: var(--muted); }

/* Trips & team */
.tcards { display: flex; flex-direction: column; gap: 8px; }
.tcard { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.tcard.open { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.tcard.tc-canceled { opacity: .65; }
.tc-top { width: 100%; display: grid; grid-template-columns: minmax(130px, .9fr) minmax(150px, 1fr) minmax(0, 1.4fr) auto 20px; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border: 0; border-radius: 0; background: transparent; font-weight: 400; white-space: normal; min-height: 0; }
.tc-top:hover { background: var(--surface-2); }
.tc-when, .tc-what, .tc-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tc-when span { font-size: .8rem; color: var(--muted); }
.tc-what { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.tc-who .sm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-chev { color: var(--muted); }
.tc-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.tc-body .grid { margin-top: 12px; }
.tc-body .sublabel { margin-top: 14px; }
.tc-notes { margin-top: 12px; }
.avatars { display: flex; }
.avatars .avatar + .avatar { margin-left: -6px; }
.avatars .avatar { border: 2px solid var(--surface); }
.avatar.lead { background: var(--accent); color: var(--on-accent); }
.tasks { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tasks li { display: flex; align-items: center; gap: 8px; }
.tasks li .check { flex: 1; }
.tasks .done { text-decoration: line-through; color: var(--muted); }
.task-add { margin: 0; }
.task-add input { max-width: none; flex: 1 1 220px; }
@media (max-width: 700px) {
  .tc-top { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .tc-when { grid-column: 1; }
  .tc-what { grid-column: 1 / -1; grid-row: 2; }
  .tc-who { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; gap: 8px; }
  .tc-tasks { grid-column: 2; grid-row: 1; }
  .tc-chev { display: none; }
}

/* Schedule */
.sched-list { display: flex; flex-direction: column; }
.sched-row { display: grid; grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--border); color: var(--text); }
.sched-row:first-child { border-top: 0; }
.sched-row:hover { background: var(--surface-2); text-decoration: none; }
.sr-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-job { display: flex; flex-direction: column; min-width: 0; }
.sr-job span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .sched-row { grid-template-columns: 70px minmax(0, 1fr); gap: 4px 10px; }
  .sr-what, .sr-who { grid-column: 2; }
}

/* Line items: favorites, search, recommendations */
.li-row { grid-template-columns: 30px 92px minmax(0, 1fr) auto 130px 112px auto; }
.star { min-height: 0; min-width: 30px; padding: 2px; border: 0; background: none; font-size: 1.2rem; line-height: 1; color: var(--muted); font-weight: 400; }
.star:hover { background: none; color: #d99a00; }
.star.on { color: #e0a100; }
.li-tabs .fav-tab { font-weight: 700; }
.li-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 4px 4px; }
.li-desc { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.li-basis { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.li-count { margin: 6px 4px 0; }
@media (max-width: 640px) {
  .li-row { grid-template-areas: "star code price" "name name name" "qty qty act" "add add add"; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); }
  .li-row > .star { grid-area: star; }
}

.rec-items > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.rec-items > summary::-webkit-details-marker { display: none; }
.rec-items > summary h2 { margin: 0; }
.rec-items[open] > summary { margin-bottom: 10px; }
.rec-items { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.rec-bar { margin: 0 0 6px; }
.rec-group h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 4px; }
.rec-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 130px 110px auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.rec-pick { flex-direction: row; }
.rec-why { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.rec-acts { display: flex; align-items: center; gap: 2px; }
@media (max-width: 640px) {
  .rec-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "pick main main" ". qty acts" ". price price"; }
  .rec-pick { grid-area: pick; } .rec-main { grid-area: main; } .rec-row .li-qty { grid-area: qty; } .rec-acts { grid-area: acts; } .rec-row .li-price { grid-area: price; }
}

.grand { flex-direction: column; align-items: stretch; gap: 6px; }
.grand-row { display: flex; justify-content: space-between; font-size: .95rem; font-variant-numeric: tabular-nums; }
.grand-row.total { font-size: 1.1rem; padding-top: 6px; border-top: 1px solid var(--border); }
.grand-row:first-child.total { border-top: 0; padding-top: 0; }
.pricing-note .link { padding: 0; font-weight: 600; }

/* Settings */
.set-nav { display: flex; gap: 6px; margin: -6px 0 16px; padding-bottom: 4px; }
.set-nav a { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .85rem; font-weight: 500; }
.set-nav a:hover { border-color: var(--accent); text-decoration: none; }
.card[id] { scroll-margin-top: 80px; }
.dropzone { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px; border: 2px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.dropzone > div { flex: 1 1 280px; }
.imp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-head .btn { margin-left: auto; }
.imp-filter { margin: 14px 0 8px; }
.imp-bulk { margin: 0 0 8px; }
.imp-bulk:empty { display: none; }
.imp-table { max-height: 520px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.imp-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.imp-table tr.need td { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); }
.imp-act { max-width: 280px; }
.imp-act.need { border-color: var(--warn); }
.imp-publish { margin-top: 14px; }
.t.rules td { vertical-align: middle; }
.t.rules input:not(.code-input) { min-height: 34px; padding: 4px 8px; }
.dry-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.policy-grid { margin-top: 14px; }

/* Report */
.rp-sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.report h2.rp-part { font-size: 1rem; color: var(--text); text-transform: none; letter-spacing: 0; border-bottom: 2px solid var(--accent); padding-bottom: 6px; margin-bottom: 4px; }
.report h4 { font-size: .85rem; margin: 12px 0 4px; color: var(--muted); }
.rp-list { margin: 6px 0; padding-left: 20px; font-size: .9rem; }
.rp-list li { margin: 4px 0; }
.t .rp-total td { font-size: 1rem; }
.t.est tr.est-room td { background: var(--surface-2); padding-top: 10px; }
.t.est tr.est-sub td { color: var(--muted); font-size: .82rem; }
.share-card .bar { margin-bottom: 8px; }
.share-link { display: flex; gap: 8px; margin: 4px 0 12px; }
.share-link input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.shared-top { justify-content: space-between; }
.shared-note { margin-bottom: 12px; }
@media print { .t.est tr.est-room td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.t.rules .code-input { width: 120px; }

/* ---------- Estimate ---------- */

.est-kpis { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.est-kpis b { color: var(--text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.est-settings { margin-top: 4px; }
.est-help { margin-top: 12px; }
.est-help > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .88rem; }
.est-help code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.vars { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.var { font-size: .75rem; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.var b { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; margin-right: 2px; }
.est-room-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.est-room-head h3 { margin: 0; font-size: 1.05rem; }
.t.est-t th, .t.est-t td { padding: 6px 7px; }
.t.est-t td { vertical-align: top; }
.est-desc { min-width: 220px; }
.est-note { margin-top: 4px; min-height: 30px; padding: 3px 8px; font-size: 13px; border-style: dashed; }
.est-note:not(:placeholder-shown) { border-style: solid; }
.est-note-ro { font-size: .8rem; font-style: italic; margin-top: 2px; }
.est-qty { width: 104px; }
.est-f { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.dep-input { width: 70px; }
.est-nr { margin-top: 2px; font-size: .72rem; justify-content: flex-end; gap: 4px; }
.est-nr input { width: 14px; height: 14px; }
.t.est-t tfoot td { font-weight: 600; }
.est-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.est-search { flex: 1 1 320px; min-height: 38px; }
.est-results { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; }
.est-results:empty { display: none; }
.est-hit { justify-content: flex-start; text-align: left; white-space: normal; font-weight: 500; min-height: 38px; background: var(--surface-2); }
.est-hit:hover { border-color: var(--accent); }
.est-summary h2 { margin-bottom: 10px; }
.est-sum-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
.est-totals td { padding: 7px 10px; }
.est-totals tr.strong td { border-top: 1px solid var(--border-strong); }
.est-totals tr.net td { font-size: 1.1rem; background: var(--accent-weak); }
.est-recaps { display: grid; gap: 14px; }
.est-recaps h3 { margin: 0 0 4px; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.report .est-room { margin-top: 18px; break-inside: auto; }
.report .est-summary { margin-top: 24px; break-inside: avoid; }
@media (max-width: 760px) { .est-sum-grid { grid-template-columns: 1fr; } }
@media print { .est-totals tr.net td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Equipment by room ---------- */

.eq-overview .eq-stats { margin-bottom: 10px; }
.eq-overview .stat { box-shadow: none; background: var(--surface-2); }
.eq-rec-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 10px; font-size: .9rem; }
.eq-jump { display: flex; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.eq-jump a { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: .85rem; font-weight: 500; }
.eq-jump a:hover { border-color: var(--accent); text-decoration: none; }
.eq-jump .badge { margin-left: 2px; }
.place-card > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.place-card > summary::-webkit-details-marker { display: none; }
.place-card > summary h2 { margin: 0; color: var(--accent); }
.place-card[open] > summary { margin-bottom: 14px; }
.eq-room { scroll-margin-top: 80px; }
.eq-room.has-on { border-left: 4px solid var(--accent); }
.eq-room-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.eq-room-title { display: flex; flex-direction: column; gap: 2px; }
.eq-room-title h3 { margin: 0; font-size: 1.08rem; }
.eq-room-recs { display: flex; gap: 6px; flex-wrap: wrap; }
.eq-counts { margin: 4px 0 8px; font-size: .88rem; }
.eq-none { margin: 4px 0; }
.eq-room-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.t.eqt tr.eq-off td { opacity: .6; }
.eq-move { width: auto; max-width: 96px; margin-left: 6px; }
.t.eqt td.nowrap { white-space: nowrap; }
@media print { .rp-break-before { break-before: page; } }

/* ---------- Calculator popup ---------- */

.calc-pop { position: fixed; inset: 0; z-index: 300; }
.cp-back { position: absolute; inset: 0; background: rgba(15, 23, 42, .4); }
.cp {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  width: min(460px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.cp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cp-display { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; }
.cp-expr { border: 0; background: transparent; padding: 0; min-height: 40px; text-align: right; font: 600 1.5rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; box-shadow: none !important; }
.cp-result { text-align: right; font-weight: 700; color: var(--accent); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chips .btn-chip { min-height: 40px; }
.cp-chips .btn-chip:disabled { opacity: .4; }
.cp-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cp-keys button { min-height: 52px; font-size: 1.25rem; font-variant-numeric: tabular-nums; touch-action: manipulation; }
.cp-keys button.op { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.cp-keys button.clr { color: var(--danger); }
.cp-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cp-actions .btn { min-height: 48px; padding: 0 22px; font-size: 1rem; }
.cp-tip { margin: 0; }
@media (pointer: coarse) { .qty-target { caret-color: transparent; cursor: pointer; } }

/* ---------- Moisture tear-out ---------- */

.tear { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tear-btn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.tear-on { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; color: var(--danger); font-size: .82rem; }
.tear-date { width: auto; min-height: 36px; padding: 3px 8px; font-size: 15px; }
.tag.removed { background: var(--wet-bg); color: var(--danger); }
tr.torn td:first-child b, tr.torn td:first-child .li-code { text-decoration: line-through; opacity: .7; }
.t.matrix tr.torn td { opacity: .75; }
.sketch .point.removed circle { fill: #8a94a3; }
.lg.pt.removed { background: #8a94a3; }

/* ---------- Sketch mode ---------- */

.sk-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-mode { font-weight: 700; font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); white-space: nowrap; }
.sk-mode.drawing { background: var(--accent); color: var(--on-accent); }
.sk-hint-text { flex: 1 1 200px; }
.sk-svg:not([data-tool="select"]) { outline: 3px solid var(--accent); outline-offset: -3px; }
.sk-tools button.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.sk-tools button[data-tool="select"] { font-weight: 700; }

/* ---------- Photo albums ---------- */

.front-album { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.album-card .album-head, .album .album-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.album-card .album-head h2 { margin: 0; }
.album-head h3 { margin: 0; font-size: .95rem; }
.album-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.album { border-top: 1px solid var(--border); padding: 12px 0; }
.album:first-of-type { border-top: 0; padding-top: 0; }
.album .photo-grid { margin-top: 10px; }
.album.empty .album-head h3 { color: var(--muted); }
.album-empty { margin: 8px 0 0; }
.album-card .photo-grid, .album-card .album-empty { margin-top: 12px; }
.album-add { margin: 6px 0 0; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.album-add input { flex: 1 1 220px; max-width: none; }

/* ---------- Team groups ---------- */

.team-search { max-width: 360px; }
.team-group + .team-group { margin-top: 18px; }
.team-group-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-bottom: 6px; border-bottom: 2px solid var(--border); }
.g-admin .team-group-head { border-color: var(--text); color: var(--text); }
.g-pm .team-group-head { border-color: var(--accent); color: var(--accent); }
.g-lead .team-group-head { border-color: #0e9384; color: #0e9384; }
.people { display: flex; flex-direction: column; gap: 6px; }
.person-row { display: grid; grid-template-columns: 40px minmax(140px, 1fr) minmax(160px, 1.4fr) 170px auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.person-row.inactive { opacity: .55; }
.person-row .avatar { width: 38px; height: 38px; }
.pr-work { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-work a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-role { width: 100%; }
.pr-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) {
  .person-row { grid-template-columns: 40px minmax(0, 1fr) 160px; }
  .pr-work { grid-column: 2 / -1; grid-row: 2; }
  .pr-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 520px) {
  .person-row { grid-template-columns: 40px minmax(0, 1fr); }
  .pr-role { grid-column: 1 / -1; }
}
.crew-pick { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.crew-group-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }

/* ---------- iPad & touch polish ---------- */

html { -webkit-tap-highlight-color: transparent; }
button, .btn, a, label.check, select { touch-action: manipulation; }
/* Sideways scrollers keep the swipe to themselves instead of dragging the page. */
.scroll, .scroll-x, .tabs, .li-tabs, .qh-chips, .eq-jump, .set-nav, .trips, .sk-levels, .sk-tools { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.tabs { position: relative; }
img { -webkit-user-drag: none; }
@media (pointer: coarse) {
  .star { min-width: 40px; min-height: 40px; font-size: 1.35rem; }
  button.x { min-width: 40px; min-height: 40px; }
  .btn.sm, .seg button, .trip, .li-tabs button, .sk-levels button, .eq-jump a, .set-nav a { min-height: 40px; }
  .link { min-height: 36px; }
  .t td { padding-top: 10px; padding-bottom: 10px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  .switch { width: 46px; height: 28px; }
  .switch span::after { width: 22px; height: 22px; }
  .switch input:checked + span::after { transform: translateX(18px); }
  .num-input { min-height: 40px; }
  .sm-select { min-height: 40px; }
}
/* Tablets: comfortable widths, a header that doesn't wrap awkwardly. */
@media (min-width: 761px) and (max-width: 1180px) {
  main { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .top { gap: 12px; }
  .mainnav a { padding: 8px 10px; }
  .me-name { display: none; }
  .sk-wrap { grid-template-columns: 1fr; }
  .sk-svg { height: min(62vh, 760px); }
  .sk-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .mainnav a span { display: none; }
  .mainnav a { padding: 8px 12px; }
}
/* The sticky measurement bar stays clear of the iPad home indicator and doesn't cover tables. */
@media (min-width: 761px) { .qty-helper { bottom: max(12px, env(safe-area-inset-bottom)); } }
html { scroll-padding-top: 76px; }
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  a.savestate { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
  button.link { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 8px; }
  .dt-input, .tear-date { min-height: 40px; }
  .est-note { min-height: 38px; }
}

/* ---------- Show / hide password ---------- */
.pw { position: relative; display: block; }
.pw input { padding-right: 76px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 4px 12px; font-size: .82rem; border-radius: 7px; background: var(--surface-2); border-color: var(--border); color: var(--text); }
@media (pointer: coarse) { .pw-eye { min-height: 40px; } .pw input { padding-right: 84px; } }

/* ---------- Favorite jobs ---------- */
.jr-main strong { display: flex; align-items: center; gap: 4px; }
.jr-star { margin-left: -6px; }
.jobrow.fav { border-color: color-mix(in srgb, #e0a100 45%, var(--border)); }
.job-star { font-size: 1.6rem; min-width: 40px; min-height: 40px; margin-left: -8px; }