/* ==========================================================================
   Readability and navigation fixes. Loaded last so it wins on equal specificity.

   The original design set 74% of its type below 12px (33 declarations at 7px).
   Type sizes themselves were rescaled in styles.css; this file handles the
   consequences: containers that would clip the larger text, line spacing,
   letter spacing that hurts at small sizes, and a mobile menu that could not
   show all of its buttons.
   ========================================================================== */

:root { --topbar-h: 82px; }

/* ---------- Rhythm ----------
   The original declared line-height only 4 times, so most text inherited a
   cramped default. Long-form copy needs roughly 1.6 to stay readable. */
body { line-height: 1.6; }
p, li, dd, blockquote, .nl-card p, .nl-step p, .nl-glossary dd { line-height: 1.7; }
h1, h2, h3, h4 { line-height: 1.2; }

/* Reading measure: unbroken lines wider than about 75 characters are hard to
   track back from. */
.nl-sec > header p, .nl-faq details > p, .nl-glossary dd,
.nl-risk-notice, .nl-footer-top .about p { max-width: 72ch; }

/* ---------- Letter spacing ----------
   Wide tracking on uppercase labels reads as texture rather than words once the
   text is small. Tightened, not removed, so the interface keeps its character. */
.eyebrow, .rail-label, .nl-sec .eyebrow, .nl-metrics dt,
.nl-footer-top h4, .nl-share > span { letter-spacing: 1.1px; }
.ticker, .online, .stats span, th, .table-foot { letter-spacing: .6px; }

/* ---------- Containers that would clip the larger type ----------
   These were fixed heights sized around 7px and 8px text. */
.topbar { height: auto; min-height: var(--topbar-h); padding-block: 10px; }
.brand > b { height: auto; min-height: 34px; }
.hero { height: auto; min-height: 520px; }
.profile-editor > #save-profile { height: auto; min-height: 40px; }
.profile-grid select, .profile-fields select, .profile-fields input { height: auto; min-height: 40px; }
.rail { top: var(--topbar-h); height: auto; max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; }

/* Anchor targets must clear the sticky header, or a jump lands under it. */
[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* ---------- Tap targets ----------
   Interactive controls below about 40px are hard to hit accurately on touch. */
.rail nav button, .mood, .quick-actions button, .ranges button,
.filters button, .nl-share button, .nl-faq summary { min-height: 44px; }

/* ---------- Table legibility ---------- */
table { border-collapse: collapse; }
th, td { padding-block: 12px; }
th { white-space: nowrap; }

/* ---------- Mobile menu ----------
   Previously `.rail nav` became a 725px wide flex row (5 buttons at 145px min)
   inside a 375px viewport. It scrolled, but with no affordance the last buttons
   were effectively undiscoverable. A wrapping grid shows all five. */
@media (max-width: 760px) {
  .rail { overflow: visible; max-height: none; margin: 12px 14px; }
  .rail nav {
    display: grid; width: auto;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 6px;
  }
  .rail nav button {
    min-width: 0; border-left: 0; border-top: 2px solid transparent;
    border-radius: 2px; background: #050c0f;
  }
  .rail nav button.active { border-top-color: var(--teal); }
  .rail nav button > small { display: block; }   /* sublabel was hidden */
}

@media (max-width: 520px) {
  .rail nav { grid-template-columns: 1fr 1fr; }
  .nl-sec > header p, .nl-faq details > p { max-width: none; }
}

/* ---------- Motion ----------
   Smooth in-page scrolling for menu and anchor links, disabled for anyone who
   has asked their system to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Empty states ----------
   .panel-empty had no CSS in any stylesheet, so it rendered as a bare <p> with default
   margins. Inside .chart, which is a fixed 300px box, the message overflowed the bottom
   and overlapped the stats grid by about 48px on a phone. */
.panel-empty {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}
/* Centred over the empty chart rather than pushed below it. */
.chart .panel-empty {
  position: absolute;
  inset: 25px 8px 25px 48px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 10px;
  pointer-events: none;
}

/* ---------- Panel headings on narrow screens ----------
   .panel-head is a nowrap flex row. On a phone the title is squeezed until the h2 text
   overflows its own flex item and runs underneath the range/filter buttons beside it.
   min-width:0 lets the title actually wrap, and below 560px the controls drop to their
   own row instead of competing for the same line. */
.panel-head > div:first-child { min-width: 0; }
.panel-head h2 { overflow-wrap: break-word; }
@media (max-width: 560px) {
  /* Let the row wrap only when the control group genuinely needs its own line. Forcing
     the title to 100% pushed even a short "50%" score onto a line of its own, which
     looked orphaned. The wide button groups still wrap; small scores stay inline. */
  .panel-head { flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; }
  .panel-head .ranges, .panel-head .filters { flex: 1 0 100%; }
  .panel-head .mini-score { align-self: center; }
}

/* The rail label sat at 2.67:1 against the panel background, below the 4.5:1 minimum.
   Lifted to 4.83:1, which keeps it recessive without failing the contrast rule. */
.rail-label { color: #6b8189; }
/* A focusable scroll region needs a visible focus ring like anything else. */
.market-wrap:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- Daily protocol checklist ----------
   The grid was 5 columns wide but the checklist has 6 items, so the sixth orphaned onto
   a second row and left four empty cells sitting there as a large dead gap. Six divides
   evenly by 3, 2 and 1, so every breakpoint now uses a column count that fills its rows
   completely. Keep this in mind if a seventh item is ever added. */
.check-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1050px) { .check-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .check-grid { grid-template-columns: 1fr; } }

/* ---------- Hero heading ----------
   The h1 was three short words at up to 100px. It now states what the product is, which
   is far longer, so it needs a smaller step on the display scale to stay at two lines. */
h1 { font-size: clamp(30px, 4.4vw, 60px); line-height: .95; letter-spacing: -2px; }
@media (max-width: 900px) { h1 { font-size: clamp(28px, 6.2vw, 42px); margin-top: 60px; } }

/* ---------- Hero heading ----------
   The h1 was three short words at up to 100px. It now states what the product is, which
   is far longer, so it needs a smaller step on the display scale to stay at two lines. */
h1 { font-size: clamp(30px, 4.4vw, 60px); line-height: .95; letter-spacing: -2px; }
@media (max-width: 900px) { h1 { font-size: clamp(26px, 6vw, 40px); margin-top: 60px; } }

/* ---------- Wordmark ----------
   FREE in white, TRADE in green, LEDGER in red, then a quieter .COM tail so the
   mark reads as the domain. The green and red are the palette's own --teal and
   --red, the same two colours the journal uses for wins and losses, so the mark
   reads as trading semantics rather than arbitrary decoration. TRADE reuses the
   existing `.brand strong` teal rule.
   The class names wm-my and wm-stats are left from an earlier brand on purpose:
   renaming them is churn with no benefit. */
.brand .wm-my    { color: var(--text); }
.brand .wm-stats { color: var(--red); }
.brand .wm-dot   { color: #8aa0a6; }

/* Breakdown panel sits inside the Performance tab, below the equity curve. */
.breakdown-panel { margin-top: 14px; padding: 22px; }
.breakdown-panel table { width: 100%; border-collapse: collapse; }
.breakdown-panel th { text-align: left; color: var(--muted); font: 12.5px var(--mono); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.breakdown-panel td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.breakdown-panel tbody tr:last-child td { border-bottom: 0; }
.breakdown-panel .table-foot { color: var(--muted); font: 12.5px var(--mono); margin: 12px 0 0; }
.breakdown-panel .table-wrap { overflow-x: auto; }
@media (max-width: 560px) { .breakdown-panel { padding: 16px; } }

/* ============================================================================
   MOBILE PASS, 2026-09-03
   Everything below is inside a max-width query, so desktop is untouched.
   Three problems drove it, all confirmed on a real 360 to 430px render:
   1. the hero was a fixed 520px box with the market-session strip absolutely
      positioned inside it, so the session text was clipped by the hero edge,
      and .hero-copy (left:5% with no right bound) ran 8px past a 360px viewport;
   2. every table had `min-width:900px` (1040px for the ledger), so on a phone
      the columns that carry the actual result, change % and R multiple, sat off
      screen behind a horizontal scroll almost nobody discovers;
   3. several controls were under the 44px touch minimum.
   ========================================================================== */

/* ---------- Hero: show the whole picture ----------
   The artwork is a 16:9 composition, bull on the left, bear on the right, city
   between them. `object-fit:cover` in a tall box on a phone kept only the middle
   ~45% of the width, which cropped both animals out and left an unreadable
   fragment. Below 760px the image is shown at its own aspect ratio instead, with
   the copy underneath it on solid ground rather than floated over it. Nothing is
   cropped, and the headline no longer has to fight the picture for contrast. */
@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; display: grid; grid-template-rows: auto auto auto; }
  .hero img { grid-area: 1 / 1; width: 100%; height: auto; min-height: 0;
    aspect-ratio: 1672 / 941; object-fit: cover; object-position: center; display: block; }
  /* The wash now only fades the foot of the picture into the page, so the art
     itself stays at full strength. z-index is load bearing: `.hero img` carries a
     `filter`, which makes it paint in the positioned layer above plain in-flow
     content, so anything meant to sit over it needs a layer of its own. */
  .hero-wash { position: relative; z-index: 1; grid-area: 1 / 1;
    background: linear-gradient(0deg, var(--bg) 1%, rgba(3,7,9,.42) 20%, transparent 50%); }
  .hero-copy { grid-area: 2 / 1; position: static; left: auto; top: auto;
    padding: 18px 20px 22px; max-width: 100%; }
  .hero-copy .eyebrow { font-size: 12.5px; letter-spacing: 1.4px; }
  .hero-copy h1 { font-size: clamp(34px, 10.2vw, 50px); line-height: .94;
    letter-spacing: -1.4px; margin: 12px 0 16px; }
  .hero-copy h1 span { -webkit-text-stroke-width: 1px; }
  .hero-copy button { width: 100%; min-height: 52px; margin-top: 4px; }

  /* The session strip becomes a real band rather than an overlay squeezed into
     the bottom of a fixed height box, where its text was being clipped. */
  .sessions { grid-area: 3 / 1; position: static; left: auto; right: auto; bottom: auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0;
    background: var(--panel); border-top: 1px solid rgba(0,239,193,.32);
    backdrop-filter: none; text-shadow: none; }
  .sessions > p { display: none; }
  .session-row { display: block; min-width: 0; padding: 12px 12px 13px;
    border-left: 1px solid var(--line); border-top: 0; }
  .session-row:first-of-type { border-left: 0; }
  .session-row > i { display: none; }
  .session-row span b { font-size: 13px; }
  .session-row span small,
  .session-row > strong { font-size: 12.5px; }
  .session-row > strong { display: block; margin-top: 4px; }
}

/* ---------- Tables become cards ----------
   `table { min-width: 900px }` is a desktop rule. Below these widths the tables
   are re-laid out as one card per row, so every value is on screen and nothing
   depends on discovering a sideways scroll. The header row is hidden and the
   column names come back as ::before labels on the cells that need one. */
@media (max-width: 760px) {
  .market-wrap, .table-wrap { overflow-x: visible; }
  .market-table, .table-wrap table { min-width: 0; display: block; }
  .market-table thead, .table-wrap thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .market-table tbody, .table-wrap tbody { display: block; }
  .market-table tr, .table-wrap tr { display: grid; gap: 2px 12px;
    padding: 13px 14px; border-bottom: 1px solid var(--line); }
  .market-table td, .table-wrap td { display: block; border: 0; padding: 0;
    font-size: 13px; line-height: 1.5; }
  /* "Loading market data..." and any other full-width message row. */
  .market-table td[colspan], .table-wrap td[colspan] { grid-column: 1 / -1; text-align: center; }
  .market-table tr:last-child, .table-wrap tr:last-child { border-bottom: 0; }
  /* Cell labels. 12.5px is the floor for readable type on this site. */
  .market-table td::before, .table-wrap td::before {
    color: var(--muted); font: 12.5px var(--mono); letter-spacing: .6px; margin-right: 6px; }

  /* Market snapshot: ticker + price, then name + change, then the reference row. */
  .market-table tr { grid-template-columns: 1fr auto; align-items: baseline; }
  .market-table td:nth-child(1) { grid-area: 1 / 1; font-weight: 600; font-size: 14.5px; }
  .market-table td:nth-child(3) { grid-area: 1 / 2; text-align: right; font-size: 14.5px; }
  .market-table td:nth-child(2) { grid-area: 2 / 1; font-size: 12.5px; }
  .market-table td:nth-child(5) { grid-area: 2 / 2; text-align: right; font-weight: 600; }
  .market-table td:nth-child(4) { grid-area: 3 / 1; font-size: 12.5px; color: var(--muted); }
  .market-table td:nth-child(6) { grid-area: 3 / 2; text-align: right; font-size: 12.5px; color: var(--muted); }
  .market-table td:nth-child(4)::before { content: "PREV"; }
  .market-table td:nth-child(6)::before { content: "FEED"; }
}

@media (max-width: 760px) {
  /* Execution log. Nine columns on desktop:
     1 date, 2 asset, 3 screenshot, 4 direction, 5 setup, 6 entry/exit,
     7 R multiple, 8 result, 9 process. */
  .execution .table-wrap tr { grid-template-columns: 1fr auto; row-gap: 5px; padding: 14px; }
  .execution .table-wrap td:nth-child(2) { grid-area: 1 / 1; font-size: 15px; }
  .execution .table-wrap td:nth-child(8) { grid-area: 1 / 2; text-align: right; font-size: 15px; font-weight: 600; }
  .execution .table-wrap td:nth-child(4) { grid-area: 2 / 1; }
  .execution .table-wrap td:nth-child(7) { grid-area: 2 / 2; text-align: right; font-weight: 600; }
  .execution .table-wrap td:nth-child(1) { grid-area: 3 / 1; color: var(--muted); font-size: 12.5px; }
  .execution .table-wrap td:nth-child(9) { grid-area: 3 / 2; text-align: right; font-size: 12.5px; }
  .execution .table-wrap td:nth-child(9)::before { content: "PROCESS"; }
  .execution .table-wrap td:nth-child(5) { grid-area: 4 / 1 / auto / -1; }
  .execution .table-wrap td:nth-child(5)::before { content: "SETUP"; }
  .execution .table-wrap td:nth-child(6) { grid-area: 5 / 1 / auto / -1; }
  .execution .table-wrap td:nth-child(6)::before { content: "ENTRY"; }
  .execution .table-wrap td:nth-child(3) { grid-area: 6 / 1 / auto / -1; margin-top: 4px; }
  .execution .table-wrap .stop-size { display: inline-block; margin-left: 8px; white-space: nowrap; }

  /* Breakdown. Five columns: 1 group, 2 trades, 3 win rate, 4 net P&L, 5 avg R. */
  .breakdown-panel .table-wrap tr { grid-template-columns: 1fr auto; row-gap: 5px; }
  .breakdown-panel .table-wrap td:nth-child(1) { grid-area: 1 / 1; font-size: 14.5px; }
  .breakdown-panel .table-wrap td:nth-child(4) { grid-area: 1 / 2; text-align: right; font-weight: 600; }
  .breakdown-panel .table-wrap td:nth-child(2) { grid-area: 2 / 1; font-size: 12.5px; }
  .breakdown-panel .table-wrap td:nth-child(3) { grid-area: 2 / 2; text-align: right; font-size: 12.5px; }
  .breakdown-panel .table-wrap td:nth-child(5) { grid-area: 3 / 1; font-size: 12.5px; }
  .breakdown-panel .table-wrap td:nth-child(2)::before { content: "TRADES"; }
  .breakdown-panel .table-wrap td:nth-child(3)::before { content: "WIN RATE"; }
  .breakdown-panel .table-wrap td:nth-child(5)::before { content: "AVG R"; }
}

/* ---------- Touch targets ----------
   Measured under 44px on a 390px render: the risk input (29px), the confirmation
   timeframe select (31px) and the in-page section links (34px). */
@media (max-width: 760px) {
  .check-grid input[type="number"], .check-grid select,
  .form-grid input, .form-grid select, .form-grid textarea,
  .profile-editor input, .profile-editor select,
  #auth-form input, .account-box input { min-height: 44px; }
  .nl-jump a, .nl-footer a, .nl-share button, .quick-actions button { min-height: 44px; display: inline-flex;
    align-items: center; }
  /* The checkbox itself stays 16px for visual weight; the whole row is the target. */
  .check-grid label { min-height: 44px; display: flex; align-items: center; }
}

/* ---------- Command panel and stat cards ---------- */
@media (max-width: 760px) {
  /* The active tab was distinguishable only by a 2px left border and a barely
     lighter background, which is not enough on a phone in daylight. */
  .rail nav button.active { background: #0f1d22; border-left-width: 3px;
    box-shadow: inset 0 0 0 1px rgba(0,239,193,.22); }
  .rail nav button > small { font-size: 12.5px; }
}
@media (max-width: 620px) {
  /* Two columns is right, but 20px of padding on a 170px card left the labels
     wrapping to three lines. */
  .stats article { padding: 14px 13px; }
  .stats span { letter-spacing: .4px; line-height: 1.45; display: block; }
  .stats strong { font-size: 22px; margin: 8px 0 3px; }
  .stats small { line-height: 1.45; display: block; }
}

/* `.table-foot button, .motivation button` are styled as bare teal text with
   `padding:0`, so they rendered as a 17px tall touch target. */
@media (max-width: 760px) {
  .motivation button, .table-foot button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- The `hidden` attribute has to win ----------
   `hidden` is only `display:none` from the user agent stylesheet, so ANY author
   `display` declaration beats it and the element stays on screen while the JS
   believes it is hidden. Two cases were live here:
   - `.panel-empty` is `display:grid`, so "Your equity curve is drawn from the
     trades you log. Nothing to plot yet." was painted on top of a real, correctly
     drawn equity curve as soon as the ledger had trades in it;
   - `#toggle-ledger` picked the same fault up from the touch target rule below.
   One guard covers every future case, including any element given a display value
   by a later rule. */
[hidden] { display: none !important; }