/* ===================================================================
   Munich Oldtown Tour — Material Design 3

   The four Google colours each do one job, so the palette carries
   information instead of decoration:

     Blue    primary      a stop — you are standing still, talking
     Green   tertiary     a walk — you are moving, and you are on time
     Red     error        you are behind, or something needs watching
     Yellow  caution      timing notes (the Glockenspiel, mostly)

   Tokens are Google's own M3 scheme seeded from Google Blue.
   =================================================================== */

:root {
  color-scheme: light dark;

  /* --- Google brand ------------------------------------------------ */
  --g-blue:   #4285F4;
  --g-red:    #EA4335;
  --g-yellow: #FBBC04;
  --g-green:  #34A853;

  /* --- M3 light scheme --------------------------------------------- */
  --m3-primary:              #0B57D0;
  --m3-on-primary:           #FFFFFF;
  --m3-primary-container:    #D3E3FD;
  --m3-on-primary-container: #041E49;

  --m3-secondary-container:    #C2E7FF;
  --m3-on-secondary-container: #001D35;

  --m3-tertiary:              #146C2E;
  --m3-on-tertiary:           #FFFFFF;
  --m3-tertiary-container:    #C4EED0;
  --m3-on-tertiary-container: #072711;

  --m3-error:              #B3261E;
  --m3-on-error:           #FFFFFF;
  --m3-error-container:    #F9DEDC;
  --m3-on-error-container: #410E0B;

  --m3-caution:              #EA8600;
  --m3-caution-container:    #FEEFC3;
  --m3-on-caution-container: #4D3800;

  --m3-surface:                 #F8FAFD;
  --m3-surface-container-low:   #F2F5F9;
  --m3-surface-container:       #ECEFF3;
  --m3-surface-container-high:  #E5E8EC;
  --m3-surface-bright:          #FFFFFF;
  --m3-on-surface:              #1F1F1F;
  --m3-on-surface-variant:      #444746;
  --m3-outline:                 #747775;
  --m3-outline-variant:         #C4C7C5;
  --m3-inverse-surface:         #303030;
  --m3-inverse-on-surface:      #F2F2F2;

  --m3-shadow: 0deg 0% 0%;

  /* --- M3 elevation ------------------------------------------------- */
  --m3-elev-1: 0 1px 2px 0 hsl(var(--m3-shadow) / .30), 0 1px 3px 1px hsl(var(--m3-shadow) / .15);
  --m3-elev-2: 0 1px 2px 0 hsl(var(--m3-shadow) / .30), 0 2px 6px 2px hsl(var(--m3-shadow) / .15);
  --m3-elev-3: 0 4px 8px 3px hsl(var(--m3-shadow) / .15), 0 1px 3px 0 hsl(var(--m3-shadow) / .30);

  /* --- M3 shape ----------------------------------------------------- */
  --m3-r-xs:  0.25rem;
  --m3-r-sm:  0.5rem;
  --m3-r-md:  0.75rem;
  --m3-r-lg:  1rem;
  --m3-r-xl:  1.75rem;
  --m3-r-full: 62.4375rem;

  /* --- Type --------------------------------------------------------- */
  --m3-display: "Roboto Flex", "Roboto", system-ui, sans-serif;
  --m3-body:    "Roboto", system-ui, -apple-system, sans-serif;
  --m3-mono:    "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rail: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --m3-primary:              #A8C7FA;
    --m3-on-primary:           #062E6F;
    --m3-primary-container:    #0842A0;
    --m3-on-primary-container: #D3E3FD;

    --m3-secondary-container:    #004A77;
    --m3-on-secondary-container: #C2E7FF;

    --m3-tertiary:              #6DD58C;
    --m3-on-tertiary:           #0A3818;
    --m3-tertiary-container:    #0F5223;
    --m3-on-tertiary-container: #C4EED0;

    --m3-error:              #F2B8B5;
    --m3-on-error:           #601410;
    --m3-error-container:    #8C1D18;
    --m3-on-error-container: #F9DEDC;

    --m3-caution:              #FDD663;
    --m3-caution-container:    #3E2E00;
    --m3-on-caution-container: #FDE293;

    --m3-surface:                #131314;
    --m3-surface-container-low:  #1B1B1B;
    --m3-surface-container:      #1E1F20;
    --m3-surface-container-high: #282A2C;
    --m3-surface-bright:         #37393B;
    --m3-on-surface:             #E3E3E3;
    --m3-on-surface-variant:     #C4C7C5;
    --m3-outline:                #8E918F;
    --m3-outline-variant:        #444746;
    --m3-inverse-surface:        #E3E3E3;
    --m3-inverse-on-surface:     #303030;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

/* An author `display` beats the UA stylesheet's [hidden] rule, so elements
   toggled with .hidden stay on screen. .bar__status is display:flex and was
   showing a stale banner after a reset. */
[hidden] { display: none !important; }

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  font-family: var(--m3-body);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  /* Kardinal-Faulhaber-Straße and friends must not widen the page */
  overflow-wrap: break-word;
}

#main {
  max-width: 34rem;
  margin: 0 auto;
  /* clear of the extended FAB */
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}

/* --- Material Symbols ---------------------------------------------- */

.msym {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
  flex: none;
}
.msym--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* --- M3 type scale --------------------------------------------------- */

.m3-display {
  font-family: var(--m3-display);
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
  font-variation-settings: "wdth" 100, "opsz" 72;
}
.m3-headline {
  font-family: var(--m3-display);
  font-size: 1.5rem;
  line-height: 1.33;
  font-weight: 400;
  letter-spacing: 0;
  font-variation-settings: "wdth" 100, "opsz" 32;
}
.m3-title {
  font-family: var(--m3-body);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.009em;
}
.m3-label {
  font-family: var(--m3-body);
  font-size: 0.6875rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.m3-body {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.031em;
}

/* ===================================================================
   Top app bar
   =================================================================== */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--m3-surface-container);
  padding-top: env(safe-area-inset-top);
  box-shadow: var(--m3-elev-2);
}

.bar__row {
  max-width: 34rem;
  margin: 0 auto;
  min-height: 3.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(0.375rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.bar__id { min-width: 0; flex: 1 1 auto; }

.bar__name {
  font-family: var(--m3-display);
  /* shrinks a little on narrow phones so the name stays whole rather than
     ellipsising away; the clock and reset never give ground */
  font-size: clamp(1.0625rem, 4.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--m3-on-surface);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar__sub {
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--m3-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* M3 icon button */
.iconbtn {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--m3-r-full);
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.iconbtn .msym { font-size: 1.25rem; }
.iconbtn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .12s ease;
}
.iconbtn:hover::after  { opacity: .08; }
.iconbtn:active::after { opacity: .12; }

/* clock: an M3 tonal button */
.clockbtn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.5rem;
  padding: 0 1rem 0 0.875rem;
  border: 0;
  border-radius: var(--m3-r-full);
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-family: var(--m3-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.clockbtn .msym { font-size: 1.125rem; }
.clockbtn__time { font-family: var(--m3-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.clockbtn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .12s ease;
}
.clockbtn:hover::after  { opacity: .08; }
.clockbtn:active::after { opacity: .12; }

/* --- segmented linear progress -------------------------------------- */

.band {
  display: flex;
  gap: 2px;
  height: 0.25rem;
  padding: 0 0.125rem;
  background: var(--m3-surface-container);
}
.seg {
  position: relative;
  overflow: hidden;
  border-radius: var(--m3-r-full);
  background: var(--m3-outline-variant);
}
.seg--stop { background: color-mix(in srgb, var(--m3-primary) 26%, transparent); }
.seg--leg  { background: color-mix(in srgb, var(--m3-tertiary) 26%, transparent); }
.seg__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: var(--m3-r-full);
  transition: width .5s linear;
}
.seg--stop .seg__fill { background: var(--m3-primary); }
.seg--leg  .seg__fill { background: var(--m3-tertiary); }

/* --- status banner --------------------------------------------------- */

.bar__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.4375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  text-align: center;
  min-width: 0;
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
}
.bar__status .msym { font-size: 1.0625rem; }
.bar__status[data-state="done"] {
  background: var(--m3-tertiary-container);
  color: var(--m3-on-tertiary-container);
}

/* ===================================================================
   Opening brief
   =================================================================== */

.brief { padding: 2rem 0 0.5rem; }

.brief__title { margin: 0 0 1.5rem; }
.brief__title em { font-style: normal; color: var(--m3-primary); }

.brief__lede {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.031em;
  color: var(--m3-on-surface-variant);
  margin: 0 0 1.5rem;
  max-width: 32ch;
}

/* stat cards */
.facts {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.fact {
  background: var(--m3-surface-container-low);
  border-radius: var(--m3-r-md);
  padding: 0.875rem 0.875rem 0.75rem;
}
.fact dt {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m3-on-surface-variant);
  margin-bottom: 0.3125rem;
}
.fact dd {
  margin: 0;
  font-family: var(--m3-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--m3-on-surface);
}
.fact--accent dd { color: var(--m3-primary); }

/* tonal notice cards */
.note {
  display: flex;
  gap: 0.75rem;
  border-radius: var(--m3-r-md);
  padding: 0.875rem 1rem;
  margin: 0 0 0.75rem;
  background: var(--m3-surface-container-low);
  color: var(--m3-on-surface-variant);
}
.note > .msym { font-size: 1.25rem; margin-top: 0.125rem; color: var(--m3-on-surface-variant); }
.note > div { min-width: 0; }
.note p { margin: 0; font-size: 0.875rem; line-height: 1.43; letter-spacing: 0.016em; }
.note p + p { margin-top: 0.5rem; }
.note__h {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.006em;
  color: var(--m3-on-surface);
  margin: 0 0 0.1875rem;
}
.note--caution {
  background: var(--m3-caution-container);
  color: var(--m3-on-caution-container);
}
.note--caution > .msym,
.note--caution .note__h { color: var(--m3-on-caution-container); }

/* ===================================================================
   Route: cards joined by a connector, blue for stops, green for walks
   =================================================================== */

.route { margin-top: 1.75rem; }

.block {
  position: relative;
  padding-left: 2.75rem;
  scroll-margin-top: 6.5rem;
}
.block::before {
  content: "";
  position: absolute;
  left: var(--rail);
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--m3-r-full);
  transform: translateX(-50%);
}
.block--stop::before { background: var(--m3-primary-container); }
.block--leg::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--m3-tertiary) 0 6px,
    transparent 6px 12px
  );
  opacity: .55;
}
.block--first::before { top: 1.25rem; }
.block--last::before  { bottom: auto; height: 1.25rem; }

/* --- leading marker -------------------------------------------------- */

.marker {
  position: absolute;
  left: var(--rail);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--m3-r-full);
}
.stop__num {
  top: 0.125rem;
  width: 2rem;
  height: 2rem;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: var(--m3-elev-1);
}
.stop__num .msym { font-size: 1.125rem; display: none; }
.leg__mark {
  top: 0.4375rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--m3-tertiary-container);
  color: var(--m3-on-tertiary-container);
}
.leg__mark .msym { font-size: 1rem; }

/* --- stop card -------------------------------------------------------- */

.stop { padding-bottom: 1.25rem; }

.stop__card {
  background: var(--m3-surface-bright);
  border-radius: var(--m3-r-lg);
  box-shadow: var(--m3-elev-1);
  padding: 1rem 1rem 0.875rem;
  overflow: hidden;
}

.stop__name { margin: 0; color: var(--m3-on-surface); }
.stop__sub {
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.016em;
  color: var(--m3-on-surface-variant);
  margin: 0.125rem 0 0;
}

/* assist chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.75rem;
  padding: 0 0.6875rem;
  border-radius: var(--m3-r-sm);
  border: 1px solid var(--m3-outline-variant);
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.031em;
  white-space: nowrap;
}
.chip .msym { font-size: 0.9375rem; }
.chip--primary {
  border-color: transparent;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}

/* "Listen" is the transport control for the stop's narration */
.chip--talk {
  font-family: var(--m3-body);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.chip--talk .t { font-variant-numeric: tabular-nums; }
.chip--talk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .12s ease;
}
.chip--talk:hover::after  { opacity: .08; }
.chip--talk:active::after { opacity: .12; }
.chip--talk.is-speaking {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
}

/* seek bar — the padding is the tap target, the bar is what you see */
.player {
  margin-top: 0.625rem;
  padding: 0.5rem 0;
  cursor: pointer;
}
.player__bar {
  height: 0.25rem;
  border-radius: var(--m3-r-full);
  background: color-mix(in srgb, var(--m3-primary) 20%, transparent);
  overflow: hidden;
}
.player__fill {
  height: 100%;
  width: 0;
  border-radius: var(--m3-r-full);
  background: var(--m3-primary);
}

.divider {
  height: 1px;
  background: var(--m3-outline-variant);
  border: 0;
  margin: 0.875rem 0;
  opacity: .6;
}

.points { margin: 0; padding: 0; list-style: none; }
.points li {
  position: relative;
  padding-left: 0.875rem;
  margin-bottom: 0.8125rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.016em;
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6875em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--m3-primary);
}
.points li:last-child { margin-bottom: 0; }
.points li b { font-weight: 500; color: var(--m3-on-surface); }

/* tonal callout inside a card */
.flag {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--m3-r-md);
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.016em;
  background: var(--m3-caution-container);
  color: var(--m3-on-caution-container);
}
.flag > .msym { font-size: 1.125rem; margin-top: 0.0625rem; }
.flag > div { min-width: 0; }
.flag[data-type="warn"] { background: var(--m3-error-container); color: var(--m3-on-error-container); }
.flag[data-type="tip"]  { background: var(--m3-tertiary-container); color: var(--m3-on-tertiary-container); }
.flag__word {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 0.0625rem;
}

/* disclosure */
.more { margin-top: 0.875rem; }
.more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.5rem;
  margin: 0 -0.25rem;
  padding: 0 0.75rem 0 0.5rem;
  border-radius: var(--m3-r-full);
  color: var(--m3-primary);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  -webkit-tap-highlight-color: transparent;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { background: color-mix(in srgb, var(--m3-primary) 8%, transparent); }
.more > summary .msym { font-size: 1.125rem; transition: transform .18s ease; }
.more[open] > summary .msym { transform: rotate(180deg); }
.more > .points { padding-top: 0.625rem; }
.more > .points li { font-size: 0.9375rem; color: var(--m3-on-surface-variant); }
.more > .points li::before { background: var(--m3-outline); }

/* filled button */
.doneBtn {
  margin-top: 1rem;
  width: 100%;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--m3-r-full);
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  font-family: var(--m3-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.doneBtn .msym { font-size: 1.125rem; }
.doneBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .12s ease;
}
.doneBtn:hover::after  { opacity: .08; }
.doneBtn:active::after { opacity: .12; }

/* a finished stop recedes to a tonal, collapsed state */
.block--done .stop__card { box-shadow: none; background: var(--m3-surface-container-low); }
.block--done .stop__num { background: var(--m3-tertiary); color: var(--m3-on-tertiary); }
.block--done .stop__num span.n { display: none; }
.block--done .stop__num .msym { display: block; }
.block--done .stop__head,
.block--done .chips,
.block--done .points,
.block--done .flag,
.block--done .more,
.block--done .divider { opacity: .45; }
.block--done .doneBtn {
  background: transparent;
  color: var(--m3-on-surface-variant);
  box-shadow: inset 0 0 0 1px var(--m3-outline-variant);
}

/* --- walking leg ------------------------------------------------------ */

.leg { padding-bottom: 1.25rem; }

.leg__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  padding: 0.3125rem 0 0.5rem;
}
.leg__dist {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  color: var(--m3-tertiary);
}
.leg__via {
  font-size: 0.75rem;
  letter-spacing: 0.031em;
  color: var(--m3-on-surface-variant);
}

/* outlined card */
.leg__box {
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-r-md);
  background: transparent;
  padding: 0.875rem 1rem 0.75rem;
}

.leg__steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.leg__steps li {
  counter-increment: step;
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: 0.016em;
}
.leg__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.0625rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--m3-tertiary-container);
  color: var(--m3-on-tertiary-container);
  font-family: var(--m3-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leg__steps li:last-child { margin-bottom: 0; }
.leg__steps li b { font-weight: 500; }

.leg__talkh {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m3-on-surface-variant);
  margin: 1rem 0 0.5rem;
}
.leg__talkh .msym { font-size: 0.9375rem; }

.leg__talk { margin: 0; padding: 0; list-style: none; }
.leg__talk li {
  position: relative;
  padding-left: 0.875rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: 0.016em;
  color: var(--m3-on-surface-variant);
}
.leg__talk li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6875em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--m3-tertiary);
}
.leg__talk li:last-child { margin-bottom: 0; }
.leg__talk li b { font-weight: 500; color: var(--m3-on-surface); }

/* actions row: filled-tonal navigate, then a quieter preview */
.leg__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-top: 0.875rem;
}

.btn-tonal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1.125rem 0 1rem;
  border-radius: var(--m3-r-full);
  background: var(--m3-tertiary-container);
  color: var(--m3-on-tertiary-container);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn-tonal .msym { font-size: 1.125rem; }
.btn-tonal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .12s ease;
}
.btn-tonal:hover::after  { opacity: .08; }
.btn-tonal:active::after { opacity: .12; }

/* text button */
.maplink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: var(--m3-r-full);
  color: var(--m3-primary);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.maplink:hover { background: color-mix(in srgb, var(--m3-primary) 8%, transparent); }
.maplink .msym { font-size: 1.125rem; }

/* ===================================================================
   Extended FAB — always the next thing to do
   =================================================================== */

.fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right), calc(50vw - 16rem));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  max-width: calc(100vw - 2rem);
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--m3-r-lg);
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  font-family: var(--m3-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  box-shadow: var(--m3-elev-3);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.fab .msym { font-size: 1.5rem; }
.fab__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .12s ease;
}
.fab:hover::after  { opacity: .08; }
.fab:active::after { opacity: .12; }
.fab[data-variant="done"] { background: var(--m3-tertiary-container); color: var(--m3-on-tertiary-container); }

/* ===================================================================
   Tail
   =================================================================== */

.foot { margin-top: 1.75rem; }
.foot p {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.031em;
  color: var(--m3-on-surface-variant);
}

/* outlined button */
.reset {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--m3-outline);
  border-radius: var(--m3-r-full);
  background: transparent;
  color: var(--m3-primary);
  font-family: var(--m3-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.006em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reset .msym { font-size: 1.125rem; }

.noscript {
  max-width: 34rem;
  margin: 1.5rem auto;
  padding: 1rem;
  border-radius: var(--m3-r-md);
  background: var(--m3-error-container);
  color: var(--m3-on-error-container);
  font-size: 0.875rem;
}

/* ===================================================================
   Quality floor
   =================================================================== */

:focus-visible {
  outline: 3px solid var(--m3-primary);
  outline-offset: 2px;
  border-radius: var(--m3-r-xs);
}

@media (min-width: 40rem) {
  .brief { padding-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .bar, .fab, .doneBtn, .reset, .player { display: none; }
  .block { break-inside: avoid; }
  .stop__card { box-shadow: none; border: 1px solid var(--m3-outline-variant); }
  #main { padding-bottom: 0; }
}