/*
 * AKos catalogue — shared styles (header, footer, page layout, jqWidgets overrides).
 * Colours, fonts and header/footer sizes follow the corporate website akos-chem.de
 * (repository AKos-GmbH/akoa, src/styles.css, SiteHeader.tsx, SiteFooter.tsx).
 * Breakpoints as on akos-chem.de: 768 px (tablet) and 1024 px (desktop menu).
 */

/* ---------- Fonts (self-hosted, SIL Open Font License, see styles/fonts/) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
    /* Day theme: the tokens of akos-chem.de (AKos-GmbH/akoa src/styles.css :root), D46. */
    --ak-brand: #8a1e1e;           /* AKos crimson: buttons and red bands */
    --ak-brand-hover: #6e1818;
    --ak-brand-active: #5c1414;
    --ak-header: #8a1e1e;          /* header, footer and red bands (akoa --brand-surface) */
    --ak-on-brand: #ffffff;        /* text on red */
    --ak-brand-tint: #f6ecea;      /* pale red for notices (plan v2, section 02) */
    --ak-accent: #6b4035;          /* optional brown accent */
    --ak-paper: #fbfaf7;           /* page background (akoa --paper) */
    --ak-card: #ffffff;
    --ak-surface: #ffffff;         /* cards, forms, white buttons */
    --ak-ink: #0b0d12;             /* akoa --ink */
    --ak-text-2: #303338;          /* akoa --stone-700 */
    --ak-muted: #6e7278;           /* akoa --stone-500 */
    --ak-hairline: #d9d7d2;        /* akoa --hairline */
    --ak-cta-section: #f7f4ee;     /* akoa --cta-section: closing call-to-action band */
    --ak-error: #8a1e1e;           /* errors in the site red (A38, Nataliya 2026-11-07); night: --ak-night-red, readable on brown */
    --ak-accent-fg: #8a1e1e;       /* red text, icons and focus lines on surfaces */
    --ak-accent-line: #8a1e1e;     /* red frames and lines on surfaces */
    --ak-ghost-line: rgba(138, 30, 30, .35);
    --ak-field-line: #b9b3a8;
    --ak-shadow: rgba(23, 24, 28, .08);
    --ak-radius: 14px;        /* cards, tiles, rows; three radii only: 999 px buttons and fields, 14 px cards, 8 px small parts (A49, Nataliya 2026-11-07) */
    --ak-radius-panel: 14px;  /* forms, tables, dialogs (akoa rounded-2xl) */
    --ak-radius-sm: 8px;      /* notices, error tips, small controls */
    --ak-radius-editor: 8px;  /* structure editor frame */
    /* Oval fields and white buttons stay white in both themes (Nataliya 2026-11-06: buttons only white or red) */
    --ak-white: #ffffff;
    --ak-field-bg: #ffffff;
    --ak-field-fg: #0b0d12;
    --ak-field-ph: #77706a;
    --ak-btn-white-fg: #8a1e1e;
    --ak-ctl-h: 40px;   /* button height = height of every oval field (Nataliya, 2026-11-06): 40 / 42 / 44 px */
    --ak-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ak-font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color-scheme: light;
}

/* Night theme: warm dark chocolate of akos-chem.de (akoa src/styles.css .dark), D46.
   All text is the light milk #f3ebdd; burgundy stays a surface and button colour and is
   not used as text on the chocolate background. Switched by scripts/theme.js. */
html.dark {
    --ak-night-red: #c92c2c; --ak-error: var(--ak-night-red); --ak-night-caramel: #a87a58; --ak-night-paper: #33251f;
    --ak-header: #780e0a;          /* akoa dark --brand-surface */
    --ak-on-brand: #f3ebdd;
    --ak-brand-tint: #251b17;
    --ak-paper: #1e1613;           /* akoa dark --background */
    --ak-card: #291e19;
    --ak-surface: #291e19;         /* akoa dark --card */
    --ak-ink: #f3ebdd;             /* milk */
    --ak-text-2: rgba(243, 235, 221, .78);
    --ak-muted: rgba(243, 235, 221, .62);
    --ak-hairline: #4a382f;        /* akoa dark --border */
    --ak-cta-section: #251b17;     /* akoa dark --cta-section */
    --ak-accent-fg: #f3ebdd;
    --ak-accent-line: #6b5144;
    --ak-ghost-line: #4a382f;
    --ak-field-line: #6b5144;
    --ak-shadow: rgba(0, 0, 0, .35);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ak-paper);
    color: var(--ak-ink);
    font-family: var(--ak-font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--ak-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; text-wrap: balance; }

img { max-width: 100%; height: auto; }

.ak-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ak-container { width: 100%; max-width: 78rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 768px) { .ak-container { padding-left: 2.5rem; padding-right: 2.5rem; } }

:focus-visible { outline: 2px solid var(--ak-accent-fg); outline-offset: 2px; }

/* ---------- Header (same design as akos-chem.de) ---------- */
.ak-header { position: sticky; top: 0; z-index: 1000; background: var(--ak-header); color: #fff; }
.ak-header :focus-visible, .ak-footer :focus-visible { outline-color: #fff; }

.ak-skip { position: absolute; left: 1rem; top: .5rem; background: #fff; color: var(--ak-brand); padding: .5rem 1rem; border-radius: var(--ak-radius-sm); z-index: 1001; transform: translateY(-200%); opacity: 0; }
.ak-skip:focus { transform: none; opacity: 1; }

.ak-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }

.ak-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #fff; text-decoration: none; }
.ak-brand__logo { height: 2.75rem; width: auto; max-width: none; flex: none; } /* image cropped to the letters, 256 x 134 */
.ak-brand__text { display: none; min-width: 0; }
.ak-brand__name { display: block; font-family: var(--ak-font-display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; line-height: 1.15; color: #fff; }
@media (min-width: 1280px) { .ak-brand__name { white-space: nowrap; } }
.ak-brand__tagline { display: block; margin-top: 2px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; line-height: 1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) {
    .ak-brand { gap: 1rem; }
    .ak-brand__logo { height: 3.5rem; }
    .ak-brand__text { display: block; }
    .ak-brand__name { font-size: 11px; }
    .ak-brand__tagline { font-size: 10px; }
}

/* Right-hand group as on akos-chem.de: menu, then Sign In and Request List. */
.ak-header__right { display: flex; flex: none; align-items: center; gap: 1.75rem; }
/* Wider header bar on large screens: larger logo, menu font and two buttons need the room. */
@media (min-width: 1280px) { .ak-header__bar { max-width: 88rem; } }

.ak-nav { display: none; align-items: center; gap: 1.375rem; }
@media (min-width: 1024px) { .ak-nav { display: flex; } }
@media (min-width: 1024px) and (max-width: 1279px) {
    .ak-header__right { gap: 1rem; }
    .ak-nav { gap: 1rem; }
}
/* Desktop menu (from 1024 px, D45): the slogan is always shown (Nataliya, 2026-11-05: it was missing on iPad landscape).
   Room between logo and menu, measured: 108 px at 1024, 264 px at 1180, 328 px at 1280; name 306 px on one line, slogan 206 px.
   1024-1179 px: slogan only, wrapped evenly; 1180-1279 px: name on two balanced lines and the slogan; from 1280 px: name on one line. */
@media (min-width: 1024px) and (max-width: 1439px) {
    .ak-header .ak-brand__tagline { white-space: normal; overflow: visible; text-wrap: balance; line-height: 1.25; }
    .ak-header .ak-brand__name { text-wrap: balance; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
    .ak-header__bar { gap: 1rem; }
    .ak-header .ak-brand { gap: .625rem; }
    .ak-header .ak-brand__name { display: none; }
    .ak-header .ak-brand__tagline { margin-top: 0; letter-spacing: .03em; }   /* two lines at 1024 px (needs 121 px), as akos-chem.de tightens the name there */
}
@media (min-width: 1440px) { .ak-header__bar { max-width: 96rem; } }

.ak-nav__link { display: inline-flex; align-items: center; gap: .25rem; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: .01em; text-decoration: none; border-radius: var(--ak-radius-sm); white-space: nowrap; transition: opacity .15s ease-out; }
.ak-nav__link:hover { opacity: .8; }
.ak-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ak-ext { flex: none; opacity: .8; }

.ak-header__actions { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 768px) { .ak-header__actions { gap: .75rem; } }

.ak-pill { position: relative; display: inline-flex; align-items: center; gap: .375rem; flex: none; padding: .4375rem .875rem; border: 1px solid #fff; border-radius: 999px; background: #fff; color: var(--ak-brand); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: background-color .15s ease-out, transform .15s ease-out; }
.ak-pill::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; } /* 44 px touch target */
.ak-pill:hover { background: #f3e8e8; }
.ak-pill:active { transform: scale(.96); }
.ak-pill.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.ak-pill svg { flex: none; }
/* Sign In: white outline on red, so Request List stays the main header action. */
.ak-pill--outline { background: transparent; color: #fff; box-shadow: none; }
.ak-pill--outline:hover { background: rgba(255, 255, 255, .12); }
/* Sign In / Account without a frame: icon and text only (Nataliya, 2026-11-05, D45). */
#btn_navigation_signin { border-color: transparent; }
/* Phones: Sign In shows the icon only, Request List the cart and the count below 420 px
   (the labels stay for screen readers). */
@media (max-width: 479px) {
    .ak-pill--outline { padding: .4375rem; }
    .ak-pill--outline .ak-pill__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 419px) {
    .ak-pill .ak-pill__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (min-width: 768px) { .ak-pill { padding: .625rem 1.25rem; font-size: 15px; } }
@media (min-width: 768px) and (max-width: 1023px) {
    .ak-pill { padding: .625rem .875rem; }
    .ak-header__bar { gap: 1rem; }
    .ak-header__actions { gap: .5rem; }
}

/* Day / night switch: moon in the day theme, sun at night (as on akos-chem.de, D46). */
.ak-theme { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--ak-radius-sm); background: transparent; color: var(--ak-on-brand); cursor: pointer; transition: background-color .15s ease-out; }
.ak-theme:hover { background: rgba(255, 255, 255, .1); }
.ak-theme:active { background: rgba(255, 255, 255, .2); }
.ak-theme__sun { display: none; }
html.dark .ak-theme__moon { display: none; }
html.dark .ak-theme__sun { display: block; }
@media (min-width: 1024px) { .ak-theme { width: 2.5rem; height: 2.5rem; } }
.ak-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--ak-radius-sm); background: transparent; color: #fff; cursor: pointer; }
.ak-menu-toggle:hover { background: rgba(255, 255, 255, .1); }
@media (min-width: 1024px) { .ak-menu-toggle { display: none; } }

.ak-mobile-nav { border-top: 1px solid rgba(255, 255, 255, .15); background: var(--ak-header); max-height: calc(100vh - 6rem); overflow-y: auto; }
.ak-mobile-nav .ak-container { display: flex; flex-direction: column; gap: .25rem; padding-top: 1rem; padding-bottom: 1rem; }
.ak-mobile-nav__link { display: flex; align-items: center; gap: .375rem; min-height: 44px; padding: .5rem; border-radius: var(--ak-radius-sm); color: #fff; font-size: 15px; text-decoration: none; }
@media (min-width: 768px) { .ak-mobile-nav__link { font-size: 17px; } }
.ak-mobile-nav__link:hover { background: rgba(255, 255, 255, .1); }
.ak-mobile-nav__link[aria-current="page"] { background: rgba(255, 255, 255, .2); }
@media (min-width: 1024px) { .ak-mobile-nav { display: none !important; } }

/* ---------- Footer: logo, LinkedIn, catalogue links, legal links, copyright ---------- */
.ak-footer { background: var(--ak-header); color: #fff; margin-top: 0; }
.ak-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 2.5rem; padding-bottom: 1.5rem; }
.ak-footer__logo { display: inline-flex; }
.ak-footer__logo img { height: 2.75rem; width: auto; max-width: none; }
@media (min-width: 768px) { .ak-footer__logo img { height: 3.25rem; } }
.ak-footer__linkedin { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: rgba(255, 255, 255, .9); font-size: 14px; text-decoration: none; }
.ak-footer__linkedin:hover { color: #fff; }
.ak-footer__nav { list-style: none; margin: 0; padding: 0 0 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
@media (min-width: 768px) { .ak-footer__nav { display: flex; flex-wrap: wrap; gap: .25rem 2rem; } }
.ak-footer__link { display: inline-flex; align-items: center; gap: .25rem; min-height: 40px; color: rgba(255, 255, 255, .9); font-size: 15px; text-decoration: none; }
.ak-footer__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ak-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .15); }
.ak-footer__bottom .ak-container { padding-top: 1.25rem; padding-bottom: 1.5rem; }
.ak-footer__legal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.ak-footer__legal-link { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .85); font: 400 14px/1.3 var(--ak-font-sans); text-align: left; text-decoration: none; cursor: pointer; }
.ak-footer__legal-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ak-footer__copy { margin: 1rem 0 0; font-size: 12px; color: #fff; }
@media (min-width: 768px) {
    .ak-footer__legal { display: flex; flex-wrap: wrap; gap: 0 1rem; }
    .ak-footer__legal li { display: flex; align-items: center; }
    .ak-footer__legal li + li::before { content: "·"; margin-right: 1rem; color: rgba(255, 255, 255, .4); }
    .ak-footer__legal-link { min-height: 0; font-size: 13px; }
    .ak-footer__copy { margin-top: .75rem; }
}
/* iPad landscape and desktop: the copyright on the row of the legal links, on the right (Nataliya, 2026-11-06) */
@media (min-width: 1024px) {
    .ak-footer__bottom .ak-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.25rem; }
    .ak-footer__copy { margin: 0; flex: none; font-size: 12px; white-space: nowrap; }
    .ak-footer__legal { flex-wrap: nowrap; gap: 0 .75rem; }
    .ak-footer__legal-link { white-space: nowrap; }
    .ak-footer__legal li + li::before { margin-right: .75rem; }
}

/* ---------- Catalogue page layout ---------- */
/* One vertical rhythm on every page (D46): --ak-gap between sections and before the footer;
   the hero (eyebrow, title, lede) has the same spacing everywhere. */
.ak-main { display: block; --ak-gap: 3rem; }
@media (min-width: 768px) { .ak-main { --ak-gap: 4.5rem; } }
.ak-hero { padding: 2.5rem 1.5rem 2rem; text-align: center; }
@media (min-width: 768px) { .ak-hero { padding-top: 4rem; padding-bottom: 3rem; } }
.ak-hero > p, .ak-hero__lede { max-width: 40rem; margin: 1rem auto 0; color: var(--ak-text-2); font-size: 16px; line-height: 1.6; text-wrap: balance; }
@media (min-width: 768px) { .ak-hero > p, .ak-hero__lede { font-size: 17px; } }
.ak-hero__line { display: block; text-wrap: balance; }  /* one sentence group per line (Home lede, Nataliya 2026-11-06) */
@media (max-width: 767.98px) { .ak-hero__wide { display: none; } }  /* phones: without "Thousands of possibilities." (Nataliya, 2026-11-06) */
@media (min-width: 768px) { .ak-hero__phone { display: none; } }  /* shorter phone text of a lede (Selection, Nataliya 2026-11-06) */
@media (min-width: 768px) { .ak-hero > .ak-hero__lede--wide { max-width: 46rem; } }  /* long lede in two lines from 768 px (Selection) */
.ak-doc { padding-bottom: var(--ak-gap); }
.ak-page-head { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.ak-page-head h1 { font-size: 1.75rem; }
.ak-page-head p { margin: .5rem 0 0; color: var(--ak-text-2); max-width: 46rem; }
.ak-eyebrow { display: inline-block; margin-bottom: .75rem; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ak-accent-fg); }
/* one size for every eyebrow on every page, the size of the Home offer line (Nataliya, 2026-11-06) */
@media (min-width: 768px) { .ak-eyebrow { font-size: 14px; letter-spacing: .2em; } }
@media (min-width: 768px) { .ak-page-head { padding-top: 4rem; padding-bottom: 2rem; } .ak-page-head h1 { font-size: 2.25rem; } }

.ak-card { background: var(--ak-surface); border: 1px solid var(--ak-hairline); border-radius: var(--ak-radius); padding: 1.25rem; }
@media (min-width: 768px) { .ak-card { padding: 1.75rem; } }

.ak-section { padding-top: 2rem; padding-bottom: 2rem; }
.ak-section h2 { font-size: 1.5rem; }
.ak-section__lead { margin: .5rem 0 0; color: var(--ak-text-2); max-width: 46rem; }

.ak-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Buttons: one shape, one size per screen width, on every page (D46) ----------
   As on akos-chem.de (akoa Buttons.tsx, CatalogLink.tsx): a pill, Inter 500 14 px.
   Height by screen width only: 40 px on phones (touch area 44 px), 42 px on tablets, 44 px from 1024 px.
   Colours: default = AKos red with a thin light inner line (main action, also on red bands);
   --ghost = white with a faint red outline (other actions); --light = white on red bands.
   --sm and --outline-light are kept as names for older markup and look like the default size / red. */
.ak-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 40px; padding: .375rem .75rem; flex-shrink: 0;
    border: 1px solid transparent; border-radius: 999px !important; background: var(--ak-brand); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    font: 500 14px/1.2 var(--ak-font-sans) !important; letter-spacing: .005em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
    -webkit-appearance: none; appearance: none; transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out, color .15s ease-out, transform .15s ease-out; }
.ak-btn::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; } /* 44 px touch area on phones */
@media (min-width: 768px) { .ak-btn { min-height: 42px; padding: .375rem 1.125rem; } .ak-btn::after { display: none; } }
@media (min-width: 1024px) { .ak-btn { min-height: 44px; padding: .5rem 1.25rem; } }
/* One width too (Nataliya, 2026-11-06): every button is at least as wide as the widest one- or two-word label
   ("Substructure Search": 165 / 177 / 181 px measured; phones: 12 px side padding so two fit side by side in 342 px), so labels of one or two words all get the same width;
   only labels of three or more words may be wider. The header cart pill is not an .ak-btn and keeps its own size. */
.ak-btn { min-width: var(--ak-btn-w); }
:root { --ak-btn-w: 167px; }
@media (min-width: 768px) { :root { --ak-btn-w: 178px; --ak-ctl-h: 42px; } }
@media (min-width: 1024px) { :root { --ak-btn-w: 182px; --ak-ctl-h: 44px; } }
.ak-btn:hover { background: var(--ak-brand-hover); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.ak-btn:active { transform: scale(.97); background: var(--ak-brand-active); }
.ak-btn:focus-visible { outline: 2px solid var(--ak-accent-fg); outline-offset: 2px; }
/* Pop-up of a button whose action is not possible yet (data-blocked, scripts/layout.js AKOS_BLOCK). */
.ak-tip { position: absolute; z-index: 3000; max-width: min(20rem, calc(100vw - 16px)); padding: .625rem .875rem; border-radius: var(--ak-radius-sm);
    background: var(--ak-brand); color: #fff; font: 500 14px/1.4 var(--ak-font-sans); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); animation: ak-pop .18s ease-out; }
.ak-tip::before { content: ""; position: absolute; left: calc(var(--ak-tip-x, 50%) - 5px); width: 10px; height: 10px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.ak-tip.is-below::before { top: -5px; }
.ak-tip.is-above::before { bottom: -5px; }
.ak-btn[data-blocked] { cursor: help; }
/* Button spinner (moved from forms.css: also used by the loader below). */
.ak-spin { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: ak-spin .8s linear infinite; }
@keyframes ak-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ak-spin { animation-duration: 2.4s; } }
/* Own controls of Home and Structure Search (scripts/ak-ui.js, D114; replaced jqWidgets, A12), in the style of the form
   error tips (.ak-err): card colour, black text (milk at night). */
.ak-hint-tip { position: absolute; z-index: 3000; max-width: min(20rem, calc(100vw - 16px)); padding: .5rem .8rem; border-radius: var(--ak-radius-sm);
    background: var(--ak-surface); color: var(--ak-ink); font: 600 13px/1.4 var(--ak-font-sans); box-shadow: 0 2px 10px var(--ak-shadow), 0 0 0 1px var(--ak-hairline); animation: ak-pop .18s ease-out; }
.ak-hint-tip::before { content: ""; position: absolute; left: calc(var(--ak-tip-x, 50%) - 5px); width: 10px; height: 10px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.ak-hint-tip.is-below::before { top: -5px; box-shadow: -1px -1px 0 0 var(--ak-hairline); }
.ak-hint-tip.is-above::before { bottom: -5px; box-shadow: 1px 1px 0 0 var(--ak-hairline); }
/* in the middle of the empty editor: red letters, no frame (Nataliya, 2026-11-07); the editor stays light at night, so the day red */
.ak-hint-tip.is-center { padding: 0; background: transparent; box-shadow: none; color: var(--ak-brand); font-size: 16px; text-align: center; }
.ak-hint-tip.is-center::before { display: none; }
.ak-band-err { position: relative; width: fit-content; max-width: 100%; margin: 0; padding: .5rem .8rem; border-radius: var(--ak-radius-sm); justify-self: start;
    background: var(--ak-surface); color: var(--ak-ink); font: 600 13px/1.4 var(--ak-font-sans); box-shadow: 0 2px 10px var(--ak-shadow), 0 0 0 1px var(--ak-hairline); animation: ak-pop .18s ease-out; }
.ak-band-err::before { content: ""; position: absolute; top: -5px; left: 1.125rem; width: 10px; height: 10px; background: inherit; border-radius: 2px; transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--ak-hairline); }
@media (min-width: 600px) { .ak-search-band__row .ak-band-err { grid-column: 1; grid-row: 2; } }
.ak-draw__actions + .ak-band-err { margin-top: 1rem; }   /* Structure Search under the editor: under the search buttons */
#messagenotification { display: none !important; }   /* holds the notice text for akNotification; never shown itself */
.ak-loader-modal { position: fixed; inset: 0; z-index: 4000; background: rgba(23, 24, 28, .45); }
.ak-loader { position: fixed; top: 50%; left: 50%; z-index: 4001; display: flex; flex-direction: column; align-items: center; gap: .75rem; min-width: 9rem; padding: 1.25rem 1.5rem;
    border-radius: var(--ak-radius-sm); background: var(--ak-surface); color: var(--ak-ink); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); transform: translate(-50%, -50%); font: 500 14px/1.3 var(--ak-font-sans); }
.ak-loader[hidden], .ak-loader-modal[hidden] { display: none; }
.ak-loader .ak-spin { width: 28px; height: 28px; border-width: 3px; border-color: var(--ak-hairline); border-top-color: var(--ak-accent-fg); }
@media (prefers-reduced-motion: reduce) { .ak-hint-tip, .ak-band-err { animation: none; } }
@keyframes ak-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Disabled buttons keep their red or white (Nataliya, 2026-11-06: no pink, no grey): no fading, only no reaction. */
.ak-btn[disabled] { opacity: 1; cursor: not-allowed; transform: none; }
.ak-btn[disabled]:not(.ak-btn--ghost) { background: var(--ak-brand); color: #fff; }
.ak-btn--ghost[disabled] { background: var(--ak-white); color: var(--ak-btn-white-fg); }
/* Phones: button rows centred with an 8 px gap. Two buttons of one width fill the 342 px row exactly, so both sides
   keep the same distance from the screen edge; a single button in a row sits in the middle (Nataliya, 2026-11-06). */
@media (max-width: 599px) {
    .ak-actions, .ak-btn-group { justify-content: center; column-gap: .5rem; }
    .ak-btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }   /* a button alone in its row: centred */
}
.ak-btn--ghost { background: var(--ak-white); color: var(--ak-btn-white-fg); border-color: rgba(138, 30, 30, .15); box-shadow: none; }
/* Ghost buttons stay white on hover: the line gets stronger, no pink fill (Nataliya, 2026-11-05, D39). */
.ak-btn--ghost:hover { background: var(--ak-white); color: var(--ak-btn-white-fg); border-color: rgba(138, 30, 30, .45); box-shadow: none; }
.ak-btn--ghost:active { background: var(--ak-white); color: var(--ak-btn-white-fg); border-color: var(--ak-accent-line); }
html.dark .ak-btn--ghost { border-color: transparent; }
html.dark .ak-btn--ghost:hover, html.dark .ak-btn--ghost:active { border-color: var(--ak-brand); }
.ak-btn--light { background: #fff; color: var(--ak-brand); border-color: #fff; box-shadow: none; }
.ak-btn--light:hover { background: #fff; color: var(--ak-brand-hover); border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); }
.ak-btn--light:active { background: #f3ebdd; }
.ak-btn--outline-light:focus-visible, .ak-btn--light:focus-visible { outline-color: #fff; }
.ak-header .ak-btn:focus-visible, .ak-search-band .ak-btn:focus-visible, .ak-setall .ak-btn:focus-visible, .ak-simres__report .ak-btn:focus-visible { outline-color: #fff; }
.ak-btn--cell { width: 92%; max-width: 168px; padding-left: .5rem; padding-right: .5rem; white-space: normal; }

/* jqWidgets buttons: same size and colours; the !important rules beat the inline width/height and theme colours. */

.ak-btn-row { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.ak-btn-row .ak-btn { width: 100%; }
@media (min-width: 600px) { .ak-btn-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Notices: pale red instead of the old bright blue banners (plan v2, section 02). */
.ak-notices { width: 100%; max-width: 78rem; margin: 0 auto; padding: .75rem 1.5rem 0; }
.ak-notices:empty { padding: 0; }


.ak-card--flush { padding: 0 !important; overflow: hidden; }

/* ---------- Compound Search: service tiles (plan v2, section 03) ---------- */
.ak-tiles { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 600px) { .ak-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ak-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ak-tile { display: flex; flex-direction: column; overflow: hidden; background: var(--ak-surface); border: 1px solid var(--ak-hairline); border-radius: var(--ak-radius); color: inherit; text-decoration: none; transition: box-shadow .2s ease-out, transform .2s ease-out, border-color .2s; }
.ak-tile:hover { box-shadow: 0 10px 24px rgba(23, 24, 28, .08); transform: translateY(-2px); border-color: var(--ak-ghost-line); }
.ak-tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 600px) { .ak-tile img { aspect-ratio: 4 / 3; } }
.ak-tile__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.125rem 1.25rem; flex: 1; }
.ak-tile__title { font-family: var(--ak-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--ak-accent-fg); }
.ak-nowrap { white-space: nowrap; }
.ak-tile__text { font-size: 14px; color: var(--ak-text-2); margin: 0; flex: 1; }
/* Link arrow: a round button at the bottom right; the whole tile is the link. */
.ak-tile__arrow { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-top: .5rem; color: var(--ak-accent-fg); transition: transform .2s ease-out; }
.ak-tile:hover .ak-tile__arrow, .ak-tile:focus-visible .ak-tile__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ak-tile:hover .ak-tile__arrow, .ak-tile:focus-visible .ak-tile__arrow { transform: none; } }
/* Phones: picture, title and arrow only; the description stays for screen readers and search engines (A41, Nataliya 2026-11-07). */
@media (max-width: 599px) {
    .ak-tile__body { flex-direction: row; align-items: center; justify-content: space-between; padding: .75rem 1rem; }
    .ak-tile__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .ak-tile__arrow { margin-top: 0; flex: none; }
}

.ak-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.ak-stat__value { font-family: var(--ak-font-display); font-weight: 700; font-size: 2rem; color: var(--ak-accent-fg); }
html.dark .ak-stat__value { color: var(--ak-night-red); }
.ak-stat__label { font-size: 13px; color: var(--ak-muted); }
@media (min-width: 768px) { .ak-stat__value { font-size: 3rem; } .ak-stat__label { font-size: 15px; } }

/* Closing call to action on its own full-width band, a shade darker than the page, with a hairline on top (akos-chem.de CTASection, Nataliya 2026-11-05). */
.ak-cta-band { margin-top: var(--ak-gap); border-top: 1px solid var(--ak-hairline); background: var(--ak-cta-section); }
/* Closing call to action: heading, text and button with one even gap (Nataliya, 2026-11-05: they were 8 and 22 px apart). */
.ak-cta { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .ak-cta { gap: 2rem; } }
.ak-cta h2 { margin: 0; font-size: 1.5rem; }
.ak-cta p { margin: 0; color: var(--ak-muted); text-wrap: balance; }
/* Day: #6e7278 on the cta band #f7f4ee is 4.4:1; a shade darker reaches WCAG AA 4.5:1 (Nataliya, 2026-11-08, A20). */
html:not(.dark) .ak-cta p { color: #6c7076; }

/* ---------- Compound Search hero title (sizes as akos-chem.de PageHero) ----------
   Phones: at most 2 lines. Tablets and desktops: one line; the size follows the screen width
   (the title is about 20 em wide) and stops at 52 px. */
/* H1 that carries the label above it (Home, A63): the label keeps its look, the title its size. */
.ak-hero__h1 { margin: 0; font: inherit; letter-spacing: normal; }
.ak-hero__h1 .ak-eyebrow { font-family: var(--ak-font-sans); line-height: 1.5; }
.ak-hero__h1 .ak-hero__title { display: block; font-family: var(--ak-font-display); font-weight: 700; letter-spacing: -0.02em; }
.ak-hero__title { max-width: 22ch; margin: 0 auto; font-size: clamp(22px, 6vw, 30px); line-height: 1.2; text-wrap: balance; }
@media (min-width: 768px) { .ak-hero__title { max-width: none; white-space: nowrap; font-size: min(52px, calc((100vw - 6rem) / 20.5)); line-height: 1.15; } }
@media (min-width: 1024px) { .ak-hero__title { line-height: 1.1; } }

/* ---------- Compound Search band: full-width red strip ---------- */
.ak-search-band { background: var(--ak-header); color: #fff; }
/* One vertical rhythm in the band (Nataliya, 2026-11-05): equal padding above and below, the same 1 rem between label, field row and hint. */
.ak-search-band__inner { display: flex; flex-direction: column; gap: 1rem; max-width: 60rem; padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 768px) { .ak-search-band__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; } }
.ak-search-band label { display: block; margin: 0; color: #fff; font-weight: 700; font-size: 15px; }
@media (min-width: 768px) { .ak-search-band label { font-size: 16px; } }
.ak-search-band__field { margin-bottom: 0; }
/* Field and Request a Quote in one row, the same size and not full width; stacked on phones (D45). */
.ak-search-band__row { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.ak-search-band__row .ak-search-band__field { margin-bottom: 0; height: auto !important; overflow: visible; border-radius: 999px; }
/* Buttons keep the one size of every page (Nataliya, 2026-11-05: Request a Quote was 52 px and full width);
   the search field takes the button height instead: 40 / 42 / 44 px. */
.ak-search-band { --ak-ctl-h: 40px; }
@media (min-width: 768px) { .ak-search-band { --ak-ctl-h: 42px; } }
@media (min-width: 1024px) { .ak-search-band { --ak-ctl-h: 44px; } }
.ak-search-band .ak-search-band__field, .ak-search-band .ak-search-band__field input { height: var(--ak-ctl-h) !important; min-height: 0 !important; }
.ak-search-band__row { justify-items: center; }
.ak-search-band__row .ak-search-band__field { width: 100%; }
@media (min-width: 600px) { .ak-search-band__row { grid-template-columns: minmax(0, 26rem) auto; align-items: center; } }
.ak-search-band__field input { display: block; position: relative; vertical-align: middle; width: 100% !important; border: 1px solid #fff !important; border-radius: 999px !important; background: #fff !important; color: #0b0d12 !important; font: 400 16px/1.2 var(--ak-font-sans) !important; padding: 0 1.25rem !important; box-shadow: none !important; }
.ak-search-band__field input::placeholder { color: var(--ak-field-ph); opacity: 1; }   /* grey hint, so the empty field does not look filled in (A34, Nataliya 2026-11-07) */
.ak-search-band__field input:focus { outline: 1px solid rgba(255, 255, 255, .4); outline-offset: 2px; }   /* thin light line, as the red buttons on red (Nataliya, 2026-11-07); was 3 px at .6, which looked pink */
.ak-search-band__hint { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .85); overflow-wrap: anywhere; }
/* Home: label, field with button and examples centred on the page (Nataliya, 2026-11-05). */
.ak-search-band--center label, .ak-search-band--center .ak-search-band__hint { text-align: center; text-wrap: balance; }
.ak-search-band--center .ak-search-band__row { justify-content: center; }
/* Nothing found (D99): white text in the band, centred, with Go to Structure Search (white button, red text). */
.ak-search-band__msg { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.ak-search-band__msg[hidden] { display: none; }
.ak-search-band__msg p { margin: 0; max-width: 40rem; font-size: 15px; font-weight: 600; line-height: 1.5; color: #fff; overflow-wrap: anywhere; text-wrap: balance; }

/* ---------- Search box (Structure Search) ---------- */
.ak-search { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.ak-search__input { flex: 1 1 18rem; min-width: 0; }
.ak-search__hint { margin: .75rem 0 0; font-size: 13px; color: var(--ak-muted); }

/* ---------- Text pages: How to Request and the legal documents ---------- */
.ak-doc { max-width: 52rem; }
.ak-doc h2 { font-size: 1.375rem; margin-top: 3rem; }
@media (min-width: 768px) { .ak-doc h2 { font-size: 1.625rem; } }
.ak-doc p, .ak-doc li { color: var(--ak-text-2); line-height: 1.65; text-wrap: pretty; }
.ak-doc a:not(.ak-btn) { color: var(--ak-accent-fg); }
.ak-doc__lead { margin: 1rem 0 0; font-size: 1.0625rem; }

.ak-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: step; }
.ak-steps li { position: relative; padding: 0 0 1.5rem 3.5rem; counter-increment: step; }
.ak-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--ak-brand); color: #fff; font: 600 15px/1 var(--ak-font-display); }
.ak-steps li::after { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.5rem; bottom: .25rem; width: 2px; background: var(--ak-hairline); }
.ak-steps li:last-child { padding-bottom: 0; }
.ak-steps li:last-child::after { display: none; }
.ak-steps h3 { font-size: 1.0625rem; font-weight: 600; color: var(--ak-ink); padding-top: .4rem; }
.ak-steps p { margin: .375rem 0 0; }
.ak-phase { margin: 2rem 0 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--ak-muted); }

.ak-checklist { margin: 1rem 0 0; padding-left: 1.25rem; }
.ak-checklist li { margin-top: .5rem; }
.ak-notes { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 768px) { .ak-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ak-notes h3 { font-size: 1rem; font-weight: 600; color: var(--ak-ink); }
.ak-notes p { margin: .5rem 0 0; font-size: 15px; }
.ak-doc__cta { margin-top: 3rem; }
.ak-doc__cta p { margin: 0 0 1.25rem; }
.ak-doc h3.ak-doc__h3 { margin-top: 1.75rem; font-size: 1.0625rem; font-weight: 600; color: var(--ak-ink); }
.ak-doc ul:not(.ak-steps):not(.ak-checklist) { padding-left: 1.25rem; }
.ak-doc address { font-style: normal; color: var(--ak-text-2); line-height: 1.65; }
.ak-doc__meta { margin: .75rem 0 0; font-size: 14px; color: var(--ak-muted); }
.ak-doc__pdf { margin: 2.5rem 0 0; font-size: 14px; }

/* ---------- Cookie consent banner and settings dialog (scripts/consent.js) ---------- */
.ak-consent { position: fixed; z-index: 2000; left: 1rem; right: 1rem; bottom: 1rem; max-width: 42rem; margin: 0 auto; padding: 1.25rem; border: 1px solid var(--ak-hairline); border-radius: var(--ak-radius-panel); background: var(--ak-surface); color: var(--ak-ink); box-shadow: 0 12px 32px rgba(60, 20, 20, .18); }
@media (min-width: 768px) { .ak-consent { padding: 1.5rem; } }
.ak-consent__title { font-size: 1.125rem; }
.ak-consent__text { margin: .5rem 0 0; font-size: 14px; line-height: 1.55; color: var(--ak-text-2); }
.ak-consent__text a { color: var(--ak-accent-fg); }
.ak-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1rem; }
.ak-consent__link { min-height: 36px; padding: 0 .25rem; border: 0; background: none; color: var(--ak-ink); font: 500 13px/1.2 var(--ak-font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ak-consent-dialog { position: fixed; z-index: 2001; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(23, 24, 28, .45); }
.ak-consent-dialog__panel { position: relative; width: 100%; max-width: 32rem; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.5rem; border-radius: var(--ak-radius-panel); background: var(--ak-surface); color: var(--ak-ink); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.ak-consent-dialog__close { position: absolute; top: .5rem; right: .5rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: none; color: var(--ak-muted); font-size: 1.5rem; cursor: pointer; }
.ak-consent-dialog__close:hover { background: var(--ak-brand-tint); color: var(--ak-ink); }
.ak-consent__options { display: grid; gap: 1rem; margin-top: 1.25rem; }
.ak-consent__option { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.ak-consent__option input { width: 1.125rem; height: 1.125rem; margin-top: .125rem; accent-color: var(--ak-accent-fg); flex: none; }
.ak-consent__option-label { display: block; font-size: 14px; font-weight: 600; }
.ak-consent__option-desc { display: block; font-size: 13px; color: var(--ak-muted); }

/* ---------- Contact page ---------- */
.ak-contact-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .ak-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ak-contact-grid dl { margin: 0; }
.ak-contact-grid dt { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ak-muted); margin-top: 1rem; }
.ak-contact-grid dt:first-child { margin-top: 0; }
.ak-contact-grid dd { margin: .25rem 0 0; }
.ak-contact-grid dd a { color: var(--ak-accent-fg); }

/* ---------- Grids and windows on small screens ---------- */
/* Wide tables scroll inside their own box, never the whole page. */
.ak-scroll-x { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* jqWidgets: brand font and colours. */

/* Start page: "How we work for you", one-line drawings, black lines, red accents and captions (D19). */
/* Size controls: change these two values to make the drawing larger or smaller. */
.ak-flow { --ak-flow-width: 100%; --ak-flow-width-phone: 340px; text-align: center; margin-top: 0; padding-top: 2.5rem; padding-bottom: 2.75rem;
  /* full-width band in the card colour, no border; the drawing's fills are white to match */
  background: var(--ak-surface); box-shadow: 0 0 0 100vmax var(--ak-card); clip-path: inset(0 -100vmax); }
.ak-flow__figure { margin: 1.75rem auto 0; }
@media (min-width: 768px) { .ak-flow__figure { margin-top: 2.25rem; } }
.ak-flow__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ak-flow__pic { display: none; max-width: var(--ak-flow-width); margin: 0 auto; }
/* From 768 px Nataliya's drawing as a picture, a night copy in the site colours (D104); phones keep the vertical line drawing. */
.ak-flow__img { display: block; width: 100%; height: auto; }
.ak-flow__img--night { display: none; }
html.dark .ak-flow__img--day { display: none; }
html.dark .ak-flow__img--night { display: block; }
.ak-flow__svg--v { max-width: var(--ak-flow-width-phone); margin: 0 auto; }
@media (min-width: 768px) { .ak-flow { padding-top: 4rem; padding-bottom: 4rem; } }
/* title: three stepped lines on phones, one line from 768 px */
.ak-flow__title { width: fit-content; margin: 0 auto; text-align: left; line-height: 1.25; }
.ak-flow__title span { display: block; }
.ak-flow__title span:nth-child(2) { padding-left: 1.2em; }
.ak-flow__title span:nth-child(3) { padding-left: 2.4em; }
@media (min-width: 768px) {
  .ak-flow__title { text-align: center; white-space: nowrap; }
  .ak-flow__title span { display: inline; padding-left: 0 !important; }
}
@media (min-width: 768px) { .ak-flow__pic { display: block; } .ak-flow__svg--v { display: none; } }
.ak-flow__label { font: 500 16px var(--ak-font-sans); fill: var(--ak-accent-fg); }
/* Night: the black lines of the drawings in milk, the red accents lighter, white shapes in the card colour (D46). */
/* Night drawing (D47): milk lines at one screen thickness, night red, caramel paper details, solid night paper. */
.ak-flow__n { display: none; }
html.dark .ak-flow__n { display: inline; }
html.dark .ak-flow__svg [stroke="#17181C"] { stroke: var(--ak-ink); }
html.dark .ak-flow__svg [fill="#17181C"] { fill: var(--ak-ink); }
html.dark .ak-flow__svg [stroke="#8A1E1E"] { stroke: var(--ak-night-red); }
html.dark .ak-flow__svg [fill="#8A1E1E"] { fill: var(--ak-night-red); }
html.dark .ak-flow__svg [fill="#FFFFFF"] { fill: var(--ak-night-paper); }
html.dark .ak-flow__svg rect[fill="#FFFFFF"] { fill: var(--ak-surface); }
html.dark .ak-flow__svg [stroke="#FFFFFF"] { stroke: var(--ak-night-paper); }
html.dark .ak-flow__svg .ak-flow__k, html.dark .ak-flow__svg [stroke-width=".6"] { stroke: var(--ak-night-caramel); }
html.dark .ak-flow__tape { fill: var(--ak-night-caramel); }
html.dark .ak-flow__svg :is([stroke-width=".6"], [stroke-width="1"], [stroke-width="1.1"], [stroke-width="1.2"]):not([class^="atom"]) { vector-effect: non-scaling-stroke; stroke-width: 1.3px; }
html.dark .ak-flow__svg :is([stroke-width="1.5"], [stroke-width="2"], [stroke-width="2.2"], [stroke-width="4.411764705882352"], [stroke-width="5.5"]) { vector-effect: non-scaling-stroke; stroke-width: 1.9px; }
html.dark .ak-flow__svg :is([stroke-width="2.6"], [stroke-width="3"], [stroke-width="5"]) { vector-effect: non-scaling-stroke; stroke-width: 2.4px; }
html.dark .ak-flow__svg [stroke-width=".6"] { stroke-width: 1px; }
/* Chemical structures in the night drawing are milk (Nataliya, D47); the orbit molecules carry inline RDKit styles. */
html.dark .ak-flow__svg path.ak-flow__mol, html.dark .ak-flow__svg .ak-flow__mol path { stroke: var(--ak-ink) !important; }
html.dark .ak-flow__svg text.ak-flow__mol, html.dark .ak-flow__svg .ak-flow__mol path[class^="atom"] { fill: var(--ak-ink) !important; }
html.dark .ak-flow__svg .ak-flow__mol path[class^="bond"] { vector-effect: non-scaling-stroke; stroke-width: 1.2px !important; }
html.dark .ak-flow__route { vector-effect: non-scaling-stroke; stroke-width: 1.8px; }
.ak-flow__route { fill: none; stroke: var(--ak-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Structure grid ("chessboard"), scripts/structure-grid.js ----------
   Used by the structure list of Structure Search; meant for similarity results too.
   Selection: a round button in the corner, white with a grey ring; selected = AKos red with a white tick. */
.ak-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .ak-grid { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1rem; } }
.ak-grid__card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--ak-surface); border: 1px solid var(--ak-hairline); border-radius: var(--ak-radius); overflow: hidden; transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.ak-grid__card.is-selected { border-color: var(--ak-accent-fg); box-shadow: 0 0 0 1px var(--ak-accent-line); }
/* Indigo draws every structure with the same bond length; small molecules keep that size, large ones shrink to fit. */
.ak-grid__img { height: 9.5rem; display: flex; align-items: center; justify-content: center; padding: .5rem; background: var(--ak-surface); border-bottom: 1px solid var(--ak-hairline); }
.ak-grid__img { position: relative; }
.ak-grid__img.has-score { padding-top: 2.25rem; }
.ak-grid__score { position: absolute; top: .5rem; left: .5rem; min-width: 2.75rem; padding: .25rem .5rem; border-radius: 999px; background: var(--ak-brand); color: #fff; font: 700 13px/1 var(--ak-font-sans); text-align: center; font-variant-numeric: tabular-nums; }
.ak-grid__img img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.ak-grid__pick { position: absolute; top: .5rem; right: .5rem; width: 1.75rem; height: 1.75rem; padding: 0; border: 2px solid var(--ak-field-line); border-radius: 50%; background: var(--ak-surface); cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, transform .15s ease-out; }
.ak-grid__pick::after { content: ""; position: absolute; inset: -.5rem; }   /* 44 px touch target */
.ak-grid__pick:hover { border-color: var(--ak-accent-fg); }
.ak-grid__pick:active { transform: scale(.92); }
.ak-grid__pick[aria-pressed="true"] { background: var(--ak-brand); border-color: var(--ak-accent-fg); }
.ak-grid__pick[aria-pressed="true"]::before { content: ""; position: absolute; left: 50%; top: 45%; width: .4rem; height: .75rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
.ak-grid__body { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .75rem .5rem; min-width: 0; }
.ak-grid__formula { font-weight: 600; font-size: 15px; color: var(--ak-ink); }
.ak-grid__formula sub { font-size: .72em; }
.ak-grid__id { font-size: 13px; font-weight: 600; color: var(--ak-accent-fg); overflow-wrap: anywhere; }
.ak-grid__line { font-size: 13px; color: var(--ak-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-grid__actions { display: flex; gap: .25rem; margin-top: auto; padding: 0 .375rem .375rem; }
.ak-grid__action { min-height: 36px; padding: 0 .5rem; border: 0; border-radius: var(--ak-radius-sm); background: transparent; color: var(--ak-accent-fg); font: 600 13px/1 var(--ak-font-sans); cursor: pointer; }
.ak-grid__action:hover { background: var(--ak-brand-tint); }
/* Text links on every page: AKos red and bold, never the browser's blue or purple for visited links (Nataliya, 2026-11-06).
   :where() keeps the rule weak, so links with their own colour (white on the error band, footer, buttons) stay as they are. */
.ak-main :where(a:not([class])), .ak-main :where(a:not([class])):visited { color: var(--ak-accent-fg); font-weight: 600; text-underline-offset: 2px; }
.ak-grid__empty { margin: 0; padding: 1.5rem; border: 0; border-radius: var(--ak-radius); color: var(--ak-accent-fg); font-size: 14px; text-align: center; }

/* ---------- Night theme: details (D46) ---------- */
/* Structure drawings are black lines on white (the server PNGs have a white background): at night they keep
   a white plate, and a dimming layer in the night background brown on top tones plate and drawing down together, so no white box stands out
   on the dark page (Nataliya, 2026-11-07). The score badge stays above the layer. */
html.dark .ak-grid__img, html.dark .ak-sel__img, html.dark .ak-ord__img { position: relative; background: #fff; border-radius: var(--ak-radius-sm); }
html.dark .ak-grid__img { border-radius: 0; }
html.dark .ak-sel__img, html.dark .ak-ord__img { box-sizing: border-box; padding: .375rem; }
html.dark .ak-grid__img::after, html.dark .ak-sel__img::after, html.dark .ak-ord__img::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--ak-struct-dim); pointer-events: none; }
html.dark .ak-grid__score { z-index: 2; }
:root { --ak-struct-dim: rgba(30, 22, 19, .2); }   /* night background brown (#1e1613), not black (Nataliya, 2026-11-07) */
/* The Ketcher editor keeps its own light look; at night it gets a milk frame. */
html.dark #ketcher { border-color: var(--ak-hairline); }
/* Text pages (How to Request, Quality, legal pages): the column centred on the page and the page head centred,
   like the heroes of the other pages; How to Request notes without a frame (Nataliya, 2026-11-06, D80). */
.ak-doc { margin-left: auto; margin-right: auto; }
.ak-doc .ak-page-head { text-align: center; }
.ak-doc .ak-page-head p { margin-left: auto; margin-right: auto; }
.ak-notes .ak-card { border: 0; }
/* Contents of the legal pages (A45, Nataliya 2026-11-07): links to the sections, numbered as the sections themselves
   are; on a card without a frame, red links as everywhere (D60). */
.ak-toc { margin: 1.5rem 0 0; padding: 1rem 1.25rem; border-radius: var(--ak-radius-panel); background: var(--ak-surface); }
.ak-doc .ak-toc__title { margin: 0 0 .5rem; font-family: var(--ak-font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--ak-ink); }
.ak-toc__list { margin: 0; padding: 0; list-style: none; columns: 2 16rem; column-gap: 2rem; }
.ak-toc__list li { break-inside: avoid; padding: .125rem 0; font-size: 14px; line-height: 1.5; }
.ak-doc .ak-toc__list a { font-weight: 600; text-decoration: none; }
.ak-doc .ak-toc__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ak-doc h2[id] { scroll-margin-top: 6rem; }   /* the sticky header does not cover the section heading */
/* Short pages: the footer reaches the bottom of the window, no strip of page colour below it (A47, Nataliya 2026-11-07).
   The page is a full-height column; the main part takes the free height. Long pages are unchanged. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > * { flex-shrink: 0; }
body > main { flex: 1 0 auto; }