/* Design system: parts several pages draw (listed in BASE in app/feature-styles.js, so every page has them whatever
   page was opened before it). A part drawn by one page only belongs in that page's own sheet. */
/* a content card's inset */
.panel{padding:22px}
@media(max-width:820px){.panel{padding:15px}}
/* a card's title row: heading block and its badge or note; a badge or button keeps its own width */
.panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 14px;flex-wrap:wrap}.panel-title>*{min-width:0;flex:1 1 220px}.panel-title>small,.panel-title>.muted{flex-basis:260px}.panel-title h3{margin:5px 0 var(--sp-3)}
/* a figure tile: label, figure, note, each on its own line */
.metric-card{padding:var(--sp-4) var(--sp-5);display:grid;gap:var(--sp-1);align-content:start}.metric-card span,.metric-card small{color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-base)}.metric-card strong{font-size:var(--fs-2xl);line-height:var(--lh-tight);color:var(--accent-text)}
/* rise and fall colours */
.up{color:var(--success-ink)}.down{color:var(--danger-ink)}
/* a detail page's frame and its back button; pictures and videos inside a suggestion or a report */
.detail-shell{max-width:1050px;margin:auto}.back-btn{margin-bottom:12px;justify-self:start;display:inline-flex;align-items:center;gap:6px;width:auto}.rich-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.rich-media{margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface-2)}.rich-media img,.rich-media video{display:block;width:100%;max-height:520px;object-fit:contain;background:var(--surface-3)}.rich-media figcaption{padding:9px 11px;color:var(--muted);font-size:10px;line-height:1.7}.rich-media:only-child{grid-column:1/-1}.rich-video video{aspect-ratio:16/9}
@media(max-width:820px){.rich-media-grid{grid-template-columns:1fr;gap:9px}.rich-media:only-child{grid-column:auto}.rich-media img,.rich-media video{max-height:62dvh;border-radius:0}.detail-shell{max-width:none}}
/* a suggestion in a short list */
.signal-mini{width:100%;border:0;border-top:1px solid var(--line);background:none;color:var(--text);padding:13px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:start;cursor:pointer}.signal-mini span:nth-child(2){display:grid;gap:5px}.signal-mini small{color:var(--muted);font-size:var(--fs-xs)}.mini-signal-icon{width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center}
/* the status badges of a tracked suggestion */
.tracking-badges{display:flex;gap:7px;flex-wrap:wrap}.tracking-badges .status-chip.warn{border-color:color-mix(in oklab,var(--warn) 25%,transparent)}
/* content lists (shared/content/kit.js): chips, picture, pager, loading and empty states */
.ct-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}.ct-pic{display:block;max-width:100%}.ct-pager{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;align-items:center;margin-top:var(--sp-4)}.ct-num{min-width:40px}.ct-gap{padding:0 4px}.ct-skel{display:grid;gap:var(--sp-3)}.ct-guide{display:grid;gap:var(--sp-2);justify-items:center}.ct-guide .empty__title,.ct-guide .empty__text{margin:0}
/* an embedded booking calendar (booking and consultation) */
.calendly-embed{width:100%;min-width:320px;height:700px;border-top:1px solid var(--line);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);overflow:auto}.calendly-embed iframe{width:100%!important;min-height:700px!important;border:0!important}
@media(max-width:820px){.calendly-embed{height:650px;min-height:560px}.calendly-embed iframe{min-height:650px!important}}
/* a hidden row stays hidden */
.ds-row[hidden]{display:none}
/* the show/hide amounts button */
.pf-eye{display:inline-grid;place-items:center;padding:0;line-height:1;flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:18px;cursor:pointer}.pf-eye:hover{background:var(--surface-3)}
/* code boxes (sign-in and every code confirmation: details, purchases, sessions, membership) */
.ds-otp{display:flex;justify-content:center;gap:var(--sp-2);direction:ltr}.ds-otp__box{flex:1;min-width:0;max-width:54px;height:58px;padding:0;text-align:center;direction:ltr;font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:14px;outline:none;caret-color:var(--accent);transition:border-color var(--dur-2),box-shadow var(--dur-2)}.ds-otp__box.is-filled{border-color:var(--accent-line)}.ds-otp__box:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.ds-otp.has-error .ds-otp__box{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}.ds-otp.has-error{animation:ds-shake .42s}
/* a result card with its picture and buttons (identity, payment, purchases, membership) */
.id-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}.id-result{display:grid;justify-items:center;gap:var(--sp-2);text-align:center;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}.id-result--ok{border-color:color-mix(in oklab,var(--success) 40%,transparent);background:var(--success-soft)}.id-result--warn{border-color:color-mix(in oklab,var(--warn) 40%,transparent);background:var(--warn-soft)}.id-result__title{margin:0;font-size:var(--fs-md)}.id-result__text{margin:0;color:var(--muted);line-height:1.9;font-size:var(--fs-sm)}.id-art{display:block;max-width:160px;height:auto;border-radius:var(--r-md)}.id-art--icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text)}.id-art--icon .ic{width:30px;height:30px}
@media(max-width:560px){.id-actions .ds-btn{flex:1 1 auto}}
@keyframes ds-shake{15%,55%{transform:translateX(-7px)}35%,75%{transform:translateX(7px)}100%{transform:none}}
/* a page title's badge sits beside the title, the page's buttons stay at the far end; badges and buttons in a card's
   title row keep their own width */
.section-head>.badge:not(:last-child),.section-head>.status-chip:not(:last-child){margin-inline-end:auto;align-self:center}.panel-title>.status-chip,.panel-title>.badge,.panel-title>.btn,.panel-title>button,.panel-title>a.btn{flex:none}
/* a badge keeps its own width in a grid cell (it was stretched across the cell) */
.badge,.status-chip,.ds-badge{width:max-content;max-width:100%}