/*
 * Search results and the functional-group dialog, shared by Structure Search (draw-search.html, up to 4 hits)
 * and the results page (search-results.html, more than 4 hits; Nataliya 2026-11-05, D43).
 * Moved unchanged from the inline styles of draw-search.html.
 */
.ak-structs { padding-top: var(--ak-gap); padding-bottom: var(--ak-gap); }
.ak-structs__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ak-structs__head h2 { font-size: clamp(20px, 5.5vw, 28px); }
.ak-structs__count { margin-left: .375rem; font: 500 15px/1 var(--ak-font-sans); color: var(--ak-muted); letter-spacing: 0; }
.ak-structs__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 599px) { .ak-structs__tools { width: 100%; justify-content: center; column-gap: .5rem; } }
/* A tools row under the title (Your Structures). Request (n) sits under the structures, in the column of
   Clear Selection (Nataliya, 2026-11-06, D75): draw-search.html sets the left padding from that button;
   phones: centred (D56). */
.ak-structs__tools--row { flex-basis: 100%; }
.ak-structs__foot { display: flex; justify-content: flex-start; margin-top: 1.5rem; }
.ak-structs__foot .ak-btn { min-width: var(--ak-btn-w); }
.ak-structs__foot { flex-wrap: wrap; gap: .75rem; }
@media (max-width: 599px) { .ak-structs__foot { justify-content: center; gap: 8px; } .ak-structs__foot .ak-btn { margin: 0; } }
/* Save to My Account panel (STATUS Open 19): a card without a frame (D76), line field as on the forms (D45),
   error band as .ak-form-err of forms.css; the answer that replaces the form is centred (D61). */
.ak-savelist { margin-top: 1rem; padding: 1.25rem; border-radius: var(--ak-radius-panel); background: var(--ak-surface); }
@media (min-width: 768px) { .ak-savelist { padding: 1.5rem 1.75rem; } }
.ak-savelist[hidden] { display: none; }
.ak-savelist h3 { margin: 0; font-size: 18px; }
.ak-savelist p { margin: .5rem 0 0; font-size: 14px; line-height: 1.55; color: var(--ak-text-2); }
.ak-savelist .ak-actions { margin-top: 1rem; }
.ak-savelist__form { max-width: 40rem; }
.ak-savelist__fld { margin-top: 1rem; }
.ak-savelist__fld label { display: block; margin-bottom: .125rem; font-size: 14px; color: var(--ak-accent-fg); }
.ak-savelist__fld input { width: 100%; min-height: 40px; padding: 0 0 .25rem; border: 0; border-bottom: 1px solid var(--ak-field-line); border-radius: 0; background: transparent; color: var(--ak-ink); font: 400 15px/1.3 var(--ak-font-sans); }
.ak-savelist__fld input:hover { border-bottom-color: var(--ak-ink); }
.ak-savelist__fld input:focus { outline: none; border-bottom-color: var(--ak-accent-fg); box-shadow: 0 1px 0 var(--ak-accent-fg); }
.ak-savelist__fld input[aria-invalid=true] { border-bottom-color: var(--ak-error); box-shadow: 0 1px 0 var(--ak-error); }
.ak-savelist .ak-form-err { margin: .75rem 0 0; padding: .75rem 1rem; border-radius: var(--ak-radius-sm); background: var(--ak-surface); color: var(--ak-ink); box-shadow: 0 2px 10px var(--ak-shadow), 0 0 0 1px var(--ak-hairline); font-size: 14px; font-weight: 500; line-height: 1.5; }
.ak-savelist .ak-form-err:empty { display: none; }
.ak-savelist.is-answer { text-align: center; }
.ak-savelist.is-answer .ak-actions { justify-content: center; }
/* Phones: two buttons of at least 167 px do not fit in the card, so they share the row as equal halves (as in the Functional Groups dialog). */
@media (max-width: 599px) { .ak-savelist { padding: 1rem; } .ak-savelist .ak-actions { flex-wrap: nowrap; gap: 8px; } .ak-savelist .ak-actions .ak-btn { flex: 1 1 0; min-width: 0; margin: 0; } }
/* No "Sort by" text at any width (Nataliya, 2026-11-06); still read out by screen readers. */
.ak-sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ak-structs__status { min-height: 1.5em; margin: 0 0 .75rem; font-size: 14px; color: var(--ak-text-2); }
.ak-structs__status.is-error { color: var(--ak-accent-fg); font-weight: 600; }
.ak-structs__report { margin: 0 0 1.5rem; padding: 1.25rem 0; background: var(--ak-header); color: #fff; font-size: 14px; box-shadow: 0 0 0 100vmax var(--ak-header); clip-path: inset(0 -100vmax); overflow-wrap: anywhere; }
.ak-structs__report strong { font-weight: 700; }
.ak-structs__report ul { margin: .5rem 0 0; padding-left: 1.25rem; max-height: 12rem; overflow: auto; }
.ak-structs__report li + li { margin-top: .25rem; }
.ak-structs__report button { margin-top: .875rem; }
.ak-sort { display: inline-flex; align-items: center; gap: .5rem; font-size: 14px; color: var(--ak-text-2); }
@media (max-width: 599px) { .ak-sort { flex: 0 0 auto; } .ak-sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* phones: no "Sort by" text (Nataliya, 2026-11-06); still read out */ .ak-structs__tools #btn_simadd { order: 9; } }
.ak-simres { padding-bottom: 0; scroll-margin-top: 6rem; }
.ak-simres__report { margin: 0 0 1.5rem; padding: 1.25rem 0; background: var(--ak-header); color: #fff; font-size: 14px; box-shadow: 0 0 0 100vmax var(--ak-header); clip-path: inset(0 -100vmax); overflow-wrap: anywhere; }
.ak-simres__report h3 { margin: 0 0 .5rem; font: 700 15px/1.3 var(--ak-font-sans); color: #fff; }
.ak-simres__report ol { margin: 0; padding-left: 1.25rem; }
.ak-simres__report li + li { margin-top: .25rem; }
.ak-simres__report b { font-variant-numeric: tabular-nums; }
.ak-simres__report .ak-simres__note { margin: .75rem 0 0; }
.ak-simres__report .ak-simres__demo { margin: .75rem 0 0; font-size: 13px; opacity: .9; }
.ak-simres__report .ak-simres__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
.ak-fg { width: min(34rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - 2rem)); padding: 0; border: 0; border-radius: var(--ak-radius-panel); box-shadow: 0 20px 60px rgba(23, 24, 28, .28); color: var(--ak-ink); background: var(--ak-surface); }   /* card colour: white by day, akoa brown #291E19 at night, not the browser's black (Nataliya, 2026-11-07, D100) */
.ak-fg::backdrop { background: rgba(23, 24, 28, .45); }
.ak-fg__form { display: flex; flex-direction: column; max-height: inherit; }
.ak-fg__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--ak-header); color: #fff; }
.ak-fg__head h2 { margin: 0; font-size: 20px; color: #fff; }
.ak-fg__close { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.ak-fg__intro, .ak-fg__src { margin: .875rem 1.25rem 0; font-size: 14px; color: var(--ak-text-2); }
.ak-fg__unknown { margin: .875rem 1.25rem 0; font-size: 14px; color: var(--ak-text-2); }   /* A77: structures whose groups are unknown */
.ak-fg__unknown[hidden] { display: none; }
.ak-fg__src { margin-bottom: .875rem; font-size: 12px; color: var(--ak-muted); }
.ak-fg__mode { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .875rem 1.25rem 0; padding: 0; border: 0; font-size: 14px; }
.ak-fg__mode legend { padding: 0; margin-bottom: .375rem; font-weight: 600; }
.ak-fg__mode input, .ak-fg__list input { accent-color: var(--ak-accent-fg); width: 18px; height: 18px; vertical-align: -3px; }
.ak-fg__list { list-style: none; margin: .875rem 0 0; padding: 0 1.25rem; overflow: auto; flex: 1 1 auto; border-top: 1px solid var(--ak-hairline); border-bottom: 1px solid var(--ak-hairline); }
.ak-fg__list li + li { border-top: 1px solid var(--ak-hairline); }
.ak-fg__list label { display: flex; align-items: center; gap: .75rem; min-height: 48px; cursor: pointer; }
.ak-fg__name { flex: 1; min-width: 0; font-size: 15px; }
.ak-fg__name small { display: block; color: var(--ak-muted); font: 400 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.ak-fg__none { padding: 1rem 0; color: var(--ak-muted); font-size: 14px; }
.ak-fg__search { display: block; margin: .875rem 1.25rem 0; }
.ak-fg__search input::placeholder { color: var(--ak-field-ph); opacity: 1; }
.ak-fg__search input { width: 100%; height: var(--ak-ctl-h); padding: 0 1rem; border: 1px solid var(--ak-field-line); border-radius: 999px; background: var(--ak-field-bg); color: var(--ak-field-fg); font: 400 15px/1.2 var(--ak-font-sans); }
.ak-fg__list .ak-fg__sec { border-top: 0; padding: .75rem 0 .25rem; }
.ak-fg__list .ak-fg__sec + .ak-fg__sec { border-top: 1px solid var(--ak-hairline); }
.ak-fg__sec h3, .ak-fg__sec summary { margin: 0 0 .25rem; font: 700 13px/1.4 var(--ak-font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ak-accent-fg); }
.ak-fg__sec summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; }
.ak-fg__sec ul { list-style: none; margin: 0; padding: 0; }
.ak-fg__sec ul li + li { border-top: 1px solid var(--ak-hairline); }
.ak-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ak-fg__n { min-width: 2rem; padding: .125rem .5rem; border-radius: 999px; background: var(--ak-brand-tint); color: var(--ak-accent-fg); font: 700 13px/1.4 var(--ak-font-sans); text-align: center; }
.ak-fg__actions { display: flex; justify-content: flex-end; gap: .75rem; padding: 1rem 1.25rem; }
/* Source note: always open above 599 px (no summary line); on phones folded into one line (STATUS Open 22). */
.ak-fg__about { margin: .875rem 1.25rem; }
.ak-fg__about > summary, .ak-fg__about-intro { display: none; }
.ak-fg__about .ak-fg__src { margin: 0; }
/* Phones: the list gets the height. Dialog almost full screen, intro moved into "About This Filter",
   tighter spacing, Clear and Apply as two equal halves (two 167 px buttons do not fit beside each other). */
@media (max-width: 599px) {
    .ak-fg { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
    .ak-fg__head { padding: .375rem .375rem .375rem 1rem; }
    .ak-fg__intro { display: none; }
    .ak-fg__unknown { margin: .625rem 1rem 0; }
    .ak-fg__search { margin: .75rem 1rem 0; }
    .ak-fg__mode { margin: .625rem 1rem 0; gap: .25rem 1rem; }
    .ak-fg__mode legend { margin-bottom: .25rem; }
    .ak-fg__list { margin-top: .625rem; padding: 0 1rem; min-height: 9rem; }
    .ak-fg__about { margin: 0 1rem; }
    .ak-fg__about > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; font: 700 14px/1.3 var(--ak-font-sans); color: var(--ak-accent-fg); }
    .ak-fg__about > summary::-webkit-details-marker { display: none; }
    .ak-fg__about > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
    .ak-fg__about[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
    .ak-fg__about-intro { display: block; margin: 0 0 .5rem; font-size: 13px; color: var(--ak-text-2); }
    .ak-fg__about .ak-fg__src { margin-bottom: .5rem; }
    .ak-fg__actions { gap: 8px; padding: .5rem 1rem .75rem; }
    .ak-fg__actions .ak-btn { flex: 1 1 0; min-width: 0; margin: 0; }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) { .ak-fg__about > summary::after { transition: none; } }
#btn_fg[data-count]:not([data-count="0"]), #btn_listfg[data-count]:not([data-count="0"]) { background: var(--ak-brand); color: #fff; border-color: var(--ak-accent-fg); }
.ak-simopts select, .ak-sort select { height: var(--ak-ctl-h); padding: 0 2rem 0 .875rem; border: 1px solid var(--ak-field-line); border-radius: 999px; color: var(--ak-field-fg); background: var(--ak-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2317181c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .8rem center; font: 400 14px/1.2 var(--ak-font-sans); -webkit-appearance: none; appearance: none; }
.ak-structs__tools[hidden], .ak-simres [hidden], .ak-structs__foot[hidden], .ak-structs__empty[hidden] { display: none !important; }   /* hidden attribute beats the flex rules above */
/* No structures: the message on the heading line (D108); the status line takes no room while it is empty */
.ak-structs__empty { margin: 0 auto 0 0; color: var(--ak-accent-fg); font-size: 15px; }   /* right after the heading, not pushed to the far end of the row */
#structlist .ak-structs__status:empty { min-height: 0; margin: 0; }
/* Phones: the sort list as wide as a button and as high, 12 px text, so ↑ Low to high fits beside it (Nataliya, 2026-11-06).
   After the general .ak-sort select rule on purpose. */
@media (max-width: 599px) { .ak-structs__tools .ak-sort select { flex: none; width: var(--ak-btn-w); padding: 0 1.75rem 0 .75rem; background-position: right .625rem center; font-size: 12px; } }

/* Help phrase with a question mark (A45, Nataliya 2026-11-07): one short line instead of a full-width paragraph;
   the explanation opens below it on a card, at most about 65 characters per line. */
.ak-help { position: relative; margin-top: .875rem; }
.ak-help__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem 0; border: 0; background: none; color: var(--ak-accent-fg); font: 600 14px/1.4 var(--ak-font-sans); cursor: pointer; text-align: left; }
.ak-help__btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.ak-help__q { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--ak-brand); color: #fff; font-size: 12px; font-weight: 700; }
html.dark .ak-help__q { background: var(--ak-header); color: var(--ak-on-brand); }
.ak-help__pop { max-width: 40rem; margin: .5rem 0 0; padding: .875rem 1rem; border-radius: 8px; background: var(--ak-surface); color: var(--ak-text-2); font-size: 14px; line-height: 1.55; box-shadow: 0 6px 20px var(--ak-shadow), 0 0 0 1px var(--ak-hairline); }
.ak-help__pop[hidden] { display: none; }
@media (max-width: 599px) { .ak-help { text-align: center; } .ak-help__pop { text-align: left; } }