/* Tokens: DC street-sign green, navy ink, marigold for "now", flag red for cautions. */
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url("/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url("/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}

:root{
  --paper:#ffffff;
  --ink:#16233a;
  --muted:#4b5b70;
  --sign:#0b6b4f;
  --sign-deep:#084d39;
  --marigold:#f2b705;
  --flag:#b3122b;
  --mist:#edf2ef;
  --rule:#c9d3ce;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,Arial,sans-serif;
  --measure:46rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.5 var(--body)}
a{color:var(--sign-deep);text-underline-offset:.15em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:20}
.skip:focus{left:0}

/* Masthead: a street sign */
.sign{background:var(--sign);color:#fff;padding:.5rem}
.sign-inner{border:2px solid #fff;border-radius:.6rem;padding:1.1rem 1rem 1.2rem}
.sign h1{font:700 clamp(2.9rem,13vw,5rem)/.92 var(--display);letter-spacing:.005em;margin:0 0 .6rem;text-wrap:balance}
.sign p{margin:0;max-width:34rem;font-size:1rem;line-height:1.45}

/* Day strip */
.days{position:sticky;top:0;z-index:10;background:var(--ink)}
.days-scroll{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;max-width:calc(var(--measure) + 2rem);margin:0 auto;padding:0 .5rem}
.days-scroll::-webkit-scrollbar{display:none}
.days button{flex:0 0 auto;min-width:4.1rem;min-height:3.6rem;padding:.45rem .7rem .35rem;border:0;border-bottom:5px solid transparent;background:none;color:#fff;font:600 1.15rem/1.05 var(--display);cursor:pointer;text-align:center}
.days button small{display:block;font:400 .8125rem/1.3 var(--body);color:#d5dde6}
.days button[aria-pressed="true"]{border-bottom-color:var(--marigold);background:#22344f}
.days button[aria-pressed="true"] small{color:#fff}

main{max-width:calc(var(--measure) + 2rem);margin:0 auto;padding:0 1rem 4rem}

/* Filters */
.filters{padding:1rem 0 .25rem;display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:flex-end}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips button{min-height:2.75rem;padding:.4rem .9rem;border:2px solid var(--ink);border-radius:2rem;background:var(--paper);color:var(--ink);font:400 1rem/1.2 var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff}
.quad{font-size:.9375rem;color:var(--muted);display:flex;flex-direction:column;gap:.2rem}
.quad select{min-height:2.75rem;font:400 1rem/1.2 var(--body);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:.4rem;padding:.3rem .5rem}

/* Kind marks: shape as well as color */
.mark{display:inline-block;width:.8rem;height:.8rem;flex:0 0 auto}
.mark-meal{background:var(--sign);border-radius:50%}
.mark-mobile{width:0;height:0;border-left:.45rem solid transparent;border-right:.45rem solid transparent;border-bottom:.8rem solid var(--marigold)}
.mark-groceries{background:var(--ink)}
.chips button[aria-pressed="true"] .mark-groceries{background:#fff}
.chips button[aria-pressed="true"] .mark-meal{background:#7fd6b8}

.notice{margin:1rem 0 0;padding:.8rem 1rem;background:#fff6d6;border-left:6px solid var(--marigold);font-size:1rem}
.loading{color:var(--muted);padding:2rem 0}

/* Timetable */
#timetable{outline:none}
.day-head{font:700 1.9rem/1.05 var(--display);margin:1.6rem 0 .1rem}
.day-sub{margin:0 0 .6rem;color:var(--muted);font-size:.9375rem}
.sub-head{font:700 1.3rem/1.1 var(--display);margin:1.8rem 0 .2rem}
.sub-note{margin:0 0 .4rem;color:var(--muted);font-size:.9375rem}

.row{border-top:1px solid var(--rule)}
.row:last-of-type{border-bottom:1px solid var(--rule)}
.row summary{list-style:none;display:grid;grid-template-columns:5.1rem 1fr;gap:.25rem .9rem;padding:.85rem 0 .9rem;cursor:pointer}
.row summary::-webkit-details-marker{display:none}
.time{font:700 1.85rem/1 var(--display);font-variant-numeric:tabular-nums}
.time small{display:block;margin-top:.2rem;font:400 .875rem/1.25 var(--body);color:var(--muted)}
.time.untimed{font-size:1.35rem;line-height:1.05}
.what h3{font:700 1.0625rem/1.3 var(--body);margin:0}
.what p{margin:.15rem 0 0;font-size:.9375rem;line-height:1.4}
.kindline{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.addr{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem}
.tag{font-size:.8125rem;line-height:1.2;padding:.2rem .5rem;border-radius:.25rem;background:var(--mist);color:var(--ink)}
.tag-open{background:var(--sign);color:#fff;font-weight:700}
.tag-soon{background:var(--marigold);color:var(--ink);font-weight:700}
.tag-call{background:#fff;color:var(--flag);border:1.5px solid var(--flag);font-weight:700}
.tag-once{background:var(--ink);color:#fff}
.more-cue{font-size:.875rem;color:var(--sign-deep);text-decoration:underline;text-underline-offset:.15em;margin-top:.45rem;display:inline-block}
.row[open] .more-cue{display:none}
.row.past summary{opacity:.55}

.detail{padding:0 0 1.1rem 5.99rem}
.detail dl{margin:0}
.detail dt{font-weight:700;font-size:.9375rem;margin-top:.7rem}
.detail dd{margin:.1rem 0 0;font-size:1rem}
.caution{margin:.2rem 0 0;padding:.6rem .8rem;border-left:5px solid var(--flag);background:#fdf1f3;font-size:.9375rem}
.caution strong{color:var(--flag)}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.actions a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem .95rem;border-radius:.4rem;border:2px solid var(--sign);color:var(--sign-deep);background:#fff;text-decoration:none;font-weight:700;font-size:.9375rem}
.actions a.fill{background:var(--sign);color:#fff}
.prov{margin:.9rem 0 0;font-size:.875rem;color:var(--muted)}
.prov button{font:inherit;color:var(--sign-deep);background:none;border:0;padding:.7rem .5rem .7rem 0;text-decoration:underline;cursor:pointer}

/* The line that marks the present moment on today's timetable */
.now{display:flex;gap:.7rem;align-items:center;margin:0;padding:.35rem 0;border-top:1px solid var(--rule)}
.now span{font:700 1rem/1 var(--display);background:var(--marigold);color:var(--ink);padding:.3rem .45rem;border-radius:.2rem;white-space:nowrap;flex:0 0 auto}
.now i{display:block;height:4px;background:var(--marigold);border-radius:2px;flex:1 1 auto}

.closed-list{margin:.3rem 0 0;padding:0;list-style:none}
.closed-list li{padding:.55rem 0;border-top:1px solid var(--rule);font-size:.9375rem}
.empty{padding:1.2rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.empty button{font:inherit;color:var(--sign-deep);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* Lower sections */
.block{margin-top:3rem;border-top:6px solid var(--ink);padding-top:.9rem}
.block h2{font:700 1.9rem/1.05 var(--display);margin:0 0 .5rem}
.block p{max-width:38rem}
.lede{color:var(--muted);margin:.2rem 0 1rem}
.links{list-style:none;margin:0;padding:0}
.links li{padding:.75rem 0;border-top:1px solid var(--rule)}
.links a{font-weight:700;display:inline-block;min-height:1.6rem}
.links span{display:block;font-size:.9375rem;color:var(--muted)}
.fine{font-size:.9375rem;color:var(--muted)}

form label{display:block;font-weight:700;font-size:.9375rem;margin:1rem 0 .3rem}
form select,form textarea,form input[type=text]{width:100%;max-width:38rem;font:400 1rem/1.4 var(--body);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:.4rem;padding:.6rem .7rem}
form select{min-height:2.9rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.primary{margin-top:1.2rem;min-height:3rem;padding:.6rem 1.4rem;border:0;border-radius:.4rem;background:var(--sign);color:#fff;font:700 1.0625rem/1 var(--body);cursor:pointer}
.primary[disabled]{opacity:.6;cursor:default}
.form-status{min-height:1.5rem;margin:.8rem 0 0;font-weight:700}
.form-status.bad{color:var(--flag)}
.form-status.good{color:var(--sign-deep)}

@media (min-width:44rem){
  .sign{padding:.75rem}
  .sign-inner{padding:1.6rem 2rem 1.8rem;max-width:calc(var(--measure) + 2rem);margin:0 auto}
  .row summary{grid-template-columns:7rem 1fr}
  .time{font-size:2.2rem}
  .detail{padding-left:7.9rem}
  .days button{min-width:5rem}
}
@media (max-width:22rem){
  .row summary{grid-template-columns:4.3rem 1fr;gap:.25rem .6rem}
  .time{font-size:1.6rem}
  .detail{padding-left:0}
}
@media (prefers-reduced-motion:no-preference){
  .row[open] .detail{animation:reveal .18s ease-out}
  @keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media print{
  .days,.filters,#report,.skip,.more-cue,.actions,.prov button{display:none!important}
  .sign{background:#fff;color:#000;padding:0}
  .sign-inner{border-color:#000}
  .row.past summary{opacity:1}
  .row{break-inside:avoid}
  body{font-size:11pt}
}