/* Lifted from templates/cms/_tool_chrome_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-chrome' %} in that same partial, so a page that does
   not include the partial does not download this. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* 0.9375rem is 15px at the default root and always has been — stated in rem so
   it follows the root scale the responsive partial applies on a tablet and a
   phone. Left in px it would have been the one size on the page that refused to
   grow, and it is the size everything without a rule of its own inherits. */
body{font-family:Arial,Helvetica,sans-serif;font-size:0.9375rem;color:#333;background:var(--page,#fbfbf9);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
/* nav CSS now lives in _nav_css.html, pulled in by _tool_nav.html */
/* tool chrome */
.tool-chrome{display:flex;flex:1;min-height:0}
.tool-sidebar{width:260px;flex-shrink:0;background:var(--page,#fbfbf9);border-right:1px solid #e2e4e8;display:flex;flex-direction:column;position:sticky;top:46px;height:calc(100vh - 46px);overflow-y:auto}
.tool-switcher{padding:16px 14px 12px}
.tool-switcher-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tool-switcher-label{font-size:.7rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em}
.sidebar-toggle{background:none;border:none;cursor:pointer;padding:3px 4px;color:#9ca3af;display:flex;align-items:center;border-radius:4px}
.sidebar-toggle:hover{background:var(--hover,#f4f3ef);color:#555}
.sidebar-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}
.icon-expand{display:none}
.tool-sidebar.sidebar-collapsed{width:56px;overflow:hidden}
.tool-sidebar.sidebar-collapsed .tool-switcher{padding:8px 0}
.tool-sidebar.sidebar-collapsed .tool-switcher-label{display:none}
.tool-sidebar.sidebar-collapsed .tool-tab{justify-content:center;padding:10px 0;gap:0}
.tool-sidebar.sidebar-collapsed .tab-badge,.sidebar-collapsed .tab-label{display:none}
.sidebar-collapsed .icon-collapse{display:none}
.sidebar-collapsed .icon-expand{display:block}
.tool-tab{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.99rem;font-weight:400;color:#555;margin-bottom:2px;transition:background .12s}
.tool-tab,.tool-group-head{font-size:.99rem;padding:9px 14px;gap:12px;line-height:1.2}
.tool-tab:hover{background:var(--hover,#f4f3ef);color:#111}
.tool-tab.active{background:var(--accent-tint,#f2f3f5);color:var(--accent,#1f2327)}
.tool-tab svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8}
.tool-tab .tab-badge{margin-left:auto;font-size:.7rem;background:var(--accent,#1f2327);color:#fff;padding:1px 7px;border-radius:10px;font-weight:700}
.tool-main{flex:1;min-width:0;display:flex;flex-direction:column}
.tool-header{background:var(--page,#fbfbf9);border-bottom:1px solid #e2e4e8;padding:16px 28px;display:flex;align-items:center;gap:16px}
.tool-header-title{flex:1}
/* OPTICALLY centred, not geometrically. Kev, 25 Aug: "still too high" --
   and he was right, though the box was centred to half a pixel. The eye
   reads the CAP BLOCK (cap-height down to the baseline) as "the text";
   Martel Sans then hangs 7.5px of descender space below it and only 5.8px
   above the caps, so a perfectly centred line box puts the visible mass
   3.6px high. Measured, not guessed.
   position/top rather than padding or margin: those change the box, which
   align-items:center then re-centres, and half the nudge comes straight
   back. This moves the ink and leaves the layout alone. */
.tool-header-title h1{font-size:1.265rem;font-weight:700;color:#111;position:relative;top:1px}
.tool-header-title p{font-size:.82rem;color:#888}
.tool-content{padding:24px 28px;flex:1}
/* data tables + cards */
.acct-panel{background:#fff;border:1px solid #e2e4e8;border-radius:8px;overflow:hidden;margin-bottom:16px}
.acct-panel-header{padding:13px 16px;border-bottom:1px solid #e2e4e8}
.acct-panel-header h2{font-size:.72rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.06em}
.acct-table{width:100%;border-collapse:collapse}
.acct-table th{text-align:left;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#888;padding:9px 16px;background:var(--surface,#f7f6f2);border-bottom:1px solid #e2e4e8;white-space:nowrap}
.acct-table td{padding:11px 16px;border-bottom:1px solid #f0f1f3;font-size:.82rem;color:#444;vertical-align:middle}
.acct-table tr:last-child td{border-bottom:none}
.acct-table tr:hover td{background:var(--hover,#f4f3ef)}
.status-badge{display:inline-block;font-size:.63rem;font-weight:700;padding:2px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}
.st-paid,.status-badge.paid,.status-badge.complete,.status-badge.completed{background:#e6f4ea;color:#1e7e34}
.st-pending,.status-badge.pending,.status-badge.processing,.status-badge.unpaid{background:#fef9e7;color:#b7791f}
.st-shipped,.status-badge.shipped{background:#e8f0fb;color:#1a56a0}
/* Item 210: the two halves of what used to be one amber "Pending payment".
   Checkout keeps the amber -- money is genuinely in flight there. Cart is grey,
   because nothing has been attempted and an amber pill on it reads as a problem
   to chase. Distinct from a LIVE basket, which is in the session and can never
   appear in this table at all -- see Order.stage. */
.st-checkout{background:#fef9e7;color:#b7791f}
.st-cart{background:#f1f2f4;color:#5f6874}
.status-badge.production{background:#f3e8fb;color:#6b21a8}
.st-failed,.st-cancelled,.status-badge.failed,.status-badge.cancelled{background:#fde8e8;color:#9b1c1c}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.stat-card{background:#fff;border:1px solid #e2e4e8;border-radius:8px;padding:16px 20px}
.stat-value{font-size:1.5rem;font-weight:700;color:var(--accent,#1f2327);margin-bottom:2px}
.stat-label{font-size:.68rem;color:#999;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.empty-row{text-align:center;color:#999;padding:26px}
.pdf-link{color:var(--accent,#1f2327);font-weight:600;font-size:.78rem}
footer{background:#1f2327;color:#aaa;text-align:center;padding:22px 20px;font-size:.85em}
footer a{color:#ccc}


/* THE LABELS-AND-QUANTITIES NOTE -- markup in cms/_labels_check_note.html, and
   also on the basket. Amber 1px box, never red: it appears on correct plan sets
   too, and a red box that cries wolf is one people learn to click past. */