/* S&More — values from design-reference/SMore-design (Components.dc.html, _gen.js). Radius 0, no shadows, hairlines. */
:root {
  --p: #F7F3EC; --k: #2B3F34; --t: #963820; --t-dark: #6E2814; --cr: #ECD4B1;
  --ln: #D6CFC1; --ln2: #E6E0D4; --m1: #5B645D; --m2: #7F867F; --tb: #EFE7DA;
  --ds: #A3A99F; --sk: #E6DFD2; --body: #3F4A43;
  --sage: #6B8A80; --sage-l: #E1E7E3; --gold: #C4893F; --sand: #E8D3B0; --r: 18px; /* company-profile accents */
  --hatch: repeating-linear-gradient(135deg, rgba(150,56,32,.16) 0 2px, var(--p) 2px 8px);
  --hatch2: repeating-linear-gradient(135deg, rgba(150,56,32,.07) 0 2px, var(--p) 2px 8px);
  --ph: repeating-linear-gradient(45deg, #E9E2D5 0 6px, #F1ECE2 6px 12px);
  --ar: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --mo: 'IBM Plex Mono', ui-monospace, monospace;
  --side: 20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--p); color: var(--k); font: 400 14px var(--ar); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; justify-content: flex-start; }
button:disabled, .is-disabled { opacity: .4; cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
img { display: block; }
.mono { font-family: var(--mo); font-weight: 500; }
bdi { unicode-bidi: isolate; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- logo / top bar ---------- */
.lockup { height: 28px; width: auto; object-fit: contain; flex-shrink: 0; }
.mark { height: 30px; width: auto; object-fit: contain; flex-shrink: 0; }
.topbar { padding: 12px var(--side); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar .who { font: 500 13px var(--ar); color: var(--m1); }
.menu-btn { width: 40px; height: 40px; border: 1.5px solid var(--k); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.menu-btn::before { content: ''; width: 16px; height: 8px; border-top: 1.5px solid var(--k); border-bottom: 1.5px solid var(--k); }

/* ---------- headers ---------- */
.hdr { padding: 8px var(--side) 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.hdr-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crumb { font: 500 12px var(--ar); color: var(--m2); display: flex; gap: 8px; flex-wrap: wrap; }
.crumb a:hover { color: var(--k); text-decoration: underline; }
.title { font: 600 23px/1.35 var(--ar); text-wrap: pretty; margin: 0; }
.title-lg { font: 600 24px var(--ar); margin: 0; }
.sub { font: 400 13px/1.6 var(--ar); color: var(--m1); }
.hdr-client { padding: 8px var(--side) 16px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--ln); flex-shrink: 0; }
.kicker { font: 500 12px var(--ar); color: var(--m2); }

/* ---------- buttons ---------- */
.btn-p { flex: 1; min-height: 48px; background: var(--t); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 15px var(--ar); padding: 0 16px; white-space: nowrap; text-align: center; }
.btn-p:hover:not(:disabled) { background: var(--t-dark); }
.btn-s { min-height: 48px; padding: 0 16px; border: 1.5px solid var(--k); display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 14px var(--ar); white-space: nowrap; text-align: center; }
.btn-s:hover:not(:disabled) { background: var(--tb); }
.btn-d { min-height: 48px; padding: 0 16px; border: 1.5px solid var(--t); color: var(--t); display: flex; align-items: center; justify-content: center; font: 600 15px var(--ar); white-space: nowrap; }
.btn-d:hover:not(:disabled) { background: rgba(150,56,32,.06); }
.btn-sm { height: 36px; padding: 0 12px; border: 1.5px solid var(--k); display: flex; align-items: center; font: 500 13px var(--ar); flex-shrink: 0; white-space: nowrap; }
.btn-sm:hover { background: var(--tb); }
.btn-u { font: 500 14px var(--ar); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.btn-u:hover { color: var(--t); }
.btn-row .btn-u, .bar .btn-u, .sheet .btn-u { min-height: 44px; min-width: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; } /* comfortable tap area */
.lnk { font: 600 13px var(--ar); color: var(--t); }
.lnk:hover { color: var(--t-dark); text-decoration: underline; }
.lnk-m { font: 500 13px var(--ar); color: var(--m1); }
.lnk-m:hover { color: var(--k); text-decoration: underline; }
.spin { width: 10px; height: 10px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; gap: 16px; align-items: center; }
.btn-row-8 { display: flex; gap: 8px; }

/* fixed bottom action bar */
.bar { padding: 12px var(--side); border-top: 1px solid var(--ln); display: flex; gap: 12px; align-items: center; flex-shrink: 0; background: var(--p); }

/* ---------- fields ---------- */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > label, .fld-label { font: 500 12px var(--ar); color: var(--m1); }
.box { min-height: 48px; border: 1.5px solid var(--ln); padding: 0 14px; display: flex; align-items: center; gap: 8px; background: transparent; }
.box:focus-within { border-color: var(--k); }
.box input, .box select, .box textarea { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: 400 15px var(--ar); color: var(--k); padding: 0; height: 45px; unicode-bidi: plaintext; }
.box select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.box .suffix { font: 500 12px var(--ar); color: var(--m1); flex-shrink: 0; }
.box.multi { align-items: flex-start; padding: 12px 14px; }
.box.multi textarea { height: auto; min-height: 70px; resize: vertical; font: 400 15px/1.7 var(--ar); }
.box.dis { background: var(--tb); }
.box input::placeholder, .box textarea::placeholder { color: var(--m2); }
.fld.err > label, .fld.err .fld-label { color: var(--t); }
.fld.err .box { border-color: var(--t); }
.fld .msg { font: 500 12px var(--ar); color: var(--t); }
.fld .hint { font: 400 12px var(--ar); color: var(--m2); }
.alert { border: 1.5px solid var(--t); padding: 12px 14px; font: 500 13px/1.6 var(--ar); color: var(--t); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.grid2 > * { min-width: 0; }
.form { display: flex; flex-direction: column; gap: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.5 var(--ar); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .sq { width: 14px; height: 14px; border: 1.5px solid var(--k); margin-top: 3px; flex-shrink: 0; }
.check input:checked + .sq { background: var(--k); }
.check input:focus-visible + .sq { outline: 2px solid var(--t); outline-offset: 2px; }
.rules { display: flex; flex-direction: column; gap: 8px; font: 500 13px var(--ar); }
.rules div { display: flex; gap: 10px; align-items: center; color: var(--m2); }
.rules div::before { content: ''; width: 12px; height: 12px; border: 1.5px solid var(--k); flex-shrink: 0; }
.rules div.ok { color: var(--k); }
.rules div.ok::before { background: var(--k); }

/* line tabs */
.lines { display: flex; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); font: 500 13px var(--ar); white-space: nowrap; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.lines::-webkit-scrollbar { display: none; }
.lines > * { flex: 1; padding: 12px 8px; text-align: center; color: var(--m1); min-width: max-content; }
.lines > * + * { border-right: 1px solid var(--ln); }
.lines > .on { box-shadow: inset 0 -2px 0 var(--t); font-weight: 600; color: var(--k); }
.lines > *:hover { color: var(--k); }
/* segmented */
.seg { display: flex; border: 1.5px solid var(--k); font: 500 13px var(--ar); white-space: nowrap; }
.seg > * { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; padding: 0 6px; }
.seg > * + * { border-right: 1.5px solid var(--k); }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.seg > .on, .seg label:has(input:checked) { background: var(--k); color: var(--p); font-weight: 600; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--t); outline-offset: -4px; }
/* search */
.search { height: 44px; border: 1.5px solid var(--ln); display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.search:focus-within { border-color: var(--k); }
.search::before { content: ''; width: 10px; height: 10px; border: 1.5px solid var(--m1); border-radius: 50%; flex-shrink: 0; }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 14px var(--ar); min-width: 0; }
.search input::placeholder { color: var(--m2); }
.tools { padding: 0 var(--side) 12px; display: flex; gap: 8px; align-items: center; }
.tools .search { flex: 1; }
.sort { height: 44px; border: 1.5px solid var(--ln); padding: 0 10px; background: transparent; font: 500 13px var(--ar); color: var(--k); cursor: pointer; }

/* ---------- rows & lists ---------- */
.sec { padding: 14px var(--side) 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-shrink: 0; }
.sec > :first-child { font: 600 15px var(--ar); }
.sec .aside { font: 500 12px var(--ar); color: var(--m1); }
.pad { padding: 0 var(--side); display: flex; flex-direction: column; }
.pad-t { padding: 8px var(--side) 0; display: flex; flex-direction: column; }
.list-top { margin-top: 6px; border-top: 1px solid var(--ln); }
.prose { font: 400 14px/1.75 var(--ar); color: var(--body); text-wrap: pretty; white-space: pre-line; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ln2); }
.kv:last-child { border-bottom: 0; }
.kv > :first-child { font: 400 13px var(--ar); color: var(--m1); flex-shrink: 0; }
.kv > :last-child { font: 500 14px var(--ar); text-align: left; unicode-bidi: plaintext; }
.row-link { display: block; }
.row-link:hover, button.row-link:hover { background: var(--hatch2); }
.hatch { background: var(--hatch2); }
.person { display: flex; gap: 12px; align-items: center; padding: 12px var(--side); border-bottom: 1px solid var(--ln2); width: 100%; }
.avatar { width: 36px; height: 36px; border: 1.5px solid var(--k); display: flex; align-items: center; justify-content: center; font: 600 14px var(--ar); flex-shrink: 0; }
.person .main, .grow { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nm { font: 600 15px var(--ar); }
.nm-14 { font: 600 14px var(--ar); }
.meta { font: 400 12px var(--ar); color: var(--m1); }
.meta-11 { font: 500 11px var(--ar); color: var(--m1); }
.ends { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.tag { font: 600 11px var(--ar); border: 1px solid currentColor; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
.tag.k { color: var(--k); } .tag.m { color: var(--m1); } .tag.t { color: var(--t); }
.tag.solid { background: var(--k); color: var(--p); border-color: var(--k); }
.stamp { font: 600 11px var(--ar); border: 1.5px solid currentColor; padding: 3px 8px; flex-shrink: 0; white-space: nowrap; }
.stamp.t { color: var(--t); } .stamp.m { color: var(--m1); }
button.stamp:hover { background: var(--tb); }
.src { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font: 600 11px var(--ar); flex-shrink: 0; border: 1.5px solid var(--k); }
.src.client { background: var(--k); color: var(--p); }
.src.manual { border-style: dashed; }
.dash-row { display: flex; align-items: center; gap: 12px; padding: 14px var(--side); border-bottom: 1px solid var(--ln2); width: 100%; }
.dash-row .big { font: 500 26px var(--mo); }
.chev { font: 600 14px var(--ar); color: var(--m2); }
.file { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln2); width: 100%; }
.file .doc { width: 24px; height: 30px; border: 1.5px solid var(--k); flex-shrink: 0; }
.file.pending .doc { border: 1.5px dashed var(--m2); }
.file.pending .fname { color: var(--m2); }
.file .fname { font: 500 14px var(--ar); }
.file .fmeta { font: 500 11px var(--mo); color: var(--m1); direction: ltr; text-align: right; }
.file-l { display: flex; gap: 10px; align-items: center; min-width: 0; }
.add-link { padding: 12px 0; font: 600 14px var(--ar); color: var(--t); display: inline-flex; gap: 6px; cursor: pointer; }
.add-link:hover { text-decoration: underline; }

/* tasks */
.chk { width: 14px; height: 14px; border: 1.5px solid var(--k); flex-shrink: 0; display: flex; }
.chk.late { border-color: var(--t); }
.chk.done { background: var(--k); }
.chk.prog::before { content: ''; width: 50%; background: var(--k); }
.task { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln2); align-items: flex-start; width: 100%; }
.task .chk { margin-top: 4px; }
.task .tt { font: 500 14px/1.5 var(--ar); }
.task.done .tt { text-decoration: line-through; color: var(--m2); }
.task .dt { font: 500 11px var(--mo); color: var(--m1); flex-shrink: 0; margin-top: 3px; }
.task.late .dt, .task.late .meta-11 { color: var(--t); }
a.task:hover .tt, button.task:hover .tt { text-decoration: underline; }

/* executor big rows */
.xrow { display: flex; gap: 14px; padding: 16px var(--side); border-bottom: 1px solid var(--ln); align-items: center; }
.xrow .grow { gap: 5px; }
.xrow .xt { font: 600 16px/1.5 var(--ar); }
.xrow .xm { font: 500 12px var(--ar); color: var(--m1); }
.xrow.late .xm { color: var(--t); }
.xrow.done .xt { color: var(--m2); text-decoration: line-through; }
.xbtn { width: 92px; height: 56px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 14px var(--ar); flex-shrink: 0; border: 1.5px solid var(--k); }
.xbtn.go { background: var(--t); color: #fff; border-color: var(--t); }
.xbtn.fin { background: var(--k); color: var(--p); }
.xbtn:hover:not(:disabled) { filter: brightness(1.1); }

/* ---------- projects ---------- */
.ruler { display: flex; gap: 3px; height: 4px; flex-shrink: 0; }
.ruler.lg { height: 10px; }
.ruler > * { flex: 1; }
.ruler .done { background: var(--k); }
.ruler .cur { border: 1px solid var(--t); display: flex; }
.ruler .cur > i { background: var(--t); display: block; }
.ruler .cur.paused { border-color: var(--m1); }
.ruler .cur.paused > i { background: var(--m1); }
.ruler .todo { border: 1px dashed var(--ds); }
.proj { padding: 14px var(--side); display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--ln2); width: 100%; }
.proj .pn { font: 600 15px/1.45 var(--ar); }
.proj .pp { font: 500 22px var(--mo); flex-shrink: 0; }
.proj .foot { display: flex; justify-content: space-between; font: 500 11px var(--ar); color: var(--m1); gap: 8px; }
.proj.late .foot { color: var(--t); }
.proj.muted .pp { color: var(--m1); }
.proj:hover .pn { text-decoration: underline; }
.ribbon-tag { display: flex; gap: 6px; align-items: center; font: 600 11px var(--ar); color: var(--k); }
.ribbon-tag::before { content: ''; width: 8px; height: 12px; background: var(--k); clip-path: polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); }
.ribbon { width: 18px; height: 28px; background: var(--k); clip-path: polygon(0 0,100% 0,100% 100%,50% 76%,0 100%); flex-shrink: 0; }
.pct-block { border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); padding: 16px var(--side); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.pct-num { font: 500 60px var(--mo); line-height: 1; letter-spacing: -2px; }
.pct-num small { font-size: 28px; }
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ln); border-bottom: 1px solid var(--ln); flex-shrink: 0; }
.stage { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--p); text-align: right; }
.stage .n { font: 500 11px var(--mo); color: var(--m2); }
.stage .s { font: 500 13px var(--ar); }
.stage.todo { color: var(--m2); }
.stage.cur { background: var(--hatch); box-shadow: inset 0 0 0 2px var(--t); }
.stage.cur .n { color: var(--t); } .stage.cur .s, .stage.paused .s { font-weight: 600; }
.stage.paused { box-shadow: inset 0 0 0 2px var(--m1); }
.stage.paused .n { color: var(--m1); }
.stage.sel { outline: 2px solid var(--k); outline-offset: -2px; }
button.stage:hover .s { text-decoration: underline; }
.banner { margin-top: 8px; display: flex; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--k); align-items: flex-start; }
.arch-bar { background: var(--tb); border-bottom: 1px solid var(--ln); padding: 10px var(--side); font: 500 12px var(--ar); color: var(--m1); display: flex; justify-content: space-between; }
.boxnote { margin: 0 var(--side) 16px; border: 1.5px solid var(--m1); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.dashed-note { margin: 0 var(--side) 16px; border: 1.5px dashed var(--k); padding: 14px; display: flex; flex-direction: column; gap: 6px; }

/* client path timeline */
.path { display: flex; padding: 18px var(--side); gap: 16px; border-bottom: 1px solid var(--ln); }
.path ol { list-style: none; margin: 0; padding: 0; flex: 1; font: 500 14px var(--ar); }
.path li { position: relative; padding-right: 30px; min-height: 35px; display: flex; justify-content: space-between; gap: 8px; color: var(--m1); }
.path li::before { content: ''; position: absolute; right: 2px; top: 6px; width: 9px; height: 9px; background: var(--k); }
.path li::after { content: ''; position: absolute; right: 6px; top: 15px; bottom: -6px; width: 0; border-right: 1px solid var(--k); }
.path li:last-child::after { display: none; }
.path li.todo { color: var(--m2); }
.path li.todo::before { background: transparent; border: 1px solid var(--ds); }
.path li.todo::after, .path li.cur::after { border-right-style: dashed; border-color: var(--ds); }
.path li.cur { flex-direction: column; justify-content: flex-start; gap: 4px; min-height: 87px; color: var(--k); }
.path li.cur::before { right: 0; top: 4px; width: 13px; height: 13px; border: 2px solid var(--t); background: var(--hatch); }
.path li.cur.paused::before { border-color: var(--m1); background: var(--p); }
.path li.cur .h { font: 600 17px var(--ar); }
.path .d { font: 500 11px var(--mo); }

/* appointments */
.week { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); flex-shrink: 0; }
.day { padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.day + .day { border-right: 1px solid var(--ln2); }
.day .dn { font: 500 11px var(--ar); }
.day .dd { font: 500 16px var(--mo); }
.day .dot { width: 5px; height: 5px; }
.day .dot.on { background: var(--t); }
.day.sel { background: var(--k); color: var(--p); }
.day.sel .dot.on { background: var(--p); }
.day.today:not(.sel) .dd { text-decoration: underline; text-underline-offset: 4px; }
.day:hover:not(.sel) { background: var(--tb); }
.day.out { color: var(--ds); }
.month-nav { display: flex; gap: 8px; }
.month-nav button { width: 36px; height: 36px; border: 1.5px solid var(--k); display: flex; align-items: center; justify-content: center; font: 600 14px var(--ar); }
.month-nav button:hover { background: var(--tb); }
.appt { display: flex; gap: 14px; padding: 12px var(--side); border-bottom: 1px solid var(--ln2); align-items: flex-start; width: 100%; }
.appt .tm { font: 500 13px var(--mo); width: 44px; flex-shrink: 0; }
.appt .at { font: 600 14px/1.5 var(--ar); }
.appt.off .tm { color: var(--m2); text-decoration: line-through; }
.appt.off .at { color: var(--m2); }
.appt .note { font: 500 11px var(--ar); color: var(--t); }
.appt:hover .at { text-decoration: underline; }
.cappt { display: flex; gap: 16px; padding: 14px var(--side); border-bottom: 1px solid var(--ln2); align-items: flex-start; }
.cappt .dcol { display: flex; flex-direction: column; align-items: center; width: 52px; flex-shrink: 0; }

/* ---------- states ---------- */
.state { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 28px 60px; gap: 12px; max-width: 560px; }
.state h2 { font: 600 20px/1.45 var(--ar); margin: 0; }
.state p { font: 400 14px/1.75 var(--ar); color: var(--m1); margin: 0; text-wrap: pretty; }
.state .acts { display: flex; margin-top: 6px; gap: 12px; }
.ico-err { width: 44px; height: 44px; border: 2px solid var(--t); display: flex; align-items: center; justify-content: center; font: 700 20px var(--ar); color: var(--t); }
.ico-lock { width: 44px; height: 44px; border: 2px solid var(--k); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.ico-lock::before { content: ''; width: 16px; height: 12px; background: var(--k); }
.ico-off { width: 44px; height: 44px; border: 2px dashed var(--k); }
.ico-ok { width: 44px; height: 44px; background: var(--k); display: flex; align-items: center; justify-content: center; color: var(--p); font: 700 20px var(--ar); }
.e-grid { display: grid; grid-template-columns: repeat(3, 28px); gap: 3px; }
.e-grid i { height: 20px; border: 1px dashed var(--ds); }
.skel { background: var(--sk); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.offline-bar { background: var(--k); color: var(--p); padding: 10px var(--side); font: 500 12px var(--ar); display: flex; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.offline-bar button { text-decoration: underline; flex-shrink: 0; }
.lockbox { margin: 16px var(--side); border: 1.5px dashed var(--m2); padding: 14px; display: flex; gap: 12px; align-items: flex-start; }

/* ---------- sheet (bottom sheet on phone, dialog on wide screens) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(27,40,33,.55); display: flex; flex-direction: column; justify-content: flex-end; z-index: 50; animation: fade .15s ease-out; }
.sheet { background: var(--p); border-top: 2px solid var(--k); padding: 20px var(--side) 32px; display: flex; flex-direction: column; gap: 16px; max-height: 92dvh; overflow-y: auto; animation: up .2s ease-out; }
.sheet-h { display: flex; flex-direction: column; gap: 4px; }
.sheet-h h2 { font: 600 19px var(--ar); margin: 0; }
.confirm { border: 2px solid var(--k); }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(24px); } }
.menu-list { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--side)); border-top: 1px solid var(--ln); }
.menu-list > * { display: flex; justify-content: space-between; padding: 14px var(--side); border-bottom: 1px solid var(--ln2); font: 600 15px var(--ar); width: 100%; }
.menu-list > *:hover { background: var(--tb); }
.menu-list .c { font: 500 12px var(--ar); color: var(--m1); }
.menu-list .out { color: var(--t); font-weight: 500; }
.preview { height: 180px; background: var(--ph); display: flex; align-items: center; justify-content: center; font: 400 12px var(--mo); color: var(--m1); direction: ltr; }

/* ---------- toast ---------- */
#toast-root { position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
body.no-tabbar #toast-root { bottom: 16px; }
.toast { background: var(--k); color: var(--p); padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; font: 500 13px/1.5 var(--ar); pointer-events: auto; animation: up .2s ease-out; }
.toast button { text-decoration: underline; flex-shrink: 0; color: var(--p); }
.toast.err { background: var(--t); }

/* ---------- app shells ---------- */
.shell { height: 100dvh; display: flex; flex-direction: column; }
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.tabbar { height: 64px; background: var(--tb); border-top: 1px solid var(--ln); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font: 500 11px var(--ar); color: var(--m1); flex-shrink: 0; order: 2; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.tabbar a.on { color: var(--k); font-weight: 600; }
.tabbar a:hover { color: var(--k); }
.tabbar .side-head, .tabbar .side-foot { display: none; }
/* tab icons (from _gen.js I{}) */
.ic { display: block; flex-shrink: 0; width: 14px; height: 14px; border: 1.5px solid currentColor; }
.ic i { display: block; }
.ic-appt { border-radius: 50%; }
.ic-req { border-top-width: 5px; }
.ic-task { border-width: 1.5px 0; }
.ic-file { width: 12px; }
.ic-inv { height: 10px; }
.ic-proj { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ic-proj i { border: 1px solid currentColor; }
.ic-user { border: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ic-user i:first-child { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.ic-user i:last-child { width: 12px; height: 6px; border: 1.5px solid currentColor; }
.on .ic { background: currentColor; }
.on .ic-task { background: none; border-width: 3px 0; }
.on .ic-proj, .on .ic-user { background: none; }
.on .ic-proj i:not(:last-child), .on .ic-user i { background: currentColor; }

/* bare pages (login / invite) */
.bare { min-height: 100dvh; display: flex; flex-direction: column; }
.bare-in { flex: 1; display: flex; flex-direction: column; width: 100%; }
.bare-head { padding: 40px var(--side) 28px; display: flex; flex-direction: column; gap: 28px; }
.bare-head .lockup { height: 44px; align-self: flex-start; }
.foot-note { padding: 0 var(--side) 24px; font: 400 12px/1.6 var(--ar); color: var(--m1); }

/* ---------- public site ---------- */
.pub-head { position: sticky; top: 0; z-index: 20; background: var(--p); }
.pub-nav { display: flex; gap: 18px; padding: 0 var(--side) 12px; font: 500 13px var(--ar); color: var(--m1); border-bottom: 1px solid var(--ln); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.pub-nav a { padding-bottom: 4px; }
.pub-nav a.on { color: var(--k); font-weight: 600; box-shadow: 0 2px 0 var(--t); }
.pub-nav a:hover { color: var(--k); }
.pub-nav .login { margin-right: auto; color: var(--k); }
.pub-cta { display: none; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; }
.ph { background: var(--ph); display: flex; align-items: center; justify-content: center; font: 600 12px/1.5 var(--ar); color: var(--m1); flex-shrink: 0; text-align: center; padding: 6px; }
.pub-foot { margin-top: auto; background: var(--k); color: var(--cr); border-top: 1px solid rgba(236,212,177,.18); }
.pub-foot .wrap { padding: 40px var(--side) 0; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 28px; }
.foot-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-logo { width: 104px; height: auto; }
.foot-brand p { font: 400 13px/1.8 var(--ar); margin: 0; max-width: 340px; opacity: .85; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font: 400 13px/1.6 var(--ar); min-width: 0; }
.foot-col h3 { margin: 0 0 2px; font: 600 12px var(--ar); color: var(--p); letter-spacing: .02em; }
.foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-col a[dir=ltr] { font: 500 12px var(--mo); text-align: right; }
.foot-col .off { opacity: .6; }
.foot-legal { border-top: 1px solid rgba(236,212,177,.2); padding: 16px 0 20px; display: flex; flex-wrap: wrap; gap: 6px 20px; font: 400 11px var(--ar); opacity: .7; }

/* rule cards (design system page) */
.promises { display: grid; gap: 1px; background: var(--ln); border-block: 1px solid var(--ln); }
.promises > div { background: var(--p); padding: 16px var(--side); display: flex; flex-direction: column; gap: 4px; border-right: 3px solid var(--t); }
.promises .h { font: 600 15px var(--ar); }
.promises .t { font: 400 13px/1.7 var(--ar); color: var(--m1); }

/* consultation slot picker (working days Sun–Thu, 8:00–16:00) */
.slot-pick { gap: 10px; }
.slot-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.slot-days label, .slot-times label { position: relative; cursor: pointer; border: 1.5px solid var(--ln); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.slot-days label { flex: 0 0 auto; min-width: 72px; padding: 8px 6px; gap: 2px; }
.slot-days .d { font: 600 13px var(--ar); }
.slot-days .n { font: 500 11px var(--mo); color: var(--m1); }
.slot-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot-times label { min-height: 44px; font: 500 13px var(--ar); }
.slot-times small { font: 400 10px var(--ar); color: var(--m2); }
.slot-days input, .slot-times input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.slot-days label:hover, .slot-times label:not(.off):hover { border-color: var(--k); }
.slot-days label:has(input:checked), .slot-times label:has(input:checked) { background: var(--k); border-color: var(--k); color: var(--p); }
.slot-days label:has(input:checked) .n { color: var(--cr); }
.slot-days label:has(input:focus-visible), .slot-times label:has(input:focus-visible) { outline: 2px solid var(--t); outline-offset: 2px; }
.slot-times label.off { background: var(--hatch2); color: var(--ds); cursor: not-allowed; text-decoration: line-through; }
.slot-times label.off input { cursor: not-allowed; }
.fld.err .slot-times label:not(.off) { border-color: var(--t); }
.slot-ok { border: 1.5px solid var(--k); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.slot-ok span { font: 500 12px var(--ar); color: var(--m1); }
.slot-ok b { font: 600 17px var(--ar); }
.slot-ok small { font: 400 12px var(--ar); color: var(--m2); }
.page-h { padding: 24px var(--side) 12px; display: flex; flex-direction: column; gap: 8px; }
.page-h h1 { font: 700 28px var(--ar); margin: 0; }
.page-h p { font: 400 14px/1.7 var(--ar); color: var(--m1); margin: 0; }
.svc { padding: 20px var(--side); border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 110px; }
.svc .hh { display: flex; gap: 12px; align-items: baseline; }
.svc .hh .n { font: 500 13px var(--mo); color: var(--t); }
.svc .hh h2 { font: 700 20px var(--ar); margin: 0; }
.bul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bul li { display: flex; gap: 10px; align-items: center; min-height: 32px; font: 500 13px var(--ar); }
.bul li::before { content: ''; width: 6px; height: 6px; background: var(--k); flex-shrink: 0; }
.works { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ln); border-bottom: 1px solid var(--ln); }
.works > div { background: var(--p); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.contact-kv { border-top: 1px solid var(--ln); padding: 16px var(--side); display: flex; flex-direction: column; }
.contact-kv .kv > :last-child { font: 500 13px var(--mo); }
.contact-kv a:hover { color: var(--t); }
.steps > div { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ln2); }
.steps > div:last-child { border-bottom: 0; }
.steps .n { font: 500 12px var(--mo); color: var(--t); }
.steps span:last-child { font: 500 14px/1.6 var(--ar); }


/* ---------- reports, client-file folders, intake ---------- */
.kpi-t { display: flex; flex-direction: column; border-top: 1px solid var(--ln2); }
.kpi-r { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 1fr 0.9fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--ln2); align-items: baseline; font: 500 14px var(--ar); }
.kpi-t.one .kpi-r { grid-template-columns: minmax(0, 1fr) auto; }
.kpi-r > span:not(:first-child) { text-align: left; font-size: 13px; }
.kpi-r small { color: var(--m2); font-size: 11px; }
.kpi-h { font: 500 11px var(--ar); color: var(--m1); padding-top: 6px; }
.folder-h { display: flex; gap: 8px; align-items: baseline; padding: 14px 0 4px; font: 600 13px var(--ar); color: var(--m1); border-bottom: 1px solid var(--ln); }
.folder-h .mono { font-size: 11px; color: var(--t); }
.folder-h .aside { margin-right: auto; font: 500 11px var(--mo); }
.chips { display: flex; flex-wrap: wrap; gap: 10px 18px; }
@media print {
  .tabbar, .bar, .no-print, #dev-root, #toast-root, .offline-bar, .app-top { display: none !important; }
  .shell { height: auto; display: block; } .main, .scroll { display: block; overflow: visible; }
  html, body { background: #fff; }
}

/* ---------- dev switcher (localhost only) ---------- */
#dev-root { position: fixed; left: 0; top: 45%; z-index: 90; font: 500 12px var(--ar); }
#dev-root > button { background: var(--k); color: var(--cr); padding: 4px 8px; font: 600 10px var(--mo); opacity: .75; }
#dev-root > button:hover { opacity: 1; }
.dev-panel { margin-top: 6px; background: #fff; border: 2px solid var(--k); padding: 12px; width: 250px; display: flex; flex-direction: column; gap: 8px; max-height: 80dvh; overflow: auto; }
.dev-panel h4 { margin: 4px 0 0; font: 600 12px var(--ar); color: var(--m1); }
.dev-panel .opts { display: flex; flex-wrap: wrap; gap: 4px; }
.dev-panel .opts button { border: 1px solid var(--k); padding: 4px 8px; }
.dev-panel .opts button.on { background: var(--k); color: var(--p); }

/* ---------- wider screens ---------- */
@media (min-width: 768px) {
  :root { --side: 32px; }
  .overlay { justify-content: center; align-items: center; padding: 24px; }
  .sheet { width: 100%; max-width: 560px; border: 2px solid var(--k); max-height: 88dvh; }
  #toast-root { left: auto; right: auto; inset-inline-start: 50%; transform: translateX(50%); width: min(560px, calc(100% - 24px)); bottom: 24px; }
  .works { grid-template-columns: repeat(3, 1fr); }
  .svcs { display: grid; grid-template-columns: 1fr 1fr; }
  .svcs .svc:nth-child(even) { border-right: 1px solid var(--ln); }
  .contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 32px; align-items: start; }
  .contact-grid .contact-kv { border-top: 0; border-right: 1px solid var(--ln); margin-top: 8px; }
  .form-max, .bare-in { max-width: 560px; }
  .bare-in { margin: 0 auto; }
  .bare-in .bar { border-top: 0; }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 32px; }
  .foot-brand { grid-column: auto; }
  .foot-logo { width: 120px; }
  .promises { grid-template-columns: 1fr 1fr; }
  .slot-times { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1024px) {
  .pub-head .topbar { padding-top: 16px; padding-bottom: 16px; }
  .pub-head .menu-btn { display: none; }
  .pub-head .inner { display: flex; align-items: center; max-width: 1120px; margin: 0 auto; }
  .pub-head .topbar { flex: 1; }
  .pub-nav { border-bottom: 0; padding-bottom: 0; font-size: 14px; gap: 28px; }
  .pub-head { border-bottom: 1px solid var(--ln); }
  .pub-cta { display: flex; margin-left: var(--side); }
  .pub-cta .btn-p { min-height: 40px; font-size: 14px; }
  .works { grid-template-columns: repeat(5, 1fr); }
  .promises { grid-template-columns: repeat(4, 1fr); }

  /* app: bottom tab bar becomes a side rail on the right */
  .shell { flex-direction: row; }
  .tabbar { order: 0; width: 232px; height: auto; border-top: 0; border-left: 1px solid var(--ln); grid-auto-flow: row; grid-auto-rows: min-content; grid-auto-columns: auto; align-content: start; padding: 0 0 16px; font-size: 14px; }
  .tabbar .side-head { display: block; padding: 20px 24px 24px; }
  .tabbar .side-head .lockup { height: 30px; }
  .tabbar a { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 13px 24px; }
  .tabbar a.on { background: var(--p); box-shadow: inset -3px 0 0 var(--t); }
  .tabbar .side-foot { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--ln); padding-top: 8px; }
  .tabbar .side-foot button, .tabbar .side-foot a { padding: 11px 24px; font: 500 13px var(--ar); color: var(--m1); display: flex; justify-content: space-between; }
  .tabbar .side-foot button:hover, .tabbar .side-foot a:hover { color: var(--k); background: var(--p); }
  .app-top { display: none; }
  .page-max { max-width: 1080px; }
  .dash-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0 1px; background: var(--ln); border-top: 1px solid var(--ln); }
  .dash-cols > * { background: var(--p); }
  .detail-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 32px; padding-left: var(--side); }
  .detail-cols .sec, .detail-cols .pad, .detail-cols .pad-t { padding-left: 0; }
  body.no-tabbar #toast-root { bottom: 24px; }
  #toast-root { bottom: 24px; }
}
@media (max-width: 360px) {
  .lines > * { padding: 12px 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; } }

/* ---------- official report document: real A4 pages (210 × 297 mm) ----------
   The same pages are shown on screen (scaled to fit), printed, and saved as PDF.
   Margins: 20 mm on all four sides → content box 170 × 257 mm on every page.
   Running header (pages 2+) sits 9 mm from the top; the official footer sits 7 mm from the bottom — both inside the margins. */
.a4-spec { margin: 0 auto; padding: 10px var(--side) 0; max-width: 820px; text-align: center; font: 500 12px/1.7 var(--ar); color: var(--m1); }
.a4-pages { --z: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 0 28px; }
.a4 { zoom: var(--z); width: 210mm; min-height: 297mm; box-sizing: border-box; padding: 20mm; background: #fff; position: relative; margin: 0 0 8mm; border: 1px solid var(--ln); box-shadow: 0 1px 0 var(--ln), 0 6px 18px rgba(43,63,52,.08); color: var(--k); }
.a4.flat .doc-file { text-decoration: none; }
.a4.flat { zoom: 1; height: 297mm; min-height: 0; margin: 0; border: 0; box-shadow: none; overflow: hidden; }
.a4-measure { position: absolute; left: -9999px; top: 0; visibility: hidden; display: flow-root; }
.pdf-stage { position: fixed; left: -4000px; top: 0; }
.a4-head, .a4-foot { position: absolute; left: 20mm; right: 20mm; font: 400 7.5pt/1.5 var(--ar); color: var(--m1); }
.a4-head { top: 9mm; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 1.5mm; border-bottom: .5pt solid var(--ln); }
.a4-foot { bottom: 7mm; display: flex; flex-direction: column; gap: .8mm; padding-top: 1.8mm; border-top: .75pt solid var(--k); }
.a4-foot .f1, .a4-foot .f2 { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; }
.a4-foot .f2 { color: var(--k); font-weight: 500; }
.a4-foot .mono, .a4-head .mono { font-size: 7.5pt; }
.doc { --side: 0px; font-size: 10.5pt; }
.doc .a4-body > :first-child { margin-top: 0; }
/* letterhead */
.doc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 0 4mm; }
.doc-logo { height: 13mm; width: auto; }
.doc-org { display: flex; flex-direction: column; gap: 1mm; text-align: left; font: 400 8.5pt/1.5 var(--ar); color: var(--m1); }
.doc-org strong { font: 600 10pt var(--ar); color: var(--k); }
.doc-rule { height: 1.6mm; border-top: .8mm solid var(--k); border-bottom: .3mm solid var(--t); }
.doc-draft { margin-top: 5mm; border: 1.5px solid var(--t); color: var(--t); padding: 2.2mm 3mm; font: 600 9pt var(--ar); text-align: center; }
.doc-title { padding: 7mm 0 5mm; display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; }
.doc-title > div { display: flex; flex-direction: column; gap: 1.5mm; }
.doc-title > div > span { font: 500 9pt var(--ar); color: var(--t); }
.doc-title h2 { font: 700 17pt/1.35 var(--ar); margin: 0; }
.doc-class { flex-shrink: 0; border: 1pt solid currentColor; padding: 1.8mm 3.5mm; text-align: center; font: 700 9pt/1.35 var(--ar); }
.doc-class small { font: 500 7pt var(--ar); }
.doc-class.ext { color: var(--k); }
.doc-class.int { color: var(--t); }
/* details box */
.doc-meta { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ln); border-bottom: 0; }
.doc-meta > div { display: flex; flex-direction: column; gap: 1mm; padding: 2.4mm 3mm; border-bottom: 1px solid var(--ln); }
.doc-meta > div:nth-child(odd):not(.wide) { border-left: 1px solid var(--ln); }
.doc-meta > div.wide { grid-column: span 2; }
.doc-meta > div > span:first-child { font: 500 8pt var(--ar); color: var(--m1); }
.doc-meta > div > span:last-child { font: 500 10pt var(--ar); }
/* sections */
.doc-sec { padding-top: 5mm; }
.doc .sec { padding: 0 0 1.5mm; }
.doc .sec > :first-child { border-right: 1mm solid var(--t); padding-right: 2.5mm; font-size: 11.5pt; }
.doc .sec .aside { font-size: 8.5pt; }
.doc .pad, .doc .pad-t { padding: 1mm 0 0; }
.doc .prose { font-size: 10.5pt; line-height: 1.75; }
.doc .bul li { min-height: 7mm; font-size: 10pt; }
.doc .kpi-t { border: 1px solid var(--ln); margin-top: 1.5mm; }
.doc .kpi-r { padding: 2mm 3mm; font-size: 10pt; }
.doc .kpi-r > span:not(:first-child) { font-size: 9.5pt; }
.doc .kpi-r:last-child { border-bottom: 0; }
.doc .kpi-h { background: var(--tb); font-weight: 600; color: var(--k); font-size: 8.5pt; }
.doc .kpi-t.one .kpi-r:nth-child(even) { background: #FAF6EF; }
.doc-file { font: 500 10pt var(--ar); text-decoration: underline; text-underline-offset: 3px; margin-left: 3mm; }
/* closing block */
.doc-end { padding-top: 7mm; }
.doc-sign { display: grid; grid-template-columns: 1fr 1fr 30mm; gap: 6mm; padding-top: 4mm; border-top: 1px solid var(--k); }
.doc-sign > div { display: flex; flex-direction: column; gap: 1mm; font: 400 8.5pt var(--ar); color: var(--m1); }
.doc-sign .k { font: 600 8pt var(--ar); color: var(--t); }
.doc-sign strong { font: 600 10.5pt var(--ar); color: var(--k); }
.doc-sign .line { display: block; height: 10mm; border-bottom: 1px solid var(--k); }
.doc-sign .cap { font-size: 7.5pt; }
.stamp-box { border: 1.5px dashed var(--ds); align-items: center; justify-content: center; min-height: 28mm; }
.doc-note { margin: 4mm 0; font: 400 8.5pt/1.7 var(--ar); color: var(--m1); border-right: 1mm solid var(--t); padding: .5mm 3mm .5mm 0; }
@media print {
  @page { size: A4; margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body, .shell, .main, .scroll { background: #fff !important; }
  .shell, .main, .scroll { display: block; height: auto; overflow: visible; }
  .a4-pages { --z: 1 !important; display: block; padding: 0; }
  .a4 { zoom: 1; width: 210mm; height: 297mm; min-height: 0; margin: 0; border: 0; box-shadow: none; overflow: hidden; break-after: page; }
  .a4-spec { display: none; }
  .a4:last-child { break-after: auto; }
  .doc-file { text-decoration: none; }
}

/* ---------- design system page (#/design-system) ---------- */
.ds-band { padding: 40px var(--side) 8px; border-top: 1px solid var(--ln); }
.ds-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ds-head .k { font: 500 12px var(--mo); color: var(--t); }
.ds-head h2 { font: 700 22px/1.45 var(--ar); margin: 0; }
.ds-head p { margin: 2px 0 0; font: 400 13px/1.7 var(--ar); color: var(--m1); max-width: 680px; }
.ds-band > .pad, .ds-band > .ds-space, .ds-band > .ds-form, .ds-band > .ds-type > div, .ds-band .ds-spec { padding-inline: 0; }
.ds-kicker { font: 500 12px var(--mo); color: var(--t); }
.ds-note { margin: 4px 0 0; font: 400 13px/1.7 var(--ar); color: var(--m1); max-width: 680px; }
.ds-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ln); border-block: 1px solid var(--ln); }
.ds-logos > div { background: var(--p); padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 170px; }
.ds-logos > div.dark { background: var(--k); color: var(--cr); }
.ds-logos > div.rust { background: var(--t); color: #fff; }
.ds-logos img { width: auto; max-width: 100%; object-fit: contain; }
.ds-logos span { font: 500 11px var(--ar); opacity: .8; text-align: center; }
.ds-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ln); border-block: 1px solid var(--ln); }
.ds-colors > div { background: var(--p); padding: 14px var(--side) 16px; display: flex; flex-direction: column; gap: 4px; }
.ds-colors .sw { height: 56px; border: 1px solid var(--ln); margin-bottom: 6px; }
.ds-colors .nm { font: 600 14px var(--ar); }
.ds-colors .hex { font-size: 11px; color: var(--m1); }
.ds-colors .use { font: 400 12px/1.6 var(--ar); color: var(--m2); }
.ds-type > div { padding: 16px var(--side); border-bottom: 1px solid var(--ln2); display: flex; flex-direction: column; gap: 8px; }
.ds-meta { display: flex; justify-content: space-between; gap: 12px; font: 500 11px var(--ar); color: var(--m2); }
.ds-meta .mono { font-size: 11px; }
.ds-space { padding: 0 var(--side); display: flex; flex-direction: column; }
.ds-space > div { display: grid; grid-template-columns: 120px 56px 1fr; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ln2); font: 400 13px var(--ar); color: var(--m1); }
.ds-space .bar { height: 12px; background: var(--hatch); border: 1px solid var(--t); }
.ds-grid-note { flex-direction: row !important; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; font: 400 13px var(--ar); color: var(--m1); }
.ds-grid-note b { color: var(--k); }
.ds-specs { display: grid; gap: 1px; background: var(--ln); border-block: 1px solid var(--ln); }
.ds-spec { background: var(--p); padding: 16px var(--side); display: flex; flex-direction: column; gap: 12px; }
.ds-lbl { font: 500 11px var(--ar); color: var(--m2); }
.ds-demo { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ds-specs.col .ds-demo { display: block; }
.ds-form { padding: 0 var(--side); max-width: 640px; }
.ds-rules > div { border-right-color: var(--k); }
@media (min-width: 768px) {
  .ds-logos { grid-template-columns: repeat(5, 1fr); }
  .ds-colors { grid-template-columns: repeat(4, 1fr); }
  .ds-specs { grid-template-columns: 1fr 1fr; }
  .ds-rules { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 768px) { .ds-spec:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- public site: original content in the company-profile style ---------- */
/* phone first; tablet at 600px and 768px; desktop at 1024px */
.pf { padding: 44px 0; }
.pf > .wrap { padding: 0 var(--side); }
.pf-dark { background: var(--k); color: #fff; }
.pf-soft { background: var(--sage-l); }
.ph-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; position: relative; }
.ph-head .k { font: 600 13px var(--ar); color: var(--gold); }
.ph-head h2 { font: 700 26px/1.4 var(--ar); margin: 0; }
.ph-head .rule, .pf-cta .rule { width: 80px; height: 3px; background: var(--sage); display: block; }
.pf-dark .ph-head .rule { background: var(--gold); }
.ph-head .more { font: 600 13px var(--ar); color: var(--t); margin-top: 4px; }
.ph-head .more:hover { text-decoration: underline; }
.pf-hero { background: var(--k); color: #fff; }
.pf-hero-in { display: grid; max-width: 1280px; margin: 0 auto; }
.pf-hero .txt { padding: 32px var(--side) 36px; display: flex; flex-direction: column; gap: 14px; }
.pf-hero .k { font: 600 13px var(--ar); color: var(--gold); }
.pf-hero h1 { font: 700 28px/1.4 var(--ar); margin: 0; text-wrap: balance; }
.pf-hero p { font: 400 15px/1.85 var(--ar); color: var(--sand); margin: 0; max-width: 520px; }
.pf-hero .btn-row { margin-top: 8px; flex-wrap: wrap; gap: 12px 20px; }
.pf-hero .btn-u.light { color: var(--sand); }
.pf-hero .btn-u.light:hover { color: #fff; }
.pf-hero .pic { order: -1; background: var(--sand); height: 260px; overflow: hidden; }
.pf-hero .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.method li { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px solid var(--sage); font: 600 14px/1.5 var(--ar); min-height: 52px; }
.method .n { width: 38px; height: 38px; border-radius: 50%; background: var(--sand); color: var(--k); display: flex; align-items: center; justify-content: center; font: 600 12px var(--mo); flex-shrink: 0; }
.method .last .n { background: var(--gold); color: #fff; }
.svc5 { display: grid; gap: 12px; }
.svc5 a { border-radius: var(--r); padding: 20px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; min-height: 44px; transition: transform .15s; }
.svc5 a:hover { transform: translateY(-2px); }
.svc5 .n { grid-row: span 3; font: 700 14px var(--mo); }
.svc5 h3 { margin: 0; font: 700 19px/1.4 var(--ar); }
.svc5 p { margin: 0; font: 400 13px/1.75 var(--ar); }
.svc5 .go { font: 600 12px var(--ar); margin-top: 4px; }
.svc5 .dark { background: var(--k); color: #fff; } .svc5 .dark .n, .svc5 .dark .go { color: var(--gold); } .svc5 .dark p { color: var(--sand); }
.svc5 .sage { background: var(--sage); color: #fff; } .svc5 .sage .n, .svc5 .sage .go { color: var(--sand); }
.svc5 .sand { background: var(--sand); color: var(--k); } .svc5 .sand .n, .svc5 .sand .go { color: var(--t); } .svc5 .sand p { color: var(--body); }
.clients { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.clients a { display: flex; flex-direction: column; gap: 8px; }
.clients .tile { background: #fff; border-radius: 14px; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font: 700 14px/1.5 var(--ar); color: var(--k); border: 1.5px solid transparent; transition: border-color .15s; }
.clients a:hover .tile { border-color: var(--sage); }
.clients .tile:has(img) { padding: 0; overflow: hidden; aspect-ratio: 1; }
.clients .tile img, .works .w-logo { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.works .w-logo { border-radius: 10px; }
.clients .nm { font: 500 12px var(--ar); color: var(--m1); text-align: center; }
.pf-cta { background: var(--k); color: #fff; position: relative; overflow: hidden; }
.pf-cta::before, .pf-cta::after { content: ''; position: absolute; border-radius: 50%; left: -120px; bottom: -170px; width: 340px; height: 340px; border: 2px solid var(--sage); pointer-events: none; }
.pf-cta::after { width: 220px; height: 220px; left: -60px; bottom: -110px; border-color: var(--gold); }
.pf-cta .in { position: relative; z-index: 1; padding: 48px var(--side); display: flex; flex-direction: column; gap: 14px; }
.pf-cta h2 { font: 700 26px/1.4 var(--ar); margin: 0; }
.pf-cta p { margin: 0; font: 400 15px/1.85 var(--ar); color: var(--sand); max-width: 520px; }
.pf-cta .btn-row { max-width: 320px; margin-top: 6px; }
.pf-cta .hours { font: 500 13px var(--ar); color: var(--sand); opacity: .85; }
/* inner public pages pick up the same style */
.svcs { display: grid; gap: 12px; padding: 0 var(--side) 32px; }
.svcs .svc { border: 1.5px solid var(--ln); border-top-width: 1.5px; border-radius: var(--r); background: #fff; padding: 20px; }
.svcs .svc .hh .n { color: var(--gold); }
.works { gap: 12px; background: none; border: 0; padding: 0 var(--side) 32px; }
.works > div { border-radius: 14px; background: #fff; }
.works .ph { border-radius: 10px; }
.contact-kv { border-radius: var(--r); }
@media (min-width: 600px) {
  .method { grid-template-columns: repeat(3, 1fr); }
  .svc5 { grid-template-columns: 1fr 1fr; }
  .svc5 a:last-child { grid-column: 1 / -1; }
  .clients { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .pf { padding: 64px 0; }
  .ph-head h2 { font-size: 32px; }
  .ph-head .more { position: absolute; left: 0; bottom: 14px; margin: 0; }
  .pf-hero-in { grid-template-columns: 1.1fr 1fr; min-height: 460px; }
  .pf-hero .txt { padding: 48px 32px 48px var(--side); justify-content: center; }
  .pf-hero h1 { font-size: 36px; }
  .pf-hero .pic { order: 0; height: auto; }
  .svcs { grid-template-columns: 1fr 1fr; }
  .svcs .svc:nth-child(even) { border-right: 1.5px solid var(--ln); }
  .pf-cta .in { padding: 72px var(--side); }
  .pf-cta h2 { font-size: 34px; }
}
@media (min-width: 1024px) {
  .pf-hero-in { min-height: 540px; }
  .pf-hero .txt { padding: 64px 48px; }
  .pf-hero h1 { font-size: 44px; }
  .method { grid-template-columns: repeat(6, 1fr); }
  .method li { flex-direction: column; align-items: flex-start; border-bottom: 0; border-top: 1.5px solid var(--sage); padding: 16px 0 0; }
  .svc5 { grid-template-columns: repeat(5, 1fr); }
  .svc5 a { grid-template-columns: 1fr; align-content: start; padding: 24px 20px; min-height: 220px; }
  .svc5 a:last-child { grid-column: auto; }
  .svc5 .n { grid-row: auto; }
  .svc5 .go { margin-top: auto; padding-top: 12px; }
  .clients { grid-template-columns: repeat(5, 1fr); }
  .pf-cta::before { width: 480px; height: 480px; left: -150px; bottom: -240px; }
  .pf-cta::after { width: 320px; height: 320px; left: -70px; bottom: -160px; }
}

/* ---------- admin dashboard: office-wide overview ---------- */
.ov-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ln); border-block: 1px solid var(--ln); margin-top: 10px; }
.ov-tile { background: var(--p); padding: 14px var(--side); display: flex; flex-direction: column; gap: 2px; min-height: 96px; }
.ov-tile:hover { background: var(--tb); }
.ov-tile .l { font: 500 12px var(--ar); color: var(--m1); }
.ov-tile .n { font: 500 26px var(--mo); line-height: 1.3; }
.ov-tile .n.hot { color: var(--t); }
.ov-tile .s { font: 400 11px/1.5 var(--ar); color: var(--m2); }
.ov-bars { padding: 8px var(--side) 4px; display: flex; flex-direction: column; gap: 2px; }
.ov-bar { display: grid; grid-template-columns: 96px 1fr 32px; gap: 10px; align-items: center; min-height: 32px; font: 500 13px var(--ar); }
.ov-bar:hover .l { text-decoration: underline; }
.ov-bar .track { height: 10px; background: var(--sk); position: relative; }
.ov-bar .fill { position: absolute; inset-block: 0; right: 0; background: var(--k); min-width: 2px; }
.ov-bar .fill.t { background: var(--t); } .ov-bar .fill.m { background: var(--ds); }
.ov-bar .v { text-align: left; font-size: 13px; }
.ov-team { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ln2); }
.ov-team:last-child { border-bottom: 0; }
.ov-cnt { font-size: 18px; } .ov-cnt.hot { color: var(--t); }
.ov-appt { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ln2); }
.ov-appt:last-child { border-bottom: 0; }
.ov-appt .mono { font-size: 12px; color: var(--t); }
.ov-feed a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ln2); font: 400 13px/1.6 var(--ar); }
.ov-feed a:last-child { border-bottom: 0; }
.ov-feed .d { font-size: 11px; color: var(--m2); min-width: 36px; }
.ov-feed .tag { flex-shrink: 0; }
@media (min-width: 768px) {
  .ov-tiles { grid-template-columns: repeat(4, 1fr); }
  .ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
}

/* ---------- office finance (admin only) ---------- */
.fin-month { padding: 0 var(--side) 10px; font: 600 14px var(--ar); color: var(--t); }
.fin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--side); border-bottom: 1px solid var(--ln); font: 500 13px var(--ar); color: var(--m1); flex-wrap: wrap; }
.fin-bar b { color: var(--k); font-size: 15px; }
.fin-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px var(--side); border-bottom: 1px solid var(--ln2); text-align: right; }
.fin-row:hover { background: var(--tb); }
.fin-row .d { font-size: 12px; color: var(--m2); min-width: 40px; }
.fin-row .amt { font-size: 15px; }
.fin-row .ends { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ov-tiles.fin-3 { grid-template-columns: 1fr 1fr 1fr; }
.ov-tiles.fin-3 .n { font-size: 20px; }
.ov-bar { width: 100%; text-align: right; }
.fin-trend > div { display: grid; grid-template-columns: 56px 1fr 72px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ln2); font: 500 13px var(--ar); }
.fin-trend .bars { display: flex; flex-direction: column; gap: 3px; }
.fin-trend .bars span { height: 8px; min-width: 2px; }
.fin-trend .in, .fin-legend .in { background: var(--k); }
.fin-trend .out, .fin-legend .out { background: var(--t); }
.fin-trend .mono { text-align: left; font-size: 12px; }
.neg { color: var(--t) !important; }
.fin-legend { display: flex; align-items: center; gap: 6px; padding-top: 10px; flex-wrap: wrap; }
.fin-legend span { width: 12px; height: 8px; display: inline-block; }
.fin-net { border: 1.5px solid var(--k); padding: 12px; }
.fin-net b { font-size: 18px; }
.fin-paybox { border-top: 1px solid var(--ln); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; font: 500 13px var(--ar); color: var(--m1); }
.bud-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--ln2); }
.bud-row .top { display: flex; justify-content: space-between; gap: 12px; }
.bud-row .top .mono { font-size: 13px; }
.bud-row .track { height: 10px; background: var(--sk); position: relative; display: block; }
.bud-row .fill { position: absolute; inset-block: 0; right: 0; background: var(--k); }
.bud-row .fill.t { background: var(--t); }
.ov-tile small, .fin-bar small { font-size: 11px; }
@media (max-width: 420px) { .ov-tiles.fin-3 .n { font-size: 17px; } }

/* ---------- upload: allowed file types per kind ---------- */
.file-rules { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--ln); background: var(--tb); padding: 10px 12px; font: 400 12px/1.6 var(--ar); color: var(--m1); }
.file-rules b { font: 600 13px var(--ar); color: var(--k); }
.file-safe { margin: 0; font: 400 11px/1.7 var(--ar); color: var(--m2); }

/* while a sheet is open, toasts move to the top so they never cover its buttons */
body:has(#sheet-root .overlay) #toast-root { top: 12px; bottom: auto; }