/* ==========================================================================
   Tacoma & Tundra service schedule
   Visual idea: the log pages in the glovebox booklet, not a web app.
   Steel greys, one hazard yellow for factory-required, oxide red for
   "only because of how you drive it". Flat, hairline-ruled, printable.
   ========================================================================== */

:root{
  --ink:        #191d21;
  --ink-2:      #46505a;
  --ink-3:      #78838c;
  --paper:      #e3e5e1;
  --card:       #fbfbf9;
  --line:       #c8ccc7;
  --line-soft:  #e0e2de;

  --hazard:     #e0a41c;   /* factory-scheduled */
  --hazard-ink: #6f4d00;
  --hazard-wash:#fbf1d8;

  --oxide:      #a8452b;   /* only under your conditions */
  --oxide-wash: #f7eae5;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 66ch;

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
}

h1,h2,h3{ font-family:var(--f-display); font-weight:700; letter-spacing:-.015em; margin:0; }

a{ color:var(--ink); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--oxide); }

.wrap{ max-width:74rem; margin-inline:auto; padding-inline:var(--gutter); }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:.6rem 1rem; z-index:20;
}
.skip:focus{ left:.5rem; top:.5rem; }

:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2.5px solid var(--ink);
  outline-offset:2px;
}

/* ---------------------------------------------------------------- masthead */

.masthead{
  background:var(--ink);
  color:#f2f3f0;
  border-bottom:5px solid var(--hazard);
}
.masthead-in{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:flex-end; justify-content:space-between;
  padding-block:1.9rem 1.6rem;
}
.masthead h1{
  font-size:clamp(1.5rem,4.2vw,2.15rem);
  line-height:1.1;
  color:#fff;
}
.masthead-sub{
  margin:.5rem 0 0; max-width:46ch;
  color:#b8bfc3; font-size:.95rem; line-height:1.5;
}
.masthead-note{
  margin:0; font-size:.82rem; color:#8e979d;
  border-left:2px solid var(--hazard); padding-left:.7rem;
}

/* ------------------------------------------------------------- spec plate */

.plate{
  background:var(--card);
  border:1px solid var(--line);
  border-top:4px solid var(--ink);
  margin-top:1.9rem;
}
.plate-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem .35rem;
}
.plate-head h2{ font-size:1.05rem; }

.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.85rem; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:.2em;
}
.linkish:hover{ color:var(--oxide); }

.plate-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem 1.1rem;
  padding:.6rem 1.25rem 1.25rem;
}
@media (min-width:44rem){ .plate-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:66rem){ .plate-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.field{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.field label{ font-size:.8rem; color:var(--ink-2); font-weight:500; }
.field .opt{ color:var(--ink-3); font-weight:400; font-style:italic; }

.field select,
.field input{
  font:inherit; font-size:.94rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:2px;
  padding:.5rem .55rem;
  width:100%;
  min-width:0;
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:1.9rem;
}

/* driving conditions */

.plate-conds{ border-top:1px solid var(--line-soft); }
.plate-conds fieldset{ border:0; margin:0; padding:1.05rem 1.25rem 1.25rem; }
.plate-conds legend{
  font-family:var(--f-display); font-weight:600; font-size:.95rem; padding:0;
}
.conds-help{
  margin:.3rem 0 .85rem; font-size:.86rem; color:var(--ink-2);
  max-width:var(--measure);
}

.conds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.5rem .9rem; }

.cond{
  display:grid; grid-template-columns:auto 1fr; gap:.55rem;
  align-items:start;
  border:1px solid var(--line-soft);
  border-left:3px solid var(--line);
  background:#fff;
  padding:.55rem .7rem;
  cursor:pointer;
}
.cond:hover{ border-left-color:var(--oxide); }
.cond input{ margin:.25rem 0 0; accent-color:var(--oxide); width:1rem; height:1rem; }
.cond:has(input:checked){ border-left-color:var(--oxide); background:var(--oxide-wash); }
.cond-name{ font-size:.9rem; font-weight:500; line-height:1.35; display:block; }
.cond-help{ font-size:.79rem; color:var(--ink-2); display:block; margin-top:.1rem; }

/* -------------------------------------------------------------- action bar */

.bar{
  display:flex; flex-wrap:wrap; gap:.85rem 1.5rem;
  align-items:center; justify-content:space-between;
  margin-top:1.6rem; padding:.9rem 1.1rem;
  background:var(--ink); color:#e8eaea;
  border-left:5px solid var(--hazard);
}
.bar-summary{ margin:0; font-size:.92rem; max-width:44ch; }
.bar-summary strong{ color:#fff; font-weight:600; }
.bar-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }

.btn{
  font-family:var(--f-display); font-weight:600; font-size:.87rem;
  padding:.52rem .95rem;
  border:1px solid #566068; border-radius:2px;
  background:transparent; color:#e8eaea; cursor:pointer;
}
.btn:hover{ background:#2a3138; border-color:#7d878e; }
.btn-primary{
  background:var(--hazard); border-color:var(--hazard); color:#20180a;
}
.btn-primary:hover{ background:#f0b62f; border-color:#f0b62f; color:#20180a; }

.copy-hint{
  margin:.55rem 0 0; font-size:.87rem;
  border-left:3px solid var(--hazard); padding-left:.65rem; color:var(--ink-2);
}
.copy-hint a{ color:var(--oxide); }

/* ------------------------------------------------------------------- tabs */

.tabs{ display:flex; flex-wrap:wrap; gap:0; margin:1.4rem 0 1rem; }
.tab{
  font-family:var(--f-display); font-weight:600; font-size:.87rem;
  background:transparent; border:0; cursor:pointer; color:var(--ink-3);
  padding:.4rem .1rem; margin-right:1.6rem;
  border-bottom:3px solid transparent;
}
.tab:hover{ color:var(--ink); }
.tab.is-on{ color:var(--ink); border-bottom-color:var(--ink); }
.tab[disabled]{ opacity:.4; cursor:default; }

/* --------------------------------------------------------------- log cards */

.stop{
  background:var(--card);
  border:1px solid var(--line);
  margin-bottom:1.1rem;
}
.stop-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem;
  padding:.85rem 1.1rem .8rem;
  border-bottom:1px solid var(--line);
  background:#f2f2ef;
}
.stop-miles{
  font-family:var(--f-display); font-weight:700;
  font-size:1.32rem; line-height:1;
}
.stop-months{ font-size:.86rem; color:var(--ink-2); }
.stop-count{ margin-left:auto; font-size:.8rem; color:var(--ink-3); }

.stop.is-next{ border-color:var(--ink); border-left:5px solid var(--hazard); }
.stop.is-next .stop-head{ background:var(--hazard-wash); }

/* Behind you: drained of colour, but still fully legible. */
.stop.is-past{ --hazard:var(--line); --oxide:var(--ink-3); }
.stop.is-past .stop-miles,
.stop.is-past .item-why{ color:var(--ink-3); }
.stop.is-past .item.sev{ background:transparent; }
.stop.is-past .group-label{ color:var(--ink-3); }

.flag{
  font-family:var(--f-display); font-size:.7rem; font-weight:700;
  letter-spacing:.04em;
  padding:.2rem .45rem; border-radius:2px;
  background:var(--ink); color:#fff;
}
.flag-next{ background:var(--hazard); color:#20180a; }
.flag-past{ background:var(--line); color:var(--ink-2); }

/* item rows */

.group-label{
  font-family:var(--f-display); font-weight:600; font-size:.83rem;
  color:var(--oxide);
  padding:.7rem 1.1rem .1rem;
  border-top:1px solid var(--line-soft);
}
.group-label:first-child{ border-top:0; }

.items{ list-style:none; margin:0; padding:0; }

.item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.65rem;
  align-items:start;
  padding:.5rem 1.1rem;
  border-bottom:1px solid var(--line-soft);
  border-left:4px solid var(--hazard);
}
.item:last-child{ border-bottom:0; }
.item.sev{ border-left-color:var(--oxide); background:var(--oxide-wash); }
.item input[type=checkbox]{
  margin:.3rem 0 0; width:1.05rem; height:1.05rem; accent-color:var(--ink); cursor:pointer;
}
.item label{ cursor:pointer; min-width:0; }
.item-do{ font-weight:600; }
.item.done label{ color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:1px; }
.item-note{
  display:block; font-size:.83rem; color:var(--ink-2); line-height:1.45;
  margin-top:.15rem; max-width:var(--measure);
  text-decoration:none;
}
.item.done .item-note{ text-decoration:none; }
.item-why{
  display:inline-block; font-size:.76rem; color:var(--oxide);
  font-weight:600; margin-left:.4rem;
}

/* the signoff strip lifted from the real booklet */
.signoff{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  padding:.7rem 1.1rem;
  border-top:1px solid var(--line);
  background:#f2f2ef;
  font-size:.8rem; color:var(--ink-3);
}
.signoff span{ flex:1 1 8rem; border-bottom:1px dotted var(--ink-3); padding-bottom:.15rem; }

.empty{
  background:var(--card); border:1px dashed var(--line);
  padding:1.6rem 1.25rem; text-align:left; color:var(--ink-2);
}
.empty strong{ display:block; font-family:var(--f-display); color:var(--ink); margin-bottom:.25rem; }

/* ------------------------------------------------------- lower sections */

.upsell,.offroad,.source{
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.upsell h2,.offroad h2,.source h2{ font-size:1.15rem; margin-bottom:.35rem; }
.upsell-lede,.offroad p,.source p{ max-width:var(--measure); color:var(--ink-2); font-size:.93rem; }

.upsell-list{ list-style:none; margin:1rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:.7rem 1.1rem; }
.upsell-list li{
  border-left:3px solid var(--line);
  padding:.15rem 0 .15rem .75rem;
}
.upsell-list b{ display:block; font-family:var(--f-display); font-size:.93rem; font-weight:600; }
.upsell-list span{ font-size:.85rem; color:var(--ink-2); }

.offroad-list{
  columns:2; column-gap:2rem; list-style:none; margin:1rem 0 0; padding:0;
  font-size:.9rem;
}
.offroad-list li{ break-inside:avoid; padding-left:1rem; position:relative; margin-bottom:.2rem; }
.offroad-list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:.45rem; height:1px; background:var(--ink-3);
}

.source-links{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:.5rem; font-size:.9rem; }
.source-caveat{ font-size:.86rem; color:var(--ink-2); border-left:3px solid var(--oxide); padding-left:.7rem; }
.source-caveat:empty{ display:none; }

.foot{
  margin-top:3rem; padding-block:1.4rem 2.2rem;
  border-top:1px solid var(--line); color:var(--ink-3); font-size:.83rem;
}
.foot p{ max-width:70ch; margin:0; }

/* ------------------------------------------------------------------ small */

@media (max-width:34rem){
  .bar{ flex-direction:column; align-items:stretch; }
  .bar-actions .btn{ flex:1 1 auto; }
  .offroad-list{ columns:1; }
  .stop-count{ margin-left:0; flex-basis:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ------------------------------------------------------------------ print */

@media print{
  :root{ --paper:#fff; --card:#fff; }
  body{ background:#fff; font-size:11pt; }
  .masthead{ background:#fff; color:#000; border-bottom:2px solid #000; }
  .masthead h1{ color:#000; font-size:16pt; }
  .masthead-sub,.masthead-note{ color:#333; }
  .plate-conds,.bar-actions,.tabs,.skip,.linkish,.copy-hint,.foot,.upsell,.offroad{ display:none !important; }
  .bar{ background:#fff; color:#000; border:0; border-left:3px solid #000; padding-left:.6rem; }
  .bar-summary strong{ color:#000; }
  .plate{ border:1px solid #000; }
  .stop{ break-inside:avoid; border:1px solid #666; }
  .stop-head{ background:#eee; }
  .item{ border-left:3px solid #000; }
  .item.sev{ border-left-style:dashed; background:#fff; }
  .item.sev::after{ content:' (your conditions)'; font-size:8pt; }
  a[href]::after{ content:''; }
}