/* rAIter — app-specific styles
 *
 * Everything here references Veluma's token roles (tokens.css), so the TWIN
 * palette/type/shape flow through automatically. This file holds only what is
 * NOT in Veluma's shell.css: buttons, the neutral chooser, the rater workspace,
 * chat, and the composer.
 *
 * NOTE: buttons below are faithful to the TWIN button/contrast rules but are a
 * STAND-IN for Veluma's components.css. When that file is available, replace the
 * .btn block and use Veluma's real component classes.
 */

/* The `hidden` attribute must win over class-level display.
 * .shell-loading and .shell both set `display: grid`, which otherwise
 * overrides the browser's [hidden]{display:none} rule — leaving the boot
 * spinner (and the shell) visible even when JS sets element.hidden = true. */
[hidden] { display: none !important; }

/* ── Regions (single-page view switching) ── */
.region { display: none; }
.region.is-active { display: block; }

/* ── Header wordmark ──
 * Sized to sit inside the 64px header. shell.css ships height:156px (which
 * overflows a 64px header); this override is the working fit until Veluma's
 * real rendered height is confirmed. */
.shell-header-brand-mark { height: 40px; }

/* ── Buttons (TWIN contrast rules; stand-in for components.css) ── */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
  transition: background var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-sm { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-3); }
/* Primary — pink fill #E0017F, white text (permanent, ~4.7:1 AA) */
.btn-primary { background: var(--color-action-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-action-primary-hover); }
/* Secondary — paper fill, navy text, medium border */
.btn-secondary { background: var(--color-surface-card); color: var(--color-brand-anchor); border-color: var(--color-border-medium); }
.btn-secondary:hover { background: var(--color-brand-anchor-soft); }

/* ── Neutral chooser — three equal sibling raters ── */
.rater-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.rater-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-2);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default),
              transform var(--duration-fast) var(--easing-default);
}
.rater-card:hover { border-color: var(--color-action-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rater-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rater-card-mark {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--color-brand-anchor-soft);
  color: var(--color-brand-anchor);
  font-size: 16px;
  margin-bottom: var(--space-1);
}
.rater-card-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}
.rater-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  min-height: 2.6em;
}
.rater-card-tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-mono);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.rater-card-go { margin-top: var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-link); }

/* ── Client-context chip ── */
.client-chip {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-brand-anchor);
  background: var(--color-brand-anchor-soft);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
}

/* ── Risk context strip ── */
.rk-context { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.rk-eyebrow { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-mono); color: var(--color-text-muted); }
.rk-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rk-field { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-surface-card); border: 1px solid var(--color-border-medium); border-radius: var(--radius-full); padding: 4px 6px 4px 12px; }
.rk-field span { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.rk-field input { border: none; outline: none; background: none; font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-text-primary); width: 92px; padding: 4px 8px; }
.rk-field input::placeholder { color: var(--color-text-muted); }

/* ── Chat ── */
.chat { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); min-height: 120px; }
.msg { display: flex; gap: var(--space-2); max-width: 680px; }
.msg-user { margin-left: auto; flex-direction: row-reverse; }
.msg-av { width: 30px; height: 30px; border-radius: var(--radius-full); flex-shrink: 0; display: grid; place-items: center; background: var(--color-brand-anchor); color: var(--color-text-inverse); font-family: var(--font-mono); font-size: 11px; font-weight: var(--font-weight-bold); margin-top: 2px; }
.msg-bub { font-size: var(--font-size-sm); line-height: var(--line-height-base); padding: 12px 15px; border-radius: var(--radius-lg); }
.msg-ai .msg-bub { background: var(--color-surface-card); border: 1px solid var(--color-border-soft); border-top-left-radius: var(--radius-sm); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
.msg-user .msg-bub { background: var(--color-action-secondary); color: var(--color-on-secondary); border-top-right-radius: var(--radius-sm); }

/* ── Composer ── */
.composer { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface-card); border: 1px solid var(--color-border-medium); border-radius: var(--radius-xl); padding: 8px 8px 8px 14px; box-shadow: var(--shadow-sm); }
.composer:focus-within { border-color: var(--color-action-primary); box-shadow: var(--shadow-focus); }
.composer-attach { font-size: 16px; border: none; background: none; cursor: pointer; color: var(--color-text-muted); }
.composer-input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-sans); font-size: var(--font-size-base); color: var(--color-text-primary); }
.composer-input::placeholder { color: var(--color-text-muted); }
.composer-send { padding: 9px 18px; }

/* Life rater hides the CL/PL risk-context strip (set by raiter.js) */
.rk-context[hidden] { display: none; }