/* ==========================================================================
   Teachloop design system (R1) — the "pigeonhole" style.
   Source of truth: .scratch/phase-1-rollout/prototypes/pigeonhole-app.html

   HOW THE STYLES ARE ORGANISED
   - frontend/index.html <style>   legacy app rules. Its :root tokens (--ink, --brand,
                                   --card, --font…) now point at the --tl-* palette below,
                                   and .card / .btn / form controls / h1–h2 were restyled
                                   in place, so every existing page inherits the new look.
   - styles/teachloop.css (this)   palette, base, the header (.navbar…), and the shared
                                   system classes for the restyled pages.
   - styles/<page>.css             one file per restyle ticket (R2–R7). Loaded after this.

   NAMING — every new system class is prefixed `tl-` because the prototype's names
   (.card, .btn, .chip, .tabs, .field, .row, .line, .add, .check, .journal, .label…)
   already exist in the legacy CSS with different meanings. Modifiers stay short and
   are always scoped to their tl- base (e.g. `.tl-tape.r`, `.tl-stamp.c`), so they
   cannot leak. Prototype → app mapping:

     prototype            use in the app
     -------------------  ---------------------------------------------------------
     .btn                 .btn.btn-primary   (navy; legacy class, restyled)
     .btn.ghost           .btn               (outlined navy; legacy class, restyled)
     .btn.must            .btn.btn-must      (mustard: the page's one main action)
     .ph / .label / .hand <PageHeading sticker label hand/> component
                          (renders .tl-ph, .tl-label, .tl-hand)
     .wrap / .cols        .tl-wrap / .tl-cols (.even, .list)
     .card (.white)       .tl-card (.white)   — prototype paper card with its spacing.
                          Legacy .card is also restyled (paper + soft shadow) but keeps
                          its old padding, so existing pages don't reflow.
     .tape (.r, .c)       .tl-tape (.r, .c)   — put inside a .tl-card (position:relative)
     .index / .lines      .tl-index / .tl-lines
     .k .mini .big .note  .tl-k .tl-mini .tl-big .tl-note
     .acts / .line        .tl-acts / .tl-line
     .stamp (.c .t .m .g .s)  .tl-stamp (.c coral=waiting/you owe, .t teal=shared/current,
                          .m mustard=sign off, .s sage=given/drop-in, .g grey=info)
     .stk                 .tl-stk (sticker drop shadow)
     .slips/.slip         .tl-slips / .tl-slip (.k-feedback .k-give .k-coral .k-claim
                          .k-dropin .sel); inner .tl-slip-t .tl-slip-d .tl-slip-row
                          .tl-corner
     .qa                  .tl-qa
     .ppl/.who/.av/.tot   .tl-ppl / .tl-who / .tl-av / .tl-tot
     .tabs/.tab/.folder   .tl-tabs / .tl-tab (.on) / .tl-folder
     .kv                  .tl-kv
     .letter/.from        .tl-letter / .tl-from
     .stepbox/.lab        .tl-stepbox / .tl-lab
     .clip/.sheet         .tl-clip / .tl-sheet
     .field/.flab         .tl-field / .tl-flab
     .inp                 .tl-inp
     .grid2/.grid3        .tl-grid2 / .tl-grid3
     .pre                 .tl-pre
     .chips/.chip         .tl-chips / .tl-chip (.on)
     .picked/.x           .tl-picked / .tl-x
     .journal/.jl/.n/.th  .tl-journal / .tl-jl (.new) / .tl-n / .tl-th
     .priv                .tl-priv
     .rate (.e .p .a .on) .tl-rate
     .check/.box          .tl-check / .tl-box
     .postcard/.pstamp    .tl-postcard / .tl-pstamp
     .ruled               .tl-ruled (handwritten lined textarea)
     .steps/.stepl        .tl-steps / .tl-stepl (.done .on)
     .add (notes picker)  .tl-addline / .tl-plus
     .share/.what/.toggle .tl-share / .tl-what / .tl-toggle
     .choose              .tl-choose
     .signin/.hero/.word  .tl-signin / .tl-hero / .tl-word

   Fonts: --tl-font-slab (Alfa Slab One — one weight, always 400), --tl-font-body
   (Lexend), --tl-font-hand (Caveat). Legacy --font-heading = slab, --font = Lexend.
   ========================================================================== */

:root {
    --tl-ink:     #1d2448;   /* navy: text, header, primary buttons */
    --tl-board:   #d9e2dc;   /* page background (with the dot grid) */
    --tl-paper:   #fbf8f1;
    --tl-white:   #ffffff;
    --tl-coral:   #e46f55;
    --tl-teal:    #2f7f83;
    --tl-mustard: #d8a536;
    --tl-sky:     #a8d2ec;
    --tl-sage:    #7a9d62;
    --tl-kraft:   #c29c6e;
    --tl-rule:    #cfdbea;
    --tl-dash:    rgba(29,36,72,.28);
    /* Text-safe darker tints for stamps on paper/white. */
    --tl-coral-text:   #c4503a;
    --tl-mustard-text: #a67812;
    --tl-sage-text:    #4f7a52;
    --tl-grey-text:    #6b7a8a;

    --tl-font-slab: "Alfa Slab One", Georgia, serif;
    --tl-font-body: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --tl-font-hand: "Caveat", "Bradley Hand", cursive;
}

/* ── base ─────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
:focus-visible { outline: 3px dashed var(--tl-coral); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── header (all users) ──────────────────────────────────────────────────
   NavBar in src/app.rs. Navy bar; logo + Alfa Slab wordmark; links with a
   mustard underline on the current page; "+ Add learning walk" mustard pill;
   account sticker + name on the right. The dropdown panels (Lead ▾, user menu,
   inbox, hamburger panel) stay paper cards with navy text. */
.navbar {
    background: var(--tl-ink);
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 24px;
    height: 60px;
    position: sticky; top: 0; z-index: 40;
}
.navbar-brand { display: flex; align-items: center; flex: none; }
.navbar-brand a {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--tl-paper); text-decoration: none;
}
.navbar-brand a:hover { text-decoration: none; }
.navbar-logo { height: 26px; width: auto; display: block; }
.navbar-wordmark { font: 400 22px/1 var(--tl-font-slab); letter-spacing: 0; white-space: nowrap; }

.navbar-nav {
    list-style: none; display: flex; align-items: center;
    gap: 18px; margin: 0; padding: 0; flex: 1;
    flex-wrap: nowrap; min-width: 0; /* allow shrink below content so we can detect overflow */
    font-size: 15px;
}
/* Collapsed: kept laid out (so we can keep measuring) but hidden; the
   hamburger + dropdown panel take over. */
.navbar-nav.is-collapsed { visibility: hidden; }
.navbar-nav > li > a {
    display: inline-block; padding: 4px 0 3px;
    color: var(--tl-paper); opacity: .78; white-space: nowrap;
    border-bottom: 2px solid transparent; text-decoration: none;
}
.navbar-nav > li > a:hover { opacity: 1; text-decoration: none; }
.navbar-nav > li > a[aria-current] { opacity: 1; border-color: var(--tl-mustard); }
/* "+ Add learning walk": mustard pill, current page or not. */
.navbar-nav > li > a.nav-add,
.navbar-nav > li > a.nav-add[aria-current] {
    opacity: 1; background: var(--tl-mustard); color: var(--tl-ink);
    padding: 6px 12px; border: 0; border-radius: 4px; font-weight: 600;
}
.navbar-nav > li > a.nav-add:hover { background: #e4b448; }

/* Hamburger toggle — only rendered (and shown) once the links don't fit. */
.nav-toggle {
    display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer;
    font-size: 1.35rem; line-height: 1; color: var(--tl-paper);
    padding: 4px 8px; border-radius: 4px;
}
.nav-toggle:hover { background: rgba(251,248,241,.12); }

/* Dropdown triggers in the bar (Lead ▾, Inbox, user menu) read like nav links. */
.nav-menu { position: relative; }
.nav-menu > summary {
    list-style: none; cursor: pointer; padding: 6px 8px;
    border-radius: 4px; white-space: nowrap; font-weight: 400; font-size: 15px;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.navbar .nav-menu > summary { color: var(--tl-paper); opacity: .85; }
.navbar .nav-menu > summary:hover,
.navbar .nav-menu[open] > summary { opacity: 1; background: rgba(251,248,241,.12); }

/* Panels hanging off the bar: paper cards, navy text. */
.nav-menu-items, .inbox-panel, .navbar-nav-panel { color: var(--tl-ink); }
.nav-menu-items {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: var(--space-2); min-width: 180px;
    display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0;
}
/* Dropdown items (Lead ▾ and the user menu) — links and plain buttons alike. */
.nav-menu-items li a, .nav-menu-items button {
    display: block; width: 100%; text-align: left; white-space: nowrap;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    background: none; border: 0; cursor: pointer;
    font: inherit; font-weight: 500; color: var(--ink-soft);
}
.nav-menu-items li a:hover, .nav-menu-items button:hover {
    background: var(--brand-tint); color: var(--brand-deep); text-decoration: none;
}
/* Right-aligned dropdown panel (user menu sits at the right edge). */
.nav-menu-right { left: auto; right: 0; }
/* Click-catcher behind the open dropdown (below the sticky navbar). */
.nav-backdrop { position: fixed; inset: 0; z-index: 30; }

/* Collapsed dropdown — the links grouped into columns below the bar. */
.navbar-nav-panel {
    margin: 0; position: absolute; top: calc(100% + 6px); right: var(--space-3); left: auto;
    display: flex; flex-wrap: wrap; gap: var(--space-5);
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: var(--space-4); z-index: 45;
    max-width: calc(100vw - 2 * var(--space-3));
}
.navbar-nav-panel .nav-group { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.navbar-nav-panel a {
    display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    color: var(--ink-soft); font-weight: 500; white-space: nowrap;
}
.navbar-nav-panel a:hover { background: var(--brand-tint); color: var(--brand-deep); text-decoration: none; }
.navbar-nav-panel a[aria-current] { background: var(--brand-tint); color: var(--brand-deep); }
.navbar-nav-panel a.nav-add { background: var(--tl-mustard); color: var(--tl-ink); font-weight: 600; }
.navbar-nav-panel .nav-group-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--ink-soft); opacity: .6; margin-top: var(--space-3); padding: 0 var(--space-3) 2px;
}
.navbar-spacer { flex: 1; }
.navbar-user { margin-left: auto; flex: none; }
.navbar-user > a { color: var(--tl-paper); font-size: 15px; }  /* signed-out "Sign in" link */

/* User menu trigger: account sticker + name + caret. */
.user-menu > summary { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; }
.user-sticker {
    flex: none; width: 34px; height: 34px; display: block;
    transform: rotate(5deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Compact bar (app.rs measures fit): before collapsing to the hamburger, the
   long links swap to short labels ("My LWs", "+ LW") and the Inbox to its tray
   icon. The hamburger's dropdown always uses the full labels. */
.nav-short { display: none; }
.navbar.is-compact .navbar-nav .nav-full { display: none; }
.navbar.is-compact .navbar-nav .nav-short { display: inline; }
.navbar.is-compact .inbox-menu > summary .nav-full { display: none; }
@media (max-width: 720px) {
    .navbar { padding: 0 var(--space-3); gap: var(--space-2); }
    .navbar-wordmark { display: none; } /* keep the logo, drop the wordmark */
    .user-name { display: none; }       /* keep just the account sticker */
}

/* ── layout ───────────────────────────────────────────────────────────── */
.tl-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.tl-cols { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 36px; align-items: start; margin-top: 30px; }
.tl-cols.even { grid-template-columns: 1fr 1fr; }
.tl-cols.list { grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); }
@media (max-width: 860px) { .tl-cols, .tl-cols.even, .tl-cols.list { grid-template-columns: 1fr; } }

/* ── page heading: sticker + torn label + handwritten line (PageHeading) ── */
.tl-ph { display: flex; align-items: center; gap: 14px; margin: 34px 0 4px; }
.tl-ph > img { width: 66px; height: 66px; transform: rotate(-6deg); filter: drop-shadow(0 2px 2px rgba(29,36,72,.3)); flex: none; }
.tl-ph-st { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.tl-label {
    display: inline-block; background: var(--tl-paper); color: var(--tl-ink);
    padding: .3em .7em .34em; margin: 0;
    font: 400 clamp(24px,2.6vw,30px)/1.1 var(--tl-font-slab); letter-spacing: 0; font-synthesis: none;
    box-shadow: 0 2px 0 rgba(29,36,72,.14);
    clip-path: polygon(0 6%,3% 0,38% 4%,62% 0,97% 5%,100% 12%,99% 90%,95% 100%,58% 96%,30% 100%,4% 95%,0 88%);
}
.tl-label.sm { font-size: clamp(20px,2.1vw,25px); }
.tl-hand { font: 700 22px/1.15 var(--tl-font-hand); color: var(--tl-teal); padding-left: 10px; margin: 0; }
.tl-hand.c { color: var(--tl-coral-text); }
/* Optional "?" after the title (PageHeading `help`), opening an explainer modal. */
.tl-ph-row { display: flex; align-items: center; gap: 10px; }
.tl-ph-help {
    flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%;
    border: 2px solid var(--tl-ink); background: var(--tl-white); color: var(--tl-ink);
    font: 700 17px/1 var(--tl-font-body); cursor: pointer;
    box-shadow: 0 2px 0 rgba(29,36,72,.14);
}
.tl-ph-help:hover { background: var(--tl-mustard); }
.tl-ph-help-p { margin: 0 0 12px; line-height: 1.55; }

/* ── paper ────────────────────────────────────────────────────────────── */
.tl-card {
    position: relative; background: var(--tl-paper); padding: 30px 32px 28px; margin-bottom: 32px;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -12px rgba(29,36,72,.45);
}
.tl-card.white { background: var(--tl-white); }
.tl-tape {
    position: absolute; top: -11px; left: 38px; width: 96px; height: 24px;
    background: rgba(216,165,54,.72); transform: rotate(-2.2deg); box-shadow: 0 1px 2px rgba(0,0,0,.12);
    pointer-events: none;
}
.tl-tape.r { left: auto; right: 44px; transform: rotate(1.8deg); background: rgba(168,210,236,.85); }
.tl-tape.c { background: rgba(228,111,85,.55); }
.tl-index { background: var(--tl-white); border-top: 6px solid var(--tl-coral); }
.tl-lines { background-image: repeating-linear-gradient(transparent 0 35px, var(--tl-rule) 35px 36px); margin: 0 -32px; padding: 0 32px 1px; }
.tl-k {
    font: 600 13px/1 var(--tl-font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--tl-teal);
    margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.tl-k a { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--tl-ink); text-decoration: underline; text-underline-offset: 3px; }
.tl-mini { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.tl-big { font: 500 clamp(22px,2.6vw,29px)/36px var(--tl-font-body); letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.tl-note { font: 700 23px/36px var(--tl-font-hand); color: var(--tl-coral-text); margin: 0; }
.tl-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.tl-line { padding: 12px 0; border-top: 1px dashed var(--tl-dash); font-size: 15px; }
.tl-line:first-of-type { border-top: 0; }
.tl-line time { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.tl-stamp {
    display: inline-block; font: 600 10.5px/1 var(--tl-font-body); letter-spacing: .1em; text-transform: uppercase;
    border: 1.5px solid currentColor; padding: 4px 6px; white-space: nowrap;
}
.tl-stamp.c { color: var(--tl-coral-text); }
.tl-stamp.t { color: var(--tl-teal); }
.tl-stamp.m { color: var(--tl-mustard-text); }
.tl-stamp.g { color: var(--tl-grey-text); }
.tl-stamp.s { color: var(--tl-sage-text); }
.tl-stk { filter: drop-shadow(0 2px 2px rgba(29,36,72,.28)); }

/* ── slips (inbox / list rows) ────────────────────────────────────────── */
.tl-slips { display: grid; gap: 16px; margin-bottom: 32px; }
.tl-slip {
    position: relative; display: block; background: var(--tl-paper); color: inherit;
    padding: 16px 18px 16px 24px; border-left: 10px solid var(--tl-sky);
    box-shadow: 0 8px 18px -12px rgba(29,36,72,.5); text-decoration: none;
}
a.tl-slip, button.tl-slip { cursor: pointer; }
a.tl-slip:hover { text-decoration: none; }
.tl-slip:nth-child(odd) { transform: rotate(-.35deg); }
.tl-slip:nth-child(even) { transform: rotate(.3deg); }
.tl-slip.k-feedback { border-color: var(--tl-teal); }
.tl-slip.k-give, .tl-slip.k-coral { border-color: var(--tl-coral); }
.tl-slip.k-claim { border-color: var(--tl-mustard); }
.tl-slip.k-dropin { border-color: var(--tl-sage); }
.tl-slip.sel { background: var(--tl-white); box-shadow: 0 0 0 2px var(--tl-ink), 0 10px 22px -12px rgba(29,36,72,.6); transform: none; }
.tl-corner { float: right; margin-left: 10px; }
.tl-slip-t { font-weight: 600; line-height: 1.35; }
.tl-slip-d { font-size: 14px; opacity: .78; margin-top: 3px; }
.tl-slip-row { display: flex; align-items: center; gap: 12px; }
.tl-slip-row > img, .tl-slip-row > svg { flex: none; }
.tl-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.tl-qa .btn { text-align: left; padding: 12px 14px; }
.tl-qa .btn:first-child { grid-column: 1 / -1; }

/* ── people rows (walks card) ─────────────────────────────────────────── */
.tl-ppl { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.tl-ppl + .tl-ppl { border-top: 1px dashed var(--tl-dash); }
.tl-who { flex: 1; line-height: 1.3; min-width: 0; }
.tl-who small { display: block; font-size: 12.5px; opacity: .65; }
.tl-av { flex: none; width: 42px; height: 42px; display: grid; place-items: center; }
.tl-tot { margin-top: 14px; padding-top: 14px; border-top: 1.5px solid var(--tl-ink); display: flex; gap: 26px; font-size: 14px; align-items: center; }
.tl-tot > span { display: flex; align-items: center; gap: 6px; }
.tl-tot b { font: 400 20px/1 var(--tl-font-slab); font-synthesis: none; }

/* ── tabs as file dividers ────────────────────────────────────────────── */
.tl-tabs { display: flex; gap: 6px; margin: 22px 0 -2px; position: relative; z-index: 1; flex-wrap: wrap; }
.tl-tab {
    display: flex; align-items: center; gap: 10px; padding: 10px 18px 9px;
    border: 1.5px solid var(--tl-ink); border-bottom: 0; border-radius: 9px 9px 0 0;
    background: #ebe5d6; color: var(--tl-ink); font: inherit; font-size: 15px; cursor: pointer; text-decoration: none;
}
.tl-tab:hover { text-decoration: none; }
.tl-tab.on { background: var(--tl-paper); }
.tl-tab b { font: 400 22px/1 var(--tl-font-slab); font-synthesis: none; }
.tl-folder { border: 1.5px solid var(--tl-ink); background: var(--tl-paper); padding: 26px; }

/* ── detail pane bits ─────────────────────────────────────────────────── */
.tl-kv { display: grid; grid-template-columns: 120px 1fr; gap: 9px 16px; font-size: 15px; margin: 16px 0 4px; }
.tl-kv dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; padding-top: 3px; }
.tl-kv dd { margin: 0; }
.tl-letter {
    background: var(--tl-white);
    background-image: repeating-linear-gradient(transparent 0 31px, #e4e9f1 31px 32px); background-position: 0 58px;
    padding: 20px 24px 22px; margin-top: 20px; box-shadow: 0 6px 14px -10px rgba(29,36,72,.5);
    border-left: 3px double var(--tl-coral);
}
.tl-from { font: 700 24px/1.2 var(--tl-font-hand); color: var(--tl-teal); margin-bottom: 8px; }
.tl-letter p { line-height: 32px; margin: 0; }
.tl-stepbox { position: relative; background: #fffdf6; border: 1.5px solid var(--tl-ink); padding: 16px 18px; margin-top: 22px; }
.tl-lab {
    position: absolute; top: -12px; left: 14px; background: var(--tl-mustard); color: var(--tl-ink);
    font: 600 11px/1 var(--tl-font-body); letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 8px; transform: rotate(-1.5deg);
}

/* ── forms ────────────────────────────────────────────────────────────── */
.tl-clip { position: relative; background: var(--tl-kraft); padding: 44px 18px 18px; border-radius: 12px; box-shadow: 0 12px 26px -14px rgba(29,36,72,.6); margin-bottom: 32px; }
.tl-clip::before {
    content: ""; position: absolute; top: -12px; left: 50%; width: 120px; height: 36px; margin-left: -60px;
    background: #5b6577; border-radius: 8px 8px 12px 12px; box-shadow: inset 0 -6px 0 #444d5e, 0 3px 4px rgba(0,0,0,.25);
}
.tl-sheet { background: var(--tl-paper); padding: 26px 28px; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.tl-field { margin-bottom: 20px; }
.tl-field > label, .tl-flab {
    display: block; font: 600 12px/1 var(--tl-font-body); text-transform: uppercase; letter-spacing: .1em;
    color: var(--tl-ink); opacity: .7; margin-bottom: 8px;
}
/* Element-qualified so it beats the legacy input/select/textarea rules in index.html. */
input.tl-inp, select.tl-inp, textarea.tl-inp {
    width: 100%; min-height: 0; height: auto; background-color: var(--tl-white);
    border: 1.5px solid var(--tl-ink); border-radius: 4px; padding: 10px 12px; font-size: 15px; color: var(--tl-ink);
}
select.tl-inp { padding-right: 38px; }
textarea.tl-inp { min-height: 0; }
.tl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tl-grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .tl-grid2, .tl-grid3 { grid-template-columns: 1fr; } }
.tl-pre { display: inline-flex; align-items: center; gap: 8px; background: #eef5f4; border: 1.5px dashed var(--tl-teal); border-radius: 4px; padding: 8px 12px; font-size: 14.5px; }
.tl-pre small { opacity: .7; }
.tl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-chip { border: 1.5px solid var(--tl-ink); background: var(--tl-white); color: var(--tl-ink); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 14px; cursor: pointer; }
.tl-chip.on { background: var(--tl-ink); color: var(--tl-paper); }
.tl-picked { display: flex; align-items: center; gap: 10px; background: var(--tl-white); border: 1.5px solid var(--tl-ink); border-radius: 4px; padding: 8px 12px; }
.tl-picked b { font-weight: 600; }
.tl-picked span { opacity: .65; font-size: 14px; }
.tl-picked .tl-x { margin-left: auto; opacity: .6; }

/* Lined journal (walk notes): time margin + handwritten notes. */
.tl-journal {
    position: relative; background: #fcf8ee;
    background-image: repeating-linear-gradient(#fcf8ee 0, #fcf8ee 33px, var(--tl-rule) 33px, var(--tl-rule) 34px);
    background-position: 0 9px; border: 1px solid #ddd6c8; padding: 9px 0 4px;
}
.tl-journal::before { content: ""; position: absolute; top: 0; bottom: 0; left: 58px; width: 2px; background: #e29a98; }
.tl-jl { display: flex; align-items: flex-start; min-height: 34px; }
.tl-jl time { width: 58px; flex: none; text-align: right; padding-right: 12px; font-size: 12px; line-height: 34px; opacity: .55; font-variant-numeric: tabular-nums; }
.tl-n { flex: 1; padding: 0 12px; font: 500 22px/34px var(--tl-font-hand); color: #24408d; }
.tl-th { flex: none; width: 28px; line-height: 34px; text-align: center; font-size: 14px; }
.tl-jl.new .tl-n { color: #b3c0d6; font-style: italic; }
.tl-priv { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-top: 10px; opacity: .8; }

/* Rubber-stamp rating buttons. */
.tl-rate { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tl-rate button {
    background: transparent; border: 2px solid currentColor; padding: 7px 12px;
    font: 600 11.5px/1 var(--tl-font-body); letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; transform: rotate(-1.5deg);
}
.tl-rate .e { color: var(--tl-sage-text); }
.tl-rate .p { color: var(--tl-mustard-text); }
.tl-rate .a { color: var(--tl-coral-text); }
.tl-rate .n { color: var(--tl-grey-text); }
.tl-rate .on { background: currentColor; }
.tl-rate .on span { color: var(--tl-white); }

/* Checkbox row (label element: override the legacy `label` rule). */
label.tl-check { display: flex; gap: 11px; align-items: flex-start; margin: 14px 0; font-size: 15px; font-weight: 400; color: inherit; cursor: pointer; }
.tl-box { flex: none; width: 22px; height: 22px; border: 2px solid var(--tl-ink); background: var(--tl-white); border-radius: 4px; display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-top: 1px; }
.tl-check small { display: block; opacity: .65; font-size: 13px; }

/* Postcard (drop-in): two halves with a dashed fold. */
.tl-postcard { display: grid; grid-template-columns: 1fr 1fr; background: var(--tl-white); box-shadow: 0 12px 26px -14px rgba(29,36,72,.6); margin-bottom: 32px; }
.tl-postcard > div { padding: 24px 26px; }
.tl-postcard > div + div { border-left: 2px dashed var(--tl-dash); }
.tl-pstamp { float: right; width: 62px; height: 72px; border: 2px dashed var(--tl-coral); display: grid; place-items: center; margin: -6px -6px 8px 10px; background: #fff7f4; }
@media (max-width: 700px) {
    .tl-postcard { grid-template-columns: 1fr; }
    .tl-postcard > div + div { border-left: 0; border-top: 2px dashed var(--tl-dash); }
}
/* Drop-in thank-you stamps (components/thank_you.rs). The form's stamp box is a
   button that opens the picker; the received thank-you is a postcard. */
.tl-stamp-btn { width: 78px; height: 88px; padding: 0; cursor: pointer; font: inherit; transform: rotate(3deg); transition: transform .12s; }
.tl-stamp-btn img, .tl-ty-stamp img { width: 62px; height: 62px; object-fit: contain; }
.tl-stamp-btn:hover { transform: rotate(-2deg) scale(1.06); }
.modal.ov-modal.tl-stamp-pick { width: min(660px, 100%); max-height: 88vh; overflow-y: auto; }
.tl-stamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tl-stamp-opt { padding: 6px; border: 2px dashed transparent; border-radius: 4px; background: none; cursor: pointer; }
.tl-stamp-opt img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.tl-stamp-opt:hover { background: #fff7f4; }
.tl-stamp-opt.on { border-color: var(--tl-coral); background: #fff7f4; }
.tl-ty-card { grid-template-columns: 3fr 2fr; margin: 12px 0 4px; box-shadow: 0 8px 20px -12px rgba(29,36,72,.55); color: var(--tl-ink); }
.tl-ty-card > div { padding: 18px 20px; }
.tl-ty-text { margin: 0; font: 700 23px/1.25 var(--tl-font-hand); white-space: pre-wrap; }
.tl-ty-from { margin: 10px 0 0; font: 700 20px/1.2 var(--tl-font-hand); color: var(--tl-teal); }
.tl-ty-stamp { width: 78px; height: 88px; margin: -4px -4px 10px 10px; transform: rotate(3deg); }
.tl-ty-line { clear: right; margin: 0; padding: 14px 0 3px; border-bottom: 1.5px solid var(--tl-rule); font-size: 14px; }
.tl-ty-line + .tl-ty-line { clear: none; }
.inbox-row .tl-ty-card { margin-top: 8px; }
.inbox-row .tl-ty-card > div { padding: 12px 14px; }
.inbox-row .tl-ty-text { font-size: 20px; }

/* Handwritten lined textarea (element-qualified to beat the legacy textarea rule). */
textarea.tl-ruled {
    width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    background-image: repeating-linear-gradient(transparent 0 33px, var(--tl-rule) 33px 34px);
    font: 500 21px/34px var(--tl-font-hand); color: #24408d; resize: none; padding: 0; min-height: 170px;
}
textarea.tl-ruled:focus { background-color: transparent; box-shadow: none; }

/* ── wizard steps ─────────────────────────────────────────────────────── */
.tl-steps { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 26px; }
.tl-stepl {
    background: var(--tl-paper); padding: 8px 14px 9px; font-size: 14px; opacity: .7;
    clip-path: polygon(0 8%,4% 0,50% 5%,96% 0,100% 10%,98% 92%,94% 100%,50% 95%,5% 100%,0 90%);
}
.tl-stepl b { font: 400 15px/1 var(--tl-font-slab); margin-right: 6px; font-synthesis: none; }
.tl-stepl.done { opacity: .85; }
.tl-stepl.done::after { content: " ✓"; color: var(--tl-teal); font-weight: 700; }
.tl-stepl.on { opacity: 1; background: var(--tl-mustard); }
/* Notes picker rows ("click ＋ to use a line"). */
.tl-addline { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px dashed var(--tl-dash); font-size: 14.5px; }
.tl-addline:first-of-type { border-top: 0; }
.tl-addline time { flex: none; width: 44px; font-size: 12px; opacity: .6; padding-top: 2px; }
.tl-plus { flex: none; margin-left: auto; border: 1.5px solid var(--tl-ink); background: var(--tl-white); color: var(--tl-ink); border-radius: 4px; padding: 2px 9px; font-weight: 600; cursor: pointer; }
.tl-share { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--tl-dash); }
.tl-share:first-of-type { border-top: 0; }
.tl-what { flex: 1; font-size: 14.5px; line-height: 1.35; }
.tl-what small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.tl-toggle { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tl-toggle .tl-box { border-width: 2px; }
.tl-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tl-choose button { text-align: left; background: var(--tl-white); color: var(--tl-ink); border: 1.5px solid var(--tl-ink); padding: 10px 12px; border-radius: 4px; font: inherit; font-size: 14px; line-height: 1.35; cursor: pointer; }
.tl-choose button.on { background: #eef5f4; box-shadow: inset 0 0 0 2px var(--tl-teal); }
.tl-choose button b { display: block; }

/* ── sign in ──────────────────────────────────────────────────────────── */
.tl-signin { max-width: 440px; margin: 7vh auto 0; text-align: center; }
.tl-hero { width: 230px; margin-top: 20px; transform: rotate(-3deg); filter: drop-shadow(0 4px 4px rgba(29,36,72,.3)); }
.tl-word { font: 400 54px/1 var(--tl-font-slab); margin: 12px 0 4px; font-synthesis: none; }
.tl-signin .tl-card { text-align: left; margin-top: 24px; }

/* A feedback entry's shared walk judgement (walk_shared_kv) — the walk's notes layout. */
.je-walk-shared { margin: 12px 0 4px; }