/* JOE'S - local guide, below the first screen (revamp, 8 Oct 2026). /local-guide and /es/local-guide only.
   The head, the contents list, the navy planner band and its form are first-screen rules and live in
   _src/joes-critical-guide.css (inlined by _build-shell.py). This file: the planner's results (every class
   /assets/js/trip.js writes), the ready-made itineraries, the courtyard stops, the place cards and the close.

   Rules of the house: everything in @layer pages and scoped by .sub-local-guide; tokens only (Mimi's own
   red on her courtyard card is the one raw colour); min-width breakpoints only; transform and opacity are
   the only animated properties. The itinerary is a route line: courtyard stops (Joe's, Mimi's) get the navy
   dot with an ember ring, everything else the ember dot. */
@layer pages {
  /* ── Planner results (trip.js) ── */
  .sub-local-guide .tp-out:focus { outline: none; }
  .sub-local-guide .tp-out:not(:empty) {
    display: grid; gap: var(--sp-md); margin-top: var(--sp-lg); padding: var(--sp-md);
    border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--sh-3);
  }
  .sub-local-guide .tp-out p { margin: 0; }
  .sub-local-guide .tp-intro { font-weight: 700; }
  .sub-local-guide .tp-check { color: var(--muted); font-size: var(--step--1); }
  .sub-local-guide .tp-warn { padding: var(--sp-2xs) var(--sp-xs); border-left: 3px solid var(--ember); border-radius: 0 var(--r) var(--r) 0; background: var(--tint); font-size: var(--step--1); }
  .sub-local-guide .tp-out .tp-warn { margin-top: var(--sp-2xs); }

  /* Conditions card */
  .sub-local-guide .tp-cond { padding: var(--sp-md); border: 1px solid var(--line); border-left: 5px solid var(--navy); border-radius: var(--r-lg); background: var(--paper); }
  .sub-local-guide :is(.tp-cond, .tp-day) h3 { margin: 0 0 var(--sp-xs); font-size: var(--step-2); color: var(--ink); }
  .sub-local-guide .tp-cond h4 { margin: var(--sp-sm) 0 var(--sp-2xs); font-size: var(--step-0); line-height: 1.1; color: var(--ink); }
  .sub-local-guide .tp-cond ul { display: grid; gap: .3rem; padding-left: 1.1rem; }
  .sub-local-guide .tp-grid { display: grid; gap: var(--sp-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .sub-local-guide .tp-grid p { margin-top: .2rem; }
  .sub-local-guide .tp-live { margin-top: var(--sp-sm); padding-top: var(--sp-xs); border-top: 1px solid var(--line); }
  .sub-local-guide .tp-live p { margin-top: .3rem; font-size: var(--step--1); }

  /* One card per day, an hour-by-hour line inside it */
  .sub-local-guide .tp-day { padding: var(--sp-md); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .sub-local-guide .tp-dn { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ember-dk); }
  .sub-local-guide .tp-fx:empty { display: none; }
  .sub-local-guide .tp-line { margin-top: var(--sp-2xs); list-style: none; }
  .sub-local-guide .tp-line > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; padding: var(--sp-xs) 0; border-top: 1px solid var(--line); }
  .sub-local-guide .tp-line time { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .sub-local-guide .tp-line p { margin: 0 0 .3rem; }
  .sub-local-guide .tp-line h4 { margin: 0 0 .15rem; font-size: var(--step-1); line-height: 1.1; color: var(--ink); }
  .sub-local-guide .tp-meta { font-size: var(--step--1); font-weight: 700; color: var(--muted); }
  .sub-local-guide .tp-tip { font-size: var(--step--1); color: var(--muted); }
  /* Courtyard rows (trip.js writes tp-leave, tp-joe, tp-back, tp-shut, tp-mimi, tp-home) and the night stop. */
  .sub-local-guide :is(.tp-joe, .tp-mimi, .tp-back, .tp-shut, .tp-home) p { font-weight: 600; }
  .sub-local-guide .tp-joe { background: linear-gradient(90deg, color-mix(in srgb, var(--ember) 7%, transparent), transparent); }
  .sub-local-guide .tp-night { background: linear-gradient(90deg, color-mix(in srgb, var(--navy) 8%, transparent), transparent); }
  /* Swap / remove / add: real buttons, 44px tall. */
  .sub-local-guide .tp-act { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-top: var(--sp-2xs); }
  .sub-local-guide :is(.tp-act, .tp-more) button {
    min-height: 44px; padding: 0 var(--sp-sm); border: 0; border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1.5px var(--ctl-line); background: var(--paper); color: var(--ink); font-weight: 700; font-size: var(--step--1);
  }
  .sub-local-guide :is(.tp-act, .tp-more) button:hover { box-shadow: inset 0 0 0 1.5px var(--ember); color: var(--ember-dk); }
  .sub-local-guide .tp-more { margin-top: var(--sp-xs); }
  .sub-local-guide .tp-more > summary { display: flex; align-items: center; width: fit-content; min-height: 44px; font-weight: 700; color: var(--ember-dk); cursor: pointer; }
  .sub-local-guide .tp-more ul { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-top: .3rem; list-style: none; }
  .sub-local-guide .tp-btns { margin-top: var(--sp-2xs); }

  @media (min-width: 40rem) {
    .sub-local-guide .tp-out:not(:empty) { padding: var(--sp-lg); }
    .sub-local-guide .tp-line > li { grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--sp-sm); }
  }

  /* ── Ready-made itineraries ── */
  .sub-local-guide .lg-trips { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .sub-local-guide .lg-trip { min-width: 0; padding: var(--sp-md) var(--sp-md) .4rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
  .sub-local-guide .lg-trip h3 { font-size: var(--step-2); line-height: 1.05; color: var(--ink); }
  .sub-local-guide .lg-dur { margin: .25rem 0 var(--sp-sm); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ember-dk); }
  .sub-local-guide .lg-steps { list-style: none; }
  .sub-local-guide .lg-steps li { position: relative; padding: 0 0 var(--sp-sm) 1.7rem; }
  .sub-local-guide .lg-steps li::before { content: ""; position: absolute; left: .25rem; top: .38rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ember); }
  .sub-local-guide .lg-steps li::after { content: ""; position: absolute; left: .57rem; top: 1.15rem; bottom: .05rem; width: 2px; background: var(--line); }
  .sub-local-guide .lg-steps li:last-child::after { content: none; }
  .sub-local-guide .lg-steps li.home::before { background: var(--navy); box-shadow: 0 0 0 3px var(--ember-lt); }
  .sub-local-guide .lg-steps b { display: block; line-height: 1.3; color: var(--ink); }
  .sub-local-guide .lg-steps span { display: block; font-size: var(--step--1); line-height: 1.45; color: var(--muted); }

  /* ── The courtyard: three stops ── */
  .sub-local-guide .lg-yard { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .sub-local-guide .lg-stop { min-width: 0; padding: var(--sp-md); border: 1px solid var(--line); border-top: 6px solid var(--ember); border-radius: var(--r-lg); background: var(--paper); }
  .sub-local-guide .lg-stop--mimi { border-top-color: #d41020; }   /* Mimi's own red, her card only */
  .sub-local-guide .lg-stop--dr { border-top-color: var(--navy); }
  .sub-local-guide .lg-stop h3 { margin: 0 0 .35rem; font-size: var(--step-2); color: var(--ink); }
  .sub-local-guide .lg-stop p { margin: 0 0 .45rem; }
  .sub-local-guide :is(.lg-stop, .lg-meta) a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ember-dk); }
  .sub-local-guide :is(.lg-stop, .lg-meta) a:hover { color: var(--ember); }

  /* ── Place cards ── */
  .sub-local-guide .lg-grid { display: grid; gap: var(--sp-2xs) var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .sub-local-guide .lg-card { min-width: 0; padding: var(--sp-sm) 0 .3rem; border-top: 1px solid var(--brass); }
  .sub-local-guide .lg-card h3 { margin: 0 0 .3rem; font-size: var(--step-1); line-height: 1.1; color: var(--ink); }
  .sub-local-guide .lg-card p { margin: 0 0 .35rem; color: var(--muted); }
  .sub-local-guide .lg-card .lg-meta { color: var(--ink); }
  .sub-local-guide .lg-meta { font-size: var(--step--1); font-weight: 700; color: var(--ink); }
  .sub-local-guide .lg-meta a { margin-left: .4rem; }

  /* ── The close ── */
  .sub-local-guide .lg-end { text-align: center; }
  .sub-local-guide .lg-end .sec-h { margin-inline: auto; }
  .sub-local-guide .lg-end .sec-h::after { left: 50%; transform: translateX(-50%); }
  .sub-local-guide .lg-end .sec-sub { margin-inline: auto; }
  .sub-local-guide .lg-note { max-width: 58ch; margin: var(--sp-md) auto 0; font-size: var(--step--1); color: var(--muted); }
}

/* 'Show me another plan' sits beside Copy (8 Oct 2026). */
@layer pages { .sub-local-guide .tp-btns { display: flex; flex-wrap: wrap; gap: .6rem; } }