/* ============================================================================
   m3e.css — Material 3 Expressive token + component layer (v01r00)
   Colour roles (--md-sys-color-*) are injected at runtime by m3e.js.
   This file is static (radius/elevation/motion/type/components). Loaded
   site-wide so sticker share pages share the theme; the SPA shell (.app,
   nav bar/rail, views) only appears on the home page.
   ============================================================================ */
@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: 6px; }
  img, svg { display: block; max-width: 100%; }
}

@layer tokens {
  :root {
    --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-lgi: 20px;
    --r-xl: 28px; --r-xli: 32px; --r-full: 9999px;
    --e1: 0 1px 2px rgb(0 0 0/.30), 0 1px 3px 1px rgb(0 0 0/.15);
    --e2: 0 1px 2px rgb(0 0 0/.30), 0 2px 6px 2px rgb(0 0 0/.15);
    --e3: 0 4px 8px 3px rgb(0 0 0/.15), 0 1px 3px rgb(0 0 0/.30);
    --m-spatial-fast: 350ms cubic-bezier(.42,1.67,.21,.9);
    --m-spatial: 500ms cubic-bezier(.38,1.21,.22,1);
    --m-effects: 200ms cubic-bezier(.34,.8,.34,1);
    --font: "Open Huninn", system-ui, -apple-system, "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
  }
  @media (prefers-reduced-motion: reduce) {
    :root { --m-spatial-fast: 1ms linear; --m-spatial: 1ms linear; --m-effects: 1ms linear; }
  }
  /* Explicit Animations control (m3e.js data-reduce, from the motion auto/on/off seg)
     overrides the OS media query: "on" (data-reduce=0) restores spring motion even when
     the OS prefers reduced; "off"/auto-reduced (data-reduce=1) flattens it. */
  html[data-reduce="0"] { --m-spatial-fast: 350ms cubic-bezier(.42,1.67,.21,.9); --m-spatial: 500ms cubic-bezier(.38,1.21,.22,1); --m-effects: 200ms cubic-bezier(.34,.8,.34,1); }
  html[data-reduce="1"] { --m-spatial-fast: 1ms linear; --m-spatial: 1ms linear; --m-effects: 1ms linear; }
}
html[data-reduce="1"] .view { animation: none; }

@layer base {
  html { font-family: var(--font); -webkit-text-size-adjust: 100%; }
  body {
    background: var(--md-sys-color-background, #fff);
    color: var(--md-sys-color-on-surface, #111);
    min-height: 100dvh; line-height: 1.5; overscroll-behavior-y: contain;
    transition: background var(--m-effects), color var(--m-effects);
  }
  a { color: var(--md-sys-color-primary); }
  .t-display { font-size: 2.6rem; line-height: 1.16; font-weight: 400; }
  .t-headline { font-size: 2.8rem; line-height: 1.16; font-weight: 400; }   /* M3E v14 .t-display-m */
  .t-title { font-size: 1.2rem; line-height: 1.3; font-weight: 600; }
  .t-title-s { font-size: .95rem; line-height: 1.4; font-weight: 600; }
  .t-body { font-size: 1rem; line-height: 1.5; font-weight: 400; }
  .t-label { font-size: .8rem; line-height: 1.4; font-weight: 600; letter-spacing: .02em; }
  .muted { color: var(--md-sys-color-on-surface-variant); }
}

@layer components {
  /* ---- app shell (home page only) ---- */
  .app { max-width: 1080px; margin: 0 auto; padding-bottom: 96px; }
  .appbar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
    padding: max(env(safe-area-inset-top), 12px) 16px 12px;
    background: var(--md-sys-color-surface-container);
    transition: background var(--m-effects);
  }
  .appbar .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
  .appbar .brand i { color: var(--md-sys-color-primary); font-size: 1.3rem; }
  .appbar .brand h1 { font-size: 1.15rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .appmain { padding: 0 16px; }
  .view { display: none; animation: m3fade var(--m-spatial); }
  .view.active { display: block; }
  @keyframes m3fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .view { animation: none; } }

  section.block { margin-top: 22px; }
  .sec-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
  .sec-head i { color: var(--md-sys-color-primary); }

  /* r37: collapsible Settings cards — the .sec-head is the clickable toggle */
  .card.collapsible > .sec-head { cursor: pointer; user-select: none; }
  .card.collapsible > .sec-head .sec-caret { margin-left: auto; transition: transform var(--m-effects, .2s); }
  .card.collapsible:not(.collapsed) > .sec-head .sec-caret { transform: rotate(180deg); }
  .card.collapsible.collapsed > .sec-head { margin-bottom: 0; }
  .card.collapsible.collapsed > :not(.sec-head) { display: none; }

  .card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--r-xl); padding: 18px; margin-bottom: 16px;
    transition: background var(--m-effects);
  }
  .panel { background: var(--md-sys-color-surface-container); border-radius: var(--r-xl); padding: 18px; }
  .field { margin-bottom: 20px; }
  .field > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
  .range { display: flex; align-items: center; gap: 14px; }
  .range input[type=range] { flex: 1; }
  .range output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.4em; text-align: right; color: var(--md-sys-color-on-surface-variant); }
  input[type=range] { accent-color: var(--md-sys-color-primary); cursor: pointer; }
  .hint { color: var(--md-sys-color-on-surface-variant); font-size: .82rem; margin-top: 8px; }
  .kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
  hr { border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 14px 0; }

  /* ---- buttons ---- */
  .m3-btn {
    position: relative; display: inline-flex; align-items: center; gap: 8px; border: none;
    cursor: pointer; height: 44px; padding: 0 22px; border-radius: var(--r-full);
    font-weight: 600; font-size: .9rem; overflow: hidden; isolation: isolate;
    transition: border-radius var(--m-spatial), box-shadow var(--m-effects);
  }
  .m3-btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; border-radius: inherit; transition: opacity var(--m-effects); z-index: -1; }
  .m3-btn:hover::before { opacity: .08; }
  .m3-btn:active { border-radius: var(--r-md); }
  .m3-btn:active::before { opacity: .10; }
  .m3-btn.filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
  .m3-btn.tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  .m3-btn.outlined { background: transparent; color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }
  .m3-btn.text { background: transparent; color: var(--md-sys-color-primary); padding: 0 14px; }
  .m3-btn.danger { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); --fa-primary-color: var(--fa-error-primary); --fa-secondary-color: var(--fa-error-secondary); }
  .m3-btn[disabled] { opacity: .5; pointer-events: none; }
  .btn-flow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

  /* ---- segmented control ---- */
  .seg { display: inline-flex; flex-wrap: wrap; background: var(--md-sys-color-surface-container-highest); border-radius: var(--r-full); padding: 4px; gap: 4px; }
  .seg button {
    border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--r-full); font-weight: 600; font-size: .85rem;
    color: var(--md-sys-color-on-surface-variant); transition: background var(--m-effects), color var(--m-effects);
  }
  .seg button[aria-pressed=true] { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

  /* ---- chips / swatches ---- */
  .chip-flow { display: flex; gap: 10px; flex-wrap: wrap; }
  .chip {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; cursor: pointer;
    border-radius: var(--r-sm); background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant); border: 1px solid var(--md-sys-color-outline-variant);
    font-weight: 600; font-size: .85rem; transition: background var(--m-effects);
  }
  .chip[aria-pressed=true] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
  .swatch { width: 40px; height: 40px; border-radius: var(--r-full); border: 2px solid transparent; cursor: pointer; box-shadow: var(--e1); transition: transform var(--m-spatial-fast); }
  .swatch:hover { transform: scale(1.08); }
  .swatch[aria-pressed=true] { border-color: var(--md-sys-color-on-surface); }

  /* ---- switch ---- */
  .m3-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
  .m3-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .m3-switch .track { position: relative; width: 52px; height: 32px; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-highest); box-shadow: inset 0 0 0 2px var(--md-sys-color-outline); transition: background var(--m-effects); }
  .m3-switch .track::before { content: ""; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; border-radius: var(--r-full); background: var(--md-sys-color-outline); transition: transform var(--m-spatial-fast), width var(--m-spatial-fast), height var(--m-spatial-fast), top var(--m-spatial-fast), left var(--m-spatial-fast); }
  .m3-switch input:checked + .track { background: var(--md-sys-color-primary); box-shadow: none; }
  .m3-switch input:checked + .track::before { width: 24px; height: 24px; top: 4px; left: 4px; transform: translateX(20px); background: var(--md-sys-color-on-primary); }

  /* ---- navigation: bottom bar (compact) -> rail (>=600px), per M3E v14 ---- */
  .navbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around;
    padding: 10px 8px max(env(safe-area-inset-bottom), 10px);
    background: var(--md-sys-color-surface-container); transition: background var(--m-effects);
  }
  .navbar button, .navrail button {
    border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 4px 6px; color: var(--md-sys-color-on-surface-variant); font-size: .72rem; font-weight: 600;
    transition: color var(--m-effects);
  }
  .navbar .ind { display: flex; align-items: center; justify-content: center; width: 64px; height: 32px; border-radius: var(--r-full); transition: background var(--m-spatial-fast); }
  .navrail .ind { display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: var(--r-full); transition: background var(--m-spatial-fast); }
  .navbar button i, .navrail button i { font-size: 1.2rem; }
  .navbar button[aria-pressed=true], .navrail button[aria-pressed=true] { color: var(--md-sys-color-on-secondary-container); }
  .navbar button[aria-pressed=true] .ind, .navrail button[aria-pressed=true] .ind { background: var(--md-sys-color-secondary-container); }
  .navrail { display: none; }
  .rail-menu { margin-bottom: 6px; }
  /* expandable rail (data-rail=expanded): icons-only 80px -> labelled 216px */
  html[data-rail=expanded] { --rail-w: 216px; }
  html[data-rail=expanded] .navrail { align-items: stretch; padding: 72px 12px 16px; gap: 6px; }
  html[data-rail=expanded] .navrail button { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 12px 18px; border-radius: var(--r-full); font-size: .92rem; line-height: 1.2; }
  html[data-rail=expanded] .navrail .ind { width: auto; height: auto; background: none; }
  html[data-rail=expanded] .navrail button[aria-pressed=true] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
  @media (min-width: 600px) {
    .navbar { display: none; }
    .navrail {
      position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; width: var(--rail-w, 80px); display: flex; flex-direction: column;
      align-items: center; gap: 14px; padding: 76px 0 16px;
      background: var(--md-sys-color-surface-container); transition: background var(--m-effects), width var(--m-spatial);
    }
    .app { padding-left: var(--rail-w, 80px); padding-bottom: 16px; }
    .posts { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); justify-items: stretch; }
    .sticker-card { max-width: none; }
  }

  /* ---- sticker grid (home view) ---- */
  .intro { text-align: center; padding: 8px 0 4px; }
  .intro img { margin: 0 auto 8px; border-radius: var(--r-lg); max-width: 360px; }
  /* mobile portrait: single column; multi-column only on wider screens (see @media below) */
  .posts { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 14px 0; justify-items: center; }
  .sticker-card {
    width: 100%; max-width: 340px; min-width: 0;
    background: var(--md-sys-color-surface-container-low); border-radius: var(--r-lg); padding: 12px;
    text-align: center; transition: background var(--m-effects), transform var(--m-spatial-fast);
  }
  .sticker-card:active { transform: scale(.97); }
  .sticker-card a { display: block; cursor: pointer; }
  .sticker-card img { width: 100%; height: auto; border-radius: var(--r-md); }
  .sticker-card h2 { font-size: .92rem; font-weight: 600; line-height: 1.35; margin-top: 10px; color: var(--md-sys-color-on-surface); }
  .sticker-card hr { display: none; }
  .credit { color: var(--md-sys-color-on-surface-variant); font-size: .75rem; text-align: center; margin-top: 24px; }
  .credit a { color: var(--md-sys-color-primary); }

  /* text input */
  .m3-input { width: 100%; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); border: none; border-bottom: 2px solid var(--md-sys-color-outline); border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 13px 14px; transition: border-color var(--m-effects); }
  .m3-input:focus { outline: none; border-bottom-color: var(--md-sys-color-primary); }
  .kv code { font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); }

  /* toast (inverse surface for contrast on any scheme) */
  .toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(20px); z-index: 60; max-width: 88vw; padding: 12px 18px; border-radius: var(--r-sm); background: var(--md-sys-color-on-surface); color: var(--md-sys-color-surface); box-shadow: var(--e3); opacity: 0; pointer-events: none; transition: opacity var(--m-effects), transform var(--m-spatial-fast); font-size: .9rem; }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  @media (min-width: 600px) { .toast { bottom: 24px; } }

  /* ---- map view (region preview + list) ---- */
  .region-current { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--md-sys-color-on-surface); }
  .region-current i { color: var(--md-sys-color-primary); }
  .cu-map { height: 340px; margin-top: 14px; border-radius: var(--r-lg); overflow: hidden; background: var(--md-sys-color-surface-container-highest); }
  .region-list { display: flex; flex-direction: column; gap: 8px; }
  .region-row { display: flex; align-items: center; gap: 8px; }
  .region-open {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; border: none; text-align: left;
    background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
    border-radius: var(--r-md); padding: 12px 14px; transition: background var(--m-effects);
  }
  .region-open:hover { background: var(--md-sys-color-surface-container-highest); }
  .region-open i { color: var(--md-sys-color-primary); }
  .region-open .region-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .region-open .region-meta { margin-left: auto; font-size: .75rem; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }

  /* ---- small-screen polygon editor (full-screen overlay) ---- */
  /* z-index must clear Leaflet's internal panes/controls (up to ~1000), or the preview
     map's tiles/controls paint through the overlay (the "double map" bug). */
  .region-editor { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: var(--md-sys-color-surface); }
  /* belt-and-suspenders: stop rendering the preview map entirely while editing */
  body.editor-open .cu-map { visibility: hidden; }
  .region-editor .editor-bar {
    display: flex; align-items: center; gap: 12px; padding: max(env(safe-area-inset-top), 12px) 14px 12px;
    background: var(--md-sys-color-surface-container);
  }
  .region-editor .editor-bar h2 { margin-right: auto; }
  .cu-edit-map { flex: 1; min-height: 0; background: var(--md-sys-color-surface-container-highest); }
  .region-editor .editor-form { padding: 14px 16px max(env(safe-area-inset-bottom), 16px); display: flex; flex-direction: column; gap: 12px; background: var(--md-sys-color-surface-container); }
  .editor-line { display: flex; align-items: center; gap: 10px; }
  .editor-line .hint { margin-top: 0; flex: 1; }
  .vtx-count { font-weight: 600; font-size: .82rem; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
  body.editor-open { overflow: hidden; }
  .vtx-tip { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: none; border-radius: var(--r-full); padding: 0 6px; font-size: .7rem; font-weight: 700; box-shadow: var(--e1); }
  .vtx-tip::before { display: none; }

  /* ---- following status (Me view) ---- */
  .status-line { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 600; color: var(--md-sys-color-on-surface); }
  .status-line i { color: var(--md-sys-color-primary); }
  .ann-row { padding: 8px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .ann-row:last-child { border-bottom: none; }
  .hist-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .hist-row:last-child { border-bottom: none; }
  .chip-inline { display: inline-block; padding: 1px 8px; border-radius: var(--r-full); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: .78rem; font-weight: 600; }

  /* ---- version line (settings footer) ---- */
  .app-version { text-align: center; margin-top: 6px; color: var(--md-sys-color-on-surface-variant); font-size: .72rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

  /* ---- update bar (shown when the service worker finds a new version) ---- */
  .update-bar {
    position: fixed; left: 50%; transform: translateX(-50%) translateY(140%); z-index: 1300;
    bottom: max(env(safe-area-inset-bottom), 12px); width: min(560px, calc(100vw - 24px));
    display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: var(--r-lg);
    background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
    box-shadow: var(--e3); transition: transform var(--m-spatial); font-size: .9rem;
  }
  .update-bar.show { transform: translateX(-50%) translateY(0); }
  .update-bar span { flex: 1; font-weight: 600; }
  .update-bar button {
    border: none; cursor: pointer; flex: none; height: 38px; padding: 0 18px; border-radius: var(--r-full);
    font-weight: 700; font-size: .85rem; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  }

  /* ---- device-binding (sync) image ---- */
  .bind-out { margin-top: 14px; text-align: center; }
  .bind-out img { width: 220px; max-width: 70%; margin: 0 auto 10px; image-rendering: pixelated; border-radius: var(--r-md); background: #fff; padding: 8px; }
}

@layer utilities {
  .icon-btn {
    width: 44px; height: 44px; border-radius: var(--r-full); border: none; cursor: pointer;
    background: transparent; color: var(--md-sys-color-on-surface-variant); font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  }
  .icon-btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; border-radius: inherit; transition: opacity var(--m-effects); }
  .icon-btn:hover::before { opacity: .08; }
  .hidden { display: none !important; }
}

/* ---- theme fine-tune controls (v01r22): native colour pickers, HSL sliders,
   hex inputs, gradient direction. Unlayered so they need no @layer juggling. */
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.seed-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.seed-pick { position: relative; width: 56px; height: 56px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e1); cursor: pointer; border: none; padding: 0; }
.seed-pick input { position: absolute; inset: -20%; width: 140%; height: 140%; border: none; cursor: pointer; background: none; }
.seed-hex { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .04em; color: var(--md-sys-color-on-surface-variant); }
.tune-btn { width: 44px; height: 44px; flex: none; color: var(--md-sys-color-on-surface-variant); }
.tune { margin-top: 14px; padding: 14px; border-radius: var(--r-lg); background: var(--md-sys-color-surface-container-high); display: flex; flex-direction: column; gap: 10px; }
.tune-row { display: flex; align-items: center; gap: 12px; margin: 0; }
.tune-row > span { width: 1.2em; font-weight: 600; font-size: .8rem; color: var(--md-sys-color-on-surface-variant); }
.tune-row input[type=range] { flex: 1; width: auto; max-width: none; }
.tune-row output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.6em; text-align: right; font-size: .8rem; color: var(--md-sys-color-on-surface-variant); }
.hex-in { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.range .ax { width: 1.2em; font-weight: 600; font-size: .8rem; color: var(--md-sys-color-on-surface-variant); }
.sub-label { display: block; font-size: .75rem; font-weight: 600; margin: 14px 0 4px; color: var(--md-sys-color-on-surface-variant); letter-spacing: .04em; }
.dev-list { margin-top: 8px; }
.dev-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.dev-row:last-child { border-bottom: none; }
.dev-row code { font-variant-numeric: tabular-nums; }
/* single sticker share page (post.html): no navrail, so drop the rail gutter;
   give the lone sticker a touch more presence and space the page title. */
.post-title { margin: 6px 0 4px; }
.sticker-card.single { max-width: 420px; }
@media (min-width: 600px) { .app.solo { padding-left: 0; } }
/* Compact width: segmented buttons (icon + label) show only the icon when not
   selected, so multi-option segs (style, scheme, motion) stay on one row. Bare-text
   segs like language have no <span>, so they're unaffected. */
@media (max-width: 520px) {
  .seg button:not([aria-pressed="true"]) span { display: none; }
}
/* Persistent backend-mismatch warning banner (r21): non-dismissable; shown when the
   user approved a backend whose identity fingerprint differs from the expected one. */
.fp-warn { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); font-size: .85rem; font-weight: 600; }
.fp-warn i { font-size: 1.1rem; }
.follow-stale { margin-top: 10px; }
.follow-stale .fp-warn { margin: 0 0 8px; }
/* follower cards (r24): one row per tracked person — duotone transport glyph + username,
   with up/down reorder buttons when following more than one. */
.follow-row { padding: 12px 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
.follow-row:first-child { padding-top: 0; border-top: none; }
.follow-row .sec-head { margin: 0 0 8px; }
.follow-glyph { display: inline-flex; font-size: 1.5rem; line-height: 1; }
.follow-reorder { margin-left: auto; display: inline-flex; gap: 4px; }
.follow-reorder .icon-btn[disabled] { opacity: .35; pointer-events: none; }
.follow-status { margin-left: 2px; }
.follow-sticker { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.follow-sticker img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--md-sys-color-surface-container-high); }
.follow-sticker-t { font-size: .9rem; line-height: 1.35; }
/* follower status card on a per-sticker share page (r28) */
.follow-card { margin-top: 16px; text-align: left; }
.follow-reminder { margin-top: 10px; }
/* home controls row (r31): column toggle on the left, category filter chips fill the rest */
.home-controls { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 16px; flex-wrap: nowrap; }
.home-controls .sticker-filter { margin: 0; flex: 1 1 auto; }
/* compact (<600): the filter drops to its own second row, separate from the column toggle (r34) */
@media (max-width: 599.98px) {
  .home-controls { flex-direction: column; align-items: flex-start; }
  .home-controls .sticker-filter { width: 100%; }
}
.col-toggle { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 999px; overflow: hidden; }
.col-toggle button { font: inherit; font-size: .9rem; cursor: pointer; padding: 6px 12px; border: 0; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.col-toggle button + button { border-left: 1px solid var(--md-sys-color-outline-variant); }
.col-toggle button[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
/* home sticker category filter (r27) */
.sticker-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.sticker-filter button { font: inherit; font-size: .9rem; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.sticker-filter button[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
/* home grid column choice (r31; 1–3 columns r34): the toggle is authoritative across widths —
   app.js writes the effective count to html[data-cols] from the window size class + the user's
   choice. Higher specificity than the responsive .posts rule above, so it overrides the auto-fill
   multi-column on wide screens too. */
html[data-cols="1"] .posts { grid-template-columns: 1fr; justify-items: center; }
/* minmax(0,1fr): equal tracks that can shrink BELOW their content's min-width, so a card never
   pushes past the viewport (and the left/right columns stay the same size). */
html[data-cols="2"] .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: stretch; }
html[data-cols="3"] .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: stretch; }
html:not([data-cols="1"]) .sticker-card { max-width: none; }
/* category dividers (r32): a full-width line between sticker categories (it spans every column via
   grid-column 1/-1, so it works in every column count). In single column it tracks the centred card
   width; in multi-column it stretches the full grid. */
.posts .cat-divider { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 340px; height: 0; border: 0; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 0 auto; }
html:not([data-cols="1"]) .posts .cat-divider { max-width: none; justify-self: stretch; }
/* per-sticker glyph row (r27): icon left, emoji/zh/en right */
.sticker-meta { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 12px; }
.sticker-ico { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; }
/* centre: emoji + bilingual text. Each <br>-separated line stays on ONE line (nowrap); anything
   too long is clipped rather than wrapping or widening the card (r34). */
.sticker-meta h2 { margin: 0; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
/* right: the share icon (r33). The image now updates only; this anchor triggers the web-share. */
.sticker-meta .sticker-share { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 6px; margin: -6px -2px -6px 0; font-size: 1.4rem; line-height: 1; color: var(--md-sys-color-primary); text-decoration: none; cursor: pointer; }
.sticker-meta .sticker-share:active { transform: scale(.9); }
/* compact + two columns: the cards are narrow, so shrink the meta row (smaller font + tighter
   icons/gap) to keep the nowrap h2 readable AND the card within the viewport at the same time. */
@media (max-width: 599.98px) {
  html[data-cols="2"] .sticker-meta { gap: 8px; }
  html[data-cols="2"] .sticker-meta h2 { font-size: .7rem; line-height: 1.25; }
  html[data-cols="2"] .sticker-ico { font-size: 1.15rem; }
  html[data-cols="2"] .sticker-meta .sticker-share { font-size: 1.05rem; padding: 4px; margin: -4px -2px -4px 0; }
}
.follow-note { margin: 2px 0 0; }
/* host's follower rows (block / cancel) */
.follower-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
.follower-row:first-of-type { border-top: none; }
.follower-id { display: inline-flex; align-items: center; gap: 8px; }
.follower-actions { display: inline-flex; gap: 4px; margin-left: auto; }
/* identity confirmation (r34) */
.follower-row .sec-head { margin: 0; }
.follower-reply { flex-basis: 100%; font-size: 1.3rem; }
.confirm-reply { display: inline-flex; align-items: center; gap: 8px; }
.confirm-panel { width: 100%; padding: 4px 0 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant); margin-bottom: 10px; }
.confirm-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
/* follower-side prompt lives inside a .follow-row (the following cards) */
.confirm-prompt { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--md-sys-color-surface-container-high); }
.confirm-prompt.answered { background: transparent; padding: 6px 0 0; }
.confirm-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.confirm-opts .m3-btn { font-size: 1.3rem; padding: 8px 14px; }

/* mis-tap management (r30) */
.mistap-group { padding: 12px 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
.mistap-group:first-child { border-top: none; padding-top: 4px; }
.mistap-ref { display: flex; align-items: center; gap: 6px; opacity: .85; margin: 6px 0; }
.mistap-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  margin: 6px 0; padding: 8px 12px; border-radius: var(--r-md); cursor: pointer; font: inherit;
  border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container); color: inherit; }
.mistap-item-main { display: inline-flex; align-items: center; gap: 8px; }
.mistap-item.is-mistap { border-color: var(--md-sys-color-error); }
.mistap-item.is-mistap .mistap-item-main { text-decoration: line-through; opacity: .55; }
.mistap-item.is-mistap .mistap-state { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.review-item.is-region { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0; padding: 8px 12px;
  border-radius: var(--r-md); border: 1px dashed var(--md-sys-color-outline-variant); background: transparent; opacity: .7; }

/* ============================ v02: couple Timeline ============================ */
.tl-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The feed is its own scroll container (the IntersectionObserver root); it sits between the appbar
   and the docked event bar. dvh keeps it stable across mobile URL-bar resize. */
.timeline-feed { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  height: calc(100dvh - 230px); padding: 4px 2px 8px; scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 600px) { .timeline-feed { height: calc(100dvh - 210px); } }
/* The docked event bar (position:fixed) overlays the feed's bottom in compact view, so the inner
   card block reserves room beneath the last card to scroll it clear of the bar. Reset at >=600px,
   where the bar docks over the rail and no longer overlaps the feed. */
.timeline-feed #tlCards { display: flex; flex-direction: column; gap: 14px; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.tl-sentinel { height: 1px; }
.tl-empty { text-align: center; padding: 32px 8px; }
/* Each card: the OWNER colour (per-user, from the ledger members map) tints the border + connector.
   self = right-aligned, partner = left-aligned. content-visibility keeps offscreen cards cheap. */
.tl-card { position: relative; max-width: 84%; background: var(--md-sys-color-surface-container-low);
  border: 2px solid var(--owner, var(--md-sys-color-primary)); border-radius: var(--r-lg); padding: 12px 14px;
  content-visibility: auto; contain-intrinsic-size: 0 120px; }
.tl-card.self { align-self: flex-end; }
.tl-card.partner { align-self: flex-start; }
.tl-card.dup { border-style: dashed; }   /* a duplicate event (revealed from a collapsed block) */
.tl-connector { position: absolute; top: -14px; width: 3px; height: 16px; background: var(--owner, var(--md-sys-color-primary)); border-radius: 2px; }
.tl-card.self .tl-connector { right: 24px; }
.tl-card.partner .tl-connector { left: 24px; }
.tl-card:first-child .tl-connector { display: none; }
.tl-card.tl-flash, .follow-row.tl-flash { animation: tlFlash 2.2s var(--m-effects, ease); }
@keyframes tlFlash { 0%,100% { box-shadow: none; } 25% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--owner, var(--md-sys-color-primary)) 40%, transparent); } }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tl-glyph { font-size: 1.3rem; color: var(--owner, var(--md-sys-color-primary)); }
/* a sticker event's name, centred in the head between the glyph and the share button */
.tl-head-title { flex: 1; min-width: 0; text-align: center; font-weight: 600; color: var(--md-sys-color-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-share { width: 36px; height: 36px; }
.tl-text { margin: 0; white-space: pre-wrap; word-break: break-word; }
/* the sticker image is the card's focal content: large + centred (name is in the head). */
.tl-sticker { display: flex; justify-content: center; align-items: center; }
.tl-sticker img { width: 100%; max-width: 340px; max-height: 340px; height: auto; object-fit: contain; border-radius: var(--r-md); }
.tl-sticker-empty { padding: 16px; font-size: 2.2rem; color: var(--md-sys-color-on-surface-variant); }
.tl-loc { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tl-legend { margin-top: 8px; }
/* the two header toggles (list-view + map-view) sit together at the right of the timeline top row */
.tl-top-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* ---- list layout (compact thumbnail + stacked meta rows; toggled by #btnTlListView) ---- */
.tl-card.list { max-width: 96%; contain-intrinsic-size: 0 96px; }
.tl-list-row { display: flex; align-items: flex-start; gap: 12px; }
.tl-list-thumb { flex: 0 0 auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); overflow: hidden; background: var(--md-sys-color-surface-container-high); }
.tl-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tl-list-ico { font-size: 1.9rem; color: var(--owner, var(--md-sys-color-primary)); }
.tl-list-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tl-list-head { display: flex; align-items: center; gap: 8px; }
.tl-list-head .tl-head-title { text-align: left; }   /* left-aligned in list mode (centred in album) */
.tl-list-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .85rem; color: var(--md-sys-color-on-surface-variant); }
.tl-list-sub > span, .tl-list-sub .tl-region { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Collapsed duplicate block: a one-line summary standing in for a run of repeated same-content
   events (the first, canonical, event is shown as a normal card above it). Tap to expand/collapse. */
.tl-dup { display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 84%; padding: 6px 14px; cursor: pointer;
  border: 1.5px dashed var(--owner, var(--md-sys-color-outline-variant)); border-radius: var(--r-full);
  background: transparent; color: var(--md-sys-color-primary); font: inherit; font-size: .85rem; font-weight: 600; }
.tl-dup.self { align-self: flex-end; }
.tl-dup.partner { align-self: flex-start; }
.tl-dup:hover, .tl-dup:focus-visible { background: var(--md-sys-color-surface-container); }
.tl-dup .tl-dup-main { white-space: nowrap; }
.tl-dup .tl-dup-chevron { transition: transform .15s var(--m-effects, ease); }
.tl-dup[aria-expanded=true] .tl-dup-chevron { transform: rotate(180deg); }
/* Hidden×N pill: reuses .tl-dup but in a muted tint (vs the primary-tinted Duplicated×N). */
.tl-dup.tl-hidden { color: var(--md-sys-color-on-surface-variant); }
/* Per-card "Wrong?" hide toggle: a small, muted link at the bottom-right of every event card. */
.tl-hide-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.tl-hide-toggle { background: none; border: 0; padding: 2px 4px; cursor: pointer; font: inherit; font-size: .75rem;
  color: var(--md-sys-color-on-surface-variant); opacity: .8; }
.tl-hide-toggle:hover, .tl-hide-toggle:focus-visible { opacity: 1; color: var(--md-sys-color-primary); text-decoration: underline; }
.tl-card.hid { border-style: dashed; opacity: .9; }   /* a hidden event revealed from a Hidden×N block */
/* Docked event bar (above the navbar; navbar is z-40 fixed-bottom) + the sticker picker above it. */
.timeline-bar { position: fixed; left: 0; right: 0; bottom: var(--tl-dock, calc(72px + env(safe-area-inset-bottom, 0px))); z-index: 39;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px max(env(safe-area-inset-bottom, 0px), 8px);
  background: var(--md-sys-color-surface-container); }
.timeline-bar .m3-input { flex: 1; }
.timeline-bar .tl-send { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.tl-picker { position: fixed; left: 0; right: 0; bottom: var(--tl-dock2, calc(128px + env(safe-area-inset-bottom, 0px))); z-index: 39;
  max-height: 40vh; overflow-y: auto; padding: 10px 12px; background: var(--md-sys-color-surface-container-high);
  border-top: 1px solid var(--md-sys-color-outline-variant); }
.tl-picker-list { display: flex; flex-direction: column; gap: 10px; }
.tl-pick { flex: 0 0 auto; width: 56px; border: none; background: transparent; padding: 4px; cursor: pointer; border-radius: var(--r-sm); }
.tl-pick img { width: 100%; height: auto; display: block; }
/* picker tabs (C.U. / Custom) — segmented row at the top of the menu */
.tl-pick-tabs { display: flex; gap: 6px; }
.tl-pick-tab { flex: 1; border: none; cursor: pointer; padding: 8px 10px; border-radius: var(--r-full); font: inherit; font-size: .85rem; font-weight: 600;
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); transition: background var(--m-effects), color var(--m-effects); }
.tl-pick-tab[aria-pressed=true] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
@media (min-width: 600px) {
  .timeline-bar { left: var(--rail-w, 80px); bottom: 8px; }
  .tl-picker { left: var(--rail-w, 80px); bottom: 72px; }
  .timeline-feed { scroll-padding-bottom: 24px; }
  .timeline-feed #tlCards { padding-bottom: 0; }
}

/* r04: C.U. tab — one category per horizontally-scrolling row, with a small category label */
.tl-pick-cat { display: flex; flex-direction: column; gap: 4px; }
.tl-pick-cat-label { font-size: .72rem; font-weight: 700; color: var(--md-sys-color-on-surface-variant); padding-left: 2px; }
.tl-pick-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.tl-pick-custom { background: var(--md-sys-color-surface-container-highest); }
.tl-pick i { font-size: 28px; color: var(--md-sys-color-on-surface-variant); }
/* r04: Custom tab — add button + the pack grid (pick to send, or delete) */
.tl-pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 2px; }
.tl-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.tl-pick-custom-item { position: relative; }
.tl-pick-custom-item .tl-pick { width: 100%; padding: 0; }
.tl-pick-custom-item .tl-pick img { aspect-ratio: 1; object-fit: contain; border-radius: var(--r-sm); }
.tl-pick-custom-item .tl-pick i { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.tl-pack-del { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; background: rgba(0,0,0,.45); color: #fff; border-radius: 50%; }
.tl-pack-rename { position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; background: rgba(0,0,0,.45); color: #fff; border-radius: 50%; }
.tl-pack-move { position: absolute; bottom: 2px; right: 2px; width: 28px; height: 28px; background: rgba(0,0,0,.45); color: #fff; border-radius: 50%; }
/* custom-sticker collections: a labelled section per collection + the move-mode banner */
.tl-pick-collection { display: flex; flex-direction: column; gap: 6px; }
.tl-pick-coll-head { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.tl-pick-coll-name { flex: 1; min-width: 0; font-size: .72rem; font-weight: 700; color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .03em; }
.tl-pick-coll-actions { display: flex; align-items: center; gap: 2px; }
.tl-pick-coll-actions .icon-btn { width: 30px; height: 30px; }
.tl-coll-empty { font-size: .8rem; margin: 0 0 2px; }
.tl-move-banner { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-md); font-size: .8rem;
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.tl-move-banner span { flex: 1; }
/* the video frame picker */
.tl-frame-picker { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 16px; }
.tl-frame-box { width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; padding: 16px;
  background: var(--md-sys-color-surface-container-high); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 10px; }
.tl-frame-head { display: flex; align-items: center; justify-content: space-between; }
.tl-frame-video { width: 100%; max-height: 46vh; background: #000; border-radius: var(--r-sm); }
.tl-frame-seek { width: 100%; }
.tl-frame-ctrls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.tl-frame-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-frame-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--md-sys-color-surface-container-highest); }
.tl-frame-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-frame-rm { position: absolute; top: 1px; right: 1px; width: 22px; height: 22px; background: rgba(0,0,0,.5); color: #fff; border-radius: 50%; }

/* r02: comments (.tl-reply, tinted by the commenter's owner colour) + the insert-between affordance */
.tl-replies { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tl-reply { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-left: 3px solid var(--owner, var(--md-sys-color-primary));
  background: var(--md-sys-color-surface-container); border-radius: var(--r-sm); font-size: .9rem; }
.tl-reply.self { flex-direction: row-reverse; border-left: none; border-right: 3px solid var(--owner, var(--md-sys-color-primary)); }
.tl-reply-t { flex: 1; white-space: pre-wrap; word-break: break-word; }
.tl-reply-del { width: 26px; height: 26px; color: var(--md-sys-color-error); }
.tl-reply-form { display: flex; align-items: center; gap: 4px; }
.tl-reply-in { flex: 1; min-width: 0; padding: 5px 10px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--r-md);
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: inherit; font-size: .9rem; }
.tl-reply-send { width: 30px; height: 30px; color: var(--md-sys-color-primary); }
/* Insert "+" between two cards: a hairline rule with a centred button that grows on hover/focus. */
.tl-insert-zone { display: flex; align-items: center; justify-content: center; height: 14px; margin: -4px 0; }
.tl-insert { width: 24px; height: 24px; line-height: 24px; padding: 0; border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 50%; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  opacity: .35; cursor: pointer; font-size: .7rem; transition: opacity .12s var(--m-effects, ease), transform .12s var(--m-effects, ease); }
.tl-insert:hover, .tl-insert:focus-visible { opacity: 1; transform: scale(1.15); color: var(--md-sys-color-primary); }
/* Inserting-mode chip docked just above the event bar. */
.tl-insert-chip { position: fixed; left: 0; right: 0; bottom: var(--tl-dock2, calc(128px + env(safe-area-inset-bottom, 0px))); z-index: 39;
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: .85rem;
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.tl-insert-chip span { flex: 1; }
@media (min-width: 600px) {
  .tl-insert-chip { left: var(--rail-w, 80px); bottom: 64px; }
}

/* ---- v02r06: timeline maps (region-name chip, per-event popup, trip map view) ---- */
.tl-region { display: inline; padding: 0; border: none; background: none; font: inherit; cursor: pointer;
  color: var(--md-sys-color-primary); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.tl-region .tl-region-ico { font-size: .85em; text-decoration: none; }
.tl-region:hover { color: var(--md-sys-color-on-surface); }
/* Map view (replaces the feed): controls + a full map filling the same area as the feed. */
.tl-map-view { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - 230px); padding: 4px 2px 8px; }
@media (min-width: 600px) { .tl-map-view { height: calc(100dvh - 210px); } }
.tl-map-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-map-range { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--md-sys-color-on-surface-variant); flex: 1; }
.tl-map-range input[type=range] { flex: 1; min-width: 80px; }
.tl-map-range output { min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tl-trip-map { flex: 1; min-height: 240px; border-radius: var(--r-lg); overflow: hidden; background: var(--md-sys-color-surface-container); }
/* Per-event map popup (region-name click). */
.tl-map-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 16px; }
.tl-map-box { width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--md-sys-color-surface-container-high); border-radius: var(--r-lg); }
.tl-map-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-event-map { width: 100%; height: 58vh; border-radius: var(--r-md); overflow: hidden; background: var(--md-sys-color-surface-container); }
/* numbered trip-map markers (permanent tooltip) — ORDER marker mode */
.leaflet-tooltip.tl-trip-num { background: transparent; border: none; box-shadow: none; color: #fff; font-weight: 700; font-size: 11px; padding: 0; }
.leaflet-tooltip.tl-trip-num::before { display: none; }
/* r19: CATEGORY marker mode — a speech-bubble div-icon holding the location/commute glyph, tinted by
   the category colour (--c). The bottom-left pointed corner is the tail pointing at the location. */
.leaflet-div-icon.tl-trip-bubble { background: transparent; border: none; }
.tl-bubble { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50% 50% 50% 3px; background: #fff; border: 2px solid var(--c, #2563eb); box-shadow: 0 1px 4px rgba(0,0,0,.4);
  font-size: 15px; color: var(--c, #2563eb); --fa-primary-color: var(--c, #2563eb); --fa-secondary-color: var(--c, #2563eb); --fa-secondary-opacity: .35; }
.tl-bubble i { line-height: 1; }
/* r19: compact range/marker mode toggles inside the map-controls row */
.tl-map-seg { padding: 3px; }
.tl-map-seg button { padding: 6px 12px; font-size: .8rem; }

/* ---- r03 backend validation report (#validateCard / #validateBody) ---- */
.validate-summary { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-weight: 700; font-size: .9rem; }
.validate-summary.ok { color: var(--md-sys-color-primary); }
.validate-summary.fail { color: var(--md-sys-color-error); }
.validate-err { color: var(--md-sys-color-error); font-weight: 600; }
.validate-group { margin-top: 10px; border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 8px; }
.validate-group-head { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.validate-group-head.ok { color: var(--md-sys-color-primary); }
.validate-group-head.fail { color: var(--md-sys-color-error); }
.validate-row { display: flex; align-items: baseline; gap: 6px; font-size: .8rem; padding: 2px 0 2px 20px; }
.validate-row.ok { color: var(--md-sys-color-on-surface); }
.validate-row.fail { color: var(--md-sys-color-error); font-weight: 600; }
.validate-name { font-variant-numeric: tabular-nums; }
.validate-muted { color: var(--md-sys-color-on-surface-variant); font-weight: 400; font-size: .76rem; }

/* r11: 貼圖分享對話框（locate → region → 記錄/分享）。沿用 .tl-map-modal 的 modal 模式。 */
.share-dialog { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 16px; }
.share-dialog-box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--md-sys-color-surface-container-high); border-radius: var(--r-lg); }
.share-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.share-dialog-body { min-height: 28px; }
.share-dialog-body .dlg-status { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--md-sys-color-on-surface); }
.share-dialog-actions { display: flex; flex-direction: column; gap: 10px; }
.share-dialog-actions .m3-btn { width: 100%; justify-content: center; }
.share-dialog-actions .dlg-reminder { margin: 0 0 2px; }
.share-dialog-actions .dlg-optin { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; line-height: 1.3; color: var(--md-sys-color-on-surface-variant); cursor: pointer; margin: 0 0 2px; }
.share-dialog-actions .dlg-optin input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--md-sys-color-primary); }
.dlg-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--md-sys-color-outline-variant); border-top-color: var(--md-sys-color-primary); animation: dlg-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes dlg-spin { to { transform: rotate(360deg); } }
html[data-reduce="1"] .dlg-spinner { animation: none; }