/* The wedding app, direction B "the route" (ruled by Bradley 2026-10-07).
   Colours and type from 103_brand/projects/wedding/brand_spec.json. */
:root {
  --cream: #FFF8EE;
  --ink: #2F2211;
  --muted: #6B5A48;
  --hair: #E6DDCF;
  --orange: #F69412;
  --blue: #002FA7;
  --dark-orange: #CD5507;   /* the Celebration's "now", and anything that went wrong */
  --peach: #FDC8A2;      /* the save-the-date's dashed route */
  --blue-line: #99A8D2;  /* blue-day only: the route's day half; 40% Klein blue over cream */
  --serif: "Book Antiqua", Palatino, "Palatino Linotype", "URW Palladio L", serif;
  --mono: Consolas, Menlo, Inconsolata, "DejaVu Sans Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--cream); color-scheme: light; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.5 var(--serif); }
main { max-width: 480px; margin: 0 auto; padding: 0 0 34px; }
p { margin: 0 0 8px; }
a { color: var(--blue); }
.mono { font-family: var(--mono); }
.small { font-size: 14px; }
.todo { color: var(--muted); font-style: italic; font-size: 14px; }

.top { text-align: center; padding: 34px 21px 13px; }
.mark { display: block; height: 120px; width: auto; margin: 0 auto 8px; }
.top h1 { font-weight: 400; font-size: 33px; line-height: 1.2; margin: 0; }
.sub { font-size: 15px; margin: 5px 0 0; }
.tier { color: var(--flood); }
.tier-celebration .tier { color: var(--now); }  /* the card orange is too pale for text on cream */

.status { margin: 8px 21px 0; padding: 13px 0; border-top: 1px solid var(--hair);
          border-bottom: 1px solid var(--hair); text-align: center; }
.status .now { font-size: 21px; }
.status .next { font-size: 15px; margin: 0; }

.weather { margin: 13px 21px 0; padding: 8px 13px; border: 1px solid var(--hair); font-size: 15px; }
.weather p { margin: 0; }
.lab { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; float: right; font-family: var(--mono); color: var(--muted); }
details[open] summary::after { content: "\2212"; }

.route { list-style: none; margin: 21px 21px 0; padding: 0; }
.route > li { position: relative; display: grid; grid-template-columns: 52px 26px 1fr;
              align-items: start; padding: 3px 0 13px; --line: var(--peach); --ring: var(--orange); }
.route > li::before { content: ""; position: absolute; left: 61px; top: 16px; bottom: -5px;
                      border-left: 4px dashed var(--line); }
.route > li:last-child::before { display: none; }
.route .t { font-size: 15px; padding-top: 2px; }
.route .dot { width: 16px; height: 16px; margin: 4px 0 0 3px; border-radius: 50%;
              background: var(--cream); border: 3px solid var(--ring); position: relative; z-index: 1; }
.route summary { font-size: 18px; }
.route details > :not(summary):first-of-type { margin-top: 5px; }
.route .place, .place { color: var(--muted); font-size: 15px; }
.route > li.past .dot { background: var(--ring); }
.route > li.past .t, .route > li.past summary { color: var(--muted); }
.route > li.now .dot { background: var(--now); border-color: var(--now);
                       box-shadow: 0 0 0 4px var(--cream), 0 0 0 6px var(--now); }
.route > li.now summary { font-weight: bold; }

/* The Full-Day-only stops in Klein blue, the evening in orange (Bradley, 2026-10-07). */
.blue-day .route > li.day { --line: var(--blue-line); --ring: var(--blue); }
.blue-day .route > li.day .t { color: var(--blue); }
.blue-day .route > li.day.past .t { color: var(--muted); }

/* The photo walk's map: the whole walk, small, in the stop; full screen on a tap (a #walk-map
   link, no script). */
.walkmap { display: block; margin: 8px 0 5px; color: var(--muted); text-decoration: none; }
.walkmap img { display: block; width: 100%; height: 260px; object-fit: contain;
               border: 1px solid var(--hair); background: var(--cream); }
.walkmap span { display: block; margin-top: 3px; font-size: 13px; }
.overlay { display: none; position: fixed; inset: 0; z-index: 10; overflow: auto;
           background: var(--cream); padding: 8px 13px 21px; }
.overlay:target { display: block; }
.overlay .bar { display: flex; justify-content: space-between; gap: 13px; max-width: 720px;
                margin: 0 auto 8px; font-size: 14px; }
.overlay img { display: block; width: 100%; max-width: 720px; height: auto;
               max-height: calc(100vh - 96px); object-fit: contain; margin: 0 auto; }
.overlay .key { max-width: 720px; margin: 8px auto 0; font-size: 13px; color: var(--muted); }

/* The two photo walks; /choose/ greenlights one on the day. */
.walk { border-top: 1px solid var(--hair); margin-top: 13px; padding-top: 8px; }
.walk-title { margin-bottom: 5px; }
.greenlit { background: var(--blue); color: var(--cream); font-size: 12px; letter-spacing: .1em;
            text-transform: uppercase; padding: 1px 6px; margin-left: 8px; }
.walk.not-today { opacity: .5; }
.walk.not-today .walkmap { display: none; }

/* /choose/: Bradley's switch. */
.choose { padding: 0 21px; }
.choose label { display: block; font-size: 13px; color: var(--muted); margin: 21px 0 5px; }
.choose input { width: 100%; font: 17px var(--mono); padding: 8px; border: 1px solid var(--hair);
                background: #fff; color: var(--ink); }
.choose .buttons { display: grid; gap: 8px; margin: 21px 0 13px; }
.choose button { font: 18px var(--serif); padding: 13px; border: 2px solid var(--blue);
                 background: var(--cream); color: var(--blue); cursor: pointer; }
.choose button:last-child { border-color: var(--hair); color: var(--muted); }

/* The app's two tabs, the plan and the photos, fixed at the foot of the screen (Bradley,
   2026-10-08). Maps and the photo viewer open above them. */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center;
        background: var(--cream); border-top: 1px solid var(--hair);
        padding-bottom: env(safe-area-inset-bottom); }
.tabs a { flex: 1; max-width: 240px; padding: 13px 8px; margin-top: -1px; text-align: center;
          font-size: 15px; color: var(--muted); text-decoration: none; border-top: 3px solid transparent; }
.tabs a[aria-current="page"] { color: var(--now); border-top-color: var(--now); }
.has-tabs main { padding-bottom: 89px; }

/* The gallery: the whole day's route, each guest's photo under the stop it was taken at. */
main.wide { max-width: 720px; }
.gallery > li { grid-template-columns: 52px 26px minmax(0, 1fr); }   /* the photos never widen the page */
.gallery > li.aside { --line: var(--hair); --ring: var(--muted); }    /* before and after the day */
.route > li[hidden] { display: none; }
.route > li:has(+ li[hidden]:last-child)::before { display: none; }
.route .stop-title { font-size: 18px; margin: 0 0 5px; }
.route > li:not(:has(.ph)) .stop-title { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 3px; }
.grid:empty { display: none; }
.ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--hair); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ph img.missing { visibility: hidden; }   /* not rendered by Drive yet: an empty tile, no broken icon */
@media (min-width: 600px) { .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }
html.viewing { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
          padding: 8px 13px 13px; background: var(--ink); color: var(--cream); }
.viewer[hidden] { display: none; }
.viewer img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.viewer .cap { margin: 8px 0; text-align: center; font-size: 14px; }
.viewer .nav { display: flex; justify-content: space-between; align-items: center; gap: 8px;
               max-width: 720px; width: 100%; margin: 0 auto; font-size: 14px; }
.viewer button { font: 14px var(--mono); padding: 8px 13px; cursor: pointer;
                 background: none; color: var(--cream); border: 1px solid var(--cream); }
.viewer button:disabled { opacity: .35; cursor: default; }
.viewer a { color: var(--cream); }

/* Add photos (Bradley, 2026-10-09: our own button, gated by a word), under "Your photos" on each
   tier's page and above the Full Day's photos. One row per file, with its progress. */
[data-add-on][hidden] { display: none; }   /* shown by upload.js once the site says Add photos is on */
.your-photos { margin: 13px 21px 0; padding: 8px 13px 13px; border: 1px solid var(--hair); }
.your-photos p { margin: 0 0 8px; }
.add { margin: 8px 0 13px; }
.add button { font: 18px var(--serif); padding: 13px; width: 100%; border: 2px solid var(--blue);
              background: var(--cream); color: var(--blue); cursor: pointer; }
.add form { margin-top: 13px; }
.add label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 5px; }
.add input[type="text"] { width: 100%; font: 17px var(--mono); padding: 8px; margin-bottom: 8px;
                          border: 1px solid var(--hair); background: #fff; color: var(--ink); }
.add [role="alert"] { color: var(--dark-orange); }
.add .uploads { margin: 13px 0 0; font-size: 13px; }
.uploads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
.uploads .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploads .bar { grid-column: 1 / -1; display: block; height: 3px; background: var(--hair); }
.uploads .fill { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.uploads li.done .state { color: var(--muted); }
.uploads li.failed .state { color: var(--dark-orange); }

h2 { font-weight: 400; font-size: 27px; margin: 34px 21px 8px; }
.sec { border-top: 1px solid var(--hair); padding: 13px 21px; }
.sec summary { font-size: 18px; }
.sec[open] summary { margin-bottom: 8px; }
ul.plain, ul.food { list-style: none; padding: 0; margin: 0 0 8px; }
ul.plain li, ul.food li { margin: 0 0 13px; }
.sign { font-style: italic; font-weight: bold; margin: 34px 21px 13px; }
.credit { font-size: 12px; color: var(--muted); margin: 0 21px; }
.credit a { color: var(--muted); }