/* The phone treatment for the dashboards.
   ===========================================================================
   Everything here is scoped inside `@media (max-width: 767px)`. Above that
   breakpoint this file contributes exactly one rule — `.m-only { display:none }`
   — so the desktop layout is the one that already shipped, untouched.

   It lives in its own file rather than in app.css on purpose: app.css is being
   reworked on `app-ui-v7` at the same time as this, and two agents editing one
   stylesheet is a merge conflict waiting to happen. Every colour, radius and
   shadow below is a `var()` into app.css's tokens, so whatever that branch
   lands — the tile treatment, the reworked retention ring — this inherits
   rather than forks.

   The structure: one hero figure with a
   real comparison, the secondary numbers subordinated into a row inside the
   same tile, a period control directly under the hero that scopes the screen,
   a header that collapses but keeps the value, an axes-free chart you scrub,
   and lists as hairline rows rather than cards.
   =========================================================================== */

/* Mobile-only blocks are inert on desktop. This is the only rule outside the
   media query, so a desktop page that loads this file renders as it always did. */
.m-only { display: none; }

@media (max-width: 767px) {

  .m-only { display: block; }
  /* Desktop blocks the phone layout replaces. Hidden, never removed — the
     desktop markup stays in the DOM so a rotation or a resize needs no rerender. */
  .m-hide { display: none !important; }

  /* The topline is three things: the estimated-revenue tile, the capacity tile
     and the business-health chip. The hero replaces the first two, so only they
     are hidden — the chip stays, because it is the only way into the health
     panel and hiding the whole row would make that panel unreachable on a
     phone. With its siblings gone the row is one full-width control. */
  .topline { display: block; }
  .topline > .mrev { display: none; }
  .topline > .hchip { width: 100%; margin-top: 16px; }

  /* ---------- the phone column ---------- */
  .m-wrap { --m-gut: 16px; }
  @media (max-width: 374px) { .m-wrap { --m-gut: 14px; } }
  .m-pad { padding-left: var(--m-gut); padding-right: var(--m-gut); }

  /* ---------- collapsing header ----------
     Collapses on scroll into a compact bar that KEEPS THE HERO VALUE, so the
     period control's scope stays obvious once the hero has scrolled away. */
  .m-top { position: sticky; top: 0; z-index: 40; background: var(--bg); }
  .m-top-big { padding: 12px 0 8px; }
  .m-top-big h1 { font-size: 21px; font-weight: 600; letter-spacing: -.02em;
                  line-height: 1.2; margin: 0; }
  .m-top-big .m-sub { font-size: 12.5px; color: var(--ink-ground, var(--ink-3));
                      margin: 3px 0 0; display: flex; align-items: center;
                      gap: 6px; flex-wrap: wrap; }
  .m-top-compact {
    display: flex; align-items: center; gap: 10px; height: 0; overflow: hidden;
    opacity: 0; border-bottom: 1px solid transparent;
    transition: height .18s var(--ease, ease), opacity .18s var(--ease, ease);
    will-change: height, opacity;
  }
  .m-top.is-stuck .m-top-big { display: none; }
  .m-top.is-stuck .m-top-compact { height: 52px; opacity: 1; border-bottom-color: var(--line); }
  .m-top-compact .cn { font-size: 15px; font-weight: 600; white-space: nowrap;
                       overflow: hidden; text-overflow: ellipsis; }
  .m-top-compact .cv { margin-left: auto; font-size: 17px; font-weight: 600;
                       letter-spacing: -.02em; white-space: nowrap;
                       font-variant-numeric: tabular-nums; }
  .m-top-compact .cl { font-size: 11px; color: var(--ink-ground, var(--ink-3)); white-space: nowrap; }

  /* ---------- tiles ----------
     Inherits app.css's tile treatment via the tokens. If --tile-shadow and
     --tile-ramp are not defined (main today), the fallbacks give the shipped
     border-only card and nothing looks broken. */
  .m-tile {
    background: var(--card); background-image: var(--tile-ramp, none);
    border: 1px solid var(--line); border-radius: var(--r-xl);
    box-shadow: var(--tile-shadow, none);
  }

  /* ---------- hero ---------- */
  .m-hero { padding: 18px 18px 16px; margin-top: 2px; }
  .m-hero-k { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
              font-size: 12.5px; font-weight: 600; color: var(--ink-2);
              margin: 0 0 6px; }
  .m-hero-v { font-size: 46px; line-height: 1.02; font-weight: 600;
              letter-spacing: -.035em; margin: 0; color: var(--ink);
              font-variant-numeric: tabular-nums; }
  @media (max-width: 374px) { .m-hero-v { font-size: 41px; } }
  /* An absent hero is still a hero — it just is not a number. Smaller, because
     a 46px em dash reads as a rendering fault rather than a statement. */
  .m-hero-v.is-absent { font-size: 30px; letter-spacing: -.01em; color: var(--ink-2); }
  .m-hero-v.is-absent .v3-absent { border-bottom: 0; }
  .m-hero-d { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
              margin: 9px 0 0; font-size: 13.5px; color: var(--ink-2); }
  .m-hero-d .d { font-weight: 600; font-size: 14.5px; }
  .m-hero-d .d.up { color: var(--up); }
  .m-hero-d .d.dn { color: var(--down); }
  .m-hero-d .basis { color: var(--ink-3); }

  /* The secondary numbers: ONE row inside the hero's own tile. Three separate
     tiles of the same size is three heroes, which is none. */
  .m-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
             margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
  .m-props .k { font-size: 11.5px; color: var(--ink-3); line-height: 1.3;
                display: block; margin-bottom: 3px; }
  .m-props .v { font-size: 18px; font-weight: 600; letter-spacing: -.02em;
                display: block; font-variant-numeric: tabular-nums; }
  .m-props .v.sm { font-size: 14px; font-weight: 500; }
  /* Why a supporting figure is missing, in the open. A phone cannot hover, so
     a title attribute is the same as saying nothing. */
  .m-props .why { display: block; font-size: 11px; line-height: 1.35;
                  color: var(--ink-3); margin-top: 4px; }

  /* ---------- period control ----------
     Directly under the hero, because that is what makes its scope obvious: it
     changes the number above it and everything below it. --edge, not --line-2:
     app.css holds --edge to WCAG 1.4.11's 3:1 for control boundaries. */
  .m-periodwrap { padding-top: 12px; padding-bottom: 10px; }
  .m-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
           background: var(--card-2); border: 1px solid var(--edge);
           border-radius: var(--r-lg); padding: 4px; }
  .m-seg button {
    min-height: 44px; border: 0; border-radius: var(--r-md); background: transparent;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 0 4px; transition: background .15s var(--ease, ease), color .15s var(--ease, ease);
  }
  /* The selected segment carries its own outline. Card against card-2 is about
     a 1.1:1 step, so the fill alone does not say which one is on. */
  .m-seg button[aria-selected="true"] {
    background: var(--card); color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--edge);
  }
  .m-range { font-size: 12px; color: var(--ink-ground, var(--ink-3)); margin: 9px 2px 0; }

  /* ---------- section ---------- */
  .m-sec { margin-top: 24px; }
  .m-sec-h { display: flex; align-items: baseline; justify-content: space-between;
             gap: 10px; margin: 0 0 10px; }
  .m-sec-h h2 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
  .m-sec-h .ch { font-size: 11.5px; color: var(--ink-ground, var(--ink-3)); white-space: nowrap; }

  /* ---------- scrub chart ----------
     No y-axis, no gridlines, no tooltips: the readout above rebinds to whatever
     you drag onto, which is what buys back the vertical space. */
  .m-chart { padding: 16px 14px 12px; }
  .m-read { display: flex; align-items: baseline; gap: 8px; min-height: 26px;
            margin: 0 4px 12px; flex-wrap: wrap; }
  .m-read .rv { font-size: 20px; font-weight: 600; letter-spacing: -.02em;
                font-variant-numeric: tabular-nums; }
  .m-read .rl { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  /* THE STRIP IS THE CONTROL. Full card width by 112px tall, so the target
     clears 44×44 by a wide margin however many buckets are in it — nine bars
     on a 360px phone are 27px each, and a 27px target fails 2.5.5 whatever its
     height. Tap anywhere on it, drag across it, or arrow through it. */
  .m-bars { display: flex; align-items: flex-end; gap: 3px; height: 112px;
            touch-action: pan-y; cursor: pointer; border-radius: var(--r-sm); }
  .m-bars:focus-visible { box-shadow: var(--focus); }
  /* Presentational. Not focusable, not a target, aria-hidden in the markup. */
  .m-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end;
           background: transparent; border: 0; padding: 0; pointer-events: none; }
  .m-bar i { display: block; width: 100%; background: var(--accent);
             border-radius: 3px 3px 0 0; min-height: 3px; }
  /* A zero bucket is a fact the chart has to carry, so its stub needs 3:1
     against the tile — --track is about 1.3:1 and vanishes. */
  .m-bar[data-empty="1"] i { background: var(--edge); }
  .m-bar[aria-current="true"] i { background: var(--accent-deep); }
  .m-xlabs { display: flex; justify-content: space-between; margin: 8px 4px 0;
             font-size: 11px; color: var(--ink-ground, var(--ink-3));
             font-variant-numeric: tabular-nums; }

  /* ---------- rows ----------
     One card, hairline rows, which is the convention every other list in the
     product already follows. A card per row is padding pretending to be
     structure. */
  .m-rows { background: var(--card); border: 1px solid var(--line);
            border-radius: var(--r-xl); overflow: hidden; }
  .m-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
           align-items: center; width: 100%; text-align: left; background: transparent;
           border: 0; border-top: 1px solid var(--line); border-radius: 0;
           padding: 13px 16px; min-height: 60px; font: inherit; color: var(--ink);
           cursor: pointer; }
  .m-row:first-child { border-top: 0; }
  .m-row:active { background: var(--card-2); }
  /* Both cells are placed explicitly. Left to auto-placement the figure lands
     in column one and the row reads back to front. */
  .m-row .nm { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 600;
               letter-spacing: -.01em; }
  .m-row .sub { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--ink-3);
                margin-top: 3px; display: flex; align-items: center; gap: 6px;
                flex-wrap: wrap; }
  .m-row .fig { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .m-row .amt { font-size: 16px; font-weight: 600; letter-spacing: -.02em;
                display: block; font-variant-numeric: tabular-nums; }
  .m-row .amtsub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; display: block; }

  /* ---------- empty states ----------
     The first thing a new shop sees after connecting, so it gets a real
     treatment rather than a shrug: what is true now, why, and the one thing
     that changes it. */
  .m-empty { background: var(--card); border: 1px solid var(--line);
             border-radius: var(--r-xl); padding: 22px 18px; text-align: left; }
  .m-empty h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em;
                margin: 0 0 7px; }
  .m-empty p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
  .m-empty p + p { margin-top: 9px; }
  .m-empty .m-act { display: inline-flex; align-items: center; min-height: 44px;
                    padding: 0 16px; margin-top: 14px; border-radius: var(--r-md);
                    background: var(--accent-deep); color: var(--on-accent);
                    font-size: 14px; font-weight: 600; text-decoration: none; }
  .m-empty .m-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; }

  /* ---------- notes carried from v3.css ----------
     Same treatments the desktop already gives an absent figure, a qualifier and
     a refusal, so the phone does not invent a second visual language for them. */
  .m-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin: 12px 0 0;
            padding: 10px 12px; border-radius: var(--r-md); background: var(--card-2);
            border-left: 2px solid var(--line-2); }
  .m-note b { color: var(--ink); font-weight: 600; }
  .m-note.approx { border-left-color: var(--clay); }
  .m-note.unpriced { border-left-color: var(--sage-deep); }
  .m-explain { font-size: 12px; color: var(--ink-3); line-height: 1.6;
               margin: 14px 2px 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .m-explain b { color: var(--ink-2); font-weight: 600; }

  /* ---------- motion ----------
     Transform and opacity only; the header collapse animates height on a 52px
     bar, which is cheap and never during a scroll frame that also paints. */
  @media (prefers-reduced-motion: reduce) {
    .m-top-compact, .m-seg button { transition: none; }
  }
}