/* ==========================================================================
   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-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 }
.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 }
.rc-kept-total{ font-weight:700 }

/* ---------- 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:999px; 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:999px; 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:.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:.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 }
}

/* ---------- 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{ 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{ 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{ 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-trio{ gap:8px }
  .rc-hi .k{ flex-basis:100% }
}