/* =============================================================================
   Market Hunters Club — application styles

   Rules (see .claude/skills/market-hunters-ui/SKILL.md):
     * every color comes from tokens.css via var(--color-*); no raw hex;
     * every class is BEM: block__element--modifier, runtime state is is-*;
     * no utility classes, no generic blocks, no cross-block selectors.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--text-body) / 1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

a {
  color: var(--color-brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

/* Themed everywhere (owner request 2026-09-29): the browser's own OS-drawn scrollbar clashed
   with the dark UI. Firefox honors the standard properties on any scrollable element; every
   other engine - Chrome, Edge, and Safari, which never adopted scrollbar-width/scrollbar-color -
   needs the -webkit- pseudo-elements instead, so both are declared. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) var(--color-bg-subtle);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-subtle);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border: 2px solid var(--color-bg-subtle);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-3);
}

::-webkit-scrollbar-corner {
  background: var(--color-bg-subtle);
}

::-webkit-scrollbar-button {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* =============================================================================
   BRAND
   ========================================================================== */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand__logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--color-brand-grad-from), var(--color-brand-grad-to));
  display: grid;
  place-items: center;
  color: var(--color-on-brand);
  font-weight: 800;
  font-size: 13px;
  flex: none;
}

.brand__name {
  line-height: 1.15;
}

.brand__tagline {
  display: block;
  font-weight: 500;
  color: var(--color-text-3);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =============================================================================
   BUTTON
   ========================================================================== */
.btn {
  font: 600 13px var(--font-sans);
  height: var(--control-md);
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.15s;
  white-space: nowrap;
  color: var(--color-text);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

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

/* A button whose request is running (app.js bindBusyButtons): its spinner shows, it cannot be
   pressed again, and it stays readable instead of fading like a plain disabled button. */
.btn.is-busy {
  cursor: progress;
  pointer-events: none;
}

.btn.is-busy:disabled,
.btn.is-busy[aria-disabled="true"] {
  opacity: 0.7;
}

.btn--primary {
  background: linear-gradient(180deg, var(--color-brand-hover), var(--color-brand));
  color: var(--color-on-brand);
}

.btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 0 20px var(--color-brand-soft);
}

.btn--secondary {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--color-surface-3);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-brand-line);
  color: var(--color-brand);
}

.btn--outline:hover:not(:disabled) {
  background: var(--color-brand-soft);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-2);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* buy/sell only for trade actions */
.btn--buy {
  background: var(--color-buy);
  color: var(--color-on-buy);
}

.btn--sell {
  background: var(--color-sell);
  color: var(--color-on-sell);
}

.btn--sm {
  height: var(--control-sm);
  padding: 0 12px;
  font-size: var(--text-small);
  border-radius: var(--radius-sm);
}

.btn--lg {
  height: var(--control-lg);
  padding: 0 24px;
  font-size: 15px;
  border-radius: var(--radius-lg);
}

.btn--block {
  width: 100%;
}

/* =============================================================================
   FIELD
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-2);
}

.field__control {
  height: var(--control-input);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: 400 var(--text-body) var(--font-sans);
  padding: 0 12px;
  width: 100%;
  transition: 0.15s;
}

.field__control::placeholder {
  color: var(--color-text-3);
}

.field__control:hover {
  border-color: var(--color-border-strong);
}

.field__control:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.field__control:disabled {
  opacity: 0.4;
}

.field--error .field__control {
  border-color: var(--color-sell);
  box-shadow: 0 0 0 3px var(--color-sell-soft);
}

.field__hint {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.field__hint--error {
  color: var(--color-sell);
}

.field__hint--error[hidden] {
  display: none;
}

/* ------------------------------------------------------------- datefield --
   Custom calendar popover replacing a bare <input type="date">, whose native
   picker cannot be themed in any browser. The original input stays in the DOM
   (id moved to the trigger, tabIndex -1) so form submission and `required`
   validation are untouched - see bindDateFields() in app.js. */
.datefield {
  position: relative;
}

.datefield__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.datefield__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--control-input);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: 400 var(--text-body) var(--font-sans);
  padding: 0 12px;
  cursor: pointer;
  transition: 0.15s;
}

.datefield__trigger:hover {
  border-color: var(--color-border-strong);
}

.datefield__trigger:focus-visible,
.datefield.is-open .datefield__trigger {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.datefield__icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-3);
  flex-shrink: 0;
}

.datefield__value {
  flex: 1;
  text-align: start;
  font: 500 var(--text-body) var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datefield.is-empty .datefield__value {
  color: var(--color-text-3);
  font-family: var(--font-sans);
  font-weight: 400;
}

.datefield__popover {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: 30;
  width: 264px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}

.datefield__popover[hidden] {
  display: none;
}

.datefield__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-2);
}

.datefield__caption {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
}

.datefield__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  font-size: 16px;
  cursor: pointer;
}

.datefield__nav:hover {
  background: var(--color-surface-2);
  color: var(--color-brand);
}

.datefield__weekdays,
.datefield__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.datefield__weekday {
  text-align: center;
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
  padding-block-end: var(--space-1);
}

.datefield__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: 500 var(--text-small) var(--font-mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.datefield__day:hover {
  background: var(--color-surface-2);
}

.datefield__day--outside {
  color: var(--color-text-3);
}

.datefield__day.is-today {
  box-shadow: inset 0 0 0 1px var(--color-brand-line);
}

.datefield__day.is-selected {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.datefield__day:disabled {
  cursor: default;
  opacity: 0.5;
}

.datefield__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.datefield__quick {
  background: none;
  border: 0;
  color: var(--color-brand);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.datefield__quick:hover {
  background: var(--color-brand-soft);
}

/* A hint that behaves like a link (opens a modal, etc.) but is a real <button>. */
.field__action {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-eyebrow);
  color: var(--color-brand);
  cursor: pointer;
}

.field__action:hover {
  text-decoration: underline;
}

.field__error {
  font-size: var(--text-eyebrow);
  color: var(--color-sell);
}

/* =============================================================================
   PW-FIELD (password input with a visibility toggle)
   ========================================================================== */
.pw-field {
  position: relative;
}

.pw-field__control {
  height: var(--control-input);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: 400 var(--text-body) var(--font-sans);
  padding: 0 42px 0 12px;
  width: 100%;
  transition: 0.15s;
}

.pw-field__control::placeholder {
  color: var(--color-text-3);
}

.pw-field__control:hover {
  border-color: var(--color-border-strong);
}

.pw-field__control:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.pw-field__toggle {
  position: absolute;
  right: 6px;
  top: 5px;
  width: 30px;
  height: 30px;
  border: 0;
  background: 0;
  color: var(--color-text-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
}

.pw-field__toggle:hover {
  color: var(--color-brand);
  background: var(--color-surface-2);
}

/* =============================================================================
   OTP-FIELD
   ========================================================================== */
.otp-field {
  display: flex;
  gap: 8px;
}

.otp-field__box {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 54px;
  text-align: center;
  font: 600 22px var(--font-mono);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: 0.15s;
}

.otp-field__box:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.otp-field__box:not(:placeholder-shown) {
  border-color: var(--color-brand-line);
}

.otp-field--error .otp-field__box {
  border-color: var(--color-sell);
  box-shadow: 0 0 0 3px var(--color-sell-soft);
  animation: otp-shake 0.35s;
}

@keyframes otp-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.otp-field__error {
  font-size: var(--text-eyebrow);
  color: var(--color-sell);
}

/* =============================================================================
   ALERT
   ========================================================================== */
.alert {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: 13px;
  align-items: flex-start;
}

.alert__body {
  min-width: 0;
}

.alert__icon {
  font-style: normal;
  font-weight: 700;
}

.alert__title {
  display: block;
  margin-bottom: 2px;
}

.alert__message {
  color: var(--color-text-2);
}

/* generic info uses brand; green/red stay for market meaning only */
.alert--info {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-line);
}

.alert--info .alert__icon {
  color: var(--color-brand);
}

.alert--neutral {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
}

.alert--danger {
  background: var(--color-sell-soft);
  border-color: var(--color-sell-soft);
}

.alert--danger .alert__icon {
  color: var(--color-sell);
}

/* =============================================================================
   BADGE
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  font: 600 var(--text-eyebrow) var(--font-sans);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge--buy {
  background: var(--color-buy-soft);
  color: var(--color-buy);
}

.badge--sell {
  background: var(--color-sell-soft);
  color: var(--color-sell);
}

.badge--gold {
  background: var(--color-brand-soft);
  color: var(--color-brand);
  border-color: var(--color-brand-line);
}

.badge--gray {
  background: var(--color-surface-3);
  color: var(--color-text-2);
}

/* =============================================================================
   LANG-SWITCHER
   ========================================================================== */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.lang-switcher__link {
  color: var(--color-text-3);
  font-weight: 600;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.lang-switcher__link:hover {
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface-2);
}

.lang-switcher__link.is-active {
  color: var(--color-brand);
  text-decoration: none;
}

.lang-switcher__sep {
  color: var(--color-text-3);
}

/* =============================================================================
   PW-RULES / PW-METER
   ========================================================================== */
.pw-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.pw-rules__item::before {
  content: "\25CB";
  margin-right: 6px;
}

.pw-rules__item.is-ok {
  color: var(--color-text);
}

.pw-rules__item.is-ok::before {
  content: "\25CF";
  color: var(--color-brand);
}

.pw-meter {
  display: flex;
  gap: 4px;
}

.pw-meter__bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-surface-3);
  transition: 0.2s;
}

.pw-meter[data-strength="1"] .pw-meter__bar:nth-child(-n + 1) {
  background: var(--color-text-3);
}

.pw-meter[data-strength="2"] .pw-meter__bar:nth-child(-n + 2) {
  background: var(--color-brand-strong);
}

.pw-meter[data-strength="3"] .pw-meter__bar:nth-child(-n + 3) {
  background: var(--color-brand);
}

.pw-meter[data-strength="4"] .pw-meter__bar {
  background: var(--color-brand-hover);
}

/* =============================================================================
   SUCCESS-MARK
   ========================================================================== */
.success-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  display: grid;
  place-items: center;
  color: var(--color-brand);
  font-size: 28px;
  box-shadow: var(--glow);
}

/* =============================================================================
   AUTH-LAYOUT (the login family shell; full page load by design)
   ========================================================================== */
.auth-layout {
  min-height: 100vh;
  /* `100dvh` tracks the ACTUAL visible viewport (shrinks with the on-screen keyboard); `100vh`
     stays put as a fallback for browsers that don't support it. Without this, the card sits
     centered in a box taller than what is visible once the keyboard opens, and the submit
     button ends up pushed off-screen — the phone still lets the person type, but tapping
     "Iniciar sesión" hits nothing (2026-09-22, reported as "no me deja iniciar sesión"). */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  /* Safety net: if the card still does not fit the visible height, the page scrolls to it
     instead of clipping it silently. */
  overflow-y: auto;
}

.auth-layout__panel {
  display: grid;
  grid-template-columns: minmax(340px, 460px) 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 620px;
  background: var(--color-bg);
  width: 100%;
  max-width: 1080px;
}

.auth-layout__aside {
  position: relative;
  overflow: hidden;
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(600px 400px at 70% 20%, var(--color-brand-soft), transparent 70%),
    var(--color-bg);
}

.auth-layout__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.45;
  mask-image: radial-gradient(circle at 60% 30%, var(--mask-opaque), transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 60% 30%, var(--mask-opaque), transparent 70%);
}

.auth-layout__aside-inner {
  position: relative;
}

/* =============================================================================
   AUTH-CARD
   ========================================================================== */
.auth-card {
  background: var(--color-surface);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
}

.auth-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.auth-card__body {
  margin: 32px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-card__foot {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
  text-align: center;
  margin-top: auto;
}

.auth-hero__title {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 380px;
}

.auth-hero__accent {
  color: var(--color-brand);
}

.auth-hero__text {
  color: var(--color-text-2);
  max-width: 420px;
  margin-top: 12px;
}

/* =============================================================================
   ENTRY (one step of the auth flow)
   ========================================================================== */
.entry {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.entry__back {
  align-self: flex-start;
  background: 0;
  border: 0;
  color: var(--color-text-3);
  font: 600 13px var(--font-sans);
  cursor: pointer;
  padding: 0;
}

.entry__back:hover {
  text-decoration: underline;
}

.entry__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.entry__subtitle {
  overflow-wrap: anywhere;
  color: var(--color-text-2);
  font-size: var(--text-body);
  margin-top: -8px;
}

.entry__inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.entry__between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.entry__muted {
  color: var(--color-text-3);
}

.entry__timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-brand);
  margin-left: 4px;
}

.entry__link {
  background: 0;
  border: 0;
  color: var(--color-brand);
  font: 600 13px var(--font-sans);
  cursor: pointer;
  padding: 0;
}

.entry__link:hover {
  text-decoration: underline;
}

/* =============================================================================
   FORM-STACK (vertical rhythm inside a form)
   ========================================================================== */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-stack__actions {
  margin-top: var(--space-2);
}

/* =============================================================================
   APP-SHELL (the authenticated frame; HTMX swaps only app-main)
   ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: var(--color-bg);
}

.app-shell__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ----------------------------------------------------------------- sidebar */
.app-sidebar {
  background: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.app-sidebar__brand {
  padding: 0 var(--space-2);
}

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

.app-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar__group-label {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-3);
  font-weight: 600;
  padding: 0 var(--space-2) var(--space-2);
}

.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  font-size: 13px;
  font-weight: 500;
}

.app-sidebar__link:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
}

.app-sidebar__link.is-active {
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 600;
}

.app-sidebar__icon {
  width: 18px;
  text-align: center;
  flex: none;
  opacity: 0.9;
}

.app-sidebar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar__link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.app-sidebar__badge {
  margin-left: auto;
  font: 600 10px var(--font-mono);
  color: var(--color-text-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: 1px 6px;
}

/* A sidebar entry that performs an action (sign out) instead of navigating. */
.app-sidebar__action {
  margin: 0;
  padding: 0;
}

.app-sidebar__link--action {
  width: 100%;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}

.app-sidebar__foot {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

/* ----------------------------------------------------------------- topbar */
.app-topbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-topbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.app-topbar__title {
  font-size: var(--text-h3);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-topbar__icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-2);
  cursor: pointer;
}

.app-topbar__icon-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.app-topbar__unread {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand);
  border: 2px solid var(--color-bg-subtle);
}

.app-topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-2);
  font-size: var(--text-small);
}

.app-topbar__user:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
}

.app-topbar__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-grad-from), var(--color-brand-grad-to));
  display: grid;
  place-items: center;
  color: var(--color-on-brand);
  font-weight: 700;
  font-size: 11px;
  flex: none;
}

/* ------------------------------------------------------------------ main */
.app-main {
  flex: 1;
  padding: var(--space-6);
  min-width: 0;
}

/* The risk notice under every authenticated screen (owner, 2026-10-11). */
.app-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-subtle);
}

.app-footer__text {
  max-width: 980px;
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: 1.6;
}

.app-footer__label {
  color: var(--color-text-2);
  font-weight: 600;
}

.app-main__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.app-main__heading {
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-main__subtitle {
  color: var(--color-text-3);
  font-size: var(--text-small);
  margin-top: 4px;
}

.app-main__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* HTMX progress bar: a thin gold line while a request is in flight. */
.app-main__progress {
  height: 2px;
  background: transparent;
  margin-bottom: var(--space-3);
}

.app-main__progress.is-loading {
  background: linear-gradient(90deg, transparent, var(--color-brand), transparent);
  animation: app-progress 1s linear infinite;
}

@keyframes app-progress {
  from {
    background-position: -200px 0;
  }
  to {
    background-position: 200px 0;
  }
}

/* =============================================================================
   PROFILE-CARD
   ========================================================================== */
.profile-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 620px;
}

.profile-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.profile-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-grad-from), var(--color-brand-grad-to));
  display: grid;
  place-items: center;
  color: var(--color-on-brand);
  font-weight: 800;
  font-size: 18px;
  flex: none;
}

.profile-card__identity {
  min-width: 0;
}

.profile-card__name {
  font-size: var(--text-h3);
  font-weight: 600;
}

.profile-card__email {
  color: var(--color-text-3);
  font-size: var(--text-small);
}

.profile-card__badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.profile-card__section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
}

.profile-card__section-title {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.profile-card__signout {
  margin-top: var(--space-4);
}

/* =============================================================================
   STUDIO (the Estudio: indicators, versions, simulations, compare, publish)
   ========================================================================== */
.studio-back {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-text-2);
  font-size: var(--text-small);
  margin-bottom: var(--space-1);
}

.studio-back:hover {
  color: var(--color-text);
}

.studio-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.studio-tested {
  color: var(--color-text-2);
  font-size: var(--text-small);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

.studio-poll {
  color: var(--color-text-2);
  font-size: var(--text-small);
  margin-bottom: var(--space-4);
}

.studio-empty {
  color: var(--color-text-3);
  padding: var(--space-6) 0;
}

/* the three numbers of a reading */
.studio-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.studio-numbers__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.studio-numbers__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.studio-numbers__value--gain {
  color: var(--color-buy);
}

.studio-numbers__value--loss {
  color: var(--color-sell);
}

.studio-numbers__label {
  color: var(--color-text-3);
  font-size: var(--text-eyebrow);
}

/* the list of a simulation's trades beside its chart: filters, then the list (prev-trades) */
.studio-trades__filters {
  display: grid;
  gap: var(--space-2);
}

.studio-trades__results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
}

.studio-trades__legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-1);
  color: var(--color-text-3);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-trades__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text-2);
  font-size: var(--text-small);
  cursor: pointer;
}

.studio-trades__chip:hover {
  border-color: var(--color-brand-line);
}

.studio-trades__chip:focus-within {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.studio-trades__chip.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.studio-trades__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.studio-trades__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-3);
}

.studio-trades__selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.studio-trades__field {
  display: block;
  min-width: 0;
}

.studio-trades__select {
  width: 100%;
}

.studio-trades__range,
.studio-trades__empty {
  margin: var(--space-2) 0;
  color: var(--color-text-3);
  font-size: var(--text-small);
}

.studio-trades__pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

/* a reading made on older data than the current dataset */
.studio-version__line--warn {
  color: var(--color-brand);
}

/* the form that runs an outdated simulation again by itself: nothing to see */
.studio-refresh {
  display: none;
}

/* the data behind the Estudio are old: the notice and the way to extend them */
.studio-data-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.studio-data-notice .alert {
  flex: 1 1 320px;
  margin: 0;
}

.studio-numbers__tp1 {
  margin-top: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--text-small);
  line-height: 1.5;
}

.studio-numbers__tp1-money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.studio-numbers__none {
  color: var(--color-text-3);
  font-size: var(--text-small);
}

/* the home: one card per indicator */
.studio-home {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--space-4);
}

.studio-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-brand-line);
  background: linear-gradient(160deg, var(--color-brand-soft), transparent 60%), var(--color-surface);
  color: var(--color-text);
  transition: 0.15s;
}

.studio-card:hover {
  box-shadow: var(--glow);
  transform: translateY(-2px);
  text-decoration: none;
}

.studio-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.studio-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.studio-card__name {
  font-size: var(--text-h3);
  font-weight: 700;
}

.studio-card__market {
  color: var(--color-text-3);
  font-size: var(--text-small);
}

.studio-card__eyebrow,
.studio-version__eyebrow {
  color: var(--color-text-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.studio-card__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-2);
  font-size: var(--text-small);
}

.studio-card__tested {
  color: var(--color-text-3);
}

/* one indicator: live version and latest draft */
.studio-versions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.studio-version {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.studio-version--draft {
  border-color: var(--color-brand-line);
  background: linear-gradient(160deg, var(--color-brand-soft), transparent 60%), var(--color-surface);
}

.studio-version__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.studio-version__title {
  font-size: var(--text-h3);
  font-weight: 600;
}

.studio-version__line {
  color: var(--color-text-2);
  font-size: var(--text-small);
}

.studio-version__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.studio-version__running {
  color: var(--color-brand);
  font-size: var(--text-small);
  font-weight: 600;
}

.studio-changes {
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}

.studio-changes__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-small);
}

.studio-changes__label {
  color: var(--color-text-2);
}

.studio-changes__before {
  font-family: var(--font-mono);
  color: var(--color-text-3);
}

.studio-changes__after {
  font-family: var(--font-mono);
  font-weight: 600;
}

.studio-confidence {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.studio-confidence__head {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-2);
  font-size: var(--text-small);
}

.studio-confidence__score {
  font-family: var(--font-mono);
  color: var(--color-text);
  font-weight: 600;
}

.studio-confidence__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  overflow: hidden;
}

.studio-confidence__fill {
  display: block;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
}

.studio-confidence__parts {
  color: var(--color-text-3);
  font-size: var(--text-small);
}

.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.studio-activity {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.studio-activity__title {
  color: var(--color-text-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.studio-activity__list {
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  list-style: none;
}

.studio-activity__item + .studio-activity__item {
  border-top: 1px solid var(--color-border);
}

.studio-activity__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  color: var(--color-text);
}

.studio-activity__link:hover {
  text-decoration: none;
  color: var(--color-brand);
}

.studio-activity__what {
  flex: 1 1 200px;
  min-width: 0;
}

.studio-activity__when,
.studio-activity__empty {
  color: var(--color-text-3);
  font-size: var(--text-small);
}

.studio-activity__state {
  color: var(--color-brand);
  font-size: var(--text-small);
  font-weight: 600;
}

.studio-activity__state--failed {
  color: var(--color-text-2);
}

.studio-activity__money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.studio-activity__money--gain {
  color: var(--color-buy);
}

.studio-activity__money--loss {
  color: var(--color-sell);
}

/* detail, compare and publish */
.studio-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
  min-width: 0;
}

.studio-panel__title {
  font-size: var(--text-h3);
  font-weight: 600;
}

.studio-panel__text {
  color: var(--color-text-2);
  line-height: 1.6;
}

.studio-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
}

/* "where it comes from": three tables a row, two then one on narrower screens */
.studio-split--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .studio-split--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .studio-split--three {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a long table (the years) scrolls inside its box, its header stays in sight */
.studio-table__wrap--scroll {
  max-height: 360px;
  overflow-y: auto;
}

.studio-table__wrap--scroll .studio-table__head {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* a row that is not one of the table's groups (TP1 touched, beside the exits) */
.studio-table__row--apart {
  background: var(--color-brand-soft);
}

/* the dates a table covers, under its title */
.studio-table__period {
  display: block;
  margin-top: 2px;
  color: var(--color-text-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

/* a chart made before it could draw what the Pine draws */
.studio-panel__warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
}

.studio-panel__note {
  margin-top: var(--space-2);
  color: var(--color-text-3);
  font-size: var(--text-small);
  line-height: 1.5;
}

.studio-table__wrap {
  overflow-x: auto;
  min-width: 0;
}

.studio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.studio-table__caption {
  text-align: left;
  color: var(--color-text-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: var(--space-2);
}

.studio-table__head {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  color: var(--color-text-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-table__head--num,
.studio-table__cell--num {
  text-align: right;
}

.studio-table__row {
  border-top: 1px solid var(--color-border);
}

.studio-table__row:hover {
  background: var(--color-surface-2);
}

.studio-table__row--winner {
  box-shadow: inset 3px 0 0 var(--color-brand);
}

.studio-table__cell {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
  font-weight: 400;
}

.studio-table__cell--num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.studio-table__cell--gain {
  color: var(--color-buy);
}

.studio-table__cell--loss {
  color: var(--color-sell);
}

.studio-table__strong {
  display: block;
  font-weight: 600;
}

.studio-table__note,
.studio-table__delta {
  display: block;
  white-space: nowrap;
  color: var(--color-text-3);
  font-size: var(--text-eyebrow);
}

.studio-table__mark {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--color-brand);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.studio-warning {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-brand-line);
  background: var(--color-brand-soft);
  margin-bottom: var(--space-4);
}

.studio-warning__text {
  line-height: 1.6;
}

.studio-steps {
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-5);
}

.studio-steps__item {
  padding-left: var(--space-1);
  display: list-item;
}

.studio-steps__item::marker,
.studio-connect__step::marker {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-weight: 600;
}

.studio-steps__text {
  display: block;
  line-height: 1.5;
}

.studio-steps__code {
  display: block;
  margin-top: var(--space-2);
  width: 100%;
  min-height: 160px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.studio-pine {
  min-height: 420px;
}

.studio-steps__copy {
  margin-top: var(--space-2);
}

/* an indicator's Pine to paste today and every one it handed out (owner, 2026-11-03) */
.pine-history {
  min-width: 0;
}

.pine-history__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.pine-history__meta {
  color: var(--color-text-2);
  font-size: var(--text-small);
}

.pine-history__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.pine-history__warn {
  color: var(--color-text);
  font-size: var(--text-small);
  border-left: 3px solid var(--color-brand);
  padding-left: var(--space-3);
}

.pine-history__code {
  display: block;
  width: 100%;
  min-height: 420px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.pine-history__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.studio-publish {
  align-items: flex-start;
}

.studio-publish__confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  line-height: 1.5;
}

.studio-publish__check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-brand);
  flex: none;
}

/* =============================================================================
   STUDIO-CONNECT (connecting Claude to the Estudio: consent and connections)
   ========================================================================== */
.studio-connect {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.studio-connect--ask {
  border-color: var(--color-brand-line);
  box-shadow: var(--glow);
}

.studio-connect__title {
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.studio-connect__subtitle {
  font-size: var(--text-h3);
  font-weight: 600;
}

.studio-connect__text {
  color: var(--color-text-2);
  line-height: 1.6;
}

.studio-connect__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-5);
  color: var(--color-text);
}

.studio-connect__item {
  line-height: 1.5;
}

.studio-connect__item--never {
  color: var(--color-brand);
  font-weight: 600;
}

.studio-connect__returns {
  color: var(--color-text-3);
  font-size: var(--text-small);
}

.studio-connect__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.studio-connect__steps {
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-left: var(--space-5);
}

.studio-connect__step {
  padding-left: var(--space-1);
  display: list-item;
}

.studio-connect__step-text {
  display: block;
  line-height: 1.5;
}

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

.studio-connect__copy-input {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-mono);
}

.studio-connect__instructions {
  display: block;
  margin-top: var(--space-3);
  width: 100%;
  min-height: 180px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: 1.5;
}

.studio-connect__copy-all {
  margin-top: var(--space-3);
}

.studio-connect__connections {
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  list-style: none;
}

.studio-connect__connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.studio-connect__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.studio-connect__client {
  font-weight: 600;
}

.studio-connect__meta,
.studio-connect__empty {
  color: var(--color-text-3);
  font-size: var(--text-small);
}

/* =============================================================================
   FAQ-LAUNCHER (floating button bottom-right + chat panel)
   ========================================================================== */
.faq-launcher {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.faq-launcher__button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-brand-line);
  background: linear-gradient(180deg, var(--color-brand-hover), var(--color-brand));
  color: var(--color-on-brand);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.faq-launcher__button:hover {
  filter: brightness(1.08);
  box-shadow: var(--glow);
}

.faq-launcher__panel {
  width: min(440px, calc(100vw - 2 * var(--space-5)));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.faq-launcher__panel[hidden] {
  display: none;
}

.faq-launcher__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

.faq-launcher__title {
  font-size: var(--text-small);
  font-weight: 600;
}

.faq-launcher__close {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--color-text-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.faq-launcher__close:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.faq-launcher__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 120px;
}

.faq-launcher__message {
  font-size: var(--text-small);
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  max-width: 90%;
  min-width: 0;
}

.faq-launcher__message--bot {
  background: var(--color-surface-2);
  color: var(--color-text-2);
  border: 1px solid var(--color-border);
}

.faq-launcher__message--user {
  align-self: flex-end;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  color: var(--color-text);
}

.faq-launcher__message.is-pending {
  opacity: 0.6;
}

.faq-launcher__composer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.faq-launcher__input {
  flex: 1;
  min-width: 0;
  height: var(--control-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: 400 var(--text-body) var(--font-sans);
  padding: 0 12px;
}

.faq-launcher__input:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

/* =============================================================================
   EMPTY-STATE
   ========================================================================== */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-3);
}

.empty-state__title {
  display: block;
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-1);
  font-weight: 600;
}

.empty-state__text {
  font-size: var(--text-small);
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .auth-layout__panel {
    /* minmax(0, ...) keeps a long email or word from stretching the whole card. */
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .auth-layout__aside {
    display: none;
  }

  .auth-card {
    padding: 28px 20px;
    border: 0;
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  /* The sidebar becomes a bottom bar; the PRD forbids an off-screen drawer. */
  .app-sidebar {
    position: fixed;
    inset: auto 0 0 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-right: 0;
    border-top: 1px solid var(--color-border);
    overflow-x: auto;
    z-index: 20;
  }

  .app-sidebar__brand,
  .app-sidebar__group-label,
  .app-sidebar__foot {
    display: none;
  }

  .app-sidebar__nav {
    flex-direction: row;
    gap: var(--space-2);
  }

  .app-sidebar__group {
    flex-direction: row;
    gap: var(--space-2);
  }

  .app-sidebar__link {
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    font-size: var(--text-eyebrow);
  }

  .app-sidebar__badge {
    display: none;
  }

  .app-topbar {
    padding: 0 var(--space-4);
  }

  .app-main {
    padding: var(--space-4);
  }

  /* the bottom bar covers the last 88px: the footer, now the last thing on the page, keeps clear */
  .app-footer {
    padding: var(--space-4) var(--space-4) 88px;
  }
}

@media (max-width: 560px) {
  :root {
    --text-display: 32px;
    --text-h1: 26px;
  }

  .pw-rules {
    grid-template-columns: 1fr;
  }
}

/* ========================================================== journal ===== */
/* The M2 module: the trade log, the summary the workbook used to produce by
   hand, and the lot calculator. Every colour is a token, so retuning the
   palette restyles all three sheets. */

.journal-empty {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  text-align: center;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.journal-form {
  display: grid;
  gap: var(--space-4);
  max-width: 420px;
}

.journal-form__actions {
  display: flex;
  justify-content: flex-start;
}

.field__control--numeric {
  font-family: var(--font-mono);
  text-align: right;
}

/* -------------------------------------------------------------- toolbar -- */
/* Top-right corner of the page header, beside the title. */
.journal-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-inline-start: auto;
}

.journal-toolbar__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
}

.journal-toolbar__select {
  height: var(--control-input);
  min-width: 220px;
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.journal-toolbar__select:hover {
  border-color: var(--color-border-strong);
}

.journal-toolbar__select:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 3px var(--color-brand-soft);
}

.journal-toolbar__meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

/* ----------------------------------------------------------------- tabs -- */
.journal-tabs {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}

.journal-tabs__link {
  margin-block-end: -1px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-2);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.journal-tabs__link:hover {
  color: var(--color-text);
}

.journal-tabs__link:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--glow);
}

.journal-tabs__link.is-active {
  color: var(--color-brand);
  border-block-end-color: var(--color-brand);
}

/* ---------------------------------------------------------------- panel -- */
.journal-panel {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.journal-panel__meta {
  margin-block-start: var(--space-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* ---------------------------------------------------------------- table -- */
.journal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.journal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.journal-table__head {
  background: var(--color-bg-subtle);
}

.journal-table__row {
  border-block-end: 1px solid var(--color-border);
}

.journal-table__row:last-child {
  border-block-end: none;
}

.journal-table__row:hover {
  background: var(--color-surface-2);
}

.journal-table__heading {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
  white-space: nowrap;
}

.journal-table__heading--numeric {
  text-align: right;
}

.journal-table__cell {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-2);
  vertical-align: middle;
  /* A date or a direction badge that wraps in two lines is unreadable. */
  white-space: nowrap;
}

.journal-table__cell--notes {
  min-inline-size: 160px;
  max-inline-size: 280px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.journal-table__cell--numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text);
}

.journal-table__pnl {
  font-weight: 600;
}

.journal-table__pnl--buy {
  color: var(--color-buy);
}

.journal-table__pnl--sell {
  color: var(--color-sell);
}

.journal-table__pnl--flat {
  color: var(--color-text-3);
}

/* ----------------------------------------------------------- stat tiles -- */
/* ----------------------------------------------------------- info tooltip -- */
.info-tip {
  position: relative;
  display: inline-flex;
}

.info-tip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-3);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  cursor: help;
}

.info-tip__icon:hover,
.info-tip__icon:focus-visible {
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.info-tip__icon:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.info-tip__bubble {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-end: -6px;
  z-index: 40;
  width: max-content;
  max-width: 240px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.info-tip:hover .info-tip__bubble,
.info-tip:focus-within .info-tip__bubble {
  opacity: 1;
}

.journal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.journal-stat {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.journal-stat__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
  padding-inline-end: var(--space-5);
}

.journal-stat__tip {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
}

.journal-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.journal-stat__value--buy {
  color: var(--color-buy);
}

.journal-stat__value--sell {
  color: var(--color-sell);
}

.journal-stat__value--flat {
  color: var(--color-text);
}

/* ---------------------------------------------------------- equity curve -- */
.journal-chart {
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.journal-chart__caption {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
}

.journal-chart__svg {
  display: block;
  inline-size: 100%;
  block-size: 160px;
  margin-block-start: var(--space-3);
}

.journal-chart__area {
  fill: var(--color-brand-soft);
  stroke: none;
}

.journal-chart__line {
  fill: none;
  stroke: var(--color-brand);
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.journal-chart__scale {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
}

.journal-chart__tick {
  color: var(--color-text-3);
}

.journal-chart__tick--high {
  color: var(--color-text-2);
}

.journal-chart__tick--low {
  color: var(--color-text-3);
}

/* ------------------------------------------------------ day / side rows -- */
.journal-results {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.journal-results__bar {
  display: grid;
  height: 10px;
  gap: 2px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
}

.journal-results__segment {
  min-width: 4px;
}

.journal-results__segment--tp {
  background: var(--color-buy);
}

.journal-results__segment--be {
  background: var(--color-text-3);
}

.journal-results__segment--eod {
  background: var(--color-border-strong);
}

.journal-results__segment--sl {
  background: var(--color-sell);
}

.journal-results__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.journal-results__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}

.journal-results__item--tp {
  color: var(--color-buy);
}

.journal-results__item--sl {
  color: var(--color-sell);
}

.journal-results__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.journal-results__item--favor-buy .journal-results__count {
  color: var(--color-buy);
}

.journal-results__item--favor-sell .journal-results__count {
  color: var(--color-sell);
}

.journal-results__rate {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.journal-results__hint {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.journal-breakdown__sides {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.journal-breakdown__side {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.journal-breakdown__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.journal-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

.journal-breakdown {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.journal-breakdown__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
}

.journal-bars {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-bars__row {
  display: grid;
  grid-template-columns: 44px 1fr auto 40px;
  align-items: center;
  gap: var(--space-3);
}

.journal-bars__label {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.journal-bars__track {
  display: block;
  block-size: 8px;
  overflow: hidden;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
}

.journal-bars__fill {
  display: block;
  block-size: 100%;
  inline-size: var(--journal-bar, 0%);
  border-radius: var(--radius-full);
}

.journal-bars__fill--buy {
  background: var(--color-buy);
}

.journal-bars__fill--sell {
  background: var(--color-sell);
}

.journal-bars__fill--flat {
  background: var(--color-border-strong);
}

.journal-bars__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  text-align: right;
}

.journal-bars__value--buy {
  color: var(--color-buy);
}

.journal-bars__value--sell {
  color: var(--color-sell);
}

.journal-bars__value--flat {
  color: var(--color-text-3);
}

.journal-bars__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  text-align: right;
  color: var(--color-text-3);
}

/* ---------------------------------------------------------- live calculator -- */
/* Its own row under the page title; the width is capped so a few numbers do not stretch. */
.live-calc {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) repeat(3, minmax(80px, 1fr)) auto;
  align-items: end;
  gap: var(--space-3) var(--space-4);
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.live-calc__intro {
  align-self: center;
}

.live-calc__title {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-2);
}

.live-calc__field {
  min-width: 0;
}

.live-calc__result {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-md);
}

.live-calc__metric {
  display: grid;
  gap: 2px;
  min-width: 64px;
}

.live-calc__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-2);
}

.live-calc__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-brand);
}

/* Crypto (owner request 2026-10-22): four inputs and four answers, so the answers take a row of
   their own instead of squeezing beside the fields. */
.live-calc--leverage {
  grid-template-columns: minmax(120px, 1.1fr) repeat(4, minmax(80px, 1fr));
  max-width: 900px;
}

.live-calc--leverage .live-calc__result {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.live-calc__hint {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

@media (max-width: 960px) {
  .live-calc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .live-calc__intro,
  .live-calc__result {
    grid-column: 1 / -1;
  }

}

/* ------------------------------------------------------------ quick rename -- */
.journal-rename__toggle {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--space-2);
  padding: 2px;
  color: var(--color-text-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  vertical-align: middle;
}

.journal-rename__toggle:hover {
  color: var(--color-brand);
}

.journal-rename__toggle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.journal-rename__icon {
  display: block;
}

.journal-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.journal-rename[hidden] {
  display: none;
}

.journal-rename__input {
  min-width: 220px;
}

/* --------------------------------------------------- automation console -- */
.auto-panel {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.auto-panel__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

/* A panel that starts collapsed (e.g. an indicator card, owner request 2026-09-29: they take up
   too much room open by default once there's more than one) - same recipe as .auto-account's own
   collapsible variant, kept separate since a <details> here wraps a <section>-shaped block, not
   an account card. */
.auto-panel--collapsible {
  padding: 0;
}

.auto-panel__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  cursor: pointer;
  list-style: none;
}

.auto-panel__summary::-webkit-details-marker {
  display: none;
}

.auto-panel__summary:focus-visible {
  outline: none;
  border-radius: var(--radius-md);
  box-shadow: var(--glow);
}

.auto-panel__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--color-text-3);
  border-block-end: 2px solid var(--color-text-3);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.auto-panel--collapsible[open] > .auto-panel__summary > .auto-panel__chevron {
  transform: rotate(45deg);
}

.auto-panel__body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-5);
}

.auto-subtitle {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-2);
}

.auto-hint {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.auto-indicator,
.auto-account {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.auto-indicator__head,
.auto-account__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.auto-indicator__name,
.auto-account__name {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
}

.auto-account__meta {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.auto-account__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.auto-account__col {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

.auto-copy {
  display: flex;
  gap: var(--space-2);
}

.auto-copy__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.auto-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.auto-stat {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.auto-stat__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
}

.auto-stat__value {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.auto-stat__value--text {
  font-size: var(--text-small);
}

.auto-form {
  display: grid;
  align-items: end;
  gap: var(--space-3);
}

.auto-form--inline {
  grid-template-columns: minmax(180px, 320px) auto;
  justify-content: start;
}

.auto-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3);
}

.auto-form--order .btn {
  justify-self: start;
}

.auto-pnl {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.auto-pnl--gain {
  color: var(--color-buy);
}

.auto-pnl--loss {
  color: var(--color-sell);
}

.auto-commands {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto-commands__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.auto-commands__kind {
  font-family: var(--font-mono);
  color: var(--color-text);
}

.auto-commands__when {
  color: var(--color-text-3);
}

.auto-commands__error {
  color: var(--color-sell);
}

.auto-commands__detail {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.auto-code {
  font-family: var(--font-mono);
  color: var(--color-text-2);
}

.auto-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.auto-newkey {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-lg);
}

.auto-newkey__title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-brand);
}

.auto-newkey__body {
  margin: var(--space-1) 0 0;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.auto-tabs {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  overflow-x: auto;
  border-block-end: 1px solid var(--color-border);
}

.auto-tabs__link {
  flex: none;
  margin-block-end: -1px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-2);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.auto-tabs__link:hover {
  color: var(--color-text);
}

.auto-tabs__link:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--glow);
}

.auto-tabs__link.is-active {
  color: var(--color-brand);
  border-block-end-color: var(--color-brand);
}

/* A smaller, secondary level of tabs inside a panel (e.g. "mine" vs "all" API keys) - same
   pattern as .auto-tabs, less visual weight so it never competes with the real page tabs. */
.auto-tabs--sub {
  margin-block-end: var(--space-4);
}

.auto-tabs--sub .auto-tabs__link {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Collapsed by default (owner request 2026-09-29): creating a key is not the first thing most
   visits to this screen are for, so it should not permanently take up space above the table. */
.auto-keys-create {
  margin-block-end: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.auto-keys-create[open] {
  padding-block-end: var(--space-5);
}

.auto-keys-create__summary {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.auto-keys-create__summary::-webkit-details-marker {
  display: none;
}

.auto-keys-create__summary::before {
  content: "▸";
  display: inline-block;
  margin-inline-end: var(--space-2);
  color: var(--color-brand);
  transition: transform 0.15s ease;
}

.auto-keys-create[open] > .auto-keys-create__summary::before {
  transform: rotate(90deg);
}

.auto-keys-create .auto-form {
  margin-block-start: var(--space-4);
}

/* ----------------------------------------------------------- signals tab -- */
.signals-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.signals-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 150px;
}

.signals-toolbar__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.signals-toolbar__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block-end: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

/* ------------------------------------------- signals tab: indicator performance -- */
.perf {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.perf__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.perf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-4);
}

.perf-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.perf-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.perf-card__name {
  margin: 0 auto 0 0;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.perf-card__main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.perf-card__figure {
  display: grid;
  gap: 2px;
}

.perf-card__eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.perf-card__favor {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.perf-card__favor--gain {
  color: var(--color-buy);
}

.perf-card__favor--loss {
  color: var(--color-sell);
}

.perf-card__ops {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.perf-card__weighted {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.perf-card__curve {
  display: grid;
  gap: 2px;
  flex: 1 1 120px;
  max-width: 220px;
  margin: 0;
}

.perf-card__caption {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
  text-align: end;
}

.perf-spark {
  width: 100%;
  height: 44px;
}

.perf-spark__line {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* TP / BE / SL share of the closed operations: market colors for profit and loss only. */
.perf-bar {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.perf-bar__track {
  fill: var(--color-surface-3);
}

.perf-bar__segment {
  shape-rendering: crispEdges;
}

.perf-bar__segment--tp {
  fill: var(--color-buy);
}

.perf-bar__segment--be {
  fill: var(--color-text-3);
}

.perf-bar__segment--eod {
  fill: var(--color-border-strong);
}

.perf-bar__segment--sl {
  fill: var(--color-sell);
}

.perf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.perf-legend__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}

.perf-legend__item--tp {
  color: var(--color-buy);
}

.perf-legend__item--sl {
  color: var(--color-sell);
}

.perf-legend__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.perf-card__levels {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.perf-card__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.perf-card__mono--gain {
  color: var(--color-buy);
}

.perf-card__mono--loss {
  color: var(--color-sell);
}

.perf-months__summary {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-brand);
  cursor: pointer;
  list-style: none;
}

.perf-months__summary::-webkit-details-marker {
  display: none;
}

.perf-months[open] .perf-months__summary {
  margin-block-end: var(--space-2);
}

@media (max-width: 720px) {
  .perf__grid {
    grid-template-columns: 1fr;
  }

  .perf-card__main {
    flex-direction: column;
    align-items: stretch;
  }

  .perf-card__curve {
    max-width: none;
  }
}

/* ------------------------------------------ automation: entry margin calculation -- */
.margin-calc {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.margin-calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.margin-calc__title {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.margin-calc__formula {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--color-brand);
}

.margin-calc__caption {
  margin: var(--space-2) 0 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.margin-calc__result {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-brand);
}

.margin-calc__zone {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text);
}

.sig-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sig-path__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.sig-path__time {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-3);
}

.sig-note {
  display: block;
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.sig-link {
  font-weight: 600;
  color: var(--color-brand);
}

.signals-when {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-2);
}

.signals-raw {
  max-width: 360px;
}

.signals-raw__summary {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-brand);
  cursor: pointer;
  list-style: none;
}

.signals-raw__summary::-webkit-details-marker {
  display: none;
}

.signals-raw__body {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  max-height: 220px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-2);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.auto-link {
  color: var(--color-brand);
  font-weight: 600;
}

.auto-actions--start {
  justify-content: flex-start;
}

.auto-panel__count {
  margin-inline-start: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-3);
}

@media (max-width: 900px) {
  .auto-account__grid {
    grid-template-columns: 1fr;
  }

  .auto-form--inline {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------- landing gallery / viewer -- */
.landing-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-gallery__card {
  display: grid;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.landing-gallery__card:hover,
.landing-gallery__card:focus-visible {
  border-color: var(--color-brand);
  box-shadow: var(--glow);
  transform: translateY(-2px);
  outline: none;
}

.landing-gallery__item {
  min-width: 0;
}

.landing-gallery__title {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.landing-gallery__address {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-3);
  overflow-wrap: anywhere;
}

.landing-gallery__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.landing-gallery__open {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-brand);
}

/* "Recursos": the gallery in the sections admins name and order (owner, 2026-10-10). */
.landing-gallery-group {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.landing-gallery-group__title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-text);
}

/* ------------------------------------------------- the "Recursos" organizer -- */
/* The arrangement as the main column, new section / loose landings / help beside it (the
   admin screens' aside pattern), one stack under 900px. */
.resources-organizer {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .resources-organizer {
    grid-template-columns: minmax(0, 1fr);
  }
}

.resources-organizer__main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.resources-organizer__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.resources-organizer__sections {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resources-organizer__save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.resources-organizer__dirty {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-brand);
}

.resources-section {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.resources-section.is-dragging {
  border-color: var(--color-brand);
  opacity: 0.6;
}

.resources-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.resources-section__grip {
  cursor: grab;
  color: var(--color-text-3);
}

.resources-section__rename {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.resources-section__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.resources-section__tools {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.resources-section__pages {
  display: grid;
  gap: var(--space-2);
  min-height: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resources-section__empty {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.resources-section__add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.resources-section__picker {
  flex: 1 1 220px;
  min-width: 0;
}

.resources-page {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.resources-page.is-dragging {
  border-color: var(--color-brand);
  opacity: 0.6;
}

.resources-page__grip {
  cursor: grab;
  color: var(--color-text-3);
}

.resources-page__text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.resources-page__title {
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.resources-page__address {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-3);
  overflow-wrap: anywhere;
}

.resources-page__tools {
  display: flex;
  gap: var(--space-1);
}

.resources-loose {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.resources-loose__item {
  color: var(--color-text-2);
}

.resources-help {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.resources-help__item {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

/* One published landing shown inside the app: its own blocks, framed like a page. */
.landing-view {
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  line-height: 1.6;
}

/* ----------------------------------------------------------- new journal -- */
.journal-new {
  margin-block-start: var(--space-5);
}

.journal-new__toggle {
  padding: var(--space-2) 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-brand);
  cursor: pointer;
}

.journal-new__toggle:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--glow);
}

.journal-new[open] .journal-new__toggle {
  margin-block-end: var(--space-4);
}

@media (max-width: 900px) {
  .journal-split {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------ journal: write surfaces -- */
/* The trade form, the actions column, the settings sheet and the import result.
   Nothing here invents a colour: the danger button is the one place red is
   allowed outside market meaning, and it carries a verb, not just a colour. */

.btn--danger {
  color: var(--color-sell);
  background: var(--color-sell-soft);
  border: 1px solid var(--color-sell);
}

.btn--danger:hover:not(:disabled) {
  color: var(--color-on-sell);
  background: var(--color-sell-strong);
}

.journal-panel__bar {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--space-4);
}

.journal-form--trade {
  max-width: none;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-md);
}

.journal-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
}

.journal-form__legend {
  padding: 0;
  margin-block-end: var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brand);
}

.journal-form__wide {
  grid-column: 1 / -1;
}

.journal-form__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.journal-form__check-label {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.field__control--select {
  appearance: none;
  cursor: pointer;
}

.field__control--file {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  cursor: pointer;
}

.journal-table__heading--actions {
  text-align: right;
}

.journal-table__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.journal-table__cell--span {
  padding: 0;
}

.journal-table__cell--actions {
  text-align: right;
  white-space: nowrap;
}

.journal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.journal-actions__form {
  display: inline;
  margin: 0;
}

.journal-actions__link,
.journal-actions__button {
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: none;
  border: 0;
  cursor: pointer;
}

.journal-actions__link:hover,
.journal-actions__button:hover {
  color: var(--color-brand);
}

.journal-actions__icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.journal-actions__icon:hover {
  color: var(--color-on-brand);
  background: var(--color-brand);
}

.journal-actions__icon:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.journal-actions__glyph {
  display: block;
}

.journal-actions__button {
  color: var(--color-sell);
}

.journal-actions__button:hover {
  color: var(--color-sell-strong);
}

/* ------------------------------------------------- an automatic trade's signal -- */
/* Lives in the shared modal (data-modal-wide asks it for room). */
.trade-signal {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.trade-signal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-inline-end: var(--space-6);
}

.trade-signal__title {
  margin: 0;
  padding: 0;
}

.trade-signal__section {
  display: grid;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.trade-signal__heading {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.trade-signal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
}

.trade-signal__item {
  min-width: 0;
}

.trade-signal__label {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.trade-signal__value {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.trade-signal__value--buy {
  color: var(--color-buy);
}

.trade-signal__value--sell {
  color: var(--color-sell);
}

.trade-signal__levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trade-signal__level {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trade-signal__level.is-reached {
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
}

.trade-signal__level-name {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-2);
}

.trade-signal__check {
  color: var(--color-brand);
}

.trade-signal__level-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.trade-signal__level-pips {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.trade-signal__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.trade-signal__notice {
  margin: 0;
  padding: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-md);
}

/* Resumen general (owner request 2026-10-22, redesigned the same day): cards and small charts
   first - balance, three indicators, one card per Journal, a heatmap of the month - and the
   detail in a fold. Gold for the curves, green/red only for gains and losses. */
.journal-overview {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin-bottom: var(--space-4);
}

/* The period chips and the dates they cover share one row; they wrap on a narrow screen instead
   of pushing the page sideways (owner screenshot 2026-10-22: "30 dias" was cut off). */
.journal-overview__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
}

.journal-overview__range {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

/* Two columns (owner request 2026-10-22): money and indicators left, the Journals right. */
.journal-overview__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.journal-overview__main,
.journal-overview__side {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.journal-overview__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.journal-overview__title {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-2);
}

.journal-overview__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-2);
}

.journal-overview__meta {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.journal-overview__periods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.journal-overview__period {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-2);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.journal-overview__period:hover,
.journal-overview__period:focus-visible {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.journal-overview__period.is-active {
  color: var(--color-on-brand);
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.journal-overview__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-lg);
}

.journal-overview__hero-main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.journal-overview__balance {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text);
}

.journal-overview__pnl-label {
  margin-top: var(--space-1);
}

.journal-overview__change {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-2);
}

.journal-overview__change--buy {
  color: var(--color-buy);
}

.journal-overview__change--sell {
  color: var(--color-sell);
}

.journal-overview__hero-chart {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
}

.journal-overview__curve {
  display: block;
  width: 100%;
  height: 96px;
  overflow: visible;
}

.journal-overview__curve-line {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.journal-overview__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

/* The trade log's pager (owner report 2026-10-23). */
.journal-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.journal-pager__status {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.journal-pager__actions {
  display: flex;
  gap: var(--space-2);
}

/* Comparativas shows only the win rate and the profit factor (2026-10-22). */
.journal-overview__kpis--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.journal-overview__kpi {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.journal-overview__kpi-body {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-width: 0;
}

.journal-overview__kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--color-text);
}

.journal-overview__donut {
  flex: none;
}

.journal-overview__donut-track,
.journal-overview__donut-fill {
  fill: none;
  stroke-width: 5;
}

.journal-overview__donut-track {
  stroke: var(--color-surface-3);
}

.journal-overview__donut-fill {
  stroke: var(--color-brand);
  stroke-linecap: round;
}

.journal-overview__meter {
  display: block;
  height: 6px;
  overflow: hidden;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
}

.journal-overview__meter-fill {
  display: block;
  width: var(--journal-bar, 0%);
  height: 100%;
  background: var(--color-brand);
}

.journal-overview__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.journal-overview__card {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.journal-overview__card:hover,
.journal-overview__card:focus-visible {
  border-color: var(--color-brand-line);
  box-shadow: var(--glow);
  transform: translateY(-2px);
  outline: none;
}

.journal-overview__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.journal-overview__card-name {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.journal-overview__card-pair {
  flex: none;
  padding: 2px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  color: var(--color-text-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.journal-overview__card-balance {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  font-weight: 600;
}

.journal-overview__spark {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: var(--space-1);
  overflow: visible;
}

.journal-overview__heat {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.journal-overview__heat-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The month's figures above the grid (2026-10-22, second pass). */
.journal-overview__heat-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.journal-overview__heat-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.journal-overview__heat-value {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text);
}

.journal-overview__heat-value--gain {
  color: var(--color-buy);
}

.journal-overview__heat-value--loss {
  color: var(--color-sell);
}

.journal-overview__heat-step {
  padding: 0 var(--space-2);
  font-size: var(--text-h3);
  color: var(--color-text-2);
  text-decoration: none;
}

.journal-overview__heat-step:hover,
.journal-overview__heat-step:focus-visible {
  color: var(--color-brand);
}

.journal-overview__heat-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.journal-overview__heat-weekday {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
  text-align: center;
}

.journal-overview__heat-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 40px;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
  background: var(--color-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.journal-overview__heat-day--open {
  cursor: pointer;
  color: var(--color-text);
}

.journal-overview__heat-day:focus-visible {
  border-color: var(--color-brand);
  outline: none;
}

.journal-overview__heat-day.is-today {
  border-color: var(--color-brand-line);
}

.journal-overview__heat-day--outside {
  background: transparent;
}

.journal-overview__heat-number {
  line-height: 1;
}

/* a traded day's own result, short (+406, +2.9k, −677) */
.journal-overview__heat-figure {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}

.journal-overview__heat-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.journal-overview__heat-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.journal-overview__heat-hint {
  margin-left: auto;
}

/* three strengths per side, from the market tokens: a small day is a tint, the month's biggest
   move is the full colour */
.journal-overview__heat-day--gain-1,
.journal-overview__heat-swatch--gain-1 {
  background: var(--color-buy-soft);
}

.journal-overview__heat-day--gain-2,
.journal-overview__heat-swatch--gain-2 {
  background: color-mix(in srgb, var(--color-buy) 45%, transparent);
}

.journal-overview__heat-day--gain-3,
.journal-overview__heat-swatch--gain-3 {
  color: var(--color-on-buy);
  background: var(--color-buy);
}

.journal-overview__heat-day--loss-1,
.journal-overview__heat-swatch--loss-1 {
  background: var(--color-sell-soft);
}

.journal-overview__heat-day--loss-2,
.journal-overview__heat-swatch--loss-2 {
  background: color-mix(in srgb, var(--color-sell) 45%, transparent);
}

.journal-overview__heat-day--loss-3,
.journal-overview__heat-swatch--loss-3 {
  color: var(--color-on-sell);
  background: var(--color-sell);
}

.journal-overview__heat-day--flat-0,
.journal-overview__heat-day--flat-1 {
  background: var(--color-surface-3);
}

.journal-overview__more {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.journal-overview__more[open] {
  display: grid;
  gap: var(--space-4);
}

.journal-overview__more-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-2);
}

.journal-overview__more-summary:hover,
.journal-overview__more-summary:focus-visible {
  color: var(--color-brand);
}

@media (max-width: 1200px) {
  .journal-overview__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* one column: the Journals sit side by side again under the indicators */
  .journal-overview__cards {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 900px) {
  .journal-overview__hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .journal-overview__heat-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-overview__kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Salud del trader (owner request 2026-10-22): a discipline score, not profit. Its levels are
   not market meaning, so no green: gold when healthy, neutral with a warning sign when it needs
   watching, the danger red (always with the sign and the word) when at risk. */
.trader-health {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.trader-health--healthy {
  border-color: var(--color-brand-line);
}

.trader-health--risk {
  border-color: var(--color-sell);
}

.trader-health__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.trader-health__score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.trader-health__gauge {
  flex: none;
}

.trader-health__gauge-track,
.trader-health__gauge-fill {
  fill: none;
  stroke-width: 4;
}

.trader-health__gauge-track {
  stroke: var(--color-surface-3);
}

.trader-health__gauge-fill {
  stroke: var(--color-text-2);
  stroke-linecap: round;
}

.trader-health--healthy .trader-health__gauge-fill {
  stroke: var(--color-brand);
}

.trader-health--risk .trader-health__gauge-fill {
  stroke: var(--color-sell);
}

.trader-health__figure {
  display: grid;
  gap: 2px;
}

.trader-health__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.trader-health__of {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.trader-health__level {
  font-weight: 600;
  color: var(--color-text-2);
}

.trader-health--healthy .trader-health__level {
  color: var(--color-brand);
}

.trader-health--risk .trader-health__level {
  color: var(--color-sell);
}

.trader-health__signals,
.trader-health__rules {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trader-health__signal {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text);
}

.trader-health__signal-text {
  flex: 1;
  min-width: 0;
}

.trader-health__note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.trader-health__how {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}

.trader-health__how-summary {
  cursor: pointer;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.trader-health__how-summary:hover,
.trader-health__how-summary:focus-visible {
  color: var(--color-brand);
}

.trader-health__rules {
  margin-top: var(--space-2);
}

.trader-health__intro {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-2);
}

.trader-health__rule {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.trader-health__badge {
  justify-self: start;
  padding: 2px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  color: var(--color-text-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.trader-health__badge--healthy {
  color: var(--color-brand);
  border-color: var(--color-brand-line);
}

.trader-health__badge--risk {
  color: var(--color-sell);
  border-color: var(--color-sell);
}

/* Pares (owner request 2026-10-22): the pair catalog beside its add/edit form, the aside-column
   layout the admin editors use. One column under 900px. */
.journal-pairs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  align-items: start;
}

.journal-pairs__main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.journal-pairs__intro {
  display: grid;
  gap: var(--space-1);
}

.journal-pairs__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.journal-pairs__body {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-2);
}

.journal-pairs__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (max-width: 900px) {
  .journal-pairs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.journal-settings {
  display: grid;
  gap: var(--space-5);
}

.journal-settings__block {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.journal-settings__block--danger {
  border-color: var(--color-sell);
}

/* Collapsible (owner request 2026-09-29): every Ajustes section can now fold away, open by
   default only the one time it actually needs attention (Datos generales, on a Journal with no
   capital configured yet) - everything else starts collapsed. */
.journal-settings__block--collapsible {
  display: block;
  padding: 0;
}

.journal-settings__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  cursor: pointer;
  list-style: none;
}

.journal-settings__summary::-webkit-details-marker {
  display: none;
}

.journal-settings__summary:focus-visible {
  outline: none;
  border-radius: var(--radius-md);
  box-shadow: var(--glow);
}

.journal-settings__summary-main {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-width: 0;
}

.journal-settings__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--color-text-3);
  border-block-end: 2px solid var(--color-text-3);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.journal-settings__block--collapsible[open] > .journal-settings__summary > .journal-settings__chevron {
  transform: rotate(45deg);
}

.journal-settings__content {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
}

.journal-settings__title {
  margin: 0;
  font-size: var(--text-h3);
  color: var(--color-text);
}

.journal-settings__body {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.journal-settings__form {
  max-width: none;
}

.journal-import {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.journal-import__result {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--color-text);
}

.journal-import__errors {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.journal-import__error {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

@media (max-width: 720px) {
  .journal-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------- mobile shell refinements ------ */
/* The sign-out lives in the sidebar, which on phones becomes a horizontally
   scrollable bottom bar: on a small screen it can end up off-screen entirely.
   The topbar carries its own, and only there. */

.app-topbar__signout {
  display: none;
}

.app-topbar__icon-btn--signout:hover {
  color: var(--color-sell);
  border-color: var(--color-sell);
}

@media (max-width: 820px) {
  /* Clear the fixed bottom bar, or the launcher sits on top of the navigation. */
  .faq-launcher {
    right: var(--space-4);
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .faq-launcher__panel {
    max-height: min(60vh, 420px);
  }

  .app-topbar__signout {
    display: block;
  }

  /* Signing out lives in the top bar on a phone. In the bottom bar it sat next to
     the navigation, a tap away from the wrong destination. */
  .app-sidebar__action {
    display: none;
  }
}

/* =============================================================================
   USERS & ROLES  (EPIC U / RB)
   One screen, two tabs. Blocks: users-tabs, users-panel, users-form, users-type,
   users-toolbar, users-table, users-person, users-pager, users-detail, roles-*.
   ========================================================================== */
.badge--danger {
  background: var(--color-sell-soft);
  color: var(--color-sell);
  border-color: var(--color-sell);
}

/* ----------------------------------------------------------------- tabs -- */
.users-tabs {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}

.users-tabs__link {
  margin-block-end: -1px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-2);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.users-tabs__link:hover {
  color: var(--color-text);
}

.users-tabs__link:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--glow);
}

.users-tabs__link.is-active {
  color: var(--color-brand);
  border-block-end-color: var(--color-brand);
}

/* ---------------------------------------------------------------- panel -- */
.users-panel {
  margin-block-end: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.users-panel--flush {
  padding: 0;
  overflow: hidden;
}

.users-panel--danger {
  border-color: var(--color-sell-soft);
}

.users-panel__head {
  margin-block-end: var(--space-4);
}

.users-panel__head--padded {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.users-panel__title {
  font-size: var(--text-h3);
  font-weight: 600;
}

.users-panel__hint {
  margin-block-start: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.users-note {
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-md);
}

.users-back {
  display: inline-block;
  margin-block-end: var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-3);
  text-decoration: none;
}

.users-back:hover {
  color: var(--color-brand);
}

.users-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ----------------------------------------------------------------- form -- */
.users-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.users-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.users-form__group[hidden] {
  display: none;
}

.users-form__legend {
  padding: 0;
  margin-block-end: var(--space-1);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.users-form__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}

.users-form__wide {
  grid-column: 1 / -1;
}

.users-form__note {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.users-form__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-input);
  margin-block-start: var(--space-5);
  cursor: pointer;
}

.users-form__check-label {
  font-size: var(--text-body);
  color: var(--color-text-2);
}

.users-form__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
}

.users-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.users-form__actions--split {
  justify-content: space-between;
}

/* The three user types as selectable cards. The radio is visually hidden but
   stays focusable, so the keyboard and screen readers keep working. */
.users-type {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.users-type__option {
  position: relative;
  display: block;
  cursor: pointer;
}

.users-type__input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.users-type__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.users-type__option:hover .users-type__card {
  border-color: var(--color-border-strong);
}

.users-type__input:focus-visible + .users-type__card {
  box-shadow: 0 0 0 3px var(--color-brand-soft);
  border-color: var(--color-brand);
}

.users-type__input:checked + .users-type__card {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
}

.users-type__name {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
}

.users-type__input:checked + .users-type__card .users-type__name {
  color: var(--color-brand);
}

.users-type__text {
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--color-text-3);
}

/* -------------------------------------------------------------- toolbar -- */
.users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.users-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 150px;
}

.users-toolbar__field--grow {
  flex: 1 1 260px;
}

.users-toolbar__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

/* ---------------------------------------------------------------- table -- */
.users-table-wrap {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.users-table__head {
  background: var(--color-bg-subtle);
}

.users-table__row {
  border-block-end: 1px solid var(--color-border);
}

.users-table__row:last-child {
  border-block-end: none;
}

.users-table__row:hover {
  background: var(--color-surface-2);
}

.users-table__heading {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
  white-space: nowrap;
}

.users-table__heading--numeric {
  text-align: right;
}

.users-table__heading--actions {
  width: 1%;
}

.users-table__cell {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-2);
  vertical-align: middle;
}

.users-table__cell--numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text);
  white-space: nowrap;
}

/* A code that reads as data (a pair's XAUUSD), left-aligned unlike a number. */
.users-table__cell--mono {
  font-family: var(--font-mono);
  color: var(--color-text);
  white-space: nowrap;
}

.users-table__cell--actions {
  text-align: right;
  white-space: nowrap;
}

/* A one-button form (activate, delete) sitting in a row's actions next to its links. */
.forms-row-action {
  display: inline;
}

.users-table__sub {
  margin-inline-start: var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-3);
}

.users-table__muted {
  color: var(--color-text-3);
}

.users-table__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.users-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.users-person__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-full);
}

.users-person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.users-person__name {
  font-weight: 600;
  color: var(--color-text);
}

.users-person:hover .users-person__name {
  color: var(--color-brand);
}

.users-person__email {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-3);
}

.users-role {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.users-role__name {
  color: var(--color-text);
}

.users-pager {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.users-pager__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.users-pager__spacer {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------- detail -- */
.users-detail {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

.users-side {
  display: flex;
  flex-direction: column;
}

/* The left column of a user's page: profile, then the password panel under it. */
.users-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.users-form__password {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.users-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.users-facts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.users-facts__row:last-child {
  border-block-end: none;
}

.users-facts__term {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.users-facts__value {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text);
  text-align: right;
}

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

.users-actions--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------------------------------------------------------------- roles -- */
.roles-group {
  margin-block-end: var(--space-6);
}

.roles-group__head {
  margin-block-end: var(--space-3);
}

.roles-group__title {
  font-size: var(--text-h3);
  font-weight: 600;
}

.roles-group__hint,
.roles-group__empty {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.roles-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles-list__item {
  display: flex;
}

.roles-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.roles-card:hover {
  border-color: var(--color-brand-line);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

.roles-card:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

.roles-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.roles-card__name {
  font-weight: 600;
  color: var(--color-text);
}

.roles-card__text {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.roles-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.roles-card__cta {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-brand);
}

.roles-editor {
  display: flex;
  flex-direction: column;
}

.roles-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.roles-matrix__heading {
  text-align: center;
}

.roles-matrix__module {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  text-align: left;
  color: var(--color-text);
  white-space: nowrap;
}

.roles-matrix__cell {
  padding: var(--space-2);
  text-align: center;
}

.roles-matrix__cell--off {
  background: var(--color-bg-subtle);
}

.roles-check {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.roles-check__input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--color-bg-subtle);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.roles-check__input:hover:not(:disabled) {
  border-color: var(--color-brand);
}

.roles-check__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-soft);
  border-color: var(--color-brand);
}

.roles-check__input:checked {
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.roles-check__input:checked::after {
  width: 9px;
  height: 5px;
  margin-block-start: -2px;
  content: "";
  border-block-end: 2px solid var(--color-on-brand);
  border-inline-start: 2px solid var(--color-on-brand);
  transform: rotate(-45deg);
}

.roles-check__input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.roles-check__off {
  color: var(--color-border-strong);
}

.roles-check--labeled {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.roles-faq {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
}

.role-scope {
  position: relative;
}

.role-scope__results {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 30;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  margin-block-start: 4px;
}

.role-scope__results:empty {
  display: none;
}

.role-scope__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.role-scope__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  cursor: pointer;
}

.role-scope__item:last-child {
  border-block-end: 0;
}

.role-scope__item:hover {
  background: var(--color-surface-2);
}

.role-scope__empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.role-scope__empty-note {
  margin-block-start: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.role-scope__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-2);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  color: var(--color-text);
}

.role-chip__label {
  font-weight: 500;
}

.role-chip__remove {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-text-3);
  cursor: pointer;
  font-size: var(--text-body);
  line-height: 1;
}

.role-chip__remove:hover {
  color: var(--color-text);
}

@media (max-width: 900px) {
  .users-detail {
    grid-template-columns: 1fr;
  }
}

/* Phones. What to drop from a table is decided column by column, with the `--secondary`
   modifier, never by position: a rule on "the fifth column" used to hide whatever sat fifth in
   EVERY table, and in several of them that was the actions column (2026-10-05). */
@media (max-width: 560px) {
  .users-table__heading--secondary,
  .users-table__cell--secondary {
    display: none;
  }
}

/* Narrow screens: a table wider than the screen scrolls sideways, and its actions ("Review",
   "Details", "Edit"...) sit at the far end where nobody looks. Keep that column pinned to the
   edge so it is always in reach. The background must be opaque or the cells would show through. */
@media (max-width: 900px) {
  .users-table__heading--actions,
  .users-table__cell--actions {
    position: sticky;
    inset-inline-end: 0;
    z-index: 1;
    border-inline-start: 1px solid var(--color-border);
  }

  .users-table__heading--actions {
    background: var(--color-bg-subtle);
  }

  .users-table__cell--actions {
    background: var(--color-surface);
  }

  .users-table__row:hover .users-table__cell--actions {
    background: var(--color-surface-2);
  }
}

/* ------------------------------------------------ journal: layout fixes ---- */
.journal-form--centered {
  inline-size: min(100%, 360px);
  text-align: start;
}

.journal-form--centered .journal-form__actions {
  justify-content: center;
}

.journal-create {
  margin-block-end: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-lg);
}

.journal-create__title {
  margin-block-end: var(--space-3);
  font-size: var(--text-h3);
  font-weight: 600;
}

.journal-create__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.journal-create__field {
  flex: 1 1 260px;
}

.journal-chart__baseline {
  stroke: var(--color-border-strong);
  stroke-dasharray: 4 4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* The row actions stay reachable when the table scrolls sideways. */
.journal-table__heading--actions,
.journal-table__cell--actions {
  position: sticky;
  inset-inline-end: 0;
  border-inline-start: 1px solid var(--color-border);
}

.journal-table__heading--actions {
  background: var(--color-bg-subtle);
}

.journal-table__cell--actions {
  background: var(--color-surface);
}

.journal-table__row:hover .journal-table__cell--actions {
  background: var(--color-surface-2);
}

/* Phones: the trade log keeps what matters at a glance (number, date, direction,
   result, P&L). Weekday, lot size, pips, R:R, screenshot and notes stay one tap
   away in the edit view, and the actions scroll with the row instead of
   covering the numbers. */
@media (max-width: 640px) {
  .journal-panel {
    padding: var(--space-3);
  }

  .journal-table {
    font-size: 11px;
  }

  .journal-table__heading:nth-child(1),
  .journal-table__cell:nth-child(1),
  .journal-table__heading:nth-child(3),
  .journal-table__cell:nth-child(3),
  .journal-table__heading:nth-child(5),
  .journal-table__cell:nth-child(5),
  .journal-table__heading:nth-child(8),
  .journal-table__cell:nth-child(8),
  .journal-table__heading:nth-child(9),
  .journal-table__cell:nth-child(9),
  .journal-table__heading:nth-child(10),
  .journal-table__cell:nth-child(10) {
    display: none;
  }

  .journal-table__cell--span {
    display: table-cell;
  }

  .journal-table__heading--actions,
  .journal-table__cell--actions {
    position: static;
    border-inline-start: none;
  }

  .journal-table__cell,
  .journal-table__heading {
    padding-inline: 6px;
  }
}

/* ------------------------------------------- tables: drag to scroll ----- */
/* app.js marks every sideways-scrolling table container, whatever module owns
   it. The grab cursor says "hold and drag"; the drag itself is mouse only, since
   touch already scrolls natively. */
.is-drag-scrollable {
  cursor: grab;
}

.is-dragging {
  cursor: grabbing;
  user-select: none;

  .lic-link {
    flex-wrap: wrap;
  }

  /* On a phone the bell panel spans the screen so it never runs off the edge. */
  .notify {
    position: static;
  }

  .notify__panel {
    position: fixed;
    inset-inline: 12px;
    inset-block-start: 56px;
    width: auto;
  }

  .fb-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .fb-row__tools {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
  }

  .fb-row__label,
  .fb-row__options,
  .fb-row__description {
    grid-column: auto;
  }

  .rq-values__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ============================================================================
   LICENSES, REPORTS, NOTIFICATIONS, BULK ACTIONS (M3)
   ========================================================================= */

/* ------------------------------------------------------------ stat tiles -- */
.lic-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-3);
}

.lic-stats--slim {
  grid-template-columns: repeat(2, minmax(0, 200px));
}

.lic-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Renew and edit-data side by side instead of stacked (owner feedback, 2026-09-23). */
.lic-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* Payments as the main column, renew and edit folded beside it (owner, 2026-10-09). */
.lic-layout--payments {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

@media (max-width: 900px) {
  .lic-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lic-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.lic-fold__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
}

.lic-fold__summary::-webkit-details-marker {
  display: none;
}

.lic-fold__summary::before {
  content: "▸";
  color: var(--color-brand);
  transition: transform 0.15s ease;
}

.lic-fold[open] > .lic-fold__summary::before {
  transform: rotate(90deg);
}

.lic-fold[open] > .lic-fold__summary {
  margin-block-end: var(--space-3);
}

.lic-stats--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .lic-stats--compact {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lic-stat--total {
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
}

.lic-pay-form {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.lic-pay-form__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
}

.lic-stat__value {
  font: 600 22px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.lic-stat__label {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.field__control--file {
  padding: 8px 10px;
  color: var(--color-text-2);
  font-size: var(--text-small);
}

.field__control--file::file-selector-button {
  margin-inline-end: var(--space-3);
  padding: 6px 12px;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-sm);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font: 600 var(--text-small) var(--font-sans);
  cursor: pointer;
}

.lic-chip {
  display: inline-block;
  margin-inline: 4px;
  padding: 2px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.lic-rules {
  margin: var(--space-4) 0 0;
  padding-inline-start: 18px;
  color: var(--color-text-2);
  font-size: var(--text-small);
  line-height: 1.7;
}

/* ---------------------------------------------------------- column mapping -- */
.lic-map {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
}

.lic-map__summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

/* --------------------------------------------------------- link to an email -- */
.lic-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lic-link__email {
  min-width: 190px;
}

.users-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* -------------------------------------------------------- bulk row actions -- */
.users-bulk {
  margin: 0;
}

.users-bulk__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.users-bulk__hint {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.users-table__heading--check,
.users-table__cell--check {
  width: 1%;
  padding-inline-end: 0;
}

/* ---------------------------------------------------------------- reports -- */
.rep-filters {
  align-items: flex-start;
}

.rep-pnl {
  font-weight: 600;
}

/* Search-as-you-type user picker, replacing a <select> that could not scale past a few
   hundred people (owner feedback, 2026-09-23). */
.rep-picker {
  position: relative;
}

.rep-picker__results {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 30;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  margin-block-start: 4px;
}

.rep-picker__results:empty {
  display: none;
}

.rep-picker__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rep-picker__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  cursor: pointer;
}

.rep-picker__item:last-child {
  border-block-end: 0;
}

.rep-picker__item:hover {
  background: var(--color-surface-2);
}

.rep-picker__empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.rep-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.rep-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-2);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  color: var(--color-text);
}

.rep-chip__label {
  font-weight: 500;
}

.rep-chip__remove {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-text-3);
  cursor: pointer;
  font-size: var(--text-body);
  line-height: 1;
}

.rep-chip__remove:hover {
  color: var(--color-text);
}

.rep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.rep-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.rep-card__label {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.rep-card__value {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text);
}

.rep-card__value--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.rep-card__value--buy,
.rep-pnl--buy {
  color: var(--color-buy);
}

.rep-card__value--sell,
.rep-pnl--sell {
  color: var(--color-sell);
}

.rep-card__sub {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.rep-card__link {
  color: var(--color-brand);
}

.rep-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.rep-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 180px;
  margin: 0;
  padding: var(--space-3) 0 0;
  list-style: none;
}

.rep-bars__item {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.rep-bars__bar {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-brand);
}

.rep-bars__value,
.rep-bars__label {
  font: 500 var(--text-small) var(--font-mono);
  color: var(--color-text-3);
}

/* ----------------------------------------------------------- notifications -- */
.notify {
  position: relative;
}

.notify__panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 40;
  width: min(360px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.notify__panel[hidden] {
  display: none;
}

.notify__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.notify__title {
  font-size: var(--text-body);
  color: var(--color-text);
}

.notify__mark {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--text-small);
  color: var(--color-brand);
}

.notify__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notify__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  border-inline-start: 2px solid transparent;
}

.notify__item.is-unread {
  border-inline-start-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.notify__text {
  font-size: var(--text-small);
  color: var(--color-text);
  line-height: 1.5;
}

.notify__time {
  font: 500 var(--text-eyebrow) var(--font-mono);
  color: var(--color-text-3);
}

.notify__link {
  font-size: var(--text-small);
  color: var(--color-brand);
}

/* --------------------------------------------------------------------- modal -- */
/* One shared shell (layouts/app.html): any screen loads its own content into
   #modal-body via HTMX (see admin/landings' media-upload modal for the pattern) instead of
   building a modal of its own. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.modal__panel--wide {
  max-width: 720px;
}

.modal__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-text-3);
  font-size: 18px;
  cursor: pointer;
}

.modal__close:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.modal__body {
  display: contents;
}

.modal__title {
  font-size: var(--text-h3);
  color: var(--color-text);
  margin-block-end: var(--space-1);
  padding-inline-end: var(--space-6);
}

.modal__hint {
  font-size: var(--text-small);
  color: var(--color-text-2);
  margin-block-end: var(--space-4);
}

.modal__error {
  font-size: var(--text-small);
  color: var(--color-sell);
  margin-block-end: var(--space-3);
}

.modal__notice {
  font-size: var(--text-body);
  color: var(--color-text);
}

.notify__empty {
  margin: var(--space-4) 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

@media (max-width: 900px) {
  .rep-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   FORMS, PUBLIC PAGES, REQUESTS (M4)
   ========================================================================= */

/* ---------------------------------------------------------- field builder -- */
.fb-url {
  font-family: var(--font-mono);
  color: var(--color-brand);
}

/* Save/update, appearance and "other actions" moved beside the fields editor instead of
   full-width below it (owner feedback, 2026-09-23, same pattern as the landing builder). */
.fb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--space-4);
  align-items: start;
}

.fb-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.fb-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (max-width: 900px) {
  .fb-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fb-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.fb-row__main,
.fb-row__extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  grid-column: 1;
}

.fb-row__label {
  grid-column: span 2;
}

.fb-row__options,
.fb-row__description {
  grid-column: span 2;
}

.fb-row__tools {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fb-row.is-hidden-options .fb-row__options {
  display: none;
}

/* --------------------------------------------------------- request values -- */
.rq-values {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.rq-values__row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.rq-values__label {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.rq-values__value {
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.rq-values__link {
  color: var(--color-brand);
}

/* ----------------------------------------------------------- public pages -- */
.public-page {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-bg);
}

.public-page__card {
  width: 100%;
  max-width: 620px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.public-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.public-page__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.public-page__title {
  margin: 0;
  font-size: var(--text-h2);
  color: var(--color-text);
}

.public-page__intro {
  color: var(--color-text-2);
  line-height: 1.6;
}

/* A form's description and thank-you message are rich text from the builder's editor: links
   in the brand color, paragraphs and lists spaced like the editor shows them. */
:is(.public-page__intro, .public-done__text, .lpage-form__intro) a {
  color: var(--color-brand);
}

:is(.public-page__intro, .public-done__text, .lpage-form__intro) :is(p, ul, ol, blockquote) {
  margin: 0 0 var(--space-2);
}

:is(.public-page__intro, .public-done__text, .lpage-form__intro) :is(p, ul, ol, blockquote):last-child {
  margin-block-end: 0;
}

:is(.public-page__intro, .public-done__text, .lpage-form__intro) :is(ul, ol) {
  padding-inline-start: 1.3em;
}

:is(.public-page__intro, .public-done__text, .lpage-form__intro) :is(h2, h3, h4) {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--color-text);
  font-weight: 600;
}

:is(.public-page__intro, .public-done__text, .lpage-form__intro) blockquote {
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-brand-line);
}

.public-page__foot {
  font-size: var(--text-small);
  color: var(--color-text-3);
  text-align: center;
}

.public-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.public-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.public-form__req {
  color: var(--color-brand);
}

.public-form__help {
  line-height: 1.5;
}

.public-form__wide {
  grid-column: 1 / -1;
}

.public-form__actions {
  display: flex;
  gap: var(--space-3);
}

.public-form__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
  text-align: center;
}

.public-done {
  text-align: center;
  padding-block: var(--space-6);
}

.public-done__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h2);
  color: var(--color-brand);
}

.public-done__text {
  margin: 0;
  color: var(--color-text-2);
  line-height: 1.6;
}

/* The form's own button after sending it (e.g. "join the WhatsApp group"). */
.public-done__action {
  margin-block-start: var(--space-5);
}

.public-done__icon {
  flex: none;
}

/* ------------------------------------------------- licenses: detail, groups -- */
.lic-link-name {
  color: var(--color-text);
  text-decoration: none;
}

.lic-link-name:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.grp-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.users-panel__pad {
  padding: var(--space-3) var(--space-4);
}

/* ------------------------------------------------------ form banner, columns -- */
.public-banner {
  position: relative;
  overflow: hidden;
  /* Wide banner under the title, never behind it (recommended image ratio 3:1). */
  aspect-ratio: 3 / 1;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.public-banner--brand {
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.public-banner--surface-2 {
  background: var(--color-surface-2);
}

.public-banner--surface-3 {
  background: var(--color-surface-3);
}

.public-banner--bg-subtle {
  background: var(--color-bg-subtle);
}

.public-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fb-banner-preview[hidden] {
  display: none;
}

.fb-banner-preview {
  display: block;
  max-width: 320px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-block-end: var(--space-2);
}

/* ==========================================================================
   Landing builder (admin) and public landing pages (M5)
   ========================================================================== */
.landing-check--ok {
  color: var(--color-brand);
}

.landing-check--bad {
  color: var(--color-text-2);
}

.lb-back {
  display: inline-block;
  margin-block-end: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-2);
  text-decoration: none;
}

.lb-back:hover {
  color: var(--color-brand);
}

.lb-meta {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.lb-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) minmax(260px, 320px);
  gap: var(--space-4);
  align-items: start;
  margin-block-end: var(--space-4);
}

/* Publish, previews and page settings: a column of their own next to the block being edited,
   not full-width sections the person had to scroll past it to reach (owner feedback, 2026-09-23). */
.lb-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.lb-aside__views {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.lb-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.lb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.lb-item.is-active {
  border-color: var(--color-brand);
  box-shadow: var(--glow);
}

.lb-item.is-hidden {
  opacity: 0.6;
}

.lb-item__main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

.lb-item__type {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.lb-item__summary {
  font-size: var(--text-small);
  color: var(--color-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-item__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.lb-picker__group {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.lb-picker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2);
}

.lb-picker__button {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: start;
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.lb-picker__button:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
}

.lb-picker__name {
  font-weight: 600;
}

.lb-picker__desc {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.lb-row {
  align-items: flex-start;
}

.lb-row__fields {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.lb-prompt {
  margin-block-start: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.lb-prompt__text {
  white-space: pre-wrap;
  margin: var(--space-2) 0;
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text);
}

.lb-versions {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.lb-versions__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lb-versions__label {
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

/* ---- large videos going up in parts (landing media library and its modal) ---- */
.video-upload {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-2);
}

.video-upload__bar {
  width: 100%;
  height: 6px;
  accent-color: var(--color-brand);
}

.video-upload__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.video-upload__status {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-2);
  font-variant-numeric: tabular-nums;
}

.lb-media {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.lb-media__item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lb-media__thumb {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}

.lb-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-media__kind {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.lb-media__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lb-media__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.lb-media__info {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

/* ---- public landing pages -------------------------------------------------------------- */
.lpage {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
}

.lpage-preview__bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}

.lpage-preview__label {
  margin-inline-end: auto;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.lpage-preview__device {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  color: var(--color-text-2);
  text-decoration: none;
}

.lpage-preview__device.is-active {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.lpage-frame {
  margin-inline: auto;
  max-width: 100%;
  background: var(--color-bg);
}

.lpage-frame--tablet {
  width: 820px;
  border-inline: 1px solid var(--color-border);
}

.lpage-frame--phone {
  width: 390px;
  border-inline: 1px solid var(--color-border);
}

.lpage-main {
  display: block;
}

.lpage-foot {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.lpage-block {
  position: relative;
  padding-inline: var(--space-4);
  margin-inline: auto;
  max-width: 1080px;
}

.lpage-block--space-s {
  padding-block: var(--space-4);
}

.lpage-block--space-m {
  padding-block: var(--space-8);
}

.lpage-block--space-l {
  padding-block: var(--space-12);
}

.lpage-block--width-narrow {
  max-width: 640px;
}

.lpage-block--width-normal {
  max-width: 860px;
}

.lpage-block--width-wide {
  max-width: 1080px;
}

.lpage-block--align-center {
  text-align: center;
}

.lpage-block--tone-surface {
  background: var(--color-surface);
  max-width: none;
}

.lpage-block--tone-brand {
  background: var(--color-brand-soft);
  border-block: 1px solid var(--color-brand-line);
  max-width: none;
}

.lpage-block__title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-h1);
  line-height: 1.2;
  text-align: center;
}

.lpage-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.lpage-block--hero {
  overflow: hidden;
}

.lpage-hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: 860px;
  margin-inline: auto;
}

.lpage-block--align-center .lpage-hero__inner {
  justify-items: center;
}

.lpage-hero__title {
  margin: 0;
  font-size: var(--text-display);
  line-height: 1.1;
}

.lpage-hero__text {
  margin: 0;
  font-size: var(--text-h3);
  color: var(--color-text-2);
}

.lpage-richtext {
  font-size: var(--text-h3);
}

.lpage-richtext a {
  color: var(--color-brand);
}

.lpage-image {
  margin: 0;
}

.lpage-image__img,
.lpage-video__file {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.lpage-image__caption {
  margin-block-start: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-2);
  text-align: center;
}

.lpage-placeholder {
  display: grid;
  place-items: center;
  min-height: 180px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-3);
  font-size: var(--text-small);
}

.lpage-video {
  margin: 0;
}

/* A member's video: the player in its frame (owner, 2026-10-12: no watermark for now). */
.lpage-video__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.lpage-video__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
}

.lpage-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.lpage-gallery__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.lpage-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.lpage-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.lpage-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h3);
}

.lpage-card__text {
  margin: 0;
  color: var(--color-text-2);
}

.lpage-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.lpage-steps__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.lpage-steps__number {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-mono);
  font-weight: 600;
}

.lpage-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.lpage-plan {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.lpage-plan--highlight {
  border-color: var(--color-brand);
  box-shadow: var(--glow);
}

.lpage-plan__name {
  margin: 0;
  font-size: var(--text-h3);
}

.lpage-plan__price {
  margin: 0;
}

.lpage-plan__amount {
  font-family: var(--font-mono);
  font-size: var(--text-h1);
  font-weight: 600;
}

.lpage-plan__period {
  color: var(--color-text-2);
}

.lpage-plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-2);
}

.lpage-plan__feature::before {
  content: "✓ ";
  color: var(--color-brand);
}

.lpage-cta {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.lpage-block--align-center .lpage-cta {
  justify-items: center;
}

.lpage-cta__title {
  margin: 0;
  font-size: var(--text-h1);
}

.lpage-cta__text {
  margin: 0;
  color: var(--color-text-2);
}

.lpage-quote {
  margin: 0;
}

.lpage-quote__text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h3);
}

.lpage-quote__author {
  font-weight: 600;
}

.lpage-quote__role {
  font-weight: 400;
  color: var(--color-text-2);
}

.lpage-faq {
  display: grid;
  gap: var(--space-2);
}

.lpage-faq__item {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lpage-faq__question {
  cursor: pointer;
  font-weight: 600;
}

.lpage-faq__answer {
  margin: var(--space-2) 0 0;
  color: var(--color-text-2);
}

/* Video accordion (2026-10-22): the fold's optional text sits above its video. */
.lpage-faq__text {
  margin-bottom: var(--space-3);
}

.lpage-countdown__clock {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.lpage-countdown__cell {
  display: grid;
  min-width: 72px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lpage-countdown__value {
  font-family: var(--font-mono);
  font-size: var(--text-h1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-brand);
}

.lpage-countdown__unit {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-2);
}

.lpage-countdown__after {
  margin: var(--space-4) 0 0;
  font-size: var(--text-h3);
}

.lpage-form__intro {
  margin-block-end: var(--space-4);
  color: var(--color-text-2);
}

.lpage-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.lpage-docs__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lpage-divider {
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--color-border);
}

.lpage-spacer--s {
  height: var(--space-4);
}

.lpage-spacer--m {
  height: var(--space-8);
}

.lpage-spacer--l {
  height: var(--space-12);
}

@media (max-width: 1360px) {
  .lb-layout {
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  }

  .lb-aside {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .lb-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lb-aside {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .lpage-hero__title {
    font-size: var(--text-h1);
  }

  .lpage-block__title {
    font-size: var(--text-h2);
  }

  .lpage-countdown__clock {
    gap: var(--space-2);
  }

  .lpage-countdown__cell {
    min-width: 0;
    flex: 1;
    padding: var(--space-2);
  }

  .lpage-docs__item {
    flex-direction: column;
    align-items: flex-start;
  }

  .lb-item {
    flex-wrap: wrap;
  }
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-2);
}

.landing-check {
  display: block;
}

.lb-blocks,
.lb-inspector {
  min-width: 0;
}

.lb-picker__item {
  min-width: 0;
}

.lpage--preview {
  background: var(--color-bg-subtle);
}

.lpage-gallery__item {
  min-width: 0;
}

.lpage-form,
.lpage-countdown {
  min-width: 0;
}

.lpage-spacer {
  display: block;
}

/* ==========================================================================
   FAQ assistant: rich answers, suggestions, feedback and the manager (M6)
   ========================================================================== */
.faq-launcher__message {
  max-width: 100%;
  min-width: 0;
}

.faq-launcher__text {
  margin: 0;
  white-space: pre-wrap;
}

.faq-launcher__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.faq-launcher__link {
  border: 0;
  background: transparent;
  color: var(--color-brand);
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.faq-launcher__typing {
  margin: 0;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-eyebrow);
  color: var(--color-brand);
}

.faq-launcher__typing[hidden] {
  display: none;
}

.faq-launcher__typing.htmx-request {
  display: block;
}

.faq-launcher__blocks {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
  min-width: 0;
}

.faq-card,
.faq-table,
.faq-chart {
  min-width: 0;
}

.faq-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.faq-suggest__chip {
  border: 1px solid var(--color-brand-line);
  background: var(--color-brand-soft);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
}

.faq-suggest__chip:hover {
  border-color: var(--color-brand);
}

.faq-card {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.faq-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.faq-card__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
}

.faq-card__item {
  min-width: 0;
}

.faq-card__label {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.faq-card__value {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.faq-card__value--buy {
  color: var(--color-buy);
}

.faq-card__value--sell {
  color: var(--color-sell);
}

.faq-table {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.faq-table__wrap {
  max-width: 100%;
  overflow-x: auto;
}

.faq-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.faq-table__heading {
  text-align: start;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.faq-table__cell {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.faq-table__cell--numeric {
  font-family: var(--font-mono);
  text-align: end;
}

.faq-chart {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.faq-chart__svg {
  display: block;
  width: 100%;
  height: 96px;
}

.faq-chart__svg--bars {
  height: 110px;
}

.faq-chart__area {
  fill: var(--color-brand-soft);
}

.faq-chart__line {
  stroke: var(--color-brand);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.faq-chart__bar--up {
  fill: var(--color-buy);
}

.faq-chart__bar--down {
  fill: var(--color-sell);
}

.faq-chart__bar--flat,
.faq-chart__bar--brand {
  fill: var(--color-brand);
}

.faq-chart__label {
  fill: var(--color-text-3);
  font-size: 9px;
}

.faq-feedback {
  display: flex;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

.faq-feedback__button {
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  cursor: pointer;
  font-size: var(--text-small);
}

.faq-feedback__button:hover {
  border-color: var(--color-brand);
}

.faq-feedback--done {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.faqm-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.faqm-stats__item {
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.faqm-stats__label {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.faqm-stats__value {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 600;
}

.faqm-meta {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.faqm-answer {
  max-width: 420px;
  white-space: pre-wrap;
}

.faqm-inline {
  display: inline-block;
}

.faqm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.faqm-list__item {
  min-width: 0;
}

.faqm-entry {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
}

.faqm-entry__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.faqm-entry__question {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.faq-chart__bar {
  stroke: none;
}

.faq-launcher__manage {
  font-size: var(--text-eyebrow);
  color: var(--color-brand);
  text-decoration: none;
  margin-inline-start: var(--space-3);
}

.faq-launcher__expand {
  margin-inline-start: auto;
}

/* Expanded chat: the whole screen on phones; on desktop everything except the menu. */
.faq-launcher__icon--collapse {
  display: none;
}

.faq-launcher.is-expanded .faq-launcher__icon--expand {
  display: none;
}

.faq-launcher.is-expanded .faq-launcher__icon--collapse {
  display: block;
}

.faq-launcher.is-expanded {
  inset: 0;
  z-index: 60;
  gap: 0;
  align-items: stretch;
}

.faq-launcher.is-expanded .faq-launcher__button {
  display: none;
}

.faq-launcher.is-expanded .faq-launcher__panel {
  width: 100%;
  max-height: none;
  height: 100%;
  border-radius: 0;
  border-width: 0;
}

.faq-launcher.is-expanded .faq-launcher__messages,
.faq-launcher.is-expanded .faq-launcher__composer {
  padding-inline: max(var(--space-4), calc((100% - 880px) / 2));
}

.faq-launcher.is-expanded .faq-launcher__message {
  font-size: var(--text-body);
}

.faq-launcher__go {
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: underline;
}

.faq-launcher__go:hover {
  color: var(--color-brand-hover);
}

@media (min-width: 821px) {
  .faq-launcher.is-expanded {
    left: 248px;
  }
}

.faq-launcher__icon {
  flex: none;
}

.app-topbar__lang {
  display: flex;
  align-items: center;
}

@media (min-width: 821px) {
  .app-topbar__lang {
    display: none;
  }
}

/* ------------------------------------------------------- offline banner -- */
.app-offline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-md);
}

.app-offline[hidden] {
  display: none;
}

.app-offline__text {
  flex: 1;
}

.auto-icon-btn {
  padding-inline: var(--space-2);
  color: var(--color-text-3);
}

.auto-icon-btn:hover:not(:disabled) {
  color: var(--color-sell);
}

.auto-icon-btn__icon {
  display: block;
}

.auto-account--collapsible {
  padding: 0;
}

.auto-account__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.auto-account__summary::-webkit-details-marker {
  display: none;
}

.auto-account__summary:focus-visible {
  outline: none;
  border-radius: var(--radius-md);
  box-shadow: var(--glow);
}

.auto-account__summary-main {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-width: 0;
}

.auto-account__chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--color-text-3);
  border-block-end: 2px solid var(--color-text-3);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.auto-account--collapsible[open] > .auto-account__summary > .auto-account__chevron {
  transform: rotate(45deg);
}

.auto-account__body {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}

/* ------------------------------------------------------ landing rich text -- */
.rte {
  display: grid;
  gap: 0;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: 0.15s;
}

.rte:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}

.rte__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface-2);
  border-block-end: 1px solid var(--color-border);
}

.rte__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: 0.1s;
}

.rte__btn:hover {
  color: var(--color-text);
  background: var(--color-surface-3);
}

.rte__btn:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--glow);
}

.rte__select {
  height: 28px;
  padding: 0 var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.rte__sep {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  margin-inline: var(--space-1);
}

.rte__surface {
  min-height: 72px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-3) 12px;
  color: var(--color-text);
  font: 400 var(--text-body) var(--font-sans);
}

.rte__surface--full {
  min-height: 160px;
  max-height: 480px;
}

.rte__surface:focus {
  outline: none;
}

.rte__surface :is(h2, h3, h4) {
  margin: var(--space-2) 0 var(--space-1);
  font-weight: 600;
}

.rte__surface blockquote {
  margin: var(--space-2) 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-brand-line);
  color: var(--color-text-2);
}

.rte__surface a {
  color: var(--color-brand);
}

.rte__surface :is(ul, ol) {
  padding-inline-start: 1.3em;
}

/* ------------------------------------------------------ comparisons module -- */
.cmp-panel {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cmp-panel__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.cmp-panel__meta {
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--color-text-3);
}

.cmp-hint {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.cmp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.cmp-side {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* The indicator's card is the darkest of the two, so it reads apart from the user's. */
.cmp-side--indicator {
  background: var(--color-bg);
}

.cmp-side__title {
  margin: 0;
}

.cmp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

/* A figure as a tile, the same as the Journal's Resumen. */
.cmp-stat {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.cmp-stat__label {
  margin: 0;
  padding-inline-end: var(--space-5);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
}

.cmp-stat__tip {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
}

.cmp-stat__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.cmp-stat__value--gain {
  color: var(--color-buy);
}

.cmp-stat__value--loss {
  color: var(--color-sell);
}

.cmp-result {
  display: grid;
  gap: var(--space-4);
}

.cmp-diff {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-md);
}

.cmp-diff--match {
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
}

.cmp-diff__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-brand);
}

.cmp-diff__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-diff__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-body);
}

.cmp-diff__metric {
  font-weight: 600;
  color: var(--color-text);
}

.cmp-diff__values {
  color: var(--color-text-2);
}

.cmp-diff__number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.cmp-hint__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cmp-selectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.cmp-selectors__journal {
  min-width: 0;
}

.cmp-picker {
  position: relative;
  min-width: 0;
}

.cmp-picker__selected {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-small);
}

.cmp-picker__selected-name {
  font-weight: 600;
  color: var(--color-brand);
}

.cmp-picker__selected-email {
  color: var(--color-text-3);
}

.cmp-picker__results {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 30;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  margin-block-start: 4px;
}

.cmp-picker__results:empty {
  display: none;
}

.cmp-picker__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cmp-picker__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.cmp-picker__item:last-child {
  border-block-end: 0;
}

.cmp-picker__item:hover {
  background: var(--color-surface-2);
}

.cmp-picker__empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

@media (max-width: 900px) {
  .cmp-selectors {
    grid-template-columns: 1fr;
  }

  .cmp-grid {
    grid-template-columns: 1fr;
  }

  .cmp-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------ landing: comparison block -- */
/* The block draws the shared indicator panel (`.cmp-side`); only its empty state is its own. */
.lpage-cmp-hint {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* ---------------------------------------------- renewal form switch (builder) -- */
.renewal-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.renewal-box__switch {
  margin-block-start: 0;
}

.renewal-box__date {
  display: none;
  max-width: 280px;
}

/* The start day only exists while the switch is on. */
.renewal-box:has(.renewal-box__check:checked) {
  border-color: var(--color-brand-line);
}

.renewal-box:has(.renewal-box__check:checked) .renewal-box__date {
  display: flex;
}

/* ------------------------------------------ form purpose picker (new form) -- */
/* License registration vs general form. The license-only settings hide while "general" is
   picked (CSS `:has`, no script); the server ignores them for a general form anyway. */
.form-purpose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-purpose__picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.form-purpose__legend {
  margin-block-end: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.form-purpose__option {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  cursor: pointer;
}

.form-purpose__option:has(.form-purpose__input:checked) {
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
}

.form-purpose__input {
  accent-color: var(--color-brand);
  margin-block-start: 3px;
}

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

.form-purpose__name {
  font-weight: 600;
  color: var(--color-text);
}

.form-purpose__hint {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.form-purpose__license-only {
  display: contents;
}

.form-purpose:has(.form-purpose__input--general:checked) .form-purpose__license-only {
  display: none;
}

/* ------------------------------------------ license history entry (modal) -- */
.history-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

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

.history-view__title {
  margin: 0;
}

.history-view__sub {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.history-view__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.history-view__heading {
  margin: 0;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.history-view__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.history-view__item {
  min-width: 0;
}

.history-view__label {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.history-view__value {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.history-view__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
}

.history-view__link {
  color: var(--color-brand);
}

.history-view__table {
  width: 100%;
  border-collapse: collapse;
}

.history-view__th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
  background: var(--color-bg-subtle);
}

.history-view__td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.history-view__td--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.history-view__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* One of two twin fields is locked while the other has a value (see bindExclusiveFields). */
.field.is-disabled .field__control {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------- delete a request (requests table) -- */
.request-delete {
  display: inline-block;
  margin: 0 0 0 var(--space-2);
  vertical-align: middle;
}

.request-delete__button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--color-text-3);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.request-delete__button:hover {
  color: var(--color-sell);
  border-color: var(--color-sell);
  background: var(--color-sell-soft);
}

.request-delete__button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.request-delete__glyph {
  display: block;
}

/* ------------------------------ resend the invitation (license detail) -- */
.lic-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

.lic-invite__hint {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* ------------------------------------ landing: indicator performance block -- */
.lpage-perf__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block: var(--space-3);
}

.lpage-perf__field {
  display: grid;
  gap: 4px;
}

.lpage-perf__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.lpage-perf__date {
  min-width: 160px;
  color-scheme: dark;
}

:root[data-theme="light"] .lpage-perf__date {
  color-scheme: light;
}

.lpage-perf__period {
  margin: 0 0 var(--space-3);
  font-size: var(--text-small);
  font-family: var(--font-mono);
  color: var(--color-text-3);
}

.lpage-perf__warn {
  font-family: var(--font-sans);
  color: var(--color-text-2);
}

.lpage-perf__hint {
  margin: var(--space-3) 0;
  color: var(--color-text-3);
}

/* ------------------------------------ builder: a ticked list of indicators -- */
.lb-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lb-checks__item {
  margin-block-start: 0;
}

/* ------------------------- jump between a license and its user (both screens) -- */
.lic-goto {
  margin-block-start: var(--space-3);
}

/* ------------------------- landing builder: pick a library picture by looking at it -- */
.media-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-height: 176px;
  margin-block: var(--space-2);
  padding: var(--space-2);
  overflow-y: auto;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.media-pick__item {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.media-pick__item:hover {
  border-color: var(--color-border-strong);
}

.media-pick__item:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.media-pick__item.is-selected {
  border-color: var(--color-brand);
  box-shadow: var(--glow);
}

.media-pick__item--none {
  border-style: dashed;
}

.media-pick__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-pick__none {
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--color-text-3);
}

/* =============================================================================
   Training module (docs/ENTRENAMIENTO_PLAN.md): the indicator factory and its market data.
   Same two-column admin layout as the builders: the list or the chart on the left, the actions
   in an aside column on the right.
   ========================================================================== */
.training-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--space-4);
  align-items: start;
}

.training-layout__main,
.training-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* The candle chart needs real width, and the sidebar takes a lot of it: stack earlier than the
   builders do. */
@media (max-width: 1180px) {
  .training-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.training-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.training-panel--danger {
  border-color: var(--color-border-strong);
}

.training-panel__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.training-panel__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.training-panel__hint,
.training-panel__line {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-text-3);
}

.training-panel__line {
  color: var(--color-text-2);
}

.training-form {
  display: grid;
  gap: var(--space-3);
}

.training-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.training-code {
  display: inline-block;
  padding: 1px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.training-link {
  color: var(--color-brand);
  text-decoration: none;
}

.training-link:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}

.training-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Label / value tiles: numbers are always mono and right of their label. */
.training-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.training-stats__item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.training-stats__label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.training-stats__value {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  color: var(--color-text);
}

.training-result {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  padding: var(--space-5);
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-lg);
}

.training-result__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text);
}

.training-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-small);
}

.training-facts__label {
  color: var(--color-text-3);
}

.training-facts__value {
  margin: 0;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.training-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.training-list__row {
  padding: var(--space-1) 0;
  font-size: var(--text-small);
  color: var(--color-text-2);
  border-bottom: 1px solid var(--color-border);
}

.training-list__row:last-child {
  border-bottom: 0;
}

/* The candle explorer. */
.training-chart {
  display: grid;
  gap: var(--space-2);
}

.training-chart__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.training-chart__tfs {
  display: inline-flex;
  padding: 2px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.training-chart__tf {
  min-width: 44px;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.training-chart__tf:hover {
  color: var(--color-text);
}

.training-chart__tf:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

.training-chart__tf.is-active {
  color: var(--color-brand);
  background: var(--color-surface-3);
}

.training-chart__legend {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--color-text-2);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.training-chart__legend.is-up {
  color: var(--color-buy);
}

.training-chart__legend.is-down {
  color: var(--color-sell);
}

.training-chart__canvas {
  height: 460px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (max-width: 600px) {
  .training-chart__canvas {
    height: 340px;
  }
}

.training-chart__status {
  margin: 0;
  min-height: 1.4em;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* Timezone check: one column per season. */
.training-check {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.training-check__season {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.training-check__title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
}

.training-check__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.training-check__days {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.training-check__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.training-check__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.training-check__factor {
  color: var(--color-text-3);
}

/* Cross-check of two timeframes. */
.training-form--inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

@media (max-width: 600px) {
  .training-form--inline {
    grid-template-columns: minmax(0, 1fr);
  }
}

.training-cross {
  display: grid;
  gap: var(--space-3);
}

.training-cross__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.training-cross__names {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.training-cross__warn {
  color: var(--color-text-2);
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-brand-line);
}

/* Agreement per month: a month that is not full height is a month the two histories disagree. */
.training-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
  gap: 3px;
}

.training-months__col {
  display: grid;
  gap: var(--space-1);
  justify-items: center;
}

.training-months__track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 72px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.training-months__bar {
  display: block;
  width: 100%;
  height: var(--bar);
  background: var(--color-brand);
}

.training-months__col--off .training-months__bar {
  background: var(--color-border-strong);
}

.training-months__label {
  font-size: 9px;
  color: var(--color-text-3);
}

/* Bars per broker hour: the quiet hours are the daily pause. */
.training-hours {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
}

.training-hours__col {
  display: grid;
  gap: var(--space-1);
  justify-items: center;
}

.training-hours__track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 96px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.training-hours__bar {
  display: block;
  width: 100%;
  height: var(--bar);
  background: var(--color-brand);
}

.training-hours__col--quiet .training-hours__bar {
  background: var(--color-border-strong);
}

.training-hours__label {
  font-size: 9px;
  color: var(--color-text-3);
}

@media (max-width: 600px) {
  .training-hours__label {
    font-size: 8px;
  }
}

/* =============================================================================
   Training module, F2: the backtest run page and its form.
   ========================================================================== */
.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}

.training-panel__hint--warn {
  color: var(--color-text);
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-brand);
}

/* The numbers a run is judged by, each with its doubt underneath. */

/* The run chart: taller, with a line saying which trade is selected. */
.training-chart__canvas--tall {
  height: 540px;
}

@media (max-width: 600px) {
  .training-chart__canvas--tall {
    height: 380px;
  }
}

.training-chart__selected {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-brand);
}

.training-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.training-key__item::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: var(--space-2);
  vertical-align: -2px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 3px;
}

.training-key__item--gain::before {
  background: var(--color-buy-soft);
  border-color: var(--color-buy);
}

.training-key__item--loss::before {
  background: var(--color-sell-soft);
  border-color: var(--color-sell);
}

/* When it works: weekday (rows) x hour of the exchange's clock (columns). */

/* How far trades went against and in favor of their stop distance. */

/* The distribution of results in R. */

.training-run-form {
  display: block;
  min-width: 0;
}

/* The trades table: a row is a way to jump the chart to that trade. */
.training-trades {
  min-width: 680px;
}

.training-trades__signed {
  font-weight: 600;
}

.training-trades__row {
  cursor: pointer;
}

.training-trades__row:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

.training-trades__signed--gain {
  color: var(--color-buy);
}

.training-trades__signed--loss {
  color: var(--color-sell);
}

.training-trades__row.is-active {
  background: var(--color-brand-soft);
}

/* The signal's preview: the chart and, beside it, a narrow list of its trades to jump between
   (owner, 2026-10-09). The list takes the chart's height and scrolls on its own; below 1100px it
   drops under the chart. */
.prev-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-4);
  align-items: stretch;
}

.prev-layout__chart {
  min-width: 0;
}

@media (max-width: 1100px) {
  .prev-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.prev-trades {
  position: relative;
  min-width: 0;
  min-height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.prev-trades__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .prev-trades__inner {
    position: static;
    max-height: 420px;
  }
}

.prev-trades__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.prev-trades__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.prev-trades__nav {
  display: flex;
  gap: var(--space-2);
}

.prev-trades__filter {
  display: flex;
  gap: var(--space-1);
}

/* a stop's best run before it: how close it came to winning */
.prev-trades__mfe {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-3);
}

.prev-trades__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  list-style: none;
}

.prev-trades__entry {
  margin: 0;
}

.prev-trades__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.prev-trades__item:hover {
  background: var(--color-surface-2);
}

.prev-trades__item:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

.prev-trades__item.is-active {
  border-left-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.prev-trades__n,
.prev-trades__when {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-3);
}

.prev-trades__side {
  font-size: 12px;
  font-weight: 700;
}

.prev-trades__side--buy {
  color: var(--color-buy);
}

.prev-trades__side--sell {
  color: var(--color-sell);
}

.prev-trades__r {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.prev-trades__r--gain {
  color: var(--color-buy);
}

.prev-trades__r--loss {
  color: var(--color-sell);
}

.prev-trades__when {
  grid-column: 1 / 3;
}

.prev-trades__chips {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

.training-trades__flag {
  color: var(--color-brand);
  cursor: help;
}

.training-trades__more {
  text-align: center;
}

.training-form__actions {
  display: flex;
  gap: var(--space-3);
}

.training-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.training-weekdays[hidden],
.training-grid[hidden] {
  display: none;
}

.training-slots {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A signed result in the set-up wizard's tables: gain and loss colours only ever mean profit and
   loss. */

.training-signed--gain {
  color: var(--color-buy);
}

.training-signed--loss {
  color: var(--color-sell);
}

/* Replay controls of the run chart: they sit with the timeframe buttons. */
.training-chart__replay {
  flex-wrap: wrap;
  max-width: 100%;
  margin-inline-start: auto;
  align-items: center;
}

.training-chart__tf--stop {
  display: none;
}

.training-chart__replay.is-replaying .training-chart__tf--stop {
  display: inline-flex;
}

.training-chart__speed {
  min-height: 28px;
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Training module, F5: what the AI did. A proposal is a card; the sheet and the prompts are shown
   whole in scrolling blocks. Rejected proposals are dimmed, never red (red is for the market). */

.training-disclosure {
  margin-top: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.training-disclosure__summary {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--color-text-2);
}

.training-disclosure__summary:hover {
  color: var(--color-text);
}

.training-disclosure__summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.training-pre {
  max-height: 420px;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-text-2);
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.training-pre:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

/* Training data upload: the file can be tens of MB, so the screen shows the sending and then the
   server-side analysis instead of looking frozen. */
.training-upload {
  display: grid;
  gap: var(--space-2);
}

.training-upload__bar {
  width: 100%;
  height: 8px;
  accent-color: var(--color-brand);
}

.training-upload__text {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.training-disclosure__body {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Training: the market profile. A small bar next to each figure, drawn with a native <progress>. */
.training-bar {
  width: 90px;
  height: 8px;
  margin-inline-end: var(--space-2);
  vertical-align: middle;
  accent-color: var(--color-brand);
}

/* ==========================================================================
   Trading calendar (Journal > Calendar): a month of trading, day by day. Style guide:
   "Trading calendar". Green and red are the market's (profit, loss), always with a sign (and an
   arrow wherever there is room); today wears the brand colour. The card and every day are
   containers: a narrow cell swaps its figure for a compact one and drops the per-journal list,
   whatever the screen; the whole detail of a day lives in the popover its cell opens.
   ========================================================================== */
.trading-calendar {
  container: tcal / inline-size;
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.trading-calendar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.trading-calendar__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
}

.trading-calendar__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.trading-calendar__scope {
  display: inline-flex;
  padding: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.trading-calendar__scope-link {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-2);
  text-decoration: none;
  border-radius: var(--radius-full);
}

.trading-calendar__scope-link:hover {
  color: var(--color-text);
}

.trading-calendar__scope-link:focus-visible,
.trading-calendar__step:focus-visible,
.trading-calendar__day--detail:focus-visible,
.trading-calendar__popover-close:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

.trading-calendar__scope-link.is-active {
  color: var(--color-text);
  background: var(--color-surface-3);
}

.trading-calendar__nav {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trading-calendar__step {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body);
  line-height: 1;
  color: var(--color-text-2);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.trading-calendar__step:hover {
  color: var(--color-brand);
}

.trading-calendar__month {
  min-width: 118px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
}

.trading-calendar__month:hover {
  color: var(--color-brand);
}

.trading-calendar__month:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

.trading-calendar__month-caret {
  margin-inline-start: var(--space-1);
  color: var(--color-text-3);
}

.trading-calendar__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.trading-calendar__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.trading-calendar__stat {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trading-calendar__stat-label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.trading-calendar__stat-value {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.trading-calendar__stat-value--gain {
  color: var(--color-buy);
}

.trading-calendar__stat-value--loss {
  color: var(--color-sell);
}

.trading-calendar__stat-note {
  margin: 0;
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.trading-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.trading-calendar__weekday {
  padding: var(--space-2) 0;
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
  color: var(--color-text-2);
  border-block-end: 1px solid var(--color-border);
}

.trading-calendar__day {
  container-type: inline-size;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  padding: 10px 10px var(--space-2);
  font: inherit;
  color: inherit;
  text-align: start;
  background: var(--color-surface-2);
  border: 0;
  border-block-start: 2px solid transparent;
  border-radius: var(--radius-md);
}

.trading-calendar__day--outside {
  background: var(--color-bg-subtle);
  opacity: 0.55;
}

.trading-calendar__day--gain {
  background: var(--color-buy-soft);
  border-block-start-color: var(--color-buy);
}

.trading-calendar__day--loss {
  background: var(--color-sell-soft);
  border-block-start-color: var(--color-sell);
}

.trading-calendar__day--flat {
  border-block-start-color: var(--color-border-strong);
}

/* a day with trades opens its detail: it is a button, and looks like one when pointed at */
.trading-calendar__day--detail {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.trading-calendar__day--detail:hover {
  box-shadow: 0 0 0 1px var(--color-brand-line);
}

.trading-calendar__number {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.trading-calendar__day--outside .trading-calendar__number {
  color: var(--color-text-2);
}

.trading-calendar__day.is-today .trading-calendar__number {
  padding: 1px 7px;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: var(--radius-sm);
}

.trading-calendar__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin-block-start: auto;
}

.trading-calendar__pnl,
.trading-calendar__pnl-short {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trading-calendar__pnl-short {
  display: none;
}

.trading-calendar__pnl--gain {
  color: var(--color-buy);
}

.trading-calendar__pnl--loss {
  color: var(--color-sell);
}

.trading-calendar__trades,
.trading-calendar__note {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  color: var(--color-text-3);
}

.trading-calendar__journals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.trading-calendar__journal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-2);
}

.trading-calendar__journal--more {
  display: block;
  color: var(--color-brand);
}

.trading-calendar__journal-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trading-calendar__journal-pnl {
  white-space: nowrap;
}

.trading-calendar__journal-pnl--gain {
  color: var(--color-buy);
}

.trading-calendar__journal-pnl--loss {
  color: var(--color-sell);
}

/* a cell too narrow for the full figure shows the compact one (+2.8k); too narrow for the list of
   journals, it keeps only the day's total: the popover has everything */
@container (max-width: 99px) {
  .trading-calendar__pnl {
    display: none;
  }

  .trading-calendar__pnl-short {
    display: inline;
  }
}

@container (max-width: 118px) {
  .trading-calendar__journals {
    display: none;
  }
}

/* a small calendar (a phone, or a narrow column): tight spacing, the essentials only */
@container tcal (max-width: 560px) {
  .trading-calendar__grid {
    gap: 3px;
  }

  .trading-calendar__weekday {
    padding: 6px 0;
    font-size: 10px;
  }

  .trading-calendar__day {
    min-height: 58px;
    gap: 4px;
    padding: 6px 4px;
  }

  .trading-calendar__number {
    font-size: 11px;
  }

  .trading-calendar__day.is-today .trading-calendar__number {
    padding: 0 4px;
  }

  .trading-calendar__pnl-short {
    font-size: 10px;
  }

  .trading-calendar__trades,
  .trading-calendar__note,
  .trading-calendar__journals {
    display: none;
  }

  .trading-calendar__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .trading-calendar__stat {
    padding: var(--space-2) var(--space-3);
  }

  .trading-calendar__stat-value {
    font-size: var(--text-body);
  }
}

/* ---- the detail of one day: every journal, whole (a popover: no script, closes with Esc) ---- */
.trading-calendar__popover {
  width: min(440px, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  padding: var(--space-4);
  overflow: auto;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.trading-calendar__popover::backdrop {
  background: var(--scrim);
}

@supports not selector(:popover-open) {
  .trading-calendar__popover {
    display: none;
  }
}

.trading-calendar__popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.trading-calendar__popover-title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 700;
}

.trading-calendar__popover-close {
  flex: none;
  width: var(--control-sm);
  height: var(--control-sm);
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--color-text-2);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trading-calendar__popover-close:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.trading-calendar__popover-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.trading-calendar__popover-total-figure {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trading-calendar__popover-total-figure--gain {
  color: var(--color-buy);
}

.trading-calendar__popover-total-figure--loss {
  color: var(--color-sell);
}

.trading-calendar__popover-total-trades {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.trading-calendar__popover-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trading-calendar__popover-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.trading-calendar__popover-name {
  min-width: 0;
  font-size: var(--text-small);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* In the "all journals" calendar and the overview, a Journal's name opens that Journal. */
.trading-calendar__popover-name--link {
  color: var(--color-brand);
  text-decoration: none;
}

.trading-calendar__popover-name--link:hover,
.trading-calendar__popover-name--link:focus-visible {
  text-decoration: underline;
}

.trading-calendar__popover-trades {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
  white-space: nowrap;
}

.trading-calendar__popover-pnl {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trading-calendar__popover-pnl--gain {
  color: var(--color-buy);
}

.trading-calendar__popover-pnl--loss {
  color: var(--color-sell);
}

/* ---- the month picker: click the month, choose a year and a month (a popover too) ---- */
.trading-calendar__popover--picker {
  width: min(360px, calc(100vw - 32px));
}

.trading-calendar__picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* the radio is the switch between years; only its label is seen */
.trading-calendar__picker-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.trading-calendar__picker-year {
  flex: 1 1 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
  color: var(--color-text-2);
  cursor: pointer;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trading-calendar__picker-year:hover {
  color: var(--color-text);
}

.trading-calendar__picker-radio:checked + .trading-calendar__picker-year {
  color: var(--color-brand);
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
}

.trading-calendar__picker-radio:focus-visible + .trading-calendar__picker-year {
  box-shadow: var(--glow);
}

.trading-calendar__picker-months {
  display: none;
  order: 1;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.trading-calendar__picker-radio:checked + .trading-calendar__picker-year + .trading-calendar__picker-months {
  display: grid;
}

.trading-calendar__picker-month {
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.trading-calendar__picker-month:hover {
  border-color: var(--color-border-strong);
}

.trading-calendar__picker-month:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

.trading-calendar__picker-month.is-current {
  color: var(--color-brand);
  border-color: var(--color-brand-line);
}

.trading-calendar__picker-month.is-active {
  color: var(--color-on-brand);
  background: var(--color-brand);
}

.trading-calendar__picker-today {
  display: block;
  margin-block-start: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
  color: var(--color-brand);
  text-decoration: none;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-md);
}

.trading-calendar__picker-today:hover {
  background: var(--color-brand-soft);
}

.trading-calendar__picker-today:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

/* on a phone the detail rises from the bottom, like a sheet */
@media (max-width: 720px) {
  .trading-calendar__popover {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ---- the note an admin leaves when approving or renewing (history table, history modal, request) ---- */
.users-table__cell--note {
  max-width: 260px;
}

.lic-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--color-text-2);
}

/* ---- license tags: shared reminders on a license, and the list's tag filter ---- */
.lic-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block: var(--space-3);
}

.lic-tags__label {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.lic-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lic-tags__empty {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.lic-tags__add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lic-tags__input {
  width: 200px;
  height: 30px;
}

.lic-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--color-brand-line);
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  font-size: var(--text-small);
  color: var(--color-text);
}

.lic-tag--compact {
  padding: 1px 8px;
  font-size: var(--text-eyebrow);
}

.lic-tag__name {
  overflow-wrap: anywhere;
}

.lic-tag__form {
  display: inline-flex;
}

.lic-tag__remove {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-2);
  font-size: var(--text-body);
  line-height: 1;
  cursor: pointer;
}

.lic-tag__remove:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.lic-tag__remove:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

.lic-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}

.lic-tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.lic-tag-filter__label {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.lic-tag-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  color: var(--color-text-2);
  text-decoration: none;
}

.lic-tag-filter__chip:hover {
  border-color: var(--color-brand-line);
  color: var(--color-text);
}

.lic-tag-filter__chip:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.lic-tag-filter__chip.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-text);
}

.lic-tag-filter__name {
  overflow-wrap: anywhere;
}

.lic-tag-filter__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-3);
}

.lic-tag-filter__clear {
  font-size: var(--text-small);
  color: var(--color-brand);
}

.lic-tag-admin {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.lic-tag-admin__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.lic-tag-admin__rename {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.lic-tag-admin__input {
  flex: 1 1 160px;
  min-width: 0;
  height: 30px;
}

.lic-tag-admin__count {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-3);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .lic-tags__add,
  .lic-tags__input {
    width: 100%;
  }
}

/* the amount of a partial payment, under its action in the license history */
.lic-history-amount {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-2);
}

.history-view__note {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rq-values__value--note {
  white-space: pre-wrap;
}

/* ---- the files a person sent with their request (payment screenshot) on the license ---- */
.lic-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lic-files__item {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.lic-files__link {
  display: inline-block;
  color: var(--color-text);
  text-decoration: none;
}

.lic-files__link:hover {
  color: var(--color-brand);
}

.lic-files__image {
  display: block;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  object-fit: contain;
}

.lic-files--sm .lic-files__image {
  height: 40px;
}

.lic-files--lg .lic-files__image {
  max-height: 320px;
}

.lic-files__name {
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.lic-files__caption {
  color: var(--color-text-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.history-view__proof--files {
  flex-direction: column;
  align-items: flex-start;
}

/* ---- the current term's payment proof under "Edit data", and the form that replaces it ---- */
.lic-proof {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ---- the question to the AI researcher (session and her own words) ---- */
.wizard-ask {
  display: grid;
  gap: var(--space-4);
  max-width: 640px;
}

/* ---- the actions of a row of the indicators list (restore / archive, and the trash of an archived one) ---- */
.training-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.training-row-actions__trash:hover {
  color: var(--color-sell);
}

.training-icon {
  display: block;
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Training wizard (Training > Assistant): the guided way through an indicator. Style guide:
   "Training wizard". One card per step with one decision; the nine steps beside it (a strip on a
   phone, a list on a desktop). Money is mono and in dollars; green and red stay the market's.
   ========================================================================== */
.wizard {
  display: grid;
  gap: var(--space-4);
}

.wizard__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.wizard__main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  align-content: start;
}

.wizard__aside {
  order: -1;
  min-width: 0;
}

@media (min-width: 960px) {
  .wizard__layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }

  .wizard__aside {
    order: 0;
  }
}

/* before the indicator exists there are no steps to list: a single column (after the media query,
   so it wins at every width) */
.wizard__layout--single {
  grid-template-columns: minmax(0, 1fr);
}

/* ---- the nine steps ---- */
.wizard-steps {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.wizard-steps__item {
  display: flex;
  flex: none;
  align-items: center;
}

.wizard-steps__link,
.wizard-steps__inert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
}

.wizard-steps__link:hover .wizard-steps__label {
  color: var(--color-brand);
}

.wizard-steps__link:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

.wizard-steps__marker {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-text-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.wizard-steps__text {
  display: none;
  gap: 2px;
  min-width: 0;
}

.wizard-steps__label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-2);
}

.wizard-steps__state {
  font-size: var(--text-eyebrow);
  color: var(--color-text-3);
}

.wizard-steps__item--done .wizard-steps__marker {
  color: var(--color-on-brand);
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.wizard-steps__item--current .wizard-steps__marker {
  color: var(--color-brand);
  border-color: var(--color-brand);
  box-shadow: var(--glow);
}

.wizard-steps__item--current .wizard-steps__label {
  color: var(--color-text);
}

.wizard-steps__item--current .wizard-steps__text {
  display: grid;
}

.wizard-steps__item--locked,
.wizard-steps__item--soon {
  opacity: 0.6;
}

.wizard-steps__item--soon .wizard-steps__marker {
  border-style: dashed;
}

@media (min-width: 960px) {
  .wizard-steps {
    flex-direction: column;
    gap: var(--space-1);
    overflow: visible;
  }

  .wizard-steps__item,
  .wizard-steps__link,
  .wizard-steps__inert {
    flex: 1;
  }

  .wizard-steps__text {
    display: grid;
  }
}

/* ---- the card of the step you are on ---- */
.wizard-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.wizard-card__eyebrow {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.wizard-card__title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
}

.wizard-card__hint {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-2);
}

.wizard-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.wizard-card__expert {
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.wizard-card__expert:hover {
  color: var(--color-brand);
}

/* ---- forms ---- */
.wizard-form {
  display: grid;
  gap: var(--space-4);
}

.wizard-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .wizard-form__row--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wizard-form__row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wizard-choice {
  display: flex;
  gap: var(--space-2);
}

.wizard-choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wizard-choice__label {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 600;
  text-align: center;
  color: var(--color-text-2);
  cursor: pointer;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wizard-choice__label:hover {
  color: var(--color-text);
}

.wizard-choice__input:checked + .wizard-choice__label {
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-color: var(--color-brand-line);
}

.wizard-choice__input:focus-visible + .wizard-choice__label {
  box-shadow: var(--glow);
}

.wizard-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-2);
}

/* what ticking the cent account changes, under the box */
.wizard-check__hint {
  margin: calc(var(--space-1) * -1) 0 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* ---- the money in dollars ---- */
.wizard-preview {
  display: grid;
  gap: var(--space-3);
}

.wizard-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.wizard-figure {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wizard-figure__label {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.wizard-figure__value {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.wizard-figure__note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.wizard-lots {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-lots__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.wizard-lots__stop {
  color: var(--color-text-2);
}

.wizard-lots__lots,
.wizard-lots__shown {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wizard-lots__shown {
  color: var(--color-brand);
}

.wizard-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-brand-soft);
  border-inline-start: 3px solid var(--color-brand);
  border-radius: var(--radius-md);
}

/* ---- the data step ---- */
.wizard-upload {
  display: grid;
  gap: var(--space-2);
}

.wizard-upload__bar {
  width: 100%;
  height: 8px;
  accent-color: var(--color-brand);
}

.wizard-upload__text {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.wizard-upload__error {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text);
}

.wizard-verdict {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wizard-verdict__title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 700;
}

.wizard-verdict__text {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.wizard-verdict--matches {
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
}

.wizard-verdict--mismatch {
  border-color: var(--color-sell);
}

.wizard-verdict--mismatch .wizard-verdict__title {
  color: var(--color-sell);
}

.wizard-profile {
  min-width: 0;
}

/* ---- the AI's candidates, one card each, in the owner's dollars ---- */
.wizard-candidates {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-candidate {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  min-width: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.wizard-candidate--adopted {
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
}

.wizard-candidate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.wizard-candidate__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 700;
}

.wizard-candidate__why {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-2);
}

.wizard-candidate__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-candidate__fact {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.wizard-candidate__more {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.wizard-candidate__more-summary {
  cursor: pointer;
  color: var(--color-text-3);
}

.wizard-candidate__more-summary:hover {
  color: var(--color-brand);
}

.wizard-candidate__more-text {
  margin: var(--space-2) 0 0;
}

/* the pattern scan of the exploration data, in the market step */
.wizard-scan {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.wizard-scan__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 700;
}

.wizard-scan__text {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-2);
}

.wizard-scan__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

.wizard-scan__form {
  margin: 0;
}

/* what the exploration data can confirm (statistical power) */
.wizard-power {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.wizard-power__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: 700;
}

.wizard-power__summary {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-2);
}

.wizard-power__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* what a wizard step does, one click away */
.wizard-card__about {
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.wizard-card__about-summary {
  cursor: pointer;
  color: var(--color-text-3);
}

.wizard-card__about-summary:hover,
.wizard-card__about-summary:focus-visible {
  color: var(--color-brand);
}

.wizard-card__about-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-5);
}

.wizard-card__about-item {
  line-height: 1.5;
}

/* the published sources a hypothesis stands on: each opens the paper in a new tab */
.wizard-candidate__sources {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-4);
}

.wizard-candidate__source {
  overflow-wrap: anywhere;
}

.wizard-candidate__source-link {
  color: var(--color-text-2);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-line);
  text-underline-offset: 2px;
}

.wizard-candidate__source-link:hover,
.wizard-candidate__source-link:focus-visible {
  color: var(--color-brand);
}

/* a figure that carries a sign: green and red are the market's (a gain, a loss) */
.wizard-figure__value--gain {
  color: var(--color-buy);
}

.wizard-figure__value--loss {
  color: var(--color-sell);
}

.wizard-fit {
  margin: var(--space-1) 0 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-2);
}

.wizard-fit--ok {
  color: var(--color-brand);
}

.wizard-fit--no {
  color: var(--color-text);
}

/* ---- a running job (or four) ---- */
.wizard-progress {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-progress__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.wizard-progress__name {
  font-size: var(--text-body);
}

.wizard-progress__state {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.wizard-progress__bar {
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  accent-color: var(--color-brand);
}

/* ---- before and after ---- */
.wizard-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.wizard-compare__item {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wizard-compare__label {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.wizard-compare__now {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-3);
  text-decoration: line-through;
}

.wizard-compare__then {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wizard-compare__then--gain {
  color: var(--color-buy);
}

.wizard-compare__then--loss {
  color: var(--color-sell);
}

/* ---- the verdict: a word and an icon, never a colour alone ---- */
.wizard-outcome {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.wizard-outcome__title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
}

.wizard-outcome__text {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-2);
}

.wizard-outcome--approved,
.wizard-outcome--approved-with-reservations {
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
}

.wizard-outcome--approved .wizard-outcome__title,
.wizard-outcome--approved-with-reservations .wizard-outcome__title {
  color: var(--color-brand);
}

.wizard-outcome--rejected {
  border-color: var(--color-sell);
}

.wizard-checks {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-checks__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.wizard-checks__icon {
  grid-row: 1 / span 2;
  font-weight: 700;
  color: var(--color-text-2);
}

.wizard-checks__title {
  font-weight: 600;
}

.wizard-checks__text {
  margin: 0;
  color: var(--color-text-2);
}

.wizard-checks__row--fail .wizard-checks__icon {
  color: var(--color-sell);
}

.wizard-checks__row--pass .wizard-checks__icon {
  color: var(--color-brand);
}

/* ---- the document of the strategy ---- */
.wizard-doc {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.wizard-doc__name {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
}

.wizard-doc__summary,
.wizard-doc__text {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-text-2);
}

.wizard-doc__heading {
  margin: var(--space-2) 0 0;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

.wizard-doc__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: var(--space-5);
  font-size: var(--text-body);
  color: var(--color-text-2);
}

.wizard-doc__list--plain {
  padding-inline-start: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-text-3);
}

/* ---- code the owner copies, and the steps of how to use it ---- */
.wizard-code {
  display: grid;
  gap: var(--space-2);
}

.wizard-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.wizard-code__title {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 600;
}

.wizard-code__area {
  width: 100%;
  min-height: 180px;
  padding: var(--space-3);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text);
  white-space: pre;
  resize: vertical;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wizard-howto {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
  font-size: var(--text-body);
  color: var(--color-text-2);
}

/* ---- "do it all" ---- */
.wizard-autopilot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.wizard-autopilot--on {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-line);
}

.wizard-autopilot__text {
  flex: 1 1 240px;
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.wizard-autopilot__title {
  font-weight: 700;
  color: var(--color-text);
}

/* ---- the Pine against TradingView, and the closing list ---- */
.wizard-outcome--matches {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-line);
}

.wizard-outcome--matches .wizard-outcome__title {
  color: var(--color-brand);
}

.wizard-outcome--differs {
  border-color: var(--color-sell);
}

.wizard-checks__action {
  grid-column: 2;
}

.wizard-checks__row--pending .wizard-checks__icon {
  color: var(--color-text-3);
}

.wizard-soon {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-soon__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  font-size: var(--text-small);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.wizard-soon__step {
  font-weight: 600;
}

/* =============================================================================
   Claude bridge (Training > Claude on your computer, docs/ENTRENAMIENTO_REFACTOR_CLAUDE.md):
   whether the bridge on the owner's computer is connected, how to connect it, and its keys.
   Style guide: "Claude bridge".
   ========================================================================== */
.bridge-presence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* In the wizard: whether Claude answers right now, on every step that asks it. */
.wizard-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-2);
}

.wizard-ai__link {
  color: var(--color-brand);
  text-decoration: none;
}

.wizard-ai__link:hover,
.wizard-ai__link:focus-visible {
  text-decoration: underline;
}

/* ===================================================== telegram channel ===== */
/* The Licenses tab that reads the private Telegram channel against the licenses. */
.tg-channel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.tg-channel__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tg-channel__counts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tg-channel__warning {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text-2);
  font-size: var(--text-small);
}

.tg-channel__confirm {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.tg-channel__list {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
  color: var(--color-text-2);
  font-size: var(--text-small);
}

.tg-channel__item {
  padding: 2px 0;
}

/* Providers tab (docs/PROVIDERS_PLAN.md): tools and rates beside the provider's data. */
.prov-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.prov-rate {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.prov-tool {
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.prov-tool__form {
  margin-block-start: var(--space-3);
}

/* Provider tools handed out in a purchase (docs/PROVIDERS_PLAN.md, P2). */
.tool-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  min-width: 0;
}

.tool-picker__legend {
  padding: 0 var(--space-2);
  color: var(--color-text);
  font-weight: 600;
}

.tool-picker__hint {
  margin: 0;
  color: var(--color-text-3);
  font-size: 12px;
}

.tool-picker__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tool-picker__provider {
  color: var(--color-brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tool-picker__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: end;
}

@media (max-width: 640px) {
  .tool-picker__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .tool-picker__name {
    grid-column: 1 / -1;
  }
}

.tool-picker__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  cursor: pointer;
  min-height: 38px;
}

.tool-picker__rate {
  color: var(--color-text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tool-picker__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tool-picker__label {
  color: var(--color-text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tools-moves {
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.tools-renames {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-2);
  font-size: 12px;
}

.tools-renames__item {
  padding-block: 2px;
}

/* A provider's portal accounts (PROVIDERS_PLAN P6). */
.prov-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.prov-account__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Providers module navigation (owner, 2026-10-27): daily work first, configuration last. */
.prov-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}

.prov-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-2);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.prov-nav__link:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.prov-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

.prov-nav__link.is-active {
  color: var(--color-brand);
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
}

.prov-nav__count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

/* Closures: "Crear cierre" / "Cierres hechos". */
.prov-switch {
  display: inline-flex;
  gap: 2px;
  margin-block-end: var(--space-4);
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.prov-switch__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
}

.prov-switch__item:hover {
  color: var(--color-text);
}

.prov-switch__item:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

.prov-switch__item.is-active {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.prov-switch__count {
  color: var(--color-text-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* One card per provider: what waits to be paid; the card opens its pending list. */
.prov-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

@media (max-width: 720px) {
  .prov-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.prov-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.prov-card:hover {
  border-color: var(--color-brand-line);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

.prov-card:focus-visible {
  outline: none;
  box-shadow: var(--glow);
}

.prov-card__name {
  font-size: 16px;
  font-weight: 600;
}

.prov-card__total {
  font-size: 28px;
  font-weight: 600;
}

.prov-card__unit {
  color: var(--color-text-3);
  font-size: 13px;
}

.prov-card__meta {
  color: var(--color-text-2);
  font-size: 13px;
}

.prov-card__action {
  margin-block-start: var(--space-2);
  color: var(--color-brand);
  font-size: var(--text-small);
  font-weight: 600;
}

/* The address providers sign in at. */
.prov-url {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block-end: var(--space-4);
}

.prov-url__value {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
  user-select: all;
}