/* =============================================================================
   Viora — the cookie banner, its settings layer and the "Cookie settings" controls (SPEC D7, 2026-10-22)
   =============================================================================
   WHAT IT DOES.
   · `.cookie-consent` — the region cookie-consent.js prepends to <body>: fixed to the bottom, full
     width, at least 25% of the viewport high (25dvh; 25vh where dvh is unknown) and taller when its
     words need it, up to 60% (60dvh), past which it scrolls inside itself. Equivalent to "height 25dvh
     with a min-height that fits the content", written as min/max so the 60% cap always wins: a CSS
     min-height larger than max-height would beat it and stop the internal scroll on a short screen.
   · `:root[data-cookie-banner]` — while it shows, the page's bottom padding and scroll padding equal
     its measured height (`--cookie-banner-block-size`, set by the script), so the end of the page can
     be scrolled above it and a focused element is never hidden behind it (WCAG 2.4.11).
   · the buttons share ONE class and look the same (equal prominence, D7); a 44px-high target.
   · ↳ 2026-10-22, the owner: "make the banner background --stone color (#e9e2d6)". The region is drawn
     on `--cc-stone` (the site's --stone: #E9E2D6 light, #202726 dark; the Wasim page's own stone),
     no longer on --paper; so a button's hover, which was --stone, is now --paper, and an unchecked
     switch's track, which was --stone, now has --paper too (since the same day every switch here is
     checked and locked, but the off state keeps a visible track). The notice has two buttons, not
     three (cookie-consent.js: OK · Settings), so the wide layout's button grid has two columns.
   · the switches are native checkboxes (`role="switch"`) drawn with backgrounds only, so every
     browser shows the state (pseudo-elements on <input> are not reliable); the knob sits at the
     inline end when on, mirrored for `dir="rtl"`.
   · `[data-cookie-settings-item]` — the footer's and the drawer's "Cookie settings" controls stay
     hidden until the script marks <html data-cookie-consent="ready">: without JavaScript, or with the
     banner switched off (BANNER_ENABLED false), there is no dead button.
   · print: none of it is printed, and the page loses the extra padding.
   WHY HERE, AND WHY NOT main.css. The Wasim page loads neither tokens.css nor main.css, so these rules
   carry their own fallbacks: every colour is a `--cc-*` variable taking the site token when it exists
   (light and dark follow the site's `data-theme`) and the light palette otherwise; on the Wasim page,
   whose own palette is dark and scoped to `.wasim-page`, the variables take that page's colours and
   fonts. Logical properties throughout, so Arabic (RTL) needs no second layout.
   CONNECTS TO. cookie-consent.js (every class and data attribute here) · ui.js (the drawer row
   `.drawer-cookie-settings`) · the `.footer-legal` lists (templates/*.html, AccountShell.svelte) and
   `.w-legal` (WasimPage.svelte) · tokens.css (the colour tokens) · main.css (`[hidden]`, the
   `.footer-legal` row this adds one item to) · tools/build-site.mjs, AccountShell.svelte and
   WasimPage.svelte (each loads this file).
   ⚠ AFFECTS — traced, NOT exhaustive: every page's <body> padding while the banner shows; z-index 40
   puts the banner above the sticky header (30) and below the skip link (100) and the dashboard's
   tooltip (200); modal dialogs (the drawer, the legal gate) cover it in the top layer, as they should.
   There may be more.
   PRODUCES. Styles only. */
.cookie-consent{
  --cc-paper:var(--paper,#FCFAF6);--cc-text:var(--text,#373B3D);--cc-strong:var(--text-strong,#1B211F);
  --cc-muted:var(--text-muted,#6B6860);--cc-rule:var(--rule,#CFC7BA);--cc-stone:var(--stone,#E9E2D6);
  --cc-accent:var(--bronze-deep,#765C3B);--cc-shadow:var(--deep,#1B211F);
  position:fixed;left:0;right:0;bottom:0;inset-inline:0;inset-block-end:0;z-index:40;
  box-sizing:border-box;min-block-size:25vh;min-block-size:25dvh;max-block-size:60vh;max-block-size:60dvh;
  overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  background:var(--cc-stone);color:var(--cc-text);border-block-start:1px solid var(--cc-rule);
  box-shadow:0 -12px 40px color-mix(in srgb,var(--cc-shadow) 12%,transparent);
  font-size:1rem;line-height:1.6;text-align:start
}
.cookie-consent *,.cookie-consent *::before,.cookie-consent *::after{box-sizing:border-box}
.cookie-consent[hidden],.cookie-consent [hidden]{display:none!important}
/* Centred in the 25% band by auto margins, not justify-content: when the words overflow, auto margins
   collapse to 0 and the start stays reachable by scrolling; centred overflow would be cut off. */
.cookie-consent-inner{inline-size:min(100%,1376px);margin:auto;padding-block:1rem 1.15rem;padding-inline:var(--gutter,1.25rem)}
.cookie-consent-layer{display:flex;flex-direction:column;gap:.55rem}
.cookie-consent-title{margin:0;font-size:1.22rem;font-weight:700;line-height:1.5;color:var(--cc-strong)}
.cookie-consent h3{margin:0;font-size:1.02rem;font-weight:700;line-height:1.5;color:var(--cc-strong)}
.cookie-consent p{margin:0}
.cookie-consent-text{max-inline-size:80ch}
.cookie-consent-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 .2rem;font-size:.95rem}
.cookie-consent-links a{display:inline-flex;align-items:center;min-block-size:24px;color:var(--cc-accent);text-decoration:underline;text-underline-offset:.2em}
.cookie-consent-links a:hover{color:var(--cc-strong)}
.cookie-consent-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));gap:.6rem;max-inline-size:36rem;margin-block-start:.35rem}
.cookie-consent-button{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;min-inline-size:24px;margin:0;padding:.45rem 1.2rem;border:1px solid var(--cc-strong);border-radius:0;background:transparent;color:var(--cc-strong);font:inherit;font-size:1rem;line-height:1.4;text-align:center;cursor:pointer}
.cookie-consent-button:hover{background:var(--cc-paper)}
.cookie-consent :focus-visible{outline:2px solid var(--cc-accent);outline-offset:3px}
/* The two headings take focus only so a screen reader lands on the layer that just opened; they are
   not controls, so they draw no ring (after the rule above, which would otherwise win). */
.cookie-consent .cookie-consent-title:focus{outline:none}
.cookie-consent-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:.9rem 2.5rem}
.cookie-consent-category{display:flex;flex-direction:column;gap:.25rem;min-inline-size:0}
.cookie-consent-switch{display:flex;align-items:center;gap:.75rem;min-block-size:44px}
.cookie-consent-switch label{cursor:pointer;color:var(--cc-strong)}
.cookie-consent-switch input{
  -webkit-appearance:none;appearance:none;flex:none;margin:0;inline-size:44px;block-size:24px;
  border:1px solid var(--cc-muted);border-radius:12px;cursor:pointer;background-color:var(--cc-paper);
  background-image:radial-gradient(circle at 11px 50%,var(--cc-muted) 0 7px,transparent 7.5px);background-repeat:no-repeat
}
.cookie-consent-switch input:checked{border-color:var(--cc-strong);background-color:var(--cc-strong);background-image:radial-gradient(circle at calc(100% - 11px) 50%,var(--cc-paper) 0 7px,transparent 7.5px)}
:root[dir="rtl"] .cookie-consent-switch input{background-image:radial-gradient(circle at calc(100% - 11px) 50%,var(--cc-muted) 0 7px,transparent 7.5px)}
:root[dir="rtl"] .cookie-consent-switch input:checked{background-image:radial-gradient(circle at 11px 50%,var(--cc-paper) 0 7px,transparent 7.5px)}
.cookie-consent-switch input:disabled,.cookie-consent-switch input:disabled+label{cursor:default}
.cookie-consent-switch input:disabled{opacity:.72}
/* A phone: the same layout, a little tighter, so the notice takes less of a short screen. */
@media(max-width:600px){
  .cookie-consent-inner{padding-block:.8rem .9rem}
  .cookie-consent-title{font-size:1.1rem}
  .cookie-consent-text{font-size:.9rem;line-height:1.55}
  .cookie-consent-button{padding-inline:.8rem}
}
@media(min-width:900px){
  .cookie-consent-layer[data-cc-layer="notice"]{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3rem;align-items:center}
  .cookie-consent-layer[data-cc-layer="notice"]>:not(.cookie-consent-actions){grid-column:1}
  .cookie-consent-layer[data-cc-layer="notice"]>.cookie-consent-actions{grid-column:2;grid-row:1/span 3;grid-template-columns:repeat(2,minmax(9.5rem,1fr));margin:0}
}
/* The Wasim page: its own dark palette and fonts (wasim-page.css `.wasim-page`), which the banner,
   outside that element, does not inherit. */
body:has(.wasim-page) .cookie-consent{
  --cc-paper:#25211f;--cc-text:#f5f5f5;--cc-strong:#f5f5f5;--cc-muted:#b8b1a7;--cc-rule:#35302d;
  --cc-stone:#3a3532;--cc-accent:#38bdf8;--cc-shadow:#000;color-scheme:dark;
  font-family:'Wasim Source','Wasim Arabic',system-ui,sans-serif
}
:root[lang="ar"] body:has(.wasim-page) .cookie-consent{font-family:'Wasim Arabic','Wasim Source',system-ui,sans-serif}

/* While the banner shows: the page keeps its height free at the bottom (set by the script). */
:root[data-cookie-banner]{scroll-padding-block-end:var(--cookie-banner-block-size,0px)}
:root[data-cookie-banner] body{padding-block-end:var(--cookie-banner-block-size,0px)}

/* The confirmation, for screen readers only (the banner leaving is the visible confirmation). */
.cookie-consent-status{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* The re-entry controls: hidden until the banner script is running and switched on. */
:root:not([data-cookie-consent="ready"]) [data-cookie-settings-item]{display:none!important}
.footer-legal [data-cookie-settings],.w-legal [data-cookie-settings]{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;font:inherit;color:inherit;line-height:inherit;min-block-size:24px;text-align:start;cursor:pointer}
.footer-legal [data-cookie-settings]:hover{color:var(--bronze-deep)}
.w-legal [data-cookie-settings]{color:var(--w-muted)}
.w-legal [data-cookie-settings]:hover{color:var(--w-cyan)}
.drawer-cookies{display:flex}
.drawer-cookie-settings{margin:0;padding:0;border:0;background:none;font:inherit;font-size:.86rem;line-height:1.4;color:var(--text-muted);min-block-size:34px;text-align:start;cursor:pointer}
.drawer-cookie-settings:hover{color:var(--bronze-deep)}

@media print{
  .cookie-consent,.cookie-consent-status,[data-cookie-settings-item]{display:none!important}
  :root[data-cookie-banner] body{padding-block-end:0!important}
}