/* Dusk workspace refresh. Loaded after the existing component stylesheet.
   Keep behavior, IDs and state classes in app.js; this file owns presentation. */
:root {
  --bg-primary: #090c12;
  --bg-secondary: #0d111a;
  --bg-card: #111722;
  --text-primary: #edf2fa;
  --text-secondary: #a6b2c6;
  --text-muted: #8592a8;
  --border: rgba(165, 184, 215, .10);
  --border-strong: rgba(165, 184, 215, .18);
  --border-hover: rgba(165, 184, 215, .26);
  --accent-soft: rgba(0, 229, 255, .075);
  --field-bg: rgba(165, 184, 215, .045);
  --radius: 16px;
  --radius-sm: 9px;
  --dash-gap: 20px;
  --shell-header-h: 88px;
  --stat-card-h: 116px;
  --shell-width: 232px;
  --page-gutter: clamp(20px, 2.5vw, 40px);
  --shadow: 0 2px 12px rgba(0, 0, 0, .18);
  --btn-fill: linear-gradient(110deg, #0e7490, #6d28d9);
  --btn-face: var(--field-bg);
  --btn-face-hover: var(--hover-strong);
}

:root[data-theme="light"] {
  --bg-primary: #f4f6fa;
  --bg-secondary: #edf1f7;
  --bg-card: #ffffff;
  --text-primary: #162034;
  --text-secondary: #47566e;
  --text-muted: #5d6e87;
  --border: rgba(30, 50, 80, .10);
  --border-strong: rgba(30, 50, 80, .18);
  --border-hover: rgba(30, 50, 80, .26);
  --field-bg: rgba(30, 50, 80, .04);
  --accent-soft: rgba(14, 116, 144, .08);
  --shadow: 0 2px 12px rgba(30, 50, 80, .05);
}

body::before { background: none; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* A spacious, quiet shell. Both loading and loaded states share geometry. */
.sidebar, .loading-skel-side {
  width: var(--shell-width);
  min-width: var(--shell-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  box-shadow: none;
}
.sidebar { overflow-y: auto; overflow-x: hidden; }
.sidebar-header, .loading-skel-side-head {
  height: var(--shell-header-h);
  min-height: var(--shell-header-h);
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo { height: 26px; max-width: 100%; object-fit: contain; }
.sidebar-menu { padding: 24px 14px; }
.nav-section-label {
  padding: 0 12px 10px;
  color: var(--text-muted);
  font-size: var(--font-sm);
  font-weight: 500;
  letter-spacing: .035em;
}
.sidebar-menu .nav-section-label:not(:first-child) { padding-top: 26px; }
.sidebar-menu li + li:not(.nav-section-label) { margin-top: 4px; }
.sidebar-item {
  min-height: 44px;
  padding: 11px 12px;
  gap: 12px;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.sidebar-item svg { width: 18px; height: 18px; opacity: .8; }
.sidebar-item.active {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent-blue) 14%, transparent);
  font-weight: 500;
}
.sidebar-item::before { display: none; }
.sidebar-plan-card {
  margin: auto 18px 20px;
  padding: 18px;
  gap: 7px;
  background: linear-gradient(135deg, var(--violet-soft), transparent 90%), var(--bg-card);
  border-color: color-mix(in srgb, var(--accent-violet) 22%, var(--border));
  border-radius: 12px;
}
.plan-name { display: flex; align-items: center; gap: 8px; }
.plan-name::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-violet-text);
}
.plan-price { font-weight: 500; }
.plan-renew { line-height: 1.6; }

#dashboard.page, .loading-skel-main {
  margin-left: 0;
  border-radius: 0;
  border-left: none;
  box-shadow: none;
}
#dashboard.page { height: 100dvh; }
.dash-main { height: 100dvh; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.dashboard-header, .loading-skel-head {
  padding: 20px var(--page-gutter);
  min-height: var(--shell-header-h);
  flex-shrink: 0;
  background: var(--bg-primary);
}
.header-left { gap: 14px; min-width: 0; }
.header-title { display: flex; flex-direction: column; gap: 3px; }
.workspace-eyebrow { color: var(--text-muted); font-size: var(--font-sm); font-weight: 400; }
.header-left h2 { letter-spacing: -.035em; font-weight: 600; line-height: 1.3; }
.header-right { gap: 16px; }
.user-dropdown-btn { min-height: 38px; padding: 5px 10px 5px 6px; gap: 9px; background: var(--bg-card); }
.user-avatar { width: 26px; height: 26px; }
.notif-btn { width: 36px; height: 36px; border-color: transparent; background: transparent; }
.unread-dot, .account-tab-dot { box-shadow: none; }
.user-dropdown-menu { min-width: 224px; padding: 6px; margin-top: 6px; border-radius: 12px; }
.user-dropdown-item { padding: 11px 12px; border-radius: 7px; }
.user-dropdown-item:hover { color: var(--text-primary); }
.user-dropdown-item-danger:hover { color: var(--accent-red); }
.dashboard-main, .loading-skel-body {
  max-width: 1600px;
  padding: 26px var(--page-gutter) 40px;
  margin-inline: auto;
}
.account-section-label { letter-spacing: .035em; font-weight: 500; margin-bottom: 10px; }
.account-bar { gap: 16px; margin-bottom: 24px; align-items: center; }
.account-tabs { flex-wrap: wrap; gap: 5px; }
.account-tab-wrap { border: 1px solid transparent; border-radius: var(--radius-sm); }
.account-tab { min-height: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 500; }
.account-tab::after { display: none; }
.account-tab-wrap.active { background: var(--bg-card); border-color: var(--border-strong); }
.account-tab-wrap.active .account-tab { background: transparent; border-color: transparent; }
.account-tab.active { background: var(--bg-card); border-color: var(--border-strong); }
.account-tab-wrap.active .account-tab, .account-tab.active { color: var(--text-primary); }
.account-tab-edit { padding-inline: 6px; }
.btn-add-account { padding: 8px 12px; min-height: 38px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.btn-add-account:hover { background: var(--accent-soft); border-color: var(--accent-blue); }

/* Keep the original module order, with bounded heights and a readable rhythm. */
.dash-fold { min-height: 0 !important; gap: var(--dash-gap); }
.pnl-box, .stat-card, .journal-card, .connector-module, .connector-guide, .nb-side, .nb-main {
  box-shadow: none;
  background-color: var(--bg-card);
  border-color: var(--border);
}
.stat-card:hover, .journal-card:hover { transform: none; box-shadow: none; border-color: var(--border); }
.pnl-box { padding: 22px 24px 18px; }
.pnl-box-header { gap: 16px; margin-bottom: 18px; }
.pnl-box-header h3 { font-size: var(--font-body); color: var(--text-secondary); font-weight: 500; }
.pnl-box .chart-wrap { height: clamp(160px, 21vh, 240px) !important; }
.pnl-box-stat { font-size: var(--font-sub); font-weight: 500; }
.stat-card { padding: 22px 24px; gap: 12px; }
.stat-label { color: var(--text-secondary); font-size: var(--font-sm); letter-spacing: .015em; }
.dash-fold > .stats-row:not(#metric-charts) .stat-value { font-weight: 500; letter-spacing: -.045em; }
#stat-winrate, #stat-total { color: var(--text-primary); }
.pnl-green, .t-green, .green, .pos, .arrow-up, .td-pnl-pos, .metric-val.green, .sync-status.success,
.pnl-box-stat.pos, .report-hero-item.pos,
.pnl-red, .t-red, .red, .neg, .arrow-down, .td-pnl-neg, .metric-val.red, .sync-status.error,
.pnl-box-stat.neg, .report-hero-item.neg { text-shadow: none; }
#metric-charts { grid-template-columns: 1fr 1fr 1.2fr; }
#metric-charts .stat-card { padding: 20px; }
.dash-fold > #metric-charts .metric-chart-wrap { height: 190px; min-height: 190px; flex: 0 0 auto; }
.dash-fold .metric-ai-slide { padding-left: 14px; border-left-color: var(--violet-soft); gap: 10px; }
.metric-ai-label { color: var(--accent-violet-text); }
.dash-fold .metric-ai-text { font-size: var(--font-body); line-height: 1.65; color: var(--text-secondary); -webkit-line-clamp: 6; }
.dash-fold .metric-ai-dots { gap: 8px; }
.dash-fold .metric-ai-dot { width: 7px; height: 7px; }
.metric-ai-dot.active { background: var(--accent-violet-text); }
.pnl-smooth-toggle { color: var(--text-muted); gap: 7px; }
.pnl-smooth-toggle input:focus-visible + .pnl-smooth-track { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.pnl-smooth-toggle .pnl-smooth-track { background: var(--track); }

/* ── Button system ──────────────────────────────────────────────────
   Two independent axes. INTENT picks the colour, SIZE picks the metrics:
     intent   .btn-primary (brand gradient) | .btn-outline (neutral) | .btn-danger
     size     .btn-small (compact) | default | .btn-full (block)
   Intent beats size by specificity rather than source order, so the
   order the classes appear in the markup can never change the colour. */
.btn-primary, .btn-outline, .btn-small, .btn-danger {
  border-radius: var(--radius-sm);
  font-weight: 500;
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, filter .16s ease, transform .16s ease;
}

/* Neutral — the default skin for any button that declares no intent. */
.btn-small:not(.btn-primary):not(.btn-danger),
.btn-outline:not(.btn-primary):not(.btn-danger) {
  background: var(--field-bg);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.btn-small:not(.btn-primary):not(.btn-danger):hover,
.btn-outline:not(.btn-primary):not(.btn-danger):hover {
  background: var(--hover-strong);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

/* Primary — the brand gradient. One per context. */
.btn-primary {
  background: var(--btn-fill);
  border: 1px solid color-mix(in srgb, var(--accent-violet-text) 30%, transparent);
  color: var(--violet-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-primary:hover { background: var(--btn-fill); color: var(--violet-ink); filter: brightness(1.15); }

/* Danger — destructive actions, always filled. */
.btn-danger {
  background: var(--accent-red);
  border: 1px solid var(--accent-red);
  color: var(--red-ink);
}
.btn-danger:hover { background: var(--accent-red); color: var(--red-ink); filter: brightness(1.1); }
/* The notebook toolbar styles a bare <button>, which outranks a single intent
   class, so restate danger there rather than weakening the toolbar rule. */
.nb-toolbar button.btn-danger {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: var(--red-ink);
}
.nb-toolbar button.btn-danger:hover { background: var(--accent-red); color: var(--red-ink); filter: brightness(1.1); }

/* Size axis — independent of intent. */
.btn-small { min-height: 34px; padding: 7px 12px; }
:is(.btn-primary, .btn-outline, .btn-danger):not(.btn-small) { min-height: 38px; padding: 10px 20px; }
.btn-full { width: 100%; }
.btn-primary::before, .btn-outline::before, .btn-small::before, .btn-danger::before { display: none; }
.btn-group { align-items: center; gap: 8px; }
.journal-card { padding: 22px 24px; }
.journal-header { gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.journal-header h3 { display: flex; align-items: center; gap: 12px; font-size: var(--font-body); }
.trades-table th { background: var(--field-bg); padding: 12px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.trades-table th:first-child { border-radius: 8px 0 0 8px; }
.trades-table th:last-child { border-radius: 0 8px 8px 0; }
.trades-table td { padding: 15px 12px; color: var(--text-secondary); }
.trades-table td:nth-child(3) { color: var(--text-primary); font-weight: 500; }
.trades-table td.pnl-green { color: var(--accent-green); }
.trades-table td.pnl-red { color: var(--accent-red); }
.trade-row { transition: background-color .15s ease; }
.trades-pagination { justify-content: flex-end; padding-top: 8px; }
.cal-cell { border-radius: 9px; }
.cal-cell.has-trades:hover { transform: none; }
.connector-module, .connector-guide { border-radius: var(--radius); padding: 20px; }
.add-connector-card { min-height: 64px; border-radius: var(--radius); color: var(--text-muted); }
.weekly-report-row { padding: 16px; border-radius: 12px; }
.tag-filter-chip { padding: 7px 12px; }
.nb-side, .nb-main { border-radius: var(--radius); }
.nb-toolbar { padding: 10px; gap: 6px; }
.nb-toolbar button { min-width: 34px; min-height: 34px; border-radius: 6px; }
.insight-card { border-radius: var(--radius); }
#insight-input { padding: 12px 14px; }
.modal-card { border-radius: 18px; border-color: var(--border-strong); padding: 28px; box-shadow: var(--shadow); }
.modal-card h3 { letter-spacing: -.02em; }
.modal-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* Avoid repainting and blurring an entire chart dashboard underneath a modal. */
body:has(.modal:not(.hidden), .image-lightbox) .dash-main { filter: none; }
.form-group input, .form-group select, .trade-notes-field, .input-connector { border-color: var(--border-strong); }
.form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.form-group { min-width: 0; }
.form-group input, .form-group select { width: 100%; min-width: 0; }
.nb-layout { grid-template-columns: 220px minmax(0, 1fr); }
.nb-main, .nb-side { min-width: 0; }
#cl-item-input, #lc-pip { font-family: var(--font); font-size: var(--font-body); }
.nb-title-input { font-size: var(--font-title); font-weight: 500; }
.login-card { padding: 48px 36px; border-color: var(--border-strong); box-shadow: var(--shadow); }
.login-card .logo { margin-bottom: 24px; }

@media (min-width: 769px) and (max-width: 1100px) {
  :root { --shell-width: 204px; --page-gutter: 24px; --dash-gap: 16px; }
  .sidebar-header { padding: 20px; }
  .sidebar-menu { padding-inline: 10px; }
  .account-bar { align-items: flex-start; }
  .stat-card { padding: 18px; }
  #metric-charts { grid-template-columns: 1fr 1fr; }
  #metric-charts .stat-card:last-child { grid-column: 1 / -1; }
  .dash-fold > #metric-charts .stat-card:last-child .metric-chart-wrap { height: 150px; min-height: 150px; }
}

/* One predictable drawer on small screens, including a narrow desktop window. */
@media (max-width: 768px) {
  :root { --shell-header-h: 76px; --page-gutter: 20px; --dash-gap: 16px; }
  /* Full-screen drawer that slides in from the right (owner, 2026-10-07: it
     covered just over half the screen). Close with the X, a swipe right, or a pick. */
  .sidebar {
    position: fixed; width: 100vw; min-width: 100vw; right: -100vw; left: auto;
    top: 0; height: 100vh; height: 100dvh; z-index: 200; border-radius: 0; border-left: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
    transition: right .28s var(--ease-out);
  }
  .sidebar.open { right: 0; }
  .sidebar-header { display: flex; align-items: center; justify-content: space-between; }
  /* The drawer is a full-height flex column that scrolls: nothing may shrink
     (the plan card has overflow:hidden and was squashed to a sliver), and on
     phones the plan card comes first, right under the logo (owner, 2026-10-07). */
  .sidebar > * { flex-shrink: 0; }
  .sidebar-header { order: 0; }
  #sidebar-plan-card { order: 1; margin: 4px 18px 8px; }
  .sidebar-menu { order: 2; }
  .sidebar-close {
    display: flex; align-items: center; justify-content: center; flex: none;
    min-width: 44px; min-height: 44px; margin-right: 8px; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-primary); font-size: var(--font-sub); cursor: pointer;
  }
  .sidebar-close:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
  body.menu-open { overflow: hidden; }
  .sidebar-backdrop.open { display: block !important; }
  .mobile-menu-btn { display: flex !important; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
  #dashboard.page { margin-left: 0; border-radius: 0; border-left: none; box-shadow: none; }
  .dashboard-header { flex-direction: row; gap: 12px; padding-block: 16px; }
  .header-left { flex-direction: row; width: auto; justify-content: flex-start; gap: 8px; }
  .header-right { gap: 10px; }
  .user-name { display: none; }
  .user-dropdown-btn { gap: 6px; }
  .dashboard-main { padding-top: 22px; }
  .loading-skel-side { display: none; }
  .account-bar { align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
  .account-tabs { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .account-tab-wrap { flex-shrink: 0; }
  .btn-add-account { margin-left: 0; }
  .pnl-box, .journal-card { padding: 18px; }
  .pnl-box-header { flex-wrap: wrap; gap: 10px; }
  .pnl-box-header h3 { flex: 1; }
  .pnl-smooth-toggle { margin-left: auto; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-fold > .stats-row:not(#metric-charts) .stat-card { min-height: 108px; padding: 18px; }
  .dash-fold > .stats-row:not(#metric-charts) .stat-value { font-size: calc(var(--font-title) * 1.25); }
  #metric-charts { grid-template-columns: 1fr; }
  .dash-fold > #metric-charts .metric-chart-wrap { height: 180px; min-height: 180px; }
  .journal-header .btn-group .btn-small { min-height: 38px; padding: 8px 12px; }
  .trades-pagination { justify-content: space-between; gap: 6px; }
  .trades-pagination .btn-small { padding-inline: 10px; }
  .modal-card { padding: 22px; max-height: 88dvh; overflow-y: auto; }
  .td-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parser-field { flex-wrap: wrap; gap: 6px; }
  .parser-field label { width: 100%; }
  .nb-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  :root { --page-gutter: 14px; --dash-gap: 12px; }
  .header-right { gap: 6px; }
  .workspace-eyebrow { display: none; }
  .stat-card { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Supporting workspaces share the dashboard's surfaces, scale and spacing.
   Keep these rules scoped: report output and the dashboard retain their layouts. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.workspace-intro { margin-bottom: 28px; max-width: 720px; }
.workspace-kicker { display: block; color: var(--accent-violet-text); font-size: var(--font-sm); font-weight: 500; letter-spacing: .04em; margin-bottom: 10px; }
.workspace-intro h3 { font-size: var(--font-title); font-weight: 500; letter-spacing: -.03em; line-height: 1.4; margin: 0 0 8px; }
.workspace-intro p { font-size: var(--font-body); color: var(--text-secondary); line-height: 1.7; max-width: 660px; }
.section-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.section-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--border); border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); font-size: var(--font-sub); font-weight: 500; }
.section-icon-violet { color: var(--accent-violet-text); background: var(--violet-soft); }
.section-caption { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--font-sm); line-height: 1.5; }
.workspace-note { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--field-bg); font-size: var(--font-body); line-height: 1.6; }
.workspace-note-mark { color: var(--accent-text); font-size: var(--font-sub); }
.field-label { display: block; font-size: var(--font-sm); color: var(--text-secondary); font-weight: 500; margin-bottom: 8px; }

/* Connectors: a distinct platform identity and generous, expandable guides. */
.connector-library { max-width: 1120px; }
#view-connectors .connector-guide { padding: 0; margin-bottom: 16px; overflow: hidden; transition: border-color .18s ease; }
#view-connectors .connector-guide:hover { border-color: var(--border-hover); }
#view-connectors .connector-guide-head { min-height: 110px; padding: 24px; gap: 18px; }
.connector-platform-icon { display: inline-flex; flex: 0 0 52px; width: 52px; height: 52px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 14px; font-size: var(--font-title); font-weight: 600; background: var(--field-bg); }
.connector-platform-copy { flex: 1; min-width: 0; }
#view-connectors .connector-guide-title { font-size: var(--font-sub); color: var(--text-primary); font-weight: 500; }
#view-connectors .connector-guide-title::before { display: none; }
.connector-platform-meta { display: block; color: var(--text-muted); font-size: var(--font-sm); margin-top: 6px; }
.connector-guide-hint { font-size: var(--font-sm); color: var(--text-secondary); display: flex; align-items: center; gap: 12px; }
.connector-guide-hint::after { content: "\2304"; display: inline-block; transition: transform .18s ease; }
.connector-guide[open] .connector-guide-hint::after { transform: rotate(180deg); }
#view-connectors .connector-dl { margin-left: 8px; }
#view-connectors .connector-guide-body { padding: 24px; background: var(--bg-secondary); }
#view-connectors .guide-note { margin: 0 0 28px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text-secondary); font-size: var(--font-sm); line-height: 1.8; }
#view-connectors .connector-steps { list-style: none; padding: 0; margin: 0; counter-reset: setup; }
#view-connectors .connector-steps li { counter-increment: setup; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 24px 0 24px 48px; margin: 0; border-top: 1px solid var(--border); }
#view-connectors .connector-steps li::before { content: counter(setup, decimal-leading-zero); position: absolute; left: 0; top: 26px; color: var(--accent-violet-text); font: 500 var(--font-sm) var(--font-mono); }
#view-connectors .step-text { font-size: var(--font-body); line-height: 1.8; overflow-wrap: anywhere; }
#view-connectors .step-img { margin: 0; width: 100%; }
#view-connectors .step-img img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; object-position: top left; border-radius: 6px; }
#view-connectors .connector-guide-body > p:last-child { padding-top: 20px; border-top: 1px solid var(--border); line-height: 1.7; }

/* The report library is separate from the unchanged generated report. */
#report-card.report-library { padding: 0; background: transparent; border: 0; }
#report-card.report-library:hover { transform: none; box-shadow: none; border-color: transparent; }
.report-library .weekly-reports-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dash-gap); margin: 0; }
.report-period-panel { min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.report-period-panel > p { min-height: 52px; line-height: 1.7; }
.report-period-panel .journal-header { margin-bottom: 16px; }
.report-period-panel .weekly-reports-list { gap: 0; }
.report-period-panel .weekly-report-row { display: flex; align-items: center; gap: 12px; padding: 20px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.report-period-panel .weekly-report-row:first-child { border-top: 0; }
.report-period-panel .weekly-report-row:hover { border-color: transparent; background: color-mix(in srgb, var(--bg-card) 70%, var(--bg-secondary)); }
.report-period-panel .weekly-report-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; position: relative; padding-left: 12px; }
.report-period-panel .weekly-report-info .unread-dot { position: absolute; left: 0; top: 10px; width: 5px; height: 5px; margin: 0; }
.report-period-panel .weekly-report-info > .t-body { grid-column: 1 / -1; grid-row: 1; font-weight: 500; line-height: 1.5; }
.report-period-panel .period-chip { padding: 0; background: transparent; font-weight: 500; letter-spacing: 0; }
.report-period-panel .period-chip--month { color: var(--accent-violet-text); }
.report-period-panel .weekly-report-action { max-width: 140px; line-height: 1.6; text-align: right; }
.report-period-panel .weekly-reports-list > p { padding: 24px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); line-height: 1.8; }
.report-period-panel .weekly-reports-pagination { padding-top: 16px; border-top: 1px solid var(--border); }

/* Tags: creation toolbar followed by a responsive category library.
   Badge shapes and category colours remain shared across the app. */
.tags-library .journal-header { margin-bottom: 18px; }
.tags-library .tags-input-row { display: flex; align-items: end; gap: 12px; padding-bottom: 26px; margin: 0; border-bottom: 1px solid var(--border); }
.tag-name-field { flex: 1; min-width: 0; }
.tag-category-field { flex: 0 1 230px; min-width: 0; }
.tags-library .tag-input, .tags-library .tag-category { width: 100%; min-height: 42px; padding: 10px 12px; background: var(--field-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); font: inherit; font-size: var(--font-body); }
.tags-library #tag-add-btn { min-height: 42px; white-space: nowrap; }
.tag-library-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 26px 0 16px; }
.tag-library-heading h3 { font-size: var(--font-body); font-weight: 500; }
.tag-library-heading p { font-size: var(--font-sm); color: var(--text-muted); }
.tags-library .tags-display { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tags-library .tag-group { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); min-width: 0; }
.tags-library .tag-group h4 { margin-bottom: 16px; color: var(--text-secondary); letter-spacing: 0; font-size: var(--font-body); font-weight: 500; }
.tags-library .tag-group-inner { gap: 8px; }
.tags-library .tags-display > .journal-empty { grid-column: 1 / -1; padding: 32px 16px; }
.tags-library .tag-explainer { padding: 20px 0 0; margin-top: 24px; border-top: 1px solid var(--border); }
.tags-library .tag-explainer .t-sm { line-height: 1.8; max-width: 850px; }

/* Notebook: a single writing surface with a quiet page rail. */
#view-notebook .nb-layout { gap: 0; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; grid-template-columns: 250px minmax(0, 1fr); background: var(--bg-card); }
#view-notebook .nb-side { border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 20px 14px; background: var(--bg-secondary); }
#view-notebook .nb-side-head { padding: 0 6px 18px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
#view-notebook .nb-main { border: 0; border-radius: 0; padding: 28px 32px; }
#view-notebook .nb-title-input { padding: 4px 0 18px; }
#view-notebook .nb-toolbar { padding: 10px 0; margin: 0 0 24px; border-top: 1px solid var(--border); }
#view-notebook .nb-editor { min-height: max(380px, 48vh); font-size: var(--font-body); line-height: 1.85; overflow-wrap: anywhere; }
#view-notebook .nb-editor h2 { font-size: var(--font-title); }
#view-notebook .nb-editor h3 { font-size: var(--font-sub); }
#view-notebook .nb-toolbar button, #view-notebook .nb-upload { font-size: var(--font-body); }
#view-notebook .nb-upload { min-height: 34px; }
#view-notebook .nb-status { font-size: var(--font-sm); }
#view-notebook .nb-page-item, #view-tools .nb-page-item { padding: 12px; gap: 6px; }
#view-notebook .nb-page-item.active, #view-tools .nb-page-item.active { background: var(--violet-soft); border-color: color-mix(in srgb, var(--accent-violet-text) 22%, transparent); }
.nb-page-title { overflow-wrap: anywhere; }
.nb-delete { color: var(--text-muted); }
.nb-delete:hover { color: var(--accent-red); }

/* Tools: keep the daily process beside the existing calculator. */
.tools-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: var(--dash-gap); align-items: start; }
.tools-workspace > .journal-card { min-width: 0; margin: 0; }
.checklist-panel .nb-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.checklist-panel .nb-side { padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.checklist-panel .nb-side-head > span { color: var(--text-muted); font-size: var(--font-sm); font-weight: 400; }
.checklist-panel .nb-page-list { flex-direction: row; flex-wrap: wrap; gap: 8px; max-height: 180px; }
.checklist-panel .nb-empty { flex: 1 1 100%; }
.checklist-panel .nb-page-item { flex: 1 1 140px; max-width: 240px; }
.checklist-panel .nb-main { padding: 0; border: 0; background: transparent; }
.checklist-panel .nb-title-input { padding: 4px 0 16px; font-size: var(--font-sub); }
.checklist-panel .cl-add-row { gap: 8px; }
#cl-item-input { min-width: 0; }
#cl-add-btn { flex-shrink: 0; }
.checklist-panel .cl-items { min-height: 140px; }
.checklist-panel .cl-row { padding: 12px; background: var(--bg-secondary); }
.checklist-panel .cl-footer { padding-top: 16px; border-top: 1px solid var(--border); }
.calculator-panel .lc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.calculator-panel .lc-grid > label:first-child, .calculator-panel .lc-grid > label:nth-child(2), .calculator-panel .lc-grid > label:nth-child(5), #lc-pip-custom-wrap { grid-column: 1 / -1; }
.calculator-panel .lc-grid .form-group { margin: 0; }
.calculator-panel .input-connector { min-height: 40px; }
.calculator-panel .lc-result { justify-content: space-between; gap: 16px; padding: 20px; margin-top: 24px; background: var(--violet-soft); border-color: color-mix(in srgb, var(--accent-violet-text) 20%, var(--border)); }
.calculator-panel .lc-result-item { gap: 8px; }
.calculator-panel .lc-result-item:last-child { text-align: right; }
.calculator-panel > p:last-child { line-height: 1.8; padding-top: 8px; }

/* Feedback: a focused form and useful guidance, with unchanged status hooks. */
.feedback-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr); gap: 32px; max-width: 1100px; align-items: start; }
.feedback-form-card { padding: 28px; }
#feedback-body { gap: 0; align-items: stretch; max-width: none; }
#feedback-intro { line-height: 1.7; margin-bottom: 24px; }
#feedback-body textarea { min-height: 240px; padding: 16px; line-height: 1.8; border-radius: var(--radius-sm); resize: vertical; }
#feedback-submit { align-self: flex-start; margin-top: 20px; }
#feedback-error, #feedback-sent { margin-top: 12px; line-height: 1.6; }
#feedback-sent { color: var(--accent-green); }
.workspace-aside { padding: 12px 0; }
.workspace-aside > h3 { font-size: var(--font-sub); font-weight: 500; margin: 18px 0 24px; }
.aside-topic { margin-bottom: 24px; }
.aside-topic h4 { font-size: var(--font-body); font-weight: 500; margin-bottom: 8px; }
.aside-topic p, .aside-footnote { font-size: var(--font-sm); line-height: 1.85; color: var(--text-muted); }
.aside-footnote { border-top: 1px solid var(--border); padding-top: 20px; }

@media (max-width: 1200px) {
  .report-library .weekly-reports-section { grid-template-columns: minmax(0, 1fr); }
  .report-period-panel > p { min-height: 0; }
  .tags-library .tags-display { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-workspace { grid-template-columns: minmax(0, 1fr); }
  .checklist-panel .cl-items { min-height: 80px; }
}
@media (max-width: 768px) {
  .workspace-intro { margin-bottom: 24px; }
  .workspace-note { align-items: flex-start; padding: 14px; }
  #view-connectors .connector-guide-head { padding: 18px; gap: 12px; flex-wrap: wrap; }
  .connector-platform-icon { width: 44px; height: 44px; flex-basis: 44px; }
  .connector-platform-copy { flex-basis: calc(100% - 60px); }
  .connector-guide-hint { margin-right: auto; }
  #view-connectors .connector-dl { margin-left: 0; }
  #view-connectors .connector-guide-body { padding: 18px; }
  #view-connectors .connector-steps li { grid-template-columns: minmax(0, 1fr); padding-left: 32px; gap: 16px; }
  .report-period-panel { padding: 18px; }
  .report-period-panel .weekly-report-row { flex-wrap: wrap; }
  .report-period-panel .weekly-report-action { max-width: none; }
  .tags-library .tags-input-row { flex-wrap: wrap; }
  .tag-name-field { flex-basis: 100%; }
  .tag-category-field { flex: 1; }
  .tags-library .tags-display { grid-template-columns: minmax(0, 1fr); }
  .tags-library .tag-group { padding: 16px; }
  #view-notebook .nb-layout { grid-template-columns: minmax(0, 1fr); }
  #view-notebook .nb-side { border-right: 0; border-bottom: 1px solid var(--border); }
  #view-notebook .nb-page-list { max-height: 180px; }
  #view-notebook .nb-main { padding: 20px; }
  #view-notebook .nb-editor { min-height: 360px; }
  #view-notebook .nb-toolbar { gap: 4px; }
  #view-notebook .nb-toolbar button { padding-inline: 8px; }
  .feedback-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .feedback-form-card { padding: 20px; }
  #feedback-body textarea { min-height: 200px; }
  #feedback-submit { align-self: stretch; }
  .workspace-aside { padding: 12px 4px; }
}
/* Dashboard connectors: the row always fills the width, and each module carries
   the same platform identity as the Connectors page. */
.connector-grid { gap: var(--dash-gap); }
@media (min-width: 769px) {
  /* One column per child, so 1-4 modules always span the full row.
     ":last-child:nth-child(N)" matches only when there are exactly N children. */
  .connector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .connector-grid:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connector-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connector-grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 1fr); }
}
#connectors-heading { font-size: var(--font-body); font-weight: 500; letter-spacing: 0; color: var(--text-secondary); margin-bottom: 12px; }
#connector-grid .connector-module { min-width: 0; padding: 20px; gap: 14px; }
#connector-grid .connector-module-head { align-items: flex-start; gap: 12px; }
#connector-grid .connector-platform-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; font-size: var(--font-sub); }
#connector-grid .connector-platform-copy { flex: 1; min-width: 0; }
.connector-module-title { display: block; font-size: var(--font-body); font-weight: 500; color: var(--text-primary); overflow-wrap: anywhere; }
#connector-grid .connector-platform-meta { margin-top: 3px; }
#connector-grid .connector-module-actions { margin-top: 2px; }
#connector-grid .connector-module-since { display: flex; align-items: center; gap: 8px; min-height: 0; line-height: 1.5; }
#connector-grid .connector-module-since::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
#connector-grid .connector-module-since.is-live::before { background: var(--accent-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-green) 16%, transparent); }
#connector-grid .connector-dl { margin-top: auto; align-self: flex-start; text-decoration: none; }
#connector-grid .connector-lock { align-self: flex-start; color: var(--text-muted); }

/* The add tile is a normal cell now; its look used to be inline style on the element. */
.add-connector-module {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  min-height: 132px; cursor: pointer; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: transparent; transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.add-connector-plus { font-size: var(--font-sub); font-weight: 400; }

@media (max-width: 768px) {
  #connector-grid .connector-module { padding: 16px; }
  #connector-grid .connector-platform-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .add-connector-module { min-height: 96px; }
}

/* Small dialogs: .modal-sm was markup-only with no rule anywhere, so the nine
   dialogs using it rendered at the cramped base .modal-card size. Give them
   room to breathe. #pro-modal keeps its own deliberate 380px sizing via its
   id-scoped rule, which outranks this. */
.modal-card.modal-sm { max-width: 560px; padding: 34px 32px 30px; }
.modal-card.modal-sm h3 { margin-bottom: 16px; }
.modal-card.modal-sm .form-group { gap: 8px; }
.modal-card.modal-sm .modal-actions { margin-top: 26px; gap: 12px; }

@media (max-width: 768px) {
  .modal-card.modal-sm { max-width: 92vw; padding: 24px 22px 22px; }
  .modal-card.modal-sm .modal-actions { margin-top: 20px; }
}

/* ── Guided tour (public/tour.js; docs/roadmap/GUIDED-TOUR-SPEC.md §4) ──────
   z-index 1000 sits above modals (100), toasts (200) and the mobile sidebar
   (200). The import toast and the cookie consent banner share .import-toast
   and are lifted ABOVE the tour: results must stay readable, and a consent
   choice can never be blocked.
   Every state change is an opacity/geometry transition - nothing toggles
   display - so moving between steps glides instead of snapping. */
:root {
  /* Two-level dim (round 3): outer x inner ~= .86 on the page, inner alone
     (~.45) on the card or modal the target lives in, so the user can still see
     WHERE the button is while everything else recedes. --tour-dim is the
     combined value, used by the full-screen veil on no-target steps. */
  /* Halved (owner, 2026-10-13: too dark in dark mode); the same as phones now. */
  --tour-dim-outer: rgba(4, 6, 12, 0.375); --tour-dim-inner: rgba(4, 6, 12, 0.225); --tour-dim: rgba(4, 6, 12, 0.43);
  --tour-ease: cubic-bezier(.2, .8, .2, 1);
  /* Every duration x1.7 (owner: "70% slower"); mirrors SLOW in tour.js. */
  --tour-t-move: .54s; --tour-t-coach: .51s; --tour-t-fade: .43s;
  --tour-t-swap-out: .2s; --tour-t-swap-in: .31s; --tour-t-fill: .77s; --tour-t-glow: 3.4s;
}
:root[data-theme="light"] { --tour-dim-outer: rgba(10, 12, 20, 0.65); --tour-dim-inner: rgba(10, 12, 20, 0.35); --tour-dim: rgba(10, 12, 20, 0.77); }
body.tour-on .import-toast { z-index: 1002; }
/* The user cannot scroll the page out from under the spotlight: a wheel over
   the lit Import button used to scroll it off-screen. Programmatic scrolling
   of an overflow:hidden element still works, so the engine scrolls for them.
   scrollbar-gutter:stable on .dash-main means no layout shift. */
body.tour-on .dash-main { overflow: hidden; }
/* A step with scroll:true (the tour's explore step) lets the page scroll again. */
body.tour-on.tour-scroll .dash-main { overflow-y: auto; }
/* A break-even calendar day: traded, neither green nor red. */
.cal-pnl.pnl-flat { color: var(--text-secondary); }

.tour-root { position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity var(--tour-t-fade) var(--tour-ease); }
.tour-root.tour-in { opacity: 1; }
.tour-root.tour-out, .tour-root.tour-out * { pointer-events: none !important; }
.tour-root.tour-paused { opacity: 0; }
.tour-root.tour-paused .tour-block, .tour-root.tour-paused .tour-coach { pointer-events: none; }
.tour-block { position: fixed; pointer-events: auto; background: transparent; }

.tour-hole {
  position: fixed; pointer-events: none; border-radius: 8px;
  box-shadow: 0 0 0 200vmax var(--tour-dim-inner);
  transition: left var(--tour-t-move) var(--tour-ease), top var(--tour-t-move) var(--tour-ease), width var(--tour-t-move) var(--tour-ease),
              height var(--tour-t-move) var(--tour-ease), border-radius var(--tour-t-move) var(--tour-ease), opacity var(--tour-t-fade) var(--tour-ease);
}
.tour-ctx {
  position: fixed; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 200vmax var(--tour-dim-outer);
  transition: left var(--tour-t-move) var(--tour-ease), top var(--tour-t-move) var(--tour-ease), width var(--tour-t-move) var(--tour-ease),
              height var(--tour-t-move) var(--tour-ease), border-radius var(--tour-t-move) var(--tour-ease), opacity var(--tour-t-fade) var(--tour-ease);
}
/* Outline + glow. Separate from the hole so only THIS animates (opacity), never
   the 200vmax dimming shadow. */
.tour-ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent); }
.tour-ring::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 12px 3px var(--accent), 0 0 28px 6px var(--accent-soft);
  opacity: .35; animation: tour-glow var(--tour-t-glow) ease-in-out infinite;
}
@keyframes tour-glow { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }

.tour-veil { position: fixed; inset: 0; pointer-events: none; background: var(--tour-dim); opacity: 0; transition: opacity var(--tour-t-fade) var(--tour-ease); }
.tour-root.tour-nohole .tour-veil { opacity: 1; }
.tour-root.tour-nohole .tour-hole, .tour-root.tour-nohole .tour-ctx { opacity: 0; }

.tour-coach {
  position: fixed; left: 0; top: 0; pointer-events: auto; width: 340px; max-width: calc(100vw - 32px);
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; color: var(--text-primary);
  transition: left var(--tour-t-coach) var(--tour-ease), top var(--tour-t-coach) var(--tour-ease);
}
.tour-coach.tour-noanim { transition: none; }
.tour-coach.tour-sheet { max-width: none; }
.tour-inner { display: flex; flex-direction: column; gap: 8px; transition: opacity var(--tour-t-swap-in) ease, transform var(--tour-t-swap-in) var(--tour-ease); }
.tour-coach.tour-swap .tour-inner { opacity: 0; transform: translateY(6px); transition-duration: var(--tour-t-swap-out); pointer-events: none; }
.tour-bar { display: flex; gap: 4px; }
.tour-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.tour-seg-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--tour-t-fill) var(--tour-ease); }
.tour-seg-fill.on { width: 100%; }
.tour-live { display: flex; flex-direction: column; gap: 4px; }
.tour-link { align-self: flex-start; }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.tour-actions button { transition: opacity .15s ease; }
.tour-actions button:disabled { opacity: .45; cursor: not-allowed; }
.tour-spinner { margin: 6px 0 0; }
.tour-coach.tour-pulse { animation: tour-pulse .45s var(--tour-ease); }
@keyframes tour-pulse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.tour-root.tour-still .tour-hole, .tour-root.tour-still .tour-ctx, .tour-root.tour-still .tour-coach, .tour-root.tour-still .tour-inner,
.tour-root.tour-still .tour-veil, .tour-root.tour-still .tour-seg-fill { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tour-root { transition: none; }
  .tour-ring::after { animation: none; opacity: .5; }
  .tour-coach.tour-pulse { animation: none; outline: 2px solid var(--accent); }
}

/* ── Sample-data walkthrough badge (guided tour, sample path) ───────────────
   Informational only: it never takes a click, and it sits ABOVE the tour's dim
   (like toasts) so "nothing here is saved" stays readable through steps 3-4.
   Bottom-left, clear of the step card (which anchors to the lit element) and,
   on a phone, top-left, clear of the bottom sheet. */
.demo-bar {
  position: fixed; left: 16px; bottom: 16px; z-index: 150; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius-full, 999px);
  box-shadow: var(--shadow), 0 0 22px var(--accent-soft); padding: 8px 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--tour-t-fade) var(--tour-ease), transform var(--tour-t-fade) var(--tour-ease);
}
body.tour-on .demo-bar { z-index: 1002; }
.demo-bar.demo-bar-in { opacity: 1; transform: none; }
.demo-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: tour-glow var(--tour-t-glow) ease-in-out infinite; }
@media (max-width: 640px) { .demo-bar { bottom: auto; top: 16px; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .demo-bar { transition: none; } .demo-bar-dot { animation: none; } }
.demo-done-copy { margin: 8px 0 16px; }
.demo-done-actions { display: flex; flex-direction: column; gap: 10px; }
/* Onboarding phase 1 (2026-10-08): the method chooser on #demo-done-modal. */
.method-done { margin: 0 0 10px; color: var(--accent-green); }
.method-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.method-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
  transition: border-color var(--tour-t-fade) var(--tour-ease), background var(--tour-t-fade) var(--tour-ease);
}
.method-opt:hover, .method-opt:focus-visible { border-color: var(--accent); }
.method-ico { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.method-opt.is-done .method-ico { color: var(--accent-green); background: color-mix(in srgb, var(--accent-green) 12%, transparent); }
.method-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.method-tag { margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-full); background: var(--accent-violet); color: var(--violet-ink); font-weight: 600; white-space: nowrap; }
.method-tag:empty { display: none; }
.method-state { color: var(--accent-green); white-space: nowrap; }
.method-opt.is-done { border-color: var(--border); opacity: .8; }
.ready-card p { margin: 8px 0 18px; }
.ready-card .ready-checkin { margin-top: -6px; color: var(--text-primary); }

/* Daily check-in (onboarding phase 2): the dashboard tile under the account
   tabs. Redesigned 2026-10-08 (owner: "clear what level, what their
   progression"; no emoji here). Reading order: streak -> this week -> level ->
   action. Only THIS week's dots: a month grid beside the P&L calendar read as
   trading data, and the streak rule is weekly. */
.progress-tile {
  position: relative; overflow: hidden;
  margin: 0 0 16px; padding: 14px 20px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
}
.pt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.pt-title { color: var(--text-secondary); letter-spacing: .02em; }
.pt-help-btn { background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.pt-help-btn:hover { color: var(--text-primary); }
.pt-help { margin: -2px 0 12px; max-width: 640px; color: var(--text-secondary); line-height: 1.5; }
.pt-body { display: grid; grid-template-columns: minmax(130px, auto) auto minmax(220px, 1fr) auto; align-items: center; gap: 28px; }
.pt-label { display: block; margin: 0 0 6px; color: var(--text-muted); }

.pt-streak-row { display: flex; align-items: baseline; gap: 8px; }
.pt-streak-num { display: inline-block; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.progress-tile.has-streak .pt-streak-num { background: linear-gradient(120deg, #f59e0b, #f472b6 60%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-streak-unit { color: var(--text-primary); font-weight: 600; }
.pt-streak-sub { display: block; margin-top: 6px; color: var(--text-muted); }
.progress-tile.is-reset .pt-streak-sub { color: var(--text-secondary); }

.pt-week { display: flex; gap: 8px; }
.pt-wd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pt-wd-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); background: transparent; box-sizing: border-box; }
.pt-wd-l { font-size: 11px; line-height: 1; color: var(--text-muted); font-weight: 600; }
.pt-wd.is-weekend .pt-wd-dot { border-style: dashed; }
.pt-wd.is-future .pt-wd-dot { opacity: .45; }
.pt-wd.is-pre .pt-wd-dot { opacity: .25; }
.pt-wd.is-pre .pt-wd-l { opacity: .5; }
.pt-wd.is-missed .pt-wd-dot { border-color: var(--text-muted); }
.pt-wd.is-today .pt-wd-dot { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); }
.pt-wd.is-today .pt-wd-l { color: var(--text-primary); }
.pt-wd.is-done .pt-wd-dot { border: 0; background: linear-gradient(135deg, #f59e0b, #f472b6 55%, #8b5cf6); opacity: 1; }

.pt-level-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.pt-level-name { font-weight: 600; color: var(--text-primary); }
.pt-xp { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-bar { height: 8px; border-radius: var(--radius-full); background: var(--bg-secondary); overflow: hidden; }
.pt-bar-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #8b5cf6 55%, #f472b6); transition: width 1s cubic-bezier(.2, .9, .25, 1); }
.pt-bar-label { display: block; margin-top: 6px; color: var(--text-muted); }

.pt-action { display: flex; align-items: center; justify-content: flex-end; min-width: 150px; }
.pt-checkin-btn { padding: 10px 22px; box-shadow: 0 6px 18px rgba(139, 92, 246, .3); }
.pt-done { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-green); }
.pt-done > span { display: flex; flex-direction: column; }
.pt-done-src { color: var(--text-muted); }
.pt-done-src:empty { display: none; }
.pt-done-ico { flex: 0 0 auto; }

@media (max-width: 1100px) {
  .pt-body { grid-template-columns: auto auto 1fr; }
  .pt-level { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .progress-tile { padding: 12px 14px 14px; }
  .pt-body { grid-template-columns: 1fr auto; gap: 14px; }
  .pt-streak { grid-column: 1; grid-row: 1; }
  .pt-action { grid-column: 2; grid-row: 1; min-width: 0; }
  .pt-week-wrap { grid-column: 1 / -1; grid-row: 2; }
  .pt-week { justify-content: space-between; }
  .pt-level { grid-column: 1 / -1; grid-row: 3; }
  .pt-streak-num { font-size: 30px; }
}
/* ── The check-in modal: built to feel good (owner, 2026-10-08: "super dopamine,
   super satisfying, smooth, beautiful"). Flame orb, count-ups, confetti
   (app.js ciConfetti), a level-up card. prefers-reduced-motion: no motion. ── */
.checkin-card { position: relative; overflow: hidden; text-align: center; padding-top: 30px; isolation: isolate; }
.ci-glow {
  /* Inside the card's width: a glow wider than the card made it scroll sideways (iOS, 2026-10-09). */
  position: absolute; top: -110px; left: 0; right: 0; height: 260px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .32), rgba(34, 211, 238, .12) 55%, transparent 75%);
  filter: blur(8px); opacity: .8; transition: opacity .6s ease, transform .8s ease;
}
#checkin-modal.ci-is-done .ci-glow { opacity: 1; transform: scale(1.15); }
#checkin-modal.ci-levelup .ci-glow { background: radial-gradient(closest-side, rgba(251, 191, 36, .38), rgba(139, 92, 246, .2) 55%, transparent 75%); }
#checkin-modal:not(.hidden) .modal-card { animation: ci-card-in .55s cubic-bezier(.2, 1.3, .35, 1) both; }
@keyframes ci-card-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }

/* The Dusk corner logo, top right (as on the Pro paywall and plan card). */
.checkin-card::after {
  content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 125px; z-index: -1; pointer-events: none;
  background: url('logo-icon-corner-sm.png') top right / contain no-repeat;
}
.ci-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 6px; }
.ci-orb { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.ci-orb-core {
  position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 38%, #db2777 72%, #7c3aed);
  box-shadow: 0 0 28px rgba(245, 158, 11, .55), 0 0 60px rgba(139, 92, 246, .45), inset 0 -6px 14px rgba(0, 0, 0, .25);
  animation: ci-breathe 2.6s ease-in-out infinite;
}
.ci-flame { position: relative; font-size: 38px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); animation: ci-flicker 1.4s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes ci-breathe { 0%, 100% { transform: scale(1); filter: saturate(1); } 50% { transform: scale(1.06); filter: saturate(1.25); } }
@keyframes ci-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 25% { transform: scale(1.07, .96) rotate(2deg); } 50% { transform: scale(.96, 1.06) rotate(-1deg); } 75% { transform: scale(1.04) rotate(1.5deg); } }
/* Charging: the tap was felt, the server is answering. */
#checkin-modal.ci-charging .ci-orb-core { animation: ci-charge .45s ease-in-out infinite alternate; }
@keyframes ci-charge { from { transform: scale(1.02); } to { transform: scale(1.14); box-shadow: 0 0 40px rgba(245, 158, 11, .8), 0 0 90px rgba(139, 92, 246, .6); } }
/* The burst. */
#checkin-modal.ci-celebrate .ci-orb { animation: ci-orb-pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
#checkin-modal.ci-celebrate .ci-orb::before, #checkin-modal.ci-celebrate .ci-orb::after {
  content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 3px solid rgba(251, 191, 36, .85);
  animation: ci-wave .9s cubic-bezier(.15, .7, .3, 1) both; pointer-events: none;
}
#checkin-modal.ci-celebrate .ci-orb::after { border-color: rgba(34, 211, 238, .8); animation-delay: .12s; }
@keyframes ci-orb-pop { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 60% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes ci-wave { from { transform: scale(.7); opacity: 1; } to { transform: scale(2.6); opacity: 0; border-width: 1px; } }

.ci-streak { display: flex; align-items: baseline; gap: 6px; }
.ci-streak-num {
  font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #fde68a, #f59e0b 35%, #f472b6 65%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
.ci-streak-lbl { font-size: var(--font-sm, 13px); color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.ci-bump { animation: ci-bump .5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes ci-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.checkin-card h3 { margin: 4px 0 4px; font-size: 22px; letter-spacing: -.3px; }
.checkin-card #ci-body { margin: 0 0 12px; }
.ci-xp-row { margin: 0 0 14px; }
.ci-xp {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(110deg, rgba(34, 211, 238, .25), rgba(139, 92, 246, .35));
  border: 1px solid rgba(167, 139, 250, .55); box-shadow: 0 0 18px rgba(139, 92, 246, .35);
  animation: ci-chip 2.4s ease-in-out infinite;
}
.ci-xp.is-double { background: linear-gradient(110deg, rgba(251, 191, 36, .35), rgba(244, 114, 182, .35)); border-color: rgba(251, 191, 36, .7); box-shadow: 0 0 20px rgba(251, 191, 36, .4); }
.ci-xp.is-double::after { content: '2×'; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
@keyframes ci-chip { 0%, 100% { box-shadow: 0 0 14px rgba(139, 92, 246, .3); } 50% { box-shadow: 0 0 26px rgba(139, 92, 246, .55); } }

.ci-week { display: flex; justify-content: center; gap: 10px; margin: 0 0 16px; }
.ci-wd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ci-wd-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg-secondary); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ci-wd-l { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ci-wd.is-weekend .ci-wd-dot { border-style: dashed; opacity: .7; }
.ci-wd.is-future .ci-wd-dot { opacity: .4; }
.ci-wd.is-today .ci-wd-dot { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.ci-wd.is-today .ci-wd-l { color: #f59e0b; }
.ci-wd.is-done .ci-wd-dot { border-color: transparent; background: linear-gradient(135deg, #f59e0b, #f472b6 55%, #8b5cf6); box-shadow: 0 0 12px rgba(244, 114, 182, .45); opacity: 1; border-style: solid; }
.ci-wd.ci-pop .ci-wd-dot { animation: ci-dot-pop .6s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes ci-dot-pop { 0% { transform: scale(.3); } 55% { transform: scale(1.45); } 100% { transform: scale(1); } }

.ci-progress { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 16px; }
.ci-bar { position: relative; height: 12px; border-radius: 999px; background: var(--bg-secondary); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.ci-bar-fill {
  position: relative; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #8b5cf6 55%, #f472b6);
  box-shadow: 0 0 14px rgba(139, 92, 246, .6);
  transition: width 1.05s cubic-bezier(.2, .9, .25, 1);
}
.ci-bar-fill::after { /* the glowing tip */
  content: ''; position: absolute; right: -2px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px 4px rgba(255, 255, 255, .7), 0 0 24px 8px rgba(244, 114, 182, .5);
}
.ci-bar-fill::before { /* a sheen that runs along it */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 45%, transparent 70%);
  background-size: 220% 100%; animation: ci-sheen 2.2s linear infinite;
}
@keyframes ci-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ci-bar-label { font-variant-numeric: tabular-nums; }

.ci-badge {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; text-align: left;
  margin: 0 0 16px; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(251, 191, 36, .2), rgba(139, 92, 246, .25));
  border: 1px solid rgba(251, 191, 36, .6); box-shadow: 0 0 30px rgba(251, 191, 36, .3);
}
.ci-badge-icon { font-size: 36px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(251, 191, 36, .5)); }
.ci-badge-text { display: flex; flex-direction: column; }
.ci-badge-kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fbbf24; }
.ci-badge-name { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.ci-badge-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 48%, transparent 66%); transform: translateX(-120%); }
.ci-badge.ci-badge-in { animation: ci-badge-in .7s cubic-bezier(.2, 1.5, .35, 1) both; }
.ci-badge.ci-badge-in .ci-badge-icon { animation: ci-badge-spin .9s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
.ci-badge.ci-badge-in .ci-badge-shine { animation: ci-shine 1.1s ease .45s both; }
@keyframes ci-badge-in { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ci-badge-spin { from { transform: scale(0) rotate(-200deg); } to { transform: scale(1) rotate(0); } }
@keyframes ci-shine { to { transform: translateX(120%); } }

.checkin-card .optin-row { text-align: left; margin: 0 0 14px; }
.ci-hour { font: inherit; padding: 1px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-primary); }
.ci-go { position: relative; overflow: hidden; padding-top: 14px; padding-bottom: 14px; font-size: 16px; font-weight: 700; transition: transform .15s ease, box-shadow .2s ease; box-shadow: 0 8px 24px rgba(139, 92, 246, .35); }
.ci-go:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(139, 92, 246, .5); }
.ci-go:active { transform: scale(.97); }
.ci-go-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); animation: ci-go-shine 2.8s ease-in-out 1s infinite; pointer-events: none; }
@keyframes ci-go-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
#checkin-modal.ci-charging .ci-go { opacity: .85; }
.ci-later { display: block; margin: 10px auto 0; border-bottom: none; }
/* The done screen's content arrives in a stagger. */
#checkin-modal.ci-celebrate .ci-progress, #checkin-modal.ci-celebrate #ci-remind, #checkin-modal.ci-celebrate .ci-go { animation: ci-rise .5s ease both; }
#checkin-modal.ci-celebrate .ci-progress { animation-delay: .15s; }
#checkin-modal.ci-celebrate #ci-remind { animation-delay: .5s; }
#checkin-modal.ci-celebrate .ci-go { animation-delay: .7s; }
#checkin-modal.ci-celebrate #ci-title { animation: ci-rise .45s ease both; }
@keyframes ci-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Confetti canvas, "+N XP" floater, the pill for check-ins by trade/import. */
.ci-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2000; }
.ci-float {
  position: fixed; z-index: 2001; pointer-events: none; transform: translate(-50%, 0);
  font-weight: 800; font-size: 22px; color: #fde68a; text-shadow: 0 0 12px rgba(245, 158, 11, .8), 0 2px 0 rgba(0, 0, 0, .3);
  animation: ci-float 1.3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes ci-float { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
.ci-pill {
  position: fixed; left: 50%; top: 18px; z-index: 1500; transform: translate(-50%, -140%);
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(110deg, rgba(24, 24, 40, .96), rgba(40, 24, 60, .96)); color: #fff;
  border: 1px solid rgba(167, 139, 250, .6); box-shadow: 0 10px 34px rgba(139, 92, 246, .45);
  transition: transform .55s cubic-bezier(.2, 1.4, .35, 1); font-size: 14px; white-space: nowrap;
}
.ci-pill.is-in { transform: translate(-50%, 0); }
.ci-pill-flame { font-size: 20px; animation: ci-flicker 1.4s ease-in-out infinite; }
.ci-pill-sub { color: rgba(255, 255, 255, .65); font-size: 12px; }

/* The tile when a check-in lands: a soft ring and the streak number bumps. */
.progress-tile.pt-pulse { animation: pt-pulse 1s ease; }
@keyframes pt-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); } 70% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); } 100% { box-shadow: none; } }

@media (prefers-reduced-motion: reduce) {
  .pt-bar-fill, .ci-bar-fill { transition: none; }
  .ci-orb-core, .ci-flame, .ci-xp, .ci-go-shine, .ci-bar-fill::before, .ci-pill-flame,
  #checkin-modal:not(.hidden) .modal-card, #checkin-modal.ci-celebrate *, #checkin-modal.ci-celebrate .ci-orb::before, #checkin-modal.ci-celebrate .ci-orb::after,
  .ci-badge.ci-badge-in, .ci-badge.ci-badge-in *, .ci-wd.ci-pop .ci-wd-dot, .ci-bump, .progress-tile.pt-pulse { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .method-opt { transition: none; } }

/* Review best/worst day: P&L first and coloured, the date beneath it. */
.review-day { display: flex; flex-direction: column; gap: 2px; }
.review-day-pnl { font-size: var(--font-sub); }
/* "Later" on the tutorial-done modal: a soft glow on hover, not an underline
   spanning the whole row. */
.demo-done-actions .link-btn { align-self: center; border-bottom: none; transition: text-shadow var(--tour-t-fade) var(--tour-ease), color var(--tour-t-fade) var(--tour-ease); }
.demo-done-actions .link-btn:hover { border-bottom: none; text-decoration: none; color: var(--accent); text-shadow: 0 0 10px var(--accent), 0 0 18px var(--accent-soft); }

/* ── Intro video (public/intro.js; ob4) ─────────────────────────────────────
   Above the tour (1000): an opaque layer over the whole viewport, so the view
   is locked to the video whether or not the browser is in full screen. The
   cookie banner (.import-toast) is lifted above it: a consent choice is never
   blocked. */
body.intro-on { overflow: hidden; }
body.intro-on .import-toast { z-index: 1102; }
/* Opaque from the first frame (no fade-in): a new signup must never glimpse
   the dashboard before the video. Only leaving fades. */
.intro-root { position: fixed; inset: 0; z-index: 1100; background: #000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity var(--tour-t-fade) var(--tour-ease); }
.intro-root.intro-out { opacity: 0; pointer-events: none; }
.intro-video { width: 100%; height: 100%; object-fit: contain; background: #000; transition: opacity var(--tour-t-fade) var(--tour-ease), filter var(--tour-t-fade) var(--tour-ease); }
.intro-root.intro-paused .intro-video { filter: brightness(.55); }
.intro-root.intro-done .intro-video { filter: brightness(.35) blur(2px); }
.intro-root.intro-failed .intro-video { opacity: 0; }

.intro-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 34px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 12, 20, .62); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--tour-t-fade) var(--tour-ease), transform var(--tour-t-fade) var(--tour-ease), box-shadow var(--tour-t-fade) var(--tour-ease); }
.intro-root.intro-paused .intro-play { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.intro-play:hover, .intro-play:focus-visible { box-shadow: 0 0 0 1px var(--accent), 0 0 28px var(--accent-soft); outline: none; }
.intro-play-icon { display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; }
.intro-play-len { color: rgba(255, 255, 255, .7); }

.intro-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .12); pointer-events: none; transition: opacity var(--tour-t-fade) var(--tour-ease); }
.intro-bar-fill { height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .25s linear; }
.intro-root.intro-done .intro-bar { opacity: 0; }

.intro-mute { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 12, 20, .55); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--tour-t-fade) var(--tour-ease); }
.intro-root.intro-playing .intro-mute, .intro-root.intro-paused.intro-playing .intro-mute { opacity: .8; pointer-events: auto; }
.intro-mute:hover, .intro-mute:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 16px var(--accent-soft); }

.intro-end { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 12px)); display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 16px; text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--tour-t-coach) var(--tour-ease), transform var(--tour-t-coach) var(--tour-ease); }
.intro-root.intro-done .intro-end { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); transition-delay: .15s; }
.intro-end-title { margin: 0; color: #fff; }
.intro-end-sub { margin: -10px 0 0; color: rgba(255, 255, 255, .78); max-width: 420px; }
.intro-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.intro-actions button { min-width: 180px; padding: 12px 22px; }
/* Upgrade: the brand gradient (--btn-fill, cyan to violet), never amber/gold. */
.intro-root .intro-actions .intro-upgrade { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border: none; border-radius: var(--radius-sm); background: var(--btn-fill); color: #fff; font-family: var(--font); font-size: var(--font-body); font-weight: 600; cursor: pointer; transition: box-shadow var(--tour-t-fade) var(--tour-ease), filter var(--tour-t-fade) var(--tour-ease); }
.intro-root .intro-actions .intro-upgrade:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 22px rgba(112, 0, 255, .45), 0 0 12px rgba(0, 229, 255, .3); }
.intro-root .intro-actions .intro-upgrade:disabled { opacity: .7; cursor: default; }
.intro-root .intro-pro-badge { padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .22); color: #fff; }

/* Muted autoplay: the one prompt on screen. Brand gradient, gentle pulse. */
/* Centred and large (owner: nobody should miss it). The video dims a touch
   while muted so the prompt reads as the thing to do; the dim clears the
   moment sound comes on. */
.intro-sound { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 44px; border: none; border-radius: 999px; background: var(--btn-fill); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; box-shadow: 0 12px 44px rgba(112, 0, 255, .5); transition: opacity var(--tour-t-fade) var(--tour-ease), transform var(--tour-t-fade) var(--tour-ease); }
.intro-sound-main { display: inline-flex; align-items: center; gap: 12px; }
.intro-sound-sub { color: rgba(255, 255, 255, .8); }
.intro-root.intro-need-sound .intro-sound { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); animation: intro-sound-pulse 2.4s ease-in-out infinite; }
.intro-root.intro-need-sound { cursor: pointer; }
.intro-root.intro-need-sound .intro-video { filter: brightness(.8); }
@keyframes intro-sound-pulse { 0%, 100% { box-shadow: 0 12px 44px rgba(112, 0, 255, .5), 0 0 0 0 rgba(0, 229, 255, .5); } 50% { box-shadow: 0 12px 44px rgba(112, 0, 255, .5), 0 0 0 16px rgba(0, 229, 255, 0); } }

/* A free user's Insights run that spent their last credit: the answer stays,
   this sits under it (app.js showInsightsUpgradeNote). */
.insight-upgrade-note { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 14px 0 4px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(112, 0, 255, .35); background: var(--bg-card); box-shadow: 0 0 22px rgba(112, 0, 255, .12); }
.insight-upgrade-note p { margin: 0; }
.insight-upgrade-note .btn-primary { margin-top: 4px; }

/* Email opt-in stage (intro.js buildOptin, ob5). Sits over the blurred poster
   while the video buffers. The overlay is always dark, so fixed light-on-dark
   colours like the rest of the intro. Boxes are unticked and Continue is
   always enabled - the reward badge does the persuading, not the layout. */
.intro-optin { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.intro-root.intro-optin-on .intro-optin { display: flex; }
.intro-root.intro-optin-on .intro-video { filter: brightness(.35) blur(6px); }
.intro-root.intro-optin-on .intro-bar, .intro-root.intro-optin-on .intro-mute, .intro-root.intro-optin-on .intro-play, .intro-root.intro-optin-on .intro-sound { visibility: hidden; }
.intro-optin-card { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(12, 14, 24, .86); box-shadow: 0 24px 80px rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: intro-optin-in var(--tour-t-coach) var(--tour-ease) both; }
.intro-optin-title { margin: 0 0 2px; text-align: center; color: #fff; }
.intro-optin-reward { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--btn-fill); box-shadow: 0 10px 34px rgba(112, 0, 255, .38); }
.intro-optin-gift { display: flex; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.intro-optin-reward-text { display: flex; flex-direction: column; gap: 2px; }
.intro-optin-reward-text .t-sm { color: rgba(255, 255, 255, .88); }
.intro-opt { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); cursor: pointer; transition: border-color var(--tour-t-fade) var(--tour-ease), background var(--tour-t-fade) var(--tour-ease), box-shadow var(--tour-t-fade) var(--tour-ease); }
.intro-opt:hover { border-color: rgba(255, 255, 255, .3); }
.intro-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.intro-opt-box { display: flex; flex: none; width: 22px; height: 22px; margin-top: 1px; align-items: center; justify-content: center; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .45); color: transparent; transition: background var(--tour-t-fade) var(--tour-ease), border-color var(--tour-t-fade) var(--tour-ease), color var(--tour-t-fade) var(--tour-ease); }
.intro-opt-text { display: flex; flex-direction: column; gap: 2px; }
.intro-opt-text .t-sm { color: rgba(255, 255, 255, .66); }
.intro-opt.is-on { border-color: rgba(0, 229, 255, .55); background: rgba(112, 0, 255, .12); box-shadow: 0 0 0 1px rgba(112, 0, 255, .35), 0 0 22px rgba(0, 229, 255, .12); }
.intro-opt.is-on .intro-opt-box { border-color: transparent; background: var(--btn-fill); color: #fff; }
.intro-opt input:focus-visible + .intro-opt-box { box-shadow: 0 0 0 3px rgba(0, 229, 255, .45); }
.intro-optin-go { margin-top: 4px; padding: 13px 22px; }
.intro-optin-fine { margin: 0; text-align: center; color: rgba(255, 255, 255, .55); }
.intro-optin-fine a { color: rgba(255, 255, 255, .8); text-decoration: underline; }
.intro-credit-pill { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: var(--btn-fill); color: #fff; box-shadow: 0 8px 28px rgba(112, 0, 255, .45); pointer-events: none; animation: intro-pill-in var(--tour-t-coach) var(--tour-ease) both; transition: opacity .5s var(--tour-ease); }
.intro-credit-pill.intro-credit-pill-out { opacity: 0; }
@keyframes intro-optin-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-pill-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .intro-root, .intro-video, .intro-play, .intro-bar-fill, .intro-end, .intro-sound, .intro-optin-card, .intro-opt, .intro-credit-pill { transition: none; animation: none; }
}

/* ── Email opt-in outside the intro (app.js maybeOptinPrompt / openEmailPrefs)
   The one-time card for accounts that predate the intro's opt-in screen, and
   profile menu -> Email preferences. Same wording as the intro; themed with the
   app (light and dark) rather than the intro's always-dark video backdrop. */
.optin-card { display: flex; flex-direction: column; gap: 14px; }
.optin-card h3 { margin: 0; }
.optin-reward { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--btn-fill); color: #fff; }
.optin-reward-icon { font-size: var(--font-title); line-height: 1; }
.optin-reward-text { display: flex; flex-direction: column; gap: 2px; }
.optin-reward-text .t-sm { color: rgba(255, 255, 255, .88); }
.optin-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.optin-row:hover { border-color: var(--text-muted); }
.optin-row input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent, #7000ff); cursor: pointer; }
.optin-row-text { display: flex; flex-direction: column; gap: 2px; }
.optin-row.is-on { border-color: var(--accent, #7000ff); background: var(--accent-soft, rgba(112, 0, 255, .08)); }
.optin-bonus { margin: 0; color: var(--accent-text, var(--text-secondary)); }
.optin-fine { margin: 0; text-align: center; }
.optin-fine a { color: inherit; text-decoration: underline; }
#email-prefs-status:empty { display: none; }
#email-prefs-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0; }

/* ── Boot shield (app.js tourShieldOn/Off) ──────────────────────────────────
   For anyone the tour is about to start for: a dim, click-eating layer from
   BEFORE the dashboard paints until the tour mounts (its own dim takes over;
   z 999 sits just under .tour-root). Nothing is clickable in that gap - a new
   user once opened + Account and the Pro paywall there, before the tour showed.
   The cookie banner stays above it and answerable. */
body::after { content: ''; position: fixed; inset: 0; z-index: 999; background: var(--tour-dim-outer); opacity: 0; pointer-events: none; transition: opacity var(--tour-t-fade) var(--tour-ease); }
body.tour-pending::after { opacity: 1; pointer-events: all; }
body.tour-pending .import-toast { z-index: 1002; }
body.tour-pending .dash-main { overflow: hidden; }

/* Verify page (app.js showVerifyPage): the status line takes no space until it says something. */
#verify-status:empty { display: none; }

/* Help Docs opens the public Help Centre in a new tab; the arrow says so. */
.sidebar-item .sidebar-ext { margin-left: auto; opacity: .55; font-size: .85em; }

/* ── Phones & tablets: no zoom (owner, 2026-09-30) ─────────────────────────
   iOS Safari zooms the page into any focused field under 16px, and it stays
   zoomed - which is what threw the whole onboarding out of line on iPhone
   (26 of 29 inputs were 14px). Touch devices only: a mouse never matches
   (pointer: coarse), so desktop type is unchanged. Double-tap zoom goes via
   touch-action; pinch is blocked in app.js (iOS ignores user-scalable=no). */
@media (pointer: coarse) {
  /* --font-sub is 16px: iOS zooms into any focused field under 16px. Never lower it here. */
  input, textarea, select { font-size: var(--font-sub) !important; }
  html, body { touch-action: manipulation; }
}

/* ── Guided tour on phones (tour.js isMobile(): <= 768px) ────────────────── */
/* Modals leave room for the "Sample trades" bar and the sheet, so a tall form
   keeps its Save / Mark week reviewed button above the sheet and scrolls inside. */
body.tour-on.tour-mobile .modal {
  align-items: flex-start;
  box-sizing: border-box;
  padding: var(--tour-top-h, 16px) 12px var(--tour-sheet-h, 16px);
}
body.tour-on.tour-mobile .modal-card,
body.tour-on.tour-mobile #detail-modal .modal-card,
body.tour-on.tour-mobile #report-modal .modal-card { max-height: 100%; }
/* A tighter sheet: about a quarter of the screen, not a third. */
.tour-coach.tour-sheet { padding: 12px 14px; }
.tour-coach.tour-sheet .tour-inner { gap: 6px; }
.tour-coach.tour-sheet .tour-title { font-size: var(--font-sub); }
.tour-coach.tour-sheet .tour-body { font-size: var(--font-body); line-height: 1.45; }
.tour-coach.tour-sheet .tour-actions { flex-wrap: wrap; }
.tour-coach.tour-sheet .tour-actions .btn-small { min-height: 40px; }
/* Compact (the explore step) and keyboard-up: title + buttons on one row. */
.tour-coach.tour-compact .tour-kicker, .tour-coach.tour-compact .tour-body,
.tour-coach.tour-kb .tour-kicker, .tour-coach.tour-kb .tour-bar, .tour-coach.tour-kb .tour-body { display: none; }
.tour-coach.tour-compact .tour-inner, .tour-coach.tour-kb .tour-inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tour-coach.tour-compact .tour-actions, .tour-coach.tour-kb .tour-actions { margin-top: 0; }
/* Toasts ("Week marked reviewed") rise above the sheet instead of landing on it. */
body.tour-on.tour-mobile .import-toast:not(#tj-consent) { bottom: calc(var(--tour-sheet-h, 16px) + 8px); }
/* The keyboard owns the bottom; the bar would sit on the pinned card. */
body.tour-kb .demo-bar { opacity: 0; pointer-events: none; }
/* Phones: the dim at half strength (owner, 2026-09-30: "too hard to read").
   Same variables, halved alphas; desktop keeps the full dim. */
body.tour-mobile { --tour-dim-outer: rgba(4, 6, 12, 0.375); --tour-dim-inner: rgba(4, 6, 12, 0.225); --tour-dim: rgba(4, 6, 12, 0.43); }
:root[data-theme="light"] body.tour-mobile { --tour-dim-outer: rgba(10, 12, 20, 0.325); --tour-dim-inner: rgba(10, 12, 20, 0.175); --tour-dim: rgba(10, 12, 20, 0.385); }

/* Bell rows that do something when clicked (NOTIF_ACTIONS in app.js). */
.notif-cta { display: inline-block; margin: 4px 0 2px; border-bottom: none; }

/* Floating "+ Add trade" on phones (owner, 2026-10-02): bottom-right, a pill so
   a new user can see what it does. Every view except AI Insights (its question
   box sits at the bottom). Hidden whenever something else owns the screen: any
   popup or the trade form, the tour or its boot shield, the intro, sample data,
   the open menu. Below modals (100) and toasts (200); a showing toast or cookie
   banner lifts it clear. The toolbar "+ Add Trade" stays: the tour targets it. */
.fab-add-trade { display: none; }
@media (max-width: 768px) {
  .fab-add-trade {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90;
    min-height: 48px; padding: 12px 20px 12px 16px; border: 1px solid color-mix(in srgb, var(--accent-violet, #7000ff) 35%, transparent);
    border-radius: 999px; background: var(--btn-fill); color: #fff;
    font: 600 var(--font-body) var(--font); cursor: pointer;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
    transition: transform .2s ease, filter .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .fab-add-trade:active { filter: brightness(1.12); transform: scale(.97); }
  .fab-add-trade:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
  body:has(#view-insights.active) .fab-add-trade,
  body:has(.modal:not(.hidden)) .fab-add-trade,
  body:has(.image-lightbox) .fab-add-trade,
  body:has(.sidebar.open) .fab-add-trade,
  body:has(.demo-bar) .fab-add-trade,
  body.tour-on .fab-add-trade, body.tour-pending .fab-add-trade, body.intro-on .fab-add-trade,
  #dashboard.hidden .fab-add-trade { display: none; }
  body:has(.import-toast:not(.hidden)) .fab-add-trade { transform: translateY(-88px); }
  /* Room to scroll the last row and the pagination clear of it. */
  #dashboard .view:not(#view-insights) > .dashboard-main { padding-bottom: 88px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .fab-add-trade { transition: none; }
}

/* ── 30-day trial (TRIAL-SPEC.md) ─────────────────────────────────── */
.sub-trial { background: var(--violet-soft); color: var(--accent-violet-text); border: 1px solid color-mix(in srgb, var(--accent-violet) 45%, transparent); }
#pro-modal.pro-trial-on .pro-modal-text { margin-bottom: 12px; }
#pro-modal .pro-trial-line { margin: 0 0 20px; color: var(--text-primary); font-size: var(--font-body); font-weight: 600; line-height: 1.5; }
#pro-modal .pro-trial-terms { margin: 0; text-align: center; line-height: 1.5; }
.pro-notrial-link, .plan-manage-link {
  background: none; border: 0; padding: 6px 4px; min-height: 32px; cursor: pointer;
  color: var(--text-muted); font-size: var(--font-sm); text-decoration: underline; text-underline-offset: 3px;
}
.pro-notrial-link:hover, .plan-manage-link:hover { color: var(--text-primary); }
.plan-trial .plan-manage-link { display: block; margin-top: 6px; padding-left: 0; }
.plan-trial-note { margin-top: 8px; line-height: 1.5; }
/* The corner logo (owner, 2026-10-02): top right of the Pro paywall and the sidebar plan card. */
#pro-modal .pro-card, #sidebar-plan-card { position: relative; overflow: hidden; isolation: isolate; }
#pro-modal .pro-card::after, #sidebar-plan-card::after {
  content: ''; position: absolute; top: 0; right: 0; z-index: -1; pointer-events: none;
  background: url('logo-icon-corner-sm.png') top right / contain no-repeat;
}
#pro-modal .pro-card::after { width: 120px; height: 125px; }
#sidebar-plan-card::after { width: 64px; height: 67px; }
.ig-trial { margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent-violet) 30%, var(--border)); background: var(--violet-soft); }
.ig-trial p { margin: 0 0 10px; line-height: 1.5; color: var(--text-primary); }
.welcome-optin { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 0 0 18px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.welcome-optin input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.welcome-optin > span { display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
.welcome-optin.hidden { display: none; }
.plan-issue { border-color: color-mix(in srgb, var(--accent-red) 45%, var(--border)); }
.plan-issue .plan-name { color: var(--accent-red); }
.plan-issue .plan-renew { margin: 4px 0 10px; }

/* Failed-import report (2026-10-02): the cells that could not be read, and the
   consented "send us this file" box. */
.parser-reject-eg { margin: 2px 0 6px; overflow-wrap: anywhere; }
.parser-send { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); background: var(--bg-secondary); }
.parser-send p { margin: 0 0 10px; }
.parser-send-note { display: block; margin-top: 6px; }
/* Import progress and result (2026-10-06): replaces the 5-second toast. */
.import-progress { height: 8px; margin: 14px 0 10px; border-radius: var(--radius-full); background: var(--track); overflow: hidden; }
.import-progress-bar { height: 100%; border-radius: inherit; background: var(--btn-fill); transition: width .3s var(--ease-out); }
.import-result { margin: 12px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); }
.import-result-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: var(--font-body); color: var(--text-secondary); }
.import-result-row + .import-result-row { border-top: 1px solid var(--border); }
.import-result-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.import-result-row.is-ok strong { color: var(--accent-green); }
.import-result-row.is-bad strong { color: var(--accent-red); }
.ig-file-note { margin: 12px 0 0; }

/* ── Time-limited trial offer (2026-10-07) ─────────────────────────
   Owner: FOMO, short and snappy. Violet like the rest of the trial; the
   warning line is amber. No flashing; the clock is the only thing that moves. */
:root { --offer-warn: #f5a524; }
:root[data-theme="light"] { --offer-warn: #b45309; }
.header-center.has-offer { flex: 1 1 auto; justify-content: center; min-width: 0; }
.trial-offer-bar {
  display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 680px;
  padding: 6px 6px 6px 8px; border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--accent-violet) 55%, var(--border));
  background: var(--violet-soft); color: var(--text-primary);
  font-size: var(--font-body); line-height: 1.3;
}
.trial-offer-bar.hidden { display: none; }
.trial-offer-bar .tob-pro {
  flex: none; padding: 3px 9px; border-radius: var(--radius-full); font-size: var(--font-body);
  background: var(--accent-violet); color: var(--violet-ink); letter-spacing: .04em;
}
.trial-offer-bar .tob-lt { flex: none; color: var(--offer-warn); letter-spacing: .04em; white-space: nowrap; }
.trial-offer-bar .tob-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The offer: white text, no pill (owner, 2026-10-07). Light theme falls back to the
   primary text colour, since white on a white card would be invisible. */
.trial-offer-bar .tob-text, .plan-offer-what, #pro-modal .po-offer { color: #fff; font-weight: 600; }
:root[data-theme="light"] .trial-offer-bar .tob-text, :root[data-theme="light"] .plan-offer-what, :root[data-theme="light"] #pro-modal .po-offer { color: var(--text-primary); }
.trial-offer-bar .tob-clock { flex: none; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.trial-offer-bar .tob-go { flex: none; white-space: nowrap; margin-left: auto; font-size: var(--font-body); border-radius: var(--radius-full); }
/* Sidebar plan card: plan, big timer, Claim, then the rest. */
.plan-offer .plan-offer-timer {
  display: flex; align-items: center; margin: 6px 0 10px; font-size: var(--font-sub); font-weight: 700; line-height: 1.1;   /* one step down from --font-title: it overflowed the sidebar */
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.plan-offer .plan-current { margin-bottom: 8px; }
.plan-offer .plan-offer-lt { color: var(--offer-warn); letter-spacing: .04em; }
.plan-offer .plan-offer-what { font-size: var(--font-sub); line-height: 1.3; }
/* The paywall: warning, description, timer, offer, Claim, small print, timeline. */
#pro-modal .pro-offer-box { text-align: center; margin: 0 0 22px; }
#pro-modal .pro-offer-box.hidden, #pro-modal .po-timeline.hidden { display: none; }
#pro-modal .po-warn { margin: 18px 0 6px; color: var(--offer-warn); }
/* Same size as the offer line (30 DAYS OF PRO · FREE), owner 2026-10-07. */
#pro-modal .po-pro { margin: 4px 0 6px; color: var(--text-primary); font-size: var(--font-sub); font-weight: 600; }
#pro-modal .po-desc { margin: 0 0 16px; color: var(--text-secondary); line-height: 1.45; }
/* One step above the scale on purpose (owner, 2026-10-07: the pop-up countdown one
   size up from --font-title, the largest token). Derived from the token, not a literal. */
#pro-modal .po-timer {
  display: flex; justify-content: center; align-items: center;
  font-size: calc(var(--font-title) * 1.4); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
  padding: 6px 0; color: var(--text-primary);
}
/* The offer is always white text, on solid violet so it reads in both themes. */
#pro-modal .po-offer { margin: 0; font-size: var(--font-title); letter-spacing: .03em; line-height: 1.25; }
/* Timers as boxed segments: [60m] : [32s]. */
.tc-seg {
  display: inline-block; padding: .12em .42em; border-radius: 6px; line-height: 1.15;
  border: 1px solid color-mix(in srgb, var(--accent-violet) 45%, var(--border));
  background: var(--bg-card); color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.tc-sep { display: inline-block; margin: 0 .22em; color: var(--text-muted); }
.intro-trial-timer .tc-seg { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.intro-trial-timer .tc-sep { color: rgba(255,255,255,.7); }
#pro-modal.pro-offer-on .pro-trial-terms { margin-top: 2px; }
#pro-modal .po-timeline { list-style: none; margin: 16px 0 0; padding: 0; text-align: left; }
#pro-modal .po-step { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 0 0 10px; color: var(--text-muted); line-height: 1.4; }
#pro-modal .po-step:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 0; width: 2px; background: var(--border); }
#pro-modal .po-dot { flex: none; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-card); }
#pro-modal .po-step.is-on { color: var(--text-primary); font-weight: 600; }
#pro-modal .po-step.is-on .po-dot { border-color: var(--accent-violet); background: var(--accent-violet); box-shadow: 0 0 0 3px var(--violet-soft); }
#pro-modal .po-step.is-done { text-decoration: line-through; opacity: .6; }
#pro-modal .po-step.is-bill .po-dot { border-style: dashed; }
#pro-modal .pro-offer-left { margin: -4px 0 14px; color: var(--text-muted); }
#pro-modal .pro-offer-left.hidden { display: none; }
/* The intro end screen: where the clock starts. */
.intro-trial-offer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -6px; }
.intro-trial-label { color: var(--offer-warn); letter-spacing: .04em; }
.intro-trial-timer { font-size: var(--font-title); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
/* Phones: the bar takes its own row under the title, clear of the + Add trade pill. */
@media (max-width: 768px) {
  .dashboard-header:has(.header-center.has-offer) { flex-wrap: wrap; }
  .header-center.has-offer { order: 3; flex-basis: 100%; }
  .trial-offer-bar { max-width: none; width: 100%; gap: 8px; }
  .trial-offer-bar .tob-text { display: none; }
}
@media (max-width: 420px) {
  .trial-offer-bar .tob-lt { display: none; }
  .trial-offer-bar .tob-go { padding-inline: 10px; }
}

/* The sidebar close button is for the phone drawer only. */
@media (min-width: 769px) { .sidebar-close { display: none; } }
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* Tighter tail under the offer timeline (owner, 2026-10-07). */
#pro-modal.pro-offer-on .pro-notrial-link { margin-top: 2px; }

/* ── Trophy screen and share sheet (2026-10-08) ── */
.pt-head-links { display: inline-flex; gap: 16px; }
.progress-tile .pt-body { cursor: pointer; }
.progress-tile .pt-body:hover .pt-level-name { text-decoration: underline; text-underline-offset: 3px; }
.ci-shelf { margin: 0 0 16px; }
.ci-shelf-head { margin: 0 0 8px; color: var(--text-secondary); font-weight: 600; text-align: left; }
.ci-shelf-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ci-shelf-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-secondary); }
.ci-shelf-icon { font-size: 26px; line-height: 1.1; }
.ci-shelf-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.ci-shelf-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ci-shelf-item.is-earned { border-color: rgba(251, 191, 36, .55); background: linear-gradient(160deg, rgba(251, 191, 36, .14), rgba(139, 92, 246, .14)); }
.ci-shelf-item.is-earned .ci-shelf-sub { color: #fbbf24; }
.ci-shelf-item.is-next { border-color: rgba(167, 139, 250, .6); }
.ci-shelf-item.is-locked .ci-shelf-icon { filter: grayscale(1); opacity: .35; }
.ci-shelf-item.is-locked .ci-shelf-name { color: var(--text-muted); }
.ci-share { margin-top: 10px; }
.share-sheet { max-width: 460px; text-align: center; }
.share-fmt { display: inline-flex; gap: 4px; padding: 4px; margin: 6px 0 14px; border-radius: 999px; background: var(--bg-secondary); }
.share-fmt-btn { padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; }
.share-fmt-btn.is-on { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.share-preview { display: flex; justify-content: center; margin: 0 0 10px; }
.share-preview img { width: 100%; max-width: 380px; aspect-ratio: 1 / 1; border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); background: #0a0f1f; object-fit: contain; }
#share-modal.is-story .share-preview img { max-width: 240px; aspect-ratio: 9 / 16; }
.share-note { margin: 0 0 14px; }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-actions .btn-primary, .share-actions .btn-outline { width: 100%; }
#share-native { grid-column: 1 / -1; }
.share-close { display: block; margin: 12px auto 0; border-bottom: none; }
/* Phones: the sheet must fit (it ran off the bottom on an iPhone 13). */
.share-sheet { max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (max-width: 640px) {
  .share-preview img { max-width: 230px; }
  #share-modal.is-story .share-preview img { max-width: 150px; }
  .share-fmt { margin: 4px 0 10px; }
}
/* Phones (owner, 2026-10-09: on iOS the reminder step did not fit the screen).
   The card scrolls within the viewport, the hero is compact, and the time
   pickers are 16px so iOS never zooms the page when one is tapped. */
.checkin-card { max-height: calc(100dvh - 24px); overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ci-hour, #email-prefs-checkin-hour { font-size: 16px; }
@media (max-width: 640px) {
  .checkin-card { padding: 22px 18px 18px; }
  .ci-orb { width: 72px; height: 72px; }
  .ci-orb-core { inset: 8px; }
  .ci-flame { font-size: 30px; }
  .ci-streak-num { font-size: 36px; }
  .checkin-card h3 { font-size: 20px; }
  .checkin-card #ci-body { margin-bottom: 8px; }
  .ci-xp-row { margin-bottom: 10px; }
  .ci-week { gap: 7px; margin-bottom: 12px; }
  .ci-wd-dot { width: 20px; height: 20px; }
  .ci-progress { margin-bottom: 12px; }
  .checkin-card .optin-row { margin-bottom: 10px; }
  .ci-shelf-row { gap: 5px; }
  .ci-shelf-item { padding: 8px 2px; }
  .ci-shelf-icon { font-size: 22px; }
  .ci-shelf-sub { font-size: 10px; }
  .checkin-card::after { width: 84px; height: 88px; }
}

/* "What stopped you?" after leaving Stripe Checkout (2026-10-11) */
.ck-reason { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 340px; max-width: calc(100vw - 32px); background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; padding: 18px 18px 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); color: var(--text-primary); }
.ck-reason .ck-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }
.ck-reason .ck-title { margin: 0 24px 4px 0; font-weight: 600; font-size: var(--font-md, 15px); }
.ck-reason .ck-sub { margin: 0 0 12px; color: var(--text-secondary); font-size: var(--font-sm, 13px); }
.ck-reason .ck-opts { display: flex; flex-direction: column; gap: 6px; }
.ck-reason .ck-opt { text-align: left; background: var(--field-bg); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 10px 12px; cursor: pointer; font: inherit; min-height: 44px; }
.ck-reason .ck-opt:hover { border-color: var(--border-hover); background: var(--hover-strong); }
.ck-reason textarea { width: 100%; box-sizing: border-box; background: var(--field-bg); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 10px; font: inherit; resize: vertical; margin-bottom: 8px; }
@media (max-width: 600px) { .ck-reason { left: 16px; right: 16px; bottom: 84px; width: auto; } }

/* Header account badge: initials only (2026-10-12) */
.user-name.user-initials { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--field-bg); border: 1px solid var(--border-strong); color: var(--text-primary); font-weight: 600; font-size: 12px; letter-spacing: 0.5px; max-width: none; overflow: visible; }