/* RACO Marketing client portal: "Deco Foundry" (see raco-marketing-website/DESIGN.md). Phone first. */
:root, html[data-theme="night"] {
  color-scheme: dark;
  --bg:#0B0D10; --surface:#12161B; --surface-2:#1B2128; --line:#2A323B; --muted:#8A94A0; --text:#F1EDE4;
  --gold:#D8AF54; --accent:#D8AF54; --signal:#3DDBD9; --on-gold:#0B0D10;
  --grid:rgba(255,255,255,.035); --shadow:0 12px 28px -14px rgba(0,0,0,.7); --header-bg:rgba(11,13,16,.88);
  --danger:#F08A7A; --danger-bg:rgba(240,138,122,.1); --ok:#7FD6A4; --ok-bg:rgba(127,214,164,.1);
}
html[data-theme="day"] {
  color-scheme: light;
  --bg:#F1EDE4; --surface:#FFFFFF; --surface-2:#E8E2D4; --line:#D5CDBB; --muted:#5C6570; --text:#0B0D10;
  --gold:#D8AF54; --accent:#8F6D1F; --signal:#0B7F7D; --on-gold:#0B0D10;
  --grid:rgba(11,13,16,.05); --shadow:0 10px 24px -16px rgba(60,45,10,.35); --header-bg:rgba(241,237,228,.9);
  --danger:#A3321F; --danger-bg:rgba(163,50,31,.08); --ok:#1E6B45; --ok-bg:rgba(30,107,69,.09);
}
:root {
  --serif:'Cormorant','Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cut:12px; --tabbar:62px;
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--accent); }
img, svg { display:block; max-width:100%; height:auto; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:var(--gold); color:var(--on-gold); }
h1, h2, h3 { margin:0; font-weight:600; }
h1 { font:600 clamp(2rem,8vw,2.9rem)/1.05 var(--serif); letter-spacing:-.01em; margin-bottom:8px; text-wrap:balance; }
h2 { font:600 1.65rem/1.1 var(--serif); margin-bottom:8px; }
h3 { font:600 1.05rem/1.3 var(--sans); }
p { margin:0 0 12px; }
.muted { color:var(--muted); }
.num { font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; }
.eyebrow { font:500 .78rem/1.2 var(--mono); letter-spacing:.06em; color:var(--accent); margin:0 0 6px; }
.nowrap { white-space:nowrap; }

/* header */
.topbar { position:sticky; top:0; z-index:20; background:var(--header-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top); }
.topbar-in { max-width:1100px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; gap:16px; min-height:56px; }
.brand { display:block; margin-right:auto; }
.logo { height:32px; width:auto; }
.logo-day, .when-day { display:none; }
html[data-theme="day"] .logo-night, html[data-theme="day"] .when-night { display:none; }
html[data-theme="day"] .logo-day, html[data-theme="day"] .when-day { display:inline-flex; }
.when-night, .when-day { align-items:center; gap:10px; }
.topnav { display:none; }
.theme-form { margin:0; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 10px; background:transparent; color:var(--text); border:1px solid var(--line); border-radius:999px; font:inherit; font-weight:500; cursor:pointer; transition:border-color .2s; }
.theme-toggle:hover { border-color:var(--gold); }
.theme-toggle.with-label { border-radius:0; padding:0 18px; min-height:46px; }

/* layout */
.wrap { max-width:1100px; margin:0 auto; padding:20px 16px calc(var(--tabbar) + 32px + env(safe-area-inset-bottom)); }
.wrap > section, .wrap > .card { margin-bottom:28px; }
.hello { margin-bottom:20px; }
.hello p { margin:0; word-break:break-all; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.section-head h2 { margin:0; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.row.head { margin-bottom:4px; }
.narrow { max-width:460px; margin:16px auto; } .center { text-align:center; }
.grid { display:grid; grid-template-columns:1fr; gap:14px; }
.kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 16px; }

/* cards: surface, 1px line, one clipped corner, gold-tinted border on hover */
.card { --edge:var(--line); position:relative; background:var(--surface); border:1px solid var(--edge); padding:18px; box-shadow:var(--shadow); transition:border-color .2s, background .2s; color:inherit; text-decoration:none; }
.card::after { content:""; position:absolute; top:-1px; right:-1px; width:var(--cut); height:var(--cut); pointer-events:none;
  background:linear-gradient(to bottom left, var(--bg) 0 calc(50% - .5px), var(--edge) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.card:hover { --edge:color-mix(in srgb, var(--gold) 55%, var(--line)); }
.card.list { padding:0; list-style:none; margin:0 0 20px; }
.card.center p:last-child { margin-bottom:0; }
a.card:hover { background:var(--surface-2); }
.kpi { display:flex; flex-direction:column; gap:2px; padding:14px; min-width:0; }
.kpi-label { font-size:.82rem; line-height:1.3; color:var(--muted); }
.kpi-value { font-size:1.9rem; line-height:1.2; color:var(--text); }
.delta { font-size:.78rem; line-height:1.35; color:var(--muted); }
.service { display:flex; flex-direction:column; gap:10px; }
.service p { margin:0; }
.service-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.service-more { margin-top:auto; padding-top:4px; font:500 .88rem/1.2 var(--sans); color:var(--accent); }
a.service:hover .service-more { text-decoration:underline; }
.service .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.service.inactive { background:transparent; box-shadow:none; }
.service.inactive h3 { color:var(--muted); }
.tag { font:500 .72rem/1 var(--mono); color:var(--muted); border:1px solid var(--line); padding:4px 8px; white-space:nowrap; }
.service:not(.inactive) .tag { color:var(--signal); border-color:color-mix(in srgb, var(--signal) 40%, var(--line)); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px 14px; margin:0; }
.stats div { min-width:0; } .stats dt { font-size:.78rem; color:var(--muted); } .stats dd { margin:0; font-size:1.2rem; color:var(--text); }
.cta { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.cta h2 { margin-bottom:2px; } .cta p { margin:0; }
.attention { border:2px solid var(--danger); border-left-width:6px; background:color-mix(in srgb, var(--danger) 12%, var(--surface)); padding:16px; }
.attention h2 { font-size:1.35rem; color:var(--danger); }
.attention ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.attention li { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* lists */
.list li + li { border-top:1px solid var(--line); }
.row-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:12px 16px; color:inherit; text-decoration:none; }
.row-link:hover { background:var(--surface-2); }
.row-main { display:flex; flex-direction:column; min-width:0; }
.row-main strong { font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.clamp { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem; }
.more { display:flex; gap:12px; flex-wrap:wrap; }
.facts { display:grid; grid-template-columns:1fr; gap:2px 16px; margin:0; }
.facts dt { color:var(--muted); font-size:.82rem; margin-top:10px; } .facts dt:first-child { margin-top:0; }
.facts dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }

/* buttons: gold fill, clipped top-right corner */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; background:var(--gold); color:var(--on-gold); border:0; font:600 1rem/1.2 var(--sans); text-decoration:none; text-align:center; cursor:pointer; position:relative;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); transition:filter .2s, background .2s; }
.btn:hover { filter:brightness(1.08); }
.btn-ghost { background:transparent; color:var(--accent); }
/* The outline is one solid ring shape (outer minus inner, evenodd) rather than a box-shadow plus a gradient line, so
   the clipped corner's diagonal is exactly as thick as the straight sides. --bw x 0.4142 (sqrt2 - 1) places the inner
   diagonal's end points. 1.5px on high-density screens; a whole 2px on 1x screens, where 1.5px can't land on pixels. */
.btn-ghost { --bw:1.5px; }
@media (max-resolution:1.5dppx) { .btn-ghost { --bw:2px; } }
.btn-ghost::after { content:""; position:absolute; inset:0; background:var(--accent); pointer-events:none;
  clip-path:polygon(evenodd, 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 0,
    var(--bw) var(--bw), var(--bw) calc(100% - var(--bw)), calc(100% - var(--bw)) calc(100% - var(--bw)),
    calc(100% - var(--bw)) calc(var(--cut) + var(--bw) * .4142), calc(100% - var(--cut) - var(--bw) * .4142) var(--bw),
    var(--bw) var(--bw)); }
.btn-ghost:hover { background:color-mix(in srgb, var(--gold) 12%, transparent); filter:none; }
.btn-sm { min-height:44px; padding:0 16px; font-size:.92rem; }
.btn.block { width:100%; }
.card form .btn-ghost { width:100%; }

/* forms */
label { display:block; margin:0 0 14px; font-weight:500; font-size:.9rem; }
input, select, textarea { display:block; width:100%; margin-top:6px; padding:11px 12px; min-height:46px; border:1px solid var(--line); border-radius:0; font:inherit; font-size:1rem; background:var(--bg); color:var(--text); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
input[readonly] { background:var(--surface-2); color:var(--muted); }
.alert, .notice { padding:12px 14px; margin:0 0 16px; border:1px solid; font-size:.95rem; }
.alert { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.notice { background:var(--ok-bg); color:var(--ok); border-color:var(--ok); }
.preview-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 14px; margin:0 0 16px; border:1px solid var(--gold); background:var(--surface-2); font-size:.95rem; }
.preview-bar p { margin:0; flex:1 1 260px; }
.preview-bar form { margin:0; }
@media (max-width:560px) { .preview-bar form, .preview-bar .btn { width:100%; } }
.pill { display:inline-block; padding:3px 10px; font:500 .74rem/1.3 var(--mono); background:var(--surface-2); color:var(--muted); white-space:nowrap; border:1px solid var(--line); }
.pill-open, .pill-new { color:var(--accent); border-color:color-mix(in srgb, var(--gold) 50%, var(--line)); }
.pill-in-progress { color:var(--signal); border-color:color-mix(in srgb, var(--signal) 45%, var(--line)); }
.pill-done, .pill-resolved, .pill-closed { color:var(--ok); border-color:var(--ok); }
.pill-waiting-on-client { color:var(--accent); border-color:var(--gold); }
.thread { display:flex; flex-direction:column; gap:12px; margin:16px 0 24px; }
.bubble { max-width:92%; padding:12px 14px; border:1px solid var(--line); background:var(--surface); }
.bubble.client { align-self:flex-end; background:color-mix(in srgb, var(--gold) 10%, var(--surface)); border-color:color-mix(in srgb, var(--gold) 35%, var(--line)); }
.bubble.staff { align-self:flex-start; }
.bubble .meta { font-size:.8rem; color:var(--muted); margin-bottom:4px; } .bubble .text { white-space:pre-wrap; overflow-wrap:anywhere; }

/* signed-out pages: one faint blueprint grid */
body.auth::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 0, transparent 72%); mask-image:radial-gradient(ellipse at 50% 30%, #000 0, transparent 72%); }
body.auth .wrap { padding-bottom:48px; }

/* bottom tab bar (phones) */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(5,1fr); background:var(--header-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tabbar a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:var(--tabbar); padding:6px 0; color:var(--muted); text-decoration:none; font-size:.72rem; font-weight:500; }
.tabbar a.active { color:var(--accent); }
.tabbar a.active .ico { stroke-width:2.1; }

/* tablet and up: top nav, multi-column cards */
@media (min-width:768px) {
  body { font-size:17px; }
  .logo { height:38px; }
  .topbar-in { padding:10px 24px; }
  .topnav { display:flex; gap:4px; margin-right:8px; }
  .topnav a { display:flex; align-items:center; min-height:44px; padding:0 14px; color:var(--muted); text-decoration:none; font-weight:500; border-bottom:2px solid transparent; }
  .topnav a:hover { color:var(--text); }
  .topnav a.active { color:var(--accent); border-color:var(--gold); }
  .tabbar { display:none; }
  .wrap { padding:32px 24px 64px; }
  .kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .kpi { padding:18px; } .kpi-value { font-size:2.2rem; }
  .btn.block { width:auto; min-width:180px; }
  .facts { grid-template-columns:max-content 1fr; gap:10px 24px; } .facts dt { margin-top:0; }
  .bubble { max-width:75%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
.narrow p.muted a { display:inline-block; padding:12px 0; }

.auth-alt { margin-top: 20px; }

/* service detail: modal sheet on Home, plain page at /services/{key} */
.back { margin:0 0 10px; } .back a { display:inline-block; padding:8px 0; }
.small { font-size:.85rem; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tag-ok { color:var(--signal); border-color:color-mix(in srgb, var(--signal) 40%, var(--line)); }
.detail { padding:20px; }
.block { margin:24px 0 0; } .block:first-child { margin-top:0; }
.block h3 { margin-bottom:8px; font-size:1.05rem; }
.stat-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.tile { display:flex; flex-direction:column; gap:2px; padding:14px; background:var(--surface-2); border:1px solid var(--line); min-width:0; }
.tile .kpi-value { font-size:1.7rem; }
.spark { width:100%; max-width:360px; height:64px; color:var(--signal); }
.spark rect { fill:currentColor; } .spark rect.zero { opacity:.3; }
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:.92rem; }
table.data th, table.data td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; font-weight:400; }
table.data thead th { color:var(--muted); font-size:.78rem; font-weight:500; white-space:nowrap; }
table.data tbody th { color:var(--text); font-weight:500; }
table.data .r { text-align:right; } table.data td.num { white-space:nowrap; }
table.data .pg { overflow-wrap:anywhere; }
.block .stats { margin-bottom:12px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.block .eyebrow { margin-bottom:4px; }
.stars { color:var(--gold); letter-spacing:.08em; white-space:nowrap; } .stars .dim { opacity:.3; }
.reviews { list-style:none; margin:0; padding:0; }
.reviews li { padding:12px 0; border-top:1px solid var(--line); } .reviews li:first-child { border-top:0; padding-top:0; }
.review-top { display:flex; align-items:center; gap:4px 12px; flex-wrap:wrap; }
.review-top .pill { margin-left:auto; }
.review-text { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.review-quote { border-left:3px solid var(--gold); }
.confirm { border-color:var(--gold); background:color-mix(in srgb, var(--gold) 9%, var(--surface)); }
.seg { display:flex; gap:8px; flex-wrap:wrap; margin:0; }
.seg-btn { min-height:46px; padding:0 18px; background:transparent; color:var(--text); border:1px solid var(--line); font:500 .95rem/1.2 var(--sans); cursor:pointer; }
.seg-btn:hover { border-color:var(--gold); }
.seg-btn.on { border-color:var(--gold); background:color-mix(in srgb, var(--gold) 14%, var(--surface)); color:var(--accent); }
.mode h2 { font-size:1.35rem; }

dialog.sheet { padding:0; margin:auto; width:min(760px, calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 64px); color:var(--text); background:var(--bg); border:1px solid var(--line); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); overflow:hidden; }
dialog.sheet[open] { display:flex; flex-direction:column; }
dialog.sheet::backdrop { background:rgba(5,7,9,.72); }
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface); }
.sheet-head h2 { margin:0; }
.sheet-close { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-6px -8px -6px 0; background:transparent; color:var(--text); border:1px solid var(--line); cursor:pointer; }
.sheet-close:hover { border-color:var(--gold); }
.sheet-body { overflow-y:auto; overscroll-behavior:contain; padding:20px; flex:1; }
.sheet-body:focus { outline:none; }
body.modal-open { overflow:hidden; }
@media (max-width:767px) {
  dialog.sheet { width:100vw; height:100dvh; max-height:100dvh; border:0; }
  .sheet-head { padding:calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .sheet-body { padding:16px 16px calc(24px + env(safe-area-inset-bottom)); }
}
@media (min-width:768px) {
  .detail { padding:28px; }
  .service { padding:22px; }
}

table.data th, table.data td { vertical-align:baseline; }
@media (max-width:767px) { .kpis > :last-child:nth-child(odd) { grid-column:1 / -1; } }
@media (min-width:768px) {
  .kpis[data-count="1"] { grid-template-columns:minmax(0,1fr); }
  .kpis[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpis[data-count="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpis[data-count="5"] { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .kpis[data-count="5"] > :nth-child(-n+3) { grid-column:span 2; }
  .kpis[data-count="5"] > :nth-child(n+4) { grid-column:span 3; }
}
@media (min-width:1024px) { .kpis[data-count="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.wrap > h1 + .card, .wrap > h1 + section, .wrap > h1 + form { margin-top:16px; }

/* Completed requests: collapsed under a divider */
details.completed { margin-top: 28px; }
details.completed > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-weight: 600; font-size: 15px; padding: 10px 0; min-height: 44px;
}
details.completed > summary::-webkit-details-marker { display: none; }
details.completed > summary::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
details.completed > summary::before { content: "▸"; color: var(--gold); transition: transform .2s; }
details.completed[open] > summary::before { transform: rotate(90deg); }
details.completed > .card { margin-top: 12px; }