/* R5 — Add a learning walk (pages/learning_walk.rs, prototype ?page=walk).
   The form is a paper sheet (.tl-sheet) on a kraft clipboard (.tl-clip); fields
   use the tl- system (.tl-field / .tl-inp / .tl-chips / .tl-pre / .tl-rate /
   .tl-priv). Page classes are prefixed `wf-`.

   Also here: the lesson journal (`.tlj`, `.lw-journal…`) rendered by
   TimelineJournal in pages/walk_timeline.rs — shared with the Advanced Learning
   Walk page, so those rules are NOT scoped to .wf-page. */

/* ── page ─────────────────────────────────────────────────────────────── */
.wf-page { max-width: 860px; padding-bottom: 56px; }
.wf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.wf-head .wf-adv { margin-bottom: 8px; }
.wf-clip { margin-top: 34px; }
.wf-sheet { color: var(--tl-ink); }
.wf-sheet > .tl-acts { margin-top: 26px; }
.wf-acts-note { font-size: 13.5px; opacity: .7; }
.wf-msg { margin: 12px 0 0; }
.wf-loading { margin: -6px 0 18px; font-size: 14px; opacity: .65; }

/* Colleague combobox, drawn as a tl input with a paper dropdown. */
.wf-combo .combo-input.tl-inp { padding-right: 44px; }
.wf-combo .combo-toggle { top: 2px; right: 2px; bottom: 2px; color: var(--tl-ink); }
.wf-combo .combo-menu {
    background: var(--tl-white); border: 1.5px solid var(--tl-ink); border-radius: 4px;
    box-shadow: 0 12px 24px -12px rgba(29,36,72,.55);
}
.wf-combo .combo-item:hover, .wf-combo .combo-item.is-sel { background: #eef5f4; color: var(--tl-ink); }

/* What the colleague is working on: a small note pinned under the picker. */
.wf-context {
    position: relative; background: #fffdf6; border: 1.5px dashed var(--tl-dash);
    padding: 12px 14px; margin: -4px 0 22px; font-size: 14.5px; display: grid; gap: 6px;
}
.wf-ctx-row { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; }
.wf-ctx-row > b {
    font: 600 11.5px/1.3 var(--tl-font-body); text-transform: uppercase; letter-spacing: .08em;
    opacity: .6; min-width: 196px;
}
.wf-ctx-none { font-size: 14px; opacity: .7; }

/* Class: timetable pill + Change, or the three fields. */
.wf-pre-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-pre-row .tl-pre small { margin-left: 2px; }
.wf-change {
    background: none; border: 0; padding: 2px 0; font: inherit; font-size: 14px; color: var(--tl-ink);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .75;
}
.wf-change:hover { opacity: 1; }
.wf-class3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; }

/* Date + time picker side by side. */
.wf-when { align-items: stretch; }
.wf-when > .tl-field { display: flex; flex-direction: column; }
.wf-time.time-pick {
    background: var(--tl-white); border: 1.5px solid var(--tl-ink); border-radius: 4px;
    padding: 10px 14px 8px; gap: 10px;
}
.wf-time .time-pick-readout { font-family: var(--tl-font-slab); color: var(--tl-ink); font-size: 26px; }
.wf-time .time-pick-period {
    background: transparent; color: var(--tl-teal); border: 1.5px solid currentColor; border-radius: 0;
    font: 600 10.5px/1 var(--tl-font-body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px;
}
.wf-time .time-slider { background: var(--tl-rule); }
.wf-time .time-slider::-moz-range-track { background: var(--tl-rule); }
.wf-time .time-slider::-webkit-slider-thumb { background: var(--tl-ink); }
.wf-time .time-slider::-moz-range-thumb { background: var(--tl-ink); }
.wf-time .time-slider:focus { box-shadow: none; }
.wf-time .time-slider:focus-visible { outline: 3px dashed var(--tl-coral); outline-offset: 4px; }

/* Lesson phase: a stepped slider through the lesson. The range runs from the
   first label's centre to the last's (each label is 1/6 wide, the thumb 24px),
   so every stop sits over its label. --pct (0–100) fills the track up to it. */
.wf-phase {
    background: var(--tl-white); border: 1.5px solid var(--tl-ink); border-radius: 4px;
    padding: 14px 6px 8px;
}
.wf-phase-range {
    -webkit-appearance: none; appearance: none; display: block;
    width: calc(100% * 5 / 6 + 24px); margin: 0 0 6px calc(100% / 12 - 12px);
    height: 8px; padding: 0; min-height: 0; border: 0; border-radius: 999px; cursor: pointer;
}
/* Repeated on :focus — a global input:focus rule would otherwise blank the track. */
.wf-phase .wf-phase-range, .wf-phase .wf-phase-range:focus {
    background: linear-gradient(to right, var(--tl-teal) var(--pct), var(--tl-rule) var(--pct));
}
.wf-phase-range:focus { outline: none; box-shadow: none; }
.wf-phase-range:focus-visible { outline: 3px dashed var(--tl-coral); outline-offset: 6px; }
.wf-phase-range::-moz-range-track { height: 8px; border-radius: 999px; background: transparent; }
.wf-phase-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--tl-ink); border: 3px solid var(--tl-white); box-shadow: 0 1px 3px rgba(29,36,72,.45); cursor: grab;
}
.wf-phase-range::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
    background: var(--tl-ink); border: 3px solid var(--tl-white); box-shadow: 0 1px 3px rgba(29,36,72,.45); cursor: grab;
}
.wf-phase.unset .wf-phase-range, .wf-phase.unset .wf-phase-range:focus { background: var(--tl-rule); }
.wf-phase.unset .wf-phase-range::-webkit-slider-thumb { opacity: 0; }
.wf-phase.unset .wf-phase-range::-moz-range-thumb { opacity: 0; }
.wf-phase-stops { display: grid; grid-template-columns: repeat(6, 1fr); }
.wf-phase-stop {
    display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0;
    padding: 4px 0; border: 0; border-radius: 4px; background: none; color: var(--tl-ink);
    font: inherit; text-align: center; cursor: pointer; opacity: .6;
}
.wf-phase-stop b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.wf-phase-stop small { font-size: 11.5px; line-height: 1.2; }
.wf-phase-stop:hover { opacity: 1; }
.wf-phase-stop.on { opacity: 1; }
.wf-phase-stop.on b { font-weight: 700; }
/* Too narrow for six two-line labels: show only the short half ("I Do") under
   each stop and the full selected phase above the track. */
.wf-phase { container-type: inline-size; }
.wf-phase-now { display: none; margin: 0 6px 10px; font-size: 14px; font-weight: 600; text-align: center; }
.wf-phase.unset .wf-phase-now { font-weight: 400; opacity: .6; }
@container (max-width: 460px) {
    .wf-phase-now { display: block; }
    .wf-phase-stop b { display: none; }
    .wf-phase-stop small { font-size: 11.5px; }
    .wf-phase-stop.on small { font-weight: 700; }
}

/* Their action step + look-fors: stamp ratings. */
.wf-step-text { font-size: 15px; margin: 0; }
.wf-step-proposed { font-size: 14.5px; margin: 0; opacity: .75; }
.wf-missing { margin: 16px 0 0; }
.wf-lookfors .wf-lf-intro { font-size: 14px; margin: 0 0 6px; opacity: .75; }
.wf-lf-row {
    display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
    padding: 10px 0; border-top: 1px dashed var(--tl-dash); font-size: 14.5px;
}
.wf-lf-row:first-of-type { border-top: 0; }
.wf-lf-row .tl-rate { margin-top: 0; }
.wf-lf-row .tl-rate button { padding: 5px 9px; font-size: 10.5px; }
.wf-sheet .tl-rate button:hover { box-shadow: 0 0 0 1px currentColor inset; }
.wf-lookfors .lf-tip strong { color: var(--tl-mustard); }

/* "Learning walks are now recorded by leads." (auth::RequireCanRecordWalk). */
.walks-by-leads.card {
    max-width: 560px; margin: 48px auto; padding: 26px 28px; background: var(--tl-paper); border: 0; border-radius: 0;
    border-left: 10px solid var(--tl-sage); box-shadow: 0 10px 24px -12px rgba(29,36,72,.45); font-size: 15px;
}
.walks-by-leads a { color: var(--tl-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── lesson journal (TimelineJournal: walk form + Advanced Learning Walk) ── */
.tlj { display: flex; flex-direction: column; gap: 10px; }
.tlj-help { margin: 0; font-size: 13.5px; opacity: .7; }
.tlj-hint { margin: 0; font: 700 19px/1.25 var(--tl-font-hand); color: var(--tl-coral-text); }

.lw-journal {
    background-color: #fcf8ee; border: 1px solid #ddd6c8; border-radius: 0;
    box-shadow: 0 6px 14px -10px rgba(29,36,72,.45);
    background-image: repeating-linear-gradient(#fcf8ee 0, #fcf8ee 33px, var(--tl-rule) 33px, var(--tl-rule) 34px);
}
.lw-journal .lw-journal-time { font-family: var(--tl-font-body); font-size: 12px; color: var(--tl-ink); opacity: .55; }
.lw-journal .lw-journal-note { font-family: var(--tl-font-hand); font-weight: 500; font-size: 22px; color: #24408d; }
.lw-journal .lw-journal-note::placeholder { color: #b3c0d6; }
.lw-journal .lw-journal-note:focus-visible { outline: 2px dashed var(--tl-coral); outline-offset: -2px; }
.lw-thumb { color: rgba(29,36,72,.38); border-radius: 4px; }
.lw-thumb:hover { color: var(--tl-ink); }
.lw-thumb.on-up { color: var(--tl-sage-text); background: rgba(122,157,98,.16); }
.lw-thumb.on-down { color: var(--tl-coral-text); background: rgba(228,111,85,.14); }
.lw-journal-del:focus-visible { opacity: 1; }
.lw-journal-del:hover { color: var(--tl-coral-text); }
/* The entry line's ＋ (prototype .jl.new .th). */
.tlj-add {
    flex: none; align-self: center; margin: 0 8px; width: 30px; height: 26px; padding: 0;
    border: 1.5px solid var(--tl-ink); border-radius: 4px; background: var(--tl-white); color: var(--tl-ink);
    font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer;
}
.tlj-add:hover { background: var(--tl-mustard); }

/* Quick-insert chips (general, phase-specific, focus look-fors). */
.tlj-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tlj-chip {
    border: 1.5px solid rgba(29,36,72,.35); background: var(--tl-white); color: var(--tl-ink);
    border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.tlj-chip:hover { border-color: var(--tl-ink); }
.tlj-chip.is-phase { border-style: dashed; border-color: var(--tl-mustard-text); background: #fbf3df; }
.tlj-chip.is-tech { border-color: var(--tl-teal); background: #eef5f4; }
.tlj-lf { display: flex; flex-direction: column; gap: 6px; }
.tlj-lf-k { font: 600 11.5px/1.2 var(--tl-font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--tl-teal); }

/* ── mobile: single column ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .wf-page { padding: 0 16px 40px; }
    .wf-clip { padding: 38px 8px 8px; }
    .wf-sheet { padding: 22px 16px; }
    .wf-class3 { grid-template-columns: 1fr; gap: 0; }
    .wf-ctx-row > b { min-width: 0; }
    .wf-head .wf-adv { margin-bottom: 0; }
}

/* Colleague picker: "(Seen 3 days ago)" after each name. */
.wf-seen { margin-left: 4px; font-size: 13px; opacity: .6; }

/* "When can they see you for feedback?": recent-note chips + offer my feedback slots. */
.wf-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.wf-recent-k { font-size: 13px; opacity: .65; }
.wf-recent-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 5px 11px; }
.tl-field label.tl-check.wf-offer { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 400 14.5px/1.4 var(--tl-font-body); text-transform: none; letter-spacing: 0; color: var(--tl-ink); opacity: 1; cursor: pointer; }
/* Preview of the feedback-slot dates the walked teacher will be offered. */
.wf-slot-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0 32px; opacity: .55; }
.wf-slot-preview.on { opacity: 1; }
.wf-slot-chip { font-size: 13px; padding: 4px 10px; border: 1.5px dashed var(--tl-coral); border-radius: 999px; background: #fff4e0; color: var(--tl-ink); }