/* The calm layer (5 Nov 2026): the rules of the approved calm homepage (/x/home-calm,
   public/css/home-calm.css) for every other public HostYourAI page. Loaded last by
   partials.brand-css, so it wins over brand.css, site-dash.css, layer-page.css and the rest.
   Jantine: "de subpages zijn nog niet zo kalm, daar heb ik nog borders, achtergrondkleuren.
   Je moet alle pagina's zo kalm maken."

   The rules, as on the homepage:
   - no outlined boxes: a soft fill separates, never a border. Card on band, band on paper.
   - no divider lines between rows: spacing, and a soft fill on hover where a row is a link.
   - no eyebrow or label chips: plain sans labels; mono only for real code and commands.
   - prices and meta lines in plain sans.
   - one primary button per screen, the others the soft secondary (already so in brand.css).
   - the section rhythm comes from the paper and band colour breaks, not from hairlines.
   - the one corner scale (--b-r-panel, --b-r-card, --b-r-ctl, --b-r-tag, --b-r-bar, --b-r-tick).
   Kept on purpose: the hairlines inside real product windows and screenshots (.hy-win, the stage
   shot's own UI, terminals), the row lines of real data tables, the WireGuard tunnel frame of the
   EU compute art (the line is the tunnel), the phone menu's bottom edge, focus outlines.

   Scope: body:not(.hy-home-c), so both homepages (/ and /x/home-calm, both body.hy-home-c) stay
   exactly as they are. The nav dropdowns are the one part that also applies there: they are the
   same component on every page and closed in every screenshot. Tokens only, no new colours. */

/* the root surface colours, fixed at :root so a surface can flip --b-band / --b-card for what
   sits inside it without losing its own colour (custom properties inherit their computed value) */
:root{--calm-paper:var(--b-paper);--calm-band:var(--b-band);--calm-card:var(--b-card);--calm-raised:var(--b-raised)}

/* ---------- section rhythm: the paper / band break is the divider ---------- */
:root body:not(.hy-home-c) .hy-section--band{border-top:0;border-bottom:0}
:root body:not(.hy-home-c) .hy-faq-group + .hy-faq-group > .hy-wrap{border-top:0}
:root body:not(.hy-home-c) :is(.hy-foot,.hy-foot__bar){border-top:0}

/* ---------- surfaces: a soft fill, no border ----------
   On paper a surface takes the band; on the band it takes the card white. Whatever sits inside a
   surface (wells, chips, code blocks, meters) flips the other way through the tokens, so nothing
   disappears into the fill. Real product windows inside a surface get the root tokens back. */
:root body:not(.hy-home-c) :is(.hy-cell,.hy-card,.hy-step,.hy-stat,.hy-news-card,.hy-address,.hy-notice,.hy-product-router,.hy-model,.glass,.hy-doc__panel,.prose-table,.hy-table-wrap,.hy-product-art__document,.hy-dash-plan,.mp-card,.mp-price,.mp-usage,.mp-stat,.mg-advice,.noise-card,.toc-box):not(.hy-seo-figures > *,.hy-bento--steps > *,:is(.hy-cards--open,.hy-steps--open,.hy-stats--open) > *,.hy-section--ink *,.hy-ink *){
  border-color:transparent;background:var(--calm-band);
  --b-band:var(--calm-card);--hy-band:var(--calm-card);--panel:var(--calm-card);--muted:var(--calm-card);--accent-soft:var(--calm-card);--ink-muted:var(--calm-card)}
:root body:not(.hy-home-c) :is(.hy-section--band,.band) :is(.hy-cell,.hy-card,.hy-step,.hy-stat,.hy-news-card,.hy-address,.hy-notice,.hy-product-router,.hy-model,.glass,.hy-doc__panel,.prose-table,.hy-table-wrap,.hy-product-art__document,.hy-dash-plan,.mp-card,.mp-price,.mp-usage,.mp-stat,.mg-advice,.noise-card,.toc-box):not(.hy-seo-figures > *,.hy-bento--steps > *,:is(.hy-cards--open,.hy-steps--open,.hy-stats--open) > *,.hy-section--ink *,.hy-ink *){
  background:var(--calm-card);
  --b-band:var(--calm-band);--hy-band:var(--calm-band);--panel:var(--calm-band);--muted:var(--calm-band);--accent-soft:var(--calm-band);--ink-muted:var(--calm-band);--b-card:var(--calm-band)}
/* a surface inside a surface: the inner one takes the card white on the band fill */
:root body:not(.hy-home-c) :is(.hy-cell,.hy-card,.hy-product-router,.glass) :is(.hy-card,.hy-step,.hy-stat,.hy-notice,.prose-table,.hy-table-wrap,.hy-product-art__document){background:var(--calm-card)}
/* real product windows keep their own surfaces and hairlines */
:root body:not(.hy-home-c) :is(.hy-win,.hy-lp-stage__shot,.hy-product-art,.term,.hy-flowmap){
  --b-band:var(--calm-band);--hy-band:var(--calm-band);--panel:var(--calm-band);--muted:var(--calm-band);--accent-soft:var(--calm-band);--ink-muted:var(--calm-band);--b-card:var(--calm-card)}
/* the ink band keeps its own fill, without the outline */
:root body:not(.hy-home-c) :is(.hy-section--ink,.hy-ink) :is(.hy-cell,.hy-card,.hy-step,.hy-stat){border-color:transparent}
/* a surface that is a link: a soft fill on hover, no line */
:root body:not(.hy-home-c) a:is(.hy-cell,.hy-card,.hy-news-card,.hy-model):not(.hy-section--band *):hover{background:var(--calm-raised)}
:root body:not(.hy-home-c) .hy-section--band a:is(.hy-cell,.hy-card,.hy-news-card,.hy-model):hover{background:var(--calm-paper)}
/* the layer cells: the page you are on is the raised fill on paper (paper on the band, as before) */
:root body:not(.hy-home-c) :is(.hy-layer-cell.is-on,.hy-layer-cell[aria-current]):not(.hy-section--band *){background:var(--calm-raised)}
/* a bare table in a document gets the same soft surface as a wrapped one */
:root body:not(.hy-home-c) .hy-doc__body table:not(:is(.hy-table-wrap,.hy-doc__scroll,.prose-table) table){border-color:transparent;background:var(--calm-band)}
:root body:not(.hy-home-c) .hy-doc__body :is(.hy-table-wrap,.hy-doc__scroll){border-color:transparent}

/* ---------- no divider lines between rows: spacing alone ---------- */
:root body:not(.hy-home-c) :is(
  .hy-faq__item,.hy-checks li,.hy-layer-page__checks li,.hy-layer-page__steps li,
  .hy-product-router__rules > div,.hy-product-details,.hy-product-art__modelrow,
  .hy-dash-rows,.hy-dash-row,.hy-dash-plan__list,.hy-dash-plan__price,.hy-cl-release,
  .hy-cards--open .hy-card,.hy-steps--open .hy-step,.hy-stats--open .hy-stat,
  .hy-seo-figures > .hy-cell,.hy-bento--steps > .hy-cell,
  .prose-trust hr,.prose-site hr,.hy-doc__body hr,.glass > div,.cm-wrap > *
){border-top-color:transparent;border-bottom-color:transparent}
/* the FAQ: question blocks on spacing, a little more of it now the line is gone */
:root body:not(.hy-home-c) .hy-faq__item{padding-block:20px}
:root body:not(.hy-home-c) .hy-faq--single .hy-faq__item:first-child{padding-top:0}
/* the "On this page" rail: no line along it; the active item keeps its soft fill (fix-toc.css) */
:root body:not(.hy-home-c) :is(.hy-doc__toc,.hy-dash-jump){border-left-color:transparent}
/* a stats or steps row that lost its top line keeps its rhythm from the gap above */
:root body:not(.hy-home-c) :is(.hy-seo-figures > .hy-cell,.hy-bento--steps > .hy-cell){padding-top:0}

/* ---------- controls: soft fills ---------- */
:root body:not(.hy-home-c) .hy-seg--card{border-color:transparent}
:root body:not(.hy-home-c) .mg-row > :is(.mg-search,.hy-seg--card,.mg-select){border-color:transparent!important}
:root body:not(.hy-home-c) .hy-seo-toolchips > li{border-color:transparent}
:root body:not(.hy-home-c) :is(.hy-compute__hub,.hy-compute__node,.hy-compute__req){border-color:transparent}
/* the product screenshot in a layer page hero: the shot on its mat, no frame (as the homepage stage) */
:root body:not(.hy-home-c) .hy-lp-stage__shot{border-color:transparent}

/* forms: inputs are a soft fill without a border, with a clear focus ring */
:root body:not(.hy-home-c) main :is(input:not([type="checkbox"],[type="radio"],[type="range"],[type="hidden"],[type="submit"],[type="button"]),textarea,select):not(.hy-win *,.mg-search input){
  border-color:transparent;background-color:var(--calm-band);box-shadow:none}
:root body:not(.hy-home-c) main .hy-section--band :is(input:not([type="checkbox"],[type="radio"],[type="range"],[type="hidden"],[type="submit"],[type="button"]),textarea,select):not(.hy-win *,.mg-search input),
:root body:not(.hy-home-c) main :is(.hy-cell,.hy-card,.glass) :is(input:not([type="checkbox"],[type="radio"],[type="range"],[type="hidden"],[type="submit"],[type="button"]),textarea,select):not(.hy-win *,.mg-search input){background-color:var(--calm-card)}
:root body:not(.hy-home-c) main :is(input,textarea,select):focus-visible,
:root body:not(.hy-home-c) .mg-search:focus-within{outline:2px solid var(--b-accent);outline-offset:2px}

/* ---------- labels: plain sans, no chip; mono stays on code ---------- */
:root body:not(.hy-home-c) .hy-eyebrow{font-family:var(--b-font);font-size:14px;font-weight:500;letter-spacing:0;color:var(--b-muted)}
:root body:not(.hy-home-c) .hy-eyebrow :is(.hy-eyebrow__l,.hy-eyebrow__q){padding:0;background:none;border-radius:0;color:inherit}
:root body:not(.hy-home-c) :is(.hy-section__head,.hy-cm-split__head,.hy-chapter__line) .hy-label.hy-label.hy-label,
:root body:not(.hy-home-c) .eyebrow:not(:has(> .eyebrow__l)){padding:0;background:none;border-radius:0;font:500 14px/1.3 var(--b-font);letter-spacing:0;color:var(--b-muted)}
:root body:not(.hy-home-c) :is(.hy-section__head,.hy-cm-split__head,.hy-chapter__line) .hy-label.hy-label.hy-label--accent{color:var(--b-accent)}
:root body:not(.hy-home-c) :is(
  .hy-cap,.hy-tag,.hy-cell__tag,.hy-card__num,.hy-step__label,.hy-dialog-card__num,.hy-dialog__label,
  .hy-foot__head,.hy-foot__sub,.hy-foot__reg,.hy-doc__meta,.hy-dash-plan__price,.hy-seo-step__no,
  .hy-seo-index a > span,.hy-crew__list small,.hy-doc__mtoc-sum,.toc-box summary,.mp-view,
  .hy-compute__node span,.hy-product-art__cache,.mtag,.chip,.hy-badge,.hd-prod__num,
  .flw-num,.flw-br__tag,.flw-br__cap span,.flw-br__heads b,.flw-br__lv,
  form:has(.input-field) label
){font-family:var(--b-font);letter-spacing:0}
:root body:not(.hy-home-c) .hy-cell__tag{font-size:14px;font-weight:500}
:root body:not(.hy-home-c) .hy-doc__rail a :is(.hy-mono,b,span:first-child:not(:only-child)){font-family:var(--b-font)}
/* the price line under a plan: one plain sans line */
:root body:not(.hy-home-c) .hy-dash-plan__price{font-size:15px;font-weight:500}
/* table heads are labels, not code */
:root body:not(.hy-home-c) :is(.prose-site,.prose-trust,.hy-doc__body,.prose-table,.hy-table-wrap) table:not(.hy-calm-x) thead th,
:root body:not(.hy-home-c) :is(.prose-site,.prose-trust) table:not(.hy-calm-x) > tbody:first-child > tr:first-child:not(:has(> td)) > th,
:root body:not(.hy-home-c) .hy-table--stack tbody td[data-label]::before{font-family:var(--b-font);font-size:13px;font-weight:500;letter-spacing:0}
/* related links ("Read more"): plain sans links as on the homepage, no chips */
:root body:not(.hy-home-c) .hy-also:not(.hy-doc__toc,.hy-dash-jump,.hy-seo-toolchips){gap:8px 20px}
:root body:not(.hy-home-c) .hy-also:not(.hy-doc__toc,.hy-dash-jump,.hy-seo-toolchips) > :not(:has(> .home-logo)){min-height:0;padding:0;border:0;border-radius:0;background:none;font:400 14px/1.5 var(--b-font);letter-spacing:0;color:var(--b-ink-2)}
:root body:not(.hy-home-c) .hy-also:not(.hy-doc__toc,.hy-dash-jump,.hy-seo-toolchips) > a:not(:has(> .home-logo)),
:root body:not(.hy-home-c) .hy-also:not(.hy-doc__toc,.hy-dash-jump,.hy-seo-toolchips) > * > a{text-decoration:underline;text-decoration-color:var(--b-line-2);text-underline-offset:3px}
:root body:not(.hy-home-c) .hy-also:not(.hy-doc__toc,.hy-dash-jump,.hy-seo-toolchips) a:hover{text-decoration-color:currentColor}
:root body:not(.hy-home-c) .hy-also > :has(> .home-logo){border-color:transparent}

/* ---------- nav dropdowns (every page): a soft surface, no outline ---------- */
:root .hd-card{border-color:transparent;background:var(--calm-band)}
:root .hd-card .hd-a:hover,:root .hd-card .hd-a:focus-visible{background:var(--calm-raised)}
:root .hd-card .hd-prod__item{background:var(--calm-card)}
:root .hd-card .hd-prod__item:hover,:root .hd-card .hd-prod__item:focus-visible{background:var(--calm-raised)}
:root .hd-head,:root .hd-mhead,:root .hd-prod__num{font-family:var(--b-font);font-weight:500;letter-spacing:0}
/* the phone menu: rows on spacing; the sheet keeps its bottom edge over the page */
:root .hd-mobile .hd-mrow,:root .hd-mlangs{border-top-color:transparent}

/* the older template blocks (.glass panels on /security, /faq and some guides) */
:root body:not(.hy-home-c) .glass :is([style*="border-bottom"],[style*="border-top"]){border-top-color:transparent!important;border-bottom-color:transparent!important}
:root body:not(.hy-home-c) :is(.cm-b,.emb-plot){border-color:transparent}
:root body:not(.hy-home-c) .glass .cm-a{background:var(--calm-card)}
/* a product screenshot sits on the band without a frame, as the homepage stage and closing shot */
:root body:not(.hy-home-c) .hy-product-proof-shot{border-color:transparent}
/* phones: the "On this page" fold is a soft panel instead of two rules */
@media (max-width:1099px){
  :root body:not(.hy-home-c) .hy-doc__mtoc{padding:0 16px;border-top-color:transparent;border-bottom-color:transparent;border-radius:var(--b-r-card);background:var(--calm-band)}
}
:root body:not(.hy-home-c) .sv-flow .cv-node{border-color:transparent}
/* the "On this page" index under a hero: no rules above and below it, the gap does the work */
:root body:not(.hy-home-c) .hy-seo-index::before,:root body:not(.hy-home-c) .hy-seo-index::after{display:none}
/* every label is plain sans without a chip: the chapter line over a hero, the FAQ index title,
   the small kickers on the model pages (the accent label keeps its colour) */
:root body:not(.hy-home-c) :is(.hy-chapter__line,.hy-chapter__num,.mp-kicker,.mp-verified,.cm-tag){font-family:var(--b-font);letter-spacing:0}
:root body:not(.hy-home-c) .hy-label.hy-label:not(.hy-section--ink *,.hy-ink *){padding:0;background:none;border-radius:0;font-family:var(--b-font);letter-spacing:0}

/* a command stays a command: the "$ hyai" line in a section head keeps mono (5 Nov 2026) */
body:not(.hy-home-c) .hy-eyebrow .hy-eyebrow__q{font-family:var(--b-mono)}