/* HOP — Your progress letter (letter.js, v108) */
:root{ --lt-paper:#fffdf8; --lt-ink:#1b2b33; --lt-raw:#9bb6c2; --lt-avg:#16768a; --lt-goal:#c98a12; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --lt-paper:#1f2c30; --lt-ink:#edf1eb; --lt-raw:#5d7c88; --lt-avg:#8fd0dd; --lt-goal:#f0c35a; } }
:root[data-theme="dark"]{ --lt-paper:#1f2c30; --lt-ink:#edf1eb; --lt-raw:#5d7c88; --lt-avg:#8fd0dd; --lt-goal:#f0c35a; }

.lt-entry{ display:flex; align-items:center; gap:12px; width:100%; margin:0 0 14px; padding:14px 16px; border-radius:16px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.lt-entry > svg:first-child{ flex:none; color:var(--accent-500); }
.lt-entry span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lt-entry b{ font-size:16.5px; }
.lt-entry i{ font-style:normal; font-size:14px; color:var(--text-muted); }
.lt-entry > svg:last-child{ flex:none; color:var(--text-faint); }

.lt-main{ gap:12px; padding-top:14px; }
.lt-seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
.lt-seg button{ font:inherit; font-size:15px; font-weight:700; padding:10px 8px; border-radius:10px; border:0; cursor:pointer; background:transparent; color:var(--text-muted); }
.lt-seg button.is-on{ background:var(--refresh-action, var(--accent-500)); color:var(--refresh-action-ink, #fff); }

.lt-letter{ background:var(--lt-paper); color:var(--lt-ink); border:1px solid var(--border); border-radius:18px; padding:20px 18px 16px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px; }
.lt-meta{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--text-muted); }
.lt-h{ margin:0; font-family:Georgia, "Times New Roman", serif; font-size:clamp(24px, 6.4vw, 30px); line-height:1.15; letter-spacing:-.01em; text-wrap:balance; }
.lt-letter p{ margin:0; font-family:Georgia, "Times New Roman", serif; font-size:17px; line-height:1.6; max-width:62ch; }
.lt-sign{ font-family:Georgia, "Times New Roman", serif; font-style:italic; font-size:17px; color:var(--text-muted); }
.lt-acts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:4px; border-top:1px solid var(--border); margin-top:4px; padding-top:12px; }
.lt-acts .btn{ flex:0 1 auto; padding:0 14px; min-height:40px; font-size:14.5px; }
.lt-acts .btn svg{ vertical-align:-3px; margin-right:4px; }
.lt-name{ font:inherit; font-size:14px; font-weight:700; border:0; background:none; color:var(--accent-500); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 2px; }

.lt-sec{ margin:14px 0 0; font-size:19px; line-height:1.25; color:var(--accent-600); }
.lt-main > p{ margin:0; font-size:15.5px; line-height:1.5; }
.lt-small{ margin:0; font-size:13.5px; line-height:1.45; color:var(--text-muted); }
.lt-tbl{ width:100%; border-collapse:collapse; font-size:14.5px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.lt-tbl th{ text-align:left; font-size:13px; font-weight:800; color:var(--text-muted); background:var(--surface-2); padding:9px 10px; }
.lt-tbl td{ padding:9px 10px; border-top:1px solid var(--border); vertical-align:top; line-height:1.4; }
.lt-tbl td:first-child{ font-weight:600; }
.lt-tbl:not(.lt-e8) td:first-child{ width:34%; }
.lt-e8 td{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.lt-e8 td:first-child{ white-space:normal; }
.lt-e8 i{ font-style:normal; color:var(--text-muted); }
.lt-up{ color:var(--success); font-size:11px; }
.lt-down{ color:var(--danger); font-size:11px; }
.lt-fig{ margin:4px 0 0; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow-x:auto; }
.lt-fig svg{ display:block; width:100%; height:auto; min-width:300px; }
.lt-grid{ stroke:var(--border); stroke-width:1; }
.lt-ax{ fill:var(--text-muted); font-size:12px; font-family:inherit; }
.lt-raw{ fill:none; stroke:var(--lt-raw); stroke-width:1.6; }
.lt-avg{ fill:none; stroke:var(--lt-avg); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.lt-goal{ stroke:var(--lt-goal); stroke-width:1.4; stroke-dasharray:5 4; }
.lt-dot{ fill:var(--lt-avg); }
.lt-fig figcaption{ margin-top:8px; font-size:13.5px; color:var(--text-muted); line-height:1.4; }
.lt-key{ display:inline-block; width:16px; height:3px; border-radius:2px; vertical-align:middle; margin:0 5px 0 2px; }
.lt-key.is-raw{ background:var(--lt-raw); } .lt-key.is-avg{ background:var(--lt-avg); height:4px; margin-left:8px; }
.lt-sit{ padding:10px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; gap:3px; }
.lt-sit b{ font-size:15.5px; }
.lt-sit span{ font-size:13.5px; color:var(--text-muted); }
.lt-sit p{ margin:2px 0 0; font-size:14.5px; line-height:1.4; }
.lt-exp{ padding:14px; border-radius:14px; background:var(--accent-100); border:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.lt-exp b{ font-size:16.5px; }
.lt-exp p{ margin:0; font-size:15px; line-height:1.5; }
.lt-det > summary{ cursor:pointer; font-weight:700; color:var(--text-muted); padding:10px 2px; }
.lt-det p{ margin:0; font-size:14px; line-height:1.5; color:var(--text-muted); }

/* v111: a spike after lighter Easy 8 days */
:root{ --lt-flag:#e9a43b; --lt-spike-bg:#fff7e8; --lt-spike-line:#f0d39a; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --lt-flag:#e0a64a; --lt-spike-bg:#2c2618; --lt-spike-line:#5f4d2a; } }
:root[data-theme="dark"]{ --lt-flag:#e0a64a; --lt-spike-bg:#2c2618; --lt-spike-line:#5f4d2a; }
.lt-flagband{ fill:var(--lt-flag); opacity:.22; }
.lt-baseline{ stroke:var(--lt-flag); stroke-width:1.6; stroke-dasharray:3 4; }
.lt-key.is-flag{ background:var(--lt-flag); opacity:.5; height:10px; width:10px; margin-left:8px; }
.lt-key.is-base{ background:repeating-linear-gradient(90deg, var(--lt-flag) 0 3px, transparent 3px 6px); height:2px; margin-left:8px; }
.lt-spike{ padding:14px; border-radius:14px; background:var(--lt-spike-bg); border:1px solid var(--lt-spike-line); display:flex; flex-direction:column; gap:10px; }
.lt-spike-h{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 10px; }
.lt-spike-h b{ font-size:17px; color:var(--text); }
.lt-spike-h span{ font-size:13px; font-weight:700; color:var(--text-muted); }
.lt-spike.is-normal .lt-spike-h span{ color:var(--success); }
.lt-spike-steps{ list-style:none; margin:0; padding:0 0 0 14px; display:flex; flex-direction:column; gap:8px; border-left:3px solid var(--lt-spike-line); }
.lt-spike-steps li{ position:relative; display:flex; flex-direction:column; gap:1px; }
.lt-spike-steps li::before{ content:""; position:absolute; left:-21px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--lt-avg); border:2px solid var(--lt-spike-bg); }
.lt-spike-steps li.is-flag::before{ background:var(--lt-flag); }
.lt-spike-steps li.is-up::before{ background:var(--danger); }
.lt-spike-steps i{ font-style:normal; font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--text-muted); text-transform:uppercase; }
.lt-spike-steps b{ font-size:15px; line-height:1.4; color:var(--text); font-weight:600; }
.lt-spike-go{ min-height:42px; font-size:14.5px; }
.lt-spike-go svg{ vertical-align:-3px; }