/* ============================================================
   mobile.css - the phone layout (22/10/2026)
   ============================================================

   Carl, on Android Chrome: on a phone Quorum should read like a market
   app - TradingView's watchlist - and the desktop view must not change.
   What he measured on the old layout, and what each part of this file
   answers:

     the header row ran off the right edge     -> bottom tab bar, header
       ("Pricing" cut; 11px sideways scroll       reduced to the lockup and
       at 390px, measured locally)                the account links
     the filters took half the screen          -> bottom sheet
     tall rows, clipped columns                -> .watchlist: one dense row
                                                  per company

   HOW THE DESKTOP STAYS PUT. Two rules, and they are the contract for
   anyone editing this file:
     1. Outside the media query this file only HIDES the elements it
        adds (tab bar, sheet controls, phone-only footer links).
     2. Every rule that touches something already on the page lives
        inside @media (max-width: 640px) - the breakpoint style.css and
        quorum.css already use for phones.
   It loads last (base.html), so at equal specificity it wins over the
   640px rules in quorum.css that it replaces; where style.css's
   `table.leaderboard td` (0-1-2) would win, the selectors here carry
   .watchlist to outrank it.

   Palette: tokens only (--gold, --bg, --bg-elevated, --border, --fg,
   --muted). No new colour. */

/* ---------- Hidden everywhere but on a phone ---------- */

.tab-bar,
.footer-mobile,
.sheet-toggle,
.sheet-open,
.sheet-backdrop,
.sheet-head {
  display: none;
}

@media (max-width: 640px) {

  /* ---------- Room for the tab bar ---------- */

  /* 56px tab bar + the iPhone home-indicator inset. Without it the last
     row of every page, and the footer, sit under the bar. */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
  main { padding: 0.9rem 0.85rem 1.25rem; }

  /* ---------- Header: lockup on the left, account on the right ---------- */

  .site-header {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.45rem;
    padding: 0.55rem 0.85rem;
  }
  .site-header .brand { grid-row: 1; }
  /* The sections moved to the tab bar. This is what removed the
     overflow: five links plus their hairlines measured wider than a
     390px screen. */
  .site-header .header-nav { display: none; }
  .site-header .header-account {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: 0.6rem;
  }
  .site-header .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  /* The lockup without its two tagline lines: on a phone the header is a
     toolbar, and the taglines cost two lines of every screen. */
  .brand-tagline { display: none; }
  .brand-mark { height: 28px; width: 28px; }
  /* Profile is the Account tab now; keeping it here would put the same
     destination on screen twice. */
  .header-account-link[href="/profile"] { display: none; }
  .header-signin { font-size: 0.66rem; white-space: nowrap; }
  .header-register {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.6rem;
  }

  /* ---------- Bottom tab bar ---------- */

  .tab-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .tab svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tab[aria-current="page"] { color: var(--gold); }
  .tab:active { background: var(--bg-hover); }

  .site-footer { padding-bottom: 1.25rem; }
  .footer-mobile { display: inline; }

  /* ---------- Intro and notices, tighter ---------- */

  .public-intro h1 { font-size: 1.35rem; margin-bottom: 0.4rem; }
  .public-lead { font-size: 0.9rem; line-height: 1.5; }
  .cta-line { font-size: 0.66rem; line-height: 1.55; }

  /* ---------- The watchlist ---------- */

  /* The table stops being a table below 640px: each row becomes a
     two-line grid, like a market app's watchlist.

       [*]  SYMBOL  Archived          /\/\_/   [Bullish][82/100]
            Activity 2026-10-20       (1y)         Scored 2026-10-21

     Kept: favourite star (when the viewer can hold favourites), symbol,
     the band chip and the score beside it (Plus+; below Plus the score
     is not in the page at all), the date the score was produced, the
     last insider activity and the one-year trend. Everything else is on
     the company page, one tap away: row-click.js already sends a tap
     anywhere on the row to /stock/{symbol}, and the symbol stays a
     real link for the keyboard. */
  .table-scroll:has(> table.watchlist) { overflow-x: visible; }
  table.leaderboard.watchlist {
    display: block;
    min-width: 0;
    width: 100%;
  }
  table.leaderboard.watchlist tbody { display: block; }

  /* Sorting survives as a row of chips: the header cells that are sort
     links (Plus+) line up and scroll sideways; plain-text headers
     (anonymous, Free) are dropped, and so is the whole strip when no
     header is a link. */
  table.leaderboard.watchlist thead { display: block; }
  table.leaderboard.watchlist thead:not(:has(a)) { display: none; }
  table.leaderboard.watchlist thead tr {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--border);
  }
  table.leaderboard.watchlist thead tr::-webkit-scrollbar { display: none; }
  table.leaderboard.watchlist thead th { display: none; }
  table.leaderboard.watchlist thead th:has(> a) {
    display: block;
    flex: none;
    padding: 0;
    border: 0;
    width: auto;
  }
  table.leaderboard.watchlist thead th a {
    display: inline-block;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.6rem;
  }
  table.leaderboard.watchlist thead th.sorted a {
    color: var(--gold);
    border-color: var(--gold-dim);
  }
  /* The active sort leads the strip, so the order the list is in is
     never scrolled out of sight (sorting by Bought put it sixth). */
  table.leaderboard.watchlist thead th.sorted { order: -1; }

  table.leaderboard.watchlist tbody tr[data-symbol] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px auto;
    grid-template-areas:
      "sym  spark sig"
      "meta spark when";
    column-gap: 0.7rem;
    row-gap: 0.15rem;
    align-items: center;
    padding: 0.6rem 0.15rem;
    border-bottom: 1px solid var(--border);
  }
  /* The star column only when it holds a star: an anonymous row's
     fav-col is an empty cell and must not cost the row a gap. */
  table.leaderboard.watchlist tbody tr[data-symbol]:has(> td.fav-col:not(:empty)) {
    grid-template-columns: auto minmax(0, 1fr) 64px auto;
    grid-template-areas:
      "fav sym  spark sig"
      "fav meta spark when";
  }
  table.leaderboard.watchlist tbody tr[data-symbol]:active { background: var(--bg-hover); }

  table.leaderboard.watchlist tbody td {
    display: none;
    padding: 0;
    border: 0;
    width: auto;
    min-width: 0;
  }
  table.leaderboard.watchlist td.fav-col:not(:empty) { display: block; grid-area: fav; }
  table.leaderboard.watchlist td.symbol-cell {
    display: block;
    grid-area: sym;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.leaderboard.watchlist .symbol-link {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  table.leaderboard.watchlist td.col-last {
    display: block;
    grid-area: meta;
    font-size: 0.66rem;
    color: var(--muted);
    white-space: nowrap;
  }
  table.leaderboard.watchlist td.col-last::before { content: "Activity "; }
  table.leaderboard.watchlist td.spark-cell {
    display: flex;
    grid-area: spark;
    align-items: center;
    justify-content: center;
  }
  table.leaderboard.watchlist td.spark-cell svg {
    max-width: 64px;
    height: auto;
  }
  table.leaderboard.watchlist td.ai-col {
    display: flex;
    grid-area: sig;
    justify-content: flex-end;
    gap: 0.25rem;
    text-align: right;
  }
  table.leaderboard.watchlist td.ai-col .q-chip {
    font-size: 0.62rem;
    padding: 0.2rem 0.4rem;
  }
  table.leaderboard.watchlist td.scored-cell {
    display: block;
    grid-area: when;
    text-align: right;
    font-size: 0.6rem;
    color: var(--muted);
    white-space: nowrap;
  }
  table.leaderboard.watchlist td.scored-cell:has(time)::before { content: "Scored "; }

  /* Favorites has no AI column: its right-hand slot shows what the
     insiders bought, labelled, since a bare dollar figure on its own
     line would not say which side of the trade it is. */
  table.leaderboard.watchlist-favorites td.cell-buy {
    display: block;
    grid-area: sig;
    text-align: right;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  table.leaderboard.watchlist-favorites td.cell-buy::before {
    content: "Bought ";
    color: var(--muted);
    font-size: 0.6rem;
  }

  /* The anonymous cap and the empty-table message are rows without a
     company: plain blocks, full width. */
  table.leaderboard.watchlist tbody tr:not([data-symbol]) { display: block; }
  table.leaderboard.watchlist tbody tr:not([data-symbol]) > td {
    display: block;
    padding: 1rem 0.15rem 0.5rem;
  }

  /* ---------- Filters: a bottom sheet ---------- */

  .table-controls {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
  }
  /* Visually hidden but focusable: Tab reaches it, Space opens the
     sheet. display:none would take it out of the keyboard path. */
  .sheet-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .sheet-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg);
    cursor: pointer;
  }
  .sheet-open svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
  .sheet-toggle:focus-visible + .sheet-open {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }
  .sheet-count {
    display: inline-block;
    min-width: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--bg);
    text-align: center;
    font-weight: 600;
  }

  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .sheet-toggle:checked ~ .sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Closed: off screen AND visibility:hidden, so its controls leave the
     tab order. The visibility change is delayed to the end of the slide
     so the sheet is seen leaving. */
  .table-controls .table-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.8rem;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0.9rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.6);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .sheet-toggle:checked ~ .table-toolbar {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
  }
  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sheet-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
  }
  .sheet-close {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.5rem 0 0.5rem 0.75rem;
    cursor: pointer;
  }
  .table-controls .table-toolbar-field,
  .table-controls .table-toolbar-field select {
    width: 100%;
  }
  .table-controls .table-toolbar-field select { min-height: 44px; }
  .table-controls .table-toolbar-check { min-height: 36px; }
  .table-controls .table-toolbar-apply,
  .table-controls .table-toolbar-export {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }
  /* Active filters stay visible while the sheet is closed, on one
     line that scrolls sideways rather than wrapping down the page. */
  .table-controls .table-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
    margin: 0;
  }
  .table-controls .table-chip { flex: none; }

  /* À propos: a long FMP description stays four lines until "Lire plus".
     Desktop keeps the full paragraph (the control is display:none there). */
  .company-about .about-copy.is-clamped .about-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .company-about .about-copy.is-clamped .about-more-open { display: inline-block; }
  .company-about .about-more-toggle:checked ~ .about-description {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .company-about .about-more-toggle:checked ~ .about-more-open { display: none; }
  .company-about .about-more-toggle:checked ~ .about-more-close { display: inline-block; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .table-controls .table-toolbar,
  .sheet-toggle:checked ~ .table-toolbar,
  .sheet-backdrop { transition: none; }
}