/* The telemetry dashboard (tools/dash.py markup, assets/dash.js behaviour): the first block of the landing.
   One glass container (.g, e1) holding seven tiles divided by hairlines, the way the stat strip below it is made, so there is a single blur layer and no
   new visual language: the same tokens, type and chips. Everything is under .tm; nothing here reaches the page below it. A tile that is open takes the
   ignition ring (the one commanding surface in view). No export, no download, and the block is hidden in print. */

.tm{ padding:0; overflow:hidden }
.tm [hidden]{ display:none !important }
.tm button{ font:inherit; color:inherit }

/* ---------- header ------------------------------------------------------- */
.tm-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 24px;
  padding:clamp(18px,3vw,26px) clamp(16px,3vw,28px) 4px }
.tm-title{ min-width:0; flex:1 1 22rem }
.gx .tm-eyebrow{ margin:0 0 .5em }
.tm-eyebrow time{ white-space:nowrap }
.gx .tm h2{ margin:0 0 .3em }
.gx .tm-lede{ margin:0; max-width:58ch; color:var(--ink-2); font-size:.95rem; line-height:1.5 }

/* the controls exist only for a visitor with JavaScript: the head script puts .tm-js on <html> before the first paint, so they never shift the page */
.tm-ctl{ display:none; align-items:center; flex-wrap:wrap; gap:10px 12px }
.tm-js .tm-ctl{ display:flex }
.tm-js:not(.tm-ready) .tm-ctl{ visibility:hidden }
.tm-range, .tm-views{ display:inline-flex; padding:0; border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); border-radius:var(--r-ctl,2px);
  background:rgba(255,255,255,.035) }
.tm-range button, .tm-views button{ position:relative; border:0; background:transparent; color:var(--ink-2); padding:8px 15px 10px; border-radius:0; cursor:pointer;
  font-size:.8rem; font-weight:700; letter-spacing:.03em; line-height:1.2; white-space:nowrap }
.tm-range button + button, .tm-views button + button{ box-shadow:inset 1px 0 0 var(--hairline,rgba(229,231,235,.1)) }
.tm-range button:hover, .tm-views button:hover{ color:var(--ink) }
.tm-range button[aria-checked="true"], .tm-views button[aria-checked="true"], .tm-views button[aria-pressed="true"]{ background:rgba(244,81,30,.13); color:var(--ink) }
/* the stripe: what is picked, wherever something can be picked */
.tm-range button[aria-checked="true"]::after, .tm-views button[aria-checked="true"]::after, .tm-views button[aria-pressed="true"]::after,
.tm-pickb.is-on::after{ content:""; position:absolute; left:10px; right:10px; bottom:3px; height:3px; background:var(--ignition);
  clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%) }
.tm-fold, .tm-pickb{ position:relative; border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); background:rgba(255,255,255,.035); color:var(--ink-2); padding:8px 14px 10px;
  border-radius:var(--r-ctl,2px); cursor:pointer; font-size:.8rem; font-weight:700; letter-spacing:.03em; line-height:1.2; white-space:nowrap }
.tm-fold:hover, .tm-pickb:hover{ color:var(--ink); border-color:var(--ink-2) }
.tm-pickb.is-on{ color:var(--ink); background:rgba(244,81,30,.13) }
.tm-pickb[aria-expanded="true"]{ border-color:var(--ink-2) }
.tm-fold::after{ content:""; display:inline-block; width:.5em; height:.5em; margin-left:.6em; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-.15em) rotate(-135deg); transition:transform .2s var(--ease,ease) }
.tm-fold[aria-expanded="false"]::after{ transform:translateY(-.25em) rotate(45deg) }
.tm button:focus-visible, .tm-tile:focus-visible, .tm-drawer a:focus-visible, .tm input:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px }
.gx .tm .tm-tile:focus-visible{ outline-offset:-4px }
.gx .tm .tm-top h3:focus-visible{ outline:2px solid var(--ignition); outline-offset:4px; border-radius:3px }
/* a scripted focus is brought into view clear of the fixed nav */
.tm-drawer, .tm-tile, .tm-drawer h3{ scroll-margin-top:calc(var(--navh) + 16px) }

/* the row "Pick dates" opens: months, quarters, the year, a span of days, one day */
.tm-pick{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin:clamp(12px,2vw,16px) 0 0; padding:12px 14px;
  border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px); background:rgba(255,255,255,.025) }
.tm-pick[hidden]{ display:none }
.tm-pgrp{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px }
.tm-pk{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.tm-dates input{ min-height:34px; padding:6px 10px; border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); border-radius:var(--r-ctl,2px);
  background:rgba(255,255,255,.035); color:var(--ink-2); font:inherit; font-size:.8rem; font-variant-numeric:tabular-nums; color-scheme:dark }
.tm-dates input:hover{ border-color:var(--ink-2) }
.gx .tm .tm-pnote{ flex:1 1 100%; margin:0; font-size:.78rem; color:var(--ink-3); line-height:1.5 }
/* a table sorts by any column: the header is the button, an arrow says which way */
.tm-sort{ border:0; padding:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer }
.tm-sort:hover{ color:var(--ink) }
[aria-sort="ascending"] .tm-sort::after{ content:" \25B2"; font-size:.85em }
[aria-sort="descending"] .tm-sort::after{ content:" \25BC"; font-size:.85em }

/* folded: just the header bar */
.tm.is-folded .tm-body, .tm.is-folded .tm-lede, .tm-folded .tm .tm-body, .tm-folded .tm .tm-lede{ display:none }
.tm.is-folded .tm-head, .tm-folded .tm .tm-head{ padding-bottom:clamp(14px,2.4vw,20px); align-items:center }
.tm.is-folded h2, .tm-folded .tm h2{ margin-bottom:0 }

/* ---------- the seven tiles ---------------------------------------------- */
/* every cell draws its right and bottom hairline; the grid is one pixel wider than the glass (which clips it), so the outer edge has none and a tile that spans
   columns needs no special case. The billed rate leads; the income tile takes the last row, wide. */
.tm-tiles{ list-style:none; margin:clamp(14px,2.4vw,20px) -1px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--hairline,rgba(229,231,235,.1)) }
@media(min-width:760px){ .tm-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(min-width:1100px){ .tm-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.tm-cell{ min-width:0; border-bottom:1px solid var(--hairline,rgba(229,231,235,.1)); border-right:1px solid var(--hairline,rgba(229,231,235,.1)) }
.tm-cell[data-tm-cell="made"]{ grid-column:1 / -1 }
@media(min-width:1100px){ .tm-cell[data-tm-cell="made"]{ grid-column:span 2 } }
.gx .tm-tile{ position:relative; display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:clamp(14px,2.2vw,20px) clamp(14px,2.2vw,22px) 14px;
  color:var(--ink); text-decoration:none; border-bottom:0; transition:background .2s var(--ease,ease), box-shadow .2s var(--ease,ease) }
.gx .tm-tile:hover{ background:rgba(255,255,255,.035); border-bottom:0 }
.tm-tile[aria-expanded="true"]{ background:rgba(244,81,30,.08); box-shadow:inset 0 0 0 1px rgba(244,81,30,.55), inset 0 1px 0 rgba(255,255,255,.08) }
.tm-k{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); line-height:1.35 }
.tm-v{ display:block; margin:9px 0 0; font-family:var(--display); font-size:clamp(1.5rem,5vw,2.05rem); line-height:1.05; letter-spacing:-.022em;
  color:var(--ink); font-variant-numeric:tabular-nums }
.tm-v small{ font-family:Arial,sans-serif; font-size:.5em; font-weight:700; color:var(--ink-3); margin-left:.25em; letter-spacing:0 }
.tm-tile[data-tm-tile="rate"] .tm-v{ color:var(--ignition) }
.tm-none{ color:var(--ink-3); font-size:.7em }
.tm-n, .tm-n2{ display:block; margin-top:6px; font-size:.78rem; color:var(--ink-2); line-height:1.4 }
.tm-n2{ margin-top:2px; color:var(--ink-3) }
.tm-n2:empty, .tm-d:empty{ display:none }
.tm-d{ display:block; margin-top:3px; font-size:.74rem; color:var(--ink-3); line-height:1.4; font-variant-numeric:tabular-nums }
.tm-d i{ font-style:normal; font-size:.72em; margin-right:.3em; color:var(--tm-c) }
.tm-spark{ display:block; width:100%; height:30px; margin:12px 0 10px; overflow:visible }
.tm-spark rect{ fill:var(--tm-c); opacity:.92; shape-rendering:crispEdges; transition:opacity .2s var(--ease,ease) }
.tm-spark rect.z{ opacity:.45 }
.tm-spark rect.out{ opacity:.16 }
.tm-tile .chip{ margin-top:auto }

/* ---------- the drawer: three levels ------------------------------------- */
.tm-drawer{ padding:clamp(16px,2.6vw,24px) clamp(16px,3vw,28px) 22px; background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 60%) }
.tm-drawer:not([hidden]){ animation:tm-in .3s var(--ease,ease) both }
@keyframes tm-in{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.tm-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:0 0 12px; font-size:.8rem; color:var(--ink-3) }
.tm-crumbs button{ padding:5px 0; border:0; background:none; color:var(--ink-2); cursor:pointer; border-bottom:1px solid transparent }
.tm-crumbs button:hover{ color:var(--ink); border-bottom-color:var(--ink-3) }
.tm-crumbs [aria-current]{ color:var(--ink); font-weight:700 }
.tm-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 16px; margin:0 0 14px }
.gx .tm-top h3{ margin:0; font-size:1.05rem }
.gx .tm-top h3:focus{ outline:0 }
.tm-sub{ margin:4px 0 0; font-size:.82rem; color:var(--ink-3) }
.tm-views button{ padding:6px 12px; font-size:.74rem }
.tm-sw{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px }
.gx .tm .tm-hint{ margin:12px 0 0; font-size:.78rem; color:var(--ink-3); line-height:1.5 }

/* a chart, and the words that go with it: what it is, what stands out, why it moves, what it leaves out. Side by side where there is room, the chart first on a phone */
.tm-split{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px 36px }
@media(min-width:900px){
  .tm-split{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"chart side" "notes side"; align-items:start }
  .tm-chart{ grid-area:chart } .tm-side{ grid-area:side } .tm-split > .tm-notes{ grid-area:notes }
}
.tm-chart, .tm-side{ min-width:0 }
.gx .tm .tm-h4{ margin:0 0 9px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); line-height:1.45 }
.gx .tm .tm-h4 span{ text-transform:none; letter-spacing:.02em; margin-left:.6em }
.gx .tm .tm-h4:not(:first-child){ margin-top:22px }
.gx .tm .tm-about{ margin:0 0 16px; max-width:62ch; color:var(--ink-2); font-size:.9rem; line-height:1.55 }
.tm-stands{ margin:0 0 16px }
.tm-stands ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.gx .tm .tm-stands li{ position:relative; padding-left:16px; font-size:.86rem; line-height:1.5; color:var(--ink-2) }
.tm-stands li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--tm-c) }
.tm-stands li b, .tm-notes b, .tm-about b, .tm-how-i p b{ color:var(--ink); font-weight:700 }
.tm-stands .chip{ margin-left:.4em; vertical-align:.1em }
.tm-notes{ display:grid; gap:11px }
.gx .tm .tm-notes p{ margin:0; font-size:.8rem; line-height:1.55; color:var(--ink-3) }
.tm-moves{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:7px; font-size:.84rem; line-height:1.5; color:var(--ink-2) }
.tm-rc{ margin:26px 0 0 }
.gx .tm .tm-rc .tm-h4{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px }
.gx .tm .tm-rc .tm-h4 span{ margin-left:0 }
.tm-link{ padding:0; border:0; border-bottom:1px solid var(--hairline-strong,rgba(229,231,235,.2)); background:none; text-align:left; cursor:pointer; color:var(--ink) }
.tm-link:hover{ border-bottom-color:var(--ink) }

/* bars */
.tm-bars{ --plot:clamp(170px,26vw,220px); position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:clamp(4px,1.2vw,10px); align-items:start }
/* every column's plot is the same height whatever its label wraps to, so a bar's length is a value and nothing else; the baseline is drawn once, under the plots */
.tm-bars::after{ content:""; position:absolute; left:0; right:0; top:var(--plot); border-top:1px solid var(--hairline-strong,rgba(229,231,235,.2)); pointer-events:none }
.tm-col{ position:relative; display:flex; flex-direction:column; min-width:0; padding:0; border:0; background:none; cursor:pointer; text-align:center; color:var(--ink) }
.tm-area{ position:relative; flex:0 0 var(--plot); height:var(--plot); min-height:0 }
.tm-cb{ position:absolute; left:14%; right:14%; bottom:0; height:calc(var(--h,0) * (100% - 26px)); min-height:3px; border-radius:5px 5px 0 0;
  background:var(--tm-c); background:linear-gradient(180deg,var(--tm-c),color-mix(in srgb,var(--tm-c) 55%,transparent)); transform-origin:bottom;
  animation:tm-rise .55s cubic-bezier(.2,.75,.3,1) both; animation-delay:calc(var(--i,0) * .04s) }
@keyframes tm-rise{ from{ transform:scaleY(0) } to{ transform:none } }
.tm-cv{ position:absolute; left:-6px; right:-6px; bottom:calc(var(--h,0) * (100% - 26px) + 5px); font-size:.8rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1;
  text-shadow:var(--halo) }
.tm-cl{ flex:0 0 auto; padding:8px 0 2px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  line-height:1.3 }
.tm-br{ display:none }
.tm-cl em{ display:block; font-style:normal; letter-spacing:.04em; color:var(--ink-3); opacity:.8 }
.tm-col.out .tm-cb{ opacity:.28 }
.tm-col.out .tm-cv{ color:var(--ink-3) }
.tm-col:hover .tm-cb, .tm-col:focus-visible .tm-cb{ filter:brightness(1.18) }
.tm-col.na .tm-cv{ color:var(--ink-3); font-weight:400 }
.tm-col[aria-current="true"] .tm-cl{ color:var(--ink); font-weight:700 }

/* the chargers: one row each, cheapest first */
.tm-hbars{ display:grid; gap:2px; padding-bottom:8px; border-bottom:1px solid var(--hairline-strong,rgba(229,231,235,.2)) }
.tm-hrow{ display:grid; grid-template-columns:minmax(9rem,14rem) minmax(0,1fr) 4.4rem; align-items:center; gap:4px 14px; width:100%; padding:8px 6px; border:0; border-radius:8px; background:none; text-align:left; cursor:pointer; color:var(--ink) }
.tm-hrow:hover, .tm-hrow:focus-visible{ background:rgba(255,255,255,.045) }
.tm-hl{ display:block; min-width:0 }
.tm-hl b{ display:block; font-size:.9rem; font-weight:700; line-height:1.25 }
.tm-hl em{ display:block; font-style:normal; font-size:.72rem; color:var(--ink-3); line-height:1.4 }
.tm-ht{ display:block; height:14px; border-radius:5px; background:rgba(255,255,255,.045) }
.tm-hb{ display:block; height:100%; width:calc(var(--h,0) * 100%); min-width:3px; border-radius:5px; background:var(--tm-c);
  background:linear-gradient(90deg,color-mix(in srgb,var(--tm-c) 50%,transparent),var(--tm-c)); transform-origin:left;
  animation:tm-grow .55s cubic-bezier(.2,.75,.3,1) both; animation-delay:calc(var(--i,0) * .04s) }
@keyframes tm-grow{ from{ transform:scaleX(0) } to{ transform:none } }
.tm-hv{ text-align:right; font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums }
.tm-hrow.out .tm-hb{ opacity:.28 }
.tm-hrow.out .tm-hv, .tm-hrow.out .tm-hl b{ color:var(--ink-3) }
.tm-hrow.na .tm-hv{ color:var(--ink-3); font-weight:400 }
@media(max-width:599.98px){
  .tm-hrow{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"l l" "t v" }
  .tm-hl{ grid-area:l } .tm-ht{ grid-area:t } .tm-hv{ grid-area:v }
}

/* line */
.tm-line{ position:relative; height:clamp(210px,34vw,270px); border-bottom:1px solid var(--hairline-strong,rgba(229,231,235,.2)); padding-bottom:0 }
.tm-plot{ position:absolute; inset:26px 0 0 0 }
.tm-plot svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.tm-ln{ fill:none; stroke:var(--tm-c); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke }
.tm-ar{ fill:var(--tm-c); opacity:.12 }
.tm-grid{ stroke:var(--hairline,rgba(229,231,235,.1)); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:3 4 }
.tm-pt{ position:absolute; width:30px; height:30px; margin:0 0 -15px -15px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center }
.tm-pt::before{ content:""; width:11px; height:11px; border-radius:50%; background:var(--g-black,#05070D); border:2.5px solid var(--tm-c); transition:transform .15s var(--ease,ease) }
.tm-pt:hover::before, .tm-pt:focus-visible::before{ transform:scale(1.35) }
.tm-pt.out::before{ opacity:.35 }
.tm-pv{ position:absolute; bottom:calc(100% + 1px); left:50%; transform:translateX(-50%); font-size:.8rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-shadow:var(--halo) }
.tm-ax{ display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:clamp(4px,1.2vw,10px) }
.tm-ax .tm-cl{ text-align:center }
.tm-scale{ position:absolute; left:0; font-size:.62rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-3); letter-spacing:.06em; pointer-events:none }

/* table: always there, and the accessible version of whatever the chart says */
.tm-tw{ overflow-x:auto; border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px) }
.tm-table{ width:100%; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums }
.tm-table th, .tm-table td{ padding:10px 14px; text-align:left; border-bottom:1px solid var(--hairline-soft,rgba(229,231,235,.06)); vertical-align:middle }
.tm-table thead th{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400;
  border-bottom:1px solid var(--hairline,rgba(229,231,235,.1)); white-space:nowrap }
.tm-table tbody tr:last-child th, .tm-table tbody tr:last-child td{ border-bottom:0 }
.tm-table .n{ text-align:right; white-space:nowrap }
.tm-table tbody th{ font-weight:400 }
.tm-table tr.out{ color:var(--ink-3) }
.tm-row{ display:block; width:100%; padding:2px 0; border:0; background:none; text-align:left; cursor:pointer; color:var(--ink-2); border-bottom:1px solid transparent }
.tm-row:hover{ color:var(--ink) }
.tm-row b{ color:var(--ink); font-weight:700 }
.tm-subtle{ color:var(--ink-3); font-weight:400 }

/* the day, and the invoice: a card of everything known */
.tm-card{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:12px; overflow:hidden }
@media(min-width:640px){ .tm-card{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
/* every cell draws its right and bottom hairline and the card's frame clips the outer edge, so a last row that is not full leaves no gray block */
.tm-stat{ margin:0 -1px -1px 0; padding:12px 14px; background:rgba(8,11,20,.55); min-width:0; border-right:1px solid var(--hairline,rgba(229,231,235,.1)); border-bottom:1px solid var(--hairline,rgba(229,231,235,.1)) }
.tm-stat dt{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.tm-stat dd{ margin:5px 0 0; font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); overflow-wrap:anywhere }
.tm-stat.is-lead{ box-shadow:inset 0 0 0 1px rgba(244,81,30,.55); background:rgba(244,81,30,.08) }
.tm-lines{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px }
.tm-lines li{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 14px; border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:10px; background:rgba(8,11,20,.4) }
.tm-lines b{ font-variant-numeric:tabular-nums }
.tm-walk{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 14px; margin:14px 0 0 }
.tm-walk button{ padding:8px 14px; border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); border-radius:var(--r-ctl,2px); background:rgba(255,255,255,.04); color:var(--ink-2); cursor:pointer; font-size:.8rem; font-weight:700 }
.tm-walk button:hover:not(:disabled){ color:var(--ink); border-color:var(--ink-2) }
.tm-walk button:disabled{ opacity:.35; cursor:default }
.tm-go{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:20px 0 0; font-size:.88rem }
.tm-how{ padding:0 clamp(16px,3vw,28px); border-top:1px solid var(--hairline,rgba(229,231,235,.1)) }
.tm-how > summary{ display:flex; align-items:center; gap:.7em; padding:14px 0; cursor:pointer; list-style:none; color:var(--ink-3); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.4 }
.tm-how > summary:hover{ color:var(--ink) }
.tm-how > summary::after{ content:""; margin-left:auto; flex:0 0 auto; width:.5em; height:.5em; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-.1em) rotate(45deg); transition:transform .2s var(--ease,ease) }
.tm-how[open] > summary::after{ transform:translateY(.1em) rotate(-135deg) }
.tm-how > summary:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px }
.tm-how-l{ display:grid; gap:20px 32px; margin:0; padding:2px 0 20px }
@media(min-width:760px){ .tm-how-l{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1100px){ .tm-how-l{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.tm-how-i{ min-width:0 }
.tm-how-i dt{ margin:0 0 7px; font-family:var(--display); font-size:1rem; color:var(--ink) }
.tm-how-i dd{ margin:0; display:grid; gap:8px }
.gx .tm .tm-how-i p{ margin:0; font-size:.84rem; line-height:1.55; color:var(--ink-2) }
.tm-note{ margin:0; padding:14px clamp(16px,3vw,28px) clamp(16px,2.6vw,22px) }

/* ---------- phone: one of the four sizes, never a size of its own ---------- */
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .gx .tm-lede, .tm-range button, .tm-fold, .tm-views button, .tm-crumbs, .tm-table, .tm-row, .tm-walk button, .tm-go, .tm-stat dd, .tm-lines li,
  .gx .tm .tm-about, .gx .tm .tm-stands li, .tm-moves, .gx .tm .tm-how-i p, .tm-hl b, .tm-hv, .tm-link{ font-size:var(--t-sub) }
  .tm-n, .tm-n2, .tm-d, .tm-cv, .tm-pv, .tm-sub, .gx .tm .tm-hint, .gx .tm .tm-notes p, .tm-hl em{ font-size:var(--t-foot) }
  .tm-k, .tm-cl, .tm-stat dt, .tm-table thead th, .tm-scale, .gx .tm .tm-h4, .tm-how > summary, .tm-pk{ font-size:var(--t-cap) }
  .tm-pickb, .tm-pick button{ font-size:var(--t-sub) }
  .tm-dates input{ font-size:var(--t-body); width:100%; min-width:0 }
  /* on a phone a date field sits under its label, and From and To share a row */
  .tm-pgrp.tm-dates{ display:grid; grid-auto-flow:column; grid-template-rows:auto auto; grid-auto-columns:minmax(0,1fr); gap:6px 10px; width:100% }
  .gx .tm .tm-pnote{ font-size:var(--t-foot) }
  .tm-how-i dt{ font-size:var(--t-body) }
  .tm-v small{ font-size:max(.5em,var(--t-cap)) }
  .tm-v .tm-none{ font-size:var(--t-body) }
  .tm-range button{ padding:7px 11px }
  .tm-table th, .tm-table td{ padding:10px 10px }
  /* the week labels in a bar column are mixed case with no tracking, so "Sep 13" fits a seventh of the width */
  .tm-cl{ text-transform:none; letter-spacing:0 }
  .tm-br{ display:inline }
  .tm-d i{ font-size:var(--t-cap) }
  .gx .tm-top h3{ font-size:var(--t-body) }
  /* Hide takes the top right corner, so the range switch has the row under the heading to itself */
  .tm-head{ position:relative }
  .tm-js .tm-ctl{ display:contents }
  .tm-fold{ position:absolute; top:14px; right:14px; padding:6px 12px }
  .gx .tm-eyebrow, .gx .tm h2{ padding-right:92px }
  .tm.is-folded .tm-fold{ top:50%; transform:translateY(-50%) }
}

/* a table that is wider than a phone (the rate card, a day against the days before): each row becomes a card and every figure carries its own label */
@media (max-width:599.98px){
  .tm-stk thead{ display:none }
  .tm-stk, .tm-stk tbody, .tm-stk tr, .tm-stk th, .tm-stk td{ display:block }
  .tm-stk tbody tr{ padding:10px 14px 8px; border-bottom:1px solid var(--hairline-soft,rgba(229,231,235,.06)) }
  .tm-stk tbody tr:last-child{ border-bottom:0 }
  .tm-stk tbody th{ padding:2px 0 6px; border:0; color:var(--ink); font-weight:700 }
  .tm-stk td{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:4px 0; border:0; text-align:right; white-space:normal }
  .tm-stk td::before{ content:attr(data-l); flex:0 0 auto; text-align:left; color:var(--ink-3) }
}

/* a narrow phone: a seventh of the width cannot hold "before TezLab" or "no figure", so the small line under a day leaves the column and an empty column
   shows a dash (the table, the day's card and a screen reader keep the words) */
@media (max-width:389.98px){
  .tm-bars .tm-cl em, .tm-ax .tm-cl em{ display:none }
}
.tm-nfs{ display:none }
@media (max-width:419.98px){ .tm-nfl{ display:none } .tm-nfs{ display:inline } }

/* the smallest phones (320px): three pills at 15px are wider than the screen, so they wrap inside their frame */
@media (max-width:359.98px){
  .tm-range{ flex-wrap:wrap; justify-content:center }
  .tm-range button{ padding:7px 10px }
}

@media(prefers-reduced-motion:reduce){
  .tm *, .tm *::before, .tm *::after{ animation:none !important; transition:none !important }
}
/* forced colors (Windows high contrast): a bar, a point and a line keep a colour of their own */
@media (forced-colors:active){
  .tm-cb, .tm-hb{ forced-color-adjust:none; background:Highlight !important }
  .tm-ht{ forced-color-adjust:none; background:transparent; outline:1px solid CanvasText }
  .tm-pt::before{ forced-color-adjust:none; background:Canvas; border-color:Highlight }
  .tm-ln{ stroke:Highlight }
  .tm-spark rect{ fill:Highlight }
}
@media print{ .tm{ display:none !important } }