/* kit/walk.css - quiet floor styles for the kit pieces (flash, proposals, notes, default caption/rail/transport). Mockups restyle freely; load AFTER tokens.css. */
.mq-prop{position:relative}.m-tag{display:inline-block;margin:0 6px;padding:1px 6px;font:600 10px/1.5 var(--ac-font-mono);letter-spacing:.12em;border:1px solid var(--ac-rule);border-radius:var(--ac-r-sm);color:var(--ac-ink-2)}
.m-tag[data-tag="NEW"]{color:var(--ac-alert-ink);background:var(--ac-alert-tint);border-color:var(--ac-alert-ink)}
.mq-prop [data-show]{min-height:32px;padding:0 12px;font:600 11px/1 var(--ac-font-mono);letter-spacing:.12em;color:var(--ac-ink-strong);background:var(--ac-panel-solid);border:1px solid var(--ac-rule);border-radius:var(--ac-r-sm);cursor:pointer}
.mq-prop [data-show]:hover{border-color:var(--ac-accent)}.mq-prop [data-show]:focus-visible{outline:2px solid var(--ac-focus);outline-offset:2px}
@media (max-width:700px){.mq-prop [data-show]{min-height:44px}}
@keyframes m-flash { from { opacity: .55; } to { opacity: 0; } }
[data-flash]::after { content: ""; position: absolute; inset: 0; background: var(--m-flash, rgba(80,140,255,.35)); pointer-events: none; opacity: 0; animation: m-flash 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { [data-flash]::after { animation: none; } }
/* ---- proposals + notes (sit quietly at the end of the page) ---- */
.mq-props,.mq-notes{max-width:var(--ac-max);margin:0 auto;padding:24px var(--ac-gutter);color:var(--ac-ink-2);font:400 14px/1.5 var(--ac-font-ui)}
.mq-props{border-top:1px solid var(--ac-rule);padding-top:32px}
.mq-h{font:600 11px/1.2 var(--ac-font-mono);letter-spacing:.18em;color:var(--ac-ink-3);margin:0 0 12px}
.mq-props ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.mq-prop{padding:10px 12px;background:var(--ac-panel);border:1px solid var(--ac-panel-edge);border-radius:var(--ac-r);opacity:.72}.mq-prop.is-here{opacity:1;border-color:var(--ac-rule);box-shadow:inset 2px 0 0 var(--ac-accent)}.mq-prop b{color:var(--ac-ink-strong);font-weight:600}
.mq-notes{padding-bottom:calc(var(--mq-bar-h) + 40px)} /* clears the pack.py bar */
.mq-notes details{border:1px solid var(--ac-rule);border-radius:var(--ac-r);background:var(--ac-panel-solid)}
.mq-notes summary{cursor:pointer;padding:12px 14px;font:600 11px/1.2 var(--ac-font-mono);letter-spacing:.18em;color:var(--ac-ink-2);min-height:44px;display:flex;align-items:center}
.mq-notes dl{margin:0;padding:4px 16px 16px;display:grid;grid-template-columns:200px 1fr;gap:12px 20px}.mq-notes dt{font:600 11px/1.5 var(--ac-font-mono);letter-spacing:.14em;color:var(--ac-accent)}.mq-notes dd{margin:0}.mq-notes p{margin:0;max-width:72ch}.mq-notes ul{margin:0;padding-left:18px}.mq-notes h4{font:600 12px/1.4 var(--ac-font-mono);letter-spacing:.1em;margin:0 0 4px;color:var(--ac-ink-strong)}
.mq-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.mq-notes dl{grid-template-columns:1fr;gap:4px}.mq-two{grid-template-columns:1fr}}
.ac-field{position:fixed;inset:0;z-index:-1;background:var(--ac-field);pointer-events:none}
/* ---- default caption: <p class="w-cap"> words as <span class="w">; past/now/future classes set by WalkUI.caption ---- */
.w-cap{font:400 clamp(1rem,1.6vw,1.375rem)/1.5 var(--ac-font-ui);color:var(--ac-ink-2);margin:0;max-width:60ch}
.w-cap .w{transition:color 120ms linear}.w-cap .w.past{color:var(--ac-ink-strong)}.w-cap .w.now{color:var(--ac-accent);font-weight:600}
html[data-captions="0"] .w-cap{visibility:hidden}
/* ---- default page rail: 3 pages + ride progress. <nav class="w-rail" aria-label="The ride, 3 pages"> ---- */
.w-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none}
.w-rail li{margin:0}.w-rail button{width:100%;min-height:44px;text-align:left;padding:6px 10px;background:var(--ac-panel-solid);color:var(--ac-ink-2);border:1px solid var(--ac-rule);border-radius:var(--ac-r);cursor:pointer;font:600 11px/1.25 var(--ac-font-mono);letter-spacing:.08em;text-transform:uppercase;position:relative;overflow:hidden}
.w-rail button small{display:block;font-weight:500;color:var(--ac-ink-3);letter-spacing:.14em}
.w-rail button[aria-current="page"]{color:var(--ac-ink-strong);border-color:var(--ac-accent-rim);box-shadow:inset 0 2px 0 var(--ac-accent-fill)}
.w-rail .w-fill{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ac-accent-fill);transform-origin:left;transform:scaleX(0)}
.w-ride{height:3px;background:var(--ac-hair);position:relative;margin-top:6px}.w-ride i{position:absolute;inset:0;background:var(--ac-accent-fill);transform-origin:left;transform:scaleX(0)}
/* ---- default transport ---- */
.w-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.w-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;background:var(--ac-panel-solid);color:var(--ac-ink-strong);border:1px solid var(--ac-edge);border-radius:var(--ac-r);font:600 11px/1 var(--ac-font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.w-btn[aria-pressed="true"]{border-color:var(--ac-accent-rim);box-shadow:inset 0 -2px 0 var(--ac-accent-fill)}
.w-play{background:var(--ac-accent-fill);color:var(--ac-on-fill);border-color:var(--ac-accent-rim)}.w-play:hover{background:var(--ac-accent-fill-hover)}
.w-time{font:500 12px/1 var(--ac-font-mono);color:var(--ac-ink-3);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.w-toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:var(--ac-float);color:var(--ac-ink-strong);border:1px solid var(--ac-rule);padding:8px 12px;border-radius:var(--ac-r);font:500 12px/1.3 var(--ac-font-mono);z-index:50}