/* KORA Field — design system. Phones get a light field theme (readable in sun); wide screens get the dark command centre. */
:root {
  --bg:#f3f5f8; --card:#ffffff; --card2:#f8fafc; --ink:#15202b; --muted:#5b6878; --line:#dde3ea; --line2:#e9edf2;
  --brand:#1f6fb2; --brand-ink:#ffffff; --brand-soft:#e6f0fa; --focus:#1f6fb2;
  --ok:#16a34a; --ok-soft:#e8f7ee; --warn:#c98a00; --warn-soft:#fff6db; --orange:#e2700c; --orange-soft:#ffeede; --bad:#d4382b; --bad-soft:#fdecea; --info:#2563eb; --grey:#8a97a6;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:#070b10; --card:#0d141c; --card2:#111b26; --ink:#d9e4ef; --muted:#8095aa; --line:#1b2836; --line2:#152130;
  --brand:#34c1ff; --brand-ink:#04121c; --brand-soft:#0e2536; --focus:#34c1ff;
  --ok:#2ee59d; --ok-soft:#0d2a20; --warn:#ffcc4d; --warn-soft:#2a230d; --orange:#ff9a3d; --orange-soft:#2c1a0b; --bad:#ff5c5c; --bad-soft:#2d1111; --info:#6aa8ff; --grey:#5d7085;
  --shadow:0 0 0 1px rgba(52,193,255,.04), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); }
body { padding: env(safe-area-inset-top) 0 calc(80px + env(safe-area-inset-bottom)); transition: background .3s; }
main { max-width:680px; margin:0 auto; padding:0 16px; }
h1 { font-size:24px; margin:18px 0 4px; letter-spacing:-.01em; }
h2 { font-size:17px; margin:22px 0 8px; display:flex; align-items:center; gap:8px; }
h3 { font-size:15px; margin:14px 0 6px; }
.muted { color:var(--muted); font-size:13px; }
.num, .mono { font-family:var(--mono); font-variant-numeric: tabular-nums; }
a { color:var(--brand); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin:12px 0; box-shadow:var(--shadow); }
.card.flush { padding:4px 14px; }
.sec { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:22px 0 4px; }
.hidden { display:none !important; }

/* form */
label { display:block; font-size:15px; font-weight:600; margin:14px 0 6px; }
label .req { color:var(--bad); }
.hint { color:var(--muted); font-size:13px; margin-top:4px; }
input, select, textarea { width:100%; font-size:18px; padding:13px 14px; min-height:54px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--ink); font-family:inherit; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
textarea { min-height:92px; }
input.bad, select.bad, textarea.bad { border-color:var(--bad); background:var(--bad-soft); }
.err { color:var(--bad); font-size:13px; margin-top:5px; }
.warn { color:var(--warn); background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius:10px; padding:8px 10px; font-size:14px; margin-top:6px; }
.note { background:var(--brand-soft); border-radius:10px; padding:10px 12px; font-size:14px; margin-top:8px; }
.row { display:flex; gap:10px; } .row > * { flex:1; min-width:0; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
/* v0.22.4: next visit = one chip row (the date box opens only for another day) */
#info_nextBox.note { background:none; padding:0; margin-top:4px; }
#info_nextBox .hint { margin-top:6px; }
.fld.nv-merged > input[type="date"], .fld.nv-merged > .hint { display:none; }
.fld.nv-merged.nv-pick > input[type="date"] { display:block; }
.chip { flex:1 0 auto; min-width:64px; min-height:50px; font-size:16px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); padding:0 12px; font-family:inherit; transition: transform .08s, background .15s, border-color .15s; }
.chip:active { transform:scale(.97); }
.chip.on { border-color:var(--brand); background:var(--brand-soft); font-weight:700; color:var(--ink); box-shadow: inset 0 0 0 1px var(--brand); }
.checks .chk { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; font-size:16px; cursor:pointer; background:var(--card); }
.checks .chk .box { width:26px; height:26px; border-radius:8px; border:2px solid var(--line); flex:none; display:grid; place-items:center; transition:.15s; }
.checks .chk.on { border-color:var(--ok); background:var(--ok-soft); }
.checks .chk.on .box { background:var(--ok); border-color:var(--ok); }
.checks .chk.on .box::after { content:"✓"; color:#fff; font-weight:800; font-size:16px; }
.fsec { margin-top:22px; padding-top:14px; border-top:1px dashed var(--line); }
.fsec:first-of-type { border-top:0; margin-top:4px; padding-top:0; }
.fsec > .t { font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }

/* buttons */
.btn { width:100%; min-height:56px; font-size:18px; font-weight:700; border:0; border-radius:12px; background:var(--brand); color:var(--brand-ink); margin-top:14px; font-family:inherit; cursor:pointer; transition: transform .08s, filter .15s, opacity .15s; }
.btn:active { transform:scale(.985); } .btn:hover { filter:brightness(1.05); }
.btn.ghost { background:var(--card); color:var(--ink); border:1px solid var(--line); font-weight:600; font-size:16px; min-height:50px; margin-top:10px; }
.btn.small { width:auto; min-height:40px; font-size:14px; padding:0 14px; margin:0; }
.btn.danger { background:var(--bad); color:#fff; }
.btn.ok { background:var(--ok); color:#fff; }
.btn:disabled { opacity:.5; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; min-height:96px; text-align:left; font-family:inherit; color:var(--ink); cursor:pointer; box-shadow:var(--shadow); transition: transform .1s, border-color .15s; display:flex; flex-direction:column; gap:4px; font-size:15px; font-weight:600; }
.tile:active { transform:scale(.98); }
.tile .ic { font-size:24px; }
.tile .n { font-family:var(--mono); font-size:26px; font-weight:800; }
.tile .s { font-size:12px; color:var(--muted); font-weight:500; }
.tile.bad { border-color:color-mix(in srgb, var(--bad) 45%, var(--line)); } .tile.bad .n { color:var(--bad); }
.tile.warn .n { color:var(--warn); } .tile.ok .n { color:var(--ok); }
.photo-btn { flex:1; min-height:84px; font-size:17px; font-weight:600; line-height:1.4; border:2px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius:14px; background:var(--card2); color:var(--ink); font-family:inherit; }

/* lists */
.item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line2); cursor:pointer; }
.item:last-child { border-bottom:0; }
.item .main { flex:1; min-width:0; }
.item .t { font-size:16px; font-weight:600; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; } /* v0.9.1: two lines on a phone — the kind after the name was cut off */
.item .s { color:var(--muted); font-size:13px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* v0.9 #1 payment chase */
.item .s.chase-broken { color:var(--bad); font-weight:600; }
.item .s.chase-waiting { color:var(--info); }
.item .s.chase-broken, .item .s.chase-waiting, .item .s.chase-tries { white-space:normal; }
.sec-mini { font-size:12px; font-weight:700; color:var(--muted); margin:12px 0 4px; }
/* v0.9 parts counts */
.counts { display:flex; flex-wrap:wrap; gap:8px; }
.counts .cnt { display:flex; flex:1 0 auto; }
.counts .cnt .chip { flex:1 0 auto; }
.counts .cnt.on .chip { border-top-right-radius:0; border-bottom-right-radius:0; }
.counts .cminus { flex:0 0 46px; min-height:50px; font-size:22px; font-family:inherit; border:1px solid var(--brand); border-left:0; background:var(--card); color:var(--ink); border-radius:0 12px 12px 0; display:none; }
.counts .cnt.on .cminus { display:block; }
/* v0.9 #5 signature pad */
.signpad { position:relative; border:2px dashed var(--line); border-radius:12px; background:#fff; }
.signpad canvas { display:block; width:100%; height:120px; touch-action:none; }
.signpad .signhint { position:absolute; left:12px; bottom:8px; font-size:12px; color:#8a94a6; pointer-events:none; }
.signpad[data-signed="1"] .signhint { display:none; }
.signpad [data-signclear] { position:absolute; right:6px; top:6px; }
.item .r { text-align:right; font-size:13px; color:var(--muted); flex:none; }
.item .acts { display:flex; gap:6px; flex:none; }
.icon-btn { width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; font-size:19px; text-decoration:none; color:var(--ink); }
.pill { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; padding:2px 9px; border-radius:99px; background:var(--card2); color:var(--ink); border:1px solid var(--line); white-space:nowrap; }
.pill.ok { background:var(--ok-soft); color:var(--ok); border-color:transparent; } .pill.warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.pill.orange { background:var(--orange-soft); color:var(--orange); border-color:transparent; } .pill.bad { background:var(--bad-soft); color:var(--bad); border-color:transparent; }
.pill.blue { background:var(--brand-soft); color:var(--brand); border-color:transparent; } .pill.grey { color:var(--muted); }
.dot { width:12px; height:12px; border-radius:50%; flex:none; background:var(--grey); }
.dot.g { background:var(--ok); } .dot.y { background:var(--warn); } .dot.o { background:var(--orange); } .dot.r { background:var(--bad); } .dot.k { background:#2b2f36; } .dot.b { background:var(--info); }
.dot.live { animation: pulse 2s infinite; }
.status { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; }
.kv { display:grid; grid-template-columns: 42% 58%; gap:7px 10px; font-size:15px; }
.kv .k { color:var(--muted); } .kv .v { word-break:break-word; }
.links { display:grid; grid-template-columns:repeat(auto-fit, minmax(90px,1fr)); gap:8px; margin-top:12px; }
.links a, .links button { text-align:center; text-decoration:none; padding:12px 6px; border-radius:12px; border:1px solid var(--line); color:var(--ink); background:var(--card); font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; }
.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:8px 6px; border-bottom:1px solid var(--line); }
.tbl td { padding:9px 6px; border-bottom:1px solid var(--line2); vertical-align:top; }
.tbl td.nw, .tbl .nw { white-space:nowrap; }
.tbl td.n, .tbl th.n { text-align:right; font-family:var(--mono); }
.scroll-x { overflow-x:auto; }
.diag { font-size:12px; color:var(--muted); white-space:pre-wrap; line-height:1.55; font-family:var(--mono); }
.banner { display:none; background:var(--bad-soft); color:var(--bad); border:1px solid color-mix(in srgb, var(--bad) 35%, transparent); border-radius:12px; padding:12px; font-weight:700; margin:12px 0; }
.back { background:none; border:0; color:var(--brand); font-size:16px; padding:14px 0 0; font-family:inherit; cursor:pointer; }
.toast { position:fixed; left:16px; right:16px; bottom:calc(92px + env(safe-area-inset-bottom)); background:#15202b; color:#fff; padding:14px 16px; border-radius:14px; font-size:15px; z-index:60; display:none; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:560px; margin:0 auto; }
.toast.show { display:block; animation: toastIn .25s ease both; }
.thumbs { display:flex; flex-wrap:nowrap; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:var(--muted) transparent; } /* v0.19.0 (1) Jun 10/4 "가로 스크롤바": every photo in one strip that scrolls sideways */
.thumbs::-webkit-scrollbar { height:8px; } .thumbs::-webkit-scrollbar-thumb { background:var(--muted); border-radius:4px; } .thumbs::-webkit-scrollbar-track { background:var(--card2); border-radius:4px; }
.thumbs figure { position:relative; margin:0; flex:0 0 118px; width:118px; }
.thumbs .prole { display:block; width:100%; margin-top:4px; font-size:11px; padding:4px 6px; }
.thumbs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:var(--card2); display:block; cursor:zoom-in; }
.thumbs figcaption { font-size:11px; color:var(--muted); margin-top:2px; }
.thumbs .rm { position:absolute; top:4px; right:4px; width:30px; height:30px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:15px; }
#viewer { position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:80; cursor:zoom-out; }
#viewer img { max-width:100%; max-height:100%; }
.bar { height:8px; border-radius:99px; background:var(--line2); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:99px; background:var(--brand); transform-origin:left; animation: grow .8s cubic-bezier(.2,.8,.2,1) both; }
.progress-steps { display:flex; gap:4px; } .progress-steps i { flex:1; height:6px; border-radius:99px; background:var(--line2); } .progress-steps i.on { background:var(--ok); }
.timeline { position:relative; padding-left:18px; } .timeline::before { content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--line); }
.timeline .ev { position:relative; padding:6px 0 10px; } .timeline .ev::before { content:""; position:absolute; left:-17px; top:11px; width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--card); }
.empty { text-align:center; color:var(--muted); padding:22px 8px; font-size:14px; }
.seg { display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; } .seg::-webkit-scrollbar { display:none; }
.seg button { flex:none; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:99px; padding:8px 14px; font-size:14px; font-family:inherit; }
.seg button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:700; }

/* bottom nav (phone) */
nav.tabs { position:fixed; left:0; right:0; bottom:0; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line); display:flex; padding-bottom:env(safe-area-inset-bottom); z-index:40; }
nav.tabs button { flex:1; border:0; background:none; font-size:12px; color:var(--muted); padding:8px 0 10px; min-height:62px; font-family:inherit; position:relative; }
nav.tabs button .i { display:block; font-size:22px; margin-bottom:2px; transition: transform .2s; }
nav.tabs button.on { color:var(--brand); font-weight:700; } nav.tabs button.on .i { transform: translateY(-2px) scale(1.08); }
nav.tabs .badge { position:absolute; top:6px; left:calc(50% + 6px); background:var(--bad); color:#fff; font-size:10px; font-weight:800; border-radius:99px; padding:1px 5px; min-width:16px; }

/* view transition */
.view-enter { animation: viewIn .22s ease backwards; }
.stagger > * { animation: fadeUp .38s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms); }

@keyframes fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
@keyframes viewIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
@keyframes toastIn { from { opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity:.35; } }
.dot.g.live { color:var(--ok); } .dot.y.live { color:var(--warn); } .dot.r.live { color:var(--bad); }
.skeleton { background: linear-gradient(90deg, var(--line2) 0, var(--card2) 120px, var(--line2) 240px); background-size: 800px 100%; animation: shimmer 1.2s linear infinite; border-radius:10px; min-height:18px; }

/* ================= Command centre (wide screens) ================= */
body.desk { padding:0; }
body.desk main { max-width:none; padding:0; }
body.desk nav.tabs { display:none; }
.shell { display:grid; grid-template-columns: 232px 1fr; min-height:100vh; }
.side { position:sticky; top:0; height:100vh; border-right:1px solid var(--line); background: linear-gradient(180deg, var(--card) 0%, var(--bg) 100%); padding:18px 12px; display:flex; flex-direction:column; gap:4px; }
.side .brand { display:flex; align-items:center; gap:10px; padding:4px 10px 18px; }
.side .brand .logo { width:34px; height:34px; border-radius:10px; background: radial-gradient(circle at 30% 30%, #7fe3ff, #1f6fb2 60%, #0b2a44); box-shadow: 0 0 22px rgba(52,193,255,.35); }
.side .brand b { font-size:15px; letter-spacing:.14em; } .side .brand small { display:block; font-size:10px; color:var(--muted); letter-spacing:.2em; }
.side button { display:flex; align-items:center; gap:10px; border:0; background:none; color:var(--muted); font-family:inherit; font-size:14px; padding:10px 12px; border-radius:10px; cursor:pointer; text-align:left; transition: background .15s, color .15s; }
.side button:hover { background:var(--card2); color:var(--ink); }
.side button.on { background: var(--brand-soft); color:var(--ink); box-shadow: inset 2px 0 0 var(--brand); }
.side button .i { width:22px; text-align:center; font-size:16px; }
.side button .badge { margin-left:auto; background:var(--bad); color:#fff; font-size:11px; border-radius:99px; padding:1px 7px; font-weight:800; }
.side .grow { flex:1; }
.side .foot { font-size:11px; color:var(--muted); padding:10px 12px; line-height:1.6; font-family:var(--mono); }
.deskmain { min-width:0; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px; padding:14px 24px; border-bottom:1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar .ttl { font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.topbar .ttl b { color:var(--ink); }
.topbar .sp { flex:1; }
.topbar .clock { font-family:var(--mono); font-size:13px; color:var(--muted); } .topbar .clock b { color:var(--ink); font-size:15px; }
.topbar .sync { display:flex; align-items:center; gap:8px; font-size:13px; }
.topbar .search { width:280px; min-height:38px; font-size:14px; padding:8px 12px; border-radius:10px; background:var(--card); }
.deskpage { padding:20px 24px 40px; }
.deskpage.narrow { max-width:820px; }
.cc { display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; }
.panel { position:relative; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--brand) 4%), var(--card)); border:1px solid var(--line); border-radius:16px; padding:16px; min-width:0; overflow:hidden; box-shadow:var(--shadow);
  animation: fadeUp .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i,0) * 45ms); }
.panel::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 55%, transparent), transparent); opacity:.6; }
.panel .ph { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.panel .ph .t { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.panel .ph .t b { color:var(--ink); font-weight:800; }
.panel .ph .sp { flex:1; }
.panel .ph .a { font-size:12px; color:var(--brand); background:none; border:0; cursor:pointer; font-family:inherit; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s9 { grid-column: span 9; } .s10 { grid-column: span 10; } .s11 { grid-column: span 11; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.r2 { grid-row: span 2; }
.kpi .v { font-family:var(--mono); font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.kpi .v small { font-size:14px; color:var(--muted); font-weight:600; margin-left:4px; }
.kpi .sub { font-size:12px; color:var(--muted); margin-top:6px; display:flex; gap:10px; flex-wrap:wrap; }
.kpi .delta.up { color:var(--ok); } .kpi .delta.down { color:var(--bad); }
.kpi .spark { margin-top:10px; height:34px; }
.gauges { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.gauge { text-align:center; }
.gauge svg { width:100%; max-width:170px; height:auto; display:block; margin:0 auto; overflow:visible; }
.gauge .lbl { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:4px; }
.gauge .meta { font-size:11px; color:var(--muted); margin-top:3px; font-family:var(--mono); }
.arc-bg { stroke: var(--line); } .arc-fg { transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 60%, transparent)); }
.funnel .st { display:grid; grid-template-columns: 118px 1fr 64px; align-items:center; gap:10px; padding:6px 0; font-size:13px; }
.funnel .st .b { height:22px; border-radius:6px; background: var(--line2); overflow:hidden; position:relative; }
.funnel .st .b i { position:absolute; inset:0 auto 0 0; border-radius:6px; transform-origin:left; animation: grow .9s cubic-bezier(.2,.8,.2,1) both; }
.funnel .st .n { font-family:var(--mono); text-align:right; font-weight:700; }
.chart svg { width:100%; height:auto; display:block; overflow:visible; }
.chart .ax { fill:var(--muted); font-size:10px; font-family:var(--mono); }
.chart .grid { stroke: var(--line2); stroke-width:1; }
.chart .barr { transform-box: fill-box; transform-origin: bottom; animation: growY .9s cubic-bezier(.2,.8,.2,1) both; }
.chart .line { fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 1200; stroke-dashoffset:1200; animation: draw 1.6s cubic-bezier(.2,.8,.2,1) .2s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.feed .ev { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line2); font-size:13px; animation: fadeUp .4s ease both; }
.feed .ev:last-child { border-bottom:0; }
.feed .ev .when { margin-left:auto; color:var(--muted); font-family:var(--mono); font-size:11px; flex:none; }
.mapbox { height:420px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#dde3e8; }
.mapbox.tall { height: calc(100vh - 180px); min-height:480px; }
/* v0.20.8 (1) Jun 10/5 "관제실 테마 검정이어도 지도는 항상 밝은거로": no dark filter on the tiles any more */
.leaflet-container { background:#dde3e8 !important; font-family:var(--sans) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--card) !important; color:var(--ink) !important; border:1px solid var(--line); }
.legend { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:10px; } .legend span { display:inline-flex; align-items:center; gap:6px; }
.bigstat { display:flex; align-items:baseline; gap:8px; } .bigstat .v { font-family:var(--mono); font-size:22px; font-weight:800; }
.mini-list .item { padding:9px 0; } .mini-list .item .t { font-size:14px; } .mini-list .item .s { font-size:12px; }
.drawer-bg { position:fixed; inset:0; background:rgba(3,8,14,.55); z-index:70; animation: fadeIn .2s ease both; }
.drawer { position:fixed; top:4vh; left:50%; transform:translateX(-50%); height:92vh; width:min(820px, 94vw); background:var(--bg); border:1px solid var(--line); border-radius:18px; z-index:71; overflow:auto; padding:6px 26px 40px; animation: popIn .22s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 30px 90px rgba(0,0,0,.55); } /* v0.15: centred (was a right-hand drawer) */
.drawer.wide { width:min(1120px, 96vw); } .drawer.full { width:98vw; height:97vh; top:1.5vh; border-radius:12px; }
.drawer .fx { position:sticky; top:0; float:right; margin:10px 8px 0 0; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:16px; cursor:pointer; z-index:2; }
@keyframes popIn { from { transform: translateX(-50%) translateY(14px) scale(.985); opacity:0; } to { transform: translateX(-50%); opacity:1; } }
@keyframes slideIn { from { transform: translateX(40px); opacity:0; } to { transform:none; opacity:1; } } /* (phones: route sheet) */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.drawer .x { position:sticky; top:0; float:right; margin-top:10px; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:18px; cursor:pointer; z-index:2; }
.demo-flag { position:fixed; right:10px; top:calc(env(safe-area-inset-top) + 6px); z-index:90; background:var(--warn); color:#1a1300; font-size:11px; font-weight:800; letter-spacing:.14em; padding:4px 12px; border-radius:99px; box-shadow:0 6px 18px rgba(0,0,0,.25); pointer-events:none; }
.grid-bg { position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.5;
  background-image: linear-gradient(var(--line2) 1px, transparent 1px), linear-gradient(90deg, var(--line2) 1px, transparent 1px); background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%); }
.heat { display:grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap:8px; }
.heat .cell { border-radius:10px; padding:10px; border:1px solid var(--line); background:var(--card2); cursor:pointer; transition: transform .12s, border-color .15s; }
.heat .cell:hover { transform: translateY(-2px); border-color:var(--brand); }
.heat .cell .n { font-family:var(--mono); font-size:20px; font-weight:800; } .heat .cell .l { font-size:12px; color:var(--muted); }
.signal { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card2); margin-top:8px; font-size:13px; }
.signal.on { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); } .signal.off { opacity:.85; }
.tick { width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:12px; font-weight:900; flex:none; }
.tick.y { background:var(--ok); color:#04150d; } .tick.n { background:var(--line); color:var(--muted); }
@media (max-width: 1480px) { .s3 { grid-column: span 6; } .s4 { grid-column: span 6; } .s5, .s7 { grid-column: span 12; } .s8 { grid-column: span 12; } }
body.desk .demo-flag { top:auto; bottom:14px; right:14px; }
/* v0.10.1 demo / practice: the flag is the 👤 button (who you practise as) */
button.demo-flag { pointer-events:auto; cursor:pointer; border:0; font-family:inherit; letter-spacing:.06em; }
body:not(.desk) button.demo-flag { right:auto; left:50%; transform:translateX(-50%); white-space:nowrap; } /* phone: top middle — clear of the language buttons */
body:not(.desk) button.demo-flag:active { transform:translateX(-50%) scale(.97); }
button.demo-flag:active { transform:scale(.97); }
.who-list { display:grid; gap:10px; margin-top:12px; }
.who-btn { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--card2); color:var(--ink); font:inherit; cursor:pointer; }
.who-btn b { font-size:17px; } .who-btn span { font-size:13px; color:var(--muted); line-height:1.35; }
.who-btn.on { border-color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, var(--card2)); }
.who-btn.on b::after { content:' ✓'; color:var(--brand); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .chart .line { stroke-dashoffset:0; } }

/* ================= v0.3 — phone refresh (colour, depth) ================= */
:root:not([data-theme="dark"]) { --bg:#eef3f9; }
:root { --grad-a:#0f5ea8; --grad-b:#11a3b8; --grad-c:#6d5cff; --c-money:#16a34a; --c-field:#1f6fb2; --c-call:#7c4dff; --c-req:#e2700c; --c-lead:#d6336c; --c-bill:#0891b2; }
[data-theme="dark"] { --grad-a:#0b3d73; --grad-b:#0a6b7a; --grad-c:#4b3fb3; }
body:not(.desk) { background: radial-gradient(120% 60% at 100% -10%, color-mix(in srgb, var(--grad-b) 18%, transparent), transparent 60%), radial-gradient(90% 50% at -10% 0%, color-mix(in srgb, var(--grad-c) 12%, transparent), transparent 55%), var(--bg); background-attachment: fixed; }
.hero { position:relative; margin:14px 0 4px; padding:18px 18px 16px; border-radius:22px; color:#fff; overflow:hidden;
  background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 60%, color-mix(in srgb, var(--grad-b) 60%, #2ee59d) 100%); box-shadow: 0 14px 34px color-mix(in srgb, var(--grad-a) 35%, transparent); }
.hero::before { content:""; position:absolute; width:260px; height:260px; right:-80px; top:-110px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); animation: floaty 9s ease-in-out infinite; }
.hero::after { content:""; position:absolute; width:180px; height:180px; left:-60px; bottom:-90px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); animation: floaty 12s ease-in-out infinite reverse; }
.hero > * { position:relative; z-index:1; }
.hero .top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.hero .hello { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.hero .date { font-size:13px; opacity:.85; margin-top:2px; }
.hero .wx { font-size:12.5px; opacity:.85; margin-top:4px; letter-spacing:.01em; } /* v0.22.6 weather line */
.hero .syncpill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); padding:6px 10px; border-radius:14px; backdrop-filter: blur(6px); white-space:normal; line-height:1.25; max-width:150px; text-align:left; } /* v0.9.1: wraps on a phone instead of cutting the text */
.hero .stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:16px; }
.hero .stats button { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:10px 8px; color:#fff; text-align:left; font-family:inherit; cursor:pointer; }
.hero .stats b { display:block; font-family:var(--mono); font-size:28px; line-height:1.1; }
.hero .stats span { font-size:12px; opacity:.9; }
.hero .cta { margin-top:12px; width:100%; min-height:52px; border:0; border-radius:14px; background:#fff; color:var(--grad-a); font-weight:800; font-size:16px; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor:pointer; }
.tile { position:relative; overflow:hidden; border-color:transparent; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(16,24,40,.06); }
.tile .ic { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:21px; background: var(--tone-soft, var(--brand-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--brand)) 18%, transparent); }
.tile::after { content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; background: radial-gradient(circle, color-mix(in srgb, var(--tone, var(--brand)) 16%, transparent), transparent 70%); }
.tile .n { color: var(--tone, var(--ink)); }
.tile.bad .n { color: var(--bad); }
.tone-money { --tone:var(--c-money); --tone-soft: color-mix(in srgb, var(--c-money) 14%, var(--card)); }
.tone-field { --tone:var(--c-field); --tone-soft: color-mix(in srgb, var(--c-field) 14%, var(--card)); }
.tone-call { --tone:var(--c-call); --tone-soft: color-mix(in srgb, var(--c-call) 14%, var(--card)); }
.tone-req { --tone:var(--c-req); --tone-soft: color-mix(in srgb, var(--c-req) 14%, var(--card)); }
.tone-lead { --tone:var(--c-lead); --tone-soft: color-mix(in srgb, var(--c-lead) 14%, var(--card)); }
.tone-bill { --tone:var(--c-bill); --tone-soft: color-mix(in srgb, var(--c-bill) 14%, var(--card)); }
body:not(.desk) .card { border-color: transparent; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px rgba(16,24,40,.06); }
body:not(.desk) h2 { font-size:16px; }
body:not(.desk) h2 .pill { margin-left:2px; }
nav.tabs { left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); border:1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius:22px; padding-bottom:0; box-shadow: 0 12px 30px rgba(16,24,40,.16); }
nav.tabs button { min-height:58px; border-radius:18px; margin:4px 2px; }
nav.tabs button.on { background: var(--brand-soft); }
body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.lang-seg { display:inline-flex; gap:2px; background:var(--card2); border:1px solid var(--line); border-radius:99px; padding:2px; }
.lang-seg button { border:0; background:none; font-family:inherit; font-size:12px; font-weight:700; padding:6px 10px; border-radius:99px; color:var(--muted); cursor:pointer; }
.lang-seg button.on { background:var(--brand); color:var(--brand-ink); }
.hero .lang-seg { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.24); }
.hero .lang-seg button { color:rgba(255,255,255,.85); } .hero .lang-seg button.on { background:#fff; color:var(--grad-a); }
@keyframes floaty { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-18px, 14px) scale(1.08); } }

/* ================= route map (phone) — numbered stops ================= */
body.routing main { max-width:none; padding:0; }
body.routing #banner { position:fixed; top:0; left:0; right:0; z-index:50; margin:0; border-radius:0; }
.route { position:fixed; inset:0; z-index:5; }
.route .rmap { position:absolute; inset:0; background:#e8eef4; }
[data-theme="dark"] .route .rmap { background:#0a1119; }
.route .rtop { position:absolute; left:10px; right:10px; top:calc(env(safe-area-inset-top) + 10px); z-index:500; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.route .rtop > * { pointer-events:auto; }
.route .rsum { display:flex; gap:6px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius:18px; padding:8px 10px; box-shadow: 0 10px 26px rgba(16,24,40,.18); align-items:center; overflow-x:auto; scrollbar-width:none; }
.route .rsum::-webkit-scrollbar { display:none; }
.route .rsum .k { flex:none; display:flex; align-items:baseline; gap:4px; padding:4px 8px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid transparent; }
.route .rsum .k b { font-family:var(--mono); font-size:22px; }
.route .rsum .k.on { border-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.route .rbot { position:absolute; left:10px; right:10px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:500; display:flex; gap:8px; }
.route .rbot button { flex:1; min-height:54px; border:0; border-radius:16px; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color:var(--ink); font-weight:800; font-size:15px; font-family:inherit; box-shadow: 0 10px 26px rgba(16,24,40,.18); display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.route .rbot button.primary { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color:#fff; flex:1.4; }
.route .rbot button.round { flex:none; width:54px; } .route .rbot button.round.sm { width:46px; font-size:17px; } /* v0.19.1: the two icon buttons stay narrow so "✋ Order" keeps its word */
.stop-pin { position:relative; }
.stop-pin .b { width:34px; height:34px; border-radius:50% 50% 50% 4px; transform: rotate(-45deg); display:grid; place-items:center; box-shadow: 0 6px 14px rgba(0,0,0,.28); border:2px solid #fff; }
.stop-pin .b span { transform: rotate(45deg); color:#fff; font-weight:900; font-size:14px; font-family:var(--mono); }
.rmap:not(.labels) .stop-pin .lab { display:none; }
.stop-pin .lab { position:absolute; left:50%; top:38px; transform: translateX(-50%); white-space:nowrap; font-size:11px; font-weight:700; color:#15202b; background: rgba(255,255,255,.92); padding:2px 6px; border-radius:6px; box-shadow: 0 2px 6px rgba(0,0,0,.15); max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.stop-pin.visit .b { background: var(--c-field); } .stop-pin.collect .b { background: var(--bad); } .stop-pin.repair .b { background: var(--c-req); } .stop-pin.done .b { background: var(--ok); }
.stop-pin.pulse .b::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:3px solid currentColor; opacity:.6; animation: ring 1.8s ease-out infinite; color: var(--bad); }
.me-pin { width:18px; height:18px; border-radius:50%; background:#2563eb; border:3px solid #fff; box-shadow: 0 0 0 6px rgba(37,99,235,.25); }
@keyframes ring { from { transform: scale(.7); opacity:.7; } to { transform: scale(1.6); opacity:0; } }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:600; background:var(--card); border-radius:22px 22px 0 0; padding:10px 16px calc(96px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: sheetIn .28s cubic-bezier(.2,.8,.2,1) both; max-height:70vh; overflow:auto; }
.sheet .grab { width:44px; height:5px; border-radius:99px; background:var(--line); margin:0 auto 10px; }
.sheet .acts2 { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-top:12px; }
.sheet .acts2 a, .sheet .acts2 button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:14px; border:1px solid var(--line); background:var(--card2); color:var(--ink); text-decoration:none; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; }
.sheet .acts2 .i { font-size:20px; }
@keyframes sheetIn { from { transform: translateY(100%); } to { transform:none; } }
.why { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }

/* ================= command centre — motion pack ================= */
.aurora { position:fixed; inset:-20vh -20vw; z-index:-2; pointer-events:none; filter: blur(60px) saturate(1.3); opacity:.9; }
.aurora i { position:absolute; width:45vw; height:45vw; border-radius:50%; mix-blend-mode: screen; animation: drift 28s ease-in-out infinite; }
.aurora i:nth-child(1) { left:5%; top:0%; background: radial-gradient(circle, rgba(52,193,255,.35), transparent 60%); }
.aurora i:nth-child(2) { right:0%; top:10%; background: radial-gradient(circle, rgba(124,77,255,.28), transparent 60%); animation-duration: 34s; animation-direction: reverse; }
.aurora i:nth-child(3) { left:30%; bottom:-5%; background: radial-gradient(circle, rgba(46,229,157,.22), transparent 60%); animation-duration: 40s; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(8vw, 6vh) scale(1.15); } 66% { transform: translate(-6vw, 4vh) scale(.92); } }
body.desk .panel { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 82%, transparent), color-mix(in srgb, var(--card) 70%, transparent)); transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  animation: panelIn .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i,0) * 55ms); }
body.desk .panel::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(52,193,255,.12), transparent 60%); }
body.desk .panel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(52,193,255,.08); }
body.desk .panel:hover::after { opacity:1; }
@keyframes panelIn { from { opacity:0; transform: translateY(18px) scale(.985); filter: blur(6px); } to { opacity:1; transform:none; filter:none; } }
.kpi .v.bump { animation: bump .9s ease; }
@keyframes bump { 0% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 22px color-mix(in srgb, var(--brand) 80%, transparent); transform: scale(1.04); } 100% { text-shadow:none; transform:none; } }
.ticker { position:relative; overflow:hidden; border-bottom:1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); height:30px; }
.ticker .tr { position:absolute; white-space:nowrap; display:flex; gap:38px; align-items:center; height:30px; font-size:12px; color:var(--muted); animation: tick 60s linear infinite; padding-left:100%; }
.ticker .tr b { color:var(--ink); } .ticker:hover .tr { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-100%); } }
.side button.on { position:relative; overflow:hidden; }
.side button.on::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(52,193,255,.14), transparent); animation: sheen 2.8s ease-in-out infinite; }
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ring-hero { position:relative; width:84px; height:84px; flex:none; }
.ring-hero svg { width:84px; height:84px; transform: rotate(-90deg); }
.ring-hero .fg { transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 8px rgba(46,229,157,.6)); }
.ring-hero span { position:absolute; inset:0; display:grid; place-items:center; font:800 15px var(--mono); }
.story-btn { border:1px solid color-mix(in srgb, var(--brand) 50%, var(--line)); background: linear-gradient(135deg, rgba(52,193,255,.18), rgba(124,77,255,.18)); color:var(--ink); border-radius:99px; padding:7px 14px; font-weight:800; font-size:13px; font-family:inherit; cursor:pointer; box-shadow: 0 0 20px rgba(52,193,255,.15); }
.story-btn:hover { box-shadow: 0 0 28px rgba(52,193,255,.35); }
.story { position:fixed; inset:0; z-index:95; background:#03060b; display:flex; align-items:center; justify-content:center; animation: fadeIn .3s ease both; }
.story .bars { position:absolute; top:18px; left:24px; right:24px; display:flex; gap:6px; z-index:3; }
.story .bars i { flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; }
.story .bars i b { display:block; height:100%; width:0; background:#fff; }
.story .bars i.done b { width:100%; } .story .bars i.cur b { animation: storyfill var(--dur, 5s) linear forwards; }
@keyframes storyfill { to { width:100%; } }
.story .slide { position:relative; width:min(1100px, 92vw); height:min(640px, 80vh); display:flex; flex-direction:column; justify-content:center; color:#eaf3fb; }
.story .slide .eyebrow { font:800 13px var(--mono); letter-spacing:.3em; text-transform:uppercase; color:#34c1ff; animation: fadeUp .6s .1s both; }
.story .slide .huge { font:900 clamp(64px, 12vw, 168px) var(--mono); letter-spacing:-.04em; line-height:1; margin:14px 0; background: linear-gradient(135deg, #fff, #7fe3ff 50%, #2ee59d); -webkit-background-clip:text; background-clip:text; color:transparent; animation: zoomIn .9s cubic-bezier(.2,.8,.2,1) .15s both; }
.story .slide .sub { font-size:22px; color:#9fb4c8; animation: fadeUp .6s .5s both; max-width:760px; }
.story .slide .row3 { display:flex; gap:18px; margin-top:26px; animation: fadeUp .6s .7s both; flex-wrap:wrap; }
.story .slide .row3 div { padding:14px 18px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); min-width:170px; }
.story .slide .row3 b { display:block; font:800 30px var(--mono); color:#fff; } .story .slide .row3 span { font-size:13px; color:#9fb4c8; }
.story .close { position:absolute; top:34px; right:24px; z-index:4; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; }
.story .nav { position:absolute; top:0; bottom:0; width:30%; z-index:2; cursor:pointer; } .story .nav.l { left:0; } .story .nav.r { right:0; }
.story .glow { position:absolute; width:60vw; height:60vw; border-radius:50%; background: radial-gradient(circle, rgba(52,193,255,.18), transparent 60%); animation: drift 18s ease-in-out infinite; pointer-events:none; }
@keyframes zoomIn { from { opacity:0; transform: scale(.85); filter: blur(10px); } to { opacity:1; transform:none; filter:none; } }
.story .mini-bars { display:flex; align-items:flex-end; gap:10px; height:220px; margin-top:26px; }
.story .mini-bars i { flex:1; border-radius:8px 8px 3px 3px; background: linear-gradient(180deg, #34c1ff, #1f6fb2); transform-origin: bottom; animation: growY 1s cubic-bezier(.2,.8,.2,1) both; }

.pulse-dot { width:16px; height:16px; border-radius:50%; background:#ff5c5c; border:2px solid #ffd2d2; position:relative; box-shadow:0 0 12px rgba(255,92,92,.8); }
.pulse-dot::after { content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid #ff5c5c; animation: ring 1.6s ease-out infinite; }
.page-in { animation: pageIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageIn { from { opacity:0; filter: blur(8px); transform: translateY(10px); } to { opacity:1; filter:none; transform:none; } }

.bell { position:relative; width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:17px; cursor:pointer; }
.bell .badge { position:absolute; top:-6px; right:-6px; background:var(--bad); color:#fff; font:800 10px var(--mono); padding:2px 5px; border-radius:99px; animation: pulse 2s infinite; color:#fff; }
.bellbox { position:absolute; right:0; top:46px; width:380px; z-index:60; max-height:60vh; overflow:auto; padding:4px 14px; animation: fadeUp .25s ease both; }
.ctip { position:fixed; z-index:99; pointer-events:none; background:rgba(8,14,22,.92); color:#e8f4ff; border:1px solid rgba(52,193,255,.35); padding:6px 10px; border-radius:8px; font:600 12px var(--mono); opacity:0; transition: opacity .12s; box-shadow: 0 8px 24px rgba(0,0,0,.4); white-space:nowrap; max-width:calc(100vw - 16px); overflow:hidden; text-overflow:ellipsis; } /* v0.17.3 (2): one line, kept on the screen by desk.js */
.chart rect.barr { transition: filter .15s, opacity .15s; } .chart rect.barr:hover { filter: brightness(1.35) drop-shadow(0 0 8px rgba(52,193,255,.6)); }
body.desk .kpi { isolation:isolate; }
body.desk .kpi::before { content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(52,193,255,.7), rgba(124,77,255,.6), transparent 95%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinAng 6s linear infinite; opacity:.9; height:auto; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinAng { to { --ang: 360deg; } }
.side .brand .logo { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { box-shadow: 0 0 18px rgba(52,193,255,.3); } 50% { box-shadow: 0 0 34px rgba(52,193,255,.7); } }

/* ================= v0.4 — calm refresh · drawer steps · maps · CA pack · history · ⌘K ================= */
/* data refresh = no replay of entrance animations (the page does not "reload") */
.calm .panel, .calm .chart .barr, .calm .funnel .st .b i, .calm .bar > i, .calm .feed .ev, .calm .stagger > *, .calm .heat .cell { animation:none !important; }
.calm .chart .line, .calm .sparkline { animation:none !important; stroke-dashoffset:0 !important; }
.sparkline { stroke-dasharray:600; stroke-dashoffset:600; animation: draw 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
.delta { font-family:var(--mono); font-weight:700; font-size:11px; } .delta.up { color:var(--ok); } .delta.down { color:var(--bad); } .delta.flat { color:var(--muted); }
.funnel.hb .st { grid-template-columns: 104px 1fr 92px; } .funnel .st .n small { display:block; font-size:10px; color:var(--muted); font-weight:600; }
.chart .barr.hi { filter: drop-shadow(0 0 8px rgba(255,204,77,.6)); } .chart .ax.hi { fill:var(--warn); font-weight:800; }
.tbl tr.sel td { background: color-mix(in srgb, var(--brand) 12%, transparent); }
/* drawer: steps inside it */
.drawer .crumbs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin:16px 50px 0 0; }
.drawer .crumbs span { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .drawer .crumbs i { font-style:normal; opacity:.6; }
.dpage.fwd { animation: dFwd .22s cubic-bezier(.2,.8,.2,1) both; } .dpage.back { animation: dBack .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dFwd { from { transform: translateX(26px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes dBack { from { transform: translateX(-26px); opacity:0; } to { transform:none; opacity:1; } }
/* language switch everywhere */
/* not a float: a float next to a grid squeezes the whole grid to the left (the New screen bug) */
.lang-float { display:flex; align-items:center; gap:6px; width:max-content; margin:8px 0 -40px auto; position:relative; z-index:3; font-size:13px; }
.lang-top { display:flex; align-items:center; gap:6px; font-size:14px; }
.lang-top .lang-seg button { font-size:13px; padding:7px 12px; }
.side-lang { padding:10px 12px; margin:6px 0; border:1px solid var(--line); border-radius:12px; background:var(--card2); }
.side-lang .lbl { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.side-lang .lang-seg { display:flex; } .side-lang .lang-seg button { flex:1; font-size:14px; padding:8px 0; }
.kbtn { border:1px solid var(--line); background:var(--card2); color:var(--muted); font:700 12px var(--mono); padding:7px 10px; border-radius:10px; cursor:pointer; }
.kbtn:hover { color:var(--ink); border-color:var(--brand); }
/* customer page: "do now" card + where */
.det-h { display:flex; align-items:center; gap:10px; margin-top:10px; }
.card.now { border-width:2px; padding:12px 14px; }
.card.now.lv-bad { border-color:var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 16%, transparent); }
.card.now.lv-warn { border-color:var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 16%, transparent); }
.card.now.lv-info { border-color:var(--brand); } .card.now.lv-ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.now-h { display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; } .now-h .sp { flex:1; } .now-h .muted { font-weight:500; font-size:12px; }
.now-i { display:flex; align-items:center; gap:10px; padding:10px 0 0; margin-top:10px; border-top:1px solid var(--line2); }
.now-i .ic { font-size:20px; width:28px; text-align:center; flex:none; } .now-i .main { flex:1; min-width:0; }
.now-i .t { font-weight:700; } .now-i .s { font-size:12px; color:var(--muted); }
body:not(.desk) .now-i { flex-wrap:wrap; } body:not(.desk) .now-i .acts { flex:1 1 100%; max-width:calc(100% - 38px); min-width:0; display:flex; gap:8px; margin:8px 0 0 38px; } /* v0.19.1: 100% + the 38px indent ran off the card (the "Visit" button was cut) */ body:not(.desk) .now-i .acts > * { flex:1; min-height:44px; white-space:nowrap; font-size:13px; } /* v0.11.2 (#8): buttons under the text instead of squeezing it */
.now-i.lv-bad .t { color:var(--bad); } .now-i.lv-warn .t { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.now-i .acts { display:flex; gap:6px; flex:none; } .now-i .btn.small { margin:0; min-height:36px; padding:0 12px; text-decoration:none; display:inline-flex; align-items:center; }
.minimap { height:230px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0a1119; }
body.desk .minimap { height:260px; }
.mini-foot { display:flex; align-items:center; gap:10px; justify-content:space-between; margin:8px 0 10px; flex-wrap:wrap; }
.mini-foot .btn.small { margin:0; text-decoration:none; display:inline-flex; align-items:center; min-height:38px; }
.loc-btn { width:34px; height:34px; border-radius:8px; border:2px solid rgba(0,0,0,.2); background:#fff; font-size:16px; cursor:pointer; display:grid; place-items:center; box-shadow:0 1px 5px rgba(0,0,0,.25); margin-top:2px; }
.loc-btn.busy { animation: pulse 1s infinite; }
.house-pin { width:36px; height:36px; border-radius:50% 50% 50% 4px; transform: rotate(-45deg); background: linear-gradient(135deg, #ff6b5a, #d4382b); border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.35); display:grid; place-items:center; }
.house-pin span { transform: rotate(45deg); font-size:16px; }
.house-lab { position:absolute; top:40px; left:50%; transform:translateX(-50%); white-space:nowrap; background:rgba(8,14,22,.85); color:#fff; font:700 11px var(--sans); padding:2px 8px; border-radius:99px; }
.me-pin { width:18px; height:18px; border-radius:50%; background:#2f8cff; border:3px solid #fff; box-shadow:0 0 0 6px rgba(47,140,255,.25); }
.nav-offer { position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:900; display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px 12px; box-shadow:0 12px 36px rgba(0,0,0,.35); width:min(460px, calc(100vw - 24px)); animation: fadeUp .25s ease both; }
.nav-offer .main { flex:1; display:flex; flex-direction:column; font-size:13px; } .nav-offer .main span { color:var(--muted); font-size:12px; }
.nav-offer .btn { margin:0; text-decoration:none; display:inline-flex; align-items:center; min-height:40px; }
.nav-offer .x { border:0; background:none; font-size:16px; color:var(--muted); cursor:pointer; }
body.desk .nav-offer { bottom:24px; }
/* CA pack */
.bs-chips { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.bs-chips button { border:1px solid var(--line); background:var(--card2); color:var(--ink); border-radius:99px; padding:7px 12px; font:600 13px var(--sans); cursor:pointer; }
.bs-chips button.on { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.sumgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin:10px 0; }
.sumgrid > div { border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--card); display:flex; flex-direction:column; gap:4px; }
.sumgrid span { font-size:11px; color:var(--muted); } .sumgrid b { font-family:var(--mono); font-size:17px; }
.row.wrap { flex-wrap:wrap; } .row.wrap .btn { flex:1 1 180px; }
.ird-head { margin-bottom:8px; font-size:13px; }
.tbl.ird th { font-size:11px; vertical-align:bottom; white-space:normal; min-width:70px; } .tbl.ird th small { display:block; color:var(--muted); font-weight:500; font-size:10px; }
.tbl.ird td { font-size:12px; } .tbl.ird tr.nobill td { background: color-mix(in srgb, var(--warn) 10%, transparent); } .tbl.ird tr.tot td { font-weight:800; border-top:2px solid var(--line); }
/* history */
.monthbar { display:flex; align-items:center; gap:10px; padding:12px 14px !important; }
.monthbar .nav { width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--card2); color:var(--ink); font-size:20px; cursor:pointer; flex:none; }
.monthbar .nav:disabled { opacity:.35; cursor:default; }
.monthbar .chips { display:flex; gap:6px; overflow-x:auto; flex:1; scrollbar-width:thin; padding-bottom:2px; }
.monthbar .chips button { flex:none; border:1px solid var(--line); background:var(--card2); color:var(--muted); border-radius:99px; padding:7px 12px; font:600 12px var(--mono); cursor:pointer; }
.monthbar .chips button.on { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.monthbar .sel { display:flex; flex-direction:column; align-items:flex-end; flex:none; min-width:170px; } .monthbar .sel b { font-size:18px; } .monthbar .sel span { font-size:11px; color:var(--muted); }
.tbl.heatmap td.hm { text-align:center; font:700 11px var(--mono); color:var(--ink); min-width:34px; }
/* ⌘K palette */
.palette { position:fixed; inset:0; z-index:120; background:rgba(3,8,14,.55); display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; animation: fadeIn .15s ease both; }
.palette .pbox { width:min(620px, 92vw); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); overflow:hidden; animation: fadeUp .2s ease both; }
.palette input { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:500 18px var(--sans); padding:18px 20px; outline:none; border-radius:0; min-height:auto; margin:0; }
.palette .pl { max-height:56vh; overflow:auto; padding:6px; }
.palette .pi { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; cursor:pointer; }
.palette .pi.on, .palette .pi:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.palette .pi .ic { width:28px; text-align:center; font-size:15px; } .palette .pi .t { font-weight:700; } .palette .pi .s { margin-left:auto; font-size:12px; color:var(--muted); }
.palette .ph2 { display:flex; gap:16px; padding:8px 16px; border-top:1px solid var(--line); font:600 11px var(--mono); color:var(--muted); }
/* v0.4 fixes after screenshots */
.side .side-lang .lang-seg button { flex:1; justify-content:center; padding:8px 0; font-size:14px; border-radius:99px; gap:0; }
.side .side-lang .lang-seg button.on { background:var(--brand); color:var(--brand-ink); box-shadow:none; }
.side .side-lang .lang-seg button.on::after { display:none; }
.monthbar .chips { flex-wrap:nowrap; }
.topbar { gap:12px; }
.topbar .ttl, .story-btn, .topbar .sync { white-space:nowrap; }
.topbar .search { width:240px; }
@media (max-width: 1780px) { .topbar [data-sync-text] { display:none; } .topbar .ttl { letter-spacing:.12em; } }
@media (max-width: 1500px) { .topbar .ttl { display:none; } .lang-top > .lang-seg button { padding:6px 9px; } }

/* v0.5 — route: auto / own order, closable sheets */
.route .rmode { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }
.route .rmode span { background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius:99px; padding:6px 12px; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.route .rmode span.on { color:var(--ok); } .route .rmode span.man { color:var(--orange); }
.route .rmode button { border:0; border-radius:99px; padding:6px 12px; font:700 12px var(--sans); background:var(--brand); color:var(--brand-ink); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.route .rmode button[data-act="rPick"] { background: color-mix(in srgb, var(--card) 92%, transparent); color:var(--ink); backdrop-filter: blur(12px); } .route .rmode button[data-act="rPick"].on { background:var(--orange); color:#fff; }
.sheet .sx { position:absolute; top:10px; right:12px; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--card2); color:var(--ink); font-size:18px; cursor:pointer; z-index:2; }
.sheet .grab { cursor:pointer; }
.sheet.list { max-height:80vh; display:flex; flex-direction:column; }
.sheet.list .rl { overflow:auto; flex:1; min-height:0; margin-top:4px; }
.sheet .rl-h { padding-right:48px; } .sheet .rl-mode { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; font-weight:700; }
.sheet .rl-mode .on { color:var(--ok); } .sheet .rl-mode .man { color:var(--orange); } .sheet .rl-mode .btn { margin:0; }
.rl-i .main { cursor:pointer; }
.rl-i .ord { display:flex; gap:4px; flex:none; }
.rl-i .ord button { width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--card2); color:var(--ink); font-size:14px; cursor:pointer; }
.rl-i .ord button:disabled { opacity:.3; cursor:default; }
/* v0.11 drag to reorder: ☰ handle · lifted row · drop line */
.rl-i .ord button.rdrag { touch-action:none; cursor:grab; font-size:18px; }
.rl-i.lifting { position:relative; z-index:5; background:var(--card); box-shadow:0 8px 24px rgba(16,24,40,.28); border-radius:12px; opacity:.96; }
.rl-i.lifting .ord button.rdrag { cursor:grabbing; }
.rl-i.drop-before { box-shadow: inset 0 3px 0 var(--brand); }
.rl.drop-end { box-shadow: inset 0 -3px 0 var(--brand); }
/* v0.5 — New screen grid fills the width · staff & permissions · PDF bills */
.tiles-new { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:6px; }
.pdf-tile { width:100%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:10px; background:var(--card2); border:1px solid var(--line); font-size:26px; cursor:pointer; }
.pdf-tile span { font:800 11px var(--mono); color:var(--muted); }
.card.staff { padding:14px 16px; }
.staff .st-h { display:flex; align-items:center; gap:12px; margin-bottom:6px; } .staff .st-h .main { flex:1; min-width:0; }
.staff .avatar { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font:800 17px var(--sans); color:#fff; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); flex:none; }
.staff .lbl { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:12px 0 6px; }
.tgl-row { display:flex; flex-wrap:wrap; gap:6px; }
.tgl { border:1px solid var(--line); background:var(--card2); color:var(--ink); border-radius:10px; padding:8px 12px; font:600 13px var(--sans); cursor:pointer; text-align:left; }
.tgl.small { padding:6px 10px; font-size:12px; } .tgl.on { background: color-mix(in srgb, var(--brand) 18%, var(--card2)); border-color:var(--brand); }
.perm-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
.tgl.perm { display:flex; align-items:center; gap:8px; } .tgl.perm .ck { width:18px; height:18px; border-radius:5px; border:1px solid var(--line); display:grid; place-items:center; font-size:12px; flex:none; background:var(--card); }
.tgl.perm.on .ck { background:var(--ok); border-color:var(--ok); color:#04150d; }
.staff .st-act { display:flex; gap:12px; flex-wrap:wrap; font-size:13px; margin-top:12px; font-family:var(--mono); } .staff .st-last { font-size:12px; margin-top:4px; }
.tbl.matrix th { font-size:10px; text-align:center; } .tbl.matrix td.y { color:var(--ok); text-align:center; font-weight:800; } .tbl.matrix td.n { color:var(--muted); text-align:center; }
.sumgrid > div.hl { border-color:var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); }

/* v0.5 fixes after screenshots */
.side { overflow-y:auto; } .side > * { flex:none; } .side .grow { flex:1 1 auto; min-height:8px; }
.route .rbot button { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* v0.6 — centre window · location button */
.peek-bg { position:fixed; inset:0; z-index:110; background:rgba(3,8,14,.62); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow:auto; animation: fadeIn .15s ease both; }
.peek { position:relative; width:min(1180px, 100%); background:var(--bg); border:1px solid var(--line); border-radius:20px; box-shadow:0 40px 120px rgba(0,0,0,.55); padding:22px 26px 28px; animation: peekIn .22s cubic-bezier(.2,.8,.2,1) both; }
.peek.small { width:min(560px, 100%); }
.peek > .x { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:18px; cursor:pointer; }
@keyframes peekIn { from { transform: translateY(18px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }
.locbtn { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--card2); cursor:pointer; font-size:15px; position:relative; }
.locbtn::after { content:""; position:absolute; right:4px; bottom:4px; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.locbtn[data-locstate="granted"]::after { background:var(--ok); } .locbtn[data-locstate="denied"]::after { background:var(--bad); } .locbtn[data-locstate="prompt"]::after { background:var(--warn); }
.locbanner { grid-column: span 12; display:flex; align-items:center; gap:12px; justify-content:space-between; padding:10px 16px; border-radius:14px; border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--card)); font-size:14px; }
.locbanner.hidden { display:none; } .locbanner .btn { margin:0; }

/* month centre window · report pages */
.pk-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 50px 14px 0; flex-wrap:wrap; }
.pk-head h2 { margin:4px 0; font-size:28px; } .pk-head .eyebrow { font:800 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--brand); }
.pk-nav { display:flex; gap:6px; } .pk-nav .btn { margin:0; }
.pk-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:12px; }
.pk-tile { border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--card); display:flex; flex-direction:column; gap:4px; }
.pk-tile span { font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .pk-tile b { font-size:22px; } .pk-tile small { font-size:12px; color:var(--muted); }
.pk-two { display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .pk-two .card { margin:0 0 12px; }
.pk-scroll { max-height:320px; overflow:auto; }
@media (max-width: 1100px) { .pk-grid { grid-template-columns: repeat(2, 1fr); } .pk-two { grid-template-columns: 1fr; } }
.rep-hero { display:flex; align-items:center; gap:16px; } .rep-hero .ic { font-size:30px; width:auto; height:auto; border-radius:0; display:grid; place-items:center; background:none; flex:none; } /* v0.11.2 (#16) */
.rep-hero h1 { margin:0; font-size:26px; } .rep-hero .main { flex:1; min-width:0; } .rep-hero .back { margin:0; }
.rep-body { overflow:hidden; } .rep-body .card { background:var(--card2); } .gauges.big .gauge svg { max-width:240px; }
.monthbar .btn { margin:0; flex:none; }

/* v0.6 — calendar */
.cal-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px !important; }
.cal-top .nav { width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--card2); color:var(--ink); font-size:20px; cursor:pointer; flex:none; }
.cal-top .btn { margin:0; } .cal-top .seg { padding:0; } .cal-top .seg button { padding:6px 12px; font-size:13px; cursor:pointer; }
.cal-ttl { display:flex; flex-direction:column; min-width:170px; } .cal-ttl h2 { margin:0; font-size:22px; } .cal-top .sp { flex:1; }
.cal-kpi { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); } .cal-kpi b { color:var(--ink); font-size:16px; margin-right:3px; }
.cal-grid { display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap:4px; }
.cal-wd { font:700 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:2px 6px 6px; } .cal-wd.sat { color:var(--bad); }
.cal-c { text-align:left; min-height:104px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); padding:6px 7px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:3px; overflow:hidden; transition: border-color .15s, transform .15s; }
.cal-c:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.cal-c.out { opacity:.42; } .cal-c.sat { background: color-mix(in srgb, var(--bad) 5%, var(--card)); }
.cal-c.off { background: color-mix(in srgb, var(--bad) 13%, var(--card)); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.cal-c.today { box-shadow: inset 0 0 0 2px var(--brand); } .cal-c.sel { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }
.c-h { display:flex; align-items:baseline; justify-content:space-between; gap:4px; } .c-h b { font-size:16px; } .c-h small { font-size:10.5px; color:var(--muted); font-family:var(--mono); white-space:nowrap; }
.c-hol { font-size:11px; font-weight:700; color:var(--bad); line-height:1.2; } .c-part { font-size:10px; color:var(--muted); line-height:1.2; }
.c-co { font-size:11px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--info); } .c-co.due { color:var(--orange); font-weight:700; } .c-co.cu { color:var(--ok); }
.c-more { font-size:10px; color:var(--muted); }
.c-cnt { display:flex; flex-wrap:wrap; gap:2px 6px; font-size:11px; margin-top:auto; font-family:var(--mono); } .c-cnt .k-paid { color:var(--ok); }
.cal-leg { margin-top:8px; flex-wrap:wrap; gap:10px; font-size:12px; } .cal-leg .sw { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; vertical-align:-2px; border:1px solid var(--line); }
.cal-leg .sw.off { background: color-mix(in srgb, var(--bad) 25%, var(--card)); } .cal-leg .sw.sat { background: color-mix(in srgb, var(--bad) 8%, var(--card)); }
.cal-ag { max-height: 820px; overflow:auto; }
.tbl.ird th small.ko { display:block; color:var(--brand); font-weight:600; text-transform:none; letter-spacing:0; }
.ag-sec { background: color-mix(in srgb, var(--brand) 10%, var(--card2)); border-top: 3px solid color-mix(in srgb, var(--brand) 45%, var(--line)); margin: 16px -14px 8px; padding: 8px 14px; font-weight: 800; letter-spacing: .04em; } /* v0.11.2 (#10) */
.ag-h h2 { margin:2px 0 8px; font-size:17px; } .ag-h .eyebrow { font:800 11px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--brand); }
.ag-sec { font:800 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; border-top:1px solid var(--line); padding-top:10px; }
.ag-i { display:flex; gap:8px; align-items:flex-start; padding:6px 8px; border-radius:10px; cursor:pointer; } .ag-i:hover { background:var(--card2); }
.ag-i .ic { width:20px; text-align:center; flex:none; } .ag-i .main { min-width:0; flex:1; } .ag-i .t { font-weight:600; font-size:14px; } .ag-i .s { font-size:12px; color:var(--muted); }
.ag-i.hol .t { color:var(--bad); } .ag-i.part { opacity:.8; } .ag-i.due .t { color:var(--orange); } .ag-i.pay .t { color:var(--info); } .ag-i.late .t { color:var(--bad); } .ag-i.ok .t { color:var(--ok); }
.ag-i .grade { font-size:11px; }
.ag-g { margin:4px 0 8px; } .ag-gh { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; margin:6px 0 2px; } .ag-gh .btn { margin:0 0 0 auto; }
.cal-ag .btn.small { margin:6px 0 0; }
.n14 { display:flex; flex-direction:column; gap:2px; }
.n14-r { display:grid; grid-template-columns: 110px 1fr auto; gap:10px; align-items:center; padding:6px 8px; border-radius:10px; cursor:pointer; } .n14-r:hover { background:var(--card2); }
.n14-r.off { background: color-mix(in srgb, var(--bad) 8%, transparent); } .n14-r.today { box-shadow: inset 3px 0 0 var(--brand); }
.n14-d { display:flex; flex-direction:column; } .n14-d small { font-size:11px; color:var(--muted); font-family:var(--mono); }
.n14-h { display:flex; flex-wrap:wrap; gap:4px; } .n14-c { display:flex; gap:10px; font-size:13px; font-family:var(--mono); white-space:nowrap; }
@media (max-width: 1300px) { .cal-c { min-height:88px; } .c-co { display:none; } }

/* v0.6 — dispatch */
.dp-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px !important; position:sticky; top:0; z-index:5; }
.dp-bar .seg { padding:0; } .dp-bar .seg button { padding:6px 12px; font-size:13px; cursor:pointer; } .dp-bar .btn { margin:0; } .dp-bar .sp, .dp-tip .sp { flex:1; }
.dp-bar input[type=date] { width:auto; min-height:34px; padding:4px 8px; font-size:14px; }
.dp-tip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px !important; font-size:13px; }
.dp-tole select { width:auto; min-height:32px; padding:3px 8px; font-size:13px; display:inline-block; } .dp-tole .btn { margin:0 0 0 6px; }
.dp-board { grid-column: 1 / -1; display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap:12px; align-items:start; }
body.desk .dp-col { display:flex; flex-direction:column; max-height:calc(100vh - 280px); min-height:260px; } body.desk .dp-col > .dp-scroll { flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; margin-right:-4px; padding-right:4px; } /* v0.17.0 (5) B7 */
.dp-col summary { white-space:nowrap; } .dp-col summary .btn { white-space:nowrap; flex:none; } .dp-col summary > .pill { flex:none; }
.dp-col summary .tl { min-width:0; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; } body.desk .dp-col summary .btn { padding:1px 7px; font-size:11px; min-height:22px; }
body.desk .dp-h { flex-wrap:wrap; } body.desk .dp-h select { flex:1 1 100%; order:3; margin:6px 0 0; } body.desk .dp-h .main .muted { white-space:nowrap; } /* the ↪ select squeezed "32 homes · 8 today" into three lines */
.dp-tip .dp-tiptext { flex:1 1 520px; min-width:0; line-height:1.5; }
.dp-col { background: color-mix(in srgb, var(--card) 85%, transparent); border:1px solid var(--line); border-radius:16px; padding:12px; min-height:220px; transition: border-color .15s, background .15s; }
.dp-col.over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); }
.dp-h { display:flex; align-items:center; gap:10px; } .dp-h .main { flex:1; min-width:0; } .dp-h select { width:auto; min-height:30px; padding:2px 6px; font-size:12px; }
.dp-load { height:5px; border-radius:9px; background:var(--line); margin:8px 0 4px; overflow:hidden; } .dp-load i { display:block; height:100%; background:var(--warn); } .dp-load i.ok { background:var(--ok); } .dp-load i.bad { background:var(--bad); }
.dp-sub { font:800 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:10px 0 4px; }
.dp-row { display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:9px; cursor:grab; font-size:13px; border:1px solid transparent; user-select:none; }
.dp-row.moved { background:#dff1fb; border-color:#9fd3f0; } .dp-row:hover { background:var(--card2); } .dp-row.on { background: color-mix(in srgb, var(--brand) 16%, var(--card)); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); } .dp-row.drag { opacity:.4; }
.dp-row .ck { width:16px; height:16px; border-radius:5px; border:1px solid var(--line); display:grid; place-items:center; font-size:11px; flex:none; } .dp-row.on .ck { background:var(--brand); color:#fff; border-color:var(--brand); }
.dp-row .nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dp-row .ics { font-size:12px; }
.dp-row .op { border:0; background:none; color:var(--muted); cursor:pointer; font-size:16px; padding:0 4px; }
.dp-col details { margin:2px 0; } .dp-col summary { cursor:pointer; font-size:12.5px; padding:4px 2px; display:flex; align-items:center; gap:6px; } .dp-col summary .btn { margin:0 0 0 auto; padding:2px 8px; min-height:0; font-size:11px; }

/* v0.6 — alerts inbox · assignment · customer timeline */
.snz { display:flex; gap:4px; } .snz button { border:1px solid var(--line); background:var(--card2); color:var(--ink); border-radius:8px; width:28px; height:26px; cursor:pointer; font-size:12px; }
.snz button:hover { border-color: var(--brand); } .snz-foot { padding:8px 12px; }
.assign { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:14px; } .assign select { width:auto; min-height:34px; padding:4px 10px; font-size:14px; } .assign .btn { margin:0; }
.tl360 .ev { display:grid; grid-template-columns: 92px 22px 1fr; gap:6px; align-items:baseline; padding:4px 0; border-bottom:1px dashed var(--line2); cursor:default; }
.tl360 .ev[data-edit], .tl360 .ev[data-receipt] { cursor:pointer; } .tl360 .tl-d { font-size:12px; color:var(--muted); } .tl360 .tl-t { min-width:0; }
.staff-new .grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:10px; } .staff-new .btn { margin-top:10px; }
.btn.bad { background:var(--bad); color:#fff; border-color:var(--bad); }
@media (min-width: 1180px) { .cal .cal-grid-p { grid-column: span 8; } .cal .cal-ag { grid-column: span 4; } }
@media (max-width: 1179px) { .cal .cal-grid-p, .cal .cal-ag { grid-column: span 12; } }

/* v0.6 — unusual chips · replay · TV */
.anom { display:flex; gap:8px; flex-wrap:wrap; }
.anom-c { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:99px; padding:7px 14px; font:600 13px inherit; font-family:inherit; cursor:pointer; }
.anom-c.lv-bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); background: color-mix(in srgb, var(--bad) 12%, var(--card)); }
.anom-c.lv-warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 12%, var(--card)); }
.anom-c.lv-ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, var(--card)); }
.anom-c.lv-info { border-color: color-mix(in srgb, var(--info) 50%, var(--line)); background: color-mix(in srgb, var(--info) 10%, var(--card)); }
.replay-ov { position:absolute; left:14px; bottom:18px; z-index:500; background: color-mix(in srgb, var(--bg) 82%, transparent); border:1px solid var(--line); border-radius:14px; padding:10px 16px 12px; min-width:220px; pointer-events:none; backdrop-filter: blur(6px); }
.replay-ov b { display:block; font-size:26px; letter-spacing:-.01em; } .replay-ov span { font-size:13px; color:var(--muted); }
.replay-ov i { display:block; height:3px; background:var(--brand); border-radius:3px; margin-top:8px; transition: width .8s linear; }
#tvbar { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; gap:12px; padding:6px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom:1px solid var(--line); font-size:13px; }
#tvbar i { flex:1; height:3px; background:var(--line); border-radius:3px; overflow:hidden; } #tvbar s { display:block; height:100%; background:var(--brand); animation: tvfill 20s linear forwards; }
@keyframes tvfill { from { width:0; } to { width:100%; } }
body.tv .side { display:none; } body.tv .shell { grid-template-columns: 1fr !important; } body.tv .topbar { padding-top:34px; }

/* v0.7 — sidebar groups · what-if · referrals · field live */
.side-grp { font:800 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:12px 12px 4px; opacity:.8; }
.wi-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .wi-top .seg { padding:0; } .wi-top .seg button { cursor:pointer; padding:6px 12px; font-size:13px; } .wi-top .sp { flex:1; }
.wi-knobs { max-height: 1100px; overflow:auto; } .wi-g { margin-bottom:14px; } .wi-g .status { font-size:14px; margin-bottom:6px; }
.wi-k { padding:6px 0 8px; border-bottom:1px dashed var(--line2); } .wi-l { display:flex; justify-content:space-between; gap:10px; font-size:13px; } .wi-l b { font-size:15px; }
.wi-k input[type=range] { width:100%; min-height:0; padding:0; border:0; background:none; accent-color: var(--brand); height:22px; } .wi-s { font-size:11px; color:var(--muted); }
.legend .sw { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; vertical-align:-2px; }
.net { width:100%; height:auto; } .net line { stroke: color-mix(in srgb, var(--brand) 45%, var(--line)); stroke-width:1.5; } .net .nd { cursor:pointer; } .net .nd text { font:600 11px var(--sans); fill:var(--ink); } .net .nd:hover circle { stroke:var(--brand); stroke-width:3; }
.lv-cards { display:flex; flex-direction:column; gap:12px; min-width:0; }
.lv-card { background: color-mix(in srgb, var(--card) 88%, transparent); border:1px solid var(--line); border-radius:16px; padding:12px 14px; }
.lv-card.working { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); } .lv-card.quiet { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.lv-h { display:flex; align-items:center; gap:10px; } .lv-h .main { flex:1; min-width:0; }
.lv-kv { display:flex; gap:12px; flex-wrap:wrap; font-size:13px; margin:6px 0; } .lv-kv .bad { color:var(--bad); font-weight:700; }
.lv-next { font-size:13px; padding:6px 8px; border-radius:9px; background:var(--card2); cursor:pointer; margin:4px 0 6px; }
.lv-tl .ev { font-size:12.5px; padding:3px 0; border-bottom:1px dashed var(--line2); cursor:pointer; } .lv-tl .ev .mono { color:var(--muted); margin-right:4px; }
.tech-pin { width:30px; height:30px; border-radius:50%; background:var(--c); color:#061018; font:800 14px var(--sans); display:grid; place-items:center; border:3px solid #fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent), 0 6px 16px rgba(0,0,0,.4); animation: pinPulse 2s ease-in-out infinite; }
@keyframes pinPulse { 50% { box-shadow:0 0 0 9px color-mix(in srgb, var(--c) 10%, transparent), 0 6px 16px rgba(0,0,0,.4); } }
@media (min-width: 1180px) { .wi .wi-knobs { grid-column: span 4; } .wi #wiOut { grid-column: span 8; } .live .r2 { grid-column: span 7; } .live .lv-cards { grid-column: span 5; } }
@media (max-width: 1179px) { .wi .wi-knobs, .wi #wiOut, .live .r2, .live .lv-cards { grid-column: span 12; } }
.wi #wiOut { align-self:start; position:sticky; top:8px; }
.net path { fill:none; stroke: color-mix(in srgb, var(--brand) 50%, var(--line)); stroke-width:1.6; } .net .nd text.root { font-weight:800; fill:var(--brand); }

/* v0.8 — watch list */
.watch-i { align-items:flex-start; flex-wrap:wrap; } .watch-i .main { min-width:0; flex:1; }
.wrs { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } .wr { font-size:12px; padding:2px 8px; border-radius:99px; background:var(--card2); border:1px solid var(--line); white-space:normal; overflow-wrap:anywhere; max-width:100%; }
.wr-money { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); } .wr-service { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); } .wr-stage { border-color: color-mix(in srgb, var(--info) 40%, var(--line)); }
.wacts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .wacts .btn { margin:0; width:auto; }
body.desk .watch-i .wacts { margin-top:6px; gap:4px; } body.desk .watch-i .wacts .btn { min-height:28px; padding:0 9px; font-size:12px; border-radius:8px; } /* v0.17.0 (5) B8: 40 big buttons → small, one line */
body.desk .wt-side .funnel.hb .st { grid-template-columns:172px 1fr 40px; } /* "Nobody home at a visit" broke into 3 lines in 104 px */
.wt-fold summary { cursor:pointer; color:var(--muted); font-size:13px; padding:2px 0; } .wt-fold[open] summary { margin-bottom:8px; }
.watch-i.lv-high { box-shadow: inset 3px 0 0 var(--bad); } .watch-i.lv-watch { box-shadow: inset 3px 0 0 var(--warn); }
.wt-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px !important; } .wt-bar .seg { padding:0; } .wt-bar .seg button { cursor:pointer; padding:6px 12px; font-size:13px; } .wt-bar .sp { flex:1; }
.wt-list { } /* the page scrolls (an inner scroll box jumped to the top after each ✓ Checked) */ .wt-side { display:flex; flex-direction:column; gap:14px; min-width:0; } .wt-side .panel { margin:0; }
.wt-rules .v { text-align:right; font-family:var(--mono); }
@media (min-width: 1180px) { .watch .s7 { grid-column: span 7; } .watch .wt-side { grid-column: span 5; } }
@media (max-width: 1179px) { .watch .s7, .watch .wt-side { grid-column: span 12; } }
.note-warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
.tbl td.mono { white-space:nowrap; } .tbl td .dot { display:inline-block; vertical-align:middle; }

/* 🛵 on my way (v0.8 #7) */
.omw-eta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 4px; padding:10px 12px; border:1px dashed var(--line); border-radius:14px; background:var(--card2); }
.omw-eta.hidden { display:none; }
.omw-eta .chip { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; flex:1 1 28%; min-height:44px; margin:0; }
.omw-eta > .muted { flex-basis:100%; }

/* sales stage days (v0.8 #9) */
.grid4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
@media (max-width: 1200px) { .grid4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* grant KPIs (v0.8 #10) */
.tbl.perform td:last-child { min-width:260px; font-size:13px; }
.tbl.perform th { white-space:nowrap; }

/* chart notes (v0.8 #11) */
.cnotes { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:4px; font-size:12px; color:var(--muted); }
.cnotes i { font-style:normal; opacity:.7; font-family:var(--mono); }
.cnote text { pointer-events:none; }
/* money approvals (v0.8 #12) */
.item.appr .t, .item.appr .s { white-space:normal; overflow:visible; text-overflow:clip; }
.item.appr .wacts { display:flex; gap:6px; flex:none; }

/* change log (v0.8 security) */
.tbl.chg td:last-child { font-size:13px; }
.chg-money b { color:var(--warn); }

/* v0.9.2 login: show the password · clear a field in one tap */
.pwbox { position:relative; }
.pwbox input { padding-right:92px; }
.pwbtns { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:2px; }
.pwbtn { border:0; background:transparent; font-size:18px; line-height:1; padding:8px; min-width:40px; min-height:40px; border-radius:10px; color:var(--muted); cursor:pointer; }
.pwbtn:active { background:var(--line2); }

/* v0.9.4 login: remember my email · stay signed in */
label.chk-line { display:flex; align-items:center; gap:10px; margin:10px 0 0; padding:0; min-height:0; font-size:15px; font-weight:500; cursor:pointer; }
label.chk-line input { width:20px; margin:0; min-height:0; padding:0; box-shadow:none; height:20px; accent-color:var(--brand); flex:none; }

/* ================= v0.11 — calm phone (Tara 2026-09-30: "too colourful · over-stimulating · too bold" · Jun keeps the icon colours) ================= */
/* colour lives in two places only: the icon box of a row (category) and the urgency pills/badges (red · orange). Text and backgrounds are grey/white. */
:root:not([data-theme="dark"]) { --bg:#f2f2f7; }
body:not(.desk) { background: var(--bg); }
body:not(.desk) .card { border:1px solid var(--line2); box-shadow:none; }
body:not(.desk) h1, body:not(.desk) h2 { font-weight:600; }
body:not(.desk) .item .t { font-weight:500; }
body:not(.desk) label { font-weight:500; }
body:not(.desk) .btn { font-weight:600; } body:not(.desk) .chip.on { font-weight:600; }
body:not(.desk) .pill { font-weight:500; }
body:not(.desk) .status { font-weight:500; }
body:not(.desk) .fsec { border-top:0; margin-top:18px; padding-top:0; }
body:not(.desk) .fsec > .t { font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--muted); }
body:not(.desk) input, body:not(.desk) select, body:not(.desk) textarea { min-height:50px; padding:12px 14px; font-size:17px; }
body:not(.desk) .chip { min-height:48px; font-size:15px; }
/* grouped rows (Today · New · Status) */
.sec { margin:18px 4px 6px; font-weight:600; }
.rows { padding:0 0 0 14px; }
.rowb { display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:8px 12px 8px 0; border:0; border-bottom:1px solid var(--line2); background:none; color:var(--ink); font-family:inherit; font-size:16px; font-weight:400; text-align:left; cursor:pointer; }
.rowb:last-child { border-bottom:0; }
.rowb:active { background:var(--card2); }
.rowb .ric { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:16px; flex:none; background:var(--tone-soft, var(--card2)); }
.rowb .rl { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; } .rowb .rl small { font-size:12px; color:var(--muted); margin-top:1px; }
.rowb .rn { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--muted); font-size:15px; }
.rowb .rb { min-width:20px; padding:1px 7px; border-radius:99px; background:var(--bad); color:#fff; font-size:12px; font-weight:600; text-align:center; }
.rowb .rc { color:var(--grey); font-size:18px; }
.tone-dev { --tone:#b7791f; --tone-soft:#fbf1dc; } .tone-rep { --tone:#3b4a8a; --tone-soft:#e6e9f7; } .tone-co { --tone:#6b7280; --tone-soft:#ececef; }
[data-theme="dark"] .tone-dev { --tone-soft:#2b220e; } [data-theme="dark"] .tone-rep { --tone-soft:#171c33; } [data-theme="dark"] .tone-co { --tone-soft:#1c2029; }
/* collections card on the phone: one accent (the stage pill), plain text, the actions on their own line */
body:not(.desk) .item.dun { display:block; }
body:not(.desk) .item.dun .s.chase-broken { color:var(--ink); font-weight:400; } body:not(.desk) .item.dun .s.chase-waiting { color:var(--ink); }
body:not(.desk) .dun-acts { display:flex; gap:8px; margin-top:8px; }
body:not(.desk) .dun-acts > * { flex:1; margin:0; min-height:44px; font-size:13px; white-space:nowrap; padding:0 6px; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; color:var(--ink); }
/* diagnostics folded away */
.diagbox summary::-webkit-details-marker { display:none; } .diagbox summary::before { content:"›"; display:inline-block; margin-right:8px; color:var(--grey); transition:transform .15s; } .diagbox[open] summary::before { transform:rotate(90deg); }
/* tabs: only the open tab is in colour */
body:not(.desk) nav.tabs button:not(.on) .i { filter:grayscale(1); opacity:.6; }
/* practice / demo badge: small, at the top, scrolls away with the page (it used to float over the fields — Tara's screenshot) */
body:not(.desk) .demo-flag, body:not(.desk) button.demo-flag { position:absolute; top:calc(env(safe-area-inset-top) + 6px); left:16px; right:auto; transform:none; font-size:10px; padding:3px 10px; box-shadow:none; }
body:not(.desk) button.demo-flag:active { transform:scale(.97); }
body.has-flag:not(.desk) main { padding-top:26px; }

/* v0.11.1 route bar details (Jun 2026-10-01 phone screenshot): the Next button keeps its name on a second line · the top chips scroll with a soft edge · the practice badge no longer sits on the chips */
.route .rbot button.primary { flex:1.6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1.15; padding:6px 10px; }
.route .rbot button .nx { font-size:14px; } .route .rbot button .nxn { font-size:12px; font-weight:600; opacity:.9; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route .rsum { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.route .rsum .k b { font-size:20px; } .route .rsum .k { font-size:12px; padding:4px 7px; }
body.has-flag .route .rtop { top:calc(env(safe-area-inset-top) + 36px); }

/* v0.11.1 (#5) the sync pill in the Today header: white, dark text, 13px — it is the only place that says "offline" */
.hero .syncpill { background:#fff; color:var(--ink); border-color:transparent; font-size:13px; font-weight:600; backdrop-filter:none; }
.hero .syncpill:has(.dot.y) { background:var(--warn-soft); } .hero .syncpill:has(.dot.r) { background:var(--bad-soft); color:var(--bad); }
/* v0.11.1 (#12) tap targets ≥ 44px on the phone */
body:not(.desk) .btn.small { min-height:44px; } body:not(.desk) .icon-btn { width:44px; height:44px; } body:not(.desk) .dun-acts > * { min-height:44px; } body:not(.desk) .lang-seg button { padding:9px 12px; }
/* v0.11.1 (#13) customer page: the three things you do at the door are big, the rest folds under ⋯ More */
.links.top3 { grid-template-columns: repeat(4, 1fr); } .links.top3 a, .links.top3 button { min-height:56px; font-size:15px; }
.links.more { margin-top:8px; }
/* v0.11.1 (#1) draft banner · (#8) customer search · (#3) sent pill */
.draftbar { display:flex; align-items:center; gap:8px; background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius:12px; padding:8px 10px; font-size:14px; margin-bottom:10px; } .draftbar .btn { margin:0; }
.custpick { margin-bottom:6px; }
.pill.sent { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
/* v0.11.1 motion (Jun 2026-10-01 "부드럽게 전환되는 애니메이션"): transform + opacity only, short, and off entirely under prefers-reduced-motion (above) */
.view-enter.view-fwd { animation: viewFwd .24s cubic-bezier(.2,.8,.2,1) backwards; }
.view-enter.view-back { animation: viewBack .22s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes viewFwd { from { opacity:0; transform: translateX(22px); } to { opacity:1; transform:none; } }
@keyframes viewBack { from { opacity:0; transform: translateX(-16px); } to { opacity:1; transform:none; } }
.sheet.out { animation: sheetOut .22s ease-in both; pointer-events:none; }
@keyframes sheetOut { to { transform: translateY(100%); opacity:.6; } }
.item { transition: background .12s; } .item:active { background: color-mix(in srgb, var(--brand) 6%, var(--card)); }
.view-enter .card.flush > .item, .sheet.list .rl-i, .view-enter .rowb { animation: fadeUp .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 28ms); } /* only while a screen enters — a data refresh must not replay it */
.card.flush > .item:nth-child(n+9), .rowb:nth-child(n+9), .rl-i:nth-child(n+9) { animation-delay:0s; }
.sheet.list .rl-i.lifting { animation:none; transition:none; } /* a finished fadeUp would pin transform:none over the drag */
.card.flush > .item:nth-child(2), .rowb:nth-child(2) { --i:1; } .card.flush > .item:nth-child(3), .rowb:nth-child(3) { --i:2; } .card.flush > .item:nth-child(4), .rowb:nth-child(4) { --i:3; } .card.flush > .item:nth-child(5), .rowb:nth-child(5) { --i:4; } .card.flush > .item:nth-child(6), .rowb:nth-child(6) { --i:5; } .card.flush > .item:nth-child(7), .rowb:nth-child(7) { --i:6; } .card.flush > .item:nth-child(8), .rowb:nth-child(8) { --i:7; }
nav.tabs button { transition: background .18s, color .18s; }
.chip, .chk { transition: background .12s, border-color .12s, transform .08s; }
.pill { transition: background .15s, color .15s; }
.btn.small:active, .icon-btn:active, .rowb:active { transform: scale(.98); }

/* v0.12 image receipt preview */
.rc-img{width:100%;max-width:340px;display:block;margin:10px auto;border-radius:14px;box-shadow:0 6px 18px rgba(13,45,94,.18)}

/* v0.13.2 memo pad on Today (stays on this phone) */
.memo-btn{display:block;width:100%;margin-top:8px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:14px}
.memo-btn.has{background:rgba(255,255,255,.26)}
.memo{margin-top:8px}.memo textarea{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--line);padding:10px;font:inherit;font-size:15px;line-height:1.45;background:#fffbe6;color:#15202b;resize:vertical;min-height:96px}
.memo .muted{font-size:11px;margin-top:4px;color:rgba(255,255,255,.8)}

/* v0.14 (#2) desk map: status pins · card popup · tole clusters · today list */
.mpin{width:26px;height:32px;position:relative}.mpin:before{content:"";position:absolute;left:3px;top:0;width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.45)}
.mpin span{position:absolute;left:0;top:1px;width:26px;text-align:center;font-size:11px;line-height:18px;transform:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.mpin.today:before{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.5)}.mpin.hot:before{animation:ring 1.6s ease-out infinite}
.mclu{background:rgba(13,20,32,.88);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:3px 8px;font-size:11px;white-space:nowrap;display:flex;gap:6px;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,.4)}.mclu b{font-weight:700}.mclu span{background:rgba(255,255,255,.18);border-radius:8px;padding:0 6px}.mclu i{font-style:normal;border-radius:8px;padding:0 6px;font-weight:600}.mclu i.r{background:#ff5c5c;color:#1a0000}.mclu i.y{background:#ffcc4d;color:#1a1200}
.mcard{font-size:12.5px;min-width:220px}.mc-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}.mc-h b{font-size:14px}.mc-r{display:flex;gap:12px;flex-wrap:wrap;margin:3px 0;color:var(--ink)}.mc-r .bad{color:#ff5c5c;font-weight:600}.mc-r .ok{color:#2ee59d}.mc-r .warn{color:#ffcc4d}.mc-b{display:flex;gap:6px;margin-top:8px}.mc-b a{text-decoration:none}
.mapcc .mlist .ml{max-height:calc(100vh - 230px);overflow:auto}.ml-i{display:flex;gap:8px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}.ml-i:hover{background:var(--card2)}.ml-i .k{font-size:15px;width:22px;text-align:center;flex:none}.ml-i .main{flex:1;min-width:0}.ml-i b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v0.15 (Jun 10/3): map page = map 9 + today list 3 at every width (the ≤1480 rule turned the list into a half page) */
.mapcc .s9 { grid-column: span 9; } .mapcc .s3 { grid-column: span 3; } @media (max-width: 1480px) { .mapcc .s9 { grid-column: span 8; } .mapcc .s3 { grid-column: span 4; } }
/* v0.15: a link styled as a button sat at the top with an underline (📞 💬 in the watch list) */
a.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; box-sizing:border-box; }
/* v0.15: watch list — the level rail already says it; the loose dot on top of the rail went (Jun "점 위치도 그렇고") */
.watch-i > .dot { display:none; } .watch-i { padding-left:12px; } .watch-i.lv-high { box-shadow: inset 4px 0 0 var(--bad); } .watch-i.lv-watch { box-shadow: inset 4px 0 0 var(--warn); } .watch-i.lv-low { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--info) 55%, transparent); }
/* v0.15: charts — the number on every bar · the picked month explained · event marks behind a 📌 toggle (Jun "뭔 의미인지 헷갈림") */
.chart .vl { fill:var(--muted); font-size:9.5px; font-family:var(--mono); } .chart .vl.hi { fill:var(--warn); font-weight:800; }
.chartw .cnote, .chartw .cnotes { display:none; } .chartw.notes-on .cnote { display:block; } .chartw.notes-on .cnotes { display:flex; }
.cfoot { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; margin-top:4px; font-size:12px; color:var(--muted); } .cfoot .cl { display:inline-flex; align-items:center; gap:6px; } .cfoot .sw { width:10px; height:10px; border-radius:3px; display:inline-block; }
.cfoot .cn-tgl { font-size:12px; color:var(--brand); background:none; border:0; cursor:pointer; font-family:inherit; padding:0; } .chartw.notes-on .cn-tgl { font-weight:800; }
.staff .avatar.photo { width:48px; height:48px; border-radius:50%; overflow:hidden; } .staff .avatar.photo img { width:100%; height:100%; object-fit:cover; display:block; }
.ms-i .main .s b.bad { color:var(--bad); } .ms-done { margin-top:10px; } .ms-done summary { cursor:pointer; color:var(--muted); font-size:13px; padding:6px 0; } .ms-done .mini-list .item { opacity:.7; }
.board .wt-bar .seg button b { margin-left:4px; }
/* v0.15 #14 (Jun: MacBook 16-inch): at 1117px of height the sidebar overflowed — the last group (Milestones) sat below the fold */
@media (max-height: 1200px) { .side { gap:2px; padding:12px 10px; } .side button { padding:6px 12px; font-size:13.5px; } .side-grp { padding:7px 12px 2px; font-size:9px; } .side .side-lang { margin:6px 0; } .side .side-lang .lbl { display:none; } }
@media (max-height: 1000px) { .side { overflow-y:auto; scrollbar-width:none; } .side-grp { padding:4px 12px 0; font-size:8.5px; opacity:.6; } .side button { padding:3px 12px; font-size:13px; } } /* v0.19.3: the group words stay (were hidden on a 16" MacBook) — the list reads as the company: day · customers · money · company */
.qr-prev img { width:72px; height:72px; border:1px solid var(--line); border-radius:8px; background:#fff; display:block; } .card.staff.my { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
/* v0.16.0 (5) desk: cards to send (Jun 10/3) */
.cs-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); column-gap:22px; max-height:360px; overflow:auto; }
.cs-list .item.cs-i { gap:8px; cursor:default; }
.cs-i .btn.small { flex:none; }
.cs-i.sent { opacity:.5; }
.cs-list .empty { grid-column:1 / -1; }
.cs-morebtn { margin-top:8px; }
/* v0.16.0 (8) watch list: .mini-list .item (padding:9px 0) beat .watch-i padding → names sat on the coloured rail */
.mini-list .item.watch-i { padding-left:14px; }
/* v0.17.0 (1) A1 · (5) quick add on top of the sidebar (the bottom fell off a 16" MacBook) · A2 card window: picture left, buttons right */
.side .side-qa { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin:0 0 10px; }
.side .side-qa button { flex-direction:column; justify-content:center; gap:2px; padding:7px 2px 6px; border:1px solid var(--line); background:var(--card2); color:var(--ink); border-radius:10px; font-size:11.5px; font-weight:700; text-align:center; line-height:1.15; }
.side .side-qa button:hover { border-color:var(--brand); background:var(--brand-soft); }
.side .side-qa .qi { font-size:17px; width:auto; position:relative; } .side .side-qa .qp { position:absolute; right:-10px; top:-6px; font-size:11px; color:var(--brand); font-weight:900; }
.side .side-qa .ql { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.rc-desk { display:grid; grid-template-columns:minmax(0, 340px) minmax(0, 1fr); gap:18px; align-items:start; margin-top:10px; }
.rc-desk .rc-img { margin:0; }
.rc-side { position:sticky; top:8px; display:flex; flex-direction:column; gap:8px; max-width:300px; }
.rc-side .btn { width:100%; margin:0; min-height:44px; font-size:15px; }
.rc-side .rc-save { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.rc-side .rc-sent.on { border-color:var(--ok); color:var(--ok); }
.rc-hint { font-size:12px; line-height:1.45; }
.panel .ph .ph-btn { margin:0 8px 0 0; min-height:30px; font-size:12.5px; padding:0 12px; }
/* v0.17.0 (2) B1 — no empty space under short panels: a long list scrolls inside (.fs) · short panels stack beside a long one (.stack) */
.cc > .stack { display:flex; flex-direction:column; gap:14px; min-width:0; }
.cc > .stack > .panel { flex:none; } .cc > .stack > .panel:last-child { flex:1 1 auto; }
.panel.fs { min-height:var(--fs-min, 260px); } .panel.fs-300 { --fs-min:300px; } .panel.fs-420 { --fs-min:420px; } .panel.fs-480 { --fs-min:480px; }
.panel.fs > .fs-in { position:absolute; inset:16px; display:flex; flex-direction:column; min-height:0; }
.panel.fs > .fs-in > .ph { flex:none; } .panel.fs > .fs-in > .fs-body { flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; padding-right:2px; }
.cal .cal-ag.fs { max-height:none; overflow:hidden; }
.lv-cards.fs-col { position:relative; min-height:420px; } .lv-cards.fs-col > .fs-colin { position:absolute; inset:0; overflow:auto; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; padding-right:2px; }
.row-end { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; margin-top:10px; } .row-end .btn { margin:0; min-height:32px; font-size:12.5px; }
/* B11 a round initial wherever a person shows (it was a bare letter in Field live · Dispatch) · B13 calendar events get two lines · B14 the practice badge steps back */
.lv-h .avatar, .dp-col .avatar, .dp-h .avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font:800 15px var(--sans); color:#fff; background:linear-gradient(135deg, var(--grad-a), var(--grad-b)); flex:none; }
.c-co { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:clip; overflow-wrap:anywhere; }
body.desk .demo-flag { opacity:.62; transform:scale(.86); transform-origin:bottom right; transition:opacity .15s; } body.desk .demo-flag:hover { opacity:1; }
/* v0.17.0 (3) (8) desk sizes — phone 56-px full-width buttons and 54-px inputs looked blown up on a 16" screen (Jun 10/3 "버튼 쓸데없이 크고 … 저퀄") */
body.desk #deskPage .btn { width:auto; min-height:36px; font-size:14px; padding:0 16px; border-radius:10px; margin-top:10px; }
body.desk #deskPage .btn.small { min-height:30px; font-size:12.5px; padding:0 11px; margin-top:0; }
body.desk #deskPage .row, body.desk #deskPage .row.wrap { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
body.desk #deskPage .row .btn, body.desk #deskPage .row.wrap .btn { flex:0 0 auto; margin-top:0; }
body.desk #deskPage input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), body.desk #deskPage select, body.desk #deskPage textarea { min-height:38px; font-size:14.5px; padding:8px 11px; border-radius:9px; }
body.desk #deskPage label { font-size:13px; }
body.desk .cs-i .btn.small:not(.ghost), body.desk .watch-i .btn.small:not(.ghost) { background:var(--brand-soft); color:var(--ink); border:1px solid color-mix(in srgb, var(--brand) 50%, var(--line)); box-shadow:none; }
/* B2 Staff: new account on one line · pick a person on the left · their card on the right */
.staff-desk { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:16px; align-items:start; }
.staff-desk .tbl.matrix th, .staff-desk .tbl.matrix td { padding:7px 5px; } .staff-desk .tbl.matrix td:last-child { font-size:12px; }
.staff-desk .mini-list .item[data-staffpick] { cursor:pointer; border-radius:8px; } .staff-desk .mini-list .item.sel { background:var(--brand-soft); }
.staff-desk .sd-top { grid-column:1 / -1; } .staff-desk .card { margin:0 0 14px; }
.staff-desk .sd-right { position:sticky; top:84px; } .staff-desk .sd-right .card.staff:not(.sel) { display:none; }
.staff-desk .staff-new { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto auto; gap:6px 12px; align-items:end; }
.staff-desk .staff-new > .status, .staff-desk .staff-new > .muted, .staff-desk .staff-new > .hint { grid-column:1 / -1; } .staff-desk .staff-new > .grid2 { display:contents; } .staff-desk .staff-new > .lbl { display:none; }
.staff-desk .staff-new label { margin-top:4px; } .staff-desk .staff-new .btn { margin:0; }
.staff-desk .tbl.matrix tr[data-staffpick] { cursor:pointer; } .staff-desk .tbl.matrix tr[data-staffpick]:hover td { background:color-mix(in srgb, var(--brand) 8%, transparent); }
.staff-desk .tbl.matrix tr.sel td { background:var(--brand-soft); } .staff-desk .tbl.matrix tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--brand); }
/* (6) on and off at a glance: on = green fill + ✓ + bold · off = faint, dashed · chosen preset / area = filled */
body.desk .staff-desk .tgl.perm { opacity:.6; border-style:dashed; } body.desk .staff-desk .tgl.perm .ck { background:transparent; }
body.desk .staff-desk .tgl.perm.on { opacity:1; border-style:solid; border-color:var(--ok); background:color-mix(in srgb, var(--ok) 15%, var(--card2)); font-weight:800; }
body.desk .staff-desk .tgl.on:not(.perm) { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); font-weight:800; }
/* B9 Devices: the event button sits at the top right (a 1,414-px bar under the warning before) */
.panel.dev-desk [data-go-form="device"] { position:absolute; top:20px; right:20px; margin:0; }
/* B2 Settings: two columns · the language switch lives in the top bar */
body.desk .status-desk { column-count:2; column-gap:18px; } body.desk .status-desk > * { break-inside:avoid; } body.desk .status-desk > h1 { column-span:all; }
body.desk .status-desk h2, body.desk .status-desk .sec { break-after:avoid; } body.desk .status-desk .lang-card { display:none; } body.desk .status-desk .card { margin-top:0; }
/* v0.17.0 (4) B3 desk forms: two short fields per row, 40-px inputs, Save at the right (one 54-px field per row before — an expense needed scrolling) */
body.desk .drawer #theForm { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:16px; align-items:start; }
body.desk .drawer #theForm > * { grid-column:1 / -1; } body.desk .drawer #theForm > .fld.w1 { grid-column:auto; }
body.desk .drawer #theForm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), body.desk .drawer #theForm select, body.desk .drawer #theForm textarea { min-height:40px; font-size:15px; padding:8px 12px; border-radius:10px; }
body.desk .drawer #theForm textarea { min-height:76px; } body.desk .drawer #theForm .chip { min-height:38px; font-size:14px; border-radius:10px; }
body.desk .drawer #theForm label { font-size:13.5px; }
body.desk .drawer #theForm .btn:not(#saveBtn) { width:auto; min-height:38px; font-size:14px; padding:0 14px; }
body.desk .drawer #theForm > #saveBtn { grid-column:2; justify-self:end; width:auto; min-width:200px; min-height:44px; font-size:16px; }
/* v0.17.1 ④ no page-wide buttons inside a desk window either (v0.17.0 only sized the page) · a list's "＋ New …" sits at the top right */
body.desk .drawer .btn { width:auto; } body.desk .drawer .row .btn, body.desk .drawer .row.wrap .btn { flex:0 0 auto; }
body.desk .drawer .rc-side .btn { width:100%; } body.desk .drawer .dpage > .btn { display:inline-flex; align-items:center; justify-content:center; margin-right:8px; }
body.desk .drawer.wide:not(.full) { height:auto; max-height:92vh; } /* a short list window ends where its list ends (2 moves left a 700-px empty box) */
body.desk .drawer .dp-acts { display:flex; justify-content:flex-end; gap:8px; margin:6px 0 4px; } body.desk .drawer .dp-acts .btn { margin:0; min-height:34px; font-size:13.5px; padding:0 14px; }
/* B4 customer window: the 11 big tiles become a compact toolbar · drawer buttons at desk size */
body.desk .drawer .links { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
body.desk .drawer .links a, body.desk .drawer .links button { flex:0 0 auto; padding:6px 12px; min-height:32px; font-size:13px; border-radius:9px; }
body.desk .drawer .links:not(.more) a, body.desk .drawer .links:not(.more) button { border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); font-weight:700; }
body.desk .drawer .links.more { margin-top:6px; }
body.desk .drawer .btn { min-height:40px; font-size:15px; border-radius:10px; } body.desk .drawer .btn.small { min-height:32px; font-size:13px; }
/* (1) full width = a customer in two columns (it only stretched the one column) */
body.desk .drawer.full .dpage.scr-detail { column-count:2; column-gap:28px; }
body.desk .drawer.full .dpage.scr-detail > * { break-inside:avoid; } body.desk .drawer.full .dpage.scr-detail > .sec { break-after:avoid; }
body.desk .drawer #theForm .photo-btn { min-height:46px; padding:6px 10px; font-size:14px; } body.desk .drawer #theForm .photo-btn br { display:none; }
.sg-row { gap:8px; align-items:center; margin-top:6px; } .sg-row input[type=number] { width:84px; } .sg-row input[type=text] { flex:1 1 auto; min-width:0; } .sg-row .btn { flex:none; white-space:nowrap; } /* v0.17.2 (6) · v0.19.1: the "Next number" button no longer squashed */
.photo-btn:only-child { flex:0 1 auto; padding-left:22px; padding-right:22px; } /* v0.17.2 (3): the computer's single "Choose photos" button is not stretched across the window */
body.desk .drawer #theForm .hint { font-size:12px; }
body.desk .drawer #theForm label { margin:10px 0 5px; } body.desk .drawer .dpage.scr-form > h1 { font-size:22px; margin:2px 0 2px; }
body.desk .drawer #theForm > #saveBtn { position:sticky; bottom:10px; z-index:5; box-shadow:0 10px 26px rgba(0,0,0,.45); } /* Save stays in view on long forms */
body.desk .drawer.full .dpage.scr-detail { margin-right:96px; } /* (1) the ⤢ ✕ buttons float at the right — keep the second column clear of them */
/* B6 Customers: the list first, the areas in a narrow column beside it */
.tole-side .tole-list .item { cursor:pointer; border-radius:8px; padding:7px 6px; } .tole-side .tole-list .item.sel { background:var(--brand-soft); } .tole-side .tole-list .item .s { font-size:11.5px; }
@media (max-width: 1480px) { .panel.cust-main { grid-column: span 8; } .panel.tole-side { grid-column: span 4; } } /* 1440: s3 → span 6 pushed the areas under the list */
/* v0.17.0 (6) map: ward names (zoom 14+) · a badge that stepped aside gets a dashed edge · the ward-lines switch */
/* v0.17.1 ① tole badge = the visible label is the hit area (not its invisible 120-px box) · hover list · click pins it */
.leaflet-marker-icon.mclu-ic { pointer-events:none !important; } .mclu-ic .mclu { pointer-events:auto; cursor:pointer; } .mclu-ic .mclu:hover { border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent), 0 2px 10px rgba(0,0,0,.4); }
.leaflet-tooltip.tole-tip { background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:8px 10px; box-shadow:0 10px 30px rgba(0,0,0,.45); white-space:normal; }
.leaflet-tooltip.tole-tip::before { display:none; }
.tole-l { min-width:240px; max-width:320px; font-size:12.5px; } .tole-l .tl-h { font-size:12px; margin-bottom:6px; color:var(--muted); } .tole-l .tl-h b { color:var(--ink); font-size:13.5px; }
.tole-l .tl-r { display:flex; align-items:center; gap:7px; padding:4px 2px; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); cursor:pointer; border-radius:6px; } .tole-l .tl-r:hover { background:var(--card2); }
.tole-l .tl-r .dot { width:8px; height:8px; } .tole-l .tl-r b { flex:1 1 auto; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tole-l .tl-k { display:flex; gap:5px; align-items:center; flex:none; font:600 11px var(--mono); } .tole-l .tl-k i { font-style:normal; } .tole-l .tl-k em { font-style:normal; padding:1px 6px; border-radius:99px; }
.tole-l em.y, .tole-l i.y { color:#1a1300; background:var(--warn); font-style:normal; } .tole-l em.r, .tole-l i.r { color:#fff; background:var(--bad); font-style:normal; } .tole-l .tl-h i { padding:0 6px; border-radius:99px; font-size:11px; }
.tole-l .tl-more { margin-top:6px; width:100%; border:1px dashed var(--line); background:transparent; color:var(--brand); border-radius:8px; padding:5px; font:600 12px var(--sans); cursor:pointer; }
.wlab { position:absolute; left:50%; top:50%; translate:-50% -50%; width:max-content; font:800 11px var(--sans); color:#e3f2fd; text-shadow:0 0 2px #000; letter-spacing:.05em; white-space:nowrap; text-align:center; background:rgba(8,16,26,.62); border:1px solid rgba(156,201,236,.55); border-radius:6px; padding:1px 6px; } /* v0.17.1 ②: a clear tag, not faint text */
.wlab.sm { font-size:9.5px; padding:0 4px; } .wlab .wl-n { display:none; } .wlab.tiny .wl-full { display:none; } .wlab.tiny .wl-n { display:inline; } .wlab.tiny { padding:0 5px; border-radius:99px; min-width:18px; }
.mclu.moved { border-style:dashed; } .mclu.cmp { padding:2px 7px; gap:5px; font-size:10.5px; } .mclu .dotx { width:8px; height:8px; padding:0; border-radius:50%; display:inline-block; } /* v0.17.1: zoomed out = name · count · two dots (the list on hover has the rest) */ .mclu { position:absolute; left:50%; top:50%; width:max-content; translate:-50% -50%; } /* the badge was a 120-px block: wider names spilled out (overlap not seen) and short ones left an empty tail */ .btn.tgl-w.on { border-color:var(--brand); color:var(--ink); background:var(--brand-soft); }
/* v0.17.0 (7) Milestones timeline — tracks × weeks (like the 「네팔 착지 행정 지도」 page) */
.tl { position:relative; --lbl:170px; margin-top:4px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:color-mix(in srgb, var(--card) 70%, transparent); }
.tl-row { display:grid; grid-template-columns:var(--lbl) minmax(0, 1fr); border-bottom:1px solid var(--line); position:relative; }
.tl-row:last-of-type { border-bottom:0; }
.tl-lbl { padding:10px 12px; border-right:2px solid var(--line); font-size:13px; line-height:1.3; background:color-mix(in srgb, var(--card2) 70%, transparent); position:relative; z-index:2; }
.tl-lbl b { display:block; font-weight:800; } .tl-lbl span { display:block; font:500 10.5px var(--mono); color:var(--muted); margin-top:3px; }
.tl-lane { display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); grid-auto-flow:row dense; gap:4px 0; padding:8px 0; align-content:start; position:relative; z-index:1; min-height:56px; }
.tl-head .tl-lane { padding:6px 0; min-height:0; } .tl-head .tl-lbl { font:800 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.tl-months b { text-align:center; font:800 12px var(--sans); letter-spacing:.06em; color:var(--ink); border-left:1px solid var(--line); }
.tl-wk span { text-align:center; font:600 10.5px var(--mono); color:var(--muted); } .tl-wk span.now { color:var(--bad); font-weight:800; }
.tl-bg { position:absolute; top:0; bottom:0; left:var(--lbl); right:0; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); pointer-events:none; z-index:0; }
.tl-bg i { border-right:1px solid color-mix(in srgb, var(--line) 60%, transparent); } .tl-bg i.now { background:color-mix(in srgb, var(--bad) 6%, transparent); }
.tl-bg i.dead { background:repeating-linear-gradient(135deg, transparent, transparent 5px, color-mix(in srgb, var(--muted) 18%, transparent) 5px, color-mix(in srgb, var(--muted) 18%, transparent) 10px); }
.tl-now { position:absolute; top:0; bottom:0; left:calc(var(--lbl) + (100% - var(--lbl)) * var(--f)); width:2px; background:var(--bad); z-index:3; pointer-events:none; box-shadow:0 0 8px color-mix(in srgb, var(--bad) 60%, transparent); }
.tl-now span { position:absolute; top:2px; left:4px; font:800 9.5px var(--mono); color:var(--bad); text-transform:uppercase; letter-spacing:.1em; }
.tl-bar { margin:0 3px; padding:5px 8px; border-radius:6px; border:1px solid; font:600 11.5px/1.3 var(--sans); text-align:left; cursor:pointer; min-width:0; overflow:hidden; color:var(--ink); background:var(--card2); transition:filter .12s, transform .12s; }
.tl-bar:hover { filter:brightness(1.15); transform:translateY(-1px); }
.tl-bar .tl-t { display:flex; align-items:flex-start; gap:5px; overflow:hidden; } .tl-bar .tl-t > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.tl-bar .tl-t .dot { margin-top:4px; }
.tl-bar .tl-t .dot { width:7px; height:7px; flex:none; }
.tl-bar em { display:block; font:500 10px var(--mono); font-style:normal; opacity:.85; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-ok { background:color-mix(in srgb, var(--ok) 16%, var(--card)); border-color:color-mix(in srgb, var(--ok) 60%, transparent); }
.s-acc { background:color-mix(in srgb, var(--brand) 14%, var(--card)); border-color:color-mix(in srgb, var(--brand) 60%, transparent); }
.s-wait { background:color-mix(in srgb, var(--warn) 15%, var(--card)); border-color:color-mix(in srgb, var(--warn) 60%, transparent); }
.s-risk { background:color-mix(in srgb, var(--bad) 16%, var(--card)); border-color:color-mix(in srgb, var(--bad) 65%, transparent); }
.tl-none { padding:8px 12px; }
/* v0.17.2 (5): the timeline scrolls sideways — weeks keep their width, board names stay put, the scroll bar is always visible (macOS hides plain ones) */
.tl-scroll { overflow-x:auto; overflow-y:hidden; border:1px solid var(--line); border-radius:12px; margin-top:4px; scrollbar-width:none; } /* v0.17.3 (4): a Mac hid the native bar → our own .tl-sbar under the strip */
.tl-scroll .tl { border:0; border-radius:0; overflow:visible; margin-top:0; width:max-content; min-width:100%; }
.tl-scroll .tl-lane, .tl-scroll .tl-bg { grid-template-columns:repeat(var(--n), minmax(100px, 1fr)); }
.tl-scroll .tl-lbl { position:sticky; left:0; z-index:4; background:var(--card2); }
.tl-scroll::-webkit-scrollbar { display:none; }
.tl-scroll .tl-bar { overflow:clip; } .tl-scroll .tl-bar .tl-t, .tl-scroll .tl-bar em { position:sticky; left:calc(var(--lbl) + 6px); width:fit-content; max-width:100%; } /* v0.17.3 (4): a bar that starts left of the window keeps its name readable (overflow:clip is not a scroll box, so the name can stick) */
.tl-scroll .tl-months b span { display:inline-block; position:sticky; left:calc(var(--lbl) + 8px); right:8px; } /* …and so does the month */
.tl-sbar { position:relative; height:16px; margin-top:8px; border-radius:9px; background:color-mix(in srgb, var(--line) 60%, transparent); cursor:pointer; touch-action:none; user-select:none; } .tl-sbar.off { display:none; }
.tl-sbar i { position:absolute; top:3px; bottom:3px; left:0; width:48px; border-radius:6px; background:color-mix(in srgb, var(--brand) 70%, var(--line)); cursor:grab; } .tl-sbar i:hover, .tl-sbar i.drag { background:var(--brand); } .tl-sbar i.drag { cursor:grabbing; }
.tl-panel .glegend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12px; color:var(--muted); align-items:center; }
.tl-panel .glegend .lg { display:inline-block; width:22px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px; border:1px solid; }
.tl-panel .glegend .lg.dead { background:repeating-linear-gradient(135deg, transparent, transparent 3px, var(--muted) 3px, var(--muted) 5px); border-color:var(--line); }
.tl-panel .glegend .dot, .tl-bar .tl-t .dot { display:inline-block; width:8px; height:8px; margin-right:2px; }
.board .ms-view { margin-right:8px; }
/* v0.17.3 (6) Jun's 🗑️ on a test customer: the confirm box */
.delbox { border-color:var(--bad); margin-top:10px; } .delbox .row { gap:8px; margin-top:10px; flex-wrap:wrap; } .delbox input { width:100%; max-width:260px; font-family:var(--mono); } .delbox .muted { margin-top:6px; }
/* v0.17.4 (B) desk map: the phone map's chips + a legend that hides a colour */
.mchips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 10px; }
.mchip { display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--line); background:var(--card2); border-radius:999px; padding:5px 12px; font:600 12.5px var(--sans); color:var(--ink); cursor:pointer; }
.mchip b { font:800 15px var(--mono); color:var(--c); } .mchip:hover { border-color:var(--c); }
.mchip.on { border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c); background:color-mix(in srgb, var(--c) 16%, var(--card2)); }
.mchip-sep { width:1px; height:22px; background:var(--line); margin:0 4px; }
.legend.lg-tg button { background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:2px 6px; border-radius:6px; display:inline-flex; align-items:center; gap:5px; }
.legend.lg-tg button:hover { background:var(--card2); } .legend.lg-tg button.off { opacity:.35; text-decoration:line-through; }
/* v0.17.4 (D1) phone map: ward lines + tole badges */
.rbot button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.rwlab { font:700 10.5px var(--sans); color:#1d4f7a; background:rgba(255,255,255,.8); border-radius:6px; padding:1px 5px; text-align:center; white-space:nowrap; }
.rtole { display:inline-block; font:600 11px var(--sans); color:#14324a; background:rgba(255,255,255,.94); border:1px solid #9cc9ec; border-radius:999px; padding:2px 8px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.rtole b { font-weight:800; } .rtole i { color:#d4382b; font-style:normal; font-weight:700; }
/* v0.17.4 (D2) phone calendar */
.pcal .pc-top { display:flex; align-items:center; gap:6px; margin:6px 0 10px; } .pcal .pc-ttl { flex:1; text-align:center; display:flex; flex-direction:column; line-height:1.25; } .pcal .pc-ttl b { font-size:16px; } .pcal .pc-ttl .muted { font-size:11.5px; }
.pcal .pc-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:3px; }
.pcal .pc-wd { text-align:center; font:700 10.5px var(--sans); color:var(--muted); padding:2px 0; } .pcal .pc-wd.sat { color:var(--bad); }
.pcal .pc-c { border:1px solid var(--line); background:var(--card); border-radius:8px; min-height:54px; padding:3px 1px; display:flex; flex-direction:column; align-items:center; gap:1px; font:inherit; color:var(--ink); cursor:pointer; }
.pcal .pc-c b { font-size:14px; line-height:1.1; } .pcal .pc-c small { font-size:9.5px; color:var(--muted); line-height:1; }
.pcal .pc-c .pc-m { display:flex; flex-direction:column; align-items:center; font-size:9.5px; line-height:1.15; } .pcal .pc-c .pc-m i { font-style:normal; white-space:nowrap; }
.pcal .pc-c.out { opacity:.38; } .pcal .pc-c.sat b { color:var(--bad); }
.pcal .pc-c.off { background:repeating-linear-gradient(135deg, transparent, transparent 4px, color-mix(in srgb, var(--bad) 15%, transparent) 4px, color-mix(in srgb, var(--bad) 15%, transparent) 8px); }
.pcal .pc-c.today { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); } .pcal .pc-c.sel { background:color-mix(in srgb, var(--brand) 18%, var(--card)); border-color:var(--brand); }
.pcal .pc-leg { margin:8px 0 4px; font-size:11.5px; } .pcal .pc-leg .sw { display:inline-block; width:14px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; border:1px solid var(--line); }
.pcal .pc-leg .sw.off { background:repeating-linear-gradient(135deg, transparent, transparent 2px, color-mix(in srgb, var(--bad) 40%, transparent) 2px, color-mix(in srgb, var(--bad) 40%, transparent) 4px); }
.pcal .pc-day { margin-top:12px; } .pcal .pc-dh { margin:2px 0 8px; font-size:17px; } .pcal .item.late .t { color:var(--bad); }

/* v0.19.1: the customers table at 1440 px — one size down so every column fits without a sideways scroll */
.cust-main .tbl { font-size:13px; } .cust-main .tbl td.mono { font-size:12px; } .cust-main .tbl td, .cust-main .tbl th { padding:8px 5px; }

/* v0.19.3 arrangement: the hero numbers carry the tile colours (the three tiles under them are gone — one place per number) · the action groups on the desk customer page */
.hero .stats button.bad b { color:#ffb4b4; } .hero .stats button.warn b { color:#ffe08a; }
.lk-lab { align-self:center; font:800 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0 4px 0 8px; }

/* v0.19.5 Today (C2): slim hero — greeting + route/memo side by side; the six tiles carry the numbers, a size up, icon chips tinted by tone */
.hero .hello { font-size:23px; }
.hero-acts { display:flex; gap:8px; margin-top:14px; }
.hero-acts .cta { flex:1.7; margin:0; }
.hero-acts .memo-btn { flex:1; margin:0; min-height:52px; border-radius:14px; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.tile { min-height:106px; padding:14px 14px 12px; gap:2px; }
.tile .n { font-size:30px; line-height:1.05; margin-top:6px; }
.tile > span:nth-child(3) { font-size:15px; font-weight:700; }
.tile.bad .ic { background:var(--bad-soft); } .tile.warn .ic { background:var(--warn-soft); } .tile.ok .ic { background:var(--ok-soft, var(--brand-soft)); }
.hero .top.sub { align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:4px; } .hero .top.sub .right { display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; } .hero .top.sub .syncpill { padding:5px 9px; font-size:12px; }

/* v0.20.0 (C2): the record changed under an open form */
.conflictbar { background:var(--warn-soft); color:var(--ink); border:1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); border-radius:12px; padding:10px 12px; font-size:13.5px; font-weight:600; margin-bottom:10px; }

/* v0.20.3 (4): the Phones page as device cards */
.fleet { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.fl-card { background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.fl-card.lv-bad { border-color:color-mix(in srgb, var(--bad) 55%, var(--line)); } .fl-card.lv-warn { border-color:color-mix(in srgb, var(--warn) 55%, var(--line)); }
.fl-h { display:flex; align-items:center; gap:10px; } .fl-h .main { flex:1; min-width:0; } .fl-h .muted { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fl-h .avatar { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font:800 15px var(--sans); color:#fff; background:linear-gradient(135deg, var(--grad-a), var(--grad-b)); flex:none; }
.fl-kv { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 10px; } .fl-kv > div { display:flex; flex-direction:column; gap:1px; } .fl-kv .k { font:700 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .fl-kv b { font-family:var(--mono); font-size:14px; } .fl-kv b.warn { color:var(--warn); } .fl-kv b.bad { color:var(--bad); }
.fl-pills { display:flex; flex-wrap:wrap; gap:6px; } .fl-needs .now-i { padding:6px 0 0; margin-top:6px; } .fl-needs .now-i .ic { font-size:13px; width:20px; } .fl-needs .now-i .t { font-size:13px; } .fl-ok { font-size:13px; color:var(--ok); font-weight:700; }

/* v0.20.8 (5) sent cards list · (7a) clickable device banner · (7b) change-log search */
.cs-sentlist { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; } .cs-sentlist .item .t { opacity:.75; }
button.warn.link { display:block; width:100%; text-align:left; cursor:pointer; font:inherit; } button.warn.link:hover { filter:brightness(1.08); }
.chg-q { display:flex; gap:8px; align-items:center; margin:6px 0 8px; } .chg-q input { flex:1; min-width:160px; max-width:420px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; }
.chg-kind { display:inline-block; min-width:1.4em; }

/* v0.21.1 sticker QR scanner */
#scanBox { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
#scanBox .scan-card { background:var(--card); color:var(--ink); border-radius:16px; padding:14px; width:min(420px,100%); display:flex; flex-direction:column; gap:10px; }
#scanBox video { width:100%; aspect-ratio:3/4; max-height:60vh; object-fit:cover; border-radius:12px; background:#000; }
#scanBox .row { gap:8px; } #scanBox label.btn input { display:none; }
.sg-row [data-scan] { flex:none; }

/* v0.21.3 (R2) Live & dispatch in one page · Money ↔ History tabs */
.dp-live { margin:6px 0 2px; font-size:12.5px; display:flex; flex-direction:column; gap:4px; } .dp-live .lv-st { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dp-live .lv-kv { margin:0; } .dp-live .lv-next { margin:0; }
.lv-tlx summary { cursor:pointer; color:var(--muted); font-size:12px; } .lv-tlx .lv-tl { max-height:180px; overflow:auto; margin-top:4px; }
.pg-tabs { grid-column: 1 / -1; margin-bottom:-4px; }

/* v0.21.5 (R3) report hubs: the tab strip under the title */
.rp-tabs { margin:4px 0 12px; } .rp-tabs button { white-space:nowrap; }
/* v0.22.4 a saved record opens read-only — ✏️ Edit at the right end of the title row (on the phone the language switch holds the very top) */
.rv-head { display:flex; align-items:center; gap:10px; }
.rv-head h1 { flex:1; min-width:0; }
.rv-head .btn.rv-edit { margin:0; flex:none; }
.rv .kv .v { white-space:pre-wrap; }
.rv .kv .v .lnk { background:none; border:0; padding:0; color:var(--brand); font:inherit; text-align:left; cursor:pointer; text-decoration:underline; }