/* ===== Look & feel: the shared pieces, then two switchable header styles =====
   <html data-style="sticker|band" data-stripes="on|off"> picks the look.
   Everything else (cards, buttons, forms, tables) is shared by both styles.
   Loaded after app.css, so these rules win. */

/* ---------- Shared by both styles ---------- */
html,body{background:var(--bg)}
header.top .tagline{display:none}
a.btn{text-decoration:none}
label.f{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.btn{padding:10px 18px;min-height:44px;border-width:1.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.block{padding:12px 18px}
.card{border:1.5px solid var(--head);border-radius:12px}
.cardband{border-bottom:1.5px solid var(--head);border-radius:10px 10px 0 0;padding:11px 18px}
.list.cards button{border-radius:10px}

/* Main tabs: shared bits */
header.top nav.tabs{margin:0;box-shadow:none;background:transparent;padding:0;border-radius:0}
header.top nav.tabs button{font:600 14px var(--body);letter-spacing:0;text-transform:none;color:var(--head);border:0;border-radius:0}
header.top nav.tabs .star{color:var(--head);opacity:.7}

/* ---------- Style: sticker (default) ---------- */
/* Full width: the ribbon runs edge to edge and the page uses the whole window */
html[data-style="sticker"] body{padding:0 0 48px}
html[data-style="sticker"] .wrap{max-width:none;background:var(--bg);box-shadow:none;border-radius:0;padding:0 32px 32px;overflow:visible}
html[data-style="sticker"] .ribbon{margin:0 -32px;padding:7px 32px}
@media (max-width:640px){html[data-style="sticker"] .wrap{padding:0 14px 24px}html[data-style="sticker"] .ribbon{margin:0 -14px;padding:7px 14px}}
html[data-style="sticker"] header.top{align-items:center;gap:14px 26px;padding-block:16px;border-bottom:1.5px solid var(--head);margin-bottom:24px}
html[data-style="sticker"] .brand h1{font-size:24px;line-height:1.1;letter-spacing:-.02em}
html[data-style="sticker"] .brand h1 .nm-long i,html[data-style="sticker"] .brand h1 .nm-short i{display:inline}
html[data-style="sticker"] .beta-tag{vertical-align:3px}
html[data-style="sticker"] header.top nav.tabs{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;overflow:visible;padding:2px 4px 4px 0}
html[data-style="sticker"] header.top nav.tabs .star{display:none}
html[data-style="sticker"] header.top nav.tabs button{padding:8px 14px;border-radius:999px!important;border:1.5px solid transparent}
html[data-style="sticker"] header.top nav.tabs button:hover{background:var(--surface-2)}
html[data-style="sticker"] header.top nav.tabs button[aria-selected="true"]{background:var(--butter);border-color:var(--head);box-shadow:3px 3px 0 var(--head);color:var(--head)}
html[data-style="sticker"] .btn.primary{box-shadow:3px 3px 0 var(--olive)}
html[data-style="sticker"] .btn.primary:disabled{box-shadow:none}

/* ---------- Style: band (the pink frame and salmon tab band) ---------- */
html[data-style="band"],html[data-style="band"] body{background:var(--frame)}
html[data-style="band"] header.top{align-items:flex-end;padding-block:18px 0;border-bottom:0;margin-bottom:22px}
html[data-style="band"] header.top nav.tabs{order:10;flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:14px -24px 0;padding:0 24px;background:var(--salmon)}
html[data-style="band"] header.top nav.tabs button{padding:12px 2px 10px;border-bottom:2px solid transparent;opacity:.75}
html[data-style="band"] header.top nav.tabs button:hover{opacity:1}
html[data-style="band"] header.top nav.tabs button[aria-selected="true"]{opacity:1;border-bottom-color:var(--head)}
@media (max-width:640px){html[data-style="band"] header.top nav.tabs{margin:12px -14px 0;padding:0 14px;flex-wrap:nowrap;overflow-x:auto}html[data-style="band"] header.top nav.tabs .star{display:none}}

/* ---------- Optional: striped mat behind the client proposal preview ---------- */
html[data-stripes="on"] .tbl-wrap:has(> .proposal){margin:0;padding:28px 32px;border-radius:12px;border:1.5px solid var(--head);background:repeating-linear-gradient(90deg,var(--blue) 0 14px,var(--surface) 14px 28px)}
html[data-stripes="on"] .tbl-wrap > .proposal{border:1.5px solid var(--head);border-radius:0;box-shadow:6px 6px 0 var(--head)}
@media (max-width:640px){html[data-stripes="on"] .tbl-wrap:has(> .proposal){padding:14px}}

/* The sticker header has room for the short name only */
html[data-style="sticker"] .brand h1 .nm-long{display:none}
html[data-style="sticker"] .brand h1 .nm-short{display:inline}
@media (max-width:640px){html[data-style="sticker"] header.top nav.tabs{order:10;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 4px 6px 0}}

/* ---------- Quote tabs: folder tabs over a panel (sticker), underline tabs (band) ---------- */
.qtabs .subtabs button{font:600 14px var(--body);letter-spacing:0;text-transform:none}
html[data-style="sticker"] .qtabs .subtabs{box-shadow:none;gap:6px;padding-left:12px;overflow:visible}
html[data-style="sticker"] .qtabs .subtabs button{border:1.5px solid var(--head);border-bottom:0;border-radius:12px 12px 0 0;background:var(--surface-2);color:var(--head);padding:9px 16px}
html[data-style="sticker"] .qtabs .subtabs button[aria-selected="true"]{background:var(--surface);position:relative;top:1.5px;z-index:1}
html[data-style="sticker"] .qtabs .qpanel{background:var(--surface);border:1.5px solid var(--head);border-radius:12px;padding:20px}
html[data-style="sticker"] .qtabs .qpanel .card{background:var(--bg)}
html[data-style="band"] .qtabs .qpanel{padding-top:18px}
@media (max-width:640px){html[data-style="sticker"] .qtabs .subtabs{overflow-x:auto;padding-left:4px}html[data-style="sticker"] .qtabs .qpanel{padding:12px}}

/* ---------- Breathing room (sticker): the quote sits on one white card, nothing boxed inside it ----------
   From the "Airy on a white card" mockup: hairlines instead of boxes, taller rows, status as coloured text,
   one solid button per area and quiet text buttons for the rest. */
.btn.txt{border-color:transparent;background:transparent;color:var(--head);padding-inline:6px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--head) 35%,transparent);box-shadow:none}
.btn.txt:hover{background:transparent;text-decoration-color:var(--head)}
.st{font-weight:600;font-size:14px;white-space:nowrap}
.st.short{color:var(--rust)}.st.ok{color:var(--leaf)}.st.none{color:var(--muted)}
.qhead{align-items:flex-end;gap:16px 24px}
.qhead .qtitle{margin:8px 0 6px;font:700 44px/1.02 var(--display);color:var(--head);letter-spacing:-.02em}
.qacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.qstatus{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.qstatus select{width:auto;min-height:40px;padding:6px 10px}
@media (max-width:640px){.qhead .qtitle{font-size:32px}}

html[data-style="sticker"] .stack{gap:22px}
html[data-style="sticker"] .card{padding:24px}
html[data-style="sticker"] .cardband{margin:-24px -24px 18px;padding:12px 24px}
html[data-style="sticker"] td{padding:12px 10px}
html[data-style="sticker"] th{padding:8px 10px}
html[data-style="sticker"] .btn.primary{box-shadow:none}
html[data-style="sticker"] .qtabs .qpanel{padding:40px 44px 48px}
html[data-style="sticker"] .qpanel>.stack,html[data-style="sticker"] .qpanel .stack{gap:40px}
html[data-style="sticker"] .qpanel .split{gap:56px}
html[data-style="sticker"] .qtabs .qpanel .card{background:transparent;border:0;border-radius:0;padding:0}
html[data-style="sticker"] .qtabs .qpanel .card.sticky{position:sticky;top:16px;padding-left:40px;border-left:1px solid var(--line)}
html[data-style="sticker"] .qpanel .cardband,html[data-style="sticker"] .qpanel .cardband.pink,html[data-style="sticker"] .qpanel .cardband.yellow{background:transparent;border:0;margin:0 0 16px;padding:0}
html[data-style="sticker"] .qpanel .cardband .t,html[data-style="sticker"] .qpanel h2,html[data-style="sticker"] .qpanel h3,html[data-style="sticker"] .qpanel .ptab h3{font:italic 600 24px var(--display);color:var(--head);margin:0}
html[data-style="sticker"] .qpanel .cardband .sym{display:none}
html[data-style="sticker"] .qpanel th{font-size:11px;letter-spacing:.12em;padding:0 16px 14px 0;color:var(--muted)}
html[data-style="sticker"] .qpanel td{padding:18px 16px 18px 0;font-size:15px}
html[data-style="sticker"] .qpanel td.r,html[data-style="sticker"] .qpanel th.r{text-align:right}
html[data-style="sticker"] .qpanel td:last-child,html[data-style="sticker"] .qpanel th:last-child{padding-right:0}
html[data-style="sticker"] .qpanel tr.attn td{background:color-mix(in srgb,var(--pinktint) 55%,transparent)}
html[data-style="sticker"] .qpanel tr.attn td:first-child{padding-left:14px}
html[data-style="sticker"] .qpanel .stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
html[data-style="sticker"] .qpanel .stat{background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;padding:4px 28px}
html[data-style="sticker"] .qpanel .stat:first-child{border-left:0;padding-left:0}
html[data-style="sticker"] .qpanel .stat.hl{background:transparent}
html[data-style="sticker"] .qpanel .stat.hl .v{color:var(--leaf)}
html[data-style="sticker"] .qpanel .stat .v{font-weight:600;font-size:34px;margin-top:6px}
html[data-style="sticker"] .qpanel .notice{border-radius:10px;padding:18px 20px}
@media (max-width:900px){html[data-style="sticker"] .qtabs .qpanel .card.sticky{position:static;padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:28px}}
@media (max-width:640px){html[data-style="sticker"] .qtabs .qpanel{padding:20px 16px 28px}html[data-style="sticker"] .qpanel .stat{padding:4px 14px}html[data-style="sticker"] .qpanel .stat .v{font-size:26px}}

/* The client's answer, above the quote tabs */
.accepted{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;background:var(--leaf-soft);border:1.5px solid var(--leaf);border-radius:12px;padding:16px 20px;color:var(--ink)}
.accepted strong{font:600 18px var(--display);color:var(--ink)}

/* Quote › Proposal: settings on the left, the client's page on the right */
.ptab{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.pform{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:36px}
.pform section{display:flex;flex-direction:column;gap:14px}
.pform section+section{border-top:1px solid var(--line);padding-top:30px}
.pform h3{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pform h3 .chip{font:600 12px var(--body);font-style:normal}
.flabel{font-size:13px;font-weight:600;color:var(--muted)}
.chk{display:flex;align-items:center;gap:10px;font-size:15px;padding:4px 0;cursor:pointer}
.chk input{width:18px;height:18px;margin:0;accent-color:var(--head)}
.moodgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.moodgrid span{position:relative;aspect-ratio:1/1}
.moodgrid img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.moodgrid .icon-btn{position:absolute;top:4px;right:4px;background:rgba(255,255,255,.9);color:var(--ink);padding:2px 7px}
.share{display:flex;flex-direction:column;gap:12px}
.share input{font-size:14px;background:var(--bg)}
.pprev{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:12px}
.prev-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--muted)}
.pv-mat{border-radius:12px;padding:28px 30px;background:var(--bg);border:1px solid var(--line)}
html[data-stripes="on"] .pv-mat{border:1.5px solid var(--head);background:repeating-linear-gradient(90deg,var(--blue) 0 14px,var(--surface) 14px 28px)}
html[data-stripes="on"] .pv-mat .pv{box-shadow:6px 6px 0 var(--head)}
.pv-full{position:fixed;inset:0;z-index:60;overflow:auto;background:#F8F0DF;padding:56px 16px 48px}
.pv-full>[data-close]{position:fixed;top:12px;right:16px;z-index:1;background:#fff}
.pv-full .pv{box-shadow:6px 6px 0 #7C2320}
@media (max-width:640px){.pv-mat{padding:12px 0;border:0;background:none!important}.pv-mat .pv{box-shadow:none!important}.ptab{gap:32px}}

/* Timeline in the quote: ring dots, plain text */
html[data-style="sticker"] .qpanel .steps{gap:20px!important;font:400 14px var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
html[data-style="sticker"] .qpanel .steps li{flex-direction:row;align-items:flex-start;gap:14px}
html[data-style="sticker"] .qpanel .steps li::before{flex:none;width:10px;height:10px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px var(--head);margin-top:4px}
html[data-style="sticker"] .qpanel .steps li.done{color:var(--muted)}
html[data-style="sticker"] .qpanel .steps li.done::before{background:var(--head);opacity:.4}
html[data-style="sticker"] .qpanel .steps li.now::before{background:var(--butter)}
html[data-style="sticker"] .qpanel .steps li:last-child::before{background:var(--head)}
html[data-style="sticker"] .qpanel aside.stack{gap:44px}
/* "Add package" stays beside its menu */
.pkg-add{flex-wrap:nowrap}
.pkg-add select{min-width:0;flex:1 1 180px}

/* Quotes page: the list of quotes down the side, like Recipes */
.split.quotes{grid-template-columns:260px minmax(0,1fr);gap:24px}
.qlist{padding:10px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
.qlist .no{font-size:13px}
.btn.txt.danger{color:var(--muted);text-decoration-color:transparent}
.btn.txt.danger:hover,.btn.txt.danger[data-armed]{color:var(--danger);background:transparent;text-decoration-color:currentColor}
@media (max-width:900px){.split.quotes{grid-template-columns:minmax(0,1fr)}.qlist{position:static;max-height:300px}}

/* Invoices */
.inv-strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;background:var(--leaf-soft);border-radius:10px;padding:10px 14px;font-size:14px}
.inv select{min-width:150px}
.inv td .st{font-size:13px}
.inv-totals{max-width:420px;margin-left:auto;width:100%}
.inv-prices{border-top:1px solid var(--line);padding-top:16px}
.inv-prices h3{font:italic 600 20px var(--display);color:var(--head);margin:0 0 8px}
.inbox{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.inbox input{font-size:14px;background:var(--bg)}
label.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.imp tr.off td{opacity:.45}
.imp td input:not([type=checkbox]){min-width:0}