/* R3 — My learning walks (/my-walks; src/pages/my_walks.rs).
   Prototype: pigeonhole-app.html ?page=walks. Builds on the tl- system in
   teachloop.css (PageHeading, .tl-tabs/.tl-folder, .tl-slips, .tl-card.white +
   .tl-tape, .tl-kv, .tl-letter, .tl-stepbox, .tl-journal, .tl-stamp). The legacy
   .mw-* rules in index.html belong to the old layout; the names below avoid them
   except .mw-detail (scroll margin) and .mw-text (pre-wrap), which are kept. */

.mw-page { max-width: 1120px; margin: 0 auto; }
.mw-page .tl-ph { margin-top: 6px; }

/* Folder-divider tabs: mini stickers + big counts. */
.mw-page .tl-tab { font-weight: 500; }
.mw-page .tl-tab img { flex: none; display: block; }
.mw-stk-on { transform: rotate(-7deg); }
.mw-stk-done { transform: rotate(6deg); }
.mw-folder { margin-bottom: 32px; }
.mw-folder .mw-cols { margin-top: 0; }
.mw-empty { margin: 0; font-size: 15px; opacity: .75; }

/* Walks as slips: whole slip is the pick button. */
.mw-slips { margin-bottom: 0; }
.mw-slips button.tl-slip {
    width: 100%; text-align: left; font: inherit; color: var(--tl-ink);
    border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0;
    -webkit-appearance: none; appearance: none;
}
.mw-slips button.tl-slip:hover { background: var(--tl-white); }
.mw-slips .tl-slip-row { flex-wrap: wrap; }
.mw-slip-body { flex: 1 1 150px; min-width: 0; }
.mw-slip-body > span { display: block; overflow-wrap: anywhere; }
.mw-slips .tl-stamp { flex: none; }

/* Detail: a taped white card. */
.mw-detail { margin-bottom: 0; min-width: 0; scroll-margin-top: 72px; }
.mw-detail p { margin: 0; }
.mw-title { font: 400 26px/1.15 var(--tl-font-slab); letter-spacing: 0; font-synthesis: none; margin: 8px 0 2px; overflow-wrap: anywhere; }
.mw-rate { margin-left: 6px; white-space: nowrap; }
.mw-kv-note { margin-top: 3px; opacity: .75; }
.mw-shared.tl-hand { padding: 0; font-size: 19px; opacity: .85; margin-top: 4px; }
.mw-small { font-size: 14px; }
.mw-none { margin-top: 18px !important; font-size: 14px; opacity: .7; }
.mw-err { margin: 8px 0 0 !important; font-size: 14px; }

/* Feedback as a ruled letter. */
.mw-letter .mw-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Step agreed / next action boxes (mustard tag via .tl-lab). */
.mw-detail .tl-stepbox { padding-top: 20px; }
.mw-step-text.tl-big { font-size: 20px; line-height: 1.4; }
.mw-said { line-height: 1.5; }
.mw-said + .mw-said { margin-top: 6px !important; }
.mw-hand { font: 700 22px/1.2 var(--tl-font-hand); color: #24408d; white-space: pre-wrap; overflow-wrap: anywhere; }
.mw-next .tl-acts { margin-top: 12px; }

/* Walker's notes on the ruled journal. */
.mw-notes-lab { margin-top: 22px; }
.mw-flab-aside { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .85; }
.mw-detail .tl-journal { margin-top: 2px; }
.mw-detail .tl-n { overflow-wrap: anywhere; }
.mw-th { display: flex; align-items: center; justify-content: center; height: 34px; }
.mw-th.up { color: var(--tl-sage-text); }
.mw-th.down { color: var(--tl-coral-text); }

/* Reply control: a handwritten ruled box on white. */
.mw-reply { margin-top: 12px; }
.mw-reply .mw-said { margin-bottom: 8px !important; }
.mw-reply textarea.tl-ruled {
    min-height: 103px; padding: 0 10px; background-color: var(--tl-white);
    box-shadow: inset 0 0 0 1px var(--tl-rule);
}
.mw-reply textarea.tl-ruled::placeholder { color: #b3c0d6; font-style: italic; }

/* Mobile: one column (tl-cols already collapses at 860px); tighter paper. */
@media (max-width: 600px) {
    .mw-folder.tl-folder { padding: 14px; }
    .mw-detail.tl-card { padding: 24px 18px 22px; }
    .mw-detail .tl-kv { grid-template-columns: 1fr; gap: 2px 0; }
    .mw-detail .tl-kv dd { margin-bottom: 8px; }
    .mw-detail .tl-letter { padding: 16px 16px 18px; }
    .mw-page .tl-tab { padding: 9px 12px 8px; font-size: 14px; gap: 8px; }
}