/**
 * Reusable UI primitives. Depends on tokens.css + base.css.
 */

/* --- Brand mark --- */

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.brand img {
  display: block;
  height: var(--logo-h);
  width: auto;
}

.brand--landing img {
  height: var(--logo-h-landing);
}

/* Guest landing uses class "sign-in" (kept for existing selectors / specs).
   Prefer a.button.secondary for new chrome actions. */
.sign-in {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.sign-in:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* MVP back button: white circle with accent ring + chevron. Shared by
   clinician profile and patient module/session headers. */
.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--accent), 0 4px 24px rgba(0, 0, 0, 0.02);
  color: var(--accent);
  font-size: 1.25rem;
}

.back-button:hover {
  background: var(--accent-soft);
}

/* --- User account menu (details/summary) --- */

.user-menu {
  position: relative;
  /* shrink to the pill: as a block it stretches, and the right-anchored
     panel opens at the container's far edge instead of under the pill */
  display: inline-block;
}

.user-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  color: var(--muted-strong);
  font: inherit;
  font-size: var(--text-lg); /* MVP 18px/600 header identity */
  font-weight: 600;
  max-width: var(--menu-max);
}

/* MVP avatar disc: 40px circle, lavender-gray fill, slate person glyph */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: #d4d2e3;
  color: #8189a3;
  font-size: 1.375rem; /* 22px glyph */
}

.user-menu summary::-webkit-details-marker {
  display: none;
}

.user-menu summary::after {
  content: "▾";
  color: var(--muted-strong);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 150ms ease;
}

.user-menu[open] summary::after {
  transform: rotate(180deg);
}

.user-menu[open] .user-avatar {
  box-shadow: 0 0 0 2px var(--accent-soft-strong);
}

.user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  z-index: 20;
}

.user-menu-panel a {
  display: block;
  padding: 0.55rem 0.9rem;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-sm);
}

.user-menu-panel a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- Card (foundation for future mock screens) --- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  padding: var(--space-6);
}

.card + .card {
  margin-top: var(--space-6);
}

.card h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

/* --- Stacks & lists --- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}






.empty-state {
  color: var(--muted);
  font-style: italic;
  font-size: var(--text-sm);
  margin: 0;
}

/* --- Forms ---
 *
 * Structure (error attached to the field, not a free-floating alert):
 *
 *   <div class="field error">
 *     <label for="email">Email</label>
 *     <input id="email" type="email"
 *            aria-invalid="true"
 *            aria-describedby="email-err">
 *     <p id="email-err" class="error" role="alert">…</p>
 *   </div>
 *
 * - .field         layout shell (label + control + optional hint/error)
 * - .field.error   invalid state (red outline on the control)
 * - .field p.error error message (id matches control's aria-describedby)
 * - .field p.hint  helper text (same attachment pattern)
 * - .field.checkboxes  checkbox/radio row (control + label side by side)
 */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
}

.field .required {
  color: var(--accent);
  font-weight: 700;
}

.field p.hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-body);
  max-width: 24rem;
}

/* Message node owned by the field — sibling of the control */
.field p.error {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--danger);
  line-height: var(--leading-body);
  max-width: 24rem;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="search"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="url"],
.field textarea,
.field select {
  font: inherit;
  font-size: var(--text-md); /* MVP generosity: controls read at body size */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  width: 100%;
  max-width: 24rem;
}

/* Input + trailing affix (e.g. search SVG icon) */
.field-control {
  position: relative;
  width: 100%;
  max-width: 24rem;
}

.field-control input {
  max-width: none;
}

.field-control--affix-end input {
  padding-right: 2.25rem;
}

.field-affix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 1rem; /* icons default to 1em — size via font-size */
  color: var(--muted);
  user-select: none;
}

.field-affix--end {
  right: 0.65rem;
}

.field-affix--start {
  left: 0.65rem;
}

/* .field scope: outranks .field input[type=…] base padding */
.field .field-control--affix-start input {
  padding-left: 2.1rem;
}

.field-affix svg {
  display: block;
}

.field textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: var(--leading-body);
}

.field select {
  cursor: pointer;
  appearance: auto;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Error outline on every control type (text, textarea, select, …).
   Border only at rest (no extra outer ring); light ring only on focus. */
.field.error input,
.field.error textarea,
.field.error select {
  border-color: var(--danger);
}

.field.error input:focus,
.field.error textarea:focus,
.field.error select:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-soft);
}

.field input:disabled,
.field textarea:disabled,
.field select:disabled {
  background: var(--paper);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.85;
}

.field.checkboxes {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3); /* MVP option rows: 12px control-to-label */
  max-width: 28rem;
}

/* Radio group: stacked option rows (MVP onboarding-question pattern) */
.field.radios {
  border: none;
  margin: 0;
  padding: 0;
  gap: var(--space-4);
  max-width: 28rem;
}

.field.radios legend {
  padding: 0;
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.field.radios input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.radio-option label {
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  line-height: var(--leading-body);
}

/* Radio error state: no border to redden, so the controls carry the
   signal (accent-color paints the checked state); legend stays neutral. */
.field.radios.error input[type="radio"] {
  accent-color: var(--danger);
  outline: 1px solid var(--danger-soft-strong);
  outline-offset: 1px;
  border-radius: 50%;
}

.field.checkboxes input {
  width: 1.25rem;
  height: 1.25rem;
  max-width: none;
  margin-top: 0.1rem;
  accent-color: var(--accent); /* native controls, MVP blue */
  flex-shrink: 0;
}

.field.checkboxes label {
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  line-height: var(--leading-body);
}

/* Buttons: <button class="button primary"> or <a class="button primary">
   Variants: .primary .secondary .danger
   Sizes: default, .small (toolbars, tables, pagination)
   Disabled: :disabled on <button>, or .disabled + aria-disabled on <a> */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  font: inherit;
  font-size: var(--text-md);  /* MVP buttons: 700/16, radius 24 */
  font-weight: 700;
  line-height: 1.375; /* 22px content box at 16px, per MVP measurement */
  padding: 0.75rem 1.75rem; /* 12px vertical, ditto */
  border-radius: var(--radius-xl);
  border: none; /* MVP buttons are borderless; rings are inset shadows */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.button.small {
  font-size: 0.8125rem; /* 13px/600 pill, per the MVP's chip scale */
  font-weight: 600;
  line-height: 1.2;
  padding: 0.2rem 0.6rem;
  gap: 0.2rem;
  min-height: 1.5rem;
  min-width: 1.5rem;
  border-radius: var(--radius-pill);
}

.button.large {
  font-size: var(--text-lg); /* 18px hero CTAs (MVP "Next") */
  padding: 0.875rem 2.5rem;
}

.button.block {
  width: 100%; /* card-footer CTAs (MVP full-width "Open Module") */
}

.button:disabled,
.button.disabled,
a.button.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  pointer-events: none;
}

.button.primary {
  background: var(--accent-grad); /* MVP: vertical blue gradient */
  color: #fff;
  box-shadow: var(--shadow-button);
}

.button.primary:hover:not(:disabled):not(.disabled) {
  filter: brightness(0.95);
  color: #fff;
}

/* MVP secondary: white, blue text, 1px blue ring (inset shadow in the
   export; our sizing border does the same job) */
.button.secondary {
  background: var(--surface);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent); /* ring per MVP, no size cost */
}

.button.secondary:hover:not(:disabled):not(.disabled) {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Soft tint variant (MVP "Open Module") */
.button.soft {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

.button.soft:hover:not(:disabled):not(.disabled) {
  background: var(--accent-soft-strong);
  color: var(--accent);
}

/* Danger mirrors secondary: white, red text, red ring */
.button.danger {
  background: var(--surface);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}

.button.danger:hover:not(:disabled):not(.disabled) {
  background: var(--danger-soft);
  color: var(--danger);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* --- Modal ---
 *
 *   <div class="modal-backdrop" role="dialog" aria-modal="true"
 *        aria-labelledby="modal-title">
 *     <div class="modal">
 *       <h2 id="modal-title">…</h2>
 *       … body …
 *       <div class="button-group">…</div>
 *     </div>
 *   </div>
 *
 * .modal-demo  in-page specimen frame (backdrop is absolute, not fixed)
 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 40;
}

/* display:flex above beats the default [hidden] rule — restore hide */
.modal-backdrop[hidden] {
  display: none !important;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-menu);
  padding: var(--space-6);
  width: min(28rem, 100%);
  max-height: min(90vh, 40rem);
  overflow: auto;
}

.modal h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--leading-tight);
}

.modal > p {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  line-height: var(--leading-body);
}

.modal .button-group {
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* In-page preview for proto / docs (not a real overlay) */
.modal-demo {
  position: relative;
  min-height: 18rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}

.modal-demo .modal-backdrop {
  position: absolute;
  z-index: 1;
}

.page-lede {
  margin: 0 0 var(--space-6);
  color: var(--muted);
  line-height: var(--leading-body);
  max-width: 36rem;
}

/* --- Combobox (tonotop.ui.combobox) ---
 *
 *   <div class="combobox is-open">
 *     <input role="combobox" aria-expanded="true" …>
 *     <ul class="combobox-menu" role="listbox">
 *       <li class="combobox-option is-active" role="option">…</li>
 *     </ul>
 *   </div>
 */
.combobox {
  position: relative;
  width: 100%;
  max-width: 24rem;
}

.combobox input[role="combobox"] {
  font: inherit;
  font-size: var(--text-sm);
  width: 100%;
  max-width: none;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
}

/* search variant: room for the leading magnifier (affix anchors to the
   .combobox relative wrapper) */
.combobox--search input[role="combobox"] {
  padding-left: 2.1rem;
}

.combobox input[role="combobox"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.field.error .combobox input[role="combobox"] {
  border-color: var(--danger);
}

/* Position/size set inline (fixed + getBoundingClientRect) so the menu
   portals above overflow:auto ancestors (modals) without a modal scrollbar. */
.combobox-menu {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  box-sizing: border-box;
}

/* Scroll cap is opt-in per combobox (:menu-scroll?, default true).
   Vertical only: the menu is width-pinned to the input, so any 1px-wide
   option otherwise spawns a horizontal scrollbar strip at the bottom. */
.combobox-menu--scroll {
  max-height: 14rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.combobox-option {
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* long options truncate instead of widening */
}

.combobox-option.is-active,
.combobox-option:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.combobox-empty {
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* --- Pagination (tonotop.ui.pagination) --- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pagination .muted {
  font-size: var(--text-xs);
}

.pagination-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Page numbers are form/button.small — slightly tighter min width */
.pagination-pages .button {
  min-width: 1.75rem;
}

.pagination-ellipsis {
  color: var(--muted);
  font-size: var(--text-xs);
  padding: 0 var(--space-1);
  user-select: none;
}

/* --------------------------------------------------------------------------
 * Text utilities per the v0.3 MVP (see tokens.css header).
 * ------------------------------------------------------------------------ */

.lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--lede-max);
}

.caption {
  font-size: var(--text-xs);
  color: var(--muted);
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Display stats (DM Sans 900 per the MVP's big numerals) */
.stat {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.stat--hero { font-size: var(--text-hero); }

/* Tabular numerals: any column of figures (scores, thresholds, money) */
.tnum { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
 * Tabs (MVP segmented pattern: "Weekly Modules / Assessment Results").
 * Works on <a> and <button>. Active = soft blue fill + accent text.
 * ------------------------------------------------------------------------ */

.tabs {
  display: inline-flex;
  flex-wrap: nowrap; /* never wrap: overflow scrolls inside the pill */
  align-items: center;
  gap: 4px; /* MVP track: white pill, 4px padding and gaps */
  list-style: none;
  margin: 0;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* the pill stays clean; trackpad/touch scrolls */
}

.tabs::-webkit-scrollbar { display: none; }

.tabs > li {
  flex-shrink: 0; /* list-based tab rows: options keep their size */
  display: flex;  /* no line box: kills the ~4px descender gap under inline <a> tabs */
  margin: 0;      /* base.css gives list items 4px bottom rhythm; not in a track */
}

.tab {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--muted-strong);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.375;
  padding: 0.625rem 1.5rem; /* MVP: 10px 24px */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.tab:hover { color: var(--accent); }

.tab.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Dense track for page navs (many entries): MVP chip scale. The full-size
   .tab stays for true in-content view switchers (the MVP tab pair). */
.tabs--dense .tab {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.375;
  padding: 0.375rem 0.875rem;
}

/* --------------------------------------------------------------------------
 * tab-nav (tonotop.ui.navtabs): dense tabs wide, details-menu narrow.
 * ------------------------------------------------------------------------ */

.tab-nav-menu { display: none; position: relative; }

/* Closed state: the white pill TRACK holds the active tab + a real caret,
   so the mobile control keeps the tabs' visual context. */
.tab-nav-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  list-style: none;
  cursor: pointer;
}

.tab-nav-menu > summary::-webkit-details-marker { display: none; }

.tab-nav-menu > summary::after {
  content: "▾";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted-strong);
  margin: 0 var(--space-3) 0 var(--space-1);
  transition: transform 150ms ease;
}

.tab-nav-menu[open] > summary::after {
  transform: rotate(180deg);
}

/* menu tabs match the dense row scale */
.tab-nav-menu .tab {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.375;
  padding: 0.375rem 0.875rem;
}

.tab-nav-panel {
  position: absolute;
  z-index: 40;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  list-style: none;
  min-width: 12rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tab-nav-panel li { margin: 0; display: flex; }
.tab-nav-panel .tab { width: 100%; }
/* the selected item stays in the list (stable order) but is inert */
.tab-nav-panel span.tab.is-active { cursor: default; }

@media (width < 50rem) { /* below 800px: dropdown mode */
  .tab-nav .tab-nav-row { display: none; }
  .tab-nav .tab-nav-menu { display: inline-block; }
}

/* Menu mode: always the dropdown control, never the wide row — used in
   rows of per-group selects (proto nav). :header renders the category
   above the control; :placeholder fills the pill when the group holds
   no current page. */
.tab-nav--menu {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tab-nav--menu .tab-nav-row { display: none; }
.tab-nav--menu .tab-nav-menu { display: inline-block; }

.tab-nav-header {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-left: var(--space-3);
}

.tab-nav-menu .tab--placeholder {
  color: var(--muted);
}

/* --- Flash (one-use redirect / ajax notices) ---
   Global stack: .flash-region at top of main (every shell).
   Pair with tonotop.ui.flash. Styles: success | warning | error.
   Test hooks: id="-flash-region", id="-flash", data-flash-style. */

.flash-region {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  max-width: 40rem;
  margin: 0 auto var(--space-4, 1rem);
  padding: 0 var(--space-4, 1rem);
  box-sizing: border-box;
}

.flash {
  width: 100%;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid var(--line, #ececec);
  text-align: left;
  box-sizing: border-box;
}

.flash-message {
  margin: 0;
  font-size: var(--text-md, 1rem);
  line-height: 1.45;
  font-weight: 600;
}

.flash--success {
  background: rgba(0, 179, 90, 0.12);
  border-color: var(--success, #00b35a);
  color: var(--success-strong, #1a7a3a);
}

.flash--warning {
  background: rgba(222, 174, 97, 0.22);
  border-color: #c49a3c;
  color: #5c4a1f;
}

.flash--error {
  background: var(--danger-soft, rgba(224, 0, 37, 0.15));
  border-color: var(--danger, #e00025);
  color: var(--danger, #e00025);
}

/* --- Notice (standing page cautions; shares the flash warning palette) --- */
.notice {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  width: 100%;
  margin: 0 0 var(--space-4, 1rem);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid var(--line, #ececec);
  text-align: left;
  box-sizing: border-box;
}

.notice-message {
  margin: 0;
  font-size: var(--text-md, 1rem);
  line-height: 1.45;
  font-weight: 600;
}

.notice--warning {
  background: rgba(222, 174, 97, 0.22);
  border-color: #c49a3c;
  color: #5c4a1f;
}

/* Proto placement sketch only */
.flash-placement-demo {
  border: 1px dashed var(--line, #ccc);
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
  max-width: 40rem;
  margin: 0 auto;
}
.flash-placement-demo-header {
  padding: 0.75rem 1rem;
  background: var(--fill, #ececec);
  font-weight: 600;
  font-size: var(--text-sm, 0.875rem);
}
.flash-placement-demo-body {
  padding: 1rem 1.25rem 1.5rem;
}
.flash-placement-demo-body h2 {
  margin: 0 0 0.5rem;
  font-size: var(--text-xl, 1.5rem);
}
.flash-placement-demo-body p {
  margin: 0;
  color: var(--muted, #666);
}
.flash-placement-demo .flash-region {
  margin-top: var(--space-3, 0.75rem);
  margin-bottom: var(--space-3, 0.75rem);
}

/* --- Inop (inoperative) primitive ---
   Aviation glass-panel red-X over not-yet-wired UI. Visible in every
   environment (no env-gating). Clay #C95038 for the X stroke.
   Pair with tonotop.ui.inop / data-inop.
   Shell fills the layout slot (width+height of the component); X is drawn
   corner-to-corner of that box and clipped so it never bleeds. */

.inop {
  position: relative;
  display: block;
  /* Fill the allocated component width (grid/flex/column), not shrink-wrap. */
  width: 100%;
  max-width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* Clip X exactly to this component. */
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* Shrink-wrap content — toolbar buttons, chips. Without this, width:100%
   stretches the shell across a flex row and left-aligns the control. */
.inop.inop--fit {
  display: inline-flex;
  width: auto;
  height: auto;
  max-width: 100%;
  flex: 0 0 auto;
  vertical-align: middle;
}

.inop-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  opacity: 0.45;
  filter: grayscale(0.35);
  position: relative;
  z-index: 0;
}

.inop.inop--fit .inop-content {
  width: auto;
  height: auto;
}

/* --- Proof of work (tono-et13) --- */

.pow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted-strong);
  font-size: var(--text-md);
}

.pow[data-state="verified"] {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.pow-icon svg,
.pat-pow-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.pow-spinner,
.pat-pow-spinner {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: pow-spin 0.9s linear infinite;
}

@keyframes pow-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pow-spinner,
  .pat-pow-spinner { animation: none; }
}

/* One overlay, both diagonals via gradients — always matches the box size. */
.inop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.92;
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 1px),
      #C95038 calc(50% - 1px),
      #C95038 calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      to top left,
      transparent calc(50% - 1px),
      #C95038 calc(50% - 1px),
      #C95038 calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}

.inop::after {
  content: none;
}