/* ============================================================
   door-ask.css — Door C, the Question Doors (/ask/).
   task-038 Phase 2; productionises the task-034 concept-c mock.

   Token discipline (docs/design-system/palette.md): every colour
   consumes a --ui-*/--color-* token from baseof.html. The only
   values minted here are door-scoped derivations (shadow/hatch
   alphas) that baseof does not define — rgba over the palette's
   ink values, same precedent as --ui-border. Zero raw hex.
   Light + dark ride the baseof token swap; the dark block below
   only re-derives the alpha values.

   Chamfer grammar (docs/specs/design-system-chamfer.md):
   containers = 4 corners (--chamfer-container-*),
   affordances = 2 diagonal corners (--chamfer-affordance-*).
   ============================================================ */

:root {
    --ask-shadow: rgba(26, 22, 20, 0.10);
    --ask-shadow-soft: rgba(26, 22, 20, 0.05);
    --ask-hatch: rgba(26, 22, 20, 0.08);
    --ask-font-data: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
    :root {
        --ask-shadow: rgba(0, 0, 0, 0.5);
        --ask-shadow-soft: rgba(0, 0, 0, 0.3);
        --ask-hatch: rgba(255, 255, 255, 0.09);
    }
}

/* ---------- scope resets (baseof gives headings/p site margins) ---------- */
.ask-wrap { max-width: 46rem; margin: 0 auto; padding: 0 1rem 7rem; }
.ask-wrap h1, .ask-wrap h2, .ask-wrap h3 {
    margin: 0; color: var(--ui-text);
    font-weight: 400; letter-spacing: -0.02em; line-height: 1.2;
}
.ask-wrap p { margin: 0; font-weight: 300; }
.ask-wrap button, .ask-plate-chip, .ask-drawer button {
    font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.ask-wrap :focus-visible, .ask-drawer :focus-visible, .ask-plate-chip:focus-visible, .ask-pmenu :focus-visible {
    outline: 2px solid var(--ui-focus); outline-offset: 2px;
}
.ask-mono { font-family: var(--ask-font-data); }
.ask-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ask-faded { color: var(--color-ink-faded); }
.ask-small { font-size: 0.875rem; }
.ask-kicker {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--color-ink-faded); margin: 0 0 0.6rem;
}

/* ---------- cards ---------- */
.ask-card {
    clip-path: var(--chamfer-container-md);
    background: var(--ui-paper);
    padding: 1rem 1.1rem;
    filter: drop-shadow(0 1px 1.5px var(--ask-shadow)) drop-shadow(0 3px 8px var(--ask-shadow-soft));
}
.ask-card-lg { padding: 1.25rem; }
.ask-boot { margin-top: 1.5rem; }
.ask-err { border-left: 3px solid var(--color-action-terracotta); margin-top: 1.5rem; }
.ask-hole { border-left: 3px solid var(--color-action-terracotta); }
.ask-aside-card { border-left: 3px solid var(--ui-border-strong); margin-top: 1.5rem; }
.ask-unk-lead { font-size: 1.35rem; font-weight: 400; letter-spacing: -0.02em; }
.ask-gap { margin-top: 0.5rem; }
.ask-gap-sm { margin-top: 0.6rem; }

/* ---------- rail dots (data marks: the 7-colour ramp, never chrome) ------ */
.ask-dot {
    width: 0.62rem; height: 0.62rem; clip-path: var(--chamfer-container-sm);
    display: inline-block; flex: none; transform: translateY(-1px);
}
.ask-dot[data-rail="in-it"] { background: var(--color-chart-cast-iron); }
.ask-dot[data-rail="from"] { background: var(--color-chart-cedar); }
.ask-dot[data-rail="planet"] { background: var(--color-chart-patina); }
.ask-dot[data-rail="becomes"] { background: var(--color-chart-fig); }

/* ---------- front door ---------- */
.ask-hero { padding: 2rem 0 1.25rem; }
.ask-hero h1 { font-size: clamp(1.9rem, 6vw, 2.625rem); }
.ask-hero .ask-lede { font-weight: 500; font-size: 1.25rem; line-height: 1.6; margin-top: 0.6rem; max-width: 36rem; }
.ask-hero .ask-lede .ask-q { color: var(--ui-logo); font-weight: 600; }
.ask-hero-h { display: flex; gap: 0.6rem; align-items: baseline; }
.ask-hero-note { margin-top: 0.5rem; }
.ask-chiprow { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

.ask-doors { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin-top: 1.1rem; }
@media (min-width: 640px) { .ask-doors { grid-template-columns: 1fr 1fr; } }
.ask-door {
    text-align: left;
    clip-path: var(--chamfer-affordance-md);
    background: var(--ui-paper);
    padding: 1.05rem 1.1rem 0.95rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    filter: drop-shadow(0 1px 1.5px var(--ask-shadow)) drop-shadow(0 3px 8px var(--ask-shadow-soft));
    transition: transform 0.15s ease;
    border-left: 3px solid transparent;
}
.ask-door:hover, .ask-door:focus-visible { transform: translateY(-2px); border-left-color: var(--color-action-amber); }
.ask-door .ask-door-q {
    font-size: 1.35rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.25;
    display: flex; gap: 0.55rem; align-items: baseline;
}
.ask-door .ask-door-sub { color: var(--color-ink-faded); font-size: 0.95rem; }
.ask-door .ask-door-truth {
    font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-ink-faded); font-weight: 600; margin-top: 0.25rem;
}

.ask-orline { display: flex; align-items: center; gap: 0.8rem; color: var(--color-ink-faded); font-size: 0.875rem; margin: 1.6rem 0 0.7rem; }
.ask-orline::before, .ask-orline::after { content: ""; height: 1px; background: var(--ui-border-strong); flex: 1; }

.ask-colophon {
    margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--ui-border);
    color: var(--color-ink-faded); font-size: 0.875rem;
}

/* ---------- picker ---------- */
.ask-picker { position: relative; }
.ask-picker .ask-inwrap { clip-path: var(--chamfer-container-md); background: var(--ui-border-strong); padding: 1px; }
.ask-picker input {
    width: 100%; box-sizing: border-box; clip-path: var(--chamfer-container-md);
    border: 0; background: var(--ui-paper); color: var(--ui-text);
    font: inherit; font-size: 1rem; padding: 0.7rem 0.9rem;
}
.ask-picker input::placeholder { color: var(--color-ink-faded); }
.ask-opts {
    list-style: none; margin: 0.45rem 0 0; padding: 0.3rem;
    clip-path: var(--chamfer-container-md); background: var(--ui-paper);
    filter: drop-shadow(0 2px 6px var(--ask-shadow));
    max-height: 17rem; overflow: auto;
}
.ask-opts li { padding: 0.45rem 0.6rem; display: flex; justify-content: space-between; gap: 0.6rem; cursor: pointer; clip-path: var(--chamfer-affordance-sm); }
.ask-opts li.ask-on, .ask-opts li:hover { background: var(--ui-bg); }
.ask-opts li .ask-lvl { color: var(--color-ink-faded); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; flex: none; padding-top: 0.2rem; }
.ask-opts .ask-opts-aside { color: var(--color-ink-faded); font-size: 0.875rem; padding: 0.5rem 0.6rem; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; cursor: default; }
.ask-opts .ask-opts-aside:hover { background: transparent; }

.ask-starters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.ask-starter {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
    clip-path: var(--chamfer-affordance-md); background: var(--ui-paper);
    padding: 0.6rem 0.85rem; text-align: left;
    filter: drop-shadow(0 1px 1.5px var(--ask-shadow-soft));
}
.ask-starter b { font-weight: 600; }
.ask-starter .ask-starter-ans { font-size: 0.8rem; color: var(--color-ink-faded); font-family: var(--ask-font-data); }

/* ---------- rail bar ---------- */
.ask-railbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--ui-bg);
    border-bottom: 1px solid var(--ui-border);
    margin: 0 -1rem; padding: 0.55rem 1rem;
    display: flex; gap: 0.45rem; align-items: center;
}
.ask-railbar .ask-tabs { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; flex: 1; }
.ask-railbar .ask-tabs::-webkit-scrollbar { display: none; }
.ask-tab {
    flex: none; display: inline-flex; align-items: center; gap: 0.45rem;
    clip-path: var(--chamfer-affordance-sm);
    background: var(--ui-paper); color: var(--color-ink-faded);
    padding: 0.42rem 0.75rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap;
    filter: drop-shadow(0 1px 1px var(--ask-shadow-soft));
}
.ask-tab[aria-selected="true"] { background: var(--ui-logo); color: var(--ui-on-brand); font-weight: 700; }

/* the small always-there chips (eating plan) */
.ask-veg-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
    clip-path: var(--chamfer-affordance-sm);
    background: var(--ui-paper);
    padding: 0.35rem 0.7rem; font-size: 0.875rem; font-weight: 600;
    filter: drop-shadow(0 1px 1px var(--ask-shadow-soft));
}
.ask-veg-chip[aria-pressed="true"] { background: var(--ui-logo); color: var(--ui-on-brand); }
/* The guidance diets' fixed honesty line (diets.js GUIDANCE_LINE). */
.ask-dietline { font-size: 0.78rem; color: var(--color-ink-faded); align-self: center; }
/* A diet the data can't yet be honest about: greyed, never hidden. */
.ask-poption[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- the profile chip: "answered under: …" (the live selector) ---- */
.ask-pchip {
    display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
    clip-path: var(--chamfer-affordance-sm);
    background: var(--ui-bg); color: var(--color-ink-faded);
    border: 1px solid var(--ui-border-strong);
    padding: 0.18rem 0.5rem; font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.ask-pchip:hover, .ask-pchip[aria-expanded="true"] { color: var(--ui-text); border-color: var(--ui-logo); }
.ask-pchip .ask-pchip-name { color: var(--ui-logo); }
.ask-pmenu {
    position: fixed; z-index: 70;
    min-width: 17rem; max-width: min(24rem, calc(100vw - 2rem));
    clip-path: var(--chamfer-container-md);
    background: var(--ui-paper);
    border: 1px solid var(--ui-border-strong);
    padding: 0.5rem;
    filter: drop-shadow(0 4px 14px var(--ask-shadow));
    display: flex; flex-direction: column; gap: 0.25rem;
    max-height: 60vh; overflow: auto;
}
.ask-pmenu .ask-pmenu-q { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--color-ink-faded); padding: 0.2rem 0.3rem 0; }
.ask-poption {
    display: flex; flex-direction: column; gap: 0.1rem; width: 100%; text-align: left;
    clip-path: var(--chamfer-affordance-sm);
    background: var(--ui-bg); color: var(--ui-text);
    border: 1px solid var(--ui-border);
    padding: 0.45rem 0.6rem; font: inherit; font-size: 0.875rem; cursor: pointer;
}
.ask-poption:hover { border-color: var(--ui-border-strong); }
.ask-poption[aria-checked="true"] { border-color: var(--ui-logo); }
.ask-poption[aria-checked="true"] b { color: var(--ui-logo); }
.ask-poption b { font-weight: 600; }
.ask-poption .ask-poption-vow { font-size: 0.78rem; color: var(--color-ink-faded); font-weight: 300; }

/* ---------- node view ---------- */
.ask-nodehead { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.2rem 0 0.9rem; }
.ask-photoslot {
    flex: none; width: 84px; height: 84px; clip-path: var(--chamfer-container-md);
    background:
        repeating-linear-gradient(45deg, var(--ask-hatch) 0 2px, transparent 2px 9px),
        var(--ui-paper);
    display: grid; place-items: center;
    color: var(--color-ink-faded); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.02em;
}
.ask-nodehead h1 { font-size: clamp(1.45rem, 5vw, 2rem); }
.ask-nodehead .ask-whatis { color: var(--color-ink-faded); font-size: 0.95rem; margin-top: 0.25rem; }
.ask-pathline { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.2rem 0 0.6rem; font-size: 0.875rem; }
.ask-pathline .ask-sep { color: var(--color-ink-faded); }
.ask-crumb {
    clip-path: var(--chamfer-affordance-sm); background: var(--ui-paper);
    padding: 0.22rem 0.55rem; font-weight: 600; font-size: 0.8rem;
    filter: drop-shadow(0 1px 1px var(--ask-shadow-soft));
}
.ask-crumb[aria-current="page"] { background: transparent; filter: none; color: var(--color-ink-faded); cursor: default; }

/* grounding chip mount (shell chrome, .gchip* styled in baseof) */
.ask-groundrow { margin: 0 0 1rem; }
.ask-groundrow .gchip-wrap { margin-top: 0; }

/* the rail-switch re-answer beat */
.ask-answer { animation: ask-reanswer 0.26s ease; }
@keyframes ask-reanswer { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ask-answer { animation: none; }
    .ask-door, .ask-mini, .ask-tab { transition: none; }
    .ask-door:hover, .ask-door:focus-visible, .ask-mini:hover, .ask-mini:focus-visible { transform: none; }
}

.ask-leadnum { font-family: var(--ask-font-data); font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.ask-leadnum small {
    font-size: 1rem; font-weight: 300; color: var(--color-ink-faded); letter-spacing: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ask-leadnum-sm { font-size: 1.6rem; }
.ask-answer h2 { font-size: 1.1rem; margin-bottom: 0.5rem; display: flex; align-items: baseline; gap: 0.5rem; }
.ask-whosays { font-size: 0.875rem; color: var(--color-ink-faded); margin-top: 0.7rem; }
.ask-pnote { font-size: 0.875rem; color: var(--color-ink-faded); margin-top: 0.45rem; border-left: 3px solid var(--ui-border-strong); padding-left: 0.6rem; }
.ask-pnote-null { border-left-color: var(--color-action-terracotta); }

.ask-tiles { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }
.ask-tile { clip-path: var(--chamfer-container-sm); background: var(--ui-bg); padding: 0.5rem 0.7rem; min-width: 7.5rem; }
.ask-tile .ask-tile-v { font-family: var(--ask-font-data); font-size: 1.05rem; }
.ask-tile .ask-tile-k { font-size: 0.75rem; color: var(--color-ink-faded); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* nutrition bars — width carried by a custom property; the width IS the data */
.ask-bars { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.6rem; align-items: center; margin-top: 0.8rem; }
.ask-bars .ask-bar-nm { font-size: 0.875rem; font-weight: 600; }
.ask-bars .ask-bar-tr { height: 0.62rem; clip-path: var(--chamfer-container-sm); background: var(--ui-bg); position: relative; }
.ask-bars .ask-bar-tr i { position: absolute; inset: 0 auto 0 0; clip-path: var(--chamfer-container-sm); width: var(--ask-w, 0%); }
.ask-bars .ask-bar-tr i[data-k="protein"] { background: var(--color-chart-cast-iron); }
.ask-bars .ask-bar-tr i[data-k="fat"] { background: var(--color-chart-cedar); }
.ask-bars .ask-bar-tr i[data-k="carbs"] { background: var(--color-chart-sage); }
.ask-bars .ask-bar-tr i[data-k="sugar"] { background: var(--color-chart-rhubarb); }
.ask-bars .ask-bar-tr i[data-k="fibre"] { background: var(--color-chart-patina); }
.ask-bars .ask-bar-tr i[data-k="salt"] { background: var(--color-chart-fig); }
.ask-bars .ask-bar-vl { font-family: var(--ask-font-data); font-size: 0.82rem; text-align: right; white-space: nowrap; }
.ask-bars .ask-bar-vl.ask-unk { font-family: inherit; color: var(--color-ink-faded); }
.ask-bars .ask-bar-vl.ask-grounded { color: var(--ui-logo); }

/* journey */
.ask-steps { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.ask-steps li { position: relative; padding: 0 0 1rem 1.55rem; }
.ask-steps li::before { content: ""; position: absolute; left: 0.32rem; top: 0.45rem; bottom: -0.1rem; width: 2px; background: var(--ui-border-strong); }
.ask-steps li:last-child::before { display: none; }
.ask-steps li::after { content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.8rem; height: 0.8rem; clip-path: var(--chamfer-container-sm); background: var(--color-chart-cedar); }
.ask-steps li:first-child::after { background: var(--color-chart-sage); }
.ask-steps .ask-st-what { font-weight: 600; }
.ask-steps .ask-st-how { color: var(--color-ink-faded); font-size: 0.875rem; }
.ask-steps .ask-st-yield { font-family: var(--ask-font-data); font-size: 0.8rem; margin-top: 0.1rem; }

/* walk + neighbours */
.ask-section { margin-top: 1.3rem; }
.ask-section > h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.55rem; display: flex; align-items: baseline; gap: 0.5rem; }
.ask-section > h3 .ask-note { font-weight: 300; color: var(--color-ink-faded); font-size: 0.875rem; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ask-nodechip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    clip-path: var(--chamfer-affordance-sm); background: var(--ui-paper);
    padding: 0.45rem 0.7rem; font-size: 0.9rem; font-weight: 600; text-align: left;
    filter: drop-shadow(0 1px 1px var(--ask-shadow-soft));
}
.ask-nodechip .ask-num { font-family: var(--ask-font-data); font-weight: 400; font-size: 0.8rem; color: var(--color-ink-faded); }
.ask-nodechip .ask-num.ask-known { color: inherit; }
.ask-morenote { font-size: 0.875rem; color: var(--color-ink-faded); margin-top: 0.55rem; }

/* the four-at-once overview */
.ask-four { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 640px) { .ask-four { grid-template-columns: 1fr 1fr; } }
.ask-mini {
    text-align: left; clip-path: var(--chamfer-affordance-md); background: var(--ui-paper);
    padding: 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.3rem;
    filter: drop-shadow(0 1px 1.5px var(--ask-shadow)) drop-shadow(0 3px 8px var(--ask-shadow-soft));
    transition: transform 0.15s ease; border-left: 3px solid transparent;
}
.ask-mini:hover, .ask-mini:focus-visible { transform: translateY(-2px); border-left-color: var(--color-action-amber); }
.ask-mini .ask-mini-q { font-weight: 400; font-size: 1.05rem; letter-spacing: -0.02em; display: flex; gap: 0.5rem; align-items: baseline; }
.ask-mini .ask-mini-a { font-family: var(--ask-font-data); font-size: 0.95rem; }
.ask-mini .ask-mini-a.ask-unk { font-family: inherit; color: var(--color-ink-faded); }

.ask-addplate { margin-top: 1.1rem; }
.ask-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    clip-path: var(--chamfer-affordance-md);
    background: var(--ui-logo); color: var(--ui-on-brand);
    padding: 0.55rem 1rem; font-weight: 700; font-size: 1rem;
}
.ask-btn-ghost { background: var(--ui-paper); color: var(--ui-text); }
.ask-btn-quiet { background: transparent; color: var(--ui-logo); font-weight: 600; padding: 0.35rem 0.4rem; }
.ask-btnrow { display: flex; gap: 0.6rem; margin-top: 0.9rem; flex-wrap: wrap; }

/* ---------- plate ---------- */
.ask-plate-chip {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
    clip-path: var(--chamfer-affordance-md);
    background: var(--ui-logo); color: var(--ui-on-brand);
    padding: 0.6rem 1rem; font-weight: 700;
    filter: drop-shadow(0 2px 6px var(--ask-shadow));
}
.ask-drawer {
    position: fixed; z-index: 55; right: 0; bottom: 0; left: 0;
    display: flex; justify-content: center; pointer-events: none;
}
.ask-drawer .ask-card { pointer-events: auto; width: min(46rem, 100%); margin: 0 0.5rem 0.5rem; max-height: 70vh; overflow: auto; }
.ask-drawer-head { display: flex; justify-content: space-between; align-items: baseline; }
.ask-drawer-head h2 { font-size: 1.1rem; }
.ask-plate-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--ui-border); }
.ask-plate-item .ask-plate-nm { flex: 1; font-weight: 600; font-size: 0.95rem; }
.ask-plate-item .ask-plate-mass { font-family: var(--ask-font-data); font-size: 0.875rem; min-width: 3.4rem; text-align: right; }
.ask-plate-item .ask-plate-ground { font-size: 0.75rem; color: var(--ui-logo); font-weight: 600; }
.ask-step { clip-path: var(--chamfer-affordance-sm); background: var(--ui-bg); width: 1.7rem; height: 1.7rem; display: grid; place-items: center; font-weight: 700; }
.ask-rm { color: var(--color-action-terracotta); font-weight: 600; font-size: 0.875rem; }
.ask-foldout { margin-top: 0.8rem; }
.ask-foldout .ask-cover { font-size: 0.875rem; color: var(--color-ink-faded); margin-top: 0.25rem; }
.ask-foldout .ask-unklist { font-size: 0.875rem; margin-top: 0.35rem; border-left: 3px solid var(--color-action-terracotta); padding-left: 0.6rem; }