/* Ask AI, step by step. Big type and big tap targets: the readers are new to this. */
.ask { max-width: 44rem; }
.ask .lede { font-size: 1.2rem; }
.ask h2 { display: flex; align-items: center; gap: 0.6rem; }
.ask .num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--tint); color: var(--porcelain); font: 700 1.05rem var(--sans); }
.ask .tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.ask .task { display: block; width: 100%; text-align: left; background: var(--paper); color: var(--ink); border: 2px solid var(--rule); border-radius: 12px; padding: 0.9rem 1rem; font: inherit; cursor: pointer; min-height: 4.5rem; }
.ask .task strong { display: block; font-size: 1.1rem; }
.ask .task span { color: var(--ink-soft); font-size: 0.95rem; }
.ask .task:hover, .ask .task:focus-visible { border-color: var(--tint); }
.ask label, .ask legend { display: block; font-weight: 700; margin: 1.2rem 0 0.35rem; padding: 0; }
.ask fieldset { border: 0; padding: 0; margin: 0; }
.ask .hint { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 0.35rem; }
.ask .optional { font-weight: 400; color: var(--ink-soft); }
.ask input:not([type="radio"]), .ask textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--paper); border: 2px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.8rem; }
.ask textarea { resize: vertical; line-height: 1.45; }
.ask input:focus-visible, .ask textarea:focus-visible, .ask button:focus-visible, .ask summary:focus-visible, .ask a.ai:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.ask .choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ask .choice { position: relative; margin: 0; font-weight: 400; }
.ask .choice input { position: absolute; opacity: 0; inset: 0; }
.ask .choice span { display: block; border: 2px solid var(--rule); border-radius: 999px; padding: 0.5rem 0.95rem; background: var(--paper); cursor: pointer; }
.ask .choice input:checked + span { border-color: var(--tint); background: var(--celadon-wash); font-weight: 700; }
.ask .choice input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.ask .go { margin-top: 1.4rem; font-size: 1.1rem; border: 0; cursor: pointer; }
.ask .need { color: var(--amber); font-weight: 700; margin-top: 0.75rem; min-height: 1.4em; }
.ask .linkish { background: none; border: 0; padding: 0.4rem 0; color: var(--cobalt); font: inherit; text-decoration: underline; cursor: pointer; }
.ask .open-label { font-weight: 700; margin: 1.2rem 0 0.4rem; }
.ask .ais { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; }
.ask a.ai { display: block; text-decoration: none; background: var(--cobalt); color: var(--on-cobalt); border-radius: 12px; padding: 0.8rem 1rem; }
.ask a.ai strong { display: block; font-size: 1.15rem; }
.ask a.ai span { font-size: 0.875rem; opacity: 0.92; }
.ask .status, .ask .me-status { color: var(--ink-soft); }
.ask .fine { color: var(--ink-soft); font-size: 0.95rem; }
.ask .me { margin-top: 2.5rem; border: 2px solid var(--rule); border-radius: 12px; padding: 0.3rem 1rem; background: var(--paper); }
.ask .me summary { cursor: pointer; font-weight: 700; padding: 0.6rem 0; }
.ask [hidden] { display: none !important; }