/*
 * TrackAD.
 *
 * The look is borrowed from the two things an A&P already reads all day: an instrument
 * panel and a logbook page. Dark bezel across the top, warm paper underneath, data set in
 * a monospace with tabular figures so columns of hours line up on the decimal, and status
 * in annunciator colours - red, amber, green - because that mapping is already in the
 * reader's head and does not need to be taught.
 *
 * Mobile is not an afterthought here. This gets used standing at a workbench with a phone
 * in one hand, so every table collapses into cards below 720px and nothing depends on
 * horizontal scrolling. Colour is never the only signal either: every state is also spelled
 * out in words, because compliance records get photocopied in black and white.
 */

/* Fonts are linked from the document head, not @import-ed: an @import here blocks
   rendering until the stylesheet is fetched AND parsed, which on a phone tethered in a
   hangar is exactly the wrong trade. */

:root{
  /* Instrument bezel */
  --bezel:#14181d;
  --bezel-2:#1d232a;
  --bezel-line:#2c343d;

  /* Logbook paper */
  --paper:#f6f4ef;
  --card:#fffdfa;
  --ink:#1b1e22;
  --muted:#6a7078;
  --line:#ded8cd;
  --line-2:#eae5db;

  /* Safety orange. Used sparingly - it means "do this next", nothing else. */
  --accent:#c2521a;
  --accent-ink:#fff;

  /* Annunciators */
  --red:#a8241b;    --red-bg:#fbeae8;   --red-line:#e8bdb7;
  --amber:#8a5600;  --amber-bg:#fdf3e0; --amber-line:#e8cf9c;
  /* Squawk severities get their own rung each. Grounding is already the red one; major and
     minor used to share amber with "due soon", which put a burnt-out dome light on the same
     footing as an inspection about to lapse. */
  --orange:#a8490a; --orange-bg:#fdeada; --orange-line:#f0c398;
  --yellow:#6d5900;  --yellow-bg:#fefbe3; --yellow-line:#e7dda2;
  --green:#1f6b45;  --green-bg:#e9f4ed; --green-line:#b6d9c4;
  --grey:#5b636c;   --grey-bg:#eeebe5;  --grey-line:#d8d2c7;

  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Barlow Condensed",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r:10px;
  --shadow:0 1px 2px rgba(20,24,29,.06),0 4px 14px rgba(20,24,29,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.55 var(--sans);
  /* A login screen is two fields tall. Without this the footer floats in the middle of
     the viewport with paper under it, which reads as a page that failed to load. */
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:#9c400f}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------------------------------------------------------------- the bezel */

header.top{
  background:var(--bezel);
  background-image:linear-gradient(180deg,var(--bezel-2),var(--bezel));
  border-bottom:3px solid var(--accent);
  color:#e8eaed;padding:.5rem .8rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;
  position:sticky;top:0;z-index:20;
}

/* Inline on a wide screen, behind a toggle on a narrow one. Eight links will not fit on a
   phone however they are arranged: wrapping costs three rows of a small screen, and
   scrolling sideways means dragging the bar every time, which is worse. */
nav.navlinks{display:flex;flex-wrap:nowrap;align-items:center;gap:.1rem;flex:1}
nav.navlinks>a{flex:0 0 auto}
nav.navlinks.always{flex:0 0 auto;margin-left:auto;justify-content:flex-end}
.navtoggle{display:none}
header.top a{color:#b9c2cc;text-decoration:none;font-family:var(--disp);
  font-size:1.02rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.45rem .6rem;border-radius:6px;min-height:40px;display:inline-flex;align-items:center}
header.top a:hover{color:#fff;background:rgba(255,255,255,.07)}
header.top .brand{
  color:#fff;font-weight:700;font-size:1.22rem;letter-spacing:.14em;margin-right:.5rem;
  display:inline-flex;align-items:center;gap:.5rem;
}
/* A rivet. One small piece of hangar, not a theme park. */
.brand::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#d8dde3,#8b949e 60%,#5d656e);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
header.top .sp{margin-left:auto;display:flex;align-items:center;gap:.1rem}

main{max-width:1180px;margin:0 auto;padding:1.3rem 1rem 3rem;width:100%;box-sizing:border-box;flex:1}

/* ------------------------------------------------------------------- type */

h1{font-family:var(--disp);font-size:2.1rem;line-height:1.1;font-weight:700;
   letter-spacing:.01em;margin:.1rem 0 1rem}
h2{font-family:var(--disp);font-size:1.18rem;font-weight:600;letter-spacing:.09em;
   text-transform:uppercase;color:var(--muted);margin:2rem 0 .7rem;
   display:flex;align-items:baseline;gap:.6rem}
h2::after{content:"";flex:1;height:1px;background:var(--line);}
h2 .note{font-family:var(--sans);font-size:.8rem;letter-spacing:0;text-transform:none;
   color:var(--muted);font-weight:400;flex:none}
.quiet{color:var(--muted);font-size:.88rem}

/* A title with its subject underneath: the tail number reads large, what the aircraft
   actually is reads as a caption. Blocks rather than inline so a long make and model wraps
   under the tail instead of dragging the heading onto three lines. */
.page-title{margin-bottom:.9rem}
.page-title small{display:block;font-family:var(--sans);font-weight:400;font-size:.95rem;
  color:var(--muted);letter-spacing:0;margin-top:.15rem}
.tail{font-family:var(--mono);font-weight:600;letter-spacing:.02em}

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

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:1.1rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.card.flush{padding:0;overflow:hidden}
.card h2:first-child{margin-top:0}

/* A card that is saying something, with the reason in its left edge. */
.card.note-ok{border-left:4px solid var(--green)}
.card.note-bad{border-left:4px solid var(--red)}
.card.note-go{border-left:4px solid var(--accent)}

/* ----------------------------------------------------------------- tables */

table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{padding:.62rem .7rem;border-bottom:1px solid var(--line-2);text-align:left;
      vertical-align:top}
th{font-family:var(--disp);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
   color:var(--muted);background:#f1ede5;border-bottom:1px solid var(--line);font-weight:600}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fbf8f2}
td .sub{display:block;color:var(--muted);font-size:.8rem;margin-top:.12rem}

/* A row of flags that wraps. Without this the last one runs off the side of a phone and
   gets clipped, which is how a grounded aircraft can have its worst finding invisible. */
.flagwrap{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end}
/* Caps on the flags. Everything around them - NEEDS ATTENTION, AIRFRAME TT - is already
   set that way, and a lowercase badge in the middle of it read as an afterthought. The
   extra letter-spacing is what keeps capitals legible at this size.
   
   .pill.flag is for the ones that sit outside the wrapper - the grounded badge beside a
   tail number, the grounds marker on a scheduled item. They are the same kind of thing and
   scoping the rule to the container alone left them behind in lower case. */
.flagwrap .pill,
.pill.flag{text-transform:uppercase;letter-spacing:.045em;font-size:.72rem}
a.pill{text-decoration:none}
a.pill:hover{filter:brightness(.96)}

/* ------------------------------------------------------------ annunciators */

.pill{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.76rem;
      font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1.35}
.s-overdue{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.s-soon{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.s-ok,.s-done{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.s-major{background:var(--orange-bg);color:var(--orange);border-color:var(--orange-line)}
.s-minor{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow-line)}
.s-unknown,.s-na,.s-review{background:var(--grey-bg);color:var(--grey);border-color:var(--grey-line)}
/* Overdue gets a second, non-colour signal so it survives a black-and-white photocopy. */
.s-overdue::before{content:"▲ ";}

/* -------------------------------------------------------------- controls */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
     min-height:44px;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--line);
     background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer;
     font:600 .92rem/1.2 var(--sans);box-shadow:var(--shadow);white-space:nowrap}
.btn:hover{background:#fff;border-color:#c9c1b3;color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#ad4715;color:#fff}
.btn.danger{color:var(--red);border-color:var(--red-line)}
.btn.danger:hover{background:var(--red-bg)}
.btn.block{width:100%}

.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}

label{display:block;font-family:var(--disp);font-size:.84rem;text-transform:uppercase;
      letter-spacing:.07em;color:var(--muted);margin:.85rem 0 .25rem;font-weight:600}
input,select,textarea{
  width:100%;padding:.62rem .7rem;border:1px solid var(--line);border-radius:8px;
  font:inherit;background:#fff;color:var(--ink);min-height:44px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,82,26,.14)}
input.mono,td input{font-family:var(--mono)}
.hint{color:var(--muted);font-size:.79rem;margin:.28rem 0 0}

.grid{display:grid;gap:.75rem}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* A read-only figure with its label, as it reads on a panel. */
.stat label{margin-top:0}
.stat .v{font-family:var(--mono);font-size:1.12rem;font-weight:500;
         font-variant-numeric:tabular-nums}

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

details.sect{margin:1.5rem 0 1rem;border-top:1px solid var(--line)}
details.sect>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;
  padding:.7rem .1rem .55rem;min-height:44px;
}
details.sect>summary::-webkit-details-marker{display:none}
details.sect>summary::before{
  content:"▸";color:var(--muted);font-size:.9rem;transition:transform .12s ease;
  display:inline-block;flex:0 0 auto;
}
details.sect[open]>summary::before{transform:rotate(90deg)}
details.sect>summary:hover .sect-t{color:var(--ink)}
.sect-t{
  font-family:var(--disp);font-size:1.18rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}
/* The count is what makes a closed section safe: nothing is hidden, only stacked. */
.sect-n{
  font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--muted);
  background:var(--grey-bg);border:1px solid var(--grey-line);border-radius:999px;
  padding:.05rem .5rem;flex:0 0 auto;
}
details.sect>summary>.note{
  font-family:var(--sans);font-size:.8rem;letter-spacing:0;text-transform:none;
  color:var(--muted);font-weight:400;
}
.sect-body{padding-top:.2rem}
details.sect>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media print{
  details.sect{border-top:1px solid #bbb}
  details.sect>summary::before{display:none}
  details.sect:not([open])>.sect-body{display:block}
}

/* ------------------------------------------------------------- disclosure */

details.disc{border-top:1px solid var(--line-2);margin-top:.7rem;padding-top:.6rem}
details.disc>summary{cursor:pointer;color:var(--muted);font-size:.85rem;
  list-style:none;display:flex;align-items:center;gap:.4rem;min-height:36px}
details.disc>summary::-webkit-details-marker{display:none}
details.disc>summary::before{content:"▸";transition:transform .12s ease;display:inline-block}
details.disc[open]>summary::before{transform:rotate(90deg)}
details.disc .body{padding:.5rem 0 .2rem;font-size:.9rem}
/* Inside a table, an open panel must not inherit the row's hover tint. */
tr.panel td{background:#faf7f1;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- notices */

.warn{background:#fdf6e6;border:1px solid var(--amber-line);border-left:4px solid var(--amber);
      border-radius:var(--r);padding:.9rem 1.05rem;margin:1.1rem 0;font-size:.89rem}
.warn strong{color:#7a4c00}
.warn.stop{background:var(--red-bg);border-color:var(--red-line);border-left-color:var(--red)}
.warn.stop strong{color:var(--red)}

/* ------------------------------------------------------------------ auth */

.auth{max-width:440px;margin:2.5rem auto}
.auth .mark{font-family:var(--disp);font-size:2.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 .1rem;display:flex;align-items:center;gap:.6rem}
.auth .mark::before{content:"";width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#b3bac1 60%,#7b838c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.auth .tagline{color:var(--muted);margin:.1rem 0 1.2rem}

/* ------------------------------------------------------------- marketing */

.lede{font-size:1.12rem;color:var(--muted);max-width:60ch;margin:-.4rem 0 1.6rem}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.two-up>.card{margin-bottom:0}

/* The feature list on the left. Ticks and crosses carry a word as well as a glyph, for
   the same reason the status pills do. */
ul.does{list-style:none;padding:0;margin:.6rem 0 0}
ul.does li{padding:.45rem 0 .45rem 1.7rem;position:relative;border-bottom:1px solid var(--line-2)}
ul.does li:last-child{border-bottom:none}
ul.does li::before{content:"→";position:absolute;left:0;top:.45rem;color:var(--accent);font-weight:700}
ul.does b{display:block;font-weight:600}
ul.does span{color:var(--muted);font-size:.88rem}

table.compare th:first-child{width:42%}
table.compare td{font-size:.88rem}
.yes{color:var(--green);font-weight:600;white-space:nowrap}
.no{color:var(--muted);white-space:nowrap}
.cost{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
tr.total td{border-top:2px solid var(--line);font-weight:700;background:#faf7f1}

@media (max-width:900px){
  .two-up{grid-template-columns:1fr}
}

/* ------------------------------------------------------------- footnotes */

sup.fn{font-size:.72em;line-height:0}
sup.fn a{color:var(--accent);text-decoration:none;font-weight:700;padding:0 .12em}
sup.fn a:hover{text-decoration:underline}
.fn-num{font-family:var(--mono);font-weight:600;color:var(--accent);font-size:1rem}
.card.note:target{border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,82,26,.16)}
.card.note h2{text-transform:none;letter-spacing:0;font-size:1.08rem;color:var(--ink)}
.card.note h2::after{display:none}

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

@media (max-width:720px){
  body{font-size:15px}
  main{padding:1rem .7rem 4rem}
  h1{font-size:1.72rem}
  header.top{padding:.4rem .6rem;gap:.35rem}
  header.top .brand{font-size:1.05rem;letter-spacing:.09em;flex:0 0 auto;margin-right:0}
  header.top a{font-size:.95rem;padding:.4rem .45rem}

  /* The toggle. A checkbox styled as a button, so it is focusable and Space opens it. */
  .navtoggle{
    display:block;appearance:none;-webkit-appearance:none;margin:0 0 0 auto;
    width:44px;height:40px;border:1px solid var(--bezel-line);border-radius:8px;
    background:rgba(255,255,255,.05);cursor:pointer;position:relative;flex:0 0 auto;
  }
  .navtoggle::before{
    content:"≡";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;color:#cfd6dd;font-size:1.5rem;line-height:1;
  }
  .navtoggle:checked::before{content:"×";font-size:1.7rem}
  .navtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* Drops below the bar rather than pushing the page down, and only when asked for. */
  nav.navlinks:not(.always){
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bezel);border-bottom:3px solid var(--accent);
    padding:.2rem .6rem .5rem;max-height:76vh;overflow-y:auto;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
  }
  .navtoggle:checked ~ nav.navlinks{display:flex}
  nav.navlinks:not(.always)>a{
    padding:.75rem .3rem;border-bottom:1px solid var(--bezel-line);font-size:1rem;
  }
  nav.navlinks:not(.always)>a:last-child{border-bottom:none}

  /* Every table becomes a stack of cards. A seven-column compliance table is unreadable
     on a phone, and horizontal scrolling hides the column that matters. */
  table.stack{background:none}
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack tr{display:block;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);margin-bottom:.7rem;padding:.55rem .75rem;box-shadow:var(--shadow)}
  table.stack tr:hover{background:var(--card)}
  table.stack td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    border:none;padding:.3rem 0;text-align:right}
  table.stack td::before{
    content:attr(data-l);flex:none;text-align:left;
    font-family:var(--disp);font-weight:600;font-size:.78rem;text-transform:uppercase;
    letter-spacing:.06em;color:var(--muted);
  }
  /* The flags get the full width under their label rather than being squeezed into the
     right-hand half of a label/value row. */
  table.stack td.flags{display:block;text-align:left}
  table.stack td.flags::before{display:block;margin-bottom:.35rem}
  table.stack td.flags .flagwrap{justify-content:flex-start}

  /* The first cell is the heading of its card, not a label/value pair. */
  table.stack td.lead{display:block;text-align:left;border-bottom:1px solid var(--line-2);
    padding-bottom:.45rem;margin-bottom:.25rem}
  table.stack td.lead::before{display:none}
  table.stack td.act{display:block;text-align:left;padding-top:.5rem}
  table.stack td.act::before{display:none}
  table.stack td .sub{text-align:right}
  table.stack td.lead .sub{text-align:left}
  table.stack tr.panel{padding:.75rem}
  table.stack tr.panel td{display:block;text-align:left;background:none;border:none}

  .btn{width:100%}
  .row .btn{width:auto;flex:1 1 auto}
  form.inline-row .btn{width:100%}
}

@media (max-width:420px){
  .grid.g3,.grid.g2{grid-template-columns:1fr}
}

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

@media print{
  header.top,.noprint,details.disc{display:none!important}
  body{background:#fff;font-size:11.5px}
  main{max-width:none;padding:0}
  .card{border:none;box-shadow:none;padding:0;margin-bottom:.6rem}
  .card+.card{border-top:1px solid #bbb;padding-top:.5rem}
  h1{font-size:17px;margin:0 0 .4rem}
  h2{font-size:11px;margin:.9rem 0 .3rem;color:#000}
  h2::after{background:#999}
  table{font-size:10.5px}
  th,td{padding:.26rem .35rem;border-bottom:1px solid #ddd}
  th{background:#eee;color:#000}
  .pill{border:1px solid #999;background:none!important;color:#000!important}
  .warn{border:1px solid #999;background:none;font-size:9.5px}
  a{color:#000;text-decoration:none}
  tr{break-inside:avoid}
}

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


/* -------------------------------------------------------------------- foot
 *
 * The bezel again, closing the page the way the header opens it. Links live here rather
 * than in the nav because the nav is already one item away from not fitting on a phone,
 * and because these are things you look up once rather than every visit.
 */

footer.foot{
  background:var(--bezel);
  background-image:linear-gradient(180deg,var(--bezel),var(--bezel-2));
  border-top:3px solid var(--accent);
  color:#9aa4ae;margin-top:2.5rem;
  font-size:.92rem;
}
.foot-cols{
  max-width:1180px;margin:0 auto;padding:1.9rem 1rem 1.4rem;
  display:grid;gap:1.6rem 2rem;
  grid-template-columns:1.6fr repeat(auto-fit,minmax(150px,1fr));
}
.foot-brand .brand{color:#fff;font-family:var(--disp);font-weight:700;font-size:1.22rem;
  letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem}
.foot-brand p{margin:.6rem 0 0;max-width:34ch;line-height:1.5}
.foot-cols h3{
  font-family:var(--disp);font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
  color:#6f7a85;margin:0 0 .55rem;font-weight:600;
}
.foot-cols a{
  color:#c3ccd5;text-decoration:none;display:block;
  padding:.3rem 0;min-height:32px;line-height:1.35;
}
.foot-cols a:hover{color:#fff;text-decoration:underline}

/* Provenance. Set apart because it is the one part that is about the data rather than
   about the site, and the one part that prints. */
.foot-src{
  max-width:1180px;margin:0 auto;padding:.9rem 1rem;
  border-top:1px solid var(--bezel-line);
}
.foot-src p{margin:0;color:#7e8891;font-size:.86rem;line-height:1.55}
.foot-src .fn a{color:#9aa4ae}
.foot-print{display:none}

.foot-end{
  max-width:1180px;margin:0 auto;padding:.8rem 1rem 1.6rem;
  border-top:1px solid var(--bezel-line);
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;
  color:#6f7a85;font-size:.84rem;
}
.foot-end a{color:#9aa4ae}

/* One column on a phone, and the brand blurb loses its width cap. */
@media (max-width:640px){
  .foot-cols{grid-template-columns:1fr;gap:1.3rem}
  .foot-brand p{max-width:none}
}

/* On paper the links are dead weight, but where the record came from is not - a report
   filed in a binder should say what produced it, from which data, on what date. */
@media print{
  footer.foot{background:none;border-top:1px solid #bbb;color:#000;margin-top:1rem}
  .foot-src{border:none;padding:.35rem 0}
  .foot-src p{color:#000;font-size:9.5px}
  .foot-src .fn{display:none}
  .foot-print{display:inline}
}

/* A row the importer could not fully read. Tinted rather than hidden: the point of the
   preview is to see what is wrong before committing a few hundred rows. */
tr.bad-row td{background:var(--amber-bg)}

/* ------------------------------------------------------------- worksheet
 *
 * The sheet that goes out to the aircraft. Designed for paper first: the right-hand columns
 * are empty boxes with room to write in, and the left-hand ones carry only what cannot be
 * worked out at the aeroplane. Landscape is assumed - eight columns will not fit portrait
 * and squeezing them produces a sheet nobody can write on.
 */
.ws-head{border-bottom:2px solid var(--ink);margin:0 0 1rem;padding-bottom:.5rem}
.ws-head h1{margin:0 0 .5rem}
table.ws-ident{width:100%;border-collapse:collapse;background:none}
table.ws-ident td{border:1px solid var(--line);padding:.35rem .5rem;font-size:.86rem;width:25%}
table.ws-ident b{font-family:var(--disp);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);font-weight:600}
h2.ws-h{margin:1.5rem 0 .2rem}
.ws-n{font-family:var(--mono);font-size:.8rem;background:var(--grey-bg);
  border:1px solid var(--grey-line);border-radius:999px;padding:.05rem .5rem;flex:0 0 auto}
.ws-blurb{color:var(--muted);font-size:.85rem;margin:.1rem 0 .5rem}

table.ws{width:100%;border-collapse:collapse;background:var(--card);table-layout:fixed}
table.ws th,table.ws td{border:1px solid var(--line);padding:.4rem .45rem;
  vertical-align:top;font-size:.84rem}
table.ws th{background:#f1ede5;font-family:var(--disp);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
table.ws .sub{display:block;color:var(--muted);font-size:.74rem;margin-top:.15rem;line-height:1.35}
table.ws .sub.was{color:var(--red)}
/* The blanks. Tall enough to write a method into, not just tick. */
table.ws td.c-how,table.ws td.c-date,table.ws td.c-hrs,
table.ws td.c-next,table.ws td.c-sig,table.ws td.c-yn{height:3.1rem;background:#fff}
table.ws td.c-yn{text-align:center;font-family:var(--mono);color:var(--muted);
  letter-spacing:.08em;vertical-align:middle}
.c-ad{width:8.5%}.c-what{width:34%}.c-yn{width:6%}.c-how{width:20%}
.c-date{width:8%}.c-hrs{width:6.5%}.c-next{width:9%}.c-sig{width:6%}

/* A line to write on. */
.rule{display:inline-block;border-bottom:1px solid var(--ink);min-width:7rem;height:1em;
  vertical-align:bottom}
.rule.long{min-width:14rem}
.ws-foot{margin-top:1.6rem;border-top:1px solid var(--line);padding-top:.7rem;
  font-size:.8rem;color:var(--muted)}
.ws-foot .sign{margin-top:1.3rem;color:var(--ink);font-size:.88rem;
  display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline}

@page{ size:landscape; margin:11mm }
@media print{
  .ws-head{border-bottom:2px solid #000}
  table.ws th{background:#eee;color:#000}
  table.ws th,table.ws td{border:1px solid #666;font-size:9.5px;padding:.22rem .3rem}
  table.ws td.c-how,table.ws td.c-date,table.ws td.c-hrs,
  table.ws td.c-next,table.ws td.c-sig,table.ws td.c-yn{height:2.7rem}
  table.ws .sub{font-size:8.4px}
  table.ws-ident td{border:1px solid #666;font-size:9.5px}
  h2.ws-h{font-size:11px}
  .ws-blurb{font-size:9px}
  table.ws tr{break-inside:avoid}
  .ws-foot{font-size:8.5px}
}

/* Below 720px every other table folds into cards; the worksheet must not, because it is a
   worksheet and its shape is the point. It scrolls sideways on a phone instead - nobody
   fills one in on a phone, they print it. */
@media (max-width:720px){
  table.ws{table-layout:auto;min-width:56rem}
  .ws-scroll{overflow-x:auto}
}