/* luci-shell/1 : shared structure + components for every Luci app and HQ. Looks live in patterns/<id>/look.css */
:root{--luci-shell:1;--accent:#2563eb;--bg:#f7f7f8;--surface:#fff;--text:#111827;--muted:#4b5563;--line:#e5e7eb;--ok:#15803d;--warn:#b45309;--bad:#b91c1c;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--r:12px;--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
/* phone-first type: small text is 2-4pt bigger on phones than desktop */
--fs-small:15px;--fs-body:18px;--fs-h2:21px;--fs-h1:26px;--fs-kpi:32px;--tap:48px}
@media (min-width:900px){:root{--fs-small:12px;--fs-body:15px;--fs-h2:18px;--fs-h1:22px;--fs-kpi:28px;--tap:40px}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs-body)/1.5 var(--font);color:var(--text);background:var(--bg)}
h1,h2,h3{margin:0;line-height:1.25}h1,.h-title{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}p{margin:0}
a{color:var(--accent)}.small{font-size:var(--fs-small)}.muted{color:var(--muted)}.up{color:var(--ok)}.down{color:var(--bad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.stack{display:flex;flex-direction:column;gap:var(--s3)}.grow{flex:1;display:flex;flex-direction:column;min-width:0}
.appbar,.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4)}
.topbar{padding:var(--s4) 0}.tools{display:flex;gap:var(--s2);flex-wrap:wrap}
.content{padding:0 var(--s4) calc(var(--s6)*3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.btn{min-height:var(--tap);padding:0 var(--s4);border-radius:10px;border:1px solid var(--line);background:var(--surface);font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-danger{color:var(--bad)}.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}.btn.small{min-height:36px;font-size:var(--fs-small)}
.icon-btn{min-width:var(--tap);min-height:var(--tap);border:0;background:none;font-size:1.2em;cursor:pointer}
.field{width:100%;min-height:var(--tap);padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--surface)}
.field[aria-invalid=true]{border-color:var(--bad)}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:var(--s2)}
.option{display:flex;gap:var(--s3);align-items:center;min-height:var(--tap);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer}
.option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.chips{display:flex;gap:var(--s2);overflow-x:auto}.chip{min-height:40px;padding:0 var(--s4);border:1px solid var(--line);border-radius:999px;background:var(--surface);display:inline-flex;align-items:center;font:inherit;font-size:var(--fs-small);text-decoration:none;color:inherit}
.chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:var(--fs-small);background:#e0f2fe;color:#075985}.pill.warn{background:#fef3c7;color:#92400e}
.list{list-style:none;margin:0;padding:0}.row{display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.row[aria-current=true]{background:color-mix(in srgb,var(--accent) 10%,transparent)}.row.unread b::after{content:" \2022";color:var(--accent)}
.avatar{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,#fff);display:grid;place-items:center;font-weight:600;font-size:var(--fs-small);flex:none}.avatar.lg{width:56px;height:56px}
.kpi-value{font-size:var(--fs-kpi);font-weight:700}.section-head{display:flex;justify-content:space-between;align-items:baseline}
.grid-cards{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:0}.facts dt{color:var(--muted)}.facts dd{margin:0}
.line{display:flex;justify-content:space-between}.total{font-weight:700;border-top:1px solid var(--line);padding-top:var(--s2)}
.cta-bar{position:fixed;left:0;right:0;bottom:0;padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;min-height:56px;display:grid;place-items:center;font-size:var(--fs-small);color:var(--muted);text-decoration:none}.tabbar a[aria-current=page]{color:var(--accent);font-weight:600}
.split{display:grid;gap:var(--s4)}
/* HQ shell (LuciDash/HQ template) */
.hq{display:grid;grid-template-columns:1fr;min-height:100vh}.hq-side{display:none}
.hq-main{padding:0 var(--s4) 96px;min-width:0}.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.hq-grid{display:grid;gap:var(--s4);margin-top:var(--s4)}.chart{height:180px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 25%,#fff),#fff);border-radius:8px;margin-top:var(--s3)}
.board{display:flex;flex-direction:column;gap:var(--s4)}.col{display:flex;flex-direction:column;gap:var(--s3)}.col-head{font-size:var(--fs-body)}
.filterbar{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:var(--s3);text-align:left;border-bottom:1px solid var(--line)}.num{text-align:right}
@media (max-width:899px){.table thead{position:absolute;left:-9999px}.table tr{display:block;border-bottom:1px solid var(--line);padding:var(--s2) 0}.table td{display:flex;justify-content:space-between;border:0;padding:var(--s1) var(--s2)}.table td::before{content:attr(data-label);color:var(--muted);font-size:var(--fs-small)}}
.msg{max-width:80%;padding:var(--s2) var(--s3);border-radius:14px;background:var(--bg)}.msg.out{align-self:flex-end;background:var(--accent);color:#fff}
.composer{display:flex;gap:var(--s2);align-items:flex-end}.record-head{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4)}
.tabs{display:flex;gap:var(--s2);border-bottom:1px solid var(--line)}.tabs [role=tab]{min-height:var(--tap);border:0;background:none;font:inherit;border-bottom:3px solid transparent}.tabs [aria-selected=true]{border-color:var(--accent);font-weight:600}
.timeline{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--s3)}.timeline li{display:flex;flex-direction:column;padding-left:var(--s3)}
.profile{display:flex;align-items:center;gap:var(--s3)}.group-title{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
@media (min-width:900px){
 .hq{grid-template-columns:240px 1fr}.hq-side{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4);background:var(--surface);border-right:1px solid var(--line)}
 .hq-side a{padding:var(--s2) var(--s3);border-radius:8px;color:inherit;text-decoration:none}.hq-side a[aria-current=page]{background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:600}
 .hq-tabs{display:none}.hq-main{padding:0 var(--s5) var(--s5)}.kpis{grid-template-columns:repeat(4,1fr)}
 .hq-grid{grid-template-columns:repeat(12,1fr)}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}
 .board{flex-direction:row;overflow-x:auto}.col{flex:0 0 300px}.split{grid-template-columns:minmax(300px,360px) 1fr}
 .content{max-width:1100px;margin:0 auto}.cta-bar{position:static;border:0;background:none;max-width:1100px;margin:0 auto}
 .tabbar{position:static;justify-content:center;border:0;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}