/* ==========================================================================
   Themescape shared components, v3: buttons and form controls
   (moved here from themescape-app.css, 22 October 2026, so the viewer can share them).
   The account pages load tokens.css, base.css, this file, then themescape-app.css.
   The viewer loads this file too, with class="ts-viewer" on its body. The page-wide field rules,
   .hint and .divider name different things there, so they skip the viewer (:where() adds no weight).
   ========================================================================== */

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--control-h); padding: 12px 24px;
  border-radius: var(--r-pill); border: 1.5px solid var(--espresso);
  background: var(--espresso); color: var(--cream);
  font: 500 16px/1.2 var(--font-body); text-align: center; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--umber); border-color: var(--umber); color: var(--cream); }
.btn--auto { width: auto; }
.btn--small { min-height: var(--target); padding: 8px 16px; font-size: 14px; }
.btn--secondary { background: transparent; color: var(--espresso); }
.btn--secondary:hover { background: var(--latte); color: var(--espresso); border-color: var(--espresso); }
/* Compact, for the viewer's dense canvas (decided 21 October 2026): 14px text, 40px high, with a 44px touch area.
   Every button in the viewer is a compact secondary button, so a change here shows there too.
   :where() keeps the viewer selectors at the weight of .btn, so the viewer's own layout rules (width, position) still apply. */
.btn--compact, :where(.ts-viewer) .btn { position: relative; width: auto; min-height: 40px; padding: 8px 16px; font-size: 14px; gap: 6px; }
.btn--compact::after, :where(.ts-viewer) .btn::after { content: ""; position: absolute; inset: -2px 0; }
:where(.ts-viewer) .btn { background: transparent; color: var(--espresso); }
:where(.ts-viewer) .btn:hover { background: var(--latte); color: var(--espresso); border-color: var(--espresso); }
/* A dialog's main action in the viewer (Save, Send, Exit with my progress, Choose files, Save colour settings) is the filled primary button */
:where(.ts-viewer) .btn.btn--primary { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
:where(.ts-viewer) .btn.btn--primary:hover { background: var(--umber); border-color: var(--umber); color: var(--cream); }
.btn--on-dark { background: var(--cream); border-color: var(--cream); color: var(--espresso); }
.btn--on-dark:hover { background: var(--latte); border-color: var(--latte); color: var(--espresso); }
.btn--outline-on-dark { background: transparent; border-color: var(--cream); color: var(--cream); }
.btn--outline-on-dark:hover { background: rgba(255, 251, 244, .12); color: var(--cream); border-color: var(--cream); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--latte); border-color: var(--latte); color: var(--secondary); cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: .8; cursor: progress; }
:where(body:not(.ts-viewer)) .btn .arrow { font-weight: 500; }

/* Google and Microsoft: keep the providers' approved light styling (as the live app does) */
.btn-sso { background: #FFFFFF; border: 1px solid #747775; color: #1F1F1F; }
.btn-sso:hover { background: #F2F2F2; border-color: #747775; color: #1F1F1F; }
.btn-sso img { width: 18px; height: 18px; }

.btn-link {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0; border: 0; background: none;
  color: var(--espresso); font: 500 14px/1.3 var(--font-body);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn-link:hover { color: var(--umber); }
.btn-link--body { font-size: 16px; font-weight: 400; }
.on-dark .btn-link, .panel .btn-link { color: var(--cream); }

/* ---------- 4. Form controls ---------- */
.field { display: grid; gap: var(--s-2); }
.fieldset { border: 0; padding: 0; margin-inline: 0; margin-bottom: 0; min-width: 0; }
.fieldset > legend { padding: 0; }
.field__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.field label, .field .field__label { font-size: 14px; font-weight: 500; line-height: 1.5; }
.optional { font-weight: 400; color: var(--secondary); margin-left: 4px; }
:where(body:not(.ts-viewer)) .input, :where(body:not(.ts-viewer)) input[type=email], :where(body:not(.ts-viewer)) input[type=password], :where(body:not(.ts-viewer)) input[type=text], :where(body:not(.ts-viewer)) input[type=search], :where(body:not(.ts-viewer)) select, :where(body:not(.ts-viewer)) textarea {
  width: 100%; min-height: var(--control-h); padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--cream); color: var(--espresso);
  font: 400 16px/1.2 var(--font-body);
}
:where(body:not(.ts-viewer)) input::placeholder, :where(body:not(.ts-viewer)) textarea::placeholder { color: var(--secondary); opacity: 1; }
/* Text fields show focus with their border; tick boxes keep the focus ring (design rules check, 21 October 2026) */
:where(body:not(.ts-viewer)) input:not([type="checkbox"]):focus, :where(body:not(.ts-viewer)) select:focus, :where(body:not(.ts-viewer)) textarea:focus { outline: none; border: 2px solid var(--espresso); padding: 0 15px; }
:where(body:not(.ts-viewer)) input[readonly], :where(body:not(.ts-viewer)) input:disabled, :where(body:not(.ts-viewer)) select:disabled { background: var(--latte); border-color: rgba(59, 38, 32, .25); color: var(--secondary); }
:where(body:not(.ts-viewer)) select { appearance: none; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233B2620' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
:where(body:not(.ts-viewer)) .hint { font-size: 14px; line-height: 1.5; color: var(--secondary); }

/* Password: text toggle inside the field */
.pw { position: relative; }
.pw input { padding-right: 76px; }
.pw input:focus { padding-right: 75px; }
.btn-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: var(--target); min-width: var(--target);
  padding: 0 8px; border: 0; background: none; color: var(--espresso);
  font: 500 14px/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Errors (inline, under the field) */
.field--error input, .field--error select { border: 2px solid var(--error); padding: 0 15px; }
.field__error { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--error); font-size: 14px; font-weight: 500; line-height: 1.5; }
.icon-alert { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--error); color: var(--cream);
  display: inline-grid; place-items: center; font: 500 12px/1 var(--font-body); }

/* Checkbox */
.check { display: flex; gap: var(--s-3); align-items: flex-start; min-height: var(--target); padding-top: 12px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--espresso); }

/* Choice cards (radio). Selected = fully inverted (Levi, 12 Oct). */
.choices { display: grid; gap: var(--s-2); }
.choices--2 { grid-template-columns: 1fr 1fr; }
.choices--3 { grid-template-columns: repeat(3, 1fr); }
.choice {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--control-h); padding: 12px 16px;
  border: 1px solid var(--espresso); border-radius: var(--r-card);
  background: transparent; color: var(--espresso); cursor: pointer;
}
.choice--stack { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--espresso); background: var(--cream); position: relative; }
.choice__head { display: flex; align-items: center; gap: var(--s-3); }
.choice__body { display: grid; gap: 4px; flex: 1; min-width: 0; }
.choice__title { font-weight: 500; font-size: 14px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.choice__title--big { font-size: 16px; }
.choice__price { font-weight: 500; font-size: 16px; }
.choice__desc { font-size: 14px; line-height: 1.5; color: var(--secondary); }
.choice__aside { margin-left: auto; font-weight: 500; font-size: 14px; white-space: nowrap; }
.choice:hover { background: rgba(233, 222, 208, .5); }
/* The chosen card. :has() and the .is-selected fallback (set by ui.js) are separate rules, because a browser without
   :has() (Safari before 15.4, Firefox before 121) drops a whole rule whose selector list contains it. */
.choice.is-selected { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.choice.is-selected .choice__mark { background: var(--espresso); border: 2px solid var(--cream); }
.choice.is-selected .choice__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cream); }
.choice.is-selected .choice__desc { color: var(--latte); }
.choice.is-selected .badge { background: var(--cream); color: var(--espresso); }
.choice.is-focus { outline: 2px solid var(--espresso); outline-offset: 2px; }
.choice:has(input:checked) { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.choice:has(input:checked) .choice__mark { background: var(--espresso); border: 2px solid var(--cream); }
.choice:has(input:checked) .choice__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cream); }
.choice:has(input:checked) .choice__desc { color: var(--latte); }
.choice:has(input:checked) .badge { background: var(--cream); color: var(--espresso); }
.choice:has(input:focus-visible) { outline: 2px solid var(--espresso); outline-offset: 2px; }

/* Segmented tabs. Active = fully inverted (Levi, 12 Oct). */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--latte); border-radius: var(--r-pill); }
.tab { flex: 1; min-height: var(--target); padding: 8px 12px; border: 0; border-radius: var(--r-pill); background: none;
  color: var(--secondary); font: 500 14px/1.2 var(--font-body); cursor: pointer; }
.tab:hover { color: var(--espresso); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--espresso); color: var(--cream); }
/* Compact tabs: a 40px track holding 32px options, each with a 44px touch area */
.tabs--compact { display: inline-flex; flex-wrap: wrap; }
.tabs--compact .tab { position: relative; flex: none; min-height: 32px; padding: 6px 14px; font-size: 14px; }
.tabs--compact .tab::after { content: ""; position: absolute; inset: -6px 0; }

/* Counter: buttons either side of a typeable value */
.counter { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.counter button { width: var(--target); height: var(--target); padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--cream);
  color: var(--espresso); font: 500 14px/1 var(--font-body); cursor: pointer; }
.counter button.ten { width: 52px; border-radius: var(--r-pill); }
.counter button:hover { background: var(--latte); }
.counter input { width: 56px; min-height: var(--control-h); padding: 0; text-align: center; font-weight: 500; }
.counter input:focus { padding: 0; }

/* Divider */
:where(body:not(.ts-viewer)) .divider { display: flex; align-items: center; gap: var(--s-4); color: var(--secondary); font-size: 14px; }
:where(body:not(.ts-viewer)) .divider::before, :where(body:not(.ts-viewer)) .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--r-pill); background: var(--espresso); color: var(--cream);
  font: 500 12px/1.4 var(--font-body); white-space: nowrap; }
.badge--cream { background: var(--cream); color: var(--espresso); }
.badge--latte { background: var(--latte); color: var(--espresso); }
.badge--outline { background: transparent; color: var(--espresso); border: 1px solid var(--line); }

/* Alerts and messages */
.alert { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-card); background: var(--latte); border: 2px solid var(--error); font-size: 14px; }
.alert__title { display: flex; gap: var(--s-2); align-items: center; color: var(--error); font-weight: 500; }
.notice { display: flex; gap: var(--s-3); align-items: center; padding: 12px 12px; border-radius: var(--r-card); background: var(--latte); font-size: 14px; line-height: 1.5; }
.tick-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--espresso); display: grid; place-items: center; }
.tick-dot svg { width: 11px; height: 9px; }
.tick-dot--lg { width: 48px; height: 48px; }
.tick-dot--lg svg { width: 20px; height: 16px; }

/* Step indicator: "Step n of 3" above every onboarding heading */
.progress { display: grid; gap: var(--s-2); }
.progress__text { font-size: 14px; }
.progress__text b { font-weight: 500; }
.progress__text span { color: var(--secondary); margin-left: 4px; }
.progress__bar { display: flex; gap: 4px; }
.progress__bar i { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--latte); }
.progress__bar i.on { background: var(--espresso); }

/* ---------- Compact fields, for the viewer's dense canvas (22 October 2026) ---------- */
/* The account fields' Field Line border, corners and focus, at 40px with 14px text */
.input--compact { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-field);
  background: var(--cream); color: var(--espresso); font: 400 14px/1.4 var(--font-body); }
textarea.input--compact { padding: 8px 12px; }
.input--compact::placeholder { color: var(--secondary); opacity: 1; }
/* Focus: a 2px espresso border, drawn inside so nothing moves */
.input--compact:focus { outline: none; border-color: var(--espresso); box-shadow: inset 0 0 0 1px var(--espresso); }
.input--compact[readonly] { background: var(--latte); color: var(--secondary); }
/* Tick boxes and sliders in the viewer, as the account pages' tick box */
:where(.ts-viewer) input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--espresso); }
:where(.ts-viewer) input[type="range"] { accent-color: var(--espresso); }

/* ---------- Desktop notice for phones (23 October 2026) ---------- */
/* assets/js/device-note.js covers a phone-sized screen with this; the viewer and the student app both load it */
.device-note { position: fixed; inset: 0; z-index: 2147483000; display: flex; overflow-y: auto; background: var(--cream); color: var(--espresso);
  padding: max(var(--s-6), env(safe-area-inset-top, 0px)) max(var(--s-5), env(safe-area-inset-right, 0px)) max(var(--s-6), env(safe-area-inset-bottom, 0px)) max(var(--s-5), env(safe-area-inset-left, 0px)); }
.device-note[hidden] { display: none; }
.device-note__in { margin: auto; width: 100%; max-width: 420px; display: grid; gap: var(--s-4); }
.device-note__brand { margin: 0; font: 500 var(--t-small)/1.4 var(--font-body); color: var(--secondary); }
.device-note__title { margin: 0; font: 500 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.device-note__lead { margin: 0; font: 400 16px/1.6 var(--font-body); color: var(--secondary); }
.device-note__acts { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.device-note__acts .btn { width: 100%; }
.device-note__link { margin: 0; font: 400 var(--t-small)/1.5 var(--font-body); color: var(--espresso); overflow-wrap: anywhere; user-select: all; }
.device-note__small { margin: 0; font: 400 var(--t-small)/1.5 var(--font-body); color: var(--secondary); }
html.device-noted, html.device-noted body { overflow: hidden; }