/* Every breakpoint, loaded last.
 *
 * A media query wins by coming later in the cascade, not by specificity, so the
 * overrides live here rather than beside the rules they override.
 */

/* Three states, not two: the system's preference, and an explicit choice that overrides it in
   either direction. A viewer who has chosen nothing carries no stamp at all, which is most of
   them — so the media query has to work on its own, and the stamped rules have to beat it. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #121417; --surface: #1A1D21; --raised: #21252A;
      --ink: #EDEBE6; --muted: #9DA0A2; --line: #2E3339; --line-soft: #262B30;
      --accent: #FF6B3D; --accent-btn: #D2481C; --good: #74C393; --warn: #E0B057;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"] {
    --ground: #121417; --surface: #1A1D21; --raised: #21252A;
    --ink: #EDEBE6; --muted: #9DA0A2; --line: #2E3339; --line-soft: #262B30;
    --accent: #FF6B3D; --accent-btn: #D2481C; --good: #74C393; --warn: #E0B057;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
  @media (max-width: 1040px) { .topbar-sub { display: none; } }
  /* a phone already shows which page it is on, in the strip under the bar */
  /* On a phone the brand was taking two thirds of the bar and pushing the account buttons off the
     right edge. The tagline is the part nobody needs at that width, and the column it sits in has
     to be allowed to shrink — an `auto` track sizes to its content however little room is left. */
  @media (max-width: 520px) {
    .topbar-page { display: none; }
    .topbar-brand .wordmark em { display: none; }
    .topbar, body.nav-open:not(.no-rail) .topbar,
    body.nav-pinned:not(.no-rail) .topbar { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
    .topbar-main { padding: 0 12px; gap: 8px; }
    .topbar-right { gap: 8px; }
    /* Page actions are page-level, not account-level, and at this width they cannot share a line
       with the account tools. On the brand-kits page the bar wanted 522px inside 375: "New kit"
       and "Upload asset" each broke onto two lines and the avatar fell off the right edge, which
       is what made the whole page scroll sideways. So the actions take their own row beneath the
       tools — nothing is hidden, nothing is pushed off, and the buttons keep their labels. */
    .topbar-right { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
    #page-actions { order: 1; flex-basis: 100%; display: flex; gap: 8px; justify-content: flex-end; }
    /* most pages have none, and an empty flex item would still open a second row */
    #page-actions:empty { display: none; }
    /* a two-line button is a button that has run out of room, not a design */
    .topbar-right button, .topbar-right .btn { white-space: nowrap; }
  }
  /* Narrower again and the wordmark goes: the mark alone still says whose app this is, and it is
     the only piece left whose removal costs nothing. */
  @media (max-width: 400px) { .topbar-brand .wordmark b { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .side-nav button, .side, .topbar, .wordmark,
    .side-nav button > span, .side-tools button > span, .side-group span, .side-foot { transition: none; }
  }
  /* Narrow: there is no room for a rail beside the content and nothing to hover with, so the
     nav lies down into a scrolling strip of icons under the top bar. */
  @media (max-width: 860px) {
    .shell, .shell.solo,
    body.nav-pinned:not(.no-rail) .shell { grid-template-columns: minmax(0, 1fr); }
    .shell > .content, .shell.solo > .content { grid-column: 1; }
    .topbar, body.nav-open:not(.no-rail) .topbar,
    body.nav-pinned:not(.no-rail) .topbar { grid-template-columns: auto minmax(0, 1fr); }
    .topbar-brand .wordmark { opacity: 1; transform: none; }   /* room for it here */
    .topbar-brand { border-right: 0; padding: 0 10px; }
    .topbar-main { padding: 0 14px; }
    .search-open span, .search-open kbd { display: none; }
    .search-open { min-width: 0; }

    /* ---------- the rail becomes a drawer ----------
     *
     * A row of icons across the top was the whole navigation squeezed into 40 pixels: no labels,
     * no groups, and scrolling sideways to find anything. On a phone it slides in from the side
     * instead, at full width, exactly as it reads on a desktop.
     */
    .nav-toggle { display: flex; }
    .side, body.nav-open .side, body.nav-pinned:not(.no-rail) .side {
      position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh;
      width: min(280px, 82vw); z-index: 90;
      flex-direction: column; overflow-y: auto;
      padding: 0; border-right: 1px solid var(--line); border-bottom: 0;
      transform: translateX(-100%);
      transition: transform .22s cubic-bezier(.4, 0, .2, 1);
      box-shadow: none;
    }
    /* :not(.no-rail) only to match the weight of the closed rule above — `body.nav-pinned:not(…)`
       is three parts, and a two-part selector loses to it however late it comes. */
    body.nav-drawer:not(.no-rail) .side { transform: none;
                                          box-shadow: 18px 0 40px rgba(0, 0, 0, .45); }
    body.nav-drawer .nav-veil { display: block; }

    /* the labels are the point of a drawer, so they are always shown here */
    .side-nav button > span, .side-tools button > span,
    .side-group span, .side-foot { opacity: 1; transform: none; }
    .side-nav, .side-tools { display: grid; }
    .side-group::before { opacity: 0; }

    /* the stand-in is a drawer too, so it keeps the rail's shape */
    body.booting .side-nav.sk-nav, body.booting .side-tools.sk-nav { display: grid; }
    /* a drawer is opened and closed by the menu button; there is nothing to pin it open with */
    .side-tools .pin-side { display: none; }
  }
  @media (max-width: 760px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
  @media (max-width: 1000px) { .tier-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 760px) { .lic-grid { grid-template-columns: 1fr; } .lic-top { grid-template-columns: 1fr; } }
  @media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
  /* A row is a line of text with its actions at the end — until the line has nowhere left to go.
     `minmax(0,1fr) auto` hands the buttons whatever width they ask for and makes the text absorb
     every loss, so on a phone a device name wrapped to three lines beside two buttons and a
     billing row's own text ran underneath them. Below this width the actions take their own line:
     the text gets the full width, the buttons sit under it where a thumb expects them anyway. */
  @media (max-width: 640px) {
    .row { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
    .row > .btns { justify-content: flex-start; }
    /* and the same deal for the two other places a line of text shares a grid row with buttons */
    .cal-bar, .lic-foot { align-items: stretch; }
  }
  @media (max-width: 760px) { .cal-day { min-height: 68px; } .cal-slot { font-size: 9.5px; padding: 2px 3px; } }
  @media (max-width: 720px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (prefers-reduced-motion: reduce) { .switch input, .switch input::after { transition: none; } }
  /* A list's controls stack before its rows do: the search box keeps the width it needs to be
     typed into, and the two menus share the line under it. */
  @media (max-width: 720px) {
    .listbar { gap: 8px 6px; padding: 12px 14px; }
    .finder { flex: 1 1 100%; }
    /* a flex item won't shrink below its content, and a menu's content is its longest option,
       so the two menus have to be told they may be narrower than the words inside them */
    /* a flex item won't shrink below its content, and a menu's content is its longest option,
       so the menu has to be told it may be narrower than the words inside it */
    .listbar select { flex: 1 1 100%; min-width: 0; text-overflow: ellipsis; }

    /* five columns of numbers do not fit a phone; the label and the count are the list */
    .use { grid-template-columns: 1fr auto; padding: 12px 14px; }
    .use-bar { grid-column: 1 / -1; }
    .use-who, .use-month { text-align: left; min-width: 0; }
    .use-month { text-align: right; }
    /* the numbers are the part worth keeping; the words either side can go */
    .listfoot { padding: 10px 14px; gap: 8px; }
    .listfoot > .sub { flex: 1 1 100%; }
    .pager { gap: 2px; margin-left: 0; width: 100%; justify-content: space-between; }
    .page-step { padding: 6px 6px; font-size: 0; }
    .page-step::after { font-size: 13px; content: "←"; }
    .page-step:last-child::after { content: "→"; }
    .tabs button { padding: 4px 10px 10px; font-size: 13.5px; }
  }
  @media (max-width: 720px) {
    /* The chooser wraps to its own line rather than squeezing the heading beside it — and then
       its buttons wrap too. A flex item's floor is its content, so without `min-width: 0` a strip
       of five nowrap buttons simply makes the card, and the page, wider than the phone. */
    .card-head > .segctl { flex: 1 1 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
    .chart { padding: 16px 14px 12px; }
    .chart-plot { padding-left: 46px; }
    .chart-axis { padding-left: 46px; }
    .chart-max, .chart-mid, .chart-zero { width: 40px; }
    .chart-bars { height: 120px; }
    .rangebar { min-width: 0; max-width: 100%; }
    .rangebar .segctl { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    .rangebar .segctl button { flex: 1 1 auto; }
    .tiles.of4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ---------- a table is a phone's worst shape ----------
   *
   * Eight columns at 375px is a sideways scroll and a heading row nobody can see while they read.
   * So each row becomes a card: the first cell is its title, and every other cell carries the
   * heading it lost as a label beside its value. One document, two shapes — no second markup to
   * keep in step, and no re-render when the window changes.
   */
  @media (max-width: 720px) {
    .card.list .scroller, .card .scroller { overflow-x: visible; }
    .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: auto; }
    .ledger thead { display: none; }

    .ledger tr { margin: 12px 14px; padding: 12px 14px; background: var(--surface);
                 border: 1px solid var(--line); border-radius: 7px; }
    .ledger tr + tr { margin-top: 10px; }
    .ledger td { border: 0; padding: 5px 0; text-align: left; white-space: normal;
                 display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
    .ledger td::before { content: attr(data-label); flex: none;
                         font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
                         text-transform: uppercase; color: var(--muted); }
    /* the first cell is the card's heading, so it keeps the full width and drops its label */
    .ledger td:first-child { display: block; padding: 0 0 9px; margin-bottom: 5px;
                             border-bottom: 1px solid var(--line-soft); }
    .ledger td:first-child::before { display: none; }
    .ledger td:first-child b { font-size: 15px; }
    /* the value side of every other line, whatever the desktop alignment was */
    .ledger td.num, .ledger td.tight { width: auto; text-align: right; }
    .ledger td > .stack, .ledger td > .named { align-items: baseline; justify-content: flex-end; }
    .ledger td > .stack { justify-items: end; }
    .ellip { max-width: 60vw; }

    /* a card that opens something says so by lifting, since there is no row to highlight */
    .ledger tr.opens:hover td, .ledger tr.opens:hover td:first-child b { background: none; }
    .ledger tr.opens:active { border-color: var(--accent); }
    .ledger tr.refunded { opacity: .75; }
    /* a line whose value is a dash costs a column on a table and a whole line on a card */
    .ledger td.nil { display: none; }
    /* nothing to hover on a phone, so a card that opens something says so at its corner */
    .ledger tr.opens td:first-child { position: relative; padding-right: 20px; }
    .ledger tr.opens td:first-child::after { content: "\203a"; position: absolute; right: 0;
      top: -1px; font-size: 20px; line-height: 1; color: var(--muted); }
  }