/* v0.24.3 — icon safety net, room kit, dispute flow, personal notices. */

/* Icons rendered without a component rule used to fall back to the SVG default size (300x150)
   and showed up huge (e.g. the camera on the practice result dialog). :where() keeps this at
   zero specificity so every existing component size still wins. */
:where(svg.icon) { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }
:where(svg.icon:not(.icon--stroke)) { fill: currentColor; }
:is(.sm-dispute, .sm-roomkit, .sm-roomkit__choices, .sm-tn) .btn svg.icon { width: 16px; height: 16px; margin-right: 6px; fill: currentColor; }

/* Practice result picker: same compact tile as the public review picker, text may wrap. */
.sm-scan-pick { margin-top: 0; }
.sm-scan-pick .v20-file__text small { white-space: normal; line-height: 1.35; }

/* Room kit */
.sm-roomkit { display: grid; gap: 10px; margin-top: 8px; }
.sm-roomkit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sm-roomkit__cell { display: grid; gap: 4px; min-width: 0; }
.sm-roomkit__cell small { font-size: 10.5px; letter-spacing: .08em; color: var(--on-surface-variant); }
.sm-roomkit__val { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 12px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-container)); color: var(--on-surface); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .1s ease, background .15s ease; }
.sm-roomkit__val:active { transform: scale(.97); background: color-mix(in srgb, var(--primary) 18%, var(--surface-container)); }
.sm-roomkit__val b { font-size: 17px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; -webkit-user-select: all; }
.sm-roomkit__copy { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); flex: none; }
.sm-roomkit__copy svg { width: 16px; height: 16px; fill: currentColor; }
.sm-roomkit__acts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.sm-roomkit__acts .btn { min-height: 42px; justify-content: center; }
.sm-roomkit__note { margin: 0; font-size: 12px; color: var(--on-surface-variant); }
.sm-roomkit.is-compact .sm-roomkit__val { min-height: 42px; }
.sm-roomkit.is-compact .sm-roomkit__val b { font-size: 15px; }
.sm-roomkit__choices { display: grid; gap: 10px; }
.sm-roomkit__choices .btn { justify-content: flex-start; min-height: 50px; }

/* Disputes */
.v18-status.is-warn { color: #ffcf70; background: color-mix(in srgb, #ffb020 16%, transparent); }
.v18-status.is-danger { color: var(--error); background: color-mix(in srgb, var(--error) 14%, transparent); }
.btn.danger-ghost { background: transparent; color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 45%, transparent); }
.btn.danger-ghost:active { background: color-mix(in srgb, var(--error) 12%, transparent); }
.v18-row.is-mine { box-shadow: inset 3px 0 0 var(--primary); }
.v18-row.has-dispute { background: color-mix(in srgb, #ffb020 6%, transparent); }
.sm-dispute { display: grid; gap: 8px; margin-top: 8px; }
.sm-dispute__chip { justify-self: start; }
.sm-dispute__notes { display: grid; gap: 4px; margin: 0; font-size: 12.5px; }
.sm-dispute__notes div { display: grid; grid-template-columns: auto 1fr; gap: 6px; }
.sm-dispute__notes dt { color: var(--on-surface-variant); font-weight: 600; }
.sm-dispute__notes dt::after { content: ':'; }
.sm-dispute__notes dd { margin: 0; overflow-wrap: anywhere; }
.sm-dispute__ask { padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary) 10%, var(--surface-container)); }
.sm-dispute__ask p { margin: 0 0 8px; font-size: 13px; }
.sm-dispute__ask-row, .sm-dispute__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-dispute__ask-row .btn, .sm-dispute__acts .btn { min-height: 38px; }
.sm-dispute-banner { margin: 0 0 10px; }
.sm-dispute__quote { margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-container-high); font-size: 13px; }
.sm-dispute__kills { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.sm-dispute__kills legend { font-size: 13px; color: var(--on-surface-variant); margin-bottom: 4px; }
.sm-dispute__kill { display: grid; grid-template-columns: 1fr 84px; align-items: center; gap: 10px; }
.sm-dispute__kill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-dispute__kill input { text-align: center; min-height: 42px; }
.sm-dispute__preview { margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, transparent); font-size: 13px; }
.sm-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--outline-variant, #444); background: var(--surface-container); color: var(--on-surface); font-size: 12.5px; }
.sm-chip:active { transform: scale(.96); }
.sm-disputes-card .sm-disputes-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--v18-hairline, rgba(255,255,255,.08)); }
.sm-disputes-card .sm-disputes-item:first-of-type { border-top: 0; }
.sm-disputes-item__main { display: grid; gap: 2px; min-width: 0; }
.sm-disputes-item__main small { color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Personal notice popup */
.sm-pnotice { display: grid; gap: 12px; }
.sm-pnotice__item { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface-container-high); border-left: 3px solid var(--primary); }
.sm-pnotice__item.is-warning { border-left-color: #ffb020; }
.sm-pnotice__item.is-success { border-left-color: var(--sm-success, #7bd88f); }
.sm-pnotice__item b { font-size: 15px; }
.sm-pnotice__item p { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sm-pnotice__item small { color: var(--on-surface-variant); font-size: 11.5px; }

/* Admin targeted notice */
.sm-tn-picked { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; }
.sm-tn-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 16%, transparent); font-size: 12.5px; }
.sm-tn-pill button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.25); color: inherit; line-height: 1; }
.sm-tn-results { display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.sm-tn-result { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-container); border: 0; color: var(--on-surface); text-align: left; }
.sm-tn-result small { color: var(--on-surface-variant); }
.sm-tn-result.is-picked { outline: 1px solid var(--primary); }
.sm-tn-history { display: grid; gap: 6px; }
.sm-tn-history li { list-style: none; padding: 8px 10px; border-radius: 10px; background: var(--surface-container); font-size: 13px; }
.sm-tn-history small { color: var(--on-surface-variant); display: block; }
.v18-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v18-section__head h2 { margin: 0; font-size: 16px; }
.sm-adm-dispute { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: var(--surface-container); border: 1px solid var(--v18-hairline, rgba(255,255,255,.08)); }
.sm-adm-dispute__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* v0.24.4 — Admin → Overview: connection check + lifetime stats */
.sm-conn__list { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 6px; }
.sm-conn__row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-container, rgb(255 255 255 / .04)); }
.sm-conn__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.sm-conn__row.is-ok .sm-conn__dot { background: rgb(52 199 89 / .18); color: #34C759; }
.sm-conn__row.is-warn .sm-conn__dot { background: rgb(255 200 61 / .18); color: #FFC83D; }
.sm-conn__row.is-bad .sm-conn__dot { background: rgb(255 69 58 / .18); color: #FF453A; }
.sm-conn__main { min-width: 0; display: grid; gap: 2px; }
.sm-conn__main b { font-size: 14px; }
.sm-conn__main small { color: var(--on-surface-variant); font-size: 12px; overflow-wrap: anywhere; }
.sm-conn__ms { font-size: 12px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.sm-adm-badge.is-ok { background: rgb(52 199 89 / .16); color: #34C759; }

.sm-life__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 10px; }
.sm-life__grid > div { padding: 12px; border-radius: 16px; background: var(--surface-container, rgb(255 255 255 / .04)); display: grid; gap: 2px; }
.sm-life__grid b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sm-life__grid small { font-size: 11.5px; color: var(--on-surface-variant); line-height: 1.25; }
.sm-life__records { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.sm-life__records > div { padding: 12px; border-radius: 16px; display: grid; gap: 2px; background: linear-gradient(135deg, rgb(255 200 61 / .14), rgb(255 200 61 / .03)); border: 1px solid rgb(255 200 61 / .22); }
.sm-life__records small { font-size: 11.5px; color: var(--on-surface-variant); }
.sm-life__records b { font-size: 20px; font-weight: 800; color: var(--primary); }
.sm-life__records span { font-size: 12.5px; overflow-wrap: anywhere; }
.sm-life__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.sm-life__list h4 { margin: 0 0 6px; font-size: 13px; color: var(--on-surface-variant); font-weight: 600; }
.sm-life__list ol { margin: 0; padding: 0; list-style: none; counter-reset: lr; display: grid; gap: 4px; }
.sm-life__list li { counter-increment: lr; display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-container, rgb(255 255 255 / .04)); font-size: 13.5px; }
.sm-life__list li::before { content: counter(lr); font-weight: 800; color: var(--primary); text-align: center; }
.sm-life__list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-life__list li b { font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* v0.24.4 — setup-required screen (shown only when config.js has no Supabase URL/key) */
.setup-required-screen { min-height: 100dvh; display: grid; place-items: start center; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); background: var(--surface); }
.setup-required-card { width: 100%; max-width: 480px; padding: 22px 18px; border-radius: 24px; background: var(--surface-container); border: 1px solid var(--outline-variant, rgb(255 255 255 / .08)); }
.setup-required-card .logo-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, #F6C445, #D8A527); color: #241A00; }
.setup-required-card .brand-name span { color: var(--primary); }
.setup-required-card .warning-badge { margin-left: auto; font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgb(255 200 61 / .16); color: var(--primary); font-weight: 700; }
.setup-steps-box { display: grid; gap: 14px; margin-top: 16px; }
.setup-step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.setup-step .step-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: rgb(255 200 61 / .18); color: var(--primary); }
.setup-step .step-content { display: grid; gap: 6px; min-width: 0; }
.setup-step .step-content p { margin: 0; color: var(--on-surface-variant); line-height: 1.5; font-size: 14px; }
.setup-step .code-block { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-container-high); font-size: 12px; line-height: 1.5; }
.setup-footer { text-align: center; }

/* Graphics studio fix: theme/backdrop swatch rows no longer widen the sheet (preview + controls stayed zoomed/cropped). */
.v1-gs, .v1-gs__opts { grid-template-columns: minmax(0, 1fr); }
.v1-gs > *, .v1-gs__opts > *, .v1-gs [data-gs-key] { min-width: 0; max-width: 100%; }
.auth-page.modal-scrim > .auth-card { overflow-x: hidden; }