/* THE CORE BASE SHEET — the neutral base's first sheet (docs/specs/plan-installable-themes.md, step 1, N1, and §3.2).

   WHAT IT IS FOR. On `neutral` nothing of Zen's sheet is loaded, but the core still draws its own components on every
   base: the frame draws the skip link, the consent notice and the back-to-top button, and stored bodies carry tables,
   YouTube facades and, saved under `zen`, Zen's sections. Kiril, 2026-10-28 (L14): „Основните компоненти получават
   минималните стилове, необходими за работа: таблици на телефон, видео, връщане нагоре и достъпност.“ So this sheet
   carries what each of those needs to WORK, and nothing about how it LOOKS: no font, no palette, no spacing scale.
   A package's `style.css` is linked after it and owns the look.

   SYSTEM COLOURS, NOT A PALETTE. Canvas and CanvasText are the page's own ground and ink, so every rule here reads
   in a light page and a dark one alike and a theme that sets `color-scheme` is followed, not fought.

   ZERO SPECIFICITY WHERE IT IS A DEFAULT. A rule wrapped in :where() is a starting point any theme rule beats; the
   rules a component needs to work at all (the table that scrolls, the button that is fixed and hidden until shown)
   are plain, because a theme that drops them breaks the component, as §3.2 records for each. */

:root {
    /* The back-to-top button's numbers, as Zen's sheet declares them, so the tokens an owner sets in a Code snippet
       (Settings → Features: --zen-to-top-size, -right, -bottom, -radius and -icon) restyle it on every base. */
    --zen-to-top-size: 46px;
    --zen-to-top-right: 33px;
    --zen-to-top-bottom: 90px;
    --zen-to-top-radius: 50%;
    --zen-to-top-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 320 512%27%3E%3Cpath d=%27M177 160L313 296Q320 303 320 313Q320 323 313 330L290 352Q283 359 273 359Q263 359 256 352L160 256L64 352Q57 359 47 359Q37 359 30 352L7 330Q0 323 0 313Q0 303 7 296L143 160Q150 153 160 153Q170 153 177 160Z%27/%3E%3C/svg%3E");
}

/* ---- accessibility ---------------------------------------------------------------------------- */

/* THE FIRST TAB STOP (_FrameBodyStart): off screen until it has focus, then over the header's corner. */
.zen-skip {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    color: Canvas;
    background: CanvasText;
    text-decoration: none;
    transform: translateY(-200%);
}

.zen-skip:focus {
    transform: none;
}

/* Read by a screen reader, drawn for nobody: the search box's label, a bare "read more"'s context. Not
   display:none, which would take it out of the accessibility tree too. */
.zen-link__context,
.zen-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* A FOCUS RING THE KEYBOARD CAN SEE on every control, a theme's own ring included as long as it draws one. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* NOTHING MOVES FOR A VISITOR WHO ASKED FOR STILLNESS. The core's own motion is below, behind both guards; this is the
   scroll a theme may have smoothed. */
@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }
}

/* ---- the frame's default chrome (Views/Themes/neutral/Shared/_Layout.cshtml) ------------------------------------
   Drawn only where no `site-header` or `site-footer` template is assigned. Laid out, not designed: a row that wraps, so
   no width hides an item. */

:where(img, video) {
    max-width: 100%;
    height: auto;
}

:where(.zen-chrome__bar, .zen-chrome__columns) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 1rem;
}

:where(.zen-chrome__nav .zen-menu__list, .zen-chrome__columns .zen-menu__list) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.zen-chrome__main) {
    display: block;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}

:where(.zen-chrome__legal) {
    padding: 0 1rem 1rem;
}

/* ---- the consent notice (Consent/_ConsentBanner, wwwroot/js/zen-consent.js) -------------------------------------
   A notice in the page's flow until its script has made it a dialog (aria-modal), then fixed at the foot of the screen
   over the scrim the script draws — so with no script it is a notice that hides nothing. The two answers are drawn
   alike: refusing has to be as easy as accepting.

   IN :where(), AT ZERO SPECIFICITY, as the rest of the defaults (Z17a, plan-installable-themes §6, ZN27): selected by
   id, these four outweighed any class a package's sheet styles the notice with, so a theme had to repeat the id to
   dress its own consent notice. The declarations are unchanged; a theme rule of any weight now wins. */

:where(#cookieConsentdiv) {
    max-width: 60rem;
    margin: 1rem auto;
    padding: 1rem 1.5rem;
    color: CanvasText;
    background: Canvas;
    border: 1px solid;
}

:where(#cookieConsentdiv[aria-modal]) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    max-height: 100vh;
    margin-bottom: 0;
    overflow-y: auto;
}

:where(#cookieConsentdiv button) {
    padding: 0.4rem 1rem;
    margin: 0 0.5rem 0.5rem 0;
    font: inherit;
    color: CanvasText;
    cursor: pointer;
    background: Canvas;
    border: 1px solid;
}

:where(#overlay) {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(16, 16, 19, 0.35);
}

/* ---- the back-to-top button (PartialViews/_ScrollToTop, wwwroot/js/zen-to-top.js) ------------------------------
   Rendered hidden, unhidden by its script, and SHOWN only once the reader has scrolled down (--shown). Hidden is
   visibility as well as opacity, so a button that is not shown is no Tab stop. Fixed in the corner, under the consent
   scrim (55) and its dialog (60). --zen-to-top-lift is the script's: the closed site's banner along the bottom. */

.zen-to-top {
    position: fixed;
    right: var(--zen-to-top-right);
    bottom: calc(var(--zen-to-top-bottom) + var(--zen-to-top-lift, 0px));
    z-index: 50;
    width: var(--zen-to-top-size);
    height: var(--zen-to-top-size);
    padding: 0;
    color: CanvasText;
    cursor: pointer;
    background: Canvas;
    border: 0;
    border-radius: var(--zen-to-top-radius);
    box-shadow: inset 0 0 0 2px GrayText;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
}

.zen-to-top--shown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.zen-to-top__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.zen-to-top__ring path {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
}

.zen-to-top__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 16px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    -webkit-mask: var(--zen-to-top-icon) center / contain no-repeat;
    mask: var(--zen-to-top-icon) center / contain no-repeat;
}

@media (max-width: 48rem) {
    :root {
        --zen-to-top-bottom: 142px;
    }
}

/* Its fade and rise, behind both guards: the visitor's device and the site's own pause. */
@media (prefers-reduced-motion: no-preference) {
    :where(:root:not(.zen-motion-off) .zen-to-top) {
        transition: 0.2s linear;
    }
}

/* ---- a wide table (wwwroot/js/zen-table-scroll.js) ---------------------------------------------------------------
   ON A PHONE A TABLE IS ITS OWN SCROLLING BOX (Z-01): a seven-column table made a 375px page 570px wide and put the
   consent notice's buttons out of reach. The script then makes a table that scrolls a Tab stop; without this rule
   nothing scrolls and the script changes nothing. */

@media (max-width: 48rem) {
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ---- a YouTube facade (the kit's zen-video block, wwwroot/js/zen-youtube.js) ----------------------------------
   The script draws the thumbnail, a frame around it and a play mark; these rules put the mark OVER the picture, where
   it says "this plays", rather than after it. White with a shadow, because it stands on a photograph nobody chose. The
   frame is the picture's own box — its width, and its height with no line gap under an inline image (measured: the
   mark sat 2px low until the picture was a block) — so the mark is centred on the picture, not on the column. */

.video__frame {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
}

.video__frame img {
    display: block;
}

.video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 1px 6px rgba(16, 16, 19, 0.55));
}

/* ---- a map waiting for consent (wwwroot/js/zen-maps.js, docs/specs/adr-maps.md §5) ------------------------------
   Until the visitor allows Maps the runtime puts a "Show the map" button and a note saying what loading sends into the
   box _MapCanvas sized. A theme with a drawing places them over it; on a base that draws nothing they stood unstyled at
   the box's top. Centred here, in the page's own colours - inherited, so they read on a light page and a dark one - and
   at zero specificity, so a theme's rule wins. The states after waiting draw the map itself, so nothing else is set. */

:where(.zen-map[data-zen-map-state="waiting"]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(.zen-map__consent) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
}

:where(.zen-map__show) {
    padding: 0.4rem 1rem;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: transparent;
    border: 1px solid;
}

:where(.zen-map__note) {
    margin: 0;
}

/* The office page's map - the box after the office's details - between 18rem and 34rem at full width, Zen's bounds: its
   16:9 alone is 1152 x 648 at 1280 and about 200px tall on a phone. Only the office's box, so a placed [[map]] keeps the
   editor's ratio. */
:where(.zen-office + .zen-map) {
    width: 100%;
    min-height: 18rem;
    max-height: 34rem;
}

/* ---- Zen's opening, stored under `zen` and served here (ъ1, L14) -------------------------------------------------
   Its rotating words are a decorative copy of the heading's last line, kept for a script that does not run on this
   base (Kiril: the nine section runtimes are not emitted on `neutral`). Zen's sheet never draws the list still either;
   without this rule it stood under the heading as a stray bulleted list. aria-hidden already, so nothing is hidden
   from a reader. */

.zen-sec-hero__words {
    display: none;
}

/* ZN13's core blog filter remains a list of aligned targets on the neutral base.
   A package may replace its spacing and colour in its own sheet. */
.zen-filter__nav {
    display: block;
    max-width: 100%;
}

.zen-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zen-filter__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
}