/* Shared visual roles for the research workspace and account pages. */
:root {
  color-scheme: only light;
  --pl-font-body: "Aptos", "Segoe UI", Arial, sans-serif;
  --pl-font-heading: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --pl-font-mono: "Cascadia Mono", Consolas, monospace;
  --pl-type-body: 15px;
  --pl-type-copy: 0.9rem;
  --pl-type-label: 0.7rem;
  --pl-type-control: 0.82rem;
  --pl-type-card: 1.05rem;
  --pl-type-section: clamp(1.35rem, 2vw, 1.7rem);
  --pl-paper: #f5f0e7;
  --pl-surface: #fffdf8;
  --pl-surface-muted: #faf6ee;
  --pl-surface-raised: #fffefa;
  --pl-ink: #1d1a17;
  --pl-ink-soft: #3f3932;
  --pl-muted: #6d655c;
  --pl-line: #d8d0c2;
  --pl-line-strong: #c8baa3;
  --pl-accent: #624514;
  --pl-accent-soft: #ead9b8;
  --pl-accent-muted: #f5ead4;
  --pl-positive: #12664f;
  --pl-negative: #a23d28;
  --pl-ai: #315b8a;
  --pl-tracked: #14705a;
  --pl-weekly: #8a5a22;
  --pl-us: #6c3f00;
  --pl-hk: #8b3d72;
  --pl-shadow-sm: 0 8px 20px rgba(48, 38, 24, 0.045);
  --pl-shadow-md: 0 16px 36px rgba(48, 38, 24, 0.065);
  --pl-shell-width: 1500px;
  --pl-control-height: 38px;
  --pl-panel-inset: 18px;
  --pl-page-background: radial-gradient(circle at 50% -12%, rgba(173, 136, 77, 0.11), transparent 34rem), linear-gradient(180deg, #faf7f1 0, var(--pl-paper) 38rem);

  /* Earlier components use these names for the same visual roles. */
  --paper: var(--pl-paper);
  --card: var(--pl-surface);
  --surface: var(--pl-surface);
  --surface-strong: var(--pl-surface-raised);
  --surface-subtle: var(--pl-surface-muted);
  --ink: var(--pl-ink);
  --ink-soft: var(--pl-ink-soft);
  --muted: var(--pl-muted);
  --line: var(--pl-line);
  --line-strong: var(--pl-line-strong);
  --accent: var(--pl-accent);
  --accent-soft: var(--pl-accent-soft);
  --accent-border: var(--pl-line-strong);
  --button-line: var(--pl-line-strong);
  --button-surface: var(--pl-surface-muted);
  --button-tint: var(--pl-accent-muted);
  --good: var(--pl-positive);
  --bad: var(--pl-negative);
  --buy: var(--pl-positive);
  --sell: var(--pl-negative);
  --teal: var(--pl-positive);
  --red: var(--pl-negative);
  --font: var(--pl-font-body);
  --serif: var(--pl-font-heading);
  --mono: var(--pl-font-mono);
}

html {
  scrollbar-gutter: stable;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background: var(--pl-paper);
}

body {
  color: var(--pl-ink);
  background: var(--pl-page-background);
  font-family: var(--pl-font-body);
  font-size: var(--pl-type-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--pl-font-heading);
}

.field > label:not(.checkbox-row),
.backtest-filters > label,
.kicker,
.section-label,
.page-kicker,
.pl-kicker,
.label {
  color: var(--pl-muted);
  font-size: var(--pl-type-label);
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Equal control heights keep labels, fields, and actions on the same baseline. */
.button, .btn,
.auth-shell button, .auth-nav a,
.field > button, .review-request-form button,
.personal-ledger-form button,
.field .date-picker-trigger,
.top-report-filter > form > button[type="submit"],
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select, .filter-form select, .filter-form input,
.review-request-form select {
  box-sizing: border-box;
  min-height: var(--pl-control-height);
  border-radius: 2px;
  border-color: var(--pl-line-strong) !important;
  background: var(--pl-surface-muted) !important;
  color: var(--pl-ink-soft) !important;
  font-family: var(--pl-font-body);
  font-size: var(--pl-type-control);
  line-height: 1.2;
  letter-spacing: 0.015em;
  text-transform: none;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select, .filter-form select, .filter-form input,
.review-request-form select {
  height: var(--pl-control-height);
  padding: 8px 10px;
}

.button, .btn, .auth-shell button, .auth-nav a,
.date-picker-trigger, .top-report-filter > form > button[type="submit"] {
  padding: 8px 12px;
  font-weight: 800;
}

.button.primary, .auth-shell button[type="submit"],
.field > button, .review-request-form button {
  border-color: var(--pl-accent) !important;
  background: var(--pl-accent-muted) !important;
  color: var(--pl-accent) !important;
  font-family: var(--pl-font-body);
  font-size: var(--pl-type-control);
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: none;
}

.button:hover, .btn:hover,
.auth-shell button:hover, .auth-nav a:hover,
.date-picker-trigger:hover, .top-report-filter > form > button[type="submit"]:hover {
  border-color: var(--pl-accent) !important;
  background: var(--pl-surface-raised) !important;
}

/* Both chart destinations have the same place in the action hierarchy. */
.button.chart-link-internal, .button.chart-link-external {
  border-color: var(--pl-line-strong) !important;
  background: var(--pl-surface-muted) !important;
  color: var(--pl-accent) !important;
}

.button.chart-link-internal:hover, .button.chart-link-external:hover {
  border-color: var(--pl-accent) !important;
  background: var(--pl-surface-raised) !important;
}

.button.delete-button, button.delete-button, .auth-shell .delete-button {
  border-color: rgba(162, 61, 40, 0.38) !important;
  background: #fff3ef !important;
  color: var(--pl-negative) !important;
}

.button.delete-button:hover, button.delete-button:hover, .auth-shell .delete-button:hover {
  border-color: var(--pl-negative) !important;
  background: var(--pl-surface-raised) !important;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--pl-accent);
  outline-offset: 3px;
}

.metric-value, .metric > strong, .fact .value,
.return-value, .history-return, .backtest-return,
.score, .price, .ledger-summary-card strong {
  font-family: var(--pl-font-body);
  font-variant-numeric: tabular-nums;
}

/* Journal headings follow the same section and card hierarchy as research. */
.pnl-panel h2, .recent-trades-heading h2, .journal-section h2 {
  color: var(--pl-ink);
  font-family: var(--pl-font-heading);
  font-size: var(--pl-type-card);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.journal-group-title, .account-section-heading h2 {
  color: var(--pl-ink);
  font-family: var(--pl-font-heading);
  font-size: var(--pl-type-section);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: none;
}

.auth-shell .copy, .auth-shell .plan-card li,
.account-hub-shell .plan-card .copy {
  color: var(--pl-muted);
  font-size: var(--pl-type-copy);
  line-height: 1.55;
}

.auth-card, .auth-panel, .legal-card,
.account-hub-shell .auth-panel, .account-hub-shell .plan-card {
  padding: var(--pl-panel-inset);
  border-color: var(--pl-line);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-sm);
}

.plan-card.highlight, .account-hub-shell .plan-card.highlight {
  border-color: var(--pl-accent);
  background: var(--pl-accent-muted);
}

.auth-hero, .account-hub-hero {
  border-top-color: var(--pl-ink);
  border-bottom-color: var(--pl-line);
}

.auth-shell .error {
  color: var(--pl-negative);
}

@media (max-width: 720px) {
  :root {
    --pl-type-body: 14px;
    --pl-control-height: 44px;
    --pl-panel-inset: 15px;
  }
}