/* ==========================================================================
   R2 — walks-only Home (pages/walks_home.rs). Prototype: pigeonhole-app.html
   ?page=home. Builds on the shared tl-* classes in teachloop.css; everything
   here is scoped under .hm-home (the page root) or .inbox-slips (the inbox
   rendered with `InboxList slips=true`, Home only), so no other page moves.
   ========================================================================== */

/* The page sits in .main-content (1080px); widen to the prototype's 1120 wrap. */
.main-content:has(.hm-home) { max-width: 1120px; }
.hm-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* main-content's 32px top padding + 12 = the prototype's 44px. */
.hm-home .hm-cols { margin-top: 12px; }
.hm-home .hm-welcome + .hm-cols { margin-top: 30px; }
.hm-col { min-width: 0; }

/* Buttons at the prototype's size (legacy .btn-sm is smaller); ghosts are
   see-through, so they sit on paper (or the board) like the prototype. */
.hm-home .btn { padding: 9px 15px; font-size: 14.5px; line-height: 1.3; }
.hm-home .btn:not(.btn-primary):not(.btn-must) { background: transparent; }
.hm-home .btn:not(.btn-primary):not(.btn-must):hover { background: rgba(255,255,255,.6); }
.hm-home a.btn:hover { text-decoration: none; }
.hm-muted { margin: 0; font-size: 14.5px; opacity: .72; line-height: 1.5; }

/* ── welcome (first login) ─────────────────────────────────────────────── */
.hm-welcome { margin: 12px 0 0; }
.hm-welcome-lead { margin: 0 0 12px; font-size: 17px; line-height: 1.5; }
.hm-pointers { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.55; }
.hm-pointers li { margin: 4px 0; }

/* ── action step: taped index card ─────────────────────────────────────── */
.hm-step .tl-big { color: var(--tl-ink); }
.hm-step-empty { margin: 0; font-size: 17px; line-height: 36px; }
.hm-next { margin: 12px 0 0; font-size: 14.5px; }
.hm-next .tl-mini { margin-right: 6px; }
.hm-step-acts { margin-top: 18px; }
/* "I think I've got this" (StepClaim's direct-child button) reads as the ghost
   next to the navy "Reflect on this step", as in the prototype. Its form's
   Send button is nested, so it stays navy. */
.hm-step-acts > button.btn-primary { background: transparent; color: var(--tl-ink); border-color: var(--tl-ink); }
.hm-step-acts > button.btn-primary:hover { background: var(--tl-paper); }
/* Claim waiting: StepClaim's badge as a teal stamp. */
.hm-step-acts > .badge {
    background: none; border: 1.5px solid currentColor; border-radius: 0; color: var(--tl-teal);
    font: 600 10.5px/1.25 var(--tl-font-body); letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 7px; white-space: normal; transform: rotate(-1.5deg);
}
.hm-step-acts .hm-form { flex: 1 1 100%; }
.hm-step-acts .hm-form textarea, .hm-step-acts .hm-form input[type="text"] {
    background: var(--tl-white); border: 1.5px solid var(--tl-ink); border-radius: 4px;
}

/* ── reflections / drop-ins: dated lines ───────────────────────────────── */
.hm-shared { margin-left: 8px; font-size: 9.5px; padding: 2px 5px; vertical-align: 1px; letter-spacing: .08em; }
.hm-saw { display: block; font-size: 13.5px; opacity: .7; margin-top: 2px; }

/* ── My learning walks: people rows ────────────────────────────────────── */
.hm-walks .tl-av img { display: block; }
.hm-walks .hm-shoe { transform: rotate(-7deg); }
.hm-walks .tl-who { overflow-wrap: anywhere; }
.hm-walks .tl-stamp { flex: none; }

/* ── right column: quick actions + "Your pigeonhole" ───────────────────── */
.hm-home .tl-qa .btn { padding: 12px 14px; justify-content: flex-start; }
.hm-qa .btn-must { grid-column: 1 / -1; }
/* Without "+ Add learning walk" the two ghosts share the row. */
.hm-qa .btn:first-child:not(.btn-must) { grid-column: auto; }
.hm-pigeon-head { margin: 6px 0 22px; }

/* ── the inbox as slips (InboxList slips=true) ─────────────────────────────
   .tl-slips/.tl-slip (teachloop.css) give the paper, stub colour by kind
   (k-walk sky, k-feedback teal, k-give coral, k-claim mustard, k-dropin sage),
   the alternating tilt and the corner stamp. Here the legacy row inside is
   flattened: no avatar or rules, text first, then full-size buttons. */
.inbox-slips .inbox-empty { margin: 0; font-size: 15px; opacity: .75; }
.inbox-slips .inbox-row { display: block; padding: 0; border-top: 0; }
.inbox-slips .inbox-avatar { display: none; }
.inbox-slips .inbox-title {
    font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--tl-ink);
    -webkit-line-clamp: 3; line-clamp: 3;
}
.inbox-slips .inbox-detail {
    font-size: 14px; line-height: 1.45; color: var(--tl-ink); opacity: .78; margin-top: 3px;
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
/* The corner stamp already says "You owe" / "Reply". */
.inbox-slips .inbox-detail .badge-fail { display: none; }
.inbox-slips .inbox-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    padding-left: 0; margin-top: 14px; white-space: normal;
}
.inbox-slips .btn { padding: 9px 15px; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.inbox-slips .btn:not(.btn-primary):not(.btn-must) { background: transparent; }
/* Text-link actions (Discuss, Keep going, Dismiss, Cancel) as ghost buttons. */
.inbox-slips .inbox-link {
    display: inline-flex; align-items: center; padding: 9px 15px; border: 1.5px solid var(--tl-ink);
    border-radius: var(--radius-sm, 4px); background: transparent; color: var(--tl-ink);
    font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.3; text-decoration: none;
}
.inbox-slips .inbox-link:hover { background: rgba(255,255,255,.6); color: var(--tl-ink); }
.inbox-slips .inbox-sub { padding: 14px 0 0; }
.inbox-slips .inbox-sub textarea { background: var(--tl-white); border: 1.5px solid var(--tl-ink); border-radius: 4px; }
/* Straighten a slip while it's being typed in. */
.inbox-slip:focus-within { transform: none; }

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .hm-home .tl-card { padding: 26px 20px 24px; }
    .hm-home .tl-lines { margin: 0 -20px; padding: 0 20px 1px; }
}

/* Clickable rows on Home (walks → My learning walks, drop-ins → Reflections). */
a.hm-row-link{display:flex;color:inherit;text-decoration:none;border-radius:4px;margin:0 -8px;padding-left:8px;padding-right:8px;transition:background .12s}
a.tl-line.hm-row-link{display:block}
a.hm-row-link:hover{background:rgba(47,127,131,.08);text-decoration:none}
a.hm-row-link:hover .tl-who,a.hm-row-link:hover time+*{text-decoration:underline;text-underline-offset:3px}
a.hm-row-link:focus-visible{outline:3px dashed var(--coral, #e46f55);outline-offset:2px}

/* Quick actions: the secondary two are teal-tinted (Ben: they looked unstyled as plain outlined links). */
/* Must out-rank `.hm-home .btn:not(.btn-primary):not(.btn-must)` (transparent) above. */
.hm-home .hm-qa a.btn:not(.btn-primary):not(.btn-must){background:#d8ebe9;border:1.5px solid #2f7f83;color:#1b3a3d;font-weight:600;text-decoration:none;box-shadow:0 2px 0 rgba(29,36,72,.12)}
.hm-home .hm-qa a.btn:not(.btn-primary):not(.btn-must):hover{background:#c4e0dd;border-color:#21474b;color:#13292b;text-decoration:none}
.hm-qa a.btn{display:flex;align-items:center;text-decoration:none}
.hm-qa a.btn-must{text-decoration:none;color:var(--ink)}

/* Walk reply: the walker's offered feedback slots, tap to put one in the message. */
.inbox-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.inbox-slots-k { font-size: 13px; opacity: .7; }
.inbox-slot { font-size: 13px; padding: 5px 11px; }