/* One shop's page (shop.js). Look copied from app/mockups/platform-admin.html.
   The colour tokens (--bg, --panel, --ink, --brand, --good, --mid, --bad …) come from app.css on
   :root, light and dark. Everything here is scoped to .sp (the page) or .sp-dlg (its dialogs),
   so nothing leaks into the shell. */

.sp { display: grid; gap: 18px; align-content: start; min-width: 0; font-size: 15px; line-height: 1.55; color: var(--ink) }
.sp h2, .sp h3, .sp-dlg h2, .sp-dlg h3 { font-family: var(--f-display, system-ui, sans-serif); margin: 0; line-height: 1.15; text-wrap: balance }
.sp p { margin: 0; max-width: 70ch }
.sp .mono, .sp-dlg .mono { font-family: var(--f-mono, ui-monospace, Menlo, monospace); font-size: .88em }
.sp .hint, .sp .small, .sp-dlg .small { font-size: 12.5px; color: var(--muted) }
.sp .sr, .sp-dlg .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* buttons, inputs */
.sp .btn, .sp-dlg .btn { all: unset; box-sizing: border-box; cursor: pointer; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink); background: var(--panel); text-align: center; white-space: nowrap; min-height: 34px; display: inline-flex; align-items: center; justify-content: center }
.sp .btn:hover, .sp-dlg .btn:hover { border-color: var(--muted) }
.sp .btn:focus-visible, .sp .linkbtn:focus-visible, .sp-dlg .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.sp .btn.pri { background: var(--brand); border-color: var(--brand); color: var(--on-brand) }
.sp .btn.warnb { border-color: var(--mid); color: var(--mid); background: transparent }
.sp .btn.warnb.solid { background: var(--mid); color: var(--panel) }
.sp .btn.danger, .sp-dlg .btn.danger { border-color: var(--bad); color: var(--bad); background: transparent }
.sp .btn.danger.solid, .sp-dlg .btn.danger.solid { background: var(--bad); color: var(--panel) }
.sp .btn.goodb, .sp-dlg .btn.goodb { border-color: var(--good); color: var(--good); background: transparent }
.sp .btn.goodb.solid, .sp-dlg .btn.goodb.solid { background: var(--good); color: var(--panel) }
.sp .btn[disabled], .sp-dlg .btn[disabled] { opacity: .45; cursor: not-allowed }
.sp .linkbtn { all: unset; cursor: pointer; color: var(--brand); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px }
.sp label.f { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 0 }
.sp label.f.inline { display: flex; align-items: center; gap: 8px }
.sp input, .sp select, .sp textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0; box-sizing: border-box }
.sp input:focus-visible, .sp select:focus-visible, .sp textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand) }
.sp .err, .sp-dlg .err { color: var(--bad); font-size: 12.5px; font-weight: 600; margin: 0 }
.sp .err:empty, .sp-dlg .err:empty { display: none }

/* status pills (statusPill from format.js, and the period tags) */
.sp .pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-body, system-ui, sans-serif); font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.3; white-space: normal; vertical-align: middle }
.sp .pill.good { background: var(--good-bg); color: var(--good) }
.sp .pill.warn { background: var(--mid-bg); color: var(--mid) }
.sp .pill.bad { background: var(--bad-bg); color: var(--bad) }
.sp .pill.quiet { background: var(--bg); color: var(--muted); border: 1px solid var(--line) }
.sp .paused { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-body, system-ui, sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: var(--ink); color: var(--panel); vertical-align: middle }
.sp .paused::before { content: ""; width: 7px; height: 9px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; box-sizing: border-box }

/* header */
.sp .dhead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.sp .logo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--on-brand); background: var(--brand); font-size: 18px; font-weight: 700; font-family: var(--f-display, system-ui, sans-serif); flex: none }
.sp .dhead .t { display: grid; min-width: 0; flex: 1 }
.sp .dhead .nm { font-size: 19px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere }
.sp .dhead .addr { font-family: var(--f-mono, ui-monospace, Menlo, monospace); font-size: 12px; color: var(--muted); overflow-wrap: anywhere }
@media (max-width: 520px) { .sp .dhead .t { flex-basis: calc(100% - 52px) } .sp .dhead > .btn { width: 100% } }
.sp .contact { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); align-items: baseline }
.sp .contact b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere }
.sp .shopnotes { font-size: 13px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere }
.sp .note { border-radius: 10px; padding: 10px 12px; font-size: 13px; display: grid; gap: 4px }
.sp .note.calm { background: var(--bg); border: 1px solid var(--line) }
.sp .note.bad { background: var(--bad-bg) } .sp .note.bad b { color: var(--bad) }
.sp .note.dark { background: var(--ink); color: var(--panel) }
.sp .note.dark span { opacity: .85 }
.sp .toast { font-size: 12.5px; color: var(--shop); background: var(--shop-soft); border-radius: 8px; padding: 8px 12px; overflow-wrap: anywhere }

/* service and own-feature groups */
.sp .group { display: grid; gap: 6px; min-width: 0 }
.sp .ghead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-left: 2px }
.sp .eyebrow { font-family: var(--f-body, system-ui, sans-serif); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 6px }
.sp .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor }
.sp .ghead.g1 .eyebrow { color: var(--brand) } .sp .ghead.g2 .eyebrow { color: var(--shop) } .sp .ghead.g3 .eyebrow { color: var(--data) }
.sp .ghead > span { font-size: 12px; color: var(--muted) }
.sp .mod { display: grid; gap: 8px; background: var(--card); border: 1px solid var(--edge); box-shadow: var(--shadow); border-radius: 14px; padding: 10px 12px; min-width: 0 }
.sp .mod.off { background: transparent }
.sp .mod.off .t b { color: var(--muted) }
.sp .mrow { display: flex; align-items: center; gap: 12px }
.sp .mod .t { display: grid; min-width: 0; flex: 1 }
.sp .mod .t b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere }
.sp .mod .t span { font-size: 12px; color: var(--muted) }
.sp .parts { display: flex; flex-wrap: wrap; gap: 6px }
.sp .part { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); overflow-wrap: anywhere }
.sp .part.rep { background: var(--shop-soft); color: var(--shop); border-color: var(--shop); font-weight: 600 }
.sp .part.rep s { opacity: .7; font-weight: 400 }
.sp .mod.off .part { opacity: .5 }
.sp .mod.only { border-style: dashed; border-color: var(--shop) }
.sp .mod.only.off { border-color: var(--line) }
.sp .mod .t .repl { font-size: 12px; color: var(--shop); font-weight: 600 }
.sp .mod .t .repl.add { color: var(--muted); font-weight: 500 }
.sp .mod .t .svcoff { display: inline; color: var(--bad); font-weight: 600; font-size: inherit }
.sp .tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap }
.sp .tag.core { background: var(--line); color: var(--muted) }
.sp .tag.paid { background: var(--good-bg); color: var(--good) }
.sp .tag.only { background: var(--shop-soft); color: var(--shop) }
@media (max-width: 460px) { .sp .mrow { flex-wrap: wrap } .sp .mod .t { flex-basis: 100% } .sp .mrow .tag { margin-right: auto } }

.sp .sw { all: unset; cursor: pointer; width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .15s }
.sp .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25) }
.sp .sw[aria-checked="true"] { background: var(--good) }
.sp .sw[aria-checked="true"]::after { transform: translateX(16px) }
.sp .sw:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.sp .sw[disabled] { cursor: not-allowed }
.sp .sw.locked[aria-checked="true"] { background: var(--muted); opacity: .55 }
.sp .sw[aria-busy="true"] { opacity: .5 }
@media (prefers-reduced-motion: reduce) { .sp .sw, .sp .sw::after { transition: none } }

.sp .rail { display: grid; gap: 8px; background: var(--mid-bg); border-radius: 8px; padding: 10px 12px; font-size: 13px }
.sp .rail b { color: var(--mid) }
.sp .rail .acts { display: flex; gap: 8px; flex-wrap: wrap }

/* price */
.sp .bill { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 12px; font-size: 14px; align-items: baseline }
.sp .bill b { font-variant-numeric: tabular-nums; font-family: var(--f-display, system-ui, sans-serif); font-size: 17px }
.sp .propose { display: grid; gap: 10px; border: 1.5px solid var(--brand); background: var(--brand-soft); border-radius: 10px; padding: 12px }
.sp .propose b { color: var(--brand) }
.sp .propose .pr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.sp .propose input { width: 120px; font-variant-numeric: tabular-nums }

/* billing */
.sp .bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
@media (max-width: 760px) { .sp .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.sp .bset { background: var(--data-soft); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0 }
.sp .bset > span:first-child, .sp .bset > label { font-size: 11.5px; color: var(--muted) }
.sp .bset b { font-family: var(--f-display, system-ui, sans-serif); font-size: 16px; color: var(--data); font-variant-numeric: tabular-nums }
.sp .bset input { width: 70px; padding: 2px 6px; font-family: var(--f-display, system-ui, sans-serif); font-weight: 700; color: var(--data); background: var(--panel) }
.sp .bset .gd { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted) }
.sp .sub { font-size: 13px; font-weight: 600; margin-top: 6px }
.sp .hist { display: flex; flex-wrap: wrap; gap: 6px }
.sp .hist span { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-variant-numeric: tabular-nums }
.sp .hist span.now { border-color: var(--data); color: var(--data); font-weight: 600 }
.sp .hist span.next { border-style: dashed; border-color: var(--brand); color: var(--brand) }
.sp .tbl { display: grid; border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: var(--shadow) }
.sp .tr { display: grid; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; align-items: center; font-variant-numeric: tabular-nums; min-width: 0 }
.sp .tr > * { min-width: 0; overflow-wrap: anywhere }
.sp .tr:first-child { border-top: 0 }
.sp .tr.h { background: var(--bg); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.sp .per .tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.6fr) }
.sp .pay .tr { grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 2fr) auto }
.sp .tr .r { text-align: right }
.sp .tr.neg { color: var(--bad) }
.sp .tr .k { display: none }
@media (max-width: 620px) {
  .sp .tr.h { display: none }
  .sp .per .tr, .sp .pay .tr { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px }
  .sp .per .tr > :nth-child(2), .sp .per .tr > :nth-child(3) { text-align: left }
  .sp .per .tr > :nth-child(4) { grid-column: 1 / -1 }
  .sp .pay .tr > :nth-child(4), .sp .pay .tr > :nth-child(5) { grid-column: 1 / -1 }
  .sp .tr .r { text-align: left }
  .sp .tr .k { display: inline; color: var(--muted) }
  .sp .tr .empty { display: none }
}
.sp .payform { display: grid; gap: 10px; border: 1px solid var(--edge); border-radius: 14px; padding: 12px; background: var(--card); min-width: 0 }
.sp .payform.corr { border-color: var(--bad); border-style: dashed }
.sp .pfg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
@media (max-width: 620px) { .sp .pfg { grid-template-columns: 1fr } }
.sp .radios { display: flex; gap: 6px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; min-width: 0 }
.sp .radios label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); font-weight: 500; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer }
.sp .radios input { width: auto; margin: 0; accent-color: var(--brand) }
.sp .depchk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; cursor: pointer }
.sp .depchk input { width: auto; margin: 0; accent-color: var(--brand) }
.sp .pk { font-size: 11px; font-weight: 600; color: var(--data); border: 1px solid currentColor; border-radius: 6px; padding: 0 5px }
.sp .totals { margin: 6px 0 0 }
.sp .radios label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand) }
.sp .radios label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px }
.sp .formacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
/* the plan cards on "Set up contract" (owner's pick A, app/mockups/hero-plan-length-options.html) */
.sp .plans { display: grid; gap: 8px; min-width: 0 }
.sp .plan { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0 }
.sp .plan:has(input[name=every]:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft) }
.sp .plan .ph { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink); font-weight: 600; min-width: 0 }
.sp .plan .ph input { width: auto; margin: 0; accent-color: var(--brand) }
.sp .plan .ph:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px }
.sp .plan .n { flex: 1; min-width: 0 }
.sp .plan .p { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 500 }
.sp .plan .p s { color: var(--muted); font-size: 12px; margin-left: 4px }
.sp .plan .s { font-size: 12px; color: var(--muted); padding-left: 24px }
.sp .plan .save { color: var(--good); font-weight: 600 }
.sp .plan .deal { display: flex; gap: 6px; flex-wrap: wrap; border: 0; margin: 2px 0 0; padding: 0 0 0 24px; min-width: 0 }
.sp .plan .deal label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; cursor: pointer }
.sp .plan .deal input { width: auto; margin: 0; accent-color: var(--good) }
.sp .plan .deal label:has(input:checked) { background: var(--good-bg); color: var(--good); border-color: transparent }
.sp .plan .deal label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px }
/* the card's price follows its chip: full price, or the deal price with the full one struck through */
.sp .plan .p-deal { display: none }
.sp .plan:has(.deal input[value^=pay]:checked) .p-deal { display: inline }
.sp .plan:has(.deal input[value^=pay]:checked) .p-full { display: none }

/* dialogs (appended to body by shop.js) */
.sp-dlg { border: 1px solid var(--edge); border-radius: 16px; padding: 0; background: var(--card); box-shadow: var(--shadow); color: var(--ink); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-sizing: border-box; font-family: var(--f-body, system-ui, sans-serif); font-size: 15px; line-height: 1.55 }
.sp-dlg::backdrop { background: var(--backdrop) }
.sp-dlg .dlg { padding: 20px; display: grid; gap: 14px }
.sp-dlg h2 { font-size: 20px; overflow-wrap: anywhere }
.sp-dlg p { margin: 0 }
.sp-dlg .mono { overflow-wrap: anywhere }
.sp-dlg .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
@media (max-width: 480px) { .sp-dlg .two { grid-template-columns: 1fr } .sp-dlg .dlg { padding: 16px } }
.sp-dlg .box { border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; align-content: start }
.sp-dlg .box h3 { font-size: 14px }
.sp-dlg .box ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 2px }
.sp-dlg .box.stop { background: var(--bad-bg) } .sp-dlg .box.stop h3 { color: var(--bad) }
.sp-dlg .box.keep { background: var(--good-bg) } .sp-dlg .box.keep h3 { color: var(--good) }
.sp-dlg .dacts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap }
@media (max-width: 400px) { .sp-dlg .dacts .btn { flex: 1 1 100%; white-space: normal } }

/* ---- round 2: money tools ---- */
.sp .note.promise { background: var(--brand-soft); border: 1px solid var(--line) }
.sp .note.promise b { color: var(--brand) }
.sp .note.ending { background: var(--mid-bg); display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.sp .note.ending b { color: var(--mid) }
.sp .note.ending > span { flex: 1 1 240px; min-width: 0 }
.sp .bset .was { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere }
.sp .tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.sp .discount { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: baseline }
.sp .comps { display: grid; border: 1px solid var(--edge); border-radius: 14px; background: var(--card); overflow: hidden }
.sp .comp { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px }
.sp .comp:first-child { border-top: 0 }
.sp .comp > span:first-child { min-width: 0; overflow-wrap: anywhere }
.sp .comp b { color: var(--good) }
.sp .tr.later { background: var(--bg) }
.sp .tr .chg { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap }
.sp .tr .chg b { font-weight: 600 }
.sp .tr .ck { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--data-soft); color: var(--data); white-space: nowrap }
.sp .tr .chg + .small { display: block }
.sp .pay .tr { grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1.8fr) 64px auto }
.sp .slipc { display: flex; align-items: center }
.sp .slipthumb { all: unset; cursor: zoom-in; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; background: var(--bg); display: block; flex: none }
.sp .slipthumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.sp .slipthumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
@media (max-width: 620px) {
  .sp .pay .tr > :nth-child(5) { grid-column: auto }
  .sp .pay .tr > :nth-child(4), .sp .pay .tr > :nth-child(6) { grid-column: 1 / -1 }
  .sp .pay .tr { grid-template-columns: minmax(0, 1fr) auto }
}
.sp .slipf { display: grid; gap: 4px }
.sp .slipf input[type=file] { padding: 6px; font-size: 13px }
.sp .slipprev { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px dashed var(--line); border-radius: 8px; padding: 6px 8px; margin-top: 4px }
.sp .slipprev img, .sp .slipprev .nopic { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; background: var(--bg) }
.sp .slipprev .nopic { display: grid; place-items: center; font-size: 11px; color: var(--muted); border: 1px solid var(--line) }
.sp .slipprev .small { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere }

/* PromptPay panel */
.sp .pp { display: grid; gap: 10px; border: 1.5px solid var(--data); border-radius: 14px; padding: 12px; background: var(--card) }
.sp .pphead { display: grid; gap: 2px }
.sp .pphead b { font-family: var(--f-display, system-ui, sans-serif); font-size: 16px; color: var(--data) }
.sp .ppbody { display: flex; gap: 14px; flex-wrap: wrap; align-items: center }
.sp .ppqr { width: 180px; height: 180px; flex: none; background: #fff; border-radius: 8px; border: 1px solid var(--line); padding: 4px; box-sizing: border-box }
.sp .ppqr img { width: 100%; height: 100%; display: block; image-rendering: pixelated }
.sp .ppside { display: grid; gap: 6px; flex: 1 1 200px; min-width: 0; align-content: start }
.sp .ppamt { font-family: var(--f-display, system-ui, sans-serif); font-size: 26px; font-variant-numeric: tabular-nums }
.sp .ppacts { display: flex; gap: 8px; flex-wrap: wrap }
.sp .pperr { font-size: 13px; color: var(--bad); font-weight: 600 }
.sp .pperr a { color: var(--brand) }
.sp .ppmsg:empty { display: none }
.sp .ppmsg { color: var(--good) }
@media (max-width: 460px) { .sp .ppqr { margin: 0 auto } .sp .ppacts .btn { flex: 1 1 100%; white-space: normal } }

/* money dialogs */
.sp-dlg label.f { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 0 }
.sp-dlg div.f { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600 }
.sp-dlg div.f b { color: var(--ink); font-size: 15px; padding: 8px 0 }
.sp-dlg input { font: inherit; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0; box-sizing: border-box }
.sp-dlg input:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand) }
.sp-dlg .pfg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.sp-dlg .pfg.two { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) }
@media (max-width: 520px) { .sp-dlg .pfg, .sp-dlg .pfg.two { grid-template-columns: 1fr } }
.sp-dlg .note.calm { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px }
.sp-dlg .radios { display: flex; gap: 6px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; min-width: 0 }
.sp-dlg .radios label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); font-weight: 500; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer }
.sp-dlg .radios input { width: auto; margin: 0; accent-color: var(--brand) }
.sp-dlg .radios label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand) }
.sp-dlg .radios label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px }
.sp-dlg .btn.pri { background: var(--brand); border-color: var(--brand); color: var(--on-brand) }
.sp-dlg a.btn { text-decoration: none }
.sp-dlg .slipbig { display: block; max-width: 100%; max-height: calc(100vh - 220px); margin: 0 auto; border-radius: 8px; border: 1px solid var(--line); background: var(--bg) }
.sp-copybuf { position: fixed; top: 0; left: -9999px; opacity: 0 }
/* the hidden attribute always wins over the display rules above (label.f is a grid, .btn inline-flex …) */
.sp [hidden], .sp-dlg [hidden] { display: none !important }

/* ---- the "Edit shop" sheet (shop.js editSheet): a dialog that slides in from the right, full
   width on a phone. The body scrolls; the title and Save all stay in view. ---- */
.sp .sphero .dhead { align-items: flex-start }   /* the logo stays by the name when the name, its pill and ✎ wrap */
.sp .dhead .nmrow { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; min-width: 0 }
.sp .dhead .nmrow .btn.sm { min-height: 30px; padding: 4px 10px; font-size: 12.5px }
dialog.sp-dlg.es-sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw;
  border-radius: 18px 0 0 18px; border-right: 0; box-shadow: -18px 0 40px rgba(0, 0, 0, .25); overflow: hidden; animation: es-in .24s cubic-bezier(.2, .8, .2, 1) }
@keyframes es-in { from { transform: translateX(100%) } to { transform: none } }
@media (prefers-reduced-motion: reduce) { dialog.sp-dlg.es-sheet { animation: none } }
@media (max-width: 760px) { dialog.sp-dlg.es-sheet { width: 100vw; border-radius: 0; border-left: 0 } }
.es-sheet .es { display: flex; flex-direction: column; height: 100%; min-height: 0 }
.es-sheet .es-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line) }
.es-sheet .es-h h2 { font-size: 20px }
.es-sheet .btn.icon { width: 36px; padding: 0; font-size: 16px }
.es-sheet .es-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 18px; display: grid; gap: 14px; align-content: start }
.es-sheet .es-sec { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-width: 0 }
.es-sheet .es-t { font-family: var(--f-body, system-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.es-sheet .es-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
@media (max-width: 420px) { .es-sheet .es-two { grid-template-columns: 1fr } }
.es-sheet textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0; box-sizing: border-box; resize: vertical }
.es-sheet textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand) }
.es-sheet input.mono { font-family: var(--f-mono, ui-monospace, Menlo, monospace); font-size: 14px }
.es-sheet .note { border-radius: 10px; padding: 10px 12px; font-size: 13px }
.es-sheet .note.calm { background: var(--panel) }
.es-sheet .es-ro { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; overflow-wrap: anywhere }
.es-sheet .es-ro .k { color: var(--muted); font-size: 12px; font-weight: 600; min-width: 60px }
.es-sheet .es-foot { display: grid; gap: 8px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel) }
.es-sheet .okmsg { color: var(--good); font-size: 12.5px; font-weight: 600 } .es-sheet .okmsg:empty { display: none }
.es-sheet .es-acts { display: flex; gap: 8px; flex-wrap: wrap }
.es-sheet .es-acts .btn { flex: 1 1 0; min-height: 40px }
@media (max-width: 480px) { .es-sheet .es-h, .es-sheet .es-body, .es-sheet .es-foot { padding-left: 16px; padding-right: 16px } }
.a-owner .ol-where { margin: 0 }

/* Security: "Sign everyone out" (shop.js securityView, signOutDialog). Its colour and place: screens.css. */
.sp .a-sec .small, .sp .a-sec .seclast { margin: 0 }
.sp .a-sec .seclast { font-size: 13px }
.sp-dlg .note { border-radius: 10px; padding: 10px 12px; font-size: 13px }
.sp-dlg .note.warn { background: var(--mid-bg); color: var(--ink) } .sp-dlg .note.warn b { color: var(--mid) }
.sp-dlg label.tick { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink) }
.sp-dlg label.tick input { width: auto; flex: none; margin-top: 3px }
.sp-dlg label.f b { color: var(--ink) }