/* Ours, loaded after the design's kit (app/static/glass/, byte copies). Inter is self-hosted: no font host sees a
   client's address (APP-PLAN D1). The file is the variable Latin Inter (OFL, licence beside it); its checksum is pinned
   by engine/tests/test_web_kit.py. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(inter/Inter.woff2) format("woff2");
}

/* APP-1b: Home's figure tile stacks its label, the figure and its period (the design's tile is a row of one). */
.hm-fig{display:grid;gap:6px;align-content:start;min-width:0}
.hm-fig .g-fig{overflow-wrap:anywhere}
.hm-fig .g-fail-line{margin:0}
.hm-sales{margin-top:16px}
.hm-sales .g-pair{gap:12px}
.hm-sales .g-head{margin-bottom:10px}
/* NL-HOME-HEAD and NL-OVERNIGHT: a broken connection's line under the heading; the overnight panel after the figures. */
.hm-broken{margin:0 0 12px}
.hm-night{margin-top:16px}
.hm-night .g-head{margin-bottom:10px}

/* APP-2o: quiet facts read in grey (law 1), a list measure's rows, and the Online page's tiles in the design's grid. */
.fig-quiet .g-fig,.fig-quiet .g-fail-line,.fig-quiet .hm-rows{color:var(--t2)}
.hm-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hm-rows li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
:root[data-page="online"] .ol-subs-top{align-items:stretch}
:root[data-page="online"] .ol-grid>.g-panel,:root[data-page="online"] .ol-grid>.g-pencil{margin-top:16px}

/* APP-2w: the Wholesale line keeps clear of the grid. */
:root[data-page="wholesale"] .ws-locked{margin:0 0 16px}

/* NL-CHARTS: the week-by-week chart (templates/_chart.html), drawn with the design's marks (glass-charts.css). The plot
   stretches to its panel; a column is a stroke that keeps its pixel width, a gap the design's dashed no-figure mark. */
.wk{margin:12px 0 0;min-width:0}
.wk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.wk-range{gap:6px}
.wk-plot{display:block;width:100%;height:120px;margin-top:12px}
svg.gc:not(#gc-k) .wk-col{fill:none;stroke:var(--gc-c);stroke-linecap:butt}
.wk-axis{display:flex;justify-content:space-between;gap:12px;margin:6px 0 0}
.wk-gaps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.wk-gap-key{display:inline-block;width:0;height:10px;margin-right:8px;border-left:1px dashed var(--t3)}
.wk-table{margin-top:8px}
.wk-table summary{cursor:pointer}
.wk-table table{width:100%;margin-top:6px;border-collapse:collapse;font-size:13px;font-feature-settings:"tnum" 1}
.wk-table :is(th,td){padding:4px 0;border-top:1px solid var(--grid);font-weight:400;text-align:left;color:var(--t2)}
.wk-table td{text-align:right;color:var(--t1)}

/* APP-4: the Ask page's own parts. The design lends Ask's answer drawing to its page only (:root[data-page="ask"]); the
   centred sheet shows the same markup on any page, so the few rules it needs are here, tokens only. */
.ak-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.ak-field{flex:1 1 200px}
.ak-send{flex:none}
.ak-say[data-ask-hint]:not(:empty){margin:8px 0 0}
/* The mic key's line, chosen by the product's one phone signal (as glass.css, app.css, deltas.css): a coarse pointer gets the
   keyboard's line, any other the computer's. Both are held hidden in the template; app.js says the one that counts. */
[data-mic-line]{display:none}
[data-mic-line="computer"]{display:inline}
@media (pointer:coarse){[data-mic-line="computer"]{display:none}[data-mic-line="phone"]{display:inline}}
.ak-ex{position:relative;display:flex;flex-direction:column;min-width:0;margin-top:14px}
.ak-q{align-self:flex-end;margin:0 0 12px;max-width:min(92%,540px);padding:9px 16px 10px;border-radius:18px;background-color:var(--key);box-shadow:inset 0 0 0 1px var(--key-line);font-size:14px;line-height:1.38;color:var(--t1);overflow-wrap:anywhere}
.ak-body{margin:8px 0 0;max-width:68ch;text-wrap:pretty;color:var(--t1)}
.ak-from{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:var(--t2)}

/* APP-6a: the offer card's keys are forms; they sit in the design's key row as if they were the buttons. Home's own offers rules
   are scoped to its page in the kit, so the offers page carries the same few. */
.of-key{display:contents}
.of-list{display:grid;gap:18px;margin:4px 0 14px}
.of-list>.g-held+.g-held{padding-top:18px;border-top:1px solid var(--grid)}
.g-held-line .of-key{margin-left:auto}

/* APP-5: a rule proposed under an answer, and the rules list (kit panel and rows; tokens only). */
.ak-rule{margin:0}
.ak-rule .ak-from{gap:16px}
.ak-rules{margin:18px 0 0}
.rl-lede,.rl-done,.rl-note,.rl-conflict,.rl-empty{margin:8px 0 0;max-width:68ch;overflow-wrap:anywhere}
.rl-done{color:var(--t1)}
.rl-panel{margin-top:16px}
.rl-rows{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rl-row.is-off{opacity:0.55}
.rl-who{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.rl-retire summary{cursor:pointer;color:var(--t2)}
.rl-retire form{margin:8px 0 0}

/* APP-7a: the Report's own parts (kit panels, rows and keys; tokens only). */
.rp-hero,.rp-sec{margin-top:16px}
.rp-hero h1{margin:6px 0 0}
.rp-line,.rp-empty{margin:8px 0 0;max-width:68ch;overflow-wrap:anywhere}
.rp-minis{gap:12px}
.rp-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.rp-offer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rp-q{min-width:0;overflow-wrap:anywhere}

/* F-PAPER part 2: the Xero AI-use box on the connect page (our own part, not the design's kit; tokens only). */
.ai-consent .ai-tick{margin-right:8px;vertical-align:top}
.ai-consent .ai-words{display:inline;max-width:60em}
.ai-consent .ai-with{display:none}
.ai-consent .ai-tick:checked ~ .ai-with{display:flex}
.ai-consent .ai-tick:checked ~ .ai-without{display:none}