/* HERO POS — every screen as a bento, like the Overview: Shops, a shop's page, the Change log,
   Settings and sign-in. The cards, headings, pills and charts are the Overview's own (.ov-card,
   .ov-h, .pill, svg.cv in overview.css); this file only lays each screen out and adds the few
   pieces the Overview doesn't have. Colours are the theme tokens from app.css only. */

.bento { display: grid; gap: 18px; min-width: 0; align-items: start }
.ov-card .ov-h h3 { font-family: var(--f-display); font-size: 15px; font-weight: 700 }
.ov-card .ov-h > .m, .ov-card .ov-h h3 .m { color: var(--muted); font-size: 12px; font-weight: 400; font-family: var(--f-body) }
.hero .ov-h > .m { color: var(--hero-muted) }

/* A light ring on a light card (the hero keeps its own white-on-navy track). */
.ov-card:not(.hero) svg.cv .rtrack { stroke: var(--track) }
svg.cv .rt { fill: var(--ink); font-size: 12px; font-weight: 700 }
.hero svg.cv .rt { fill: var(--hero-ink) }

/* Figures inside the navy hero cards */
.hero .mcard.bare { background: transparent; border: 0; box-shadow: none; padding: 0; color: inherit }
.hero .mcard .ml, .hero .mcard .mx { color: var(--hero-muted) }
.hero .mcard b, .hero .mcard b.w, .hero .mcard b.r, .hero .mcard b.g { color: var(--hero-ink); font-size: 34px; line-height: 1.05 }
.hero .btn { background: rgba(255, 255, 255, .1); color: var(--hero-ink); border-color: rgba(255, 255, 255, .28) }
.hero .btn:hover { border-color: var(--accent) }
.hero .btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.hero .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.hero .ov-h h3 { color: var(--hero-ink) }

/* a thin progress bar (setup, received this month) */
.cbar { display: block; height: 5px; border-radius: 4px; background: var(--track); overflow: hidden }
.cbar b { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 4px }

/* ---------------------------------------------------------------- Shops */
.msum { display: grid; gap: 18px; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); align-items: stretch }
.sumhero { grid-template-rows: auto 1fr auto; align-content: stretch }
.sumhero .hero-mid { align-self: center }
.mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.mtiles .mcard { padding: 14px 16px; border-radius: 16px; gap: 4px; align-content: start }
.mtiles .mcard b { font-size: 24px }
.mtiles .mcard .cbar { margin-top: 6px }
@media (max-width: 1100px) { .msum { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 620px) { .mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px } .mtiles .mcard b { font-size: 20px } }
.shopbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between }
.shopbar .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 }
a.mchip { background: var(--card); border-color: var(--edge) }
a.mchip.on { background: var(--tab-on); color: var(--tab-on-ink); border-color: var(--accent) }

.list.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible }
.shopcard { display: grid; gap: 12px; align-content: start; padding: 16px 18px; background: var(--card); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow); color: var(--ink); min-width: 0 }
.shopcard:hover { border-color: var(--accent) }
.shopcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
.sc-top { display: flex; gap: 12px; align-items: center; min-width: 0 }
.logo.av { width: 42px; height: 42px; border-radius: 12px; font-size: 18px }
.sc-id { display: grid; min-width: 0 }
.shopcard .nm { font-family: var(--f-display); font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; min-width: 0 }
.shopcard .nm > span:first-child { overflow-wrap: anywhere }
.shopcard .ad { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere }
.shopcard .stc, .shopcard .sv { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.shopcard .k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.chip { font-size: 11.5px; padding: 2px 9px; border-radius: 6px; background: var(--ghost); color: var(--ink) }
.chip.none { color: var(--muted) }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px }
.figs > span { display: grid; gap: 1px; min-width: 0 }
.fk { font-size: 11px; color: var(--muted) }
.figs b { font-family: var(--f-display); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap }
.figs b.bad { color: var(--bad) } .figs b.warn { color: var(--mid) }
.shopcard .stt { display: flex; gap: 8px; align-items: center; font-size: 12.5px; flex-wrap: wrap }
.shopcard .cks { margin-left: auto; font-size: 12px; color: var(--muted) }
.shopcard .cks.done { color: var(--good) }

/* ---------------------------------------------------------------- Change log */
.logb { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  grid-template-areas: "hero week pay chart" "filter list list list"; align-items: stretch }
.lg-hero { grid-area: hero } .lg-week { grid-area: week } .lg-pay { grid-area: pay }
.lg-chart { grid-area: chart } .lg-filter { grid-area: filter; align-self: start; position: sticky; top: 84px } .lg-list { grid-area: list; padding: 6px 18px 12px }
.logb > .mcard.lg-week, .logb > .mcard.lg-pay { padding: 16px 18px; border-radius: 18px; align-content: start; gap: 4px }
.lg-week b, .lg-pay b { font-size: 26px }
@media (max-width: 1100px) {
  .logb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero chart" "week pay" "filter filter" "list list" }
  .lg-filter { position: static }
}
@media (max-width: 620px) { .logb { grid-template-areas: "hero hero" "week pay" "chart chart" "filter filter" "list list"; gap: 12px } .lg-list { padding: 4px 12px 10px } }
.lg-filter .logf { min-width: 0; width: 100% }
.lg-list .log { border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible }
.lggroup + .lggroup { margin-top: 6px }
.lgday { font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--muted); padding: 12px 0 4px; border-bottom: 1px solid var(--line) }
.lg-list .lg { grid-template-columns: 28px 46px minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start }
.lggroup .lg:first-of-type { border-top: 0 }
.lggroup:first-child .lgday { padding-top: 6px }
.lg-list .lg time { padding-top: 5px }
.lgi { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, currentColor 15%, transparent) }
.lgi svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.lgi.k-payment { color: var(--good) } .lgi.k-correction { color: var(--bad) } .lgi.k-slip { color: var(--data) }
.lgi.k-switch { color: var(--accent3) } .lgi.k-contract { color: var(--accent2) } .lgi.k-note { color: var(--mid) }
.lgi.k-document { color: var(--data) } .lgi.k-settings { color: var(--muted) } .lgi.k-shop { color: var(--shop) } .lgi.k-other { color: var(--muted) }
:root[data-hq-theme="night"] .lgi.k-switch { color: var(--accent) }
@media (max-width: 520px) { .lg-list .lg { grid-template-columns: 28px minmax(0, 1fr) } .lg-list .lg time { grid-column: 2 } .lg-list .lg .w { grid-column: 2 } }
svg.cv .bb.today { fill: var(--accent) }

/* ---------------------------------------------------------------- Settings */
.setb { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "hero pay pay" "rem rem rem" "bk bk exp" "srv srv srv" }
.set-hero { grid-area: hero; align-self: stretch; grid-template-rows: auto 1fr auto auto } .set-pay { grid-area: pay } .set-rem { grid-area: rem } .set-bk { grid-area: bk } .set-exp { grid-area: exp } .set-srv { grid-area: srv }
@media (max-width: 1100px) { .setb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero pay" "rem rem" "bk bk" "exp exp" "srv srv" } }
@media (max-width: 760px) { .setb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "pay" "rem" "bk" "exp" "srv"; gap: 14px } }
.setb .card.setc { border-radius: 18px; padding: 16px 18px }
.set-hero .hero-mid { align-self: center }
.set-hero .num { font-family: var(--f-display); font-size: 34px; font-weight: 700; line-height: 1 }
.set-hero .btn { justify-self: start }
.bkmark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none }
.bkmark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.bkmark.ok { color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent) }
.bkmark.off { color: #f2c14e; box-shadow: inset 0 0 0 4px rgba(242, 193, 78, .85) }
.ppprev { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px }
.qrph { width: 64px; height: 64px; flex: none; border-radius: 10px; background: var(--bg); color: var(--muted); display: grid; place-items: center }
.qrph svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.2 }
.ppprev b { color: var(--ink); font-family: var(--f-mono); font-size: 13px }

/* ---------------------------------------------------------------- A shop's page */
/* One grid of coloured cards (the owner's pick C+, 11 Oct 2026). Each card's width and place come
   from its area class; rows line up so no card leaves a hole. Each category has its own colour
   (a bar on top, a soft tint, an icon by its heading) so a box is found by colour, not by reading.
   Wide: 12 columns. Laptop: halves. Phone: one column, in the same order. */
.sp.spg { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch }
.sp-records, .sp .rec, .ol-slot { display: contents }
:where(.spg) .ov-card { grid-column: span 12; min-width: 0 }
.spg .a-hero { grid-column: span 4; order: 1 } .spg .a-agr { grid-column: span 8; order: 2 }
.spg .a-svc { grid-column: span 4; grid-row: span 2; order: 3 } .spg .a-own { grid-column: span 4; order: 4 } .spg .a-need { grid-column: span 4; order: 5 }
.spg .a-owner { grid-column: span 4; order: 6 } .spg .a-sec { grid-column: span 4; order: 6 } .spg .a-ck { grid-column: span 4; order: 7 }
.spg .a-bill { grid-column: span 6; order: 8 } .spg .a-pay { grid-column: span 6; order: 9 }
.spg .a-docs { grid-column: span 6; order: 10 } .spg .a-notes { grid-column: span 6; order: 11 }
.sp.spg { grid-auto-flow: row dense }
@media (max-width: 1180px) {
  .spg .a-hero, .spg .a-svc, .spg .a-own, .spg .a-need, .spg .a-owner, .spg .a-sec, .spg .a-ck, .spg .a-docs, .spg .a-notes { grid-column: span 6 }
  .spg .a-svc { grid-row: auto }
  .spg .a-agr, .spg .a-bill, .spg .a-pay { grid-column: span 12 }
  .spg .a-need { order: 2 } .spg .a-agr { order: 3 }
}
@media (max-width: 760px) { .spg .ov-card.ov-card { grid-column: span 12 } .sp.spg { gap: 12px } }

/* category colours: deeper on the light looks, brighter at night */
:root { --c-agr: #2f5fd0; --c-need: #a86a00; --c-svc: #0d8a6a; --c-own: #a3780a; --c-bill: #0b8597; --c-pay: #4f8a16; --c-owner: #b8346f; --c-ck: #1f74b3; --c-docs: #56637f; --c-notes: #7a4bc4 }
:root[data-hq-theme="night"] { --c-agr: #6f9bff; --c-need: #f2c14e; --c-svc: #35e0b0; --c-own: #f7d070; --c-bill: #2fdcec; --c-pay: #a3e36b; --c-owner: #ff9ad5; --c-ck: #7cc8ff; --c-docs: #b8c4d9; --c-notes: #c9adf5 }
@media (prefers-color-scheme: dark) { :root:not([data-hq-theme]) { --c-agr: #6f9bff; --c-need: #f2c14e; --c-svc: #35e0b0; --c-own: #f7d070; --c-bill: #2fdcec; --c-pay: #a3e36b; --c-owner: #ff9ad5; --c-ck: #7cc8ff; --c-docs: #b8c4d9; --c-notes: #c9adf5 } }
.spg .a-agr { --cat: var(--c-agr) } .spg .a-need { --cat: var(--c-need) } .spg .a-svc { --cat: var(--c-svc) } .spg .a-own { --cat: var(--c-own) }
.spg .a-bill { --cat: var(--c-bill) } .spg .a-pay { --cat: var(--c-pay) } .spg .a-owner { --cat: var(--c-owner) } .spg .a-ck { --cat: var(--c-ck) }
.spg .a-docs { --cat: var(--c-docs) } .spg .a-notes { --cat: var(--c-notes) }
/* Security (shop.js securityView): the danger colour, a padlock — it signs a whole shop out */
.spg .a-sec { --cat: var(--bad) }
.spg .a-sec { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") }
.spg .a-agr { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") }
.spg .a-need { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") }
.spg .a-svc { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='22' height='12' rx='6'/%3E%3Ccircle cx='16' cy='12' r='3'/%3E%3C/svg%3E") }
.spg .a-own { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") }
.spg .a-bill { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") }
.spg .a-pay { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") }
.spg .a-owner { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 21 2M17 6l3 3'/%3E%3C/svg%3E") }
.spg .a-ck { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") }
.spg .a-docs { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E") }
.spg .a-notes { --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") }
.spg .ov-card[class*=" a-"]:not(.a-hero) { border-top: 5px solid var(--cat, var(--edge));
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat, transparent) 13%, transparent) 0, transparent 110px), var(--card) }
.spg .ov-card:not(.a-hero) > .ov-h h3, .spg .ov-card:not(.a-hero) > section > .ov-h h3, .spg .ov-card .rec-head h3 { position: relative; padding-left: 44px; min-height: 34px; display: flex; align-items: center; font-size: 17px }
.spg .ov-card:not(.a-hero) > .ov-h h3::before, .spg .ov-card:not(.a-hero) > section > .ov-h h3::before, .spg .ov-card .rec-head h3::before { content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 10px; background: color-mix(in srgb, var(--cat, var(--muted)) 18%, transparent) }
.spg .ov-card:not(.a-hero) > .ov-h h3::after, .spg .ov-card:not(.a-hero) > section > .ov-h h3::after, .spg .ov-card .rec-head h3::after { content: ""; position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--cat, var(--muted)); -webkit-mask: var(--cat-icon) center / contain no-repeat; mask: var(--cat-icon) center / contain no-repeat }

/* the shop's own card: contact inside, three quick facts at the bottom */
.spcontact { display: grid; gap: 6px; border-top: 1px solid var(--hero-edge, rgba(255,255,255,.18)); padding-top: 12px; min-width: 0 }
.spcontact .sch, .spcontact .scr { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0 }
.spcontact .k, .spfacts .m { color: var(--hero-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase }
.spcontact .small, .spfacts .small { color: var(--hero-muted); overflow-wrap: anywhere }
.spcontact .shopnotes { margin: 0; color: var(--hero-muted); font-size: 13px }
.spfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto }
.spfacts .fact { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; background: rgba(4, 14, 32, .32); min-width: 0 }
.sphero { display: flex; flex-direction: column }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px }

/* This agreement */
.agrline { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between }
.seg { display: inline-flex; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden }
.seg .btn { border: 0; border-radius: 0 } .seg .btn.on { background: var(--brand); color: var(--on-brand) }
.mstrip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px }
.ms { display: grid; place-items: center; gap: 0; padding: 4px 2px; border-radius: 8px; font-size: 11px; line-height: 1.2; min-width: 0; background: var(--track); color: var(--muted) }
.ms b { font-size: 12px } .ms i { font-style: normal; font-size: 10px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100% }
.ms.paid { background: var(--accent); color: var(--on-accent) } .ms.free { background: var(--good); color: var(--on-brand) }
.ms.next, .ms.due { background: var(--mid); color: var(--on-brand) } .ms.late { background: var(--bad); color: #fff }
.mkey { display: flex; flex-wrap: wrap; gap: 4px 14px } .mkey .ms { display: inline-block; width: 12px; height: 12px; padding: 0; vertical-align: -1px; margin-right: 4px }
.aboxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.agrcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.abox { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); min-width: 0 }
.abox > .m { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase } .abox > b { font-family: var(--f-display); font-size: 20px }
.abox .li, .need { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); min-width: 0 }
.abox .li:last-child { border-bottom: 0 }
.bset.grace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px }
@media (max-width: 760px) { .aboxes { grid-template-columns: repeat(2, minmax(0, 1fr)) } .agrcols { grid-template-columns: minmax(0, 1fr) } .mstrip { grid-template-columns: repeat(6, minmax(0, 1fr)) } }

/* Needs you */
.needs { display: grid } .need { justify-content: flex-start; align-items: flex-start } .need:last-child { border-bottom: 0 }
.need .ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--ghost) }
.need.bad .ic { background: var(--bad-bg); color: var(--bad) } .need.warn .ic { background: var(--mid-bg); color: var(--mid) }
.need.good .ic { background: var(--good-bg); color: var(--good) } .need.info .ic { background: var(--brand-soft); color: var(--brand) }
.askbox { border-top: 1px solid var(--line); padding-top: 12px }

/* Create payment plan */
.planform .pfrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.planform .lbl { font-weight: 600; font-size: 14px }
.planform .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
@media (max-width: 900px) { .planform .plans { grid-template-columns: minmax(0, 1fr) } }
.planform .inl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap } .planform .inl input[type=number] { width: 84px }
.planform .seg label { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 40px; cursor: pointer }
.planform .seg label:has(input:checked) { background: var(--brand); color: var(--on-brand) } .planform .seg input { position: absolute; opacity: 0 }
.ptl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line) }
.ptl .tl { display: grid; gap: 2px; padding-top: 8px; border-top: 3px solid var(--track); min-width: 0 }
.ptl .tl.free { border-top-color: var(--good) } .ptl .tl.paid { border-top-color: var(--accent) }
.ptl .tl .m { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em }
@media (max-width: 760px) { .planform .pfrow, .ptl { grid-template-columns: minmax(0, 1fr) } }

/* Special services and their More info window */
.a-own .mod .btn.sm { margin-top: 6px }
.pill.only { background: color-mix(in srgb, var(--c-own) 20%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--c-own) 55%, transparent) }
dialog.sp-dlg:has(.sidlg) { width: min(940px, calc(100vw - 32px)) } .sidlg .sihead { display: flex; gap: 8px; flex-wrap: wrap }
.sipics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px }
.sipics figure { margin: 0; display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line) }
.sipics img { width: 100%; height: auto; border-radius: 8px; display: block }
.sigrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.siblk { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); min-width: 0 }
.siblk > .m { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em } .siblk ul { margin: 0; padding-left: 18px }
@media (max-width: 760px) { .sigrid { grid-template-columns: minmax(0, 1fr) } }
/* The Owner's login card (owner.js) draws into its own slot, which joins the grid as a card */
.a-owner .ol-state, .a-owner .ol-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.a-owner > .small, .a-owner .ol-state + .small { margin: 0; overflow-wrap: anywhere }
.a-owner .ol-mail { margin: 0 }
/* the new password or link fades in under the buttons rather than popping in */
@media (prefers-reduced-motion: no-preference) { .a-owner [data-ol-out] { animation: ol-in .28s ease-out both } }
@keyframes ol-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.a-owner .ol-out { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; min-width: 0 }
.a-owner .ol-out .okmsg { margin: 0 }
.a-owner .ol-link { font-family: var(--f-mono); font-size: 12.5px }
.a-owner .ol-text { resize: vertical; line-height: 1.5; font-size: 13px }
.a-owner .ol-said:empty { display: none }
.a-owner .ol-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; overflow-wrap: anywhere }
.a-owner .ol-k { color: var(--muted); font-size: 12px; font-weight: 600; min-width: 92px }
.a-owner .ol-login + .small, .a-owner #ol-need { margin: 0 }
.a-owner .ol-give { display: grid; gap: 8px; margin: 0; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line) }
.a-owner .ol-give div { display: grid; gap: 2px }
.a-owner .ol-give dt { font-size: 12px; color: var(--muted); font-weight: 600 }
.a-owner .ol-give dd { margin: 0; overflow-wrap: anywhere }
.a-owner .ol-pw { font-family: var(--f-mono); font-size: 20px; font-weight: 700; letter-spacing: .08em; padding: 8px 10px }
/* Settings › Email */
.set-mail .bkstate dd.mono { overflow-wrap: anywhere }
.sp .ov-card { gap: 12px }
.sp .ov-card .sub { margin-top: 2px }
/* inside a card, the inner boxes are flat: one level of card only */
.sp .ov-card .mod { background: var(--bg); box-shadow: none; border-color: var(--line); border-radius: 12px }
.sp .ov-card .mod.off { background: transparent }
.sp .ov-card .mod.only { border-color: var(--shop) } .sp .ov-card .mod.only.off { border-color: var(--line) }
.sp .ov-card .tbl, .sp .ov-card .comps { box-shadow: none; background: transparent; border-color: var(--line); border-radius: 12px }
.sp .ov-card .payform { background: var(--bg); border-color: var(--line); border-radius: 12px }
.sp .ov-card .pp { border: 0; padding: 0; background: transparent }
.sp .spchart { display: grid; gap: 6px }

.sp .sphero { gap: 14px }
.spnav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.sp .spnav .btn { min-height: 32px; padding: 5px 12px; font-size: 12.5px }
.sp .spnav .navb { width: 32px; padding: 0; font-size: 18px; line-height: 1 }
.sp .spnav span.navb { opacity: .35; cursor: default }
.sp .spnav select { width: auto; max-width: 220px; min-width: 0; flex: 0 1 220px; padding: 5px 10px; font-size: 13px; background: rgba(255, 255, 255, .1); color: var(--hero-ink); border-color: rgba(255, 255, 255, .28); color-scheme: dark }
.sp .spnav select option { color: #17243f; background: #fff }
:root[data-hq-theme="night"] .sp .spnav select option { color: #e6f1ff; background: #0f2a4f }
.sp .sphero .dhead .nm { color: var(--hero-ink); font-size: 22px }
.sp .sphero .dhead .addr { color: var(--hero-muted) }
.sp .sphero .logo { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-radius: 12px }
.sp .sphero .btn.danger { color: #ffb3ba; border-color: rgba(255, 150, 160, .6); background: transparent }
.sp .sphero .btn.goodb.solid { background: #35e0b0; border-color: #35e0b0; color: #04202a }
.sp .sphero .btn { background: rgba(255, 255, 255, .1); color: var(--hero-ink); border-color: rgba(255, 255, 255, .28) }
.sp .sphero .btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.spfigs { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end }
.spfigs > div { display: grid; gap: 2px; min-width: 0 }
.spfigs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start } .spfigs .small { color: var(--hero-muted) }
.spfigs .m { color: var(--hero-muted); font-size: 12px }
.spfigs b { font-family: var(--f-display); font-size: 17px; font-variant-numeric: tabular-nums }
.spfigs b.num { font-size: 34px; line-height: 1.05; letter-spacing: -.01em }
@media (max-width: 520px) { .spfigs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .spfigs > div:first-child { grid-column: 1 / -1 } }
.spacts { display: flex; gap: 8px; flex-wrap: wrap }
.spacts:empty { display: none }
.sp .sphero .note { color: var(--ink) }
.sp .sphero .note.dark { background: rgba(255, 255, 255, .1); color: var(--hero-ink) }
.sp .sphero .pill.quiet { background: rgba(255, 255, 255, .12); color: var(--hero-ink); border-color: transparent }
.sp dl.contact { margin: 0; display: grid; gap: 8px; font-size: 14px }
.sp dl.contact div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: baseline }
.sp dl.contact dt { color: var(--muted); font-size: 12.5px }
.sp dl.contact dd { margin: 0; font-weight: 600; overflow-wrap: anywhere }
.rec-ckr { display: inline-flex; gap: 10px; align-items: center }

/* ---------------------------------------------------------------- Sign-in and setup */
.authcard { --ap: 24px; padding: var(--ap); overflow: hidden; border-radius: 20px }
@media (max-width: 420px) { .authcard { --ap: 16px; padding: var(--ap) } }
.authhero { margin: calc(-1 * var(--ap)) calc(-1 * var(--ap)) 4px; padding: 22px var(--ap) 20px; background: var(--hero); color: var(--hero-ink); display: grid; gap: 6px }
.authhero .brandmark { color: var(--hero-ink) }
.authhero p { color: var(--hero-muted); font-size: 13px; margin: 0 }
.authhero .authh { font-size: 26px }

/* ---------------------------------------------------------------- Servers (system.js) */
/* A shop's System line, in its navy hero: a pill, how long it has been up, its address. */
.spsys { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; min-width: 0 }
.spsys > .m { color: var(--hero-muted); font-size: 12px }
.spsys-t { color: var(--hero-muted) }
.spsys-t:empty { display: none }
.spsys-a { color: var(--hero-ink); font-family: var(--f-mono); font-size: 12px; overflow-wrap: anywhere; text-underline-offset: 3px }
.spsys-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.sp .sphero .spsys .pill.good { background: rgba(53, 224, 176, .16); color: #7ff0cc }
.sp .sphero .spsys .pill.warn { background: rgba(255, 200, 90, .16); color: #ffd98a }
.sp .sphero .spsys .pill.bad { background: rgba(255, 150, 160, .16); color: #ffb3ba }
.spsys-slot { display: grid; gap: 8px }
.spsys-slot:empty { display: none }
/* The Servers card on Settings: the Overview's own table. */
.set-srv .ov-table tbody tr { cursor: default }
.set-srv .ov-table td:last-child { white-space: normal; color: var(--muted) }
.set-srv .note { border-radius: 10px; padding: 10px 12px; font-size: 13px }
.set-srv .note.bad { background: var(--bad-bg); color: var(--bad) }
.srv-you .mono, .set-srv .mono { font-family: var(--f-mono); font-size: 12px }

/* Logins (logins.js; owner's pick C, app/mockups/hq-logins-options.html): the shop's sign-in links in
   a dark block with "Copy all", people grouped Owner → Staff → Shared phones. The card on a shop's
   page sits full width just before the Owner's login card and shares its colour; the Logins tab
   folds each shop. */
.lgn-slot { display: contents }
.spg .a-logins { grid-column: span 12; order: 6; --cat: var(--c-owner); --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 21 2M17 6l3 3'/%3E%3C/svg%3E") }
.lgn-split { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; align-items: start }
.lgn-links { background: var(--hero); color: var(--hero-ink); border: 1px solid var(--hero-edge); border-radius: 14px; padding: 14px; display: grid; gap: 8px; min-width: 0 }
.lgn-links h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--hero-muted) }
.lgn-links .small { color: var(--hero-muted) }
.lgn-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 8px; min-width: 0 }
.lgn-link > span { display: grid; min-width: 0 }
.lgn-link .k { font-size: 12px; color: var(--hero-muted) }
.lgn-link .mono { color: var(--hero-ink); overflow-wrap: anywhere }
.lgn-links .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: var(--hero-ink) }
.lgn-links .btn:hover { border-color: rgba(255, 255, 255, .6) }
.lgn-all { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 10px }
.lgn-all .btn { width: 100%; justify-content: center }
.lgn-people { display: grid; min-width: 0 }
.lgn-sec { margin: 0; padding: 10px 2px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
.lgn-sec:first-child { padding-top: 0 }
.lgn-people > .small { padding: 4px 2px 6px; margin: 0 }
.lgn-list { list-style: none; margin: 0; padding: 0 }
.lgn-p { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line) }
.lgn-list .lgn-p:last-child { border-bottom: 0 }
.lgn-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--brand-soft); color: var(--brand) }
.lgn-who { min-width: 0; display: grid; gap: 2px }
.lgn-who .t { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.lgn-who .s { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere }
.lgn-role { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); white-space: nowrap }
.lgn-role.own { background: var(--hero); color: var(--hero-ink) }
.lgn-pw { margin: 0; max-width: none; overflow-wrap: anywhere }
.lgn-people .btn.done, .lgnb .btn.done { border-color: var(--good); color: var(--good) }
.lgn-links .btn.done { border-color: var(--good); color: var(--hero-ink) }
.lgn-people .note.bad { border-radius: 10px; padding: 10px 12px; font-size: 13px; background: var(--bad-bg); color: var(--bad) }

.lgnp .lgnb { display: grid; gap: 14px }
.lgn-top { margin-left: auto }
.lgn-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.lgn-bar input { flex: 1 1 260px; min-width: 0; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px }
.lgn-bar input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px }
.lgn-chips { display: flex; flex-wrap: wrap; gap: 6px }
.lgn-chip { all: unset; box-sizing: border-box; cursor: pointer; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted) }
.lgn-chip:hover { border-color: var(--muted) }
.lgn-chip[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600 }
.lgn-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.lgn-shops { display: grid; gap: 10px }
.lgn-shop { border: 1px solid var(--line); border-radius: 12px; background: var(--panel) }
.lgn-shop > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center }
.lgn-shop > summary::-webkit-details-marker { display: none }
.lgn-shop > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s ease-out; margin-right: 2px }
.lgn-shop[open] > summary::before { transform: rotate(45deg) }
.lgn-shop > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 12px }
.lgn-shop > summary .n { font-weight: 600 }
.lgn-shop > summary .c { font-size: 12.5px; color: var(--muted) }
.lgn-shop > summary .sp { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px }
.lgn-shop > summary a.btn { text-decoration: none }
.lgn-shop[open] > summary { border-bottom: 1px solid var(--line) }
.lgn-body { padding: 12px 14px }
.lgn-none { margin: 0 }
@media (max-width: 760px) {
  .lgn-split { grid-template-columns: minmax(0, 1fr) }
  .lgn-shop > summary .sp { margin-left: 0; width: 100% }
  .lgn-p { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px }
  .lgn-av { width: 28px; height: 28px }
}
@media (prefers-reduced-motion: reduce) { .lgn-shop > summary::before { transition: none } }

/* Groups (#/groups, rings.js): Shops, Tester and Demo side by side, each with its version */
.rg-bento { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) }
.rg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.rg-head h3 { margin: 0 }
.rg-shops { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.rg-shops li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--line) }
.rg-shops li .btn { margin-left: auto }
.rg-shops .mono { overflow-wrap: anywhere }
.rg-tester { border-color: color-mix(in srgb, var(--mid) 45%, var(--line)) }
.rg-pdpa { margin-top: 12px }