/* Richer palette layer: deeper sage brand, warm amber accent, clearly visible selections.
   Loaded last on every page so it can lift the selection states defined in app/tool/admin css. */

body{background:
  radial-gradient(1100px 560px at 8% -12%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 62%),
  radial-gradient(900px 520px at 104% -6%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 60%),
  var(--bg);
  background-attachment:fixed}

/* Segmented controls and the New print / My orders / Print now tabs: filled brand thumb */
.seg{background:color-mix(in srgb, var(--brand) 5%, var(--surface-2));box-shadow:inset 0 0 0 1px var(--line)}
.seg .thumb{background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, #fff) 0%, var(--brand) 100%);box-shadow:0 1px 2px rgba(0,0,0,.14),0 6px 18px -4px var(--brand-glow)}
.seg span{transition:color .25s var(--out)}
.seg label:hover input:not(:checked):not(:disabled)+span{color:var(--text)}
.seg input:checked+span{color:var(--on-brand)}
.seg input:checked+span small{color:var(--on-brand);opacity:.82}

/* Outline buttons (All / None / Invert, Cancel, Change…) carry the brand */
.btn.ghost{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn.ghost:hover{color:var(--brand-ink);background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 60%, transparent)}
/* toggle-style buttons (e.g. All / None pages): pressed = filled brand */
.btn.ghost[aria-pressed="true"]{background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, #fff), var(--brand));color:var(--on-brand);box-shadow:0 6px 16px -6px var(--brand-glow)}
.btn.ghost.danger,.btn.danger.ghost{color:var(--bad);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 45%, transparent)}
.btn:not(.ghost):not(.danger){box-shadow:0 1px 2px rgba(0,0,0,.10),0 8px 22px -10px var(--brand-glow)}
.btn:not(.ghost):not(.danger):hover{background:var(--brand-hover)}

/* Radio cards (Pickup / Delivery, Print type, Payment) */
.opt{background:var(--surface-2)}
.opt:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 35%, transparent)}
.opt:has(input:checked){background:color-mix(in srgb, var(--brand) 10%, var(--surface));box-shadow:inset 0 0 0 2px var(--brand),0 10px 26px -14px var(--brand-glow)}
.opt:has(input:checked) b{color:var(--brand-ink)}
.opt:has(input:checked) .tag{color:var(--brand-ink)}

/* Chips: a soft brand tint instead of grey */
.chip{background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent)}

/* Page picker: selected pages get a brand ring */
.pg[aria-pressed="true"] .paper{box-shadow:0 0 0 2.5px var(--brand),0 8px 22px -8px var(--brand-glow)}

/* Pickup day / time */
.day[aria-pressed="true"],.time[aria-pressed="true"]{background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, #fff), var(--brand));box-shadow:0 8px 22px -8px var(--brand-glow)}

/* Dashboard tiles */
.dcard.hot{background:linear-gradient(150deg, color-mix(in srgb, var(--brand) 82%, #fff) 0%, var(--brand) 70%);box-shadow:0 12px 30px -12px var(--brand-glow)}
.dcard:not(.hot) b{color:var(--text)}

/* Steps, tables, cards */
.steps-bar span.on i{box-shadow:0 0 0 4px var(--brand-soft)}
table.orders tr.sel{background:color-mix(in srgb, var(--brand) 12%, var(--surface))}
.rcard.on{border-color:var(--brand);box-shadow:0 14px 34px -16px var(--brand-glow)}
.rc-ic,.er-ic{background:linear-gradient(150deg, var(--brand-soft), color-mix(in srgb, var(--accent-2) 16%, var(--brand-soft)));color:var(--brand-ink)}
.otp-cells .cell.filled{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent)}

/* Switches use the brand green */
.switch input:checked+i{background:var(--brand)}

/* Admin: sidebar, filter chips, calendar days */
.nb[aria-current="page"]{background:color-mix(in srgb, var(--brand) 13%, var(--surface));color:var(--brand-ink);box-shadow:inset 3px 0 0 var(--brand),var(--shadow-sm)}
.fchip[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}

@media (prefers-contrast:more){
  .seg .thumb,.day[aria-pressed="true"],.time[aria-pressed="true"],.dcard.hot{background:var(--brand)}
  .chip{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
}

/* "From $0.15/page": inline text inside a flex chip */
.chip:has([data-from]){gap:0}
.chip [data-from]{margin-left:.28em}