/* I1 "聆聽你的聲音" text Q&A. Lives in the normal page flow under the works grid: opening it pushes the following
   content down, it never floats over anything. Only the site tokens are used (navy / panel / red / blue / gold). */
.ask{margin:28px 0 0;border:2px solid var(--gold);border-radius:4px;background:var(--navy-2);color:#fff}
.ask-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 18px}
.ask-intro{min-width:0;flex:1 1 260px}
.ask-intro h3{margin:0;font-size:1.15rem;line-height:1.3;color:#fff;overflow-wrap:anywhere}
.ask-tagline{margin:4px 0 0;font-size:.92rem;line-height:1.5;color:var(--mute-d);overflow-wrap:anywhere}
.ask-toggle,.ask-send,.ask-close{font:inherit;font-weight:700;font-size:.95rem;line-height:1.2;min-height:44px;padding:10px 18px;border-radius:3px;cursor:pointer}
.ask-toggle,.ask-send{background:var(--gold);color:var(--ink);border:2px solid #000}
.ask-toggle:hover,.ask-send:hover:not(:disabled){box-shadow:3px 3px 0 #000}
.ask-close{background:transparent;color:#fff;border:2px solid var(--mute-d)}
.ask-close:hover{border-color:#fff}
.ask-send:disabled{opacity:.55;cursor:not-allowed}
.ask :focus-visible{outline:3px solid #fff;outline-offset:2px}
.ask-panel{border-top:1px solid rgba(255,255,255,.14);padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px}
.ask-panel[hidden]{display:none}
.ask-mode{margin:0;padding:8px 12px;border-left:4px solid var(--gold);background:rgba(244,184,28,.22);font-size:.86rem;line-height:1.5;color:#fff}
.ask-mode[hidden]{display:none}
.ask-log{max-height:min(55vh,460px);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:2px 2px 2px 0}
.ask-log[hidden]{display:none}
.ask-msg{min-width:0}
.ask-who{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--mute-d);margin-bottom:2px}
.ask-msg p{margin:0 0 6px;font-size:.95rem;line-height:1.65;overflow-wrap:anywhere;white-space:pre-line}
.ask-q p{color:#fff}
.ask-a{border-left:3px solid var(--blue);padding-left:10px}
.ask-ed{margin:6px 0;padding:8px 10px;background:rgba(255,255,255,.04);border-radius:3px}
.ask-tag{display:inline-block;margin-bottom:4px;font-size:.74rem;font-weight:700;color:var(--gold);line-height:1.4}
.ask-src{display:inline-block;font-size:.8rem;color:var(--mute-d);line-height:1.5}
.ask-choices{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ask-choice{font:inherit;font-size:.86rem;font-weight:700;min-height:44px;padding:6px 12px;border:2px solid var(--gold);border-radius:3px;background:transparent;color:#fff;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.ask-choice:hover{background:rgba(244,184,28,.22)}
.ask-list{margin:4px 0 6px;padding-left:1.2em;font-size:.92rem;line-height:1.6}
.ask-links{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ask-links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:2px solid #000;border-radius:3px;background:var(--blue);color:#fff;
  font-size:.86rem;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.ask-links li:nth-child(2n) a{background:var(--red)}
.ask-form{display:flex;flex-direction:column;gap:6px;min-width:0}
.ask-form label{font-size:.86rem;font-weight:700}
.ask-form textarea{width:100%;min-height:84px;resize:vertical;box-sizing:border-box;padding:10px 12px;border:2px solid var(--mute-d);border-radius:3px;
  background:var(--navy);color:#fff;font:inherit;font-size:1rem;line-height:1.5}
.ask-form textarea::placeholder{color:var(--mute-d);opacity:1}
.ask-form textarea:disabled{opacity:.6}
.ask-meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:.8rem;color:var(--mute-d);line-height:1.5}
.ask-count{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ask-count.over{color:#FF8F86;font-weight:700}
.ask-status{margin:0;min-height:1.4em;font-size:.88rem;line-height:1.5;color:var(--mute-d)}
.ask-status.warn,.ask-status.err{color:#FF8F86;font-weight:600}
.ask-actions{display:flex;flex-wrap:wrap;gap:10px}
.ask-privacy{margin:0;font-size:.78rem;line-height:1.5;color:var(--mute-d)}
@container site (max-width:520px){
  .ask-bar{padding:14px}
  .ask-panel{padding:12px 14px 16px}
  .ask-toggle{width:100%}
}

/* F9: visible in the homepage introduction, plus the full panel before the works. */
.ask-entry{display:grid;gap:6px;padding:16px 18px;background:var(--gold);color:var(--ink);border:3px solid #000;border-radius:4px;box-shadow:5px 5px 0 #000;text-decoration:none;min-width:0;overflow-wrap:anywhere}
.ask-entry strong{font-size:clamp(1.25rem,2.4cqi,1.65rem);line-height:1.25}
.ask-entry span{font-size:1rem;line-height:1.5}
.ask-entry b{font-size:.95rem;line-height:1.4;text-decoration:underline;text-underline-offset:3px}
.ask-entry b::after{content:" →"}
.ask-entry:hover{background:#ffce52}
.ask-entry:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hero-split .ask-entry{order:3}
.ask-feature{padding:28px 0;background:var(--navy)}
.ask-feature .ask{margin:0;border-width:3px;box-shadow:6px 6px 0 #000}
.ask-feature .ask-bar{padding:22px}
.ask-feature .ask-intro h3{font-size:clamp(1.4rem,3cqi,2rem);color:var(--gold)}
.ask-feature .ask-tagline{font-size:1rem;color:#fff;margin-top:8px}
.ask-feature .ask-toggle{font-size:1.05rem;min-height:48px}
@container site (max-width:520px){.ask-entry{padding:14px}.ask-feature{padding:20px 0}.ask-feature .ask-bar{padding:18px 14px}}

.ask-feature .ask-form textarea{scroll-margin-top:calc(var(--hdr-h) + var(--stick-top,0px) + 14px)}