/* beÜtiful Pixels: customer + admin interface.
   Colours are the owner's official palette (Brand Kit v1). Surfaces and text shades are the kit's proposed neutrals.
   Fonts: Poppins (UI, owner-supplied), Ballon Extra Bold (display headings, owner-supplied), Cheeky Rabbit (short expressive accents, owner-supplied).
   Olive Days is named in the brief but no Olive Days font file exists anywhere in the owner's materials: NOT substituted silently; display uses Ballon (see README). */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/poppins-regular.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/poppins-medium.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/poppins-semibold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/poppins-bold.woff2) format("woff2")}
@font-face{font-family:"Ballon Extra Bold";font-weight:800;font-display:swap;src:url(/assets/ballon-extra-bold.woff2) format("woff2")}
@font-face{font-family:"Cheeky Rabbit";font-weight:400;font-display:swap;src:url(/assets/cheeky-rabbit.ttf) format("truetype")}

:root{
  --navy:#2b245c;--teal:#6bc6b3;--sky:#41b9ea;--lime:#9ec53b;--yellow:#ffcb06;--orange:#ee8822;--red:#e42926;--pink:#f38fbb;--plum:#894b9d;
  --canvas:#f7f6fb;--surface:#fff;--ink:var(--navy);--muted:#5c5670;--border:#d9d5e3;--control:#746c92;--primary-hover:#3b3372;
  --err:#ad1f23;--ok:#216b5c;--tint-yellow:#fff4c2;--tint-teal:#d9f1ec;--tint-sky:#d8f0fb;--tint-pink:#fde3ee;--tint-lime:#eaf3cf;--tint-grey:#ebe9f2;
  --r-control:.75rem;--r-card:1.25rem;--gutter:1rem;--shadow:0 1px 2px rgba(43,36,92,.06),0 6px 20px rgba(43,36,92,.06);
  --font-ui:"Poppins",system-ui,"Segoe UI",sans-serif;--font-display:"Ballon Extra Bold","Poppins",system-ui,sans-serif;--font-accent:"Cheeky Rabbit","Poppins",system-ui,sans-serif;
}
@media(min-width:48rem){:root{--gutter:1.5rem}}
@media(min-width:64rem){:root{--gutter:2rem}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 1rem/1.6 var(--font-ui)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--navy);color:#fff;padding:.5rem 1rem;border-radius:var(--r-control);z-index:10}.skip:focus{left:.5rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* header */
header.top{background:var(--surface);border-bottom:1px solid var(--border)}
header.top .bar{max-width:75rem;margin:0 auto;padding:.5rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
header.top .brand{display:inline-flex;align-items:center;line-height:0}header.top .brand img{display:block;height:3rem;width:auto}
header.top nav,header.top .who{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap}
header.top nav a:not(.btn){color:var(--navy);font-weight:600;text-decoration:none;padding:.5rem .25rem;border-bottom:3px solid transparent}
header.top nav a:not(.btn):hover{border-bottom-color:var(--plum)}
.colorbar{height:6px;background:linear-gradient(90deg,var(--teal) 0 11.1%,var(--sky) 0 22.2%,var(--lime) 0 33.3%,var(--yellow) 0 44.4%,var(--orange) 0 55.5%,var(--red) 0 66.6%,var(--pink) 0 77.7%,var(--plum) 0 88.8%,var(--navy) 0)}
.role-tag{font-weight:600;font-size:.95rem;color:var(--plum);letter-spacing:.04em;text-transform:uppercase}

main{max-width:75rem;margin:0 auto;padding:1.5rem var(--gutter) 4rem}
h1,h2,h3{color:var(--navy);line-height:1.2;margin:.2em 0 .5em}
h1{line-height:1.05;margin-bottom:.4em;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,1.4rem + 2.5vw,3.25rem);letter-spacing:.01em}
h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);font-weight:700}h3{font-size:1.05rem;font-weight:600}
a{color:var(--plum);text-underline-offset:3px}a.plain{text-decoration:none;color:inherit}
.mut,.hint{color:var(--muted)}.small,.hint{font-size:.875rem;line-height:1.4}.hint{margin:.75rem 0 0}
.kicker{font-family:var(--font-accent);font-size:1.4rem;color:var(--plum);margin:0}
.strong{font-weight:700}.num{text-align:right;white-space:nowrap}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:1.25rem;margin:0 0 1.25rem;box-shadow:var(--shadow)}
@media(min-width:48rem){.card{padding:1.5rem}}
.card>h2:first-child,.card>h1:first-child,.card>.title-row:first-child{margin-top:0}
.card.accent{border-top:6px solid var(--teal)}
.stack>.card,.stack>section.card{margin-bottom:0}.stack{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
.grid-cards{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}.grid-cards>.card{margin:0}
@media(min-width:64rem){.grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.layout{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:64rem){.layout{grid-template-columns:minmax(0,1fr) 24rem;align-items:start}.layout aside{position:sticky;top:1rem}}
.layout aside .card{margin:0}
.title-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.hero{display:grid;gap:.25rem}
.hero .price{font-size:1.35rem;font-weight:700;margin:.25rem 0 .75rem}
.includes{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.includes li{padding-left:1.75rem;position:relative}.includes li::before{content:"✓";position:absolute;left:0;top:0;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--tint-teal);color:var(--ok);font-size:.8rem;display:grid;place-items:center;top:.2rem}

/* forms and buttons */
label{display:block;margin:1rem 0 .35rem;font-weight:600;font-size:.95rem}
input,select{width:100%;min-height:3rem;padding:.65rem .85rem;border:1.5px solid var(--control);border-radius:var(--r-control);background:#fff;color:var(--navy);font:inherit;font-size:1rem}
input[type=checkbox]{width:1.5rem;height:1.5rem;min-height:0;accent-color:var(--navy);flex:none}
input::placeholder{color:#7c7596}
button,.btn,a.button{font:inherit;font-weight:700;min-height:3rem;padding:.6rem 1.4rem;border-radius:var(--r-control);border:2px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
button:hover,.btn:hover,a.button:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
button.ghost,.btn.secondary,button.secondary,a.btn.secondary{background:#fff;color:var(--navy)}
button.ghost:hover,.btn.secondary:hover{background:var(--tint-grey)}
.btn.sm{min-height:2.5rem;padding:.35rem 1rem;font-size:.9rem}
button:disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}.actions>*{flex:0 0 auto}
@media(max-width:30rem){.actions>.btn:only-of-type,.actions button{width:100%}}
.tabs{display:flex;gap:.5rem;overflow-x:auto;margin:0 0 1.25rem;padding:.25rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;width:max-content;max-width:100%}
.tabs button{background:transparent;color:var(--navy);border-color:transparent;border-radius:999px;min-height:2.75rem;padding:.4rem 1.2rem}
.tabs button:hover{background:var(--tint-grey)}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.msg{padding:.8rem 1rem;border-radius:var(--r-control);margin:.75rem 0;border:1.5px solid var(--border);background:#fff}
.msg.err{color:var(--err);border-color:var(--err);background:#fff5f5}.msg.ok{color:var(--ok);border-color:var(--ok);background:var(--tint-teal)}

/* option cards (checkbox as a selectable card) */
.opt{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center;padding:1rem;margin:.6rem 0;border:1.5px solid var(--border);border-radius:var(--r-control);background:#fff}
label.opt{cursor:pointer;font-weight:400;margin:.6rem 0}label.opt:has(input:checked){border-color:var(--navy);background:var(--tint-teal);box-shadow:inset 0 0 0 1px var(--navy)}
.opt strong{font-weight:600}.opt .price-tag{font-weight:700}
.opt input[type=number]{width:5.5rem}.card .opt input,.card .opt select{max-width:15rem}
@media(max-width:30rem){.opt{grid-template-columns:1fr}}

/* rows, facts, tables */
.row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--border)}.row:last-of-type{border-bottom:0}
.row.total{font-weight:700;font-size:1.1rem;border-top:2px solid var(--navy);border-bottom:0;margin-top:.25rem;padding-top:.8rem}
.row.sub{color:var(--muted);font-size:.95rem}.row>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.facts{margin:0;display:grid;gap:.1rem}.fact{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr;gap:.25rem 1rem;padding:.55rem 0;border-bottom:1px solid var(--border)}.fact:last-child{border-bottom:0}
.fact dt{color:var(--muted);font-size:.9rem}.fact dd{margin:0;font-weight:500}.fact.strong dd{font-weight:700}
.facts.compact .fact{padding:.35rem 0}
@media(max-width:36rem){.fact{grid-template-columns:1fr}}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}th,td{padding:.6rem .5rem;border-bottom:1px solid var(--border);text-align:left;font-size:.9rem;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
th.num,td.num{text-align:right}tfoot th{text-transform:none;font-size:.9rem;color:var(--navy);text-align:right}
table.lines tfoot td{border-bottom:0}

/* status chips: colour + symbol + words */
.chip{display:inline-flex;align-items:center;gap:.15rem;padding:.2rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;border:1.5px solid var(--navy);color:var(--navy);background:#fff;white-space:nowrap}
.chip-wait{background:var(--tint-yellow);border-color:#b58900}.chip-go{background:var(--tint-teal);border-color:var(--ok);color:#16493f}.chip-info{background:var(--tint-sky);border-color:#1b7da8}
.chip-done{background:var(--tint-lime);border-color:#5f7b0e;color:#3f5208}.chip-stop{background:var(--tint-pink);border-color:var(--err);color:var(--err)}.chip-off{background:var(--tint-grey);border-color:var(--control);color:var(--muted)}
.badge{display:inline-flex;padding:.2rem .75rem;border-radius:999px;border:1.5px solid var(--control);font-size:.8rem;font-weight:600;background:#fff}
.badge.ok{background:var(--tint-teal);border-color:var(--ok);color:#16493f}.badge.warn{background:var(--tint-yellow);border-color:#b58900}

/* enhancement cards */
.enh{border:1.5px solid var(--border);border-radius:var(--r-control);padding:1rem;margin:0 0 1rem;background:#fff}.enh:last-child{margin-bottom:0}
.enh-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}
.enh[data-state=requested],.enh[data-state=paid_awaiting_approval]{border-left:6px solid var(--yellow)}.enh[data-state=approved],.enh[data-state=awaiting_payment]{border-left:6px solid var(--sky)}
.enh[data-state=paid]{border-left:6px solid var(--lime)}.enh[data-state=rejected]{border-left:6px solid var(--red)}.enh[data-state=cancelled]{border-left:6px solid var(--control)}
.enh-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:.75rem}.enh-actions:empty{display:none}.enh-actions input{flex:1 1 14rem}

/* progress */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1rem 0 0;padding:0}
.steps span{text-align:center;font-size:.8rem;font-weight:600;padding:.55rem .25rem;border-radius:var(--r-control);background:var(--tint-grey);color:var(--muted);border-bottom:4px solid var(--border)}
.steps span.on{background:var(--tint-teal);color:var(--navy);border-bottom-color:var(--teal)}
@media(max-width:30rem){.steps{grid-template-columns:repeat(2,1fr)}}

/* sign-in */
form.card{max-width:30rem;margin-left:auto;margin-right:auto}
details>summary{cursor:pointer;font-weight:600;padding:.25rem 0}
.total-big{font-size:1.75rem;font-weight:700}
@media(prefers-reduced-motion:no-preference){button,.btn{transition:background .16s,border-color .16s}}
@media print{header.top,.tabs,button{display:none}}
@media(max-width:30rem){.enh{padding:.75rem}table.lines th,table.lines td{padding:.5rem .3rem;font-size:.8rem;letter-spacing:0}table.lines td:first-child{overflow-wrap:anywhere}table.lines .num{white-space:normal}}