/* ==========================================================================
   The Record: the day card, the rollups and the calendar.
   Loaded after garage.css and glass.css by the pages tools/recordpages.py writes. It adds; it overrides nothing the
   rest of the site uses. On a phone every piece of text is one of the four sizes in garage.css (--t-body, --t-sub,
   --t-foot, --t-cap): a class set in drawn units or in em would fail tools/phone-lint.mjs.
   ========================================================================== */

/* ---------- the poster: a day with a photo shows the photo first --------------------------------------------------- */
.rc-spacer{ height:clamp(8px,2vh,24px) }
.rc-spacer-photo{ height:clamp(140px,36svh,400px) }
body.rc-photo::before{
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(5,7,13,0) 55%, rgba(5,7,13,.40) 100%),
    linear-gradient(180deg, rgba(5,7,13,.16) 0%, rgba(5,7,13,.06) 24%, rgba(5,7,13,.50) 46%, rgba(5,7,13,.78) 66%, var(--g-black) 100%),
    var(--page-bg);
}
/* A portrait phone pins the plate into a 62vh band anchored at the top (garage.css). A photo's own vertical focus would push
   it down inside that band while the veil stays at the top, so on a phone only its horizontal focus is used. */
@media(max-width:720px) and (orientation:portrait){
  body.rc-photo::before{
    background-position:center top, center top, var(--rc-x,50%) top;
    background-image:
      radial-gradient(140% 70% at 50% 0%, rgba(5,7,13,0) 40%, rgba(5,7,13,.34) 100%),
      linear-gradient(180deg, rgba(5,7,13,.18) 0%, rgba(5,7,13,.10) 22%, rgba(5,7,13,.56) 48%, rgba(5,7,13,.80) 66%, var(--g-black) 92%),
      var(--page-bg) !important;
  }
}

.gx h1.rc-date{ font-family:var(--display); font-size:clamp(2.4rem,11vw,6.2rem); line-height:.9; letter-spacing:-.04em; margin:.1em 0 .2em }
.gx h1.rc-date span{ color:var(--ink) }
.gx h1.rc-date .rc-dow{ display:block; font-family:Arial,Helvetica,sans-serif; font-size:.26em; font-weight:700; letter-spacing:.2em;
                        text-transform:uppercase; color:var(--ink-2); margin:0 0 .5em }
.gx h1.rc-date .rc-n{ color:var(--ignition) }
.gx > p.rc-cap{ margin:12px 0 0; font-size:.82rem; color:var(--ink-2) }

/* ---------- the key figures ------------------------------------------------------------------------------------------- */
.rc-keys{ margin-top:24px }
@media(max-width:759.98px){ .rc-k3 > :first-child, .rc-k5 > :first-child{ grid-column:1 / -1 } }   /* an odd count: the commanding tile takes the row */
@media(min-width:760px){
  .rc-k2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .rc-k4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

/* ---------- the stack: earned by stream ------------------------------------------------------------------------------ */
/* The channels: the two delivery channels share the ignition hue, the two brands share sky, and the lighter step is the second of each pair. */
.s-uber_eats{ background:var(--m1) }
.s-instacart{ background:#FF9A6B }
.s-paddock20{ background:var(--m2) }
.s-paddockgavin{ background:#6CC3EA }
.s-direct{ background:var(--m3) }
.s-car, .s-other{ background:var(--m-neutral) }
.rc-bar{ display:flex; gap:2px; height:14px; border-radius:7px; overflow:hidden; margin:14px 0 6px; background:rgba(255,255,255,.08) }
.rc-bar i{ display:block; height:100%; min-width:4px }
.rc-lines{ list-style:none; margin:0; padding:0 }
.rc-line{ display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:4px 12px; align-items:baseline; padding:13px 0;
          border-top:1px solid var(--hairline,rgba(229,231,235,.10)) }
.rc-line:first-child{ border-top:0 }
.rc-sw{ width:12px; height:12px; border-radius:3px; align-self:center }
.rc-nm{ color:var(--ink); font-weight:700; min-width:0; overflow-wrap:anywhere }
.rc-amt{ font-family:var(--display); font-size:1.25rem; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.rc-meta{ grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; color:var(--ink-2); font-size:.8rem }
.rc-h{ font-variant-numeric:tabular-nums }
/* The hours table: four columns that fit a phone, the channel and the kind under the project's name (recordpages.hours_table) */
.tw table.rc-hours .wh{ display:block; margin-top:2px; font-size:.78rem; color:var(--ink-3) }
@media(max-width:640px){ .tw table.rc-hours th{ white-space:normal } }
@media(max-width:360px){ .tw table.rc-hours th, .tw table.rc-hours td{ padding-left:3px; padding-right:3px } }
.gx p.rc-kept{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0; padding:13px 0 0; color:var(--ink);
               border-top:1px solid var(--hairline,rgba(229,231,235,.10)); font-variant-numeric:tabular-nums }
.rc-kept > span:first-child{ color:var(--ink-2); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.rc-kept small{ flex-basis:100%; color:var(--ink-3); font-size:.78rem }

/* ---------- context and small lists ----------------------------------------------------------------------------------- */
.rc-in{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:28px 0 0 }
.rc-in .k{ font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-right:6px }
.gx .rc-in a{ padding:7px 13px; border-radius:var(--r-ctl,2px); border:1px solid var(--hairline-strong,rgba(229,231,235,.2));
              color:var(--ink); background:rgba(19,26,44,.5); font-size:.82rem; line-height:1.3 }
.gx .rc-in a:hover{ border-color:var(--ink-2) }
.rc-hi{ list-style:none; margin:0; padding:0 }
.rc-hi li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:10px 0; border-top:1px solid var(--hairline-soft,rgba(229,231,235,.06));
           color:var(--ink); font-variant-numeric:tabular-nums }
.rc-hi li:first-child{ border-top:0 }
.rc-hi .k{ flex:0 0 12.5em; font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
.rc-corr{ margin:0; padding-left:1.1em; color:var(--ink-2) }
.rc-corr li{ margin:.5em 0 }
.rc-corr b{ color:var(--ink) }
.rc-defs ul{ margin:0; padding-left:1.15em; color:var(--ink-2) }
.rc-defs li{ margin:.65em 0; line-height:1.55 }
.gx p.rc-extra{ margin:20px 0 0; font-size:.86rem }
.gx p.rc-sub{ margin:28px 0 2px; font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }

/* ---------- the tabs: the reports side by side, on every Record page ---------------------------------------------- */
.rc-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px }
.gx .rc-tabs a{ padding:8px 15px; border-radius:var(--r-ctl,2px); border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); color:var(--ink);
                background:rgba(19,26,44,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
                font-size:.82rem; font-weight:700; letter-spacing:.04em; line-height:1.2 }
.gx .rc-tabs a:hover{ border-color:var(--ink-2) }
.gx .rc-tabs a[aria-current="page"]{ background:rgba(244,81,30,.22); border-color:rgba(244,81,30,.65) }

/* ---------- the hub: the day, the week, the month, the quarter, the year, each with the one before -------------- */
.gx p.rc-since{ margin:.2em 0 0; color:var(--ink); font-size:.92rem; font-variant-numeric:tabular-nums }
.rc-pair h2{ margin:0 0 .55em }
.rc-pair-grid{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr) }
@media(min-width:760px){ .rc-pair-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.gx a.rc-rep, .gx .rc-rep{ display:grid; gap:9px; align-content:start; padding:20px var(--pad); color:var(--ink); border-bottom:0 }
.rc-rep .k{ font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ignition) }
.rc-rt{ font-family:var(--display); font-size:clamp(1.3rem,4.6vw,1.8rem); line-height:1.08; letter-spacing:-.02em }
.rc-rs{ color:var(--ink-2); font-size:.84rem }
.rc-trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:8px 0 2px; padding-top:12px; border-top:1px solid var(--hairline,rgba(229,231,235,.10)) }
.rc-fig{ display:grid; gap:3px; align-content:start; min-width:0 }
.rc-fv{ font-family:var(--display); font-size:clamp(1.15rem,3.8vw,1.55rem); line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.rc-fv small{ font-family:Arial,Helvetica,sans-serif; font-size:.5em; font-weight:700; color:var(--ink-2); margin-left:.2em; letter-spacing:0 }
.rc-fk{ font-size:max(10px,.6rem); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3) }
.rc-fs{ font-size:.74rem; color:var(--ink-2); overflow-wrap:anywhere; line-height:1.35 }
.rc-go{ color:var(--sky); font-weight:700; font-size:.86rem; margin-top:4px }
.rc-none{ opacity:.82 }
.rc-recent{ list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media(min-width:760px){ .rc-recent{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.gx a.rc-rd{ display:grid; gap:3px; align-content:start; padding:14px; color:var(--ink); border-bottom:0; height:100% }
.rc-rdd{ font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ignition) }
.rc-rdm{ font-family:var(--display); font-size:1.15rem; font-variant-numeric:tabular-nums }
.rc-rds, .rc-rdj{ font-size:.78rem; color:var(--ink-2); line-height:1.35; overflow-wrap:anywhere }
.rc-idx{ padding-top:10px; padding-bottom:14px }
.rc-idx .tw{ margin-top:6px }

/* ---------- the case: moments, and how the driving time was used ------------------------------------------------------ */
.rc-lb{ color:var(--ink-2); font-weight:400; margin-left:.45em }
.rc-mos{ list-style:none; margin:0; padding:0 }
.rc-mo{ padding:15px 0; border-top:1px solid var(--hairline-soft,rgba(229,231,235,.06)) }
.rc-mo:first-child{ border-top:0; padding-top:2px }
.rc-mo .k{ font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ignition) }
.gx .rc-mo p{ margin:.45em 0 0; color:var(--ink); line-height:1.55 }
.rc-rows{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:14px }
.rc-trow{ display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:5px 12px; align-items:baseline }
.rc-hv{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:700; font-size:.88rem }
.rc-trk{ grid-column:2 / -1; height:10px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden }
.rc-trk i{ display:block; height:100%; border-radius:5px }

/* ---------- the calendar: a heatmap of days --------------------------------------------------------------------------- */
.rc-cals{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr) }
@media(min-width:600px){ .rc-cals{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:900px){ .rc-cals{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.rc-month{ padding:16px var(--pad) 18px }
.rc-month h3{ margin:0 0 10px }
.gx .rc-month h3 a{ color:var(--ink); border-bottom:0 }
.rc-cal-head, .rc-cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px }
.rc-cal-head{ margin-bottom:4px }
.rc-cal-head span{ text-align:center; font-size:max(10px,.6rem); font-weight:700; letter-spacing:.1em; color:var(--ink-3) }
.rc-c{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:8px; border:1px solid transparent;
       font-size:.7rem; color:var(--ink-3); font-variant-numeric:tabular-nums }
.gx a.rc-c{ border-bottom:0; color:var(--ink); transition:transform var(--dur,200ms) var(--ease,ease), border-color var(--dur,200ms) var(--ease,ease) }
.gx a.rc-c:hover{ transform:translateY(-1px); border-color:var(--ink-2) }
.gx a.rc-c:focus-visible{ outline:2px solid var(--sky); outline-offset:2px }
.rc-c.is-pad{ visibility:hidden }
.rc-c.is-none{ border-color:var(--hairline-soft,rgba(229,231,235,.06)); opacity:.65 }
.rc-c.is-car.l1{ background:rgba(138,147,160,.16) }
.rc-c.is-car.l2{ background:rgba(138,147,160,.28) }
.rc-c.is-car.l3{ background:rgba(138,147,160,.42) }
.rc-c.is-car.l4{ background:rgba(138,147,160,.60) }
.rc-c.is-inc{ border-color:rgba(244,81,30,.55); color:#fff }
.rc-c.is-inc.l1{ background:rgba(244,81,30,.24) }
.rc-c.is-inc.l2{ background:rgba(244,81,30,.40) }
.rc-c.is-inc.l3{ background:rgba(244,81,30,.58) }
.rc-c.is-inc.l4{ background:rgba(244,81,30,.80) }
.rc-c.is-stack::after{ content:''; position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%; background:var(--sky) }
.rc-legend .rc-c{ display:inline-flex; width:12px; height:12px; aspect-ratio:auto; border-radius:3px; vertical-align:-2px }

@media(prefers-reduced-motion:reduce){ .gx a.rc-c{ transition:none } .gx a.rc-c:hover{ transform:none } }

/* The All days list: a table with a header on a screen that can hold one, and on a phone a plain list of tappable rows. */
.rc-sfx{ display:none }
@media (max-width:599.98px){
  .rc-idx .tw{ overflow:visible }
  .rc-idx table{ display:block; min-width:0; width:100% }
  .rc-idx thead{ display:none }
  .rc-idx tbody{ display:block }
  .rc-idx tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; row-gap:4px; padding:14px 0; border-top:1px solid var(--hairline,rgba(229,231,235,.10)) }
  .rc-idx tr:first-child{ border-top:0 }
  .rc-idx td{ display:block; padding:0; border:0; min-width:0 }
  .rc-idx td.d{ grid-column:1; grid-row:1; font-weight:700 }
  .rc-idx td.m{ grid-column:2; grid-row:1; text-align:right; font-weight:700; white-space:nowrap }
  .rc-idx td.j{ grid-column:1; grid-row:2; color:var(--ink-2) }
  .rc-idx td.s{ grid-column:2; grid-row:2; text-align:right; color:var(--ink-2); white-space:nowrap }
  .rc-idx td.e{ grid-column:1 / -1; grid-row:3; color:var(--ink) }
  .rc-idx td.j, .rc-idx td.s, .rc-idx td.e{ font-size:var(--t-sub) }
  .rc-sfx{ display:inline }
}


/* ---------- miles by purpose: who counted each mile --------------------------------------------------------------- */
.s-app{ background:var(--m1) }
.s-ovh{ background:var(--m3) }
.s-oth{ background:var(--m-neutral) }
.s-unk{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.34) 0 3px, rgba(255,255,255,.08) 3px 7px) }
.rc-u{ font-family:Arial,Helvetica,sans-serif; font-size:.5em; font-weight:700; color:var(--ink-2); margin-left:.2em; letter-spacing:0 }
.rc-help .cd-grid{ margin-top:16px }

/* ---------- the kinds of day: an icon, a name and a calendar mark ---------------------------------------------------- */
.mk{ width:1.35em; height:1.35em; flex:none; display:inline-block; vertical-align:-.28em }
/* the day's kind sits a little clear of the date above it (2026-10-09: the owner asked for one to two millimetres more; 8px is about 1.3 mm on a phone) */
.rc-kind{ margin:.15em 0 .7em; padding-top:8px }
.gx a.rc-type{ display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 10px; border:1px solid currentColor; border-radius:var(--r-ctl,2px);
               background:rgba(19,26,44,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink);
               font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.2 }
.gx a.rc-type:hover{ background:rgba(19,26,44,.78) }
.rc-type .mk{ width:20px; height:20px; vertical-align:0 }
.gx a.rc-type.t-rest{ color:var(--sky) }
.gx a.rc-type.t-charge{ color:var(--amber) }
.gx a.rc-type.t-open{ color:var(--ignition) }
.gx a.rc-type.t-none{ color:var(--ink-3) }
.rc-c.is-rest{ border-color:rgba(87,180,230,.55); color:var(--ink); background:repeating-linear-gradient(135deg, rgba(87,180,230,.34) 0 3px, rgba(87,180,230,.07) 3px 7px) }
.rc-c.is-charge{ border:1px dashed rgba(246,162,43,.8); color:var(--ink) }
.rc-c.is-open{ border:1px dashed var(--ink-2) }
.rc-legend .rc-c.is-rest, .rc-legend .rc-c.is-charge{ vertical-align:-2px }

/* ---------- the Legend ---------------------------------------------------------------------------------------------- */
.lg h2{ margin-bottom:.4em }
.lg h3.lg-sub{ margin:1.4em 0 .5em; font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
.lg-rows, .lg-chips, .lg-list, .lg-flow, .lg-steps, .lg-sws{ list-style:none; margin:14px 0 0; padding:0 }
.lg-type{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:6px 16px; padding:18px 0; border-top:1px solid var(--hairline,rgba(229,231,235,.10)) }
.lg-type:first-child{ border-top:0 }
.lg-ic{ color:var(--ink); line-height:0 }
.lg-ic .mk{ width:30px; height:30px; vertical-align:0 }
.lg-type.t-rest .lg-ic{ color:var(--sky) }
.lg-type.t-charge .lg-ic{ color:var(--amber) }
.lg-type.t-open .lg-ic{ color:var(--ignition) }
.lg-type.t-none .lg-ic{ color:var(--ink-3) }
.lg-tx h3{ margin:0 0 .25em; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px }
.lg-n{ font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
.gx .lg-tx p{ margin:.5em 0 0; color:var(--ink-2); line-height:1.55 }
.gx .lg-tx p.lg-line{ color:var(--ink); font-size:1.02rem; margin-top:0 }
.lg-k{ display:block; font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px }
.lg-sws{ display:flex; flex-wrap:wrap; gap:10px 22px }
.lg-sws li{ display:flex; align-items:center; gap:9px; color:var(--ink-2); font-size:.86rem }
.lg-sws .rc-c{ display:inline-block; width:20px; height:20px; aspect-ratio:auto; border-radius:5px; flex:none }
.lg-chips li{ display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:10px; align-items:baseline; padding:10px 0; border-top:1px solid var(--hairline-soft,rgba(229,231,235,.06)); color:var(--ink-2); line-height:1.5 }
.lg-chips li:first-child{ border-top:0 }
.gx p.lg-eq-one{ margin:14px 0 0; color:var(--ink); font-size:.92rem }
.lg-eqs{ margin:14px 0 0 }
.lg-eq{ display:grid; grid-template-columns:minmax(9em,13em) minmax(0,1fr); gap:6px 18px; padding:13px 0; border-top:1px solid var(--hairline-soft,rgba(229,231,235,.06)) }
.lg-eq:first-child{ border-top:0 }
.lg-eq dt{ color:var(--ink); font-weight:700 }
.lg-eq dd{ margin:0; min-width:0 }
.lg-eq code{ display:inline-block; max-width:100%; padding:3px 9px; border-radius:6px; background:rgba(255,255,255,.06); color:var(--ink);
             font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86rem; line-height:1.5; overflow-wrap:anywhere }
.lg-eq dd span{ display:block; margin-top:5px; color:var(--ink-2); font-size:.84rem; line-height:1.5 }
.lg-list{ padding-left:1.15em; list-style:disc; color:var(--ink-2) }
.lg-list li{ margin:.6em 0; line-height:1.55 }
.lg-list b{ color:var(--ink) }
.lg-flow{ display:grid; gap:0; grid-template-columns:minmax(0,1fr) }
.lg-flow li{ display:grid; gap:6px; align-content:start; padding:16px 0; border-top:1px solid var(--hairline-soft,rgba(229,231,235,.06)) }
.lg-flow li:first-child{ border-top:0 }
.lg-flow h3{ margin:0; font-size:1rem }
.gx .lg-flow p{ margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.55 }
@media(min-width:900px){
  .lg-flow{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 }
  .lg-flow li{ padding:6px 18px 6px 18px; border-top:0; border-left:1px solid var(--hairline,rgba(229,231,235,.10)) }
  .lg-flow li:first-child{ padding-left:0; border-left:0 }
}
.lg-steps li{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; padding:13px 0; border-top:1px solid var(--hairline-soft,rgba(229,231,235,.06)) }
.lg-steps li:first-child{ border-top:0 }
.lg-num{ display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--hairline-strong,rgba(229,231,235,.2)); border-radius:50%; font-size:.8rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums }
.lg-steps h3{ margin:0 0 .2em; font-size:1rem }
.gx .lg-steps p{ margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.55 }
.lg-legal .lg-wm{ position:relative; display:inline-block; margin:8px 0 2px }
.lg-legal .lg-wm img{ display:block; width:224px; max-width:100%; height:auto }
.lg-tm{ position:absolute; top:55%; left:calc(81.2% + 3px); font-size:.7rem; line-height:1; color:var(--ink-3) }
.gx p.lg-copy{ margin:.6em 0 .3em; color:var(--ink); font-weight:700; font-size:1rem }
@media(max-width:599.98px){
  .lg-chips li{ grid-template-columns:minmax(0,1fr); gap:5px }
  .lg-eq{ grid-template-columns:minmax(0,1fr) }
}

/* ---------- the filters: the tab row opens a picker for each report (assets/record-filter.js) -------------------------------- */
/* The caret's room is there from the first paint and only its colour arrives with the script: adding the box afterwards made the tab row wrap onto another line
   on a phone and moved the whole page down 44px (a layout shift of 0.25 on every Record page, measured 2026-10-11). */
.gx .rc-tabs a[data-rc]:not([data-rc="days"])::after{ content:''; display:inline-block; width:0; height:0; margin-left:8px; vertical-align:2px;
  border:4px solid transparent; border-top-color:transparent; border-bottom-width:0 }
.rc-js .gx .rc-tabs a[data-rc]:not([data-rc="days"])::after{ border-top-color:currentColor }
.rc-js .gx .rc-tabs a.is-open::after{ border-top-width:0; border-bottom:4px solid currentColor }
.gx .rc-tabs a.is-open{ border-color:var(--ink-2) }
.gx .rc-tabs a.is-open[aria-current="page"]{ border-color:rgba(244,81,30,.65) }
.rc-pick{ margin:0 0 var(--gap,16px); padding:16px var(--pad,20px) 20px }
.rc-pick[hidden]{ display:none }
.rc-tabs a, .rc-pk-nav, .gx a.rc-pk-i, .rc-pick a.rc-c, .rc-pk-go{ touch-action:manipulation }          /* a quick second tap steps the month again, it does not zoom the page */
.rc-pick-day{ max-width:468px }
.rc-pick-range{ max-width:680px }
.rc-pk-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; max-width:420px }
.gx .rc-pick p.rc-pk-title{ margin:0 0 12px; color:var(--ink); font-size:1.05rem; font-weight:700; line-height:1.25 }
.gx .rc-pick .rc-pk-head p.rc-pk-title{ margin:0 }
.gx .rc-pick p.rc-pk-title:focus{ outline:none }
.rc-pk-nav{ min-width:44px; min-height:44px; padding:0 14px; border:0; border-radius:0; background:rgba(229,231,235,.07); color:var(--ink); font:inherit; font-size:1rem; font-weight:700; cursor:pointer;
  box-shadow:inset 3px 0 0 rgba(229,231,235,.2), inset 0 -1px 0 rgba(229,231,235,.36); clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%) }
.rc-pk-nav:hover:not(:disabled){ background:rgba(229,231,235,.12) }
.rc-pk-nav:focus-visible{ outline:2px solid transparent; box-shadow:inset 4px 0 0 var(--ignition), inset 0 -2px 0 var(--ignition) }
.rc-pk-nav:disabled{ opacity:.35; cursor:default }
.rc-pk-cal{ max-width:420px }
.rc-pk-cal .rc-c[aria-current="page"]{ outline:2px solid var(--ignition); outline-offset:1px }
.rc-pk-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) }
.gx a.rc-pk-i{ position:relative; display:grid; gap:3px; box-sizing:border-box; min-height:52px; padding:10px 24px 10px 16px; border:0; border-radius:0; color:var(--ink);
  background:rgba(229,231,235,.055); box-shadow:inset 3px 0 0 rgba(229,231,235,.2), inset 0 -1px 0 rgba(229,231,235,.3);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%) }
.gx a.rc-pk-i:hover{ background:rgba(229,231,235,.1); box-shadow:inset 3px 0 0 rgba(229,231,235,.4), inset 0 -1px 0 rgba(229,231,235,.5) }
.gx a.rc-pk-i:focus-visible{ outline:2px solid transparent; box-shadow:inset 4px 0 0 var(--ignition), inset 0 -2px 0 var(--ignition) }
.gx a.rc-pk-i[aria-current]{ background:linear-gradient(90deg,rgba(244,81,30,.2),rgba(244,81,30,.05) 72%);
  box-shadow:inset 4px 0 0 var(--ignition), inset 7px 0 0 var(--sky), inset 0 -1px 0 rgba(244,81,30,.55) }
.gx a.rc-pk-i[aria-current]:focus-visible{ outline:2px solid transparent;
  box-shadow:inset 4px 0 0 var(--ignition), inset 7px 0 0 var(--sky), inset 0 3px 0 var(--ignition), inset 0 -3px 0 var(--ignition) }
.rc-pk-i b{ font-size:.92rem; line-height:1.25 }
.rc-pk-i span{ font-size:.76rem; color:var(--ink-2); font-variant-numeric:tabular-nums }
.rc-pk-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:0 0 4px }
.rc-pk-f{ display:grid; gap:6px; min-width:0 }
.rc-pk-f span{ font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink) }
.rc-pk-f input{ box-sizing:border-box; min-height:46px; padding:11px 22px 10px 16px; border:0; border-radius:0; color:var(--ink); caret-color:var(--ignition); color-scheme:dark;
  background:linear-gradient(180deg,rgba(229,231,235,.075),rgba(229,231,235,.035)); font:inherit; font-size:1rem; font-variant-numeric:tabular-nums;
  box-shadow:inset 3px 0 0 rgba(229,231,235,.2), inset 0 -1px 0 rgba(229,231,235,.36); clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%) }
.rc-pk-f input:hover{ box-shadow:inset 3px 0 0 rgba(229,231,235,.34), inset 0 -1px 0 rgba(229,231,235,.52) }
.rc-pk-f input:focus-visible{ outline:2px solid transparent; box-shadow:inset 4px 0 0 var(--ignition), inset 0 -2px 0 var(--ignition) }
.rc-pk-go{ min-height:46px; padding:0 22px; padding-right:calc(22px + var(--cut,10px)); border:0; border-radius:var(--r-ctl,2px); background:var(--ignition); color:#fff; font:inherit;
  font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; clip-path:polygon(0 0,100% 0,calc(100% - var(--cut,10px)) 100%,0 100%) }
.rc-pk-go:hover{ background:#FF6A38 }
.rc-pk-go:focus-visible{ outline:2px solid transparent; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(5,7,13,.55) }
.gx p.rc-pk-msg{ min-height:1.3em; margin:.5em 0 0; color:var(--ignition); font-size:.85rem }
.gx p.rc-pk-sub{ margin:14px 0 8px; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2) }
.gx p.rc-pk-foot{ margin:14px 0 0; color:var(--ink-2); font-size:.8rem }

/* ---------- phone type: every text run is one of the four sizes (see garage.css) ---------------------------------- */
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .rc-nm, .rc-kept, .gx .rc-pick p.rc-pk-title, .rc-pk-f input{ font-size:var(--t-body) }
  .gx > p.rc-cap, .rc-meta, .rc-hv, .gx .rc-in a, .rc-hi li, .rc-corr li, .rc-defs li, .gx p.rc-extra, .gx .rc-tabs a, .rc-rs, .rc-go,
  .gx p.rc-since, .rc-pk-i b, .rc-pk-nav, .rc-pk-go, .gx p.rc-pk-foot, .gx p.rc-pk-msg{ font-size:var(--t-sub) }
  .rc-kept small, .rc-fs, .rc-rds, .rc-rdj{ font-size:var(--t-foot) }
  .rc-cal-head span, .rc-c, .rc-mo .k, .rc-in .k, .rc-hi .k, .rc-rep .k, .rc-fk, .rc-rdd, .rc-kept > span:first-child, .gx p.rc-sub,
  .gx h1.rc-date .rc-dow, .rc-pk-i span, .rc-pk-f span, .gx p.rc-pk-sub{ font-size:var(--t-cap) }
  .rc-fv small{ font-size:var(--t-cap) }          /* a fixed tier: .5em of a clamped number lands between tiers on a landscape phone */
  .rc-u{ font-size:var(--t-cap) }
  .gx a.rc-type, .lg-n, .lg-k, .lg-num, .lg h3.lg-sub, .lg-tm{ font-size:var(--t-cap) }
  .gx .lg-tx p, .lg-chips li, .lg-eq dd span, .gx .lg-flow p, .gx .lg-steps p, .lg-list li, .gx p.lg-eq-one, .lg-sws li{ font-size:var(--t-sub) }
  .gx .lg-tx p.lg-line, .lg-eq dt, .lg-eq code, .gx p.lg-copy{ font-size:var(--t-body) }
  .lg-flow h3, .lg-steps h3{ font-size:var(--t-body) }
  .rc-trio{ gap:8px }
  .rc-hi .k{ flex-basis:100% }
}
/* "(Supervised)" is the longest word a figure's label holds: with the tracking closed up it fits a third of a 375px phone, and a 320px
   phone gives the three figures two columns rather than run the word past its tile */
@media (max-width:399.98px){ .rc-fk{ letter-spacing:.02em } }
@media (max-width:359.98px){ .rc-trio{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---------- a day you read, not a panel you scan (Gavin, 2026-10-12: "the days that I'm reading ... so many words") --------------------------------------
   Twenty-five boxed "MEASURED" and "MODELED" pills sat beside the figures on a day and shouted over them, and the small tracked capitals above each figure
   wrapped to two lines. The state is still said in the same words and colours at the same size; it is a dot and a word instead of a box, and a label reads
   as a label (sentence case) instead of a row of capitals. */
.rc .chip{ padding:0; border:0; background:none; border-radius:0; letter-spacing:.08em; }
.rc .chip::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:currentColor; vertical-align:1px; }
.rc .cd-k{ text-transform:none; letter-spacing:.01em; font-weight:600; font-size:max(12px, .8rem); line-height:1.3; }
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){ .rc .cd-k{ font-size:var(--t-cap) } }   /* the phone scale: 12px (garage.css) */