/* A concert programme, carried on a trip. Served as-is, with no remote assets. */
:root { color-scheme: light; --bg:#f5f1e9; --surface:#fffcf7; --ink:#252b25; --ink-quiet:#62685c; --line:#d9d9cc; --control-line:#858978; --accent:#a43d2b; --accent-soft:#f3e3d9; --sage:#e9eddf; --panel:#293b30; --panel-ink:#f6f2e8; --panel-quiet:#c5cfbd; --error:#a12f25; --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
@media(prefers-color-scheme:dark) {
  :root { color-scheme:dark; --bg:#1c221e; --surface:#252e27; --ink:#f0eee4; --ink-quiet:#b6bdac; --line:#465044; --control-line:#87957c; --accent:#f0a58c; --accent-soft:#44342b; --sage:#313d30; --panel:#344a3b; --panel-quiet:#d2daca; --error:#ffb09f; }
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--sans); -webkit-text-size-adjust:100%; }
a { color:var(--accent); text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
button,input,select { font:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
input:focus-visible,select:focus-visible { outline-offset:2px; }
::selection { background:var(--sage); color:var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Hidden with clip-path rather than an off-screen offset: Chromium's full-page
   capture renders fixed elements against the scrolled viewport, which drags an
   off-screen link into view; clipping has no such artifact. */
.skip-link { position:fixed; z-index:20; top:1rem; left:1rem; background:var(--surface); padding:.75rem 1rem; clip-path:inset(50%); opacity:0; }
.skip-link:focus { clip-path:none; opacity:1; }
.site-header,.footer,.page-wide { width:min(100% - 3rem,70rem); margin-inline:auto; }
.site-header { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); font-size:1.2rem; font-weight:650; letter-spacing:-.045em; text-decoration:none; }
.brand-mark { width:34px; height:34px; color:var(--accent); flex:none; }
.brand-note,.eyebrow { font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; font-weight:650; }
.brand-note { color:var(--ink-quiet); letter-spacing:.08em; }
.main-nav { display:flex; gap:.4rem; }
.main-nav a { color:var(--ink-quiet); padding:.6rem .9rem; min-height:44px; font-size:.88rem; text-decoration:none; border-radius:6px; }
.main-nav a[aria-current="page"] { color:var(--ink); background:var(--sage); font-weight:650; }
.main-nav a:hover { background:var(--sage); }
.page { width:min(100% - 3rem,37rem); margin:4rem auto 5rem; min-height:48vh; }
.page-wide { margin-top:3.5rem; margin-bottom:5rem; min-height:48vh; }
.page-heading { margin-bottom:2.25rem; }
.eyebrow { color:var(--accent); margin:0 0 .85rem; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:0 0 1rem; font:400 clamp(2.3rem,4.7vw,3.75rem)/1.08 var(--serif); letter-spacing:-.04em; text-wrap:balance; }
h2 { margin:0 0 .7rem; font:400 1.7rem/1.2 var(--serif); letter-spacing:-.025em; }
h3 { margin:0 0 .5rem; font-size:1rem; line-height:1.4; }
p { margin:0 0 1rem; }
.lede { color:var(--ink-quiet); max-width:40rem; margin:0; font-size:1.05rem; }
.quiet,.help { color:var(--ink-quiet); font-size:.875rem; }
.help { margin:.2rem 0 .75rem; }
.section { margin-top:2.5rem; }
.section-header { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1rem; }
.section-header h2 { margin:0; }
.section-header a { font-size:.875rem; flex:none; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.75rem; }
.panel>:last-child,.empty-state>:last-child { margin-bottom:0; }
.stack { display:flex; flex-direction:column; gap:.65rem; }
.form-stack { gap:.5rem; }
.form-stack>label:not(:first-child) { margin-top:.8rem; }
.form-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.25rem; }
label,legend { font-size:.875rem; font-weight:600; }
fieldset { margin:0; padding:0; border:0; }
legend { margin-bottom:.5rem; }
input[type="text"],input[type="email"],input[type="date"],input[type="number"],select { width:100%; min-width:0; min-height:48px; padding:.7rem .8rem; color:var(--ink); background:var(--surface); border:1px solid var(--control-line); border-radius:6px; }
input::placeholder { color:var(--ink-quiet); opacity:.85; }
input[type="checkbox"],input[type="radio"] { accent-color:var(--accent); width:18px; height:18px; vertical-align:middle; margin:0 .4rem 0 0; flex:none; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:46px; padding:.65rem 1.1rem; background:var(--accent); color:var(--surface); border:1px solid transparent; border-radius:6px; font-size:.9rem; font-weight:600; line-height:1.5; text-decoration:none; cursor:pointer; transition:opacity 120ms,background 120ms; }
button:hover,.button:hover { opacity:.86; }
button:disabled,select:disabled { opacity:.55; cursor:wait; }
.btn-quiet,.quiet-button,.chip-button { background:transparent; color:var(--ink); border-color:var(--control-line); }
.btn-link { color:var(--ink-quiet); background:transparent; border:0; text-decoration:underline; text-underline-offset:.2em; padding-inline:.5rem; }
.btn-danger { color:var(--surface); background:var(--error); }
.chip-row { display:flex; flex-wrap:wrap; gap:.65rem; }
.chip-row label { min-height:44px; display:inline-flex; align-items:center; }
.chip { display:inline-block; color:var(--ink-quiet); font-size:.8125rem; line-height:1.5; padding:.25rem .55rem; border:1px solid var(--line); border-radius:4px; }
.notice,.error { padding:.85rem 1rem; border-left:3px solid var(--accent); background:var(--sage); font-size:.9rem; }
.error { color:var(--error); border-color:var(--error); background:var(--accent-soft); }
.feedback { position:fixed; z-index:10; bottom:1.25rem; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 2rem); padding:.75rem 1.1rem; color:var(--panel-ink); background:var(--panel); border-radius:8px; box-shadow:0 3px 18px #0002; font-size:.875rem; }
.feedback[data-error="true"] { background:var(--accent-soft); color:var(--error); border:1px solid var(--error); }
.footer { padding-block:1.5rem 2.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; color:var(--ink-quiet); font-size:.8125rem; }
.footer-links { display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer a { color:var(--ink-quiet); }
/* Overview */
.overview-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2rem; }
.overview-intro .lede { max-width:31rem; }
.location-tag { display:flex; align-items:center; gap:.7rem; padding-bottom:.3rem; color:var(--ink-quiet); font-size:.875rem; }
.location-dot { width:10px; height:10px; border:2px solid var(--accent); border-radius:50%; }
.watch-summary { display:flex; margin:0 0 2.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.watch-summary>div { flex:1; padding:1rem 1.25rem; border-right:1px solid var(--line); }
.watch-summary>div:first-child { padding-left:0; }
.watch-summary>div:last-child { border:0; }
.watch-summary dt { color:var(--ink-quiet); font-size:.8125rem; }
.watch-summary dd { margin:0; font-size:1rem; font-weight:550; }
.overview-grid { display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:2.5rem; align-items:start; }
.overview-main { min-width:0; }
.delivery-note { color:var(--panel-ink); background:var(--panel); border-radius:12px; padding:1.75rem; }
.delivery-note .eyebrow,.delivery-note .quiet { color:var(--panel-quiet); }
.delivery-note h2 { font-size:2rem; margin-bottom:.8rem; }
.delivery-note a { color:var(--panel-ink); }
.delivery-note hr { border:0; border-top:1px solid #ffffff35; margin:1.25rem 0; }
.delivery-note .brand-mark { color:var(--panel-quiet); width:56px; height:56px; margin-bottom:1.5rem; }
.card-list,.result-list,#follows-list,#trips-list,.past-trips-list { list-style:none; margin:0; padding:0; }
.card { border-top:1px solid var(--line); padding:1rem 0; }
.card:last-child { border-bottom:1px solid var(--line); }
.card-row { display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; }
.person-name { font-weight:600; }
.person-meta { font-size:.8125rem; color:var(--ink-quiet); }
/* Coverage state rides the meta line rather than a box of its own below the
   reach control: on a 50-person import that box was 50 extra rows of height
   and 50 borders competing with the selects. */
.person-status::before { content:"·"; margin:0 .4rem; }
.person-identity { display:flex; align-items:center; gap:.85rem; min-width:0; flex:1; }
.person-avatar { flex:none; width:42px; height:42px; display:grid; place-items:center; background:var(--sage); border-radius:50%; color:var(--ink-quiet); font:1.2rem var(--serif); }
.person-copy { min-width:0; }
.person-copy>span { display:block; }
.empty-state { padding:1.5rem; border:1px dashed var(--control-line); border-radius:8px; }
.empty-state h3 { font:1.45rem var(--serif); }
.trip-teaser { display:flex; align-items:center; gap:1.25rem; padding:1.25rem; background:var(--sage); border-radius:8px; margin-bottom:.7rem; }
.date-stamp { text-align:center; flex:none; padding-right:1rem; border-right:1px solid var(--control-line); min-width:3.6rem; }
.date-stamp span { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.date-stamp strong { font:2rem/1.2 var(--serif); }
.trip-teaser p { margin:0; }
.history { margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1rem; }
summary { cursor:pointer; min-height:44px; padding-block:.5rem; font-size:.9rem; }
summary:hover { color:var(--accent); }
details[open]>summary { margin-bottom:.8rem; }
/* Shared setup and management */
.setup-progress { list-style:none; margin:0 0 2.5rem; padding:0; display:flex; gap:.6rem; counter-reset:setup; }
.setup-progress li { flex:1; border-top:2px solid var(--line); padding-top:.6rem; font-size:.8125rem; color:var(--ink-quiet); }
.setup-progress li::before { counter-increment:setup; content:"0" counter(setup) " "; font-size:.75rem; margin-right:.2rem; }
.setup-progress [aria-current="step"] { border-color:var(--accent); color:var(--accent); font-weight:600; }
.setup-progress a { color:inherit; }
.people-layout,.trips-layout { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:2.5rem; align-items:start; }
.side-note { background:var(--sage); border-radius:12px; padding:1.5rem; }
.side-note h2 { font-size:1.5rem; }
.range-guide { list-style:none; margin:0; padding:0; }
.range-guide li { display:flex; gap:.85rem; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--line); }
.range-guide li:last-child { border:0; }
.range-guide strong,.range-guide small { display:block; font-size:.85rem; }
.range-guide small { color:var(--ink-quiet); font-weight:400; }
.range-icon { width:32px; height:32px; border:1px solid var(--control-line); border-radius:50%; display:grid; place-items:center; font-size:.9rem; flex:none; }
.range-icon-wide { outline:1px solid var(--control-line); outline-offset:3px; }
.search-panel { margin-bottom:1.5rem; }
.search-input-wrap { position:relative; }
.search-input-wrap input { padding-left:2.5rem; }
.search-icon { position:absolute; top:12px; left:.9rem; color:var(--ink-quiet); width:19px; height:19px; pointer-events:none; }
.search-status { min-height:1.4rem; font-size:.8125rem; color:var(--ink-quiet); }
.htmx-indicator { opacity:0; }
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator { opacity:1; }
.result-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.result-row button { min-width:5.5rem; }
.following-label { font-size:.8125rem; color:var(--ink-quiet); }
.unknown-person { padding-top:.5rem; }
.unknown-person form { margin-top:.5rem; }
.follow-row { padding:1rem 0; border-bottom:1px solid var(--line); }
.follow-row:first-child,.follow-note:first-child { border-top:1px solid var(--line); }
.follow-note { padding:1rem 0; border-bottom:1px solid var(--line); }
.follow-row .error { margin:.75rem 0 0; }
.follow-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.follow-controls { margin:.6rem 0 0 3.5rem; display:flex; gap:.65rem; align-items:center; }
.follow-controls select { max-width:18rem; min-height:44px; padding-block:.45rem; font-size:.85rem; }
.follow-controls label { flex:none; font-size:.8125rem; color:var(--ink-quiet); }
.import-note { padding-top:1.1rem; border-top:1px solid var(--line); margin-top:1.1rem; }
.optional-trip { padding:1rem 1.25rem; border:1px solid var(--line); border-radius:10px; margin-top:2rem; background:var(--surface); }
.date-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.75rem; }
.date-fields>div { min-width:0; }
.date-fields label { display:block; margin-bottom:.35rem; }
.trip-card { padding:1.5rem; border:1px solid var(--line); background:var(--surface); border-radius:12px; margin-bottom:1rem; }
.trip-heading { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; }
.trip-heading h2 { margin:0 0 .25rem; font-size:1.65rem; }
.trip-heading p { margin:0; }
.trip-preview { border-top:1px dashed var(--control-line); padding-top:1rem; }
.trip-preview ul { list-style:none; padding:0; margin:0; }
.trip-preview li { margin-bottom:.75rem; font-size:.9rem; padding-left:.85rem; border-left:2px solid var(--accent); }
.trip-preview h3 { font-size:.9rem; }
.trip-edit { margin-top:1rem; border-top:1px solid var(--line); padding-top:.35rem; }
.trip-edit .form-actions { margin-top:.5rem; }
.trip-remove { margin-top:.5rem; }
.trip-title-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.trip-heading .trip-provenance { margin-top:.15rem; }
.badge { display:inline-flex; align-items:center; font-size:.75rem; font-weight:650; letter-spacing:.02em; padding:.2rem .6rem; border-radius:999px; line-height:1.4; white-space:nowrap; }
.badge-gcal { color:var(--ink-quiet); background:var(--sage); border:1px solid var(--line); }
/* Open weekends (plans/WEEKEND_PLAN.md). Each suggestion is one block:
   dates and place on top, the shows that justify it underneath, the action
   last -- the card has to answer "why this weekend" before it asks for a
   commitment. */
.badge-travel { color:var(--accent); background:var(--accent-soft); }
.badge-count { color:var(--ink-quiet); background:var(--sage); }
.getaway-list { list-style:none; margin:0; padding:0; }
.getaway { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.5rem; margin-bottom:1rem; }
.getaway-head { display:flex; align-items:flex-start; gap:1.25rem; }
.getaway-copy { min-width:0; }
.getaway-rank { margin-bottom:.4rem; }
.getaway-copy h2 { margin-bottom:.3rem; }
.getaway-when { margin-bottom:.6rem; }
.getaway-distance { white-space:nowrap; }
.getaway-shows { list-style:none; margin:1.1rem 0 0; padding:1.1rem 0 0; border-top:1px solid var(--line); }
.getaway-shows li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; padding:.35rem 0; }
.getaway-show-person { font-weight:650; }
.getaway-show-where { flex-basis:100%; font-size:.875rem; }
.getaway-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1.2rem; }
.getaway-actions .help { margin:0; }
.getaway-calendar-note { margin-top:1.5rem; }
.gcal-status { margin:1rem 0; }
.gcal-status .notice { margin-bottom:.5rem; }
.gcal-status-line { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:0; }
.gcal-check-now { margin:.35rem 0 0; }
.spotify-list { list-style:none; padding:0; margin:1.5rem 0; }
.spotify-row { padding:1.1rem 0; border-bottom:1px solid var(--line); }
.spotify-row>label:first-child { display:flex; align-items:center; gap:.4rem; min-height:44px; font-size:1rem; }
.spotify-row>.quiet { display:block; margin-left:1.9rem; }
.spotify-row select { margin-top:.35rem; }
.settings-layout { display:grid; grid-template-columns:minmax(0,36rem) minmax(0,1fr); gap:2.5rem; }
.danger-zone { padding-top:1.5rem; border-top:1px solid var(--line); margin-top:2rem; }
.signin-layout { display:grid; grid-template-columns:1.15fr 1fr; grid-template-areas:"story card" "support card"; gap:2rem 5rem; align-items:center; padding-block:1.5rem; }
.signin-story { grid-area:story; }
.signin-card { grid-area:card; }
.signin-story h1 { font-size:clamp(2.8rem,5.3vw,4.6rem); }
.signin-story h1 em { color:var(--accent); font-weight:400; }
.signin-story .lede { max-width:27rem; }
.signin-card { padding:2rem; }
.signin-card h2 { font-size:2rem; }
.signin-caption { grid-area:support; display:flex; gap:1.5rem; align-items:center; padding-top:1.5rem; border-top:1px solid var(--line); }
.signin-caption p { flex:0 1 auto; min-width:11rem; }
.journey-art { display:block; flex:1 1 12rem; min-width:0; max-width:360px; height:auto; color:var(--accent); }
.spotify-person { display:flex; align-items:center; gap:.5rem; }
.trip-heading { justify-content:space-between; }
.prose h2 { margin-top:2rem; }
.admin-page .section { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.875rem; text-align:left; }
th,td { padding:.8rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.75rem; background:var(--sage); }
pre { font-size:.8125rem; overflow-wrap:anywhere; }
@media(prefers-color-scheme:dark) {
  button,.button,.btn-danger { color:var(--bg); }
  .btn-quiet,.quiet-button,.chip-button,.btn-link { color:var(--ink); }
}
@media(max-width:850px) {
  .overview-grid { grid-template-columns:minmax(0,1fr) 17rem; gap:1.5rem; }
  .people-layout,.trips-layout { grid-template-columns:minmax(0,1fr) 16rem; gap:1.5rem; }
  .signin-layout { gap:2rem; }
  .brand-note { display:none; }
}
@media(max-width:680px) {
  .site-header,.footer,.page-wide,.page { width:calc(100% - 2.5rem); }
  .site-header { flex-wrap:wrap; gap:.75rem; padding-block:1.25rem .75rem; min-height:auto; }
  .main-nav { width:100%; justify-content:space-between; gap:.1rem; }
  .main-nav a { text-align:center; flex:1; padding:.55rem .35rem; font-size:.8125rem; }
  .page,.page-wide { margin-top:2.25rem; margin-bottom:3rem; }
  .page-heading { margin-bottom:1.75rem; }
  .overview-intro { display:block; }
  .location-tag { margin-top:1rem; }
  .watch-summary { margin-bottom:1.5rem; }
  .watch-summary>div { padding:.85rem .75rem; }
  .watch-summary dd { font-size:.875rem; }
  .watch-summary dt { font-size:.8125rem; }
  .overview-grid,.people-layout,.trips-layout,.settings-layout,.signin-layout { display:flex; flex-direction:column; gap:1.75rem; }
  .overview-main,.delivery-note,.people-main,.trips-main,.side-note,.settings-main,.signin-card { width:100%; }
  .delivery-note { order:-1; padding:1.4rem; }
  .delivery-note .brand-mark { display:none; }
  .delivery-note h2 { font-size:1.75rem; }
  .panel,.trip-card,.side-note { padding:1.25rem; }
  .section { margin-top:2rem; }
  .section-header h2 { font-size:1.5rem; }
  .card-row { flex-wrap:wrap; }
  .follow-controls { margin-left:0; }
  .follow-controls select { flex:1; max-width:none; }
  .follow-top .btn-link { font-size:.8125rem; }
  .signin-layout { padding:0; }
  .signin-story h1 { font-size:2.9rem; }
  .signin-caption { flex-wrap:wrap; padding-top:0; border-top:0; }
  .journey-art { flex:0 0 auto; width:min(100%,220px); }
  .getaway { padding:1.25rem; }
  .getaway-head { gap:.9rem; }
  .date-fields { gap:.5rem; }
  input[type="date"] { padding-inline:.4rem; font-size:.9rem; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:360px) {
  .date-fields { grid-template-columns:minmax(0,1fr); }
  .trip-heading { flex-wrap:wrap; }
}