/* Lifted from templates/cms/_tool_responsive_css.html on 13 Sep 2026. Byte-identical to the block it
   replaced; the only change is that the browser can cache it.
   Linked by {% css 'tool-responsive' %} in that same partial, so a page that does
   not include the partial does not download this. */
/* No drawer above mobile, so no scrim. */
.menu-scrim{display:none}

/* ── Laptop ─────────────────────────────────────────────────────────────── */
@media(max-width:1535px){
  .tool-header{padding:15px 22px}
  .tool-content{padding:20px 22px}
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media(max-width:1023px){
  /* Text 10% larger on a tablet, 20% on a phone. Done once at the root rather
     than as a list of overrides: every font-size in the plan-set page and its
     partials is in rem (119 of them, against one in px), so they all follow this
     and stay in proportion with each other. The product card was the exception —
     40 sizes, all px — and its declarations were converted to the exact rem
     equivalents so it scales too. Anything still declared in px anywhere will
     NOT follow; that is the trade for one line instead of two hundred.

     It applies to every page carrying this partial, which is the point: text
     size is a comfort setting, not a per-page decision. */
  html{font-size:110%}
  .tool-header{padding:13px 18px}
  .tool-content{padding:16px 18px}
  /* Three stat cards across a tablet leaves each one too narrow to read its own
     label; two is the last honest number before one. */
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  html{font-size:120%}
  /* The sidebar leaves the flow here and becomes a drawer — see
     cms/_tool_sidebar.html — so the chrome stops being two columns. */
  .tool-chrome{display:block}
  .tool-header{padding:11px 13px;flex-wrap:wrap;gap:8px}
  /* The heading takes the whole first row, so whatever sits beside it on a wide
     screen — Export, Settings, a filter — drops to a row of its own underneath.
     The header already wrapped, but with the title on flex:1 it only gave way
     once the buttons had squeezed the description down to a couple of words a
     line. A full-width basis makes the break deliberate rather than the result
     of the description losing a fight. */
  .tool-header-title{flex:1 1 100%}
  .tool-header-title h1{font-size:1.122rem}
  .tool-header-title p{font-size:.78rem}
  .tool-content{padding:13px}
  .stat-row{grid-template-columns:1fr}
  /* a table narrower than its content scrolls itself rather than stretching
     the page — a body that scrolls sideways loses the nav with it */
  .acct-panel{overflow-x:auto}
  .acct-table{min-width:520px}
  .acct-table th,.acct-table td{padding:9px 11px}
}