/* K.AI Tandvård: all CSS of the site. No style="" anywhere and no <style> blocks: the CSP says style-src 'self'
   (tests/Guard/NoInlineStyleGuardTest). Layout with Bootstrap's grid and utilities; the look with the kai-* classes
   here. Colours are the palette of the first draft: a cool light background, white cards, navy buttons, teal accents. */

:root {
    /* The sticky top bar's height: whatever sticks or is scrolled to under it keeps clear of it. Not in the side
       panel's frame, which has no top bar. */
    --kai-head: 3.1rem;
    --kai-bg: #f5f7fb;
    --kai-card: #ffffff;
    --kai-line: #e1e7f0;
    --kai-navy: #1c3d6e;
    --kai-navy-dark: #15305a;
    --kai-blue: #2f7fc9;
    --kai-blue-soft: #e6f0fb;
    --kai-teal: #22a3b5;
    --kai-ink: #1b2430;
    --kai-muted: #5f6c7d;
    --kai-faint: #9aa5b4;
    --kai-green: #2bb673;
    --kai-red: #d64545;
    --kai-amber: #e8a317;
    --kai-radius: 16px;
    --kai-shadow: 0 1px 2px rgba(27, 36, 48, .04), 0 8px 24px rgba(27, 36, 48, .06);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--kai-ink);
    --bs-body-bg: var(--kai-bg);
    --bs-primary: var(--kai-navy);
    --bs-primary-rgb: 28, 61, 110;
    --bs-link-color: var(--kai-blue);
    --bs-link-color-rgb: 47, 127, 201;
    --bs-link-hover-color: var(--kai-navy);
    --bs-link-hover-color-rgb: 28, 61, 110;
    --bs-border-color: var(--kai-line);
    --bs-border-radius: 10px;
}

html { scrollbar-gutter: stable; }
html { scroll-padding-top: var(--kai-head); }   /* #anchors and scrollIntoView() stop under the top bar */
html:has(.kai-body.is-embedded) { --kai-head: 0px; }
.kai-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--kai-bg); color: var(--kai-ink); }
.kai-main { flex: 1 0 auto; padding-bottom: 3rem; }
.container { max-width: 1080px; }
/* The top bar, the tool strip and the footer are 1440 px on every page, so the logo and Upptäck Knowyn stay where
   they are when a visitor goes from a tool to a fact sheet or the About pages. The page between them keeps 1080 px,
   except on the tool pages ($page['wide'] in templates/site/header.php), whose tables and graph use the width too.
   What is read rather than scanned keeps its measure there: the lead under the title, and the filter tiles on
   Begränsningar, which would otherwise stretch into empty boxes. */
.kai-topbar .container, .kai-toolbar .container, .kai-footer .container { max-width: 1440px; }
.kai-body.is-wide .container { max-width: 1440px; }
.kai-body.is-wide .kai-page-lead { max-width: 60rem; }
.kai-body.is-wide .kai-lim-cards { max-width: 60rem; }

.kai-skip:focus { position: absolute; top: .5rem; left: .5rem; z-index: 1100; padding: .5rem .75rem; background: var(--kai-card); border-radius: 8px; }

/* Icons (Lucide): 1.15 times the text size, the line 2 px */
.icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }

/* ===== Buttons ===== */
.btn-primary { --bs-btn-bg: var(--kai-navy); --bs-btn-border-color: var(--kai-navy); --bs-btn-hover-bg: var(--kai-navy-dark);
    --bs-btn-hover-border-color: var(--kai-navy-dark); --bs-btn-active-bg: var(--kai-navy-dark); --bs-btn-active-border-color: var(--kai-navy-dark);
    --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.25rem; --bs-btn-font-weight: 600; }
.btn-lg { --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .7rem; }

/* ===== Top bar ===== */
.kai-topbar { position: sticky; top: 0; z-index: 1030; background: var(--kai-card); border-bottom: 1px solid var(--kai-line); }
/* The phone's menu is an offcanvas inside the bar: while it is open the bar goes above Bootstrap's backdrop (1040),
   or the backdrop would cover the menu too */
.kai-topbar:has(.kai-menu-panel.show, .kai-menu-panel.showing) { z-index: 1046; }
.kai-nav { padding-top: 0; padding-bottom: 0; }   /* the logo's own margin is the bar's height, no more */
.kai-brand { display: flex; align-items: center; gap: .6rem; color: var(--kai-ink); }
.kai-logo { width: 2.4rem; height: 2.4rem; display: block; }
.kai-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.kai-brand-name { font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.kai-brand-sub { font-weight: 600; font-size: .85rem; color: var(--kai-navy); }
.kai-menu .nav-link { color: var(--kai-ink); font-weight: 500; padding: .5rem .9rem; }
.kai-menu .nav-link:hover, .kai-menu .nav-link.active { color: var(--kai-navy); }
.kai-menu-out { display: inline-flex; align-items: center; gap: .2rem; }
.kai-menu-out .icon { font-size: .85em; color: var(--kai-blue); }
.kai-soon { display: inline-block; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: var(--kai-blue-soft);
    color: var(--kai-blue); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
/* The bar's own side margins: Bootstrap's .navbar sets its horizontal padding to 0 over the container's, which put the
   logo and the menu button against the screen's edges. The tool strip and the footer keep the same margins, so all
   three line up (on a phone the strip is a drop-down whose label stands under the logo). */
.kai-topbar .container, .kai-toolbar .container, .kai-footer .container { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) {
    .kai-topbar .container, .kai-toolbar .container, .kai-footer .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* The menu button: Lucide's menu icon, no box, as in DinStartsida v3 */
.kai-burger { border: 0; padding: .25rem; margin-right: -.25rem; font-size: 1.75rem; line-height: 1; color: var(--kai-ink); }
.kai-burger:focus { box-shadow: none; }
.kai-burger:focus-visible { box-shadow: 0 0 0 .2rem var(--kai-blue-soft); border-radius: 8px; }
.kai-menu-icon { display: none; }
/* From md up the panel is the row in the bar: the links centred, the button at the end */
@media (min-width: 768px) {
    .kai-menu-panel .offcanvas-body { flex-grow: 1; align-items: center; }
}
/* On a phone: a panel from the right, the links as rows with their icons, Upptäck Knowyn at the foot */
@media (max-width: 767.98px) {
    .kai-menu-panel { --bs-offcanvas-width: 280px; }
    .kai-menu-panel .offcanvas-header { border-bottom: 1px solid var(--kai-line); }
    .kai-menu-panel .offcanvas-body { display: flex; flex-direction: column; gap: 1.25rem; }
    .kai-menu { gap: .25rem; }
    .kai-menu .nav-link { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 10px; font-size: 1.05rem; }
    .kai-menu .nav-link[aria-current="page"] { background: var(--kai-blue-soft); }
    .kai-menu-icon { display: inline-block; font-size: 1.2rem; color: var(--kai-blue); }
    /* The tools under Verktyg: indented on a thin line, a little smaller than the three main items */
    .kai-menu-tools { list-style: none; margin: .15rem 0 .35rem 1.45rem; padding: 0 0 0 .6rem; border-left: 2px solid var(--kai-line); }
    .kai-menu-tools .nav-link { padding: .45rem .7rem; font-size: .95rem; gap: .6rem; }
    .kai-menu-tools .kai-menu-icon { font-size: 1.05rem; }
    .kai-btn-knowyn { align-self: stretch; }
    /* The footer's company line and links at the panel's foot (templates/site/header.php) */
    .kai-menu-legal { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--kai-line); font-size: .75rem; line-height: 1.5;
        color: var(--kai-muted); }
}
/* Rensa in the bar, beside the menu button, on the chat (is-focus); the chat shows it once there is a conversation. From
   md up the menu row stands between the logo and it, and Upptäck Knowyn after it. */
.kai-topbar-clear { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; margin-right: .6rem; padding: .3rem .75rem;
    border: 1px solid var(--kai-line); border-radius: 999px; background: var(--kai-card); color: var(--kai-navy); font-size: .82rem;
    font-weight: 600; }
.kai-topbar-clear:hover, .kai-topbar-clear:focus-visible { border-color: var(--kai-blue); }
.kai-topbar-clear[hidden] { display: none; }
@media (min-width: 768px) { .kai-topbar-clear { order: 3; margin-left: .75rem; margin-right: 0; } }

/* ===== Tool strip (under the top bar on every tool page, centred like the menu above it) ===== */
.kai-toolbar { background: var(--kai-card); border-bottom: 1px solid var(--kai-line); }
.kai-toolbar-list { list-style: none; margin: 0; padding: .5rem 0; display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none;
    justify-content: center; justify-content: safe center; }
.kai-toolbar-list::-webkit-scrollbar { display: none; }
.kai-toolbar-item { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
    color: var(--kai-muted); text-decoration: none; white-space: nowrap; transition: color .15s, background-color .15s; }
.kai-toolbar-item .icon { font-size: 1.05rem; color: var(--kai-blue); }
a.kai-toolbar-item:hover, a.kai-toolbar-item:focus-visible { color: var(--kai-navy); background: var(--kai-blue-soft); }
.kai-toolbar-item.is-current { color: #fff; background: var(--kai-navy); }
.kai-toolbar-item.is-current .icon { color: #fff; }
.kai-toolbar-item.is-soon, .kai-toolbar-item.is-soon .icon { color: var(--kai-faint); }
/* On a phone the strip is a drop-down (templates/site/partials/tools-nav.php): a full-width row that names the current
   tool, and the list of tools under it, each with its icon, the current one marked, Alla verktyg last */
.kai-toolbar-current { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem 0; border: 0; background: none;
    color: var(--kai-ink); text-align: left; }
.kai-toolbar-current-label { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kai-muted); }
.kai-toolbar-current-name { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; }
.kai-toolbar-current-name .icon { font-size: 1.1rem; color: var(--kai-blue); }
.kai-toolbar-chevron { margin-left: auto; font-size: 1.15rem; color: var(--kai-muted); transition: transform .15s; }
.kai-toolbar-current[aria-expanded="true"] .kai-toolbar-chevron { transform: rotate(180deg); }
.kai-toolbar-menu { width: 100%; border-color: var(--kai-line); border-radius: 12px; box-shadow: var(--kai-shadow); padding: .4rem; }
.kai-toolbar-menu .dropdown-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 8px; font-weight: 500; }
.kai-toolbar-menu .dropdown-item .icon { font-size: 1.15rem; color: var(--kai-blue); }
.kai-toolbar-menu .dropdown-item.active, .kai-toolbar-menu .dropdown-item:active { background: var(--kai-blue-soft); color: var(--kai-navy); font-weight: 700; }
.kai-toolbar-menu .dropdown-item.disabled .icon { color: var(--kai-faint); }
@media (prefers-reduced-motion: reduce) { .kai-toolbar-chevron { transition: none; } }

/* ===== Page heads ===== */
.kai-page-head { padding: 2.5rem 0 1.5rem; }
.kai-page-title { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: .5rem; }
.kai-page-lead { color: var(--kai-muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: 0; }
.kai-section-title { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 800; text-align: center; margin-bottom: 1.5rem; }

/* ===== Cards ===== */
.kai-card { background: var(--kai-card); border: 1px solid var(--kai-line); border-radius: var(--kai-radius); box-shadow: var(--kai-shadow);
    padding: 1.5rem; }
.kai-card-title { font-size: 1.15rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.kai-card-title:first-child { margin-top: 0; }

/* ===== Hero ===== */
.kai-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: 3rem 0 2rem; }
.kai-hero-title { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin-bottom: 1rem; }
.kai-hero-lead { font-size: 1.1rem; line-height: 1.6; color: var(--kai-muted); max-width: 38rem; margin-bottom: 0; }
.kai-hero-art { max-width: 420px; justify-self: end; }
.kai-art { width: 100%; height: auto; display: block; }
@media (max-width: 767.98px) {
    .kai-hero { grid-template-columns: 1fr; padding-top: 2rem; }
    .kai-hero-art { display: none; }   /* on a phone the picture only pushes the question box down */
}

/* ===== Ask (the question card on the start page, and the chat's card on /chatten) ===== */
.kai-ask { padding: 1.75rem; margin-bottom: 3rem; }
.kai-ask.is-page { margin-bottom: 2rem; padding-bottom: .85rem; }
.kai-ask-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.kai-ask-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 12px;
    background: var(--kai-blue-soft); color: var(--kai-blue); font-size: 1.5rem; flex: none; }
.kai-ask-title { font-size: 1.45rem; font-weight: 800; margin: .15rem 0 .25rem; }
.kai-ask-sub { color: var(--kai-muted); }

/* ===== The chat panel ===== */
.kai-chat { display: flex; flex-direction: column; position: relative; }
/* The page scrolls, not the log: one scrollbar, and a long answer gets the whole window. The box sticks to the bottom
   of the window while the panel is in view, and chat.ts brings the latest question to the top (scroll-margin). */
.kai-chat-log { position: relative; min-height: 24rem; padding: .25rem .25rem .5rem; font-size: .95rem; }
.kai-chat-log .kai-msg.is-user { scroll-margin-top: 1rem; }
.kai-chat-greeting-text { color: var(--kai-muted); max-width: 44rem; line-height: 1.6; margin-bottom: .75rem; }
.kai-chat-label { margin: .75rem 0 .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kai-faint); }
.kai-suggestions { display: flex; flex-wrap: wrap; gap: .5rem; }
.kai-suggest { background: var(--kai-card); border: 1px solid var(--kai-line); border-radius: 999px; padding: .5rem 1rem; font-size: .92rem;
    color: var(--kai-ink); cursor: pointer; transition: border-color .15s, color .15s; text-align: left; }
.kai-suggest:hover { border-color: var(--kai-blue); color: var(--kai-blue); }
.kai-chat-form { position: sticky; bottom: 0; z-index: 2; background: var(--kai-card); border-top: 1px solid var(--kai-line);
    padding: 1rem 0 .9rem; margin-top: .75rem; }
.kai-chat-input-row { display: flex; align-items: flex-end; gap: .5rem; }
/* A textarea (frontend/shared/question-box.ts gives it a row per line, up to five, then it scrolls): with one row as
   tall as an input. The send button keeps the one-line height at the bottom of the row. */
.kai-chat-input { border-radius: 12px; padding: .8rem 1rem; font-size: 1rem; line-height: 1.5; border-color: var(--kai-line);
    resize: none; min-height: calc(3.1rem + 2px); overflow-y: auto; }
.kai-chat-input:focus { border-color: var(--kai-blue); box-shadow: 0 0 0 .2rem rgba(47, 127, 201, .15); }
.kai-chat-send { --bs-btn-border-radius: 12px; --bs-btn-bg: var(--kai-blue); --bs-btn-border-color: var(--kai-blue);
    --bs-btn-hover-bg: var(--kai-navy); --bs-btn-hover-border-color: var(--kai-navy); width: 3.5rem; display: inline-flex;
    align-items: center; justify-content: center; font-size: 1.25rem; flex: none; height: calc(3.1rem + 2px); }
.kai-chat-under { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: .6rem;
    font-size: .78rem; color: var(--kai-muted); }
.kai-chat-clear { font-size: .78rem; padding: 0; }

/* The start page's box (templates/site/partials/ask-launcher.php): the examples, then the chat's input row and note */
.kai-launch .kai-chat-label { margin-top: 0; }
.kai-launch .kai-suggestions { margin-bottom: 1rem; }
a.kai-suggest { display: inline-block; text-decoration: none; }
.kai-launch-resume { margin: 1rem 0 0; font-size: .92rem; }
.kai-launch-resume a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; }

.kai-msg { display: flex; margin-bottom: 1rem; }
.kai-msg-body { max-width: 85%; padding: .7rem 1rem; border-radius: 14px; line-height: 1.6; }
.kai-msg.is-user { justify-content: flex-end; }
.kai-msg.is-user .kai-msg-body { background: var(--kai-navy); color: #fff; border-bottom-right-radius: 4px; }
.kai-msg.is-bot .kai-msg-body { background: var(--kai-bg); border: 1px solid var(--kai-line); border-bottom-left-radius: 4px; }
.kai-msg-error { color: var(--kai-red); }
/* A heading or a list in an answer (frontend/shared/format.ts): the model is asked for bold and line breaks but now
   and then writes "###" or "- ", and they are drawn as what they mean, kept quiet in the bubble's own size */
.kai-msg-heading { display: block; font-size: 1.02em; font-weight: 700; margin: .6rem 0 .2rem; }
.kai-msg-heading:first-child, .kai-info-toggle + .kai-msg-heading { margin-top: 0; }   /* the info button floats first */
.kai-msg-list { margin: .3rem 0 .4rem; padding-left: 1.25rem; }
.kai-msg-list li { margin-bottom: .15rem; }
.kai-msg-list li::marker { color: var(--kai-muted); }
/* The chat page is the chat and nothing else (is-focus, pages/site/chat.php), as a chat is expected to be: the page's
   heading is hidden but read (the greeting in the middle of the empty chat says its words instead), Rensa is in the top
   bar, and the note under the box keeps what must be said there: an AI that can be wrong, no patient data, the terms
   and the privacy policy. On a phone the page scrolls, with the box held at the screen's foot, and there is no footer
   (its company line and links are at the foot of the menu panel); from 576 px the page is one screen high and only the
   conversation scrolls, between a fixed box and a thin footer. */
.kai-chat-greeting-title { display: none; }
.is-focus .kai-page-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; }
.is-focus .kai-main { padding-bottom: 0; }
.is-focus .kai-chat { flex: 1 1 auto; }
.is-focus .kai-chat-log { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.is-focus .kai-chat-greeting { margin: auto 0; padding: 1rem 0; text-align: center; }
.is-focus .kai-chat-greeting-title { display: block; margin-bottom: .4rem; font-size: 1.35rem; font-weight: 800; color: var(--kai-navy); }
.is-focus .kai-chat-greeting-text { margin-left: auto; margin-right: auto; }
.is-focus .kai-chat-greeting .kai-suggestions { justify-content: center; }
.is-focus .kai-chat-clear { display: none; }
@media (max-width: 575.98px) {
    .is-focus .kai-footer { display: none; }
    /* No padding under the box: its own place is then the foot of the page, so the sticky box does not lift off the
       screen's edge over the last pixels of the scroll */
    .is-focus .kai-ask.is-page { display: flex; flex-direction: column; min-height: calc(100dvh - var(--kai-head)); margin-bottom: 0;
        padding-top: .75rem; padding-bottom: 0; border-width: 0; }
    .is-focus .kai-chat-form { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
}
/* From 576 px: an app's layout. The body is exactly the window's height and does not scroll; between the top bar and
   the thin footer the chat takes every pixel left, as a white surface without a card. The log is the one thing that
   scrolls, across the whole width so its scrollbar is at the window's edge, while its content and the box stand in a
   column of 50rem (about 75 characters a line); the box sits at the foot of the column and never moves. The latest
   question is brought to the top of the log by the same scrollIntoView() (frontend/site/chat.ts), which scrolls the
   nearest box that scrolls. */
@media (min-width: 576px) {
    html:has(.kai-body.is-focus) { scrollbar-gutter: auto; }
    .kai-body.is-focus { height: 100dvh; min-height: 0; overflow: hidden; }
    .is-focus .kai-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--kai-card); }
    .is-focus .kai-chat-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-width: none; padding: 0; }
    .is-focus .kai-ask.is-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; border: 0;
        border-radius: 0; box-shadow: none; }
    .is-focus .kai-chat { min-height: 0; }
    .is-focus .kai-chat-log { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 1.5rem max(1rem, calc((100% - 50rem) / 2)) .5rem; }
    .is-focus .kai-chat-log .kai-msg.is-user { scroll-margin-top: 1.25rem; }
    .is-focus .kai-chat-form { position: static; margin: 0; padding: .9rem max(1rem, calc((100% - 50rem) / 2)) .75rem; }
    /* The thin footer (templates/site/footer.php, is-thin): one line of the company's facts and links */
    .is-focus .kai-footer.is-thin { padding: .45rem 0; font-size: .72rem; }
}
/* On a large screen the note under the box is one line, centred under it: it needs about 870 px, a little more than
   the column, and reaches into the box's side padding, which from 960 px is wide enough to hold it */
@media (min-width: 960px) {
    .is-focus .kai-chat-under { justify-content: center; }
    .is-focus .kai-chat-note { white-space: nowrap; }
}
.kai-footer-thin { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .9rem; margin: 0; padding: 0; list-style: none; color: var(--kai-muted); }
.kai-footer-thin a { color: var(--kai-muted); }
.kai-footer-thin a:hover { color: var(--kai-navy); }
/* On a phone the chat is not a card on the page but the page itself: the white surface runs from edge to edge (the
   container's gutter taken back), without a border, rounding or shadow, so the answers are the only boxes. The log has
   no margin of its own, and the question and the answer reach further across (92 % instead of 85 %). */
@media (max-width: 575.98px) {
    .kai-ask.is-page { margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); padding-left: .75rem;
        padding-right: .75rem; border-width: 1px 0; border-radius: 0; box-shadow: none; }
    .kai-chat-log { padding-left: 0; padding-right: 0; }
    .kai-msg-body { max-width: 92%; padding: .65rem .85rem; }
}
.kai-debug { margin-top: .5rem; padding: .4rem .5rem; border-radius: 6px; background: #2b2f31; color: #d7e0e2; font-size: .72rem;
    line-height: 1.45; font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }

/* Three dots while the answer is looked up. 3-5 seconds without movement looks like a hung page. */
.kai-dots span { display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: var(--kai-faint);
    animation: kai-blink 1.2s infinite ease-in-out both; }
.kai-dots span:nth-child(2) { animation-delay: .16s; }
.kai-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes kai-blink {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .kai-dots span { animation: none; opacity: .6; } }

/* The regulation's own words: folded, a band of its own */
.kai-sources { margin-top: .6rem; padding: .25rem 0; border-top: 1px solid var(--kai-line); border-bottom: 1px solid var(--kai-line); }
.kai-sources-head { display: flex; align-items: center; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kai-muted); }
.kai-sources-toggle { margin-left: auto; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: 0; }
.kai-sources-body { margin-top: .4rem; }
.kai-source { font-size: .85rem; line-height: 1.55; margin-bottom: .4rem; }

/* TLV's answers from KUSP: the same band, each answer with its number, the question and a link to KUSP */
.kai-kusp { padding: .4rem .6rem; border-left: 3px solid var(--kai-line); margin-bottom: .6rem; }
.kai-kusp-title { font-weight: 600; }
.kai-kusp-question { color: var(--kai-muted); font-style: italic; margin: .15rem 0 .35rem; }
.kai-kusp-answer { white-space: pre-line; }
.kai-kusp-link { display: inline-block; margin-top: .35rem; font-size: .78rem; }

/* The codes the tools gave, as buttons to the fact sheet */
.kai-chips { margin-top: .6rem; }
.kai-chips-label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kai-faint); margin-bottom: .3rem; }
.kai-chip { display: inline-block; font-size: .78rem; line-height: 1.2; padding: .3rem .55rem; margin: 0 .3rem .3rem 0; border-radius: 6px;
    border: 1px solid var(--kai-line); background: var(--kai-card); color: var(--kai-ink); font-variant-numeric: tabular-nums; cursor: pointer;
    text-decoration: none; }
.kai-chip:hover { border-color: var(--kai-blue); color: var(--kai-blue); }
.kai-chip.is-plain { cursor: default; color: var(--kai-muted); }
.kai-chip.is-plain:hover { border-color: var(--kai-line); }
/* The page links beside the chips (the planner, Om K.AI, a tool, Knowyn): the soft turquoise of the secondary
   actions, so they belong to the interface without competing with the answer, the navy being kept for the main
   actions. The arrow says the link leads on: to the right for a page here, up and out for another site. Size, padding
   and rounding are the chip's, so the link stands in the row as one of them (tests/e2e/chat.spec.ts measures it). */
.kai-chip-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; line-height: 1.2; padding: .3rem .55rem;
    margin: 0 .3rem .3rem 0; vertical-align: baseline; border-radius: 6px; border: 1px solid #c4e2e6; background: #e7f3f3; color: #10707d;
    text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.kai-chip-link .icon { width: .95em; height: .95em; vertical-align: 0; transition: transform .15s; }
.kai-chip-link:hover, .kai-chip-link:focus-visible { background: #d6eced; border-color: var(--kai-teal); color: #0b5a64; }
.kai-chip-link:focus-visible { outline: 2px solid var(--kai-teal); outline-offset: 1px; }
.kai-chip-link:hover .icon { transform: translateX(2px); }
.kai-chip-link.is-external:hover .icon { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .kai-chip-link, .kai-chip-link .icon { transition: none; } }
/* The info button at the top right of every answer and its fold (frontend/site/chat.ts info()): what the chat looked
   up, in plain words, the regulation, where the times come from, and that a language model wrote the answer. The
   button floats, so the answer's first line runs round it; the fold opens under the text, inside the answer. */
.kai-info-toggle { float: right; margin: -.4rem -.6rem .2rem .5rem; padding: .3rem; font-size: 1.1rem; line-height: 1; color: var(--kai-muted);
    border-radius: 8px; }
.kai-info-toggle:hover, .kai-info-toggle[aria-expanded="true"] { color: var(--kai-blue); background: var(--kai-blue-soft); }
.kai-info { clear: both; margin-top: .6rem; padding: .75rem .9rem; border: 1px solid var(--kai-line); border-radius: 10px; background: var(--kai-card);
    font-size: .85rem; line-height: 1.55; color: var(--kai-muted); }
.kai-info p { margin-bottom: .5rem; }
.kai-info-title { font-weight: 700; color: var(--kai-ink); margin-bottom: .4rem; }
.kai-info-label { font-weight: 600; color: var(--kai-ink); }
.kai-info-steps { margin: .15rem 0 .6rem; padding-left: 1.1rem; }
.kai-info-more { padding-top: .5rem; border-top: 1px solid var(--kai-line); font-weight: 600; }

/* Thumbs */
.kai-flag { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .78rem; }
.kai-flag-ask { color: var(--kai-muted); }
.kai-thumb { padding: 0; line-height: 1; color: var(--kai-muted); opacity: .6; transition: opacity .15s, color .15s; font-size: 1rem; }
.kai-thumb:hover, .kai-thumb.is-chosen { opacity: 1; color: var(--kai-blue); }
.kai-flag-note-row { max-width: 420px; }
.kai-flag-note-row .form-control, .kai-flag-note-row .btn { font-size: .8rem; }
.kai-flag-thanks { color: var(--kai-teal); }

/* ===== The fact sheet: a document of its own (pages/site/sheet.php, templates/site/sheet/) ===== */
.kai-sheet-page { padding-top: 1.5rem; }
.kai-crumbs { font-size: .85rem; color: var(--kai-muted); margin-bottom: 1rem; }
.kai-crumbs a { color: var(--kai-muted); text-decoration: none; }
.kai-crumbs a:hover { color: var(--kai-navy); text-decoration: underline; }
.kai-crumbs-sep { margin: 0 .5rem; color: var(--kai-faint); }
.kai-crumbs [aria-current] { color: var(--kai-ink); font-weight: 600; }

.kai-sheet { --sheet-accent: var(--kai-teal); background: var(--kai-card); border: 1px solid var(--kai-line); border-radius: var(--kai-radius);
    box-shadow: var(--kai-shadow); margin-bottom: 2rem; }
.kai-sheet.is-condition { --sheet-accent: var(--kai-blue); }
.kai-sheet.is-rule { --sheet-accent: var(--kai-navy); }
.kai-sheet.is-advice { --sheet-accent: #c48a1a; }
.kai-sheet-head { padding: 1.75rem 2rem 1.5rem; border-bottom: 1px solid var(--kai-line); --kai-sheet-pill: 1.75rem; }
.kai-sheet-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .9rem; }
/* The kind and the actions beside it are pills of one height (--kai-sheet-pill on .kai-sheet-head) */
.kai-sheet-kind { display: inline-flex; align-items: center; height: var(--kai-sheet-pill); font-size: .7rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sheet-accent); border: 1px solid currentColor; border-radius: 999px; padding: 0 .6rem; }
.kai-sheet-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.kai-sheet-code { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--kai-ink); }
.kai-sheet-name { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; line-height: 1.25; margin: 0; max-width: 40rem; }
.kai-sheet-badges { margin-top: .75rem; }
.kai-sheet-meta { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: .85rem; color: var(--kai-muted); }
.kai-sheet-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.kai-sheet-actions .btn { --bs-btn-border-radius: 999px; --bs-btn-padding-x: .8rem; --bs-btn-padding-y: 0; --bs-btn-font-size: .78rem;
    height: var(--kai-sheet-pill); --bs-btn-color: var(--kai-navy);
    --bs-btn-border-color: var(--kai-line); --bs-btn-hover-bg: var(--kai-blue-soft); --bs-btn-hover-border-color: var(--kai-blue);
    --bs-btn-hover-color: var(--kai-navy); display: inline-flex; align-items: center; gap: .4rem; }
.kai-sheet-actions .btn .icon { margin: 0; }
/* On a phone the actions are their icons, so they keep the row beside the kind; the words stay for screen readers and
   as the tooltip (title) */
@media (max-width: 575.98px) {
    .kai-sheet-actions .btn { --bs-btn-padding-x: .55rem; }
    .kai-sheet-actions .btn:not(.is-said) .kai-sheet-action-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap; }
}

.kai-sheet-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1px; margin: 0; background: var(--kai-line);
    border-bottom: 1px solid var(--kai-line); }
/* In the side panel (the sheet embedded) at most three facts a row, two even rows for an action, fewer when narrow:
   each column is at least a third of the strip */
.kai-body.is-embedded .kai-sheet-facts:not(.is-inline) { grid-template-columns: repeat(auto-fit, minmax(max(9.5rem, calc((100% - 2px) / 3)), 1fr)); }
.kai-sheet-fact { background: var(--kai-bg); padding: .9rem 1.25rem; }
.kai-sheet-fact dt { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kai-muted); font-weight: 600; margin-bottom: .2rem; }
.kai-sheet-fact dd { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kai-sheet-fact dd small { display: block; font-size: .72rem; font-weight: 400; color: var(--kai-muted); margin-top: .15rem; }
.kai-sheet-facts.is-inline { grid-template-columns: repeat(auto-fit, minmax(8rem, 12rem)); background: transparent; border: 0; gap: .75rem; margin-bottom: .75rem; }
.kai-sheet-facts.is-inline .kai-sheet-fact { border-radius: 10px; }
.kai-sheet-none { color: var(--kai-faint); }

.kai-sheet-body { display: grid; grid-template-columns: 13rem 1fr; gap: 2rem; padding: 1.75rem 2rem; }
.kai-sheet-toc { position: sticky; top: calc(var(--kai-head) + 1rem); align-self: start; font-size: .85rem; }
.kai-sheet-toc-title { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kai-faint); font-weight: 600; margin-bottom: .4rem; }
.kai-sheet-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.kai-sheet-toc li { counter-increment: toc; }
.kai-sheet-toc a { display: block; padding: .3rem 0 .3rem 1.6rem; position: relative; color: var(--kai-muted); text-decoration: none; border-left: 2px solid var(--kai-line); }
.kai-sheet-toc a::before { content: counter(toc); position: absolute; left: .5rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kai-faint); }
.kai-sheet-toc a:hover { color: var(--kai-navy); border-left-color: var(--sheet-accent); }
.kai-sheet-sections { min-width: 0; }
.kai-sheet-section { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--kai-line); scroll-margin-top: 1rem; }
.kai-sheet-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.kai-sheet-h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 700; margin-bottom: .9rem; }
.kai-sheet-num { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 8px;
    background: var(--sheet-accent); color: #fff; font-size: .8rem; font-weight: 700; flex: none; }
.kai-count { background: var(--kai-line); color: var(--kai-muted); font-size: .72rem; font-weight: 600; border-radius: 99px; padding: .15rem .55rem; }
.kai-sheet-text { font-size: .95rem; line-height: 1.7; margin-bottom: .75rem; }
.kai-sheet-note { font-size: .82rem; color: var(--kai-muted); line-height: 1.55; margin: .5rem 0 0; }
.kai-sheet-small { font-size: .8rem; color: var(--kai-muted); margin: .25rem 0 0; }
.kai-sheet-quote { margin: 0 0 .75rem; padding: 1rem 1.25rem; border-left: 4px solid var(--sheet-accent); background: var(--kai-bg); border-radius: 0 10px 10px 0; }
.kai-sheet-quote p { margin: 0; font-size: .95rem; line-height: 1.7; }
.kai-sheet-quote footer { margin-top: .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kai-muted); }
.kai-sheet-table { font-size: .85rem; margin-bottom: 0; }
.kai-sheet-table th { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--kai-muted); font-weight: 600; border-bottom-width: 1px; }
.kai-sheet-table td { vertical-align: top; }
.kai-sheet-mentions { margin-bottom: .75rem; }
.kai-cell-narrow { width: 1%; white-space: nowrap; }

.kai-sheet-foot { padding: 1.25rem 2rem 1.5rem; border-top: 1px solid var(--kai-line); background: var(--kai-bg); border-radius: 0 0 var(--kai-radius) var(--kai-radius); }
.kai-sheet-source { font-size: .78rem; color: var(--kai-muted); line-height: 1.55; margin-bottom: 1rem; }
.kai-sheet-print-note, .kai-sheet-print-only { display: none; }
.kai-sheet-neighbours { display: flex; justify-content: space-between; gap: 1rem; }
.kai-sheet-neighbour { display: inline-flex; align-items: center; gap: .5rem; max-width: 48%; font-size: .85rem; color: var(--kai-navy); text-decoration: none;
    padding: .5rem .75rem; border: 1px solid var(--kai-line); border-radius: 10px; background: var(--kai-card); }
.kai-sheet-neighbour:hover { border-color: var(--kai-blue); }
.kai-sheet-neighbour > span { min-width: 0; overflow-wrap: anywhere; }   /* a long name breaks inside its half, not out of it */
.kai-sheet-table td.kai-freq-limit { white-space: nowrap; }   /* one line beside its text; on a phone above it, wrapped */
.kai-sheet-neighbour.is-next { margin-left: auto; text-align: right; }
.kai-sheet-neighbour-code { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
    .kai-sheet-head, .kai-sheet-body, .kai-sheet-foot { padding-left: 1.25rem; padding-right: 1.25rem; }
    .kai-sheet-body { grid-template-columns: 1fr; gap: 1rem; }
    .kai-sheet-toc { position: static; }
    .kai-sheet-toc ol { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
    .kai-sheet-toc a { border-left: 0; padding-left: 1.2rem; }
    .kai-sheet-toc a::before { left: 0; }
}
/* On a phone a fact sheet is the page, as the lists are: edge to edge, the container's gutter taken back, without
   rounding or shadow, and .75rem at the sides of every part, so the text has the screen's width */
@media (max-width: 575.98px) {
    .kai-sheet { margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); border-width: 1px 0;
        border-radius: 0; box-shadow: none; }
    .kai-sheet-head, .kai-sheet-body, .kai-sheet-foot, .kai-sheet .kai-sheet-changes { padding-left: .75rem; padding-right: .75rem; }
    .kai-sheet-foot { border-radius: 0; }
    /* The frequency limit above its text (SheetView::frequencyTable()): "8 ggr / ersättningsperiod och samma mottagning"
       on one line was wider than the phone */
    .kai-sheet-table td.kai-freq-limit, .kai-sheet-table td.kai-freq-text { display: block; width: auto; white-space: normal; }
    .kai-sheet-table td.kai-freq-limit { border-bottom: 0; padding-bottom: 0; }
}

/* The embedded sheet (?inbaddad=1) in the side panel: no frame, less air */
.kai-body.is-embedded .kai-main { padding-bottom: 1rem; }
.kai-body.is-embedded .kai-sheet-page { padding-top: .75rem; }
.kai-sheet-body.is-single { grid-template-columns: 1fr; }   /* the side panel: no contents list (frame.php) */
.kai-body.is-embedded .container { max-width: none; padding-left: .75rem; padding-right: .75rem; }

/* The side panel */
.kai-sheet-panel { --bs-offcanvas-width: min(100vw, 900px); }
.kai-sheet-panel-head { border-bottom: 1px solid var(--kai-line); gap: 1rem; }
.kai-sheet-panel-title { font-size: 1rem; font-weight: 700; flex: 1 1 auto; }
.kai-sheet-panel-open { --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1rem; }
.kai-sheet-panel-body { padding: 0; background: var(--kai-bg); }
.kai-sheet-frame { display: block; width: 100%; height: 100%; border: 0; }
.kai-sheet-frame[hidden] { display: none; }
/* Text in the panel (openTextPanel in frontend/shared/sheet-panel.ts: TLV's answers from KUSP): narrower, for reading */
.kai-sheet-panel.is-text { --bs-offcanvas-width: min(100vw, 640px); }
.kai-sheet-panel.is-text.is-wide { --bs-offcanvas-width: min(100vw, 900px); }
/* An action's price history in the panel: the legend and the chart over the table of periods, which then needs no box
   of its own to scroll in */
.kai-sheet-panel-text .kai-price-history { grid-template-columns: minmax(0, 1fr); }
.kai-sheet-panel-text .kai-price-history-scroll { max-height: none; }
/* The row whose history the panel shows */
.kai-price-table tr.is-open > * { --bs-table-bg-state: var(--kai-blue-soft); }
.kai-sheet-panel-text { height: 100%; overflow-y: auto; padding: 1.25rem 1.5rem; background: var(--kai-card); font-size: .95rem; line-height: 1.6; }
.kai-sheet-panel-text .kai-kusp { padding: .2rem 0 1rem .9rem; margin-bottom: 1.1rem; }
.kai-sheet-panel-text .kai-kusp-title { font-size: 1.02rem; }
.kai-kusp-intro { color: var(--kai-muted); font-size: .88rem; margin-bottom: 1.25rem; }

/* Print: the sheet alone, as a document */
@media print {
    @page { size: A4; margin: 15mm; }
    .kai-topbar, .kai-footer, .kai-fab, .kai-crumbs, .kai-sheet-actions, .kai-sheet-periods, .kai-sheet-toc, .kai-sheet-neighbours, .kai-knowyn, .kai-skip { display: none; }
    .kai-body { background: #fff; }
    .kai-sheet { box-shadow: none; border: 0; border-radius: 0; }
    .kai-sheet-head { padding-left: 0; padding-right: 0; }
    .kai-sheet-body, .kai-sheet-foot { padding-left: 0; padding-right: 0; grid-template-columns: 1fr; }
    .kai-sheet-foot { background: none; }
    .kai-sheet-section { break-inside: avoid; }
    .kai-sheet-print-note { display: inline; }
    .kai-sheet-print-only { display: list-item; }
    a { color: inherit; text-decoration: none; }
}
.kai-badge { display: inline-block; padding: .2rem .45rem; border-radius: 6px; font-size: .7rem; font-weight: 600; line-height: 1; margin-right: .25rem; }
.kai-badge.is-warning { background: #fff3cd; color: #7a5a00; }
.kai-badge.is-danger { background: #fde2e2; color: #8a1f1f; }
.kai-badge.is-dark { background: var(--kai-ink); color: #fff; }
.kai-badge.is-info { background: var(--kai-blue-soft); color: var(--kai-navy); }
.kai-badge.is-light { background: var(--kai-card); color: var(--kai-ink); border: 1px solid var(--kai-line); }

/* The conflict matrix: one cell per pair of actions */
.kai-matrix-scroll { overflow: auto; max-height: 560px; }
.kai-matrix { border-collapse: separate; border-spacing: 1px; font-size: .62rem; }
.kai-matrix th { background: transparent; color: var(--kai-muted); font-weight: 600; padding: 1px 2px; border: none; }
.kai-matrix td { width: 15px; height: 15px; padding: 0; border-radius: 2px; background: #eceff3; }
.kai-matrix td.is-abs { background: var(--kai-red); }
.kai-matrix td.is-pos { background: var(--kai-amber); }
.kai-matrix td.is-diag { background: var(--kai-line); }
.kai-matrix-vert { writing-mode: vertical-rl; transform: rotate(180deg); }
.kai-matrix-legend { margin-top: .5rem; font-size: .74rem; }
.kai-matrix-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .25rem; }
.kai-matrix-key.is-abs { background: var(--kai-red); }
.kai-matrix-key.is-pos { background: var(--kai-amber); }

/* ===== Faktablad (the tool) ===== */
.kai-fs { margin-bottom: 2rem; }
.kai-fs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.kai-fs-kinds .btn { --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .9rem; --bs-btn-color: var(--kai-navy);
    --bs-btn-border-color: var(--kai-line); --bs-btn-hover-bg: var(--kai-blue-soft); --bs-btn-hover-border-color: var(--kai-blue);
    --bs-btn-hover-color: var(--kai-navy); --bs-btn-active-bg: var(--kai-navy); --bs-btn-active-border-color: var(--kai-navy); }
.kai-fs-kinds .btn-check:checked + .btn { background: var(--kai-navy); border-color: var(--kai-navy); color: #fff; }
.kai-fs-search { flex: 1 1 14rem; max-width: 22rem; }
.kai-fs-search .form-control { border-radius: 999px; padding-left: 1rem; }
.kai-fs-count { font-size: .85rem; color: var(--kai-muted); margin-left: auto; white-space: nowrap; }
.kai-fs-group { margin-bottom: 1.5rem; }
.kai-fs-group-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kai-muted);
    padding-bottom: .35rem; border-bottom: 1px solid var(--kai-line); margin-bottom: .5rem; }
/* At most three columns, each wide enough for most names (two on a laptop), and every sheet on one line: a
   long name ends in an ellipsis (the whole name is in the link's title and on the sheet), so the rows keep one height
   and the list reads as an overview */
.kai-fs-items { columns: 24rem 3; column-gap: 1.75rem; }
.kai-fs-item { display: flex; width: 100%; break-inside: avoid; padding: .25rem .4rem; border: 0; border-radius: 6px; background: transparent;
    color: var(--kai-ink); font-size: .9rem; line-height: 1.4; text-align: left; cursor: pointer; text-decoration: none; }
.kai-fs-item:hover, .kai-fs-item:focus-visible { background: var(--kai-blue-soft); color: var(--kai-navy); }
.kai-fs-code { flex: none; min-width: 3.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kai-fs-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--kai-muted); }
.kai-fs-item:hover .kai-fs-name { color: inherit; }
.kai-fs-empty { color: var(--kai-muted); padding: .5rem 0; }
/* On a phone the choices stay one row across the width (Faktablad's four kinds, Prislista's periods): smaller words
   and less padding rather than a second row */
@media (max-width: 575.98px) {
    .kai-fs-kinds { display: flex; flex-wrap: nowrap; width: 100%; }
    .kai-fs-kinds .btn { flex: 1 1 auto; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .8rem; white-space: nowrap; }
    .kai-fs-count { margin-left: 0; }
    /* One column and no pointer to hover for the title: the name wraps rather than losing two thirds of the list */
    .kai-fs-name { white-space: normal; }
}

/* ===== Begränsningar (the tool) ===== */
.kai-lim { margin-bottom: 2rem; }
.kai-lim-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.kai-lim-card { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: .75rem .9rem; background: var(--kai-card);
    border: 1px solid var(--kai-line); border-radius: 12px; color: var(--kai-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kai-lim-card:hover { border-color: var(--kai-blue); }
.kai-lim-card.is-active { border-color: var(--kai-navy); box-shadow: inset 0 0 0 1px var(--kai-navy); }
.kai-lim-card-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kai-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kai-lim-card-count { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kai-lim-card.is-active .kai-lim-card-count { color: var(--kai-navy); }
.kai-lim-table-card { margin-bottom: 1.5rem; }
.kai-lim-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--kai-line); border-radius: 10px; }
.kai-table { font-size: .85rem; margin-bottom: 0; }
.kai-table thead th { position: sticky; top: 0; z-index: 1; background: var(--kai-bg); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--kai-muted); font-weight: 600; border-bottom: 1px solid var(--kai-line); white-space: nowrap; }
.kai-table td { vertical-align: middle; }
/* A chip's bottom margin keeps chips apart when they wrap in a row; alone in the code column it only lifts the chip
   above the middle of the cell (half the margin), so there it has none */
.kai-table .kai-cell-narrow .kai-chip { margin: 0; }
.kai-lim-name { min-width: 16rem; }
.kai-lim-frequency { min-width: 16rem; font-size: .8rem; }
.kai-lim-shared { font-size: .74rem; color: var(--kai-muted); }
.kai-lim-areas { font-size: .8rem; color: var(--kai-muted); min-width: 10rem; }
.kai-badge.is-success { background: #dff3e8; color: #155d35; }
.kai-badge.is-primary { background: var(--kai-blue-soft); color: var(--kai-navy); cursor: help; }
.kai-lim-legend .kai-card-title { margin-top: 0; }
.kai-lim-dl { display: grid; grid-template-columns: 11rem 1fr; gap: .5rem 1.25rem; margin: 0; font-size: .88rem; }
.kai-lim-dl dt { font-weight: 700; }
.kai-lim-dl dd { margin: 0; color: var(--kai-muted); line-height: 1.55; }
@media (max-width: 991.98px) { .kai-lim-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .kai-lim-dl { grid-template-columns: 1fr; gap: .15rem 0; } .kai-lim-dl dd { margin-bottom: .6rem; } }

/* ===== Planerare (the tool) ===== */
/* The plan and the review side by side; the plan's rows (code, name, date, tooth, bin) get the wider half */
.kai-plan { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 1.25rem; margin-bottom: 2rem; align-items: start; }
.kai-plan-card { padding: 1.25rem; margin-bottom: 1.25rem; }
/* A review card with something to put right: a red border, two pixels without moving the content (planner.ts card()) */
.kai-plan-card.is-error { border-color: var(--kai-red); box-shadow: inset 0 0 0 1px var(--kai-red), var(--kai-shadow); }
.kai-plan-card .kai-card-title { margin-top: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.kai-plan-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.kai-plan-card-head .kai-card-title { margin-bottom: 0; }
.kai-plan-add { margin-bottom: .75rem; }
.kai-plan-add .btn-primary { --bs-btn-border-radius: 0 10px 10px 0; }
.kai-plan-settings { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: end; font-size: .82rem; color: var(--kai-muted); }
.kai-plan-setting { display: flex; flex-direction: column; gap: .2rem; }
.kai-plan-setting.is-check { flex-direction: row; align-items: center; gap: .4rem; padding-bottom: .35rem; margin: 0; }
.kai-plan-setting .form-control { width: 10rem; }
.kai-plan-date { max-width: 10rem; }
.kai-plan-tooth { width: 7.5rem; text-align: left; }
.kai-plan-tooth.is-empty { color: var(--kai-muted); }
/* The tooth picker (toothPicker in frontend/site/planner.ts): a small chart as the dentist sees the mouth, the
   patient's right on the left, the upper jaw over the lower; the four quadrants two by two, stacked on a phone. A key
   is a rounded square with the tooth's number; the chosen one is navy. */
.kai-tooth-menu { width: min(33rem, calc(100vw - 2rem)); padding: .85rem 1rem 1rem; border-color: var(--kai-line); border-radius: 14px;
    box-shadow: var(--kai-shadow); }
.kai-tooth-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.kai-tooth-tabs { display: inline-flex; padding: .2rem; border-radius: 999px; background: var(--kai-bg); }
.kai-tooth-tab { border: 0; background: none; padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--kai-muted); }
.kai-tooth-tab.active { background: var(--kai-card); color: var(--kai-navy); box-shadow: 0 1px 3px rgba(28, 61, 110, .15); }
.kai-tooth-none { font-size: .82rem; font-weight: 600; padding: .2rem .4rem; }
.kai-tooth-sides { display: grid; grid-template-columns: 1fr 1fr; font-size: .68rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--kai-faint); margin-bottom: .2rem; }
.kai-tooth-sides span:last-child { text-align: right; }
.kai-tooth-set { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; }
.kai-tooth-set[hidden] { display: none; }
/* The line between the halves in the middle of the gap: the left quadrant reaches half the gap into it */
.kai-tooth-quadrant:nth-child(odd) { padding-right: .45rem; border-right: 1px dashed var(--kai-line); margin-right: -.45rem; }
.kai-tooth-quadrant:nth-child(-n+2) { padding-bottom: .55rem; border-bottom: 1px dashed var(--kai-line); }
.kai-tooth-quadrant-label { font-size: .7rem; color: var(--kai-muted); margin-bottom: .3rem; }
.kai-tooth-quadrant:nth-child(even) .kai-tooth-quadrant-label { text-align: right; }
.kai-tooth-keys { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .25rem; }
.kai-tooth-set[data-tooth-set="primary"] .kai-tooth-quadrant:nth-child(odd) .kai-tooth-keys { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kai-tooth-set[data-tooth-set="primary"] .kai-tooth-quadrant:nth-child(even) .kai-tooth-keys { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kai-tooth-menu .kai-tooth-key { display: flex; align-items: center; justify-content: center; width: auto; height: 2rem; padding: 0;
    border: 1px solid var(--kai-line); border-radius: 8px; background: var(--kai-card); color: var(--kai-ink); font-size: .82rem; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.kai-tooth-menu .kai-tooth-key:hover, .kai-tooth-menu .kai-tooth-key:focus-visible { border-color: var(--kai-blue); background: var(--kai-blue-soft);
    color: var(--kai-navy); }
.kai-tooth-menu .kai-tooth-key.active { background: var(--kai-navy); border-color: var(--kai-navy); color: #fff; }
.kai-tooth-odd { margin: .6rem 0 0; font-size: .78rem; color: var(--kai-muted); }
@media (max-width: 575.98px) {
    .kai-tooth-set { grid-template-columns: 1fr; }
    .kai-tooth-sides { display: none; }
    .kai-tooth-quadrant:nth-child(odd) { padding-right: 0; border-right: 0; margin-right: 0; }
    .kai-tooth-quadrant:nth-child(-n+2) { padding-bottom: 0; border-bottom: 0; }
    .kai-tooth-quadrant:nth-child(even) .kai-tooth-quadrant-label { text-align: left; }
    .kai-tooth-menu { width: calc(100vw - 2rem); }
    /* A row of the plan on a phone: code, date, tooth and bin; the name has no room, and the code opens its sheet */
    .kai-plan-table .kai-plan-name { display: none; }
}
.kai-plan-clear { font-size: .8rem; padding: 0; }
.kai-plan-table { font-size: .85rem; margin-bottom: 0; }
.kai-plan-table td { vertical-align: middle; }
.kai-plan-table .kai-chip { margin: 0; }   /* the chip's own bottom margin lifted it above the row's middle */
.kai-plan-table .form-control-sm { font-size: .8rem; }
/* The name takes the room the other cells leave (width 100 % with max-width 0 lets the ellipsis follow the table) */
.kai-plan-name { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kai-plan-remove { color: var(--kai-muted); padding: .2rem .3rem; font-size: 1.05rem; line-height: 1; text-decoration: none; border-radius: 6px; }
.kai-plan-remove:hover, .kai-plan-remove:focus-visible { color: var(--kai-red); background: #fdecec; }
.kai-plan-codes .kai-chip { margin-bottom: 0; }
.kai-plan-stats { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center; }
.kai-plan-stat-label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kai-muted); font-weight: 600; }
.kai-plan-stat-value { font-size: 1.3rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kai-plan-verdict { margin-left: auto; }
.kai-plan-verdict .kai-badge { font-size: .8rem; padding: .35rem .7rem; }
.kai-plan-alert { padding: .5rem .75rem; border-radius: 8px; font-size: .85rem; line-height: 1.5; margin: .75rem 0 0; }
.kai-plan-alert.is-danger { background: #fde2e2; color: #8a1f1f; }
.kai-plan-alert.is-warning { background: #fff3cd; color: #6b4e00; margin-top: 0; margin-bottom: .5rem; }
.kai-plan-alert.is-info { background: var(--kai-blue-soft); color: var(--kai-navy); }
.kai-plan-alert .kai-chip { margin: 0 .25rem 0 0; }
.kai-plan-conditions { margin-bottom: 1rem; }
.kai-plan-conditions-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.kai-plan-choices { max-height: 9rem; overflow-y: auto; border: 1px solid var(--kai-line); border-radius: 8px; padding: .5rem .65rem; font-size: .82rem; }
.kai-plan-choice { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .3rem; cursor: pointer; }
.kai-plan-choice .form-check-input { margin: 0; flex: none; position: relative; top: .15rem; }
@media (max-width: 1199.98px) { .kai-plan { grid-template-columns: minmax(0, 1fr); } }   /* minmax: the plan table scrolls in its box, the page does not */

/* ===== Kombinationer (the tool) ===== */
.kai-komb { padding: 0; overflow: hidden; margin-bottom: 2rem; }
.kai-komb-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--kai-line); }
.kai-komb-bar .kai-card-title { font-size: 1.05rem; }
.kai-komb-stat { font-size: .8rem; color: var(--kai-muted); }
.kai-komb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1.25rem; background: var(--kai-bg); border-bottom: 1px solid var(--kai-line); font-size: .8rem; }
.kai-komb-search { width: 12rem; border-radius: 999px; }
.kai-komb-label { color: var(--kai-muted); }
.kai-komb-filters { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.kai-komb-filter { display: flex; align-items: center; gap: .35rem; cursor: pointer; margin: 0; }
.kai-komb-filter .form-check-input { margin: 0; }
.kai-komb-area { display: flex; height: clamp(520px, calc(100vh - 320px), 1000px); }
.kai-komb-canvas-wrap { flex: 1 1 auto; position: relative; min-width: 0; }
.kai-komb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; display: block; touch-action: none; }
.kai-komb-canvas.is-dragging { cursor: grabbing; }
.kai-komb-float { position: absolute; background: rgba(255, 255, 255, .92); font-size: .72rem; border: 1px solid var(--kai-line); border-radius: 8px; padding: .45rem .6rem; pointer-events: none; }
.kai-komb-help { left: 12px; bottom: 12px; color: var(--kai-muted); }
.kai-komb-legend { right: 12px; top: 12px; }
.kai-komb-key { display: inline-block; width: 9px; height: 9px; border-radius: 99px; background: #71717a; }
.kai-komb-key.is-100 { background: #2563eb; } .kai-komb-key.is-200 { background: #0891b2; } .kai-komb-key.is-300 { background: #059669; }
.kai-komb-key.is-400 { background: #d97706; } .kai-komb-key.is-500 { background: #dc2626; } .kai-komb-key.is-600 { background: #7c3aed; }
.kai-komb-key.is-700 { background: #db2777; } .kai-komb-key.is-800 { background: #0f766e; } .kai-komb-key.is-900 { background: #a16207; }
.kai-komb-side { width: 20rem; flex: 0 0 20rem; overflow-y: auto; border-left: 1px solid var(--kai-line); padding: 1rem; font-size: .85rem; }
.kai-komb-panel-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.kai-komb-panel-code { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kai-komb-panel-name { color: var(--kai-muted); font-size: .82rem; line-height: 1.45; margin-bottom: .25rem; }
.kai-komb-open { --bs-btn-border-radius: 999px; margin: .5rem 0 1rem; }
.kai-komb-table { font-size: .8rem; margin-bottom: 0; }
.kai-komb-table td { border-bottom: 0; padding-bottom: .1rem; }
.kai-komb-neighbour-name { color: var(--kai-muted); font-size: .74rem; line-height: 1.35; padding-bottom: .5rem; border-bottom: 1px solid var(--kai-line); }
@media (max-width: 767.98px) {
    .kai-komb-area { flex-direction: column; height: auto; }
    .kai-komb-canvas-wrap { height: 70vh; }
    .kai-komb-side { width: auto; flex: none; border-left: 0; border-top: 1px solid var(--kai-line); max-height: 40vh; }
}

/* ===== Prislista (the tool) ===== */
.kai-price { margin-bottom: 2rem; }
/* The long lists, Faktablad, Prislista, Tider and Begränsningar per åtgärd: less padding at the sides, so the list gets
   the width */
.kai-fs, .kai-price, .kai-times, .kai-lim-table-card { padding-left: 1rem; padding-right: 1rem; }
/* Every row on the page, scrolled with the page: the box scrolls sideways only, when the columns are wider than the
   screen. Its heading row then scrolls away with the rows, since a sticky heading sticks to the nearest scrolling box. */
.kai-price .kai-lim-scroll, .kai-times .kai-lim-scroll, .kai-lim-table-card .kai-lim-scroll { max-height: none; overflow-y: hidden; }
/* On a phone they are the page, as the chat is: edge to edge, the container's gutter taken back, without rounding or
   shadow, so the table has every pixel the screen has */
@media (max-width: 575.98px) {
    .kai-fs, .kai-price, .kai-times, .kai-lim-table-card { margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); padding-left: .75rem;
        padding-right: .75rem; border-width: 1px 0; border-radius: 0; box-shadow: none; }
}
.kai-price .kai-fs-kinds .btn small { display: block; font-size: .68rem; font-weight: 400; opacity: .75; }
.kai-price-summary { font-size: .85rem; color: var(--kai-muted); margin: -.5rem 0 1rem; }
.kai-price-name { min-width: 16rem; }
.kai-price-change { font-variant-numeric: tabular-nums; }
.kai-price-change.is-up { color: #9a3412; }
.kai-price-change.is-down { color: #166534; }
.kai-price-change.is-same { color: var(--kai-muted); }
.kai-price-change small { color: var(--kai-muted); }

/* ===== Ändringar (pages/site/changes.php) and the box on a sheet whose item changes ===== */
.kai-changes-cards { margin-bottom: 1.5rem; }
a.kai-lim-card { text-decoration: none; }
.kai-lim-card-note { font-size: .78rem; color: var(--kai-muted); line-height: 1.35; }
.kai-changes-card { padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; }
.kai-changes-card > .kai-card-title { scroll-margin-top: 2.5rem; }   /* a card's link shows the card's top edge too */
.kai-changes-type { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kai-muted); font-weight: 700; margin: 1.25rem 0 .5rem; }
.kai-changes-list { list-style: none; padding: 0; margin: 0; }
.kai-changes-list li { display: flex; gap: .75rem; align-items: baseline; padding: .6rem 0; border-top: 1px solid var(--kai-line);
    font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; }
.kai-changes-list li:first-child { border-top: 0; }
.kai-changes-code { flex: none; min-width: 4.5rem; }
.kai-changes-code .kai-chip { margin: 0; }
.kai-changes-prices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; }
.kai-changes-source { margin: 0 0 2rem; }
.kai-changes-card del, .kai-sheet-changes del { background: #fde2e2; color: #8a1f1f; }
.kai-changes-card ins, .kai-sheet-changes ins { background: #dcf3e4; color: #14532d; text-decoration: none; }
.kai-sheet-changes { margin: 0; padding: 1rem 2rem 1.1rem; border-bottom: 1px solid var(--kai-line); background: var(--kai-blue-soft); font-size: .88rem; line-height: 1.6; }
.kai-sheet-changes-title { font-size: .95rem; font-weight: 700; color: var(--kai-navy); margin-bottom: .35rem; }
.kai-sheet-changes-note { margin: 0 0 .4rem; color: var(--kai-muted); }
/* The switch between the regulations a sheet can be read in (pages/site/sheet.php) */
.kai-sheet-periods { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.kai-sheet-period { display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .8rem; border: 1px solid var(--kai-line);
    border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--kai-navy); text-decoration: none; background: var(--kai-card); }
.kai-sheet-period small { font-weight: 400; color: var(--kai-muted); }
.kai-sheet-period:hover { border-color: var(--kai-blue); }
.kai-sheet-period.is-current { background: var(--kai-navy); border-color: var(--kai-navy); color: #fff; }
.kai-sheet-period.is-current small { color: rgba(255, 255, 255, .8); }
.kai-sheet-changes ul { margin: 0 0 .4rem; padding-left: 1.1rem; overflow-wrap: anywhere; }
@media (max-width: 991.98px) { .kai-changes-prices { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
    .kai-changes-card { padding: 1.25rem; }
    .kai-changes-list li { flex-direction: column; gap: .3rem; }
    .kai-sheet-changes { padding-left: 1.25rem; padding-right: 1.25rem; }
}
.kai-price-history-btn { padding: 0 .3rem; color: var(--kai-blue); font-size: 1rem; line-height: 1; }
.kai-price-history-btn[aria-expanded="true"] { color: var(--kai-navy); }
/* The history under a row (frontend/site/price-list.ts): the line chart with its legend to the left, the table of the
   periods to the right, in a box that scrolls once the lists since 2008 outgrow the chart. Each series carries its
   colour in --kai-series, which the key in the legend, the line and the dots all read. */
.kai-price-history { display: grid; grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); gap: 1rem 2rem; align-items: start; }
.kai-price-history .kai-sheet-note, .kai-price-history .kai-fs-empty { grid-column: 1 / -1; margin: 0; }
.kai-price-history-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .35rem; }
.kai-price-history-code { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kai-price-history-name { color: var(--kai-muted); font-size: .9rem; }
.kai-price-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .78rem; margin-bottom: .5rem; }
.kai-price-legend small { color: var(--kai-muted); }
.is-reference { --kai-series: var(--kai-blue); }
.is-specialist { --kai-series: var(--kai-amber); }
.is-technician { --kai-series: var(--kai-muted); }
.kai-price-key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .35rem; background: var(--kai-series); }
.kai-price-chart { width: 100%; height: auto; display: block; }
.kai-price-grid { stroke: var(--kai-line); stroke-width: 1; }
.kai-price-line { fill: none; stroke: var(--kai-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kai-price-dot { fill: var(--kai-series); stroke: var(--kai-card); stroke-width: 1.5; }
.kai-price-dot.is-coming { fill: var(--kai-card); stroke: var(--kai-series); stroke-width: 2; }
.kai-price-chart-label { font-size: 11px; fill: var(--kai-muted); }
.kai-price-history-scroll { max-height: 22rem; overflow: auto; border: 1px solid var(--kai-line); border-radius: 8px; }
.kai-price-history-table { font-size: .8rem; margin: 0; }
.kai-price-history-table th { position: sticky; top: 0; background: var(--kai-bg); }
.kai-price-history-table td:first-child { white-space: nowrap; }   /* "1 juli 2008- 31 dec 2008" on one line; the box scrolls sideways if it must */
.kai-price-history-table tr.is-coming td { color: var(--kai-muted); }
@media (max-width: 767.98px) { .kai-price-history { grid-template-columns: 1fr; } }

/* ===== Tider (the tool) ===== */
.kai-times { margin-bottom: 2rem; }
.kai-times .kai-card-title small { margin-left: .5rem; font-weight: 400; }
.kai-times-facts { margin-bottom: 1rem; }
.kai-times-name { min-width: 16rem; }
.kai-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.kai-sort:hover { color: var(--kai-navy); }
.kai-sort[aria-sort="ascending"]::after { content: " ▲"; font-size: .6em; }
.kai-sort[aria-sort="descending"]::after { content: " ▼"; font-size: .6em; }

/* ===== Tools (the tiles) ===== */
.kai-tools { margin-bottom: 3rem; }

/* ===== The offer to install the app (templates/site/partials/install-app.php, frontend/shared/install.ts) ===== */
.kai-install { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 3rem; padding: 1.25rem 1.5rem; border-radius: var(--kai-radius);
    background: var(--kai-blue-soft); border: 1px solid #d3e3f5; }
.kai-install-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 12px; flex: none;
    background: var(--kai-card); color: var(--kai-blue); font-size: 1.5rem; }
.kai-install-text { flex: 1 1 auto; min-width: 0; color: var(--kai-muted); line-height: 1.55; }
.kai-install-title { font-size: 1.1rem; font-weight: 800; color: var(--kai-ink); margin: 0 0 .2rem; }
.kai-install-ios { margin-top: .5rem; color: var(--kai-navy); }
/* The questions under Om det inte fungerar on /app: a row each that folds out its answer, with a chevron that turns */
.kai-faq { border-top: 1px solid var(--kai-line); }
.kai-faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; cursor: pointer;
    list-style: none; font-weight: 600; }
.kai-faq > summary::-webkit-details-marker { display: none; }
.kai-faq > summary::after { content: ''; flex: none; width: .55rem; height: .55rem; margin-right: .25rem; border-right: 2px solid var(--kai-muted);
    border-bottom: 2px solid var(--kai-muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.kai-faq[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.kai-faq > summary:hover { color: var(--kai-navy); }
.kai-faq > summary:focus-visible { outline: 2px solid var(--kai-blue); outline-offset: 2px; border-radius: 4px; }
.kai-faq > p { margin: -.25rem 0 .9rem; color: var(--kai-muted); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .kai-faq > summary::after { transition: none; } }
.kai-install-ios .icon { vertical-align: -.15em; }
.kai-install-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.kai-install-help { font-weight: 600; text-decoration: none; white-space: nowrap; }
.kai-install-help:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
    .kai-install { flex-wrap: wrap; align-items: flex-start; padding: 1.1rem 1.25rem; gap: .9rem; }
    .kai-install-text { flex-basis: calc(100% - 4rem); }
    .kai-install-actions { width: 100%; justify-content: space-between; }
}
/* /app (pages/site/app.php): the Installera button, Safari's steps or the word that the app is already there */
.kai-app-now { font-size: 1.02rem; }
.kai-app-now .btn { display: inline-flex; align-items: center; }
.kai-app-now [data-install-done] .icon { color: var(--kai-teal); }
/* One row of every tool on a wide screen, whatever their number (App\Tools::menu()); rows of four and two below */
.kai-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .9rem; }
.kai-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 7.5rem; padding: 1rem .5rem;
    border-radius: 14px; background: var(--kai-blue-soft); color: var(--kai-ink); text-decoration: none; font-weight: 700; font-size: .92rem;
    position: relative; transition: transform .15s, box-shadow .15s; }
a.kai-tile:hover { transform: translateY(-2px); box-shadow: var(--kai-shadow); color: var(--kai-navy); }
.kai-tile-icon { font-size: 2rem; color: var(--kai-blue); line-height: 1; }
.kai-tile.is-soon { color: var(--kai-muted); background: #eef2f7; }
.kai-tile.is-soon .kai-tile-icon { color: var(--kai-faint); }
.kai-tile .kai-soon { position: absolute; top: .5rem; right: .5rem; margin: 0; }
@media (max-width: 991.98px) { .kai-tiles { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kai-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kai-tools-all { display: flex; justify-content: center; margin-top: 1.1rem; }

/* ===== The tools' overview (/verktyg, pages/site/tools.php) =====
   A card per tool in its group: the icon in the soft blue of the start page's tiles, the name, what it does, and
   Öppna. The whole card is the link; it lifts and its border takes the blue when pointed at. */
.kai-toolgroup { margin-bottom: 2.5rem; }
.kai-toolgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: 1rem; }
.kai-toolgroup-title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.kai-toolgroup-line { color: var(--kai-muted); margin: 0; }
.kai-toolcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.kai-toolcards > li { display: flex; }
.kai-toolcard { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; width: 100%; padding: 1.4rem 1.4rem 1.2rem;
    background: var(--kai-card); border: 1px solid var(--kai-line); border-radius: var(--kai-radius); color: var(--kai-ink); text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s; }
a.kai-toolcard:hover, a.kai-toolcard:focus-visible { transform: translateY(-2px); box-shadow: var(--kai-shadow); border-color: var(--kai-blue); color: var(--kai-ink); }
.kai-toolcard-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem;
    border-radius: 12px; background: var(--kai-blue-soft); color: var(--kai-blue); font-size: 1.35rem; }
.kai-toolcard-name { font-size: 1.1rem; font-weight: 800; margin-top: .35rem; }
.kai-toolcard-text { flex: 1; color: var(--kai-muted); font-size: .95rem; line-height: 1.5; }
.kai-toolcard-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .92rem; font-weight: 600; color: var(--kai-blue); }
.kai-toolcard-go .icon { transition: transform .15s; }
a.kai-toolcard:hover .kai-toolcard-go .icon { transform: translateX(3px); }
.kai-toolcard.is-soon { background: #eef2f7; color: var(--kai-muted); }
.kai-toolcard.is-soon .kai-toolcard-icon { color: var(--kai-faint); background: var(--kai-card); }
.kai-toolchat { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 2.5rem; }
.kai-toolchat-text { flex: 1; min-width: 14rem; }
/* On a phone the icon stands beside the text, so seven cards are not seven screens */
@media (max-width: 575.98px) {
    .kai-toolcard { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .15rem; padding: 1rem 1.1rem; }
    .kai-toolcard-icon { grid-row: span 3; align-self: start; }
    .kai-toolcard-name { margin-top: 0; }
    .kai-toolcard-go { margin-top: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .kai-toolcard, .kai-toolcard-go .icon { transition: none; } }

/* ===== Why ===== */
.kai-why { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: center; margin-bottom: 3rem; }
.kai-why-art { max-width: 320px; }
.kai-checks { list-style: none; padding: 0; margin: 0; font-size: 1.1rem; }
.kai-checks li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.kai-checks .icon { color: var(--kai-green); font-size: 1.3rem; }
@media (max-width: 767.98px) {
    .kai-why { grid-template-columns: 1fr; }
    .kai-why-art { max-width: 220px; margin: 0 auto; }
}

/* ===== Tandschema (/tandschema: the tooth chart, pages/site/teeth.php) =====
   The drawing with an SVG over it in the drawing's own units (templates/site/partials/tooth-chart.php): font sizes and
   strokes there are in those units and scale with the drawing. The panel stands beside the chart on a wide window,
   and the chart stays in view while the panel scrolls; on a narrower window the panel is under it and the drawing
   scrolls sideways rather than shrinking the teeth below a finger's width. Each part of the panel slides in when it is
   drawn, so a new tooth's panel visibly arrives. */
.kai-teeth { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 2rem; }
.kai-teeth-chart { position: sticky; top: calc(var(--kai-head) + 1rem); padding: 1rem 1rem .85rem; }
.kai-teeth-scroll { overflow-x: auto; }
.kai-teeth-plate { position: relative; min-width: 640px; }
.kai-teeth-img { display: block; width: 100%; height: auto; }
.kai-teeth-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kai-teeth-caption { font-size: 21px; font-weight: 700; fill: var(--kai-muted); letter-spacing: .08em; text-transform: uppercase; }
.kai-teeth-caption.is-side { font-size: 19px; font-weight: 600; fill: var(--kai-faint); letter-spacing: 0; text-transform: none; }
.kai-teeth-tooth, .kai-teeth-num { cursor: pointer; text-decoration: none; }
.kai-teeth-tooth:focus { outline: none; }
.kai-teeth-hit { fill: transparent; stroke: transparent; stroke-width: 3; transition: fill .15s, stroke .15s; }
.kai-teeth-pill { fill: transparent; transition: fill .15s; }
.kai-teeth-num { font-size: 25px; font-weight: 700; fill: var(--kai-muted); transition: fill .15s; }
.kai-teeth-tooth:hover .kai-teeth-hit { fill: rgba(47, 127, 201, .07); stroke: rgba(47, 127, 201, .35); }
.kai-teeth-tooth:hover .kai-teeth-num { fill: var(--kai-blue); }
.kai-teeth-tooth:focus-visible .kai-teeth-hit { stroke: var(--kai-blue); stroke-width: 5; }
.kai-teeth-tooth.is-zone .kai-teeth-hit { fill: rgba(34, 163, 181, .15); }
.kai-teeth-tooth.is-zone .kai-teeth-pill { fill: rgba(34, 163, 181, .22); }
.kai-teeth-tooth[aria-current="page"] .kai-teeth-hit { fill: rgba(47, 127, 201, .12); stroke: var(--kai-navy); stroke-width: 4; }
.kai-teeth-tooth[aria-current="page"] .kai-teeth-pill { fill: var(--kai-navy); }
.kai-teeth-tooth[aria-current="page"] .kai-teeth-num { fill: #fff; }
.kai-teeth-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: .75rem;
    padding-top: .75rem; border-top: 1px solid var(--kai-line); }
.kai-teeth-pick { display: flex; align-items: center; gap: .5rem; }
.kai-teeth-pick-label, .kai-teeth-zones-label { font-size: .82rem; font-weight: 600; color: var(--kai-muted); white-space: nowrap; }
.kai-teeth-pick .form-select { width: auto; }
.kai-teeth-zones { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kai-teeth-zone { border: 1px solid var(--kai-line); background: var(--kai-card); border-radius: 999px; padding: .2rem .75rem; font-size: .85rem;
    font-weight: 700; color: var(--kai-navy); transition: background-color .15s, border-color .15s, color .15s; }
.kai-teeth-zone:hover { border-color: var(--kai-teal); }
.kai-teeth-zone[aria-pressed="true"] { background: var(--kai-teal); border-color: var(--kai-teal); color: #fff; }
.kai-teeth-panel { padding: 1.5rem 1rem; }   /* the sides as the chart's, so the sentences get the width */
.kai-teeth-panel > * { animation: kai-teeth-in .3s ease both; }
.kai-teeth-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kai-teal); margin-bottom: .2rem; }
.kai-teeth-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .25rem; }
.kai-teeth-where, .kai-teeth-lead { color: var(--kai-muted); margin-bottom: .75rem; }
.kai-teeth-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 .5rem; }
.kai-teeth-tag { font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; border: 1px solid transparent; }
.kai-teeth-tag.is-in { background: rgba(34, 163, 181, .14); color: #10707d; }
.kai-teeth-tag.is-out { background: var(--kai-bg); border-color: var(--kai-line); color: var(--kai-faint); }
h3.kai-teeth-h { display: flex; align-items: center; gap: .5rem; }
/* The regulation's heading with the button that opens or closes every folded item */
.kai-teeth-h-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin: 1.35rem 0 .5rem; }
.kai-teeth-h-row .kai-teeth-h { margin: 0; }
.kai-teeth-toggle { border: 1px solid var(--kai-line); background: var(--kai-card); border-radius: 999px; padding: .2rem .8rem; font-size: .8rem;
    font-weight: 700; color: var(--kai-navy); transition: background-color .15s, border-color .15s; }
.kai-teeth-toggle:hover { border-color: var(--kai-blue); background: var(--kai-blue-soft); }
.kai-teeth-h { font-size: 1.02rem; font-weight: 700; margin: 1.35rem 0 .5rem; }
.kai-teeth-count { display: inline-block; font-size: .72rem; font-weight: 700; line-height: 1.4; background: var(--kai-blue-soft); color: var(--kai-navy);
    border-radius: 999px; padding: .05rem .5rem; vertical-align: middle; }
.kai-teeth-note { font-size: .86rem; color: var(--kai-muted); margin-bottom: .5rem; }
.kai-teeth-actions { font-size: .9rem; margin-bottom: .25rem; }
.kai-teeth-actions td { vertical-align: middle; }
.kai-teeth-actions .kai-chip { margin-bottom: 0; }
.kai-teeth-plan { font-size: .85rem; font-weight: 600; text-decoration: none; }
.kai-teeth-plan:hover { text-decoration: underline; }
.kai-teeth-kind { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kai-muted); margin: 1rem 0 .3rem; }
.kai-teeth-items { list-style: none; padding: 0; margin: 0; }
.kai-teeth-item { padding: .6rem 0; border-top: 1px solid var(--kai-line); }
.kai-teeth-item:first-child { border-top: 0; padding-top: .15rem; }
.kai-teeth-item-head { display: flex; align-items: baseline; gap: .15rem; }
.kai-teeth-item-head .kai-chip { flex: none; margin-bottom: 0; }
/* A folded item: the heading opens it, with a chevron and the number of sentences at the end of the line */
.kai-teeth-more > summary { list-style: none; cursor: pointer; border-radius: 8px; margin: 0 -.4rem; padding: .15rem .4rem; }
.kai-teeth-more > summary::-webkit-details-marker { display: none; }
.kai-teeth-more > summary:hover { background: var(--kai-bg); }
.kai-teeth-more > summary:focus-visible { outline: 2px solid var(--kai-blue); outline-offset: 1px; }
.kai-teeth-more-hint { margin-left: auto; padding-left: .5rem; flex: none; font-size: .75rem; color: var(--kai-faint); white-space: nowrap; }
.kai-teeth-more-hint::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .45rem; vertical-align: .15em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.kai-teeth-more[open] > summary .kai-teeth-more-hint::after { transform: rotate(-135deg); vertical-align: -.05em; }
.kai-teeth-more[open] > .kai-teeth-sentences { animation: kai-teeth-in .25s ease both; }
.kai-teeth-item-name { font-weight: 600; font-size: .92rem; }
.kai-teeth-sentences { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.kai-teeth-sentences li { margin-bottom: .25rem; }
.kai-teeth-sentences li:last-child { margin-bottom: 0; }
.kai-teeth-range { border-radius: 4px; padding: 0 .2rem; }
.kai-teeth-range.is-in { background: rgba(34, 163, 181, .2); color: inherit; font-weight: 700; }
.kai-teeth-range.is-out { background: transparent; padding: 0; color: var(--kai-muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.kai-teeth-elsewhere { margin-top: 1.25rem; border-top: 1px solid var(--kai-line); }
.kai-teeth-elsewhere > summary { display: list-item; cursor: pointer; margin: .9rem 0 .5rem; }
.kai-teeth-ask { margin-top: 1.5rem; }
.kai-teeth-zone-list { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.kai-teeth-zone-list li { padding: .5rem 0; border-top: 1px solid var(--kai-line); }
.kai-teeth-zone-label { display: inline-block; min-width: 2.75rem; font-weight: 800; color: var(--kai-teal); }
@media (max-width: 1199.98px) {
    .kai-teeth { grid-template-columns: minmax(0, 1fr); }
    .kai-teeth-chart { position: static; }
}
/* On a phone the chart and the panel are the page, as the lists and the fact sheets are: edge to edge, the
   container's gutter taken back, without rounding or shadow, .75rem at the sides */
@media (max-width: 575.98px) {
    .kai-teeth-chart, .kai-teeth-panel { margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5);
        padding-left: .75rem; padding-right: .75rem; border-width: 1px 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kai-teeth-panel > *, .kai-teeth-more[open] > .kai-teeth-sentences { animation: none; }
    .kai-teeth-more-hint::after, .kai-teeth-toggle { transition: none; }
    .kai-teeth-hit, .kai-teeth-pill, .kai-teeth-num, .kai-teeth-zone { transition: none; }
}
@keyframes kai-teeth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== Knowyn ===== */
.kai-knowyn { display: flex; align-items: center; gap: 1.5rem; padding: 1.75rem 2rem; border-radius: var(--kai-radius);
    background: linear-gradient(135deg, #e6f0fb 0%, #eef7f8 100%); border: 1px solid var(--kai-line); margin-bottom: 1rem; }
.kai-knowyn-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 12px;
    background: var(--kai-card); color: var(--kai-teal); font-size: 1.6rem; flex: none; }
.kai-knowyn-text { flex: 1 1 auto; }
.kai-knowyn-title { font-size: 1.3rem; font-weight: 800; margin-bottom: .35rem; }
.kai-knowyn .btn { flex: none; white-space: nowrap; }
@media (max-width: 767.98px) {
    .kai-knowyn { flex-direction: column; align-items: flex-start; }
}

/* ===== About ===== */
/* The About pages are as wide as the start page; the lead under the title keeps the tools' measure. The terms and the
   privacy policy are long running text and keep a narrower frame, so a line stays readable. */
.kai-about .kai-page-lead { max-width: 60rem; }
.kai-legal { max-width: 56rem; }
.kai-about-card { margin-bottom: 1.5rem; }
.kai-about-item { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--kai-line); }
.kai-about-item:last-child { padding-bottom: 0; }
.kai-about-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 10px;
    background: var(--kai-blue-soft); color: var(--kai-blue); font-size: 1.25rem; flex: none; }
.kai-about-heading { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
/* On a phone the About pages' cards are the page, as the lists, the sheets and the chat are: edge to edge, the
   container's gutter taken back, without rounding or shadow, .75rem at the sides, and a smaller icon beside each item,
   so the text has the screen's width (/om, the terms, the privacy policy, the licences) */
@media (max-width: 575.98px) {
    .kai-about-card { margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); padding-left: .75rem;
        padding-right: .75rem; border-width: 1px 0; border-radius: 0; box-shadow: none; }
    .kai-about-item { gap: .75rem; }
    .kai-about-icon { width: 2rem; height: 2rem; border-radius: 8px; font-size: 1rem; }
}
.kai-licenses { list-style: none; padding: 0; margin: 0; }
.kai-licenses li { padding: .75rem 0; border-top: 1px solid var(--kai-line); }
.kai-licenses li:first-child { border-top: 0; padding-top: 0; }
.kai-licenses a { font-weight: 600; }
/* The legal pages (/om/villkor, /om/integritet): the version line under the heading, the summary box, numbered
   sections and the tables of purposes and retention periods */
.kai-legal-meta { color: var(--kai-muted); font-size: .9rem; margin: .25rem 0 0; }
.kai-legal-summary { margin: 0; padding-left: 1.25rem; }
.kai-legal-summary li { margin-bottom: .4rem; }
.kai-legal-summary li:last-child { margin-bottom: 0; }
.kai-legal h2.kai-card-title { margin-top: 1.5rem; }
.kai-legal h2.kai-card-title:first-child { margin-top: 0; }
.kai-legal p:last-child, .kai-legal ul:last-child { margin-bottom: 0; }
.kai-legal-table { width: 100%; font-size: .95rem; margin-bottom: 1rem; }
.kai-legal-table th, .kai-legal-table td { padding: .5rem .6rem .5rem 0; border-top: 1px solid var(--kai-line); vertical-align: top; }
.kai-legal-table th { font-weight: 700; }
.kai-legal-table thead th { border-top: 0; padding-top: 0; }
.kai-legal-log { margin: 0; padding-left: 1.25rem; }
/* On a phone the tables stack: one block per row, each cell led by its column heading (data-label in the markup) */
@media (max-width: 575.98px) {
    .kai-legal-table thead { display: none; }
    .kai-legal-table tr, .kai-legal-table td { display: block; }
    .kai-legal-table tr { border-top: 1px solid var(--kai-line); padding: .6rem 0; }
    .kai-legal-table td { border-top: 0; padding: .1rem 0; }
    .kai-legal-table td::before { content: attr(data-label) ": "; font-weight: 700; }
}

/* ===== Error ===== */
.kai-error { text-align: center; padding: 3rem 1.5rem; margin-top: 2.5rem; }
.kai-error-code { display: block; font-size: 3rem; font-weight: 800; color: var(--kai-faint); line-height: 1; margin-bottom: .5rem; }

/* ===== Footer ===== */
.kai-footer { border-top: 1px solid var(--kai-line); padding: 1.5rem 0; font-size: .82rem; color: var(--kai-muted); background: var(--kai-card); }
.kai-footer-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; }
.kai-footer-copy { max-width: 40rem; }
.kai-footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; }
.kai-footer-legal { margin-top: 1rem; font-size: .78rem; color: var(--kai-faint); }

/* ===== The round chat button (templates/site/partials/chat-fab.php) =====
   Bottom right on every page but the chat, above the page and under the top bar and the panels (z-index 1020), clear
   of a phone's rounded corners and home bar. The words beside the icon on a computer, the icon alone on a phone. */
.kai-fab { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 1020;
    display: inline-flex; align-items: center; gap: .5rem; height: 3.5rem; padding: 0 1.3rem 0 1.1rem; border-radius: 999px;
    background: var(--kai-blue); color: #fff; font-size: .95rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 8px 22px rgba(28, 61, 110, .28); transition: background-color .15s, transform .15s; }
.kai-fab .icon { width: 1.45rem; height: 1.45rem; }
.kai-fab:hover, .kai-fab:focus-visible { background: var(--kai-navy); color: #fff; }
.kai-fab:hover { transform: translateY(-2px); }
.kai-fab:focus-visible { outline: 3px solid var(--kai-blue-soft); outline-offset: 3px; }
/* Room at the foot of the page, so the button never covers the footer's last line */
.kai-body:has(.kai-fab) .kai-footer { padding-bottom: 6rem; }
@media (max-width: 575.98px) {
    .kai-fab { right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); width: 3.5rem; padding: 0;
        justify-content: center; }
    .kai-fab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .kai-fab { transition: none; }
    .kai-fab:hover { transform: none; }
}
.kai-knowyn-sender { margin-top: .5rem; font-size: .82rem; color: var(--kai-muted); }

/* ===== Who (/vem-ar-kai: the tooth tells who K.AI is) =====
   The scenes are plain cards beside a sticky figure. data-scene on .kai-mascot (1 in the HTML, changed by
   frontend/site/who.ts as the reader scrolls) poses the tooth: which mouth, where the brows and the pupils point,
   which arm is up and which prop is shown. The idle movement (float, breathe, blink, wave) is keyframes. Each moving
   part has its own element, so a keyframe animation, a transition and a script animation never fight over the same
   transform: .kai-mascot floats, the svg bounces (script), .kai-mascot-body breathes, .kai-mascot-figure giggles
   (script), the arms pose, .kai-mascot-arm-wave waves, [data-mascot-pupil] follows the pointer (script, the transform
   attribute). Everything keeps still under prefers-reduced-motion. */
/* --kai-who-figure is the figure's height (the mascot's max-width, the drawing is square). The figure is sticky inside
   the grid, so it travels up with the grid's bottom once the page ends, and its bottom margin says where it stops.
   The last scene is as tall as the figure with its card at the top (the scene's margin keeps the rhythm of the 64vh
   scenes), so when the grid's bottom carries the tooth, the card's tail (2.4rem + 8px under its top) points 10px
   above the tooth's middle, at the eyes, much as it does in the first scene, whatever the card's height up to the
   figure's (a taller card, as on a tablet, puts the tail at the brows). The margin under the grid makes sure the
   bottom does carry the tooth: on a tall viewport the page would otherwise end while the tooth still hangs at the
   middle, above the card. 50vh - 35rem assumes at least 21rem (the Knowyn section and the footer) under the grid;
   more under it only moves the pair higher, never apart. */
.kai-who { --kai-who-figure: 300px; display: grid; grid-template-columns: minmax(220px, var(--kai-who-figure)) minmax(0, 1fr);
    gap: 2rem 3.5rem; align-items: start; margin-bottom: max(3rem, 50vh - 35rem); }
.kai-who-figure { position: sticky; top: calc(50vh + var(--kai-head) / 2 - var(--kai-who-figure) / 2 - 20px);
    margin-bottom: calc(var(--kai-who-figure) / 2 - 2.4rem - 18px); }
.kai-who-scene { min-height: 64vh; display: flex; align-items: center; }
.kai-who-scene:last-child { min-height: var(--kai-who-figure); align-items: flex-start; margin-top: calc(32vh - 8rem); }
.kai-who-bubble { position: relative; width: 100%; max-width: 40rem; background: var(--kai-card); border: 1px solid var(--kai-line);
    border-radius: var(--kai-radius); box-shadow: var(--kai-shadow); padding: 1.5rem 1.75rem; }
.kai-who-bubble::before { content: ""; position: absolute; left: -9px; top: 2.4rem; width: 16px; height: 16px; background: var(--kai-card);
    border-left: 1px solid var(--kai-line); border-bottom: 1px solid var(--kai-line); transform: rotate(45deg); }
.kai-who-step { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kai-teal); margin-bottom: .4rem; }
.kai-who-heading { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: .75rem; }
.kai-who-bubble p { font-size: 1.05rem; line-height: 1.65; margin-bottom: 0; }
.kai-who-tools { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1rem 0 0; }
.kai-who-tools a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 999px; background: var(--kai-blue-soft);
    color: var(--kai-navy); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background-color .15s, color .15s; }
.kai-who-tools .icon { color: var(--kai-blue); }
.kai-who-tools a:hover, .kai-who-tools a:focus-visible { background: var(--kai-navy); color: #fff; }
.kai-who-tools a:hover .icon, .kai-who-tools a:focus-visible .icon { color: #fff; }
.kai-who-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.25rem; }
.kai-who-actions .btn .icon { margin-left: .35rem; }
.kai-hero-link, .kai-about-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-weight: 600; text-decoration: none; }
.kai-hero-link:hover, .kai-about-link:hover { text-decoration: underline; }
@media (max-width: 767.98px) {
    .kai-who { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
    .kai-who-figure { top: var(--kai-head); z-index: 2; background: var(--kai-bg); padding: .5rem 0 .75rem; margin-bottom: 0; display: flex;
        justify-content: center; }
    .kai-who-figure .kai-mascot { max-width: 150px; }
    .kai-who-scenes { padding-bottom: 2rem; }
    .kai-who-scene { min-height: 0; padding: .75rem 0 1.25rem; }
    .kai-who-scene:last-child { min-height: 0; margin-top: 0; }
    .kai-who-bubble { max-width: none; }
    .kai-who-bubble::before { left: 50%; top: -9px; margin-left: -8px; border-left: 1px solid var(--kai-line); border-top: 1px solid var(--kai-line); border-bottom: 0; }
}

/* The mascot (templates/site/partials/mascot.php). transform-box: view-box puts the transform origins in the units
   of the drawing (the shoulder, the bottom of the tooth); fill-box centres a part on itself. */
.kai-mascot { width: 100%; max-width: 300px; margin: 0 auto; animation: kai-float 4.2s ease-in-out infinite; }   /* 300px: --kai-who-figure */
.kai-mascot-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; }
.kai-mascot-ring { fill: var(--kai-teal); }
.kai-mascot-body { transform-box: view-box; transform-origin: 120px 194px; animation: kai-breathe 3.8s ease-in-out infinite; }
.kai-mascot-figure { transform-box: view-box; transform-origin: 120px 190px; }
.kai-mascot-tooth { fill: #fff; stroke: var(--kai-navy); stroke-width: 4; stroke-linejoin: round; }
.kai-mascot-limb { fill: none; stroke: var(--kai-navy); stroke-width: 7; stroke-linecap: round; }
.kai-mascot-hand { fill: #fff; stroke: var(--kai-navy); stroke-width: 4; }
.kai-mascot-arm, .kai-mascot-arm-wave { transform-box: view-box; }
.kai-mascot-arm { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.kai-mascot-arm-left, .kai-mascot-arm-wave { transform-origin: 90px 148px; }
.kai-mascot-arm-right { transform-origin: 150px 148px; }
.kai-mascot-brow { fill: none; stroke: var(--kai-navy); stroke-width: 3.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center;
    transition: transform .4s ease; }
.kai-mascot-eye { transform-box: fill-box; transform-origin: center; animation: kai-blink 5s infinite; }
.kai-mascot-glance { transition: transform .4s ease; }
.kai-mascot-pupil { fill: var(--kai-navy); }
.kai-mascot-glint { fill: #fff; }
.kai-mascot-cheek { fill: #f4b9b0; opacity: .85; }
.kai-mascot-mouth { opacity: 0; transition: opacity .2s; }
.kai-mascot-mouth-smile { fill: none; stroke: var(--kai-navy); stroke-width: 4; stroke-linecap: round; opacity: 1; }
.kai-mascot-mouth-open, .kai-mascot-mouth-grin { fill: var(--kai-navy); }
.kai-mascot-mouth-flat { fill: none; stroke: var(--kai-navy); stroke-width: 4; stroke-linecap: round; }
.kai-mascot-prop { opacity: 0; transform: translateY(10px) scale(.7); transform-box: fill-box; transform-origin: center;
    transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.kai-mascot-paper { fill: #fff; stroke: var(--kai-navy); stroke-width: 3; stroke-linejoin: round; }
.kai-mascot-line { fill: none; stroke: var(--kai-faint); stroke-width: 3; stroke-linecap: round; }
.kai-mascot-spine { fill: var(--kai-navy); }
.kai-mascot-hole { fill: var(--kai-teal); }
.kai-mascot-text { font-family: var(--bs-body-font-family); font-size: 13px; font-weight: 700; fill: var(--kai-navy); }
.kai-mascot-text-big { font-size: 30px; fill: var(--kai-teal); }
.kai-mascot-scrub { stroke: var(--kai-navy); stroke-width: 3; stroke-linejoin: round; }
.kai-mascot-scrub-blue { fill: var(--kai-blue); }
.kai-mascot-scrub-navy { fill: var(--kai-navy); }
.kai-mascot-coat { fill: #fff; }
.kai-mascot-collar { fill: #fff; }
.kai-mascot-collar-blue { fill: var(--kai-blue); }
.kai-mascot-head { fill: #fff; stroke: var(--kai-navy); stroke-width: 2.5; }
.kai-mascot-hair { fill: var(--kai-navy); }
.kai-mascot-cap { fill: var(--kai-teal); stroke: var(--kai-navy); stroke-width: 2.5; stroke-linejoin: round; }
.kai-mascot-dot { fill: var(--kai-navy); }
.kai-mascot-smile { fill: none; stroke: var(--kai-navy); stroke-width: 1.6; stroke-linecap: round; }
.kai-mascot-glasses { fill: none; stroke: var(--kai-navy); stroke-width: 1.4; }

/* The scenes: 1 hello, 2 the book, 3 the team, 4 the tag, 5 the hand up, 6 the question */
.kai-mascot[data-scene="1"] .kai-mascot-arm-left { transform: rotate(78deg); }   /* the arms sit behind the tooth: a steeper angle would hide the hand */
.kai-mascot[data-scene="1"] .kai-mascot-arm-wave { animation: kai-wave 1.6s ease-in-out infinite; }
.kai-mascot[data-scene="2"] .kai-mascot-prop[data-prop="book"], .kai-mascot[data-scene="3"] .kai-mascot-prop[data-prop="team"],
.kai-mascot[data-scene="4"] .kai-mascot-prop[data-prop="tag"], .kai-mascot[data-scene="6"] .kai-mascot-prop[data-prop="bubble"] { opacity: 1; transform: none; }
.kai-mascot[data-scene="2"] .kai-mascot-mouth-smile, .kai-mascot[data-scene="3"] .kai-mascot-mouth-smile, .kai-mascot[data-scene="4"] .kai-mascot-mouth-smile,
.kai-mascot[data-scene="5"] .kai-mascot-mouth-smile, .kai-mascot[data-scene="6"] .kai-mascot-mouth-smile { opacity: 0; }
.kai-mascot[data-scene="2"] .kai-mascot-mouth-open, .kai-mascot[data-scene="6"] .kai-mascot-mouth-open { opacity: 1; }
.kai-mascot[data-scene="3"] .kai-mascot-mouth-grin, .kai-mascot[data-scene="4"] .kai-mascot-mouth-grin { opacity: 1; }
.kai-mascot[data-scene="5"] .kai-mascot-mouth-flat { opacity: 1; }
.kai-mascot[data-scene="2"] .kai-mascot-glance { transform: translate(-2.5px, 2.5px); }
.kai-mascot[data-scene="3"] .kai-mascot-glance { transform: translate(2.5px, 1px); }
.kai-mascot[data-scene="3"] .kai-mascot-arm-right { transform: rotate(-60deg); }   /* presents the team, the hand above their heads */
.kai-mascot[data-scene="4"] .kai-mascot-glance { transform: translate(2px, -2.5px); }
.kai-mascot[data-scene="4"] .kai-mascot-brow { transform: translateY(-3px); }
.kai-mascot[data-scene="5"] .kai-mascot-arm-right { transform: rotate(-80deg); }
.kai-mascot[data-scene="5"] .kai-mascot-brow-left { transform: rotate(12deg); }
.kai-mascot[data-scene="5"] .kai-mascot-brow-right { transform: rotate(-12deg); }
.kai-mascot[data-scene="6"] .kai-mascot-glance { transform: translate(2.5px, -2px); }
.kai-mascot[data-scene="6"] .kai-mascot-brow { transform: translateY(-5px); }
.kai-mascot.is-tickled .kai-mascot-mouth { opacity: 0; }
.kai-mascot.is-tickled .kai-mascot-mouth-grin { opacity: 1; }
@keyframes kai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kai-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, 1.03); } }
@keyframes kai-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes kai-wave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) {
    .kai-mascot, .kai-mascot-body, .kai-mascot-eye, .kai-mascot-arm-wave { animation: none; }
    .kai-mascot-arm, .kai-mascot-brow, .kai-mascot-glance, .kai-mascot-mouth, .kai-mascot-prop { transition: none; }
}