/* Ask the manual, drawn with design system 0.3.1 and the shared parts in
   site-shell.css. One question, one crane, the answer and the page it is
   printed on. Every control is at least --cq-touch (44px); no text is under
   13px; hover only where a pointer can hover; nothing moves.

   The only colours written here are the highlighter on a manual page: the
   words an answer rests on, marked as a pen would mark them. */
.ask-body{--mark:#f3bb5566;--mark-edge:#c98a14e6}
.ask-main{width:min(100%,48rem);margin-inline:auto;padding:0 1rem max(1.5rem,env(safe-area-inset-bottom))}
:where(.ask-main) :where(h1,h2,h3){margin:0;line-height:var(--cq-line-heading)}
:where(.ask-main) :where(p){margin:0}
.ask-intro{padding:1.5rem 0 1rem}
.ask-intro h1{margin-bottom:.375rem;font-size:clamp(1.75rem,6vw,2.5rem);letter-spacing:-.02em}
.ask-intro p{color:var(--cq-text-muted);line-height:1.6}
.ask-cranes{margin-bottom:1rem}

/* ---------- the question ---------- */
.ask-form{display:flex;flex-wrap:wrap;gap:.5rem}
.ask-form input{flex:1 1 100%;width:100%;min-width:0;min-height:3.25rem;padding:0 .875rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);font:inherit;font-size:1.0625rem}
.ask-form .cq-button{flex:1 1 0;min-height:3.25rem;font-size:1rem}
.ask-mic[aria-pressed="true"]{border-color:var(--cq-accent);background:color-mix(in srgb,var(--cq-accent) 12%,var(--cq-surface));color:var(--cq-accent)}
.ask-status{min-height:1.5em;margin:.625rem 0;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.ask-photo-card{display:flex;align-items:center;gap:.75rem;margin-top:.625rem;padding:.625rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.ask-photo-card img{flex:0 0 4rem;width:4rem;height:4rem;object-fit:cover;border:1px solid var(--cq-border);border-radius:var(--cq-radius-md)}
.ask-photo-card div{flex:1 1 auto;min-width:0}
.ask-photo-card strong,.ask-photo-card span{display:block}
.ask-photo-card span{color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.4}

/* ---------- what the photo shows: a reading of the photo, set apart ---------- */
.ask-seen{margin:.375rem 0 .75rem;padding:.875rem 1rem;border:1px dashed var(--cq-accent);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.ask-seen h2{margin-bottom:.375rem;color:var(--cq-accent);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.ask-seen p{margin-bottom:.5rem}
.ask-seen__text{display:flex;flex-wrap:wrap;gap:.375rem;margin:0 0 .5rem;padding:0;list-style:none}
.ask-seen__text:empty{display:none}
.ask-seen__text li{padding:.125rem .5rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-sm);background:var(--cq-canvas);font:600 .875rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.ask-seen__figure{font-size:var(--cq-type-sm)}
.ask-seen p.ask-seen__note{margin:0;color:var(--cq-text-muted);font-size:.8125rem}

/* ---------- the answer ---------- */
.ask-answer{margin-top:.375rem;padding:1rem;border:1px solid var(--cq-border);border-left:4px solid var(--cq-accent);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.ask-answer__text{margin-bottom:.75rem;font-size:1.125rem}
.ask-answer__actions{display:flex;flex-wrap:wrap;gap:.5rem}
.ask-answer h3{margin:1rem 0 .5rem;color:var(--cq-text-muted);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.ask-statements{margin:0 0 .75rem;padding-left:1.4em}
.ask-statements li{margin-bottom:.875rem}
.ask-statements p{margin-bottom:.375rem;font-size:1.0625rem}
.ask-statements__pages{display:flex;flex-wrap:wrap;gap:.375rem}
.ask-statements__pages button{min-height:var(--cq-touch);padding:0 .875rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-pill);background:var(--cq-surface);color:var(--cq-accent);font:inherit;font-size:var(--cq-type-sm);font-weight:700;cursor:pointer}
.ask-answer__note{margin-bottom:.75rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.ask-pages{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.ask-pages button{display:flex;align-items:flex-start;gap:.75rem;width:100%;min-height:4rem;padding:.625rem;border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);font:inherit;text-align:left;cursor:pointer}
.ask-pages img{flex:0 0 2.875rem;width:2.875rem;height:3.75rem;object-fit:cover;object-position:top;border:1px solid var(--cq-border);background:var(--cq-white)}
.ask-pages strong{display:block;color:var(--cq-accent);font-size:var(--cq-type-sm)}
.ask-pages span{display:block;color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.45}

/* ---------- feedback, offline study, the boundary ---------- */
.ask-feedback{margin-top:.75rem;padding:.75rem .875rem;border:1px dashed var(--cq-border-control);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.ask-feedback>p:first-child{margin-bottom:.5rem}
.ask-feedback button:disabled{opacity:.6;cursor:default}
.ask-feedback .ask-feedback__notice,.ask-feedback .ask-feedback__status{margin-top:.5rem;color:var(--cq-text-muted);font-size:.8125rem}
.ask-offline{margin-top:1.5rem;padding:1rem;border:1px solid var(--cq-border);border-radius:var(--cq-radius-lg);background:var(--cq-surface)}
.ask-offline h2{margin-bottom:.375rem;font-size:1.125rem}
.ask-offline p{margin-bottom:.75rem;color:var(--cq-text-muted);font-size:var(--cq-type-sm)}
.ask-offline .ask-offline__status{margin:.625rem 0 0}
.boundary{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--cq-border);color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.6}

/* ---------- the page it is printed on ---------- */
.ask-page{width:min(96vw,57.5rem);max-width:none;max-height:94vh;max-height:94dvh;padding:0;border:0;border-radius:var(--cq-radius-lg);background:var(--cq-surface);color:var(--cq-text);box-shadow:var(--cq-shadow-lg)}
.ask-page::backdrop{background:color-mix(in srgb,var(--cq-text) 70%,transparent)}
.ask-page__bar{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .625rem;border-bottom:1px solid var(--cq-border);background:var(--cq-surface)}
.ask-page__bar strong{flex:1 1 auto}
.ask-page__quote{margin:0;padding:.625rem .875rem;border-left:4px solid var(--mark-edge);background:color-mix(in srgb,var(--cq-warning) 8%,var(--cq-surface));font-size:var(--cq-type-sm);line-height:1.45}
.ask-page__body{padding:.5rem;overflow:auto}
.ask-page__body img{display:block;width:100%;height:auto}
.ask-page__body p{margin:.75rem}
.ask-page__frame{position:relative}
.ask-mark{position:absolute;border-radius:2px;background:var(--mark);outline:2px solid var(--mark-edge);pointer-events:none}

@media(hover:hover){
  .ask-pages button:hover,.ask-statements__pages button:hover{border-color:var(--cq-accent)}
}
@media(max-width:26.25rem){.ask-form .cq-button{flex:1 1 30%;padding-inline:.5rem}}
@media(forced-colors:active){.ask-mic[aria-pressed="true"]{border:3px solid Highlight}.ask-mark{outline-color:Highlight}}