/* The subscription and SMS screens: the approved artboards' structure (cards, panes, order summary) in the application's own design tokens,
   type scale and buttons, so they sit beside the other Practice pages without looking built by someone else. Every class is prefixed ab- so
   nothing else is touched. */

.ab { color: var(--ck-ink); font-family: var(--ck-font); font-size: 0.875rem; line-height: 1.4; }
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }

/* The in-page section bar: stays in view while the page scrolls underneath it. */
.ab-tabs {
    position: sticky; top: 0; z-index: var(--ck-z-pinned); display: flex; flex-wrap: wrap; gap: var(--ck-space-1);
    margin: 0 0 var(--ck-space-4); padding: var(--ck-space-2) 0; background: var(--ck-canvas); border-bottom: 1px solid var(--ck-border);
}
.ab-tabs a { padding: 0.35rem var(--ck-space-3); border-radius: var(--ck-radius-md); color: var(--ck-ink); text-decoration: none; font-weight: 500; }
.ab-tabs a:hover { background: var(--ck-primary-soft); }
.ab-tabs a[aria-current="page"], .ab-tabs a.ab-active { background: var(--ck-primary-soft); color: var(--ck-primary-hover); font-weight: 650; box-shadow: inset 0 -2px 0 var(--ck-primary); }
.ab-section { scroll-margin-top: 3.5rem; }

.ab-sub { margin: 0 0 var(--ck-space-3); color: var(--ck-slate); }
.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-space-2); }

.ab-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--ck-control-md); padding: 0 var(--ck-space-3);
    border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface); color: var(--ck-ink);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.ab-btn:hover:not(:disabled) { border-color: var(--ck-primary); color: var(--ck-primary-hover); }
.ab-btn.ab-primary { background: var(--ck-primary); border-color: var(--ck-primary); color: #fff; }
.ab-btn.ab-primary:hover:not(:disabled) { background: var(--ck-primary-hover); border-color: var(--ck-primary-hover); color: #fff; }
.ab-btn.ab-dark { background: var(--ck-ink); border-color: var(--ck-ink); color: #fff; }
.ab-btn:disabled, .ab-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.ab-btn:focus-visible, .ab-tabs a:focus-visible, .ab-input:focus-visible, .ab-thread:focus-visible { outline: none; box-shadow: var(--ck-focus-ring); }

.ab-grid { display: grid; gap: var(--ck-space-4); }
.ab-grid.ab-cols3 { grid-template-columns: 1.1fr .9fr .9fr; }
.ab-grid.ab-cols2 { grid-template-columns: 1.35fr .65fr; }
.ab-panel { background: var(--ck-surface); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); padding: var(--ck-space-4); }
.ab-panel h2 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; letter-spacing: normal; }
.ab-hint { font-size: 0.75rem; color: var(--ck-slate); }
.ab-tiny { font-size: 0.75rem; color: var(--ck-slate); }
.ab-metric { margin-top: var(--ck-space-3); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-badge { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ck-primary-soft); color: var(--ck-primary-hover); font-size: 0.6875rem; font-weight: 700; }
.ab-badge.ab-warn { background: var(--ck-warning-soft); color: var(--ck-warning-text); }
.ab-badge.ab-bad { background: var(--ck-critical-soft); color: var(--ck-critical-text); }
.ab-progress { height: 0.5625rem; margin: var(--ck-space-3) 0 var(--ck-space-2); border-radius: 999px; background: var(--ck-border); overflow: hidden; }
.ab-progress span { display: block; height: 100%; background: var(--ck-primary); }
.ab-banner { display: flex; align-items: center; gap: var(--ck-space-3); margin-bottom: var(--ck-space-4); padding: var(--ck-space-3) var(--ck-space-4); border: 1px solid #ecd3ad; border-radius: var(--ck-radius-lg); background: var(--ck-warning-soft); }
.ab-banner strong { font-size: 0.875rem; }
.ab-banner .ab-copy { font-size: 0.75rem; color: var(--ck-warning-text); }
.ab-banner .ab-btn { margin-left: auto; background: var(--ck-surface); }
.ab-banner .ab-btn.ab-primary { background: var(--ck-primary); border-color: var(--ck-primary); color: #fff; }
.ab-banner .ab-btn.ab-primary:hover:not(:disabled) { background: var(--ck-primary-hover); border-color: var(--ck-primary-hover); }
.ab-banner.ab-bad { background: var(--ck-critical-soft); border-color: #f1c0c0; }
.ab-banner.ab-bad .ab-copy { color: var(--ck-critical-text); }
.ab-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-space-3); padding: var(--ck-space-3) 0; border-top: 1px solid var(--ck-border); }
.ab-row:first-of-type { border-top: 0; }
.ab-rowtitle { font-weight: 600; }
.ab-price { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ab-price small { display: block; font-weight: 400; font-size: 0.6875rem; color: var(--ck-slate); text-align: right; }
.ab-switcher { display: inline-flex; padding: 0.25rem; border-radius: var(--ck-radius-md); background: var(--ck-border); }
.ab-switcher button { padding: 0.35rem var(--ck-space-3); border: 0; border-radius: var(--ck-radius-sm); background: transparent; color: var(--ck-ink); font: inherit; font-size: 0.75rem; cursor: pointer; }
.ab-switcher button.ab-on { background: var(--ck-surface); box-shadow: 0 1px 3px rgb(21 35 43 / 14%); font-weight: 700; }
.ab-switcher button:disabled { cursor: default; }
.ab-callout { margin-top: var(--ck-space-3); padding: var(--ck-space-3); border-radius: var(--ck-radius-lg); background: var(--ck-primary-soft); color: var(--ck-primary-pressed); font-size: 0.8125rem; }
.ab-gst { font-size: 0.75rem; font-weight: 600; color: var(--ck-slate); letter-spacing: 0.04em; }
.ab-docknote { margin-top: var(--ck-space-4); font-size: 0.75rem; color: var(--ck-slate); }
.ab-panel > .ab-btn { margin-top: var(--ck-space-3); }
.ab-alert { margin-bottom: var(--ck-space-4); padding: var(--ck-space-3) var(--ck-space-4); border: 1px solid #ecd3ad; border-radius: var(--ck-radius-lg); background: var(--ck-warning-soft); color: var(--ck-warning-text); }
.ab-alert.ab-bad { background: var(--ck-critical-soft); border-color: #f1c0c0; color: var(--ck-critical-text); }
.ab-alert.ab-info { background: var(--ck-primary-soft); border-color: var(--ck-border); color: var(--ck-primary-pressed); }
.ab-alert.ab-good { background: var(--ck-success-soft); border-color: #bfe0cf; color: var(--ck-success-text); }

.ab-plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ck-space-3); }
.ab-plan { min-height: 11rem; padding: var(--ck-space-4); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); }
.ab-plan.ab-selected { padding: calc(var(--ck-space-4) - 1px); border: 2px solid var(--ck-primary); box-shadow: 0 8px 20px rgb(8 127 128 / 11%); }
.ab-plan .ab-amount { margin: var(--ck-space-3) 0 0.25rem; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-plan .ab-rate { color: var(--ck-primary-hover); font-weight: 700; }
.ab-plan .ab-segments { margin-top: var(--ck-space-4); font-size: 0.75rem; color: var(--ck-slate); }
.ab-plan .ab-btn { width: 100%; margin-top: var(--ck-space-3); }
.ab-order { display: grid; grid-template-columns: 1fr 22rem; gap: var(--ck-space-4); margin-top: var(--ck-space-4); }
.ab-notice { padding: var(--ck-space-3); border-radius: var(--ck-radius-lg); background: var(--ck-primary-soft); font-size: 0.8125rem; line-height: 1.45; }
.ab-summaryline { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--ck-border); font-variant-numeric: tabular-nums; }
.ab-summaryline.ab-total { border: 0; padding-top: var(--ck-space-3); font-size: 1.0625rem; font-weight: 700; }
.ab-modalnote { margin-top: var(--ck-space-3); font-size: 0.6875rem; color: var(--ck-slate); }

.ab-modecards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ck-space-4); }
.ab-mode { padding: var(--ck-space-4); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); background: var(--ck-surface); }
.ab-mode.ab-selected { padding: calc(var(--ck-space-4) - 1px); border: 2px solid var(--ck-primary); }
.ab-mode h3 { margin: var(--ck-space-2) 0 0.25rem; font-size: 1rem; font-weight: 600; letter-spacing: normal; }
.ab-mode .ab-cost { margin-top: var(--ck-space-2); font-size: 1.25rem; font-weight: 700; }
.ab-mode ul { margin: var(--ck-space-3) 0 0; padding-left: 1.2rem; color: var(--ck-slate); font-size: 0.8125rem; line-height: 1.8; }
.ab-mode .ab-btn { margin-top: var(--ck-space-3); }
.ab-field { margin-top: var(--ck-space-3); }
.ab-field label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 700; }
.ab-input { display: block; width: 100%; min-height: var(--ck-control-md); padding: 0.4rem 0.6rem; border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface); color: var(--ck-ink); font: inherit; }
textarea.ab-input { resize: vertical; }
.ab-input.ab-narrow { max-width: 28rem; }
.ab-template { margin-top: var(--ck-space-3); padding: var(--ck-space-3); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); }
.ab-template textarea { width: 100%; height: 5rem; padding: var(--ck-space-2); border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); background: var(--ck-surface); color: var(--ck-ink); font: inherit; resize: none; }
.ab-templatefoot { display: flex; justify-content: space-between; gap: var(--ck-space-3); margin-top: 0.4rem; font-size: 0.6875rem; color: var(--ck-slate); }
.ab-safe { color: var(--ck-success-text); font-weight: 700; }
.ab-bad-text { color: var(--ck-critical-text); font-weight: 700; }
.ab-check { display: flex; align-items: center; gap: var(--ck-space-2); margin-top: var(--ck-space-3); }
.ab-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ck-space-3); }
.ab-section-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
.ab-stack > * + * { margin-top: var(--ck-space-4); }
.ab-table { width: 100%; border-collapse: collapse; }
.ab-table th, .ab-table td { padding: 0.5rem; border-bottom: 1px solid var(--ck-border); text-align: left; vertical-align: middle; }
.ab-table thead th { font-size: 0.75rem; font-weight: 600; color: var(--ck-slate); background: var(--ck-canvas); }
.ab-table .ab-num { text-align: right; font-variant-numeric: tabular-nums; }
.ab-table .ab-input { max-width: 16rem; }
.ab-scroll { overflow-x: auto; }

.ab-inbox { display: grid; grid-template-columns: 20rem minmax(0, 1fr) 17rem; height: calc(100vh - 14rem); min-height: 28rem; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-lg); overflow: hidden; background: var(--ck-surface); }
.ab-threads { border-right: 1px solid var(--ck-border); overflow-y: auto; }
.ab-threadhead { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-space-2); padding: var(--ck-space-3) var(--ck-space-4); border-bottom: 1px solid var(--ck-border); font-weight: 700; }
.ab-threadhead .ab-badge { margin-left: 0.4rem; }
.ab-threadhead .ab-link { padding: 0; border: 0; background: none; color: var(--ck-primary-hover); font: inherit; font-size: 0.75rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ab-thread { display: block; width: 100%; padding: var(--ck-space-3) var(--ck-space-4); border: 0; border-bottom: 1px solid var(--ck-border); background: var(--ck-surface); color: var(--ck-ink); font: inherit; text-align: left; cursor: pointer; }
.ab-thread.ab-active { background: var(--ck-primary-soft); }
.ab-threadtop { display: flex; justify-content: space-between; font-weight: 700; }
.ab-preview { margin-top: 0.25rem; overflow: hidden; font-size: 0.75rem; color: var(--ck-slate); text-overflow: ellipsis; white-space: nowrap; }
.ab-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ab-chathead { padding: var(--ck-space-3) var(--ck-space-4); border-bottom: 1px solid var(--ck-border); }
.ab-messages { flex: 1; padding: var(--ck-space-4); overflow-y: auto; background: var(--ck-canvas); }
.ab-bubble { max-width: 72%; margin-bottom: var(--ck-space-3); padding: 0.6rem 0.8rem; border-radius: var(--ck-radius-lg); background: var(--ck-border); line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.ab-bubble.ab-out { margin-left: auto; background: var(--ck-primary-soft); }
.ab-time { margin-top: 0.25rem; font-size: 0.625rem; color: var(--ck-slate); }
.ab-compose { display: flex; align-items: flex-start; gap: var(--ck-space-2); padding: var(--ck-space-3); border-top: 1px solid var(--ck-border); }
.ab-compose .ab-input { flex: 1; }
.ab-context { padding: var(--ck-space-4); border-left: 1px solid var(--ck-border); overflow-y: auto; }
.ab-context h3 { margin: 0 0 var(--ck-space-3); font-size: 0.875rem; font-weight: 700; letter-spacing: normal; }
.ab-fact { margin-bottom: var(--ck-space-3); }
.ab-fact label { display: block; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ck-slate); }
.ab-fact span { font-weight: 600; }
.ab-privacy { padding: var(--ck-space-3); border-radius: var(--ck-radius-md); background: var(--ck-warning-soft); color: var(--ck-warning-text); font-size: 0.6875rem; }
.ab-context .ab-btn { width: 100%; margin-bottom: var(--ck-space-2); }
.ab-empty { padding: var(--ck-space-4); color: var(--ck-slate); }

@media (max-width: 1100px) {
    .ab-grid.ab-cols3, .ab-grid.ab-cols2, .ab-order, .ab-modecards { grid-template-columns: 1fr; }
    .ab-plans { grid-template-columns: repeat(2, 1fr); }
    .ab-inbox { grid-template-columns: 1fr; height: auto; }
    .ab-threads, .ab-context { border: 0; border-bottom: 1px solid var(--ck-border); }
    .ab-messages { min-height: 16rem; }
}