/* ═══════════════════════════════════════════════════════════════════════════
   AE Prism Extension — Component Styles
   All design tokens live in tokens.css. Edit there to change any visual value.
   This file contains only structural rules — no hardcoded design decisions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar             { width: 5px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ═══════════════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS — main ↔ license view
   display:none → block re-triggers the animation, so a pure-CSS push works.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#main-view,
#license-view {
  animation: view-in var(--duration-normal) var(--ease-spring);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.header {
  display:     flex;
  align-items: center;
  padding:     10px 12px 9px;
  gap:         8px;
  background:  var(--bg);
}

.prism-wordmark {
  height:      18px;
  width:       auto;
  flex-shrink: 0;
  display:     block;
  user-select: none;
}

/* Hide legacy references */
.prism-logo, .title, .version, .brand, .status-bar, .header-pill { display: none; }

.spacer { flex: 1; }

/* Clean divider beneath header — no decoration */
.header-accent {
  height:     1px;
  background: var(--border);
}

/* ─── Header button group ────────────────────────────────────────────────────── */
.header-btn-group {
  display:       inline-flex;
  align-items:   stretch;
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  overflow:      hidden;
  flex-shrink:   0;
  background:    var(--bg-surface);
}

.header-btn-group .btn-connect,
.header-btn-group .btn-license {
  border:        none;
  border-radius: 0;
  margin:        0;
  background:    transparent;
}

.header-btn-group .btn-connect {
  border-right: 1px solid var(--border);
}

.header-btn-group .btn-connect:hover,
.header-btn-group .btn-license:hover { background: var(--hover-normal); }

.header-btn-group .btn-connect[data-state="connecting"],
.header-btn-group .btn-connect[data-state="reconnecting"] {
  background: var(--state-connecting-bg);
}

.header-btn-group.hbg-connected {
  border-color: var(--success-bd);
}

/* ─── Connect button ─────────────────────────────────────────────────────────── */
.btn-connect {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  padding:        4px 11px 5px;
  border-radius:  var(--r-xl);
  border:         1px solid var(--border);
  background:     var(--bg-surface);
  color:          var(--text-primary);
  white-space:    nowrap;
  flex-shrink:    0;
  cursor:         pointer;
  user-select:    none;
  transition:     background var(--t-normal), border-color var(--t-normal), color var(--t-normal);
}
.btn-connect:hover    { background: var(--bg-hover); }
.btn-connect:active   { opacity: 0.80; }
.btn-connect:disabled { cursor: not-allowed; opacity: 0.5; }

.btn-connect .connect-mcp-icon {
  width:       12px;
  height:      12px;
  flex-shrink: 0;
  color:       var(--text-caption);
  transition:  color var(--t-normal), opacity var(--t-normal);
}

.btn-connect[data-state="idle"] .connect-mcp-icon,
.btn-connect[data-state="idle-noauth"] .connect-mcp-icon { color: var(--state-idle); }

.btn-connect[data-state="connecting"]    { border-color: var(--state-connecting-bd); }
.btn-connect[data-state="connecting"] .connect-mcp-icon {
  color:     var(--warn);
  animation: pulse-dot var(--duration-pulse) var(--ease-pulse) infinite;
}

.btn-connect[data-state="reconnecting"]    { border-color: var(--state-reconnecting-bd); }
.btn-connect[data-state="reconnecting"] .connect-mcp-icon {
  color:     var(--warn);
  animation: pulse-dot var(--duration-pulse-slow) var(--ease-pulse) infinite;
}

.btn-connect[data-state="connected"] {
  background:   var(--success-bg);
  border-color: var(--success-bd);
  color:        var(--text-primary);
}
.btn-connect[data-state="connected"] .connect-mcp-icon { color: var(--success); }
.btn-connect[data-state="connected"]:hover { background: var(--success-hover); }

.btn-connect[data-state="failed"] {
  background:   var(--error-bg);
  border-color: var(--error-bd);
}
.btn-connect[data-state="failed"] .connect-mcp-icon { color: var(--error); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.28; }
}

/* ─── License button ─────────────────────────────────────────────────────────── */
.btn-license {
  display:        inline-flex;
  align-items:    center;
  gap:            2px;
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  padding:        4px 7px 5px 11px;
  border-radius:  var(--r-xl);
  border:         1px solid var(--border);
  background:     var(--bg-surface);
  color:          var(--text-primary);
  white-space:    nowrap;
  flex-shrink:    0;
  cursor:         pointer;
  user-select:    none;
  transition:     background var(--t-normal), border-color var(--t-normal), color var(--t-normal);
}
.btn-license:hover  { background: var(--bg-hover); }
.btn-license:active { opacity: .80; }

/* Disclosure chevron — signals this is a tappable navigation target */
.btn-license-chevron {
  width:            14px;
  height:           14px;
  flex-shrink:      0;
  stroke:           currentColor;
  stroke-width:     1.8;
  stroke-linecap:   round;
  stroke-linejoin:  round;
  fill:             none;
  opacity:          0.85;
  margin-left:      -1px;
  transition:       opacity var(--t-fast);
}
.btn-license:hover .btn-license-chevron { opacity: 1; }

/* No licence — neutral call-to-action (NOT an error; the user hasn't done
   anything wrong yet). Accent dot signals "action available". Label = "Activate". */
.btn-license[data-tier=""] {
  background:   var(--bg-surface);
  border-color: var(--border-strong);
  color:        var(--text-primary);
}
/* Accent dot — shared by the no-licence CTA and the Go tier mark */
.btn-license[data-tier=""]::before,
.btn-license[data-tier="go"]::before {
  content:       '';
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--tier-go-dot);
  flex-shrink:   0;
  margin-right:  3px;
}
.btn-license[data-tier=""]:hover { background: var(--bg-hover); }

/* Free — neutral, no mark (blue is reserved for connection status, never tiers) */
.btn-license[data-tier="free"] {
  background:   var(--bg-surface);
  border-color: var(--border-strong);
  color:        var(--tier-free-text);
}
.btn-license[data-tier="free"]:hover { background: var(--bg-hover); }

/* Go — neutral surface + accent dot (distinct from Free's no-mark and
   from Pro's tinted fill) */
.btn-license[data-tier="go"] {
  background:   var(--bg-surface);
  border-color: var(--border-strong);
  color:        var(--tier-go-text);
}
.btn-license[data-tier="go"]:hover { background: var(--bg-hover); }

/* Pro — accent tint */
.btn-license[data-tier="pro"] {
  background:   linear-gradient(90deg, var(--color-accent-tint-strong) 0%, var(--brand-to-tint) 100%);
  border-color: var(--tier-pro-bd);
  color:        var(--tier-pro-text);
}

/* Max — premium neutral (also legacy "studio") */
.btn-license[data-tier="max"],
.btn-license[data-tier="studio"] {
  background:   var(--tier-max-bg);
  border-color: var(--tier-max-bd);
  color:        var(--white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB BAR — icon + text stacked pills
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-bar {
  display:       flex;
  padding:       7px 8px 0;
  gap:           3px;
  border-bottom: 1px solid var(--divider);
  background:    var(--bg);
}

.tab-btn {
  flex:            1;
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  padding:         7px 6px 6px;
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  var(--tracking-normal);
  background:      transparent;
  border:          none;
  border-radius:   var(--r-md) var(--r-md) 0 0;
  border-bottom:   2px solid transparent;
  color:           var(--text-body);
  cursor:          pointer;
  margin-bottom:   -1px;
  transition:      color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  user-select:     none;
}

/* Icons inside tabs */
.tab-btn svg {
  width:           16px;
  height:          16px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
  flex-shrink:     0;
  transition:      stroke var(--t-fast);
}
/* MCP tab uses a fill-based icon — override the stroke-only rule */
#tab-btn-mcp svg {
  fill:         currentColor;
  stroke:       none;
  stroke-width: 0;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color:         var(--text-primary);
  background:    transparent;
  border-bottom: 2px solid var(--tab-indicator);
  font-weight: var(--font-weight-semibold);
}

.tab-btn.tab-locked {
  color:   var(--text-disabled);
  cursor:  not-allowed;
  opacity: 0.40;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════════════════════════ */
.divider { height: 1px; background: var(--divider); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.section {
  padding:        10px 12px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

/* Section header — plain uppercase label, no icons */
.section-header {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color:          var(--text-tertiary);
  margin-bottom:  4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSET GROUPED — Apple HIG's core list pattern
   A floating card grouping related rows with hairline separators between them.
   Usage: wrap related controls in .hig-group; each logical row gets .hig-row.
   ═══════════════════════════════════════════════════════════════════════════ */
.hig-group {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:      hidden;
  width:         100%;
  box-shadow:    0 1px 4px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
}

.hig-row {
  display:       flex;
  align-items:   center;
  padding:       0 12px;
  gap:           8px;
  min-height:    36px;
  border-bottom: 1px solid var(--divider);
}
.hig-row:last-child { border-bottom: none; }

/* ─── Action button grid inside hig-group ────────────────────────────────── */
.hig-group .btn-row {
  gap:           0;
  padding:       0;
  border-bottom: 1px solid var(--divider);
}
.hig-group .btn-row:last-child { border-bottom: none; }

.hig-group .btn-primary {
  background:      transparent;
  border:          none;
  border-right:    1px solid var(--divider);
  border-radius:   0;
  flex:            1;
  padding:         9px 12px;
  color:           var(--text-primary);
  font-weight:     var(--font-weight-medium);
  font-size:       var(--font-size-md);
  min-height:      36px;
  justify-content: center;
  transition:      background var(--t-fast);
}
.hig-group .btn-primary:last-child                  { border-right: none; }
.hig-group .btn-primary:hover                       { background: var(--hover-subtle); }
.hig-group .btn-primary:not(:last-child):hover      { border-right-color: var(--divider); }
.hig-group .btn-primary[data-btn-state="success"]   { background: var(--success-bg) !important; color: var(--success) !important; }
.hig-group .btn-primary[data-btn-state="error"]     { background: var(--error-bg)   !important; color: var(--error)   !important; }
.hig-group .btn-primary[data-btn-state="warn"]      { background: var(--warn-bg)    !important; color: var(--warn)    !important; }

/* ─── Toggle rows inside hig-group ───────────────────────────────────────── */
.hig-group .toggle-row {
  padding:       8px 12px;
  min-height:    36px;
  border-bottom: 1px solid var(--divider);
}
.hig-group .toggle-row:last-child { border-bottom: none; }

/* ─── Path / input rows inside hig-group ─────────────────────────────────── */
.hig-group .path-row { padding: 7px 12px; gap: 6px; }

/* URL display inputs inside a group lose chrome — the group card is the container */
.hig-group .hig-url-input {
  background:   transparent;
  border-color: transparent;
  padding-left: 0;
  box-shadow:   none;
}
.hig-group .hig-url-input:focus-visible { border-color: transparent; box-shadow: none; outline: none; }

/* File-link inputs keep a darker well so the slot is clearly visible */
.hig-group .path-input:not(.hig-url-input) {
  background:    var(--bg-input);
  border-color:  var(--border-strong);
  border-radius: var(--r-sm);
  flex:          1;
}

/* ─── Credential type — ONE treatment for everything users copy ─────────────
   License key + MCP URL share it: mono, medium, airy tracking, full
   brightness. A credential reads as an asset you OWN, not interface text.
   (!important: .path-input base styles would otherwise win on the URL.) */
.license-key-text,
.hig-url-input {
  font-family:    var(--font-mono) !important;
  font-size:      var(--font-size-md) !important;
  font-weight:    var(--font-weight-medium) !important;
  letter-spacing: 0.5px !important;
  color:          var(--text-primary) !important;
}

/* ─── Asset wells — the two things users copy (MCP URL, license key) sit in
   inset input-wells so they read as credentials, not list rows ───────────── */
#panel-mcp .hig-group,
.license-card .hig-group {
  background: var(--bg-input);
  box-shadow: var(--shadow-inset);
}

/* Copy accessories on asset wells — graphite at rest (white ink), system
   GREEN only as the "Copied" success flash. The ID selectors here outrank
   .hig-row-action[data-btn-state] (class+attr), which is why the flash never
   showed before — so the success state is restated at ID level. */
#btn-copy-mcp-url,
#btn-copy-key {
  color:       var(--color-accent-text);
  font-weight: var(--font-weight-semibold);
}
#btn-copy-mcp-url:hover,
#btn-copy-key:hover {
  background: var(--color-accent-tint);
  color:      var(--color-accent-text);
}
#btn-copy-mcp-url[data-btn-state="success"],
#btn-copy-key[data-btn-state="success"] {
  color:      var(--success);
  background: var(--success-bg);
}

/* ─── Inline field action — trailing accessory inside .hig-row / .license-card-key ── */
.hig-row-action {
  align-self:      stretch;
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         0 11px;
  flex-shrink:     0;
  background:      transparent;
  border:          none;
  border-left:     1px solid var(--divider);
  border-radius:   0;
  color:           var(--text-body);
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-medium);
  font-family:     inherit;
  cursor:          pointer;
  white-space:     nowrap;
  user-select:     none;
  transition:      background var(--t-fast), color var(--t-fast);
}
.hig-row-action:hover                              { background: var(--hover-subtle); color: var(--text-primary); }
.hig-row-action:active                             { opacity: 0.70; }
.hig-row-action[data-btn-state="success"]          { color: var(--success); background: var(--success-bg); }
.hig-row-action[data-btn-state="success"]:hover    { background: var(--success-hover); }
.hig-row-action--danger:hover                      { background: var(--error-bg); color: var(--error); }
.hig-row-action svg {
  width:           11px;
  height:          11px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

/* Modifier: row that carries trailing action buttons — no right padding, button owns that edge */
.hig-row-with-action              { padding: 0 0 0 12px; gap: 0; }
.hig-row-with-action .path-input  { padding-top: 7px; padding-bottom: 7px; }

/* ─── hig-row-action feedback states (used by setBtnState) ───────────────── */
.hig-row-action                             { position: relative; }
.hig-row-action[data-btn-state="loading"]   { pointer-events: none; cursor: default; color: transparent !important; }
.hig-row-action[data-btn-state="error"]     { color: var(--error); background: var(--error-bg); }
.hig-row-action[data-btn-state="error"]:hover { background: var(--error-hover); }
.hig-row-action[data-btn-state="warn"]      { color: var(--warn); background: var(--warn-bg); }

/* ─── Segmented control row inside hig-group ─────────────────────────────── */
.hig-seg-row {
  padding:       8px 10px;
  border-bottom: 1px solid var(--divider);
}
.hig-seg-row .seg-ctrl {
  width: 100%;
}

/* ─── Action row content — scope label + description ────────────────────── */
.hig-row-content {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            1px;
  padding:        8px 0;
}
.hig-row-title {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color:       var(--text-primary);
  line-height: 1.4;
}
.hig-row-subtitle {
  font-size:   var(--font-size-xs);
  color:       var(--text-tertiary);
  line-height: 1.3;
}

/* ─── Context/info block inside hig-group ────────────────────────────────── */
.hig-context-row {
  padding:        10px 12px;
  flex-direction: column !important;
  align-items:    flex-start !important;
  gap:            3px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-row {
  display: flex;
  gap:     6px;
}

.btn {
  background:      var(--bg-surface);
  color:           var(--text-body);
  border:          1px solid var(--border);
  border-radius:   var(--r-md);
  padding:         4px 11px;
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-regular);
  font-family:     inherit;
  cursor:          pointer;
  transition:      background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space:     nowrap;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  position:        relative;
}

/* Icons inside buttons — Lucide 24×24 viewBox */
.btn svg {
  width:           12px;
  height:          12px;
  flex-shrink:     0;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
  opacity:         0.72;
  transition:      opacity var(--t-fast);
}
.btn:hover svg    { opacity: 1; }
.btn-small svg    { width: 11px; height: 11px; }
.btn-tiny  svg    { width: 10px; height: 10px; }

.btn:hover {
  background:   var(--bg-hover);
  color:        var(--text-primary);
  border-color: var(--border-strong);
}
.btn:active   { opacity: .70; }
.btn:disabled { opacity: .30; cursor: default; }

/* Primary — full-width action buttons (Export/Import rows) */
.btn-primary {
  flex:        1;
  background:  var(--bg-surface);
  color:       var(--text-primary);
  border:      1px solid var(--border-strong);
  font-weight: var(--font-weight-medium);
  padding:     6px 11px;
  transition:  background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn-primary:hover {
  background:   var(--bg-hover);
  border-color: var(--border-hover);
}
.btn-primary:active { opacity: .70; }

.btn-small { padding: 3px 9px;  font-size: var(--font-size-md); height: 22px; line-height: 1; }
.btn-tiny  { padding: 2px 7px;  font-size: var(--font-size-sm); }
.btn-pill  { border-radius: var(--r-pill); }

.btn-danger:hover {
  color:        var(--error);
  background:   var(--bg-hover);
  border-color: var(--error-bd-hover);
}

/* Accent button — gray when disconnected, AE blue when connected */
.btn-accent {
  background:   var(--bg-surface);
  border-color: var(--border-strong);
  color:        var(--text-body);
  font-weight: var(--font-weight-medium);
}
.btn-accent:not(:disabled) {
  background:   var(--ae-blue);
  border-color: var(--ae-blue);
  color:        var(--color-on-accent);
  font-weight: var(--font-weight-semibold);
}
.btn-accent:not(:disabled):hover  { filter: brightness(1.12); }
.btn-accent:not(:disabled):active { opacity: 0.80; }
.btn-accent:disabled { cursor: default; }

/* Tinted — Apple's inline action style: color-tinted surface, no solid fill. */
.btn-tinted {
  background:   var(--color-accent-tint)        !important;
  border-color: var(--color-accent-bd)          !important;
  color:        var(--color-accent-text)        !important;
  font-weight:  var(--font-weight-semibold);
}
.btn-tinted:hover { background: var(--color-accent-hover) !important; }

/* ─── Button inline feedback states ────────────────────────────────────── */

.btn[data-btn-state="loading"] {
  pointer-events: none;
  cursor:         default;
  color:          transparent !important;
  transition:     none;
}
.btn[data-btn-state="loading"] svg { opacity: 0; }

/* Negative-margin centering — transform is left entirely to the spin animation.
   If transform: translate() is also set, @keyframes spin overrides it mid-frame,
   causing the spinner to drift off-center while rotating. */
.btn-spinner {
  position:      absolute;
  top:           50%;
  left:          50%;
  margin-top:    -6px;
  margin-left:   -6px;
  width:         12px;
  height:        12px;
  border:        2px solid var(--spinner-track);
  border-top-color: var(--spinner-head);
  border-radius: var(--r-pill);
  animation:     spin var(--duration-spin) var(--ease-spin) infinite;
  pointer-events: none;
}

.btn[data-btn-state="success"] {
  background:   var(--success-bg) !important;
  border-color: var(--success-bd) !important;
  color:        var(--success)    !important;
  transition:   background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn[data-btn-state="error"] {
  background:   var(--error-bg) !important;
  border-color: var(--error-bd) !important;
  color:        var(--error)    !important;
  transition:   background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn[data-btn-state="warn"] {
  background:   var(--warn-bg) !important;
  border-color: var(--warn-bd) !important;
  color:        var(--warn)    !important;
  transition:   background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

/* ─── Focus visible — consistent keyboard ring ──────────────────────────── */
.btn:focus-visible,
.btn-connect:focus-visible,
.btn-license:focus-visible,
.btn-activate:focus-visible,
.btn-license-close:focus-visible {
  outline:        2px solid var(--focus-ring-visible);
  outline-offset: 2px;
}

.path-input:focus-visible,
.settings-input:focus-visible,
.hig-select:focus-visible,
.log-filter-select:focus-visible {
  outline:      none;
  border-color: var(--border-focus);
  box-shadow:   var(--focus-ring);
}

/* Screen-reader only — visually hidden, still announced via aria-live */
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0,0,0,0);
  border:   0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS & PATH ROW
   ═══════════════════════════════════════════════════════════════════════════ */
.path-row {
  display:     flex;
  gap:         5px;
  align-items: center;
}

.path-input {
  flex:          1;
  background:    var(--bg-input);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text-body);
  font-size:     var(--font-size-md);
  padding:       5px 9px;
  min-width:     0;
  cursor:        default;
  font-family:   inherit;
  transition:    border-color var(--t-fast);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPERATION STATUS
   ═══════════════════════════════════════════════════════════════════════════ */
.op-status {
  font-size: var(--font-size-xs);
  color:      var(--text-caption);
  min-height: 12px;
  word-break: break-all;
  line-height: var(--leading-normal);
}
.op-status.ok    { color: var(--success); }
.op-status.error { color: var(--error); }
.op-status.busy  { color: var(--text-body); }

/* ═══════════════════════════════════════════════════════════════════════════
   MODE SEGMENTED CONTROL (Apple HIG)
   ═══════════════════════════════════════════════════════════════════════════ */

.seg-ctrl {
  display:       flex;
  background:    var(--bg-input);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       3px;
  gap:           2px;
}

.seg-radio {
  position:       absolute;
  opacity:        0;
  width:          0;
  height:         0;
  pointer-events: none;
}

.seg-btn {
  flex:        1;
  padding:     5px 8px;
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-regular);
  font-family: inherit;
  text-align:  center;
  cursor:      pointer;
  border-radius: calc(var(--r-md) - 2px);
  color:       var(--text-body);
  transition:  background var(--t-fast), color var(--t-fast);
  user-select: none;
  white-space: nowrap;
}
.seg-btn:hover { color: var(--text-primary); }

.seg-radio:checked + .seg-btn {
  background:  var(--bg-active);
  color:       var(--text-primary);
  font-weight: var(--font-weight-semibold);
  box-shadow:  var(--shadow-seg);
}

.seg-radio:focus-visible + .seg-btn {
  outline:        2px solid var(--focus-ring-visible);
  outline-offset: 1px;
}

.seg-ctrl-sm .seg-btn { padding: 3px 7px; font-size: var(--font-size-xs); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH (Apple HIG)
   ═══════════════════════════════════════════════════════════════════════════ */
.sync-toggles { display: flex; flex-direction: column; gap: 3px; }

.toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  cursor:          pointer;
  padding:         6px 0;
  user-select:     none;
  gap:             8px;
}

.toggle-label {
  font-size:  var(--font-size-md);
  color:      var(--text-primary);
  flex:       1;
  min-width:  0;
  transition: color var(--t-fast);
}
.toggle-row:hover .toggle-label { color: var(--text-primary); }

.toggle { position: relative; flex-shrink: 0; }

.toggle input[type="checkbox"] {
  position:       absolute;
  opacity:        0;
  width:          0;
  height:         0;
  pointer-events: none;
}

.toggle-track {
  display:       block;
  width:         28px;
  height:        16px;
  background:    var(--bg-active);
  border:        1px solid var(--border);
  border-radius: var(--r-pill);
  position:      relative;
  transition:    background var(--t-normal), border-color var(--t-normal), box-shadow var(--t-normal);
  cursor:        pointer;
}

.toggle-thumb {
  position:      absolute;
  top:           2px;
  left:          2px;
  width:         10px;
  height:        10px;
  background:    var(--toggle-thumb-off);
  border-radius: 50%;
  transition:    left var(--t-normal), background var(--t-normal);
  box-shadow:    var(--shadow-thumb);
}

.toggle input[type="checkbox"]:checked + .toggle-track {
  background:   var(--color-accent);
  border-color: transparent;
  box-shadow:   var(--color-accent-ring);
}
.toggle input[type="checkbox"]:checked + .toggle-track .toggle-thumb {
  left:       14px;
  background: var(--toggle-thumb-on);
  box-shadow: var(--shadow-thumb-active);
}
.toggle input[type="checkbox"]:focus-visible + .toggle-track {
  outline:        2px solid var(--focus-ring-visible);
  outline-offset: 2px;
}

/* ─── Sync group — two-state card (unlinked / linked) ────────────────────── */

/* Progressive disclosure: hide toggles + unlink button until linked */
.sync-linked-only { display: none !important; }
#sync-group.linked .sync-linked-only { display: flex !important; }

/* File row title: muted when no file, full weight when linked */
#sync-group:not(.linked) #sync-filename {
  color:       var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}
/* Remove bottom border on file row when it is the only visible row */
#sync-group:not(.linked) > .hig-row { border-bottom: none; }

/* State label colors */
#sync-state-label.sync-watching { color: var(--warn); }
#sync-state-label.sync-linked   { color: var(--text-body); }

/* ═══════════════════════════════════════════════════════════════════════════
   MCP PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.mcp-section-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   5px;
}

/* ─── MCP client icon strip ───────────────────────────────────────────────── */
.mcp-client-strip {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  9px;
  padding:     0 2px;
  flex-wrap:   wrap;
}

.mcp-works-label {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color:          var(--text-tertiary);
  flex-shrink:    0;
  margin-right:   2px;
}

.mcp-client-icon {
  display:     inline-flex;
  align-items: center;
  color:       var(--text-primary);
  opacity:     0.88;
  flex-shrink: 0;
  transition:  opacity var(--t-fast);
}
.mcp-client-icon:hover { opacity: 1; }
.mcp-client-icon svg   { width: 18px; height: 18px; }

/* btn-primary-sm — used in MCP connection actions */
.btn-primary-sm {
  background:    var(--bg-hover);
  color:         var(--text-primary);
  border:        1px solid var(--border-strong);
  white-space:   nowrap;
  border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOG
   ═══════════════════════════════════════════════════════════════════════════ */

.hig-select,
.log-filter-select {
  -webkit-appearance: none;
  appearance:         none;
  background:         var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' stroke='rgba(242,242,247,0.40)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 5px center / 11px 11px;
  border:             1px solid var(--border);
  border-radius:      var(--r-md);
  color:              var(--text-body);
  font-size:          var(--font-size-xs);
  font-family:        inherit;
  padding:            2px 22px 2px 7px;
  cursor:             pointer;
  outline:            none;
  transition:         border-color var(--t-fast);
}
.hig-select:focus { border-color: var(--border-strong); }

.error-count            { font-size: var(--font-size-xs); color: var(--text-body); white-space: nowrap; }
.error-count.has-errors { color: var(--error); }

.log-area {
  width:         100%;
  height:        150px;
  background:    var(--bg-input);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text-body);
  font-family:   var(--font-mono);
  font-size: var(--font-size-xs);
  padding:       7px;
  resize:        vertical;
  line-height: var(--leading-loose);
}
.log-area:focus { outline: none; border-color: var(--border-strong); }

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSCRIPT OUTPUT
   ═══════════════════════════════════════════════════════════════════════════ */
.transcript-area {
  width:         100%;
  max-height:    180px;
  overflow-y:    auto;
  background:    var(--bg-input);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text-body);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
  padding:       8px;
  margin-top:    5px;
  white-space:   pre-wrap;
  word-break:    break-word;
}

.transcript-meta {
  font-size: var(--font-size-xs);
  color:       var(--text-body);
  flex:        1;
  margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LICENSE SCREEN (activation gate)
   ═══════════════════════════════════════════════════════════════════════════ */
.license-screen {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100vh;
  min-height:      400px;
  padding:         32px 28px 24px;
  gap:             0;
}

.license-wordmark {
  height:       46px;
  width:        auto;
  display:      block;
  margin:       0 auto 34px;   /* owns the gap to the form (tagline removed) */
  opacity:      1;
  user-select:  none;
}

.license-logo-wrap,
.license-title { display: none; }

.license-form {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.license-input {
  width:          100%;
  background:     var(--bg-input);
  border:         1px solid var(--border-strong);
  border-radius:  var(--r-lg);
  color:          var(--text-primary);
  font-size:      var(--font-size-md);
  font-family:    var(--font-mono);
  padding:        10px 14px;
  text-align:     center;
  letter-spacing: var(--tracking-caps);
  outline:        none;
  transition:     border-color var(--t-fast), box-shadow var(--t-fast);
}
.license-input:focus {
  border-color: var(--border-strong);
  box-shadow:   var(--focus-ring);
}
.license-input::placeholder {
  color:          var(--text-caption);
  letter-spacing: var(--tracking-wide);
  font-size: var(--font-size-sm);
}

@keyframes shake {
  0%, 100% { transform: translateX(0);    }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX( 7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX( 4px); }
}
.license-input.shake {
  animation:    shake var(--duration-shake) var(--ease-shake);
  border-color: var(--error) !important;
  box-shadow:   var(--error-ring) !important;
}

.btn-activate {
  width:          100%;
  padding:        10px 0;
  background:     var(--color-accent);
  color:          var(--color-on-accent);
  border:         1px solid var(--color-accent);
  border-radius:  var(--r-lg);
  font-size:      var(--font-size-md);
  font-weight:    var(--font-weight-semibold);
  font-family:    inherit;
  letter-spacing: var(--tracking-normal);
  cursor:         pointer;
  position:       relative;
  overflow:       hidden;
  transition:     filter var(--t-fast), opacity var(--t-fast);
}
.btn-activate:hover  { opacity: 0.88; }
.btn-activate:active { opacity: .80; }
.btn-activate:disabled { opacity: .30; cursor: default; }

.btn-activate.loading { color: transparent; cursor: default; }
.btn-activate.loading::after {
  content:          '';
  position:         absolute;
  top:              50%;
  left:             50%;
  margin-top:       -6px;
  margin-left:      -6px;
  width:            12px;
  height:           12px;
  border:           2px solid var(--spinner-track);
  border-top-color: var(--spinner-head);
  border-radius:    var(--r-pill);
  animation:        spin var(--duration-spin) var(--ease-spin) infinite;
}

/* Error messages can now be full sentences (device-limit, key-not-found) —
   10px + snug leading so two lines stay readable on the 280px panel. */
.license-error {
  font-size:   var(--font-size-sm);
  line-height: var(--leading-snug);
  color:       var(--error);
  text-align:  center;
  min-height:  12px;
}

/* Inline action under an activation error — only device-limit shows it.
   White ink (the accent), so it reads as THE way forward, not decoration. */
.license-portal-action {
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-semibold);
  color:           var(--color-accent-text);
  text-align:      center;
  text-decoration: none;
  cursor:          pointer;
  transition:      opacity var(--t-fast);
}
.license-portal-action:hover { opacity: 0.75; }

/* ─── Device manager — in-panel device-limit recovery ─────────────────────────
   Apple pattern: the error screen BECOMES the fix. Live device list (reuses
   the hig-group/hig-row grammar), two-tap Remove, then activation auto-retries.
   No browser, no portal hunt. */
.device-manager {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  width:          100%;
  margin-top:     2px;
  text-align:     left;
}
.device-mgr-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  var(--tracking-label);
  text-transform:  uppercase;
  color:           var(--text-tertiary);
  padding:         0 2px;
}
.device-mgr-count   { letter-spacing: var(--tracking-normal); font-variant-numeric: tabular-nums; }
.device-mgr-loading { font-size: var(--font-size-sm); color: var(--text-tertiary); text-align: center; padding: 6px 0; }

/* Armed = first tap landed; second tap removes. Red so the stakes are clear. */
.device-list .device-remove.armed {
  color:        var(--error)    !important;
  background:   var(--error-bg) !important;
}
.device-list .hig-row.removed { opacity: 0.35; pointer-events: none; }

/* "Sign out all other devices" — full-width lock-down action under the list.
   Quiet by default; turns destructive-red when armed for the confirm tap. */
.device-signout-others {
  display:       block;
  width:         100%;
  margin-top:    8px;
  padding:       7px 0;
  background:    transparent;
  border:        1px solid var(--border-strong);
  border-radius: var(--r-md);
  color:         var(--text-body);
  font-family:   inherit;
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-medium);
  cursor:        pointer;
  transition:    color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.device-signout-others:hover    { color: var(--text-primary); background: var(--hover-normal); }
.device-signout-others.armed    { color: var(--error); border-color: var(--error-bd); background: var(--error-bg); }
.device-signout-others:disabled { opacity: 0.6; cursor: default; }

/* ─── Devices disclosure row (license card) ───────────────────────────────────
   "Devices · 3 of 5" — collapsed by default; tap to expand the device manager
   in place. Count alone = glanceable status. */
.device-disclosure {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  background:      transparent;
  border:          none;
  border-top:      1px solid var(--divider);
  padding:         10px 0 0;
  margin-top:      2px;
  font-family:     inherit;
  cursor:          pointer;
  transition:      opacity var(--t-fast);
}
.device-disclosure:hover .device-disclosure-label { color: var(--text-primary); }
.device-disclosure-label {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color:       var(--text-body);
  transition:  color var(--t-fast);
}
.device-disclosure-meta {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.device-count {
  font-size:            var(--font-size-md);
  color:                var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.device-chevron {
  width:           14px;
  height:          14px;
  stroke:          currentColor;
  stroke-width:    1.8;
  stroke-linecap:  round;
  stroke-linejoin: round;
  fill:            none;
  color:           var(--text-tertiary);
  transition:      transform var(--t-normal);
}
.device-disclosure[aria-expanded="true"] .device-chevron { transform: rotate(90deg); }

/* Footer — secondary CTA over a quiet version caption */
.license-footer {
  margin-top:     22px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
}

.license-buy {
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  color:           var(--text-body);
  text-decoration: none;
  transition:      color var(--t-fast);
}
.license-buy:hover { color: var(--text-primary); }

/* Version — support metadata, not brand copy; smallest, quietest text on screen */
.license-version {
  font-size:      var(--font-size-xs);
  color:          var(--text-caption);
  letter-spacing: var(--tracking-normal);
  user-select:    none;
}

/* ─── License entry block (inside license view) ──────────────────────────── */
.settings-license-entry {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        14px;
  background:     var(--bg-input);
  border:         1px solid var(--border-strong);
  border-radius:  var(--r-xl);
  margin-bottom:  10px;
}
.settings-license-entry-hint {
  font-size:   var(--font-size-md);
  color:       var(--text-tertiary);
  line-height: var(--leading-normal);
}
.settings-license-entry .license-input { margin: 0; }
.settings-license-entry .license-error { font-size: var(--font-size-md); }
.settings-license-entry .license-buy {
  font-size: var(--font-size-sm);
  text-align: right;
  display:    inline-block;
  align-self: flex-end;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.main-panel { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   LICENSE VIEW
   ═══════════════════════════════════════════════════════════════════════════ */
#license-view { overflow-y: auto; }

.license-view-header {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding:         10px 13px 8px;
  border-bottom:   1px solid var(--divider);
  margin-bottom:   2px;
}
.license-view-title {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--tracking-caps);
  color:          var(--text-body);
  text-transform: uppercase;
}
.btn-license-close {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  background:    none;
  border:        none;
  color:         var(--text-body);
  padding:       5px;
  cursor:        pointer;
  border-radius: var(--r-sm);
  transition:    color var(--t-fast), background var(--t-fast);
}
.btn-license-close svg {
  width:           14px;
  height:          14px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.8;
  stroke-linecap:  round;
}
.btn-license-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.settings-field {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
}
.settings-label { font-size: var(--font-size-md); color: var(--text-body); white-space: nowrap; flex-shrink: 0; }
.settings-value { font-size: var(--font-size-md); color: var(--text-body); text-align: right; }

.settings-input {
  flex:          1;
  min-width:     0;
  background:    var(--bg-input);
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
  color:         var(--text-body);
  font-family:   var(--font-mono);
  font-size: var(--font-size-xs);
  padding:       4px 7px;
  letter-spacing: var(--tracking-wide);
  cursor:        default;
  text-align:    right;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LICENSE CARD — dark matte card
   ═══════════════════════════════════════════════════════════════════════════ */
.license-card {
  width:          100%;
  position:       relative;
  background:     var(--bg-card);
  border:         1px solid var(--border-strong);
  border-radius:  var(--r-xl);
  padding:        14px 14px 12px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  box-shadow:     0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  transition:     border-color var(--duration-slow), box-shadow var(--duration-slow);
}
/* Pro — accent ring */
.license-card[data-tier="pro"] {
  border-color: var(--tier-pro-bd);
  box-shadow:   0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px var(--color-accent-tint);
}
/* Max — premium neutral border */
.license-card[data-tier="max"],
.license-card[data-tier="studio"] {
  border-color: var(--tier-max-card-bd);
}

.license-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.license-card-header-right {
  display:     flex;
  align-items: center;
  gap:         6px;
}
/* Plan identity — the card is titled by the plan the user is on
   (PRISM FREE / GO / PRO / MAX), not the generic words "License Card". */
.license-card-label {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--tracking-label);
  color:          var(--text-body);
  text-transform: uppercase;
}
.license-card[data-tier="go"]  .license-card-label { color: var(--text-primary); }
.license-card[data-tier="pro"] .license-card-label { color: var(--tier-pro-text); }
.license-card[data-tier="max"] .license-card-label,
.license-card[data-tier="studio"] .license-card-label { color: var(--white); }

/* Usage strip — nested surface (card-within-card) */
.usage-strip {
  padding:       10px 12px;
  background:    var(--usage-bg);
  border:        1px solid var(--divider);
  border-radius: var(--r-lg);
}
.usage-strip-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   8px;
}
.usage-strip-title {
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-bold);
  letter-spacing: var(--tracking-label);
  color:          var(--text-body);
  text-transform: uppercase;
}
@keyframes prism-spin { to { transform: rotate(360deg); } }
.usage-loading-spinner {
  display:      none;
  align-items:  center;
  color:        var(--text-tertiary);
}
.usage-loading-spinner.active {
  display:      inline-flex;
}
.usage-loading-spinner svg {
  width:           12px;
  height:          12px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    2;   /* deliberate: SF-style optical compensation at 12px (panel standard is 1.8 at 14-16px) */
  stroke-linecap:  round;
  stroke-linejoin: round;
  animation:       prism-spin var(--duration-spin) var(--ease-spin) infinite;
}
/* Reduced motion: a frozen spinner arc reads as broken — pulse opacity instead */
@media (prefers-reduced-motion: reduce) {
  .usage-loading-spinner svg,
  .btn-activate.loading::after,
  .spinner { animation: none !important; }
  .usage-loading-spinner { opacity: 0.6; }
  #main-view, #license-view { animation: none; }
}

/* ─── Usage table — Name | Quota | Used ───────────────────────────────────
   Real-time quota view (no bars). Add a meter category with one more
   <tr data-meter> (name td + .usage-quota td + .usage-used td); card grows.
   Color appears ONLY on the Used cell, and only to signal state. */
.usage-table {
  width:                100%;
  border-collapse:      collapse;
  font-variant-numeric: tabular-nums;
}
.usage-table th,
.usage-table td { text-align: left; white-space: nowrap; }
.usage-table thead th {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color:          var(--text-tertiary);
  padding-bottom: 7px;
  border-bottom:  1px solid var(--divider);
}
/* Numeric columns separate two ways: SPACE (24px gutters on header + body)
   and TONE (Quota = muted allowance, Used = the live number, primary). */
.usage-table thead th + th { text-align: right; padding-left: 24px; }
.usage-table tbody td {
  padding-top: 8px;
  font-size:   var(--font-size-md);
  color:       var(--text-body);                     /* the name column */
  font-weight: var(--font-weight-medium);
}
.usage-table .usage-quota,
.usage-table .usage-used {
  text-align:   right;
  width:        1%;                                  /* shrink to content; name takes the rest */
  padding-left: 24px;
}
.usage-table .usage-quota {
  color:        var(--text-tertiary);
  font-weight:  var(--font-weight-regular);
}
.usage-table .usage-used {
  color:        var(--text-primary);
  font-weight:  var(--font-weight-semibold);
}
.usage-table .usage-used.warn { color: var(--warn); }
.usage-table .usage-used.over { color: var(--error); }

/* Right side of the usage header — resets caption + loading spinner */
.usage-strip-meta { display: flex; align-items: center; gap: 6px; }

/* "Resets <date>" caption — shares the header row with the spinner slot */
.usage-resets {
  font-size:   var(--font-size-xs);
  color:       var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Inline load-failure state — replaces the silent "— / —" forever */
.usage-error {
  display:     none;
  font-size:   var(--font-size-sm);
  color:       var(--text-tertiary);
  padding-top: 2px;
}
.usage-error.active { display: block; }
.usage-retry {
  color:           var(--color-accent-text);
  font-weight:     var(--font-weight-medium);
  cursor:          pointer;
  text-decoration: none;
}
.usage-retry:hover { opacity: 0.8; }

/* License key — a credential, not a caption: comfortable mono, medium weight */
/* License key layout — type comes from the shared credential rule above */
.license-key-text {
  flex:           1;
  min-width:      0;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
  padding:        9px 0;
}

/* Plan-action pill — the single revenue CTA, in the card header-right.
   FILLED accent (Apple's prominent-action style). Free/Go → "Upgrade →",
   Pro → "Upgrade to Max →"; hidden for Max. */
.btn-upgrade-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  background:     var(--color-accent);
  border:         none;
  color:          var(--color-on-accent);
  font-size:      var(--font-size-sm);
  font-weight:    var(--font-weight-semibold);
  font-family:    inherit;
  letter-spacing: var(--tracking-tight);
  padding:        4px 11px;
  border-radius:  var(--r-pill);
  box-shadow:     var(--shadow-sm);
  cursor:         pointer;
  white-space:    nowrap;
  transition:     filter var(--t-fast), opacity var(--t-fast);
}
.btn-upgrade-pill:hover  { filter: brightness(1.10); }
.btn-upgrade-pill:active { opacity: 0.78; }

/* Card footer — Remove License (left, destructive text) + Manage (right, plain link) */
.license-card-deactivate {
  border-top:      1px solid var(--divider);
  padding-top:     10px;
  margin-top:      2px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Deactivate — Apple HIG text-only destructive: color alone signals danger */
.btn-deactivate-full {
  background:   transparent !important;
  border-color: transparent !important;
  box-shadow:   none !important;
  color:        var(--error) !important;
  font-size:    var(--font-size-md);
  font-weight:  var(--font-weight-medium);
  padding:      0 !important;
  height:       auto !important;
  line-height:  1.4;
}
.btn-deactivate-full:hover { opacity: 0.70; filter: none; }

/* Manage subscription — plain neutral text link (right side of footer) */
.btn-manage-link {
  background:   transparent !important;
  border-color: transparent !important;
  box-shadow:   none !important;
  color:        var(--text-body) !important;
  font-size:    var(--font-size-md);
  font-weight:  var(--font-weight-medium);
  font-family:  inherit;
  padding:      0 !important;
  height:       auto !important;
  line-height:  1.4;
  cursor:       pointer;
  transition:   color var(--t-fast);
}
.btn-manage-link:hover { color: var(--text-primary) !important; opacity: 1; }

/* Remove-licence confirm — inline, replaces the footer row while open.
   HIG: a destructive action must be confirmed before it fires. */
.deactivate-confirm {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        9px 10px;
  margin-top:     2px;
  background:     var(--error-bg-soft);
  border:         1px solid var(--error-bd-soft);
  border-radius:  var(--r-md);
}
.deactivate-warning { font-size: var(--font-size-md); color: var(--text-body); line-height: var(--leading-snug); }
.deactivate-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-confirm-cancel {
  background:    var(--bg-surface);
  border:        1px solid var(--border-strong);
  color:         var(--text-primary);
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-medium);
  font-family:   inherit;
  padding:       4px 12px;
  border-radius: var(--r-md);
  cursor:        pointer;
  transition:    background var(--t-fast);
}
.btn-confirm-cancel:hover { background: var(--bg-hover); }
.btn-confirm-remove {
  background:    var(--error);
  border:        1px solid var(--error);
  color:         var(--white);
  font-size:     var(--font-size-md);
  font-weight:   var(--font-weight-semibold);
  font-family:   inherit;
  padding:       4px 12px;
  border-radius: var(--r-md);
  cursor:        pointer;
  transition:    filter var(--t-fast), opacity var(--t-fast);
}
.btn-confirm-remove:hover  { filter: brightness(1.12); }
.btn-confirm-remove:active { opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS LINKS
   ═══════════════════════════════════════════════════════════════════════════ */
.settings-links { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.settings-link {
  font-size: var(--font-size-xs);
  color:       var(--text-caption);
  text-decoration: none;
  cursor:      pointer;
  transition: color var(--t-fast);
}
.settings-link:hover { color: var(--text-primary); }
.settings-link.disabled { color: var(--text-caption); opacity: 0.38; cursor: default; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════════════════════ */
.spinner {
  display:          inline-block;
  width:            12px;
  height:           12px;
  border:           2px solid var(--spinner-track);
  border-top-color: var(--spinner-head);
  border-radius:    var(--r-pill);
  animation:        spin var(--duration-spin) var(--ease-spin) infinite;
  vertical-align:   middle;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */
.empty-state { font-size: var(--font-size-xs); color: var(--text-caption); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST REGION (ModalBridge)
   ═══════════════════════════════════════════════════════════════════════════ */
#prism-toast-region {
  position:       fixed;
  top:            12px;
  right:          12px;
  left:           12px;                 /* span the panel; right-aligns its toasts */
  z-index:        var(--z-toast);
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            8px;
  pointer-events: none;
  max-width:      calc(100vw - 24px);   /* panel is 280px — 320px clipped off-screen */
}

.prism-toast {
  pointer-events: auto;
  background:     var(--bg-overlay);
  color:          var(--text-primary);
  border:         1px solid var(--border-strong);
  border-radius:  var(--r-lg);
  padding:        12px 36px 12px 14px;
  box-shadow:     var(--shadow-lg);
  font-family:    var(--font-sans);
  font-size: var(--font-size-lg);
  position:       relative;
  opacity:        0;
  transform:      translateX(16px);
  transition:     opacity var(--t-normal), transform var(--t-normal);
}
.prism-toast.prism-toast-visible { opacity: 1; transform: translateX(0); }

.prism-toast-title {
  font-weight:   var(--font-weight-semibold);
  font-size:     var(--font-size-md);
  letter-spacing: var(--tracking-tight);
  color:         var(--text-primary);
  margin-bottom: 4px;
}
.prism-toast-msg     { line-height: var(--leading-snug); word-wrap: break-word; }
.prism-toast-actions { display: flex; gap: 6px; margin-top: 10px; justify-content: flex-end; }

.prism-toast-btn {
  background:    transparent;
  color:         var(--text-primary);
  border:        1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding:       4px 10px;
  font-size: var(--font-size-md);
  cursor:        pointer;
  font-family:   inherit;
}
.prism-toast-btn:hover { background: var(--bg-hover); }

.prism-toast-btn-primary {
  background:   var(--color-accent);
  border-color: transparent;
  color:        var(--color-on-accent);
}
.prism-toast-btn-primary:hover { filter: brightness(1.08); }

.prism-toast-close {
  position:    absolute;
  top:         8px;
  right:       8px;
  width:       18px;
  height:      18px;
  line-height: 16px;
  text-align:  center;
  font-size: var(--font-size-xl);
  color:       var(--text-caption);
  cursor:      pointer;
  border-radius: var(--r-sm);
}
.prism-toast-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.prism-toast-confirm { border-left: 2px solid var(--color-accent); }
.prism-toast-alert   { border-left: 2px solid var(--border-strong); }

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING TOOLTIP  — Apple HIG popover style
   Single shared instance (#prism-tooltip), positioned by JS on hover.
   ═══════════════════════════════════════════════════════════════════════════ */
#prism-tooltip {
  position:       fixed;
  z-index:        var(--z-toast);
  background:     var(--bg-overlay);
  color:          var(--text-body);
  font-size:      var(--font-size-xs);
  font-family:    var(--font-sans);
  font-weight:    var(--font-weight-regular);
  line-height:    var(--leading-snug);
  padding:        5px 9px 6px;
  border-radius:  var(--r-md);
  border:         1px solid var(--border-strong);
  box-shadow:     var(--shadow-lg), var(--shadow-inset);
  max-width:      210px;
  pointer-events: none;
  white-space:    normal;
  word-wrap:      break-word;
  opacity:        0;
  transform:      translateY(3px);
  transition:     opacity var(--duration-fast) var(--ease-default),
                  transform var(--duration-fast) var(--ease-default);
  user-select:    none;
}
#prism-tooltip.tt-on {
  opacity:   1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .btn-spinner,
  .btn-activate.loading::after { animation: none; }
  .toggle-track, .toggle-thumb, .seg-btn, .tab-btn { transition: none; }
  #prism-tooltip { transition: none; }
}