/* Rinse UI — modern, unique, dark-mode ready.
   Tokens inspired by Atlas zellige + aurora, not flags.
   One accent (teal), white/dark canvases, photo-first cards. */
@font-face { font-family: Figtree; font-weight: 300 900; font-display: swap; src: url(fonts/figtree.woff2) format("woff2"); }

:root {
  /* Light (default) */
  --primary:#0a7a79; --primary-active:#086564; --primary-soft:#e6f3f3;
  --ink:#1a1f2e; --body:#374151; --muted:#6b7280; --hair:#e5e7eb; --hair-soft:#f3f4f6; --soft:#f0fdfa; --canvas:#ffffff;
  --before:#c2410c; --after:#0a7d46; --danger:#b32505;
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --shadow:0 0 0 1px rgba(10,122,121,.06), 0 2px 8px rgba(10,122,121,.08), 0 8px 24px rgba(10,122,121,.12);
  --shadow-hover:0 0 0 1px rgba(10,122,121,.1), 0 4px 16px rgba(10,122,121,.14), 0 16px 32px rgba(10,122,121,.18);
  --backdrop:rgba(0,0,0,.45);
  --sans:Figtree,-apple-system,"SF Pro Text",system-ui,Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --primary:#14b8a6; --primary-active:#0d9488; --primary-soft:#0f3d3a;
    --ink:#f1f5f9; --body:#cbd5e1; --muted:#94a3b8; --hair:#334155; --hair-soft:#1e293b; --soft:#0c2d2a; --canvas:#0b1220;
    --before:#fb923c; --after:#34d399; --danger:#f87171;
    --shadow:0 0 0 1px rgba(20,184,166,.12), 0 2px 8px rgba(20,184,166,.16), 0 8px 24px rgba(20,184,166,.22);
    --shadow-hover:0 0 0 1px rgba(20,184,166,.18), 0 4px 16px rgba(20,184,166,.22), 0 16px 32px rgba(20,184,166,.28);
    --backdrop:rgba(0,0,0,.65);
  }
}

*, *::before, *::after { box-sizing:inherit; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(72px + env(safe-area-inset-top,0px)); }
body { margin:0; background:var(--canvas); color:var(--body); font:400 16px/1.55 var(--sans); min-height:100vh; transition:background .3s, color .3s; }
h1,h2,h3 { color:var(--ink); margin:0; font-family:var(--sans); }
h1 { font-size:clamp(1.6rem,4.5vw,2.25rem); line-height:1.15; font-weight:700; letter-spacing:-.02em; }
h2 { font-size:1.25rem; font-weight:600; line-height:1.3; }
h3 { font-size:1rem; font-weight:600; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
main:focus { outline:none; }
.hint { color:var(--muted); font-size:.95rem; margin:4px 0 0; }

/* Zellige pattern (subtle, Morocco) */
:root { --zel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%230a7a79' stroke-opacity='.08'%3E%3Crect x='11' y='11' width='22' height='22'/%3E%3Crect x='11' y='11' width='22' height='22' transform='rotate(45 22 22)'/%3E%3Ccircle cx='22' cy='22' r='3.2'/%3E%3C/g%3E%3C/svg%3E"); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --zel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%2314b8a6' stroke-opacity='.12'%3E%3Crect x='11' y='11' width='22' height='22'/%3E%3Crect x='11' y='11' width='22' height='22' transform='rotate(45 22 22)'/%3E%3Ccircle cx='22' cy='22' r='3.2'/%3E%3C/g%3E%3C/svg%3E"); }
}

/* Nav */
.nav { position:sticky; top:0; z-index:20; background:var(--canvas); border-bottom:1px solid var(--hair); padding-top:env(safe-area-inset-top,0px); margin-top:calc(-1 * env(safe-area-inset-top,0px)); }
.nav::after { content:""; display:block; height:6px; background:var(--zel), linear-gradient(90deg,var(--primary) 0%,var(--primary-active) 100%); background-size:44px 44px,100% 100%; opacity:.15; }
.nav-in { max-width:1100px; margin:0 auto; padding:0 16px; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.3rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em; }
.logo svg { transition:transform .4s cubic-bezier(.3,1.6,.5,1); filter:drop-shadow(0 2px 6px rgba(10,122,121,.3)); }
.logo:hover svg { transform:rotate(-12deg) scale(1.08); }
.nav-r { display:flex; align-items:center; gap:4px; }
.soon { color:var(--muted); opacity:.5; font-size:.85rem; padding:0 10px; cursor:default; }
@media (max-width:640px) { .nav-r .btn { font-size:.8rem; } }

/* Buttons — flat, 8px, 48px primary targets */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--r-sm); border:1px solid var(--hair); background:var(--canvas); color:var(--ink); font:600 .95rem var(--sans); cursor:pointer; text-decoration:none; position:relative; overflow:hidden; transition:transform .12s, background .15s, box-shadow .2s, border-color .15s; }
.btn:active:not(:disabled) { transform:scale(.97); }
.btn:hover:not(:disabled) { background:var(--soft); border-color:#c1c1c1; box-shadow:var(--shadow); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { min-height:48px; background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:var(--shadow); background-image:linear-gradient(120deg,rgba(255,255,255,0),rgba(20,184,166,.25)); }
.btn.primary:hover:not(:disabled) { background:var(--primary-active); border-color:var(--primary-active); box-shadow:var(--shadow-hover); }
.btn.quiet { border-color:transparent; background:transparent; }
.btn.quiet:hover:not(:disabled) { background:var(--soft); }
.btn.danger { color:var(--danger); }
.btn.sm { min-height:36px; padding:0 12px; font-size:.85rem; }
.chip { font:600 .8rem var(--sans); padding:6px 12px; min-height:32px; border-radius:999px; border:1px solid var(--hair); background:var(--canvas); color:var(--ink); cursor:pointer; }
.chip.off { border-color:var(--before); color:var(--before); }
.chip.wait::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--before); margin-right:6px; animation:pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity:.5; } }

/* Layout */
main { max-width:1100px; margin:0 auto; padding:28px 16px 140px; }
.foot { max-width:1100px; margin:0 auto; padding:28px 16px 56px; color:var(--muted); font-size:.85rem; border-top:1px solid var(--hair-soft); position:relative; }
.foot::before { content:""; position:absolute; left:16px; right:16px; top:0; height:6px; background:var(--zel); background-size:44px 44px; opacity:.12; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }

/* Home */
.hero { position:relative; overflow:hidden; isolation:isolate; margin:8px 0 28px; padding:36px 24px 28px; border-radius:var(--r-lg); color:#c9e6ea;
  background:var(--zel), linear-gradient(160deg,#08121c 0%,#0d1f2d 100%);
  background-size:44px 44px,100% 100%;
  box-shadow:var(--shadow-hover); }
.hero::before { content:""; position:absolute; z-index:-1; inset:-60% -30%; filter:blur(52px); opacity:.8; animation:aurora 20s linear infinite;
  background:conic-gradient(from 90deg at 50% 50%,transparent 0 8%,rgba(20,184,166,.45) 18%,transparent 34%,rgba(122,107,255,.35) 52%,transparent 66%,rgba(43,183,217,.4) 82%,transparent 94%); }
@keyframes aurora { to { transform:rotate(360deg); } }
@media (prefers-color-scheme:light) {
  .hero { background:var(--zel), linear-gradient(160deg,#08121c 0%,#0d1f2d 100%); background-size:44px 44px,100% 100%; }
}
.hero h1 { color:#fff; font-size:clamp(1.7rem,5vw,2.5rem); line-height:1.1; letter-spacing:-.02em; max-width:18ch; }
.hero p { color:#bfe9ee; }
.hero .row .btn { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; backdrop-filter:blur(6px); }
.hero .row .btn:hover:not(:disabled) { background:rgba(255,255,255,.18); }
.hero .row .btn.primary { background:var(--primary); border-color:transparent; background-image:linear-gradient(120deg,rgba(255,255,255,0),rgba(20,184,166,.3)); }

/* Status window (system UI feel) */
.status-win { display:grid; grid-template-columns:1.1fr 1fr 1.2fr; gap:1px; margin-top:20px; border:1px solid rgba(20,184,166,.35); border-radius:12px; overflow:hidden; background:rgba(20,184,166,.12); font-family:var(--mono); box-shadow:0 0 22px rgba(20,184,166,.18); animation:pop .5s cubic-bezier(.3,1.5,.5,1) both; }
.status-win .ttl { grid-column:1/-1; padding:7px 12px; background:rgba(8,18,28,.85); color:#8fd9cf; font-size:.68rem; letter-spacing:.16em; }
.status-win .ttl b { color:#fff; }
.status-win div { background:rgba(8,18,28,.7); padding:9px 12px; }
.status-win small { display:block; color:#8fd9cf; font-size:.64rem; letter-spacing:.14em; }
.status-win strong { color:#fff; font-size:1.3rem; line-height:1.2; }
.status-win strong.rank { color:var(--aurora-1,#19d3a2); text-shadow:0 0 14px rgba(25,211,162,.7); }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.97); } }
@media (max-width:420px) { .status-win { grid-template-columns:1fr 1fr; } .status-win div:last-child { grid-column:1/-1; } }

/* Jobs grid */
.jobs { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px 16px; margin-top:16px; }
.job { display:block; width:100%; padding:0; border:0; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.job .cover { position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; background:var(--soft); box-shadow:var(--shadow); transition:box-shadow .3s; }
.job .cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.job:hover .cover { box-shadow:var(--shadow-hover); }
.job:hover .cover img { transform:scale(1.03); }
.job .badge { position:absolute; left:10px; top:10px; padding:4px 10px; border-radius:999px; background:#fff; color:var(--ink); font:600 .75rem var(--sans); box-shadow:0 1px 3px rgba(0,0,0,.15); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .job .badge { background:rgba(15,23,42,.95); color:#fff; }
}
.job .badge.wait { color:var(--before); }
.job h3 { margin-top:10px; }
.job small { color:var(--muted); font-size:.9rem; display:block; }
.empty { border:1px dashed var(--hair); border-radius:var(--r-md); padding:40px 20px; text-align:center; color:var(--muted); position:relative; overflow:hidden; }
.empty::after { content:""; position:absolute; inset:0; pointer-events:none; background:var(--zel); background-size:44px 44px; opacity:.05; }
.empty b { display:block; color:var(--ink); font-size:1.15rem; margin-bottom:6px; position:relative; z-index:1; }

/* Job page */
.crumb { margin:-8px 0 8px -12px; }
.jhead { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.jmeta { color:var(--muted); margin:4px 0 0; }
.stats { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
.stat { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font:600 .8rem var(--mono); color:var(--ink); border:1px solid var(--hair); background:linear-gradient(180deg,var(--soft),var(--canvas)); box-shadow:0 0 0 3px rgba(10,122,121,.06); letter-spacing:.02em; }
.stat::before { content:"▣"; color:var(--primary); font-size:.9em; }
.stat.todo { border-color:var(--before); background:linear-gradient(180deg,#fff4ec,#fff); box-shadow:0 0 0 3px rgba(194,65,12,.07); }
.stat.todo::before { color:var(--before); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .stat.todo { background:#3d2510; color:#fdba74; box-shadow:0 0 0 3px rgba(251,146,60,.12); }
}
.sec { margin-top:36px; }
.sec > h2 { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sec > h2::before { content:""; width:18px; height:18px; flex:none; background:var(--primary); -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat; }
:root { --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3Crect x='14' y='14' width='72' height='72'/%3E%3Crect x='14' y='14' width='72' height='72' transform='rotate(45 50 50)'/%3E%3C/g%3E%3C/svg%3E"); }

/* Pair sliders — photo-first, large */
.pairs { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr)); gap:24px 16px; }
.pair { content-visibility:auto; contain-intrinsic-size:auto 440px; }
.cmp { position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; background:var(--soft); --p:50%; touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none; box-shadow:var(--shadow); transition:box-shadow .3s; }
.cmp:hover { box-shadow:var(--shadow-hover); }
.cmp img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.cmp .b { clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.cmp .line { position:absolute; top:0; bottom:0; left:var(--p); width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.9), 0 0 0 1px rgba(0,0,0,.12); }
.cmp .knob { position:absolute; top:50%; left:var(--p); width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:#fff; color:#222; display:grid; place-items:center; box-shadow:0 0 0 4px rgba(20,184,166,.35), 0 2px 10px rgba(0,0,0,.35); animation:ping 3s ease-out infinite; }
@keyframes ping { 70%,100% { box-shadow:0 0 0 16px rgba(20,184,166,0), 0 2px 10px rgba(0,0,0,.35); } }
.cmp .tag { position:absolute; top:10px; padding:4px 10px; border-radius:999px; color:#fff; font:700 .72rem/1 var(--sans); letter-spacing:.02em; }
.tag.l { left:10px; background:var(--before); }
.tag.r { right:10px; background:var(--after); }
.cmp input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; pointer-events:none; }
.cmp:focus-within { outline:3px solid var(--primary); outline-offset:2px; }

/* Area caption input */
.cap { width:100%; margin-top:10px; padding:10px 0; border:0; border-bottom:1px solid var(--hair); border-radius:0; background:transparent; font:600 1rem var(--sans); color:var(--ink); }
.cap::placeholder { color:var(--muted); font-weight:400; }
.cap:focus { border-bottom-color:var(--primary); outline:none; }

/* Pair actions */
.pactions { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin:6px -6px 0; }
.pactions .btn { padding:0 4px; gap:4px; font-size:.8rem; white-space:nowrap; }
.pactions svg { width:18px; height:18px; flex:none; }

/* Grid of loose photos */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.ph { position:relative; border-radius:var(--r-sm); overflow:hidden; background:var(--soft); cursor:pointer; padding:0; border:0; display:block; width:100%; }
.ph img { display:block; width:100%; aspect-ratio:1; object-fit:cover; transition:transform .3s; }
.ph:hover img { transform:scale(1.03); }
.ph .tag { position:absolute; bottom:6px; left:6px; padding:3px 8px; border-radius:999px; font-size:.65rem; font-weight:700; color:#fff; background:rgba(34,34,34,.78); }
.ph .tag.before { background:var(--before); }
.ph .tag.after { background:var(--after); }
.ph .tag.none { background:var(--muted); }

/* Card container */
.card { border:1px solid var(--hair); border-radius:var(--r-md); padding:20px; background:var(--canvas); }
.card + .card { margin-top:12px; }

/* Form fields */
textarea, .field { width:100%; font:inherit; padding:12px; border:1px solid var(--hair); border-radius:var(--r-sm); color:var(--ink); background:var(--canvas); transition:border-color .15s, box-shadow .15s; }
textarea:focus, .field:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); outline:none; }

/* Share card */
.share .url { display:flex; gap:8px; align-items:center; margin:12px 0; padding:10px 12px; background:var(--soft); border-radius:var(--r-sm); font-weight:600; color:var(--ink); word-break:break-all; font-size:.95rem; }
.bar { height:8px; border-radius:999px; background:var(--hair-soft); overflow:hidden; margin:12px 0 4px; }
.bar > i { display:block; height:100%; background:var(--primary); transition:width .25s; }
.note { padding:10px 12px; border-radius:var(--r-sm); background:var(--soft); color:var(--body); font-size:.9rem; margin-top:12px; }
.note.warn { background:#fff4ec; color:#8a2f08; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .note.warn { background:#3d2510; color:#fcd34d; }
}

/* Dock — thumb reach */
.dock { position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--canvas); border-top:1px solid var(--hair); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 30px -18px rgba(8,18,28,.3); }
.dock-in { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; }
.dock .btn { min-height:48px; padding:0 8px; }
@media (max-width:420px) { .dock .btn { font-size:.85rem; } }

/* Dialogs, sheet, toasts */
dialog { border:0; border-radius:var(--r-md); padding:24px; width:min(540px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; color:var(--body); background:var(--canvas); box-shadow:var(--shadow-hover); }
dialog::backdrop { background:var(--backdrop, rgba(0,0,0,.45)); }
dialog label { display:block; font-weight:600; font-size:.9rem; color:var(--ink); margin:14px 0 0; }
dialog input:not([type=checkbox]):not([type=file]):not([type=radio]), input.field, textarea { display:block; width:100%; margin-top:6px; min-height:44px; padding:0 12px; font:400 1rem var(--sans); border:1px solid var(--hair); border-radius:var(--r-sm); color:#172033; background:#fff; caret-color:#0a7a79; }
input::placeholder, textarea::placeholder { color:#64748b !important; opacity:1; }
input:disabled { opacity:.65; }
dialog input:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-soft); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px) { .two { grid-template-columns:1fr; } }
dialog label.check { display:flex; gap:10px; align-items:flex-start; font-weight:400; }
dialog label.check input { margin-top:4px; width:18px; height:18px; accent-color:var(--primary); }
dialog hr { border:0; border-top:1px solid var(--hair-soft); margin:20px 0 4px; }
dialog menu { display:flex; justify-content:flex-end; gap:8px; padding:12px 0 0; margin:20px 0 0; position:sticky; bottom:0; background:var(--canvas); box-shadow:0 -12px 16px -16px rgba(0,0,0,.4); }
fieldset { border:0; padding:0; margin:16px 0 0; }
legend { font-weight:600; font-size:.9rem; color:var(--ink); padding:0; margin-bottom:8px; }
.swatches { display:flex; gap:10px; flex-wrap:wrap; }
.swatches label { margin:0; position:relative; display:block; width:36px; height:36px; }
.swatches input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.swatches span { display:block; width:36px; height:36px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--hair); cursor:pointer; }
.swatches input:checked + span { box-shadow:0 0 0 3px var(--ink); }
.swatches input:focus-visible + span { outline:3px solid var(--primary); outline-offset:3px; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .swatches span { border-color:var(--ink); box-shadow:0 0 0 1px var(--hair); }
}

/* Theme radios - vertical list with visible text */
.theme-radios { display:flex; flex-direction:column; gap:8px; }
.theme-radios label { display:flex; align-items:center; gap:10px; cursor:pointer; padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--hair); background:var(--canvas); color:var(--ink); transition:background .15s, border-color .15s; }
.theme-radios label:hover { background:var(--soft); }
.theme-radios input { width:18px; height:18px; accent-color:var(--primary); }
.theme-radios input:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }

/* Dev tools in settings */
.dev-tools { margin-top:16px; }
.dev-tools summary { cursor:pointer; font-weight:600; color:var(--ink); padding:8px 0; }
.dev-tools .row { margin-top:12px; }

.logo-row { display:flex; gap:8px; align-items:center; margin-top:14px; }
.logo-row img { width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; border:1px solid var(--hair); }
.sheet { margin:auto auto 0; width:min(560px,100vw); border-radius:20px 20px 0 0; padding:8px 8px calc(12px + env(safe-area-inset-bottom,0px)); }
@media (min-width:700px) { .sheet { margin:auto; border-radius:var(--r-md); } }
.sheet h3 { padding:12px 16px 4px; }
.sheet button { display:flex; width:100%; min-height:52px; align-items:center; padding:0 16px; border:0; background:none; font:500 1.05rem var(--sans); color:var(--ink); text-align:left; cursor:pointer; border-radius:var(--r-sm); }
.sheet button:hover { background:var(--soft); }
.sheet button.danger { color:var(--danger); }

.toasts { position:fixed; left:0; right:0; bottom:calc(100px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:60; pointer-events:none; padding:0 16px; }
.toast { background:var(--ink); color:#fff; padding:12px 16px; border-radius:var(--r-sm); max-width:min(420px,100%); font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,.3); font-family:var(--mono); font-size:.9rem; animation:pop .3s both; }
.toast::before { content:"[ SYSTEM ]"; display:block; margin-bottom:2px; color:var(--primary); font-size:.64rem; letter-spacing:.18em; }
:root:not([data-theme="light"]) .toast { color:#0b1220; }

/* Camera */
.cam { position:fixed; inset:0; z-index:50; background:#000; color:#fff; display:flex; flex-direction:column; }
.cam video,.cam .ghost { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cam .ghost { pointer-events:none; opacity:.45; }
.cam .top,.cam .bottom { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px; background:linear-gradient(rgba(0,0,0,.55),transparent); }
.cam .bottom { margin-top:auto; flex-direction:column; align-items:stretch; padding:24px 16px calc(20px + env(safe-area-inset-bottom,0px)); background:linear-gradient(transparent,rgba(0,0,0,.6)); }
.cam .t { text-align:center; font-weight:600; line-height:1.25; }
.cam .t small { display:block; font-weight:400; opacity:.85; }
.cam button.c { min-width:48px; min-height:48px; padding:0 14px; border-radius:999px; border:0; background:rgba(255,255,255,.15); color:#fff; font:600 .95rem var(--sans); backdrop-filter:blur(6px); cursor:pointer; }
.cam .shutter-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-top:12px; }
.cam .shutter { width:76px; height:76px; border-radius:50%; border:4px solid #fff; background:rgba(255,255,255,.2); padding:0; cursor:pointer; transition:background .15s; }
.cam .shutter:active { background:#fff; }
.cam .last { width:52px; height:52px; border-radius:var(--r-sm); overflow:hidden; background:rgba(255,255,255,.15); }
.cam .last img { width:100%; height:100%; object-fit:cover; display:block; }
.cam .ghost-ctl { display:flex; align-items:center; gap:12px; font-weight:600; font-size:.85rem; }
.cam .ghost-ctl input { flex:1; accent-color:#fff; }
.cam .flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:3; }
.cam .flash.go { animation:flash .25s ease-out; }
@keyframes flash { from { opacity:.8; } to { opacity:0; } }
.cam .msg { position:relative; z-index:2; margin:auto; padding:24px; text-align:center; max-width:32ch; }

/* Water drop burst on primary buttons */
.drop { position:fixed; z-index:99; width:7px; height:10px; border-radius:50% 50% 50% 50%/62% 62% 38% 38%; background:#7fe3dd; pointer-events:none; animation:drop .65s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes drop { from { transform:translate(0,0) scale(1); opacity:1; } to { transform:translate(var(--dx),var(--dy)) scale(.35); opacity:0; } }

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  .hero::before, .empty::after, .cmp .knob, .status-win, .btn.primary::after, .drop, .btn:active:not(:disabled), .btn:hover:not(:disabled) { animation:none !important; transition:none !important; }
}
/* Workflow-first home dashboard */
.status-win .status-cell { display:block; width:100%; border:0; border-radius:0; text-align:left; font:inherit; cursor:pointer; color:#fff; background:rgba(8,18,28,.7); padding:9px 12px; }
.status-win .status-cell:hover, .status-win .status-cell:focus-visible { background:rgba(8,18,28,.95); }
.status-win .status-cell small { display:block; }
.status-win .status-cell strong { display:block; }
.status-win .status-note { display:block; margin-top:3px; color:#a4c6cb; font:400 .72rem/1.35 var(--sans); letter-spacing:0; }
.status-win .sync-value { font-size:clamp(.9rem,2.6vw,1.3rem); overflow-wrap:anywhere; }
.status-win .status-foot { grid-column:1/-1; padding:8px 12px; background:rgba(8,18,28,.85); color:#8fd9cf; font-size:.65rem; letter-spacing:.13em; }
.jobs-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.jobs-heading h2 { margin-bottom:0; }
.job-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-top:10px; }
.job-title-row h3 { margin-top:0; }
.job-state { flex:none; display:inline-flex; align-items:center; border-radius:999px; padding:3px 8px; border:1px solid var(--hair); color:var(--muted); font-size:.7rem; line-height:1.35; font-weight:650; background:var(--soft); }
.job-state.ready { color:#087f5b; background:#e8fbf3; border-color:#b5f0d7; }
.job-state.todo { color:#9a3412; background:#fff4e8; border-color:#fed7aa; }
.job-state.wait { color:#92400e; background:#fff7d6; border-color:#fde68a; }
.job-state.shared { color:var(--primary); }
.job .cover-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:100%; color:var(--muted); font-size:.85rem; }
.job .cover-empty svg { width:28px; height:28px; opacity:.7; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .job-state.ready { color:#6ee7b7; background:#063c31; border-color:#11634f; }
  :root:not([data-theme="light"]) .job-state.todo { color:#fdba74; background:#422006; border-color:#854d0e; }
  :root:not([data-theme="light"]) .job-state.wait { color:#fde68a; background:#422006; border-color:#854d0e; }
}
@media (max-width:520px) {
  .hero { padding:26px 18px 20px; margin-bottom:22px; }
  .status-win { grid-template-columns:1fr 1fr; }
  .status-win .status-cell:nth-of-type(3) { grid-column:1/-1; }
  .status-win .status-cell { grid-column:auto; }
  .status-win .status-foot { grid-column:1/-1; }
  .job-title-row { flex-direction:column; gap:4px; }
  .job-state { white-space:normal; }
}

/* Calendar, contacts and form readability improvements */
.nav-r .btn { padding-left:10px; padding-right:10px; }
.status-win .status-cell { min-width:0; }
.status-win .status-cell strong { overflow-wrap:anywhere; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin:8px 0 22px; }
.page-head p { color:var(--muted); margin:6px 0 0; }
.page-tools { display:flex; gap:8px; flex-wrap:wrap; }
.calendar-wrap { border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; background:var(--canvas); box-shadow:var(--shadow); }
.cal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid var(--hair); }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-dow { padding:10px 4px; text-align:center; color:var(--muted); font-size:.75rem; font-weight:700; text-transform:uppercase; }
.cal-day { min-height:104px; padding:8px 6px; border:0; border-top:1px solid var(--hair-soft); border-right:1px solid var(--hair-soft); background:transparent; color:var(--ink); text-align:left; cursor:pointer; min-width:0; }
.cal-day:nth-child(7n) { border-right:0; }
.cal-day:hover,.cal-day.selected { background:var(--soft); }
.cal-day.muted-day { opacity:.42; }
.cal-day.today .day-num { background:var(--primary); color:white; }
.day-num { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; font-size:.82rem; margin-bottom:5px; }
.cal-event { display:block; font-size:.68rem; line-height:1.25; padding:3px 4px; border-radius:4px; background:var(--primary-soft); color:var(--primary-active); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:3px; }
.cal-event.due { background:#fff0e6; color:#9a3412; }
.cal-agenda { margin-top:24px; }
.agenda-item,.contact-card { border:1px solid var(--hair); border-radius:var(--r-md); padding:14px 16px; margin-top:10px; background:var(--canvas); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.agenda-item h3,.contact-card h3 { margin:0 0 3px; }
.agenda-item p,.contact-card p { margin:0; color:var(--muted); font-size:.9rem; }
.agenda-item .due-tag { color:#b45309; font-size:.78rem; font-weight:700; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.contact-card { align-items:flex-start; margin:0; }
.contact-avatar { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); font-weight:800; }
.contact-copy { flex:1; min-width:0; }
.contact-copy p { overflow-wrap:anywhere; }
@media(max-width:640px) { .nav-in { align-items:center; padding-left:10px; padding-right:10px; } .logo { gap:6px; font-size:1.1rem; } .nav-r { gap:0; } .nav-r .btn { font-size:.72rem; padding:0 6px; min-height:36px; } #calendar-top,#contacts-top { display:inline-flex; } .cal-day { min-height:78px; padding:5px 2px; } .cal-dow { font-size:.85rem; } }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .cal-event.due { background:#422006; color:#fdba74; }
}
.timeline-card { padding:18px; }
.timeline { position:relative; margin-top:14px; }
.timeline::before { content:""; position:absolute; top:8px; bottom:12px; left:8px; width:2px; background:var(--hair); }
.timeline-item { position:relative; display:flex; gap:12px; padding:0 0 18px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot { width:18px; height:18px; flex:none; border-radius:50%; background:var(--primary); border:4px solid var(--primary-soft); z-index:1; }
.timeline-item strong { color:var(--ink); display:block; }
.timeline-item p { margin:2px 0; font-size:.9rem; }
.timeline-item small { color:var(--muted); font-size:.78rem; }
.timeline-item.upcoming .timeline-dot { background:var(--canvas); border:2px dashed var(--primary); }

/* Collapsible timeline: the job page leads with the photos, not the log */
.timeline-card { padding:18px; }
.timeline-card > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; font:600 1.25rem var(--sans); color:var(--ink); }
.timeline-card > summary::-webkit-details-marker { display:none; }
.timeline-card > summary::before { content:""; width:18px; height:18px; flex:none; background:var(--primary); -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat; }
.timeline-card > summary::after { content:"▾"; margin-left:auto; color:var(--muted); transition:transform .2s; }
.timeline-card[open] > summary::after { transform:rotate(180deg); }

/* Demo workspace banner */
.demo-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 16px; background:var(--primary-soft); border-bottom:1px solid var(--hair); color:var(--ink); font-size:.85rem; }
.demo-banner .demo-tag { font:700 .7rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--primary); }
.demo-banner .demo-note { color:var(--muted); }
.demo-banner .demo-actions { margin-left:auto; display:flex; gap:6px; }
.demo-banner .btn:not(.primary) { background:var(--canvas); }
@media (max-width:640px) {
  .demo-banner { padding:8px 12px; }
  .demo-banner .demo-note { display:none; }
}

/* Calendar on phones: coloured dots instead of unreadable labels */
@media (max-width:640px) {
  .cal-event { display:inline-block; width:6px; height:6px; padding:0; margin:4px 3px 0 0; border-radius:50%; font-size:0; background:var(--primary); overflow:hidden; }
  .cal-event.due { background:#ea580c; }
}

/* Phone header: logo + a status dot + the three destinations, never clipped */
@media (max-width:480px) {
  .nav-in { padding:0 10px; min-height:56px; gap:4px; }
  .logo { font-size:1rem; gap:6px; }
  .logo svg { width:24px; height:24px; }
  .nav-r { gap:0; }
  .nav-r .btn { font-size:.78rem; padding:0 6px; min-height:34px; }
  #net { font-size:0; width:30px; min-height:30px; padding:0; border-radius:50%; display:inline-grid; place-items:center; }
  #net::before { content:""; width:8px; height:8px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.18); }
  #net.off::before { background:var(--before); box-shadow:0 0 0 3px rgba(194,65,12,.18); }
  #net.wait::before { background:#d97706; animation:pulse 1.5s infinite; }
  .jmeta { font-size:.95rem; }
  .hero { padding:22px 16px 18px; border-radius:16px; }
  .hero h1 { font-size:1.5rem; max-width:20ch; }
  .hero p { font-size:.95rem; }
  .status-win { margin-top:16px; }
  .status-win .status-cell { padding:7px 10px; }
  .status-win .status-note { font-size:.66rem; }
  main { padding-top:18px; }
}