/* ============================================
   BLOG LONG-READ (blog 2026-10-06)
   Extra layer for long research articles built from
   web/blog/_longread-template.html, loaded AFTER landing.css.

   Two reading layers:
   - fast: the "In 60 seconds" box at the top (.lr-tldr) and one
     "if you read only this" line under every h2 (.lr-fast);
   - full: the normal .ld-article prose below each fast line.

   Separators and figures reuse Kiwi's own calendar patterns, with the
   same recipes as the app stylesheets (no new colours, tokens only):
   - gold dots      = the edge-flip cue        (styles/calendar.css)
   - taupe hatch    = the Break button/band    (styles/break.css)
   - sea-glass bars = the Life folder blocks   (styles/life.css)
   - flat sage      = the "what happened" lane (styles/lane.css)
   ============================================ */

/* ---- fast layer: "In 60 seconds" ---- */
.lr-tldr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: inset 0 3px 0 var(--coral);
    padding: 20px 24px 8px;
    margin: 0 0 34px;
}
.ld-article .lr-tldr-title {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--card);
    background: var(--coral-dark);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    margin: 0 0 14px;
}
.ld-article .lr-tldr ul { padding-left: 20px; }
.ld-article .lr-tldr li {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--plum);
    margin-bottom: 10px;
}
.ld-article .lr-tldr li::marker { color: var(--coral); }

/* ---- fast layer: one line under each h2 ---- */
.ld-article .lr-fast {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17.5px;
    line-height: 1.55;
    color: var(--mocha);
    background: var(--coral-tint);
    border-radius: var(--radius-chip);
    box-shadow: inset 0 -2px 0 var(--coral);
    padding: 12px 16px 14px;
    margin: 0 0 22px;
    max-width: none;
}
.lr-fast-label {
    display: block;
    width: fit-content;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--card);
    background: var(--coral-dark);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    margin-bottom: 6px;
}

/* ---- section separators (decorative <hr>) ---- */
.lr-sep {
    border: 0;
    height: 10px;
    max-width: 260px;
    margin: 52px auto 10px;
}
/* Edge-flip cue: gold dots, fading at both ends. */
.lr-sep-dots {
    background-image: radial-gradient(circle, var(--gold) 1.5px, transparent 2px);
    background-size: 8px 8px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
    mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
}
/* Break: the 45deg hatch of the "on a break" button, taupe edge on top. */
.lr-sep-hatch {
    height: 12px;
    border-top: 1.5px solid var(--taupe);
    background-color: var(--surface-alt);
    background-image: repeating-linear-gradient(
        45deg,
        var(--border-deep) 0,
        var(--border-deep) 1.5px,
        transparent 1.5px,
        transparent 7px
    );
}
/* Life: sea-glass tint with thin vertical stripes and the deep left accent. */
.lr-sep-life {
    height: 14px;
    border: 1px solid var(--life);
    border-left: 3px solid var(--life-deep);
    border-radius: var(--radius-chip);
    background-color: var(--life-tint);
    background-image: repeating-linear-gradient(
        90deg,
        var(--life-light) 0,
        var(--life-light) 1.5px,
        transparent 1.5px,
        transparent 7px
    );
}
/* Lane: a flat sage bar on its side, the "done" part a notch deeper. */
.lr-sep-lane {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(
        to right,
        var(--sage-deep) 0,
        var(--sage-deep) 38%,
        transparent 38%,
        transparent 41%,
        var(--sage) 41%
    );
    opacity: .5;
}

/* ---- figures ---- */
.lr-fig { margin: 30px 0 34px; }
.lr-fig-frame {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px;
}
/* Detailed drawings keep a readable size on phones and scroll inside the
   frame; the page itself never scrolls sideways. */
.lr-fig-scroll { overflow-x: auto; }
.lr-fig-scroll svg { min-width: 600px; }
.lr-fig svg { display: block; width: 100%; height: auto; }
.ld-article .lr-fig figcaption {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 12px;
    max-width: 68ch;
}
.ld-article .lr-fig figcaption strong { color: var(--plum); }
.lr-fig-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--plum);
    background: var(--card);
    border: 1px dashed var(--taupe);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    margin-bottom: 10px;
}

/* Legend under a drawing. */
.lr-key {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.ld-article .lr-key li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--plum);
    margin: 0;
}
.lr-sw {
    display: inline-block;
    width: 6px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
}
.lr-sw-done { background: var(--sage-deep); }
.lr-sw-run { background: var(--green); }
.lr-sw-pause { background: var(--sage); }
.lr-sw-planned { background: var(--sage); opacity: .45; }
.lr-sw-wait {
    border-radius: 0;
    background-image: radial-gradient(circle, var(--gold) 2px, transparent 2.5px);
    background-size: 6px 6px;
}
.lr-sw-carried {
    width: auto;
    height: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--plum);
    background: var(--card);
    border: 1px dashed var(--taupe);
    border-radius: var(--radius-pill);
    padding: 0 6px;
}

/* Three numbers under the "11 minutes" drawing. */
.lr-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.lr-stat {
    background: var(--warm-tint);
    border-radius: var(--radius-chip);
    padding: 12px 14px;
}
.lr-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.1;
    color: var(--mocha);
}
.lr-stat-txt {
    display: block;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--plum);
    margin-top: 4px;
}

/* Comparison matrix: marks inside the article table. */
.lr-mark {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    margin-right: 4px;
    border: 1px solid;
    white-space: nowrap;
}
.lr-mark-yes { color: var(--green-ink); background: var(--sage-faint); border-color: var(--sage-deep); }
.lr-mark-part { color: var(--amber-deep); background: var(--peach-tint); border-color: var(--gold); }
.lr-mark-no { color: var(--plum); background: var(--surface-alt); border-color: var(--border-deep); }
.ld-article .lr-matrix td { font-size: 14px; }
.ld-article .lr-matrix tr.lr-matrix-kiwi td { background: var(--sage-faint); }
.lr-matrix-none { color: var(--text-faint); }
/* The table's own caption is for screen readers; the figcaption below says it for everyone. */
.lr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- SVG drawing vocabulary (classes, so the palette stays in tokens) ---- */
.lr-fig svg text { font-family: var(--font-body); }
.g-axis { fill: var(--plum-light); font-family: var(--font-mono); font-size: 11px; }
.lr-fig svg .g-axis { font-family: var(--font-mono); }
.g-colhead { fill: var(--plum-light); font-size: 10.5px; letter-spacing: 1px; }
.lr-fig svg .g-colhead,
.lr-fig svg .g-mono { font-family: var(--font-mono); }
.g-grid { stroke: var(--border-light); stroke-width: 1; }
.g-vline { stroke: var(--border); stroke-width: 1; }
.g-past { fill: var(--surface-alt); opacity: .6; }

.g-block { fill: var(--sage-faint); stroke: var(--sage); stroke-width: 1; }
.g-block-edge { fill: var(--sage); }
.g-block-t { fill: var(--green-ink); font-size: 12px; font-weight: 600; }
/* A block's time or short note, in the mono face. */
.lr-fig svg .g-meta { font-family: var(--font-mono); font-size: 10px; }
.g-meta-task { fill: var(--green-ink); opacity: .85; }
.g-meta-life { fill: var(--life-ink); }
.g-meta-done,
.g-meta-off { fill: var(--text-faint); }
.g-done { fill: var(--surface-alt); stroke: var(--border); stroke-width: 1; }
.g-done-edge { fill: var(--border-deep); }
.g-done-t { fill: var(--text-faint); font-size: 12px; font-weight: 600; text-decoration: line-through; }
.g-off { fill: none; stroke: var(--border-deep); stroke-width: 1; stroke-dasharray: 4 3; }
.g-off-t { fill: var(--text-faint); font-size: 12px; font-weight: 600; }
.g-life-bg { fill: var(--life-tint); }
.g-life-stripe { fill: var(--life-light); }
.g-life { stroke: var(--life); stroke-width: 1; }
.g-life-edge { fill: var(--life-deep); }
.g-life-t { fill: var(--life-ink); font-size: 12px; font-weight: 600; }

.g-bar-done { fill: var(--sage-deep); }
.g-bar-run { fill: var(--green); }
.g-bar-pause { fill: var(--sage); }
.g-bar-planned { fill: var(--sage); opacity: .45; }
/* The shipped lane's done tint (lane.css .is-done). */
.g-bar-lane-done { fill: var(--sage-deep); opacity: .5; }
.g-run-dash { stroke: var(--green); stroke-width: 6; stroke-dasharray: 3 3; }
.g-wait-dot { fill: var(--gold); }
.g-cap { fill: var(--card); stroke: var(--sage-deep); stroke-width: 1.5; }
.g-cap-p { stroke: var(--taupe); }
.g-check { fill: none; stroke: var(--sage-deep); stroke-width: 1.6; }
.g-pausebars { fill: var(--mocha-light); }

.g-label { fill: var(--mocha); font-size: 11.5px; font-weight: 600; }
.g-sub { fill: var(--plum); font-size: 10px; }
.lr-fig svg .g-sub { font-family: var(--font-mono); }

.g-now { stroke: var(--coral); stroke-width: 2; }
.g-now-dot { fill: var(--coral); }
.g-now-pill { fill: var(--coral-dark); }
.g-now-t { fill: var(--card); font-size: 10px; font-weight: 600; }
.lr-fig svg .g-now-t { font-family: var(--font-mono); }

.g-dh-today { fill: var(--coral-tint); }
.g-dh-d { fill: var(--coral-dark); font-size: 17px; }
.g-dh-d-plain { fill: var(--mocha); font-size: 17px; }
.lr-fig svg .g-dh-d,
.lr-fig svg .g-dh-d-plain { font-family: var(--font-display); }
.g-mixed-t { fill: var(--amber-deep); font-size: 10px; font-weight: 600; }
.lr-fig svg .g-mixed-t { font-family: var(--font-mono); }
.g-carried { fill: var(--card); stroke: var(--taupe); stroke-width: 1; stroke-dasharray: 3 2; }
.g-carried-t { fill: var(--plum); font-size: 9.5px; font-weight: 600; }
.lr-fig svg .g-carried-t { font-family: var(--font-mono); }

/* "11 minutes": project stretches and switches. */
.g-seg-a { fill: var(--sage-light); }
.g-seg-b { fill: var(--life-light); }
.g-seg-c { fill: var(--lav-tint); stroke: var(--lav); stroke-width: 1; }
.g-seg-d { fill: var(--peach); }
.g-seg-t { fill: var(--mocha); font-size: 11px; font-weight: 600; }
.g-switch { stroke: var(--coral-dark); stroke-width: 2; }
.g-switch-t { fill: var(--coral-ink); font-size: 10px; font-weight: 600; }
.lr-fig svg .g-switch-t { font-family: var(--font-mono); }

/* State diagram chips and arrows. */
.g-st-plan { fill: var(--card); stroke: var(--border-deep); stroke-width: 1.2; }
.g-st-plan-t { fill: var(--plum); }
.g-st-run { fill: var(--sage-faint); stroke: var(--sage-deep); stroke-width: 1.2; }
.g-st-run-t { fill: var(--green-ink); }
.g-st-pause { fill: var(--surface-alt); stroke: var(--border-deep); stroke-width: 1.2; }
.g-st-pause-t { fill: var(--plum); }
.g-st-wait { fill: var(--peach-tint); stroke: var(--gold); stroke-width: 1.2; }
.g-st-wait-t { fill: var(--amber-deep); }
.g-st-done { fill: var(--card); stroke: var(--border); stroke-width: 1.2; }
.g-st-done-t { fill: var(--text-faint); }
.g-st-carried { fill: var(--card); stroke: var(--taupe); stroke-width: 1.2; stroke-dasharray: 4 3; }
.g-st-carried-t { fill: var(--plum); }
.g-st-t { font-size: 13px; font-weight: 600; }
.g-edge { fill: none; stroke: var(--plum-light); stroke-width: 1.5; }
.g-edge-dash { stroke-dasharray: 5 4; }
.g-arrowhead { fill: var(--plum-light); }
.g-edge-t { fill: var(--plum); font-size: 10.5px; }
.lr-fig svg .g-edge-t { font-family: var(--font-mono); }
.g-edge-strong { fill: var(--mocha); font-size: 11.5px; font-weight: 600; }

@media (max-width: 640px) {
    .lr-tldr { padding: 18px 18px 6px; }
    .ld-article .lr-fast { font-size: 16.5px; }
    .lr-stats { grid-template-columns: 1fr; }
    .lr-fig-frame { padding: 12px; }
    .lr-sep { margin-top: 44px; }
}