/* Proposal builder — page styles on top of admin.css. FAM palette, lighter chrome. */
.pb, .modal-bg { --pb-line: #ebe5d8; --pb-soft: #faf7f0; --pb-gold-ink: #8a6a22; }
.pb { padding-top: 22px; }
/* Same topographic texture as the client page (assets/topo.svg, lifted from client-view) */
.main.pb { background: var(--cream) url("assets/topo.svg") 0 0 / 900px 900px repeat; }

/* ---- Header ---- */
.pb-top { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.pb-top .sp { flex: 1; }
.pb-crumbs { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.pb-crumbs a { color: var(--muted); }
.pb-crumbs a:hover { color: var(--ink); }
.pb-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-title h1 { font-size: 34px; letter-spacing: .01em; white-space: nowrap; }
.pb-sub { margin-top: 6px; font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pb-sub i { width: 3px; height: 3px; border-radius: 50%; background: #b7b09f; }
.pb-sub .saved { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 600; }
.pb-sub .saved svg { width: 14px; height: 14px; }
.pb .btn { border-radius: 9px; font-weight: 600; padding: 8px 14px; }
.pb .btn.ghost { background: transparent; }
.pb .btn.ghost:hover { background: var(--card); }
.pb .btn.gold { font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.08); }

/* ---- Three-column layout ---- */
.pb-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.pb-panel { background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--pb-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(23,22,15,.04); }
.pb-label { font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---- Outline: pages, then stops as cards; only the open stop shows its days and groups ---- */
.pb-outline { padding: 14px 12px 12px; position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: thin; }
.ol-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.ol-prog { font-size: 12px; font-weight: 600; color: var(--muted); }
.ol-progbar { height: 4px; border-radius: 99px; background: #eee8db; margin: 9px 4px 4px; overflow: hidden; }
.ol-progbar b { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.ol-sec { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 4px 6px; }
.ol-plus { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--pb-line); border-radius: 7px; background: #fff; color: var(--pb-gold-ink); padding: 0; }
.ol-plus svg { width: 13px; height: 13px; }
.ol-plus:hover { border-color: var(--gold); }
.ol-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.ol-row span { overflow: hidden; text-overflow: ellipsis; }
.ol-row svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.ol-row:hover { background: var(--pb-soft); }
.stop-card { display: block; border: 1px solid var(--pb-line); border-radius: 11px; background: #fff; margin-bottom: 6px; overflow: hidden; }
.stop-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; cursor: pointer; }
a.stop-card.stop-row:hover { border-color: #ddd4c1; }
.stop-card.on { border-color: #e2d3ad; box-shadow: 0 1px 0 rgba(201,162,79,.15); }
.stop-card.on > .stop-row { background: var(--gold-soft); }
.ol-num { width: 22px; height: 22px; border-radius: 50%; background: var(--noir); color: var(--gold); display: grid; place-items: center; font: 700 11.5px/1 var(--body); flex: none; }
.stop-t { flex: 1; min-width: 0; }
.stop-t b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-t small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-row .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.stop-row .chev.r { transform: rotate(-90deg); }
.stop-body { padding: 8px 8px 8px; border-top: 1px solid #efe6cf; }
.day-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 9px; background: #f1ece2; margin-bottom: 6px; }
.day-seg span { text-align: center; padding: 5px 4px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; }
.day-seg span small { font-weight: 500; }
.day-seg span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.g-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.g-row:hover { background: var(--pb-soft); }
.g-row.on { background: var(--noir); color: #fff; }
.g-nm { flex: 1; min-width: 0; }
.g-nm b, .g-nm small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-nm b { font-weight: 600; font-size: 13.5px; white-space: normal; }
.g-nm small { font-size: 12px; color: var(--muted); }
.g-row.on .g-nm small { color: #cfc6b0; }
.g-row:has(.ol-st.w) small { color: var(--warn); }
.ol-st { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; display: inline-block; }
.ol-st.w { background: var(--warn); }
.g-add { display: flex; align-items: center; gap: 7px; padding: 7px 8px; margin-top: 2px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--pb-gold-ink); cursor: pointer; }
.g-add svg { width: 13px; height: 13px; }
.g-add:hover { background: var(--pb-soft); }
.ol-legend { display: flex; gap: 14px; padding: 10px 4px 0; margin-top: 8px; border-top: 1px solid var(--pb-line); font-size: 12px; color: var(--muted); }
.ol-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Editor ---- */
.pb-editor { overflow: hidden; }
.ed-top { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 16px; border-bottom: 1px solid var(--pb-line); }
.ed-top .eyebrow { font-size: 12.5px; font-weight: 600; color: var(--pb-gold-ink); }
.ed-top h2 { font-size: 26px; margin-top: 5px; }
.ed-top .sp { flex: 1; }
.ed-nav { display: flex; gap: 4px; }
.ibtn { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: 8px; color: var(--muted); padding: 0; }
.ibtn svg { width: 16px; height: 16px; }
.ibtn:hover { background: var(--pb-soft); border-color: var(--pb-line); color: var(--ink); }
.ibtn.danger:hover { background: #f8e3df; border-color: #f0cfc8; color: #a33a2a; }
.ed-nav .ibtn { border-color: var(--pb-line); }

.ed-sec { padding: 18px 22px; }
.ed-sec + .ed-sec { border-top: 1px solid var(--pb-line); }
.sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sec-h h4 { margin: 0; font-size: 15px; font-weight: 700; }
.sec-h small { color: var(--muted); font-size: 13px; }

.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
@media (min-width: 1700px) { .settings { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.set label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; white-space: nowrap; }
.inp { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border: 1px solid var(--pb-line); border-radius: 9px; background: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; }
.inp .inp-caret { margin-left: auto; width: 14px; height: 14px; color: var(--muted); flex: none; }
.sw { width: 32px; height: 18px; border-radius: 99px; background: var(--gold); position: relative; flex: none; }
.sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sw.off { background: #d9d3c5; }
.sw.off::after { right: auto; left: 2px; }

/* Option cards */
.o-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.o-card { display: flex; flex-direction: column; border: 1px solid var(--pb-line); border-radius: 12px; background: #fff; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.o-card:hover { border-color: #ddd4c1; box-shadow: 0 6px 18px -10px rgba(23,22,15,.35); }
.o-card.dragging { opacity: .4; }
.o-card .o-ph { height: 112px; position: relative; background: var(--g); }
.o-card .o-ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 10%, rgba(255,255,255,.14), transparent 60%); }
.o-card .o-grip { position: absolute; z-index: 1; left: 8px; top: 8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(0,0,0,.4); color: #fff; cursor: grab; }
.o-card .o-grip svg { width: 14px; height: 14px; }
.o-card .o-ord { position: absolute; z-index: 1; right: 8px; top: 8px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--gold); color: var(--noir); font: 700 11.5px/1 var(--body); }
.o-card .body { padding: 11px 12px 10px; flex: 1; }
.o-card .nm { font-weight: 700; font-size: 15px; line-height: 1.25; }
.o-card .loc { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-card .nums { display: grid; gap: 1px; margin-top: 9px; font-size: 12.5px; }
.o-card .nums b { font-size: 14.5px; }
.o-card .nums span { color: var(--pb-gold-ink); font-weight: 600; white-space: nowrap; }
.opt-act { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-top: 1px solid #f1ece2; }
.opt-act .sp { flex: 1; }
.tbtn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 8px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--ink); }
.tbtn svg { width: 14px; height: 14px; }
.tbtn:hover { background: var(--pb-soft); }

/* Inline add */
.adder { margin-top: 14px; border: 1px solid var(--pb-line); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.adder:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.add-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; color: var(--muted); cursor: text; }
.add-search svg { width: 18px; height: 18px; flex: none; }
.add-search input { border: 0; outline: 0; flex: 1; min-width: 0; font: 500 15px var(--body); color: var(--ink); background: transparent; }
.sugg-h { font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 14px 4px; border-top: 1px solid #f1ece2; }
.sg { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 14px; }
.sg:hover { background: var(--pb-soft); }
.sg .sg-face { width: 34px; height: 34px; border-radius: 8px; background: var(--g); }
.sg-t b { display: block; font-size: 14px; font-weight: 600; }
.sg-t small, .sg-f small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-f { text-align: right; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.sg-f small.fits { color: var(--ok); }
.sg-f small.over { color: var(--warn); }
.sg .btn { padding: 6px 11px; font-size: 13px; }
.sg-empty { padding: 10px 14px 12px; font-size: 13.5px; color: var(--muted); }
.add-foot { padding: 10px 14px; border-top: 1px solid #f1ece2; background: var(--pb-soft); font-size: 13px; color: var(--muted); }
.link { color: var(--pb-gold-ink); font-weight: 700; cursor: pointer; }

/* Budget */
.budget { display: grid; gap: 8px; }
.budget-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.budget-row .pill { margin-left: auto; }
.b-bar { height: 8px; border-radius: 99px; background: #efe9dc; position: relative; overflow: hidden; }
.b-bar b { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--gold); }
.budget small { color: var(--muted); font-size: 12.5px; }

/* ---- Preview ---- */
.pb-preview { padding: 14px; position: sticky; top: 20px; }
.pv-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: #f1ece2; }
.seg span { padding: 4px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pb-preview .pv-phone { border-radius: 28px; background: #121210; padding: 8px; box-shadow: 0 18px 36px -22px rgba(0,0,0,.55); max-width: 272px; margin: 0 auto; }
.pb-preview .pv-phone img { width: 100%; height: auto; border-radius: 21px; display: block; }
.pv-share { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pv-link { display: flex; align-items: center; gap: 8px; border: 1px solid var(--pb-line); border-radius: 9px; padding: 0 4px 0 10px; height: 38px; font-size: 12.5px; background: #fff; white-space: nowrap; }
.pv-link svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.pv-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pv-link .tbtn { color: var(--pb-gold-ink); font-size: 12.5px; }
.toggle-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 2px 2px; }
.toggle-row small { display: block; color: var(--muted); font-size: 12px; }
.toggle-row .sw { margin-left: auto; }

/* ---- Laptop widths: preview tucks under the outline so the editor keeps its room ---- */
@media (max-width: 1400px) {
  .pb-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .pb-outline { grid-column: 1; grid-row: 1; position: static; max-height: none; }
  .pb-editor { grid-column: 2; grid-row: 1 / span 2; }
  .pb-preview { grid-column: 1; grid-row: 2; position: static; padding: 12px; }
  .pv-h { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 1100px) {
  .main.pb { padding: 20px 20px 36px; }
  .pb-top { flex-wrap: wrap; align-items: center; }
  .pb-title h1 { font-size: 28px; }
  .sg { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .sg-f { display: none; }
}

/* ---- Toolbar ---- */
.pb-tools { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; margin: -6px -34px 20px; padding: 8px 34px; background: rgba(246,243,236,.92); backdrop-filter: blur(8px); border-top: 1px solid var(--pb-line); border-bottom: 1px solid var(--pb-line); }
.pb-tools .sp { flex: 1; }
.tg { display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.tg + .tg { border-left: 1px solid var(--pb-line); }
.tl { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tl svg { width: 16px; height: 16px; flex: none; color: #4a463d; }
.tl:hover:not([disabled]) { background: var(--card); border-color: var(--pb-line); }
.tl[disabled] { opacity: .4; cursor: default; }
.tl.ic { width: 34px; padding: 0; justify-content: center; }
.tl em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--pb-gold-ink); background: var(--gold-soft); padding: 2px 6px; border-radius: 99px; }
.tl.add { background: var(--noir); color: #fff; padding: 0 10px 0 9px; }
.tl.add svg { color: var(--gold); }
.tl.add .chev { width: 14px; height: 14px; color: #bdb6a6; }
.tl.add:hover { background: #26241f; border-color: #26241f; }
.sw-tl .sw { margin-left: 2px; }
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; width: 250px; padding: 6px; background: var(--card); border: 1px solid var(--pb-line); border-radius: 12px; box-shadow: 0 16px 36px -14px rgba(23,22,15,.35); }
.menu[hidden] { display: none; }
.menu a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.menu a:hover { background: var(--pb-soft); }
.menu svg { width: 16px; height: 16px; color: var(--pb-gold-ink); margin-top: 2px; flex: none; }
.menu small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.pb-preview { top: 72px; }
@media (max-width: 1400px) { .tl span:not(.sw) { display: none; } .tl.add span, .sw-tl span:not(.sw) { display: inline; } .tl { padding: 0 9px; } }
@media (max-width: 1100px) { .pb-tools { margin: -4px -20px 18px; padding: 8px 20px; overflow-x: auto; } }
.tg.pub { gap: 8px; padding-right: 0; }
.tg.pub .btn { height: 34px; padding: 0 12px; }
@media (max-width: 1400px) { .pb-grid { grid-template-columns: 250px minmax(0, 1fr); } }
@media (max-width: 1250px) { .tg.pub .btn.ghost span { display: none; } }
@media (max-width: 1600px) { .tl.lo span { display: none; } .tl.lo { width: 34px; padding: 0; justify-content: center; } }

/* ---- Working editor: form controls, stop details, modal, toast ---- */
input.inp, select.inp, textarea.inp { width: 100%; font: 400 14px var(--body); color: var(--ink); outline: 0; }
select.inp { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d695f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; padding-right: 30px; cursor: pointer; }
textarea.inp { height: auto; padding: 9px 11px; line-height: 1.5; white-space: normal; resize: vertical; }
.inp:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.inp.tog { cursor: pointer; text-align: left; }
.set.wide { grid-column: span 2; }
.settings.one { grid-template-columns: minmax(0, 1fr); }
.settings.one .set.wide { grid-column: auto; }
.ed-empty { padding: 60px 24px; text-align: center; color: var(--muted); display: grid; gap: 6px; }
.ed-empty b { color: var(--ink); font-size: 16px; }
.ed-nav .ibtn[disabled] { opacity: .35; cursor: default; }
.ed-nav .ibtn.danger { margin-left: 6px; }

.stop-row .stop-edit { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: var(--pb-gold-ink); border-radius: 7px; border: 1px solid #e2d3ad; background: #fff; }
.stop-row .stop-edit svg { width: 13px; height: 13px; }
.stop-card.on > .stop-row.sel { background: var(--noir); color: #fff; }
.stop-card.on > .stop-row.sel small { color: #cfc6b0; }
.stop-card.on > .stop-row.sel .stop-edit { background: var(--gold); border-color: var(--gold); color: var(--noir); }
.day-seg .add { display: grid; place-items: center; color: var(--pb-gold-ink); }
.day-seg .add svg { width: 13px; height: 13px; }
.day-seg .add:hover { background: #fff; }
.day-seg.many span small { display: block; font-size: 11px; }
.day-list { display: grid; gap: 8px; margin-bottom: 12px; }
.day-item { display: grid; grid-template-columns: 52px minmax(0, 170px) 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--pb-line); border-radius: 10px; background: #fff; font-size: 13.5px; }
.day-item .muted { font-size: 12.5px; }
.day-item .ibtn[disabled] { opacity: .3; cursor: default; }
.btn.add-day svg, .btn.sm svg { width: 14px; height: 14px; }

.o-empty { padding: 18px; border: 1px dashed #d8cfbb; border-radius: 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
.o-card .nums small.over { color: var(--warn); font-weight: 700; font-size: 11.5px; }
.o-card .nums b.fee-off { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(109,105,95,.5); }
.fee-note { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); background: #f1ece2; padding: 3px 8px; border-radius: 99px; }
.fee-note svg { width: 13px; height: 13px; }
.adder.swapping { border-color: var(--gold); }
.swap-bar { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; background: var(--gold-soft); color: #4d3a10; font-size: 13px; }
.swap-bar .tbtn { margin-left: auto; }
.sugg-h:empty { display: none; }

.modal-bg { position: fixed; inset: 0; z-index: 50; background: rgba(18,18,16,.45); display: grid; place-items: center; padding: 16px; animation: fade .12s ease-out; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); padding: 18px 20px 16px; }
.m-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.m-h h3 { font-size: 22px; }
.m-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.m-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.m-err { margin: 12px 0 0; font-size: 13px; color: #a33a2a; font-weight: 600; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 38px; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatches span { display: block; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.swatches input:checked + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.swatches input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@keyframes fade { from { opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--noir); color: #fff; font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); transition: opacity .18s, transform .18s; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1100px) { .day-item { grid-template-columns: 48px minmax(0, 1fr) auto auto; } .day-item .muted { display: none; } }