/* Ask the North Sea — page-specific rules. Tokens and components: static/css/site.css. */

.askhero { padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem); }
.askhero h1 { max-width: 12em; }
.askhero .lead { margin-top: var(--s6); color: var(--fg-muted); max-width: 38em; }

.askform { margin-top: clamp(2rem, 5vw, 3.5rem); max-width: 62rem; }
.askform__l { display: block; font-size: var(--fs-small); font-weight: 500; margin-bottom: var(--s3); }
.askform__row { display: grid; gap: 0; border: 1px solid var(--sea-text, var(--fg)); background: var(--sea-2, transparent); }
.askform__row:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.askform textarea {
  width: 100%; min-height: 5.5rem; resize: vertical; border: 0; border-radius: 0; background: transparent;
  color: inherit; font: inherit; font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); line-height: 1.25;
  letter-spacing: -.02em; padding: clamp(1rem, 2.5vw, 1.5rem); outline: none; box-shadow: none;
}
.askform textarea::placeholder { color: var(--fg-muted); opacity: 1; }
.askform__b { min-height: 3.5rem; font-size: var(--fs-body); justify-content: space-between; border: 0; }
@media (min-width: 44rem) {
  .askform__row { grid-template-columns: 1fr auto; }
  .askform__b { min-width: 10rem; height: 100%; align-self: stretch; }
}
.askform__hint { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between; margin-top: var(--s3); color: var(--fg-muted); }
.askform__count.is-near { color: var(--fg); font-weight: 500; }
.askform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.askform[aria-busy="true"] .askform__b { opacity: .6; pointer-events: none; }

/* result */
.askout { padding-block: 0; }
.askout:has(.ask-result), .askout:has(.ask-msg), .askout.is-busy { padding-block: var(--section, 4rem) calc(var(--section, 4rem) * .6); }
.ask-status { color: var(--fg-muted); min-height: 0; }
.ask-status:not(:empty) { display: flex; align-items: center; gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s6); }
.ask-status:not(:empty)::before { content: ""; width: .6em; height: .6em; background: var(--accent); flex: none; animation: ask-pulse 900ms var(--ease, ease) infinite alternate; }
@keyframes ask-pulse { from { opacity: 1; } to { opacity: .2; } }

.ask-q { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.2; margin-top: var(--s3); max-width: 30em; overflow-wrap: anywhere; }
.ask-q:focus { outline: none; }
.ask-mode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s6); }
.ask-lede { margin-top: var(--s4); color: var(--fg-muted); max-width: 40em; }
.ask-answer { margin-top: var(--s5); font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.01em; max-width: 36em; }
.ask-answer p + p { margin-top: var(--s4); }
.ask-cite { font-size: .62em; line-height: 0; vertical-align: super; margin-left: .15em; }
.ask-cite a { display: inline-block; min-width: 1.5em; padding: .25em .3em; text-align: center; text-decoration: none; border: 1px solid var(--fg); font-weight: 500; line-height: 1; }
.ask-cite a:hover, .ask-cite a:focus-visible { background: var(--sea-3); color: var(--pro); }
.ask-cite + .ask-cite { margin-left: .2em; }
.ask-gap { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 1px dashed var(--fg); font-size: var(--fs-small); max-width: 46em; }
.ask-h { font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-top: var(--s8); margin-bottom: var(--s4); }

.ask-passages { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--line); }
.ask-h + .ask-passages { margin-top: 0; }
.ask-passage { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--line); scroll-margin-top: 6rem; }
@media (min-width: 44rem) { .ask-passage { grid-template-columns: 3.5rem 1fr; gap: var(--s5); } }
.ask-passage:target { background: var(--panel); box-shadow: -1rem 0 0 var(--panel), 1rem 0 0 var(--panel); }
.ask-passage__n { font-size: var(--fs-h3); line-height: 1; letter-spacing: -.03em; }
.ask-passage__n::after { content: ""; display: block; width: .5rem; height: .5rem; background: var(--accent); margin-top: var(--s3); }
.ask-passage__h { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; margin: 0; }
.ask-passage__t { margin-top: var(--s3); color: var(--fg-muted); max-width: 46em; }
.ask-passage__t .ask-best { color: var(--fg); }
.ask-passage mark, .ask-result mark { background: rgba(255, 75, 31, .2); color: inherit; padding: 0 .1em; }
.ask-passage__s { margin-top: var(--s4); font-size: var(--fs-small); display: grid; gap: .2em; }
.ask-passage__s a { overflow-wrap: anywhere; }
.ask-passage__m { font-size: var(--fs-micro); color: var(--fg-muted); }

.ask-consulted ul, .ask-consulted__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.ask-consulted li, .ask-consulted__list li { display: grid; gap: .15em; padding-block: var(--s3); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); }
@media (min-width: 56rem) { .ask-consulted li, .ask-consulted__list li { grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: baseline; } }
.ask-consulted__t a { overflow-wrap: anywhere; }
.ask-consulted__m { font-size: var(--fs-micro); color: var(--fg-muted); }
.ask-result .note { margin-top: var(--s6); }

.ask-refusal { margin-top: var(--s6); border: 1px dashed var(--fg); padding: clamp(1.25rem, 4vw, 2.5rem); display: grid; gap: var(--s4); max-width: 46em; }
.ask-refusal__t { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.15; }

/* suggestions */
.ask-suggest__h { margin-bottom: var(--s5); }
.ask-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); }
@media (min-width: 44rem) { .ask-chips { grid-template-columns: 1fr 1fr; } }
@media (min-width: 73rem) { .ask-chips { grid-template-columns: 1fr 1fr 1fr; } }
.ask-chips li { border-bottom: 1px solid var(--line); margin: 0 0 -1px; }
@media (min-width: 44rem) { .ask-chips li { border-right: 1px solid var(--line); margin-right: -1px; } }
.ask-chip { display: flex; gap: var(--s4); justify-content: space-between; align-items: flex-end; min-height: 6.5rem; height: 100%; padding: var(--s5); text-decoration: none; font-size: var(--fs-body); line-height: 1.3; letter-spacing: -.01em; transition: background-color 180ms, color 180ms; }
.ask-chip::after { content: "\2192"; font-size: 1.4rem; line-height: 1; transition: transform 220ms var(--ease, ease); }
.ask-chip:hover { background: var(--sea-3); color: var(--pro); border-color: var(--pro); }
.ask-chip:hover::after { transform: translateX(.3em); color: var(--accent); }

/* corpus */
.ask-facts { margin-top: var(--s6); }
.ask-sources { margin-top: var(--s6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ask-sources summary { cursor: pointer; padding-block: var(--s4); font-weight: 500; min-height: 44px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.ask-sources summary::-webkit-details-marker { display: none; }
.ask-sources summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.ask-sources[open] summary::after { content: "\2212"; }
.ask-sources + .note { margin-top: var(--s5); }

/* progressive reveal (JS adds .is-pending, then removes it item by item) */
[data-reveal].is-pending { opacity: 0; transform: translateY(.5rem); }
[data-reveal] { transition: opacity var(--t, 420ms) var(--ease, ease), transform var(--t, 420ms) var(--ease, ease); }
.ask-word { opacity: 0; transition: opacity 160ms linear; }
.ask-word.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .ask-word { transition: none; }
  [data-reveal].is-pending { opacity: 1; transform: none; }
  .ask-word { opacity: 1; }
  .ask-status:not(:empty)::before { animation: none; }
}