/* =====================================================================
   Rabri v2 visual rebuild — loaded after visual-system.css on purpose.
   Same class names/data-attributes as before (zero JS changes needed),
   entirely new palette, header/hero/footer structure and book mockup.
   ===================================================================== */

/* ---------- 1. Tokens — light theme: neutral professional, steel-blue accent ---------- */
:root[data-theme="light"]{
  --rb-canvas:#F5F7F9; --rb-bg:var(--rb-canvas); --rb-bg-deep:#EEF1F4;
  --rb-surface:#FFFFFF; --rb-surface-2:#EEF1F4; --rb-surface-soft:rgba(255,255,255,.72);
  --rb-text:#1E2530; --rb-text-primary:var(--rb-text); --rb-muted:#69748A;
  --rb-line:#E2E6EB; --rb-border:var(--rb-line);
  --rb-accent:#2F6FB0; --rb-accent-2:#3E7FC2; --rb-accent-hover:#25588E; --rb-accent-text:#2F6FB0;
  --rb-action-fg:#FFFFFF;
  --rb-control-bg:#FFFFFF; --rb-control-fg:#1E2530; --rb-control-placeholder:#8993A6;
  --rb-shadow:0 18px 46px rgba(20,30,45,.10); --rb-shadow-lg:0 28px 70px rgba(20,30,45,.14);
  --rb-hero-start:#FFFFFF; --rb-hero-end:#F5F7F9; --rb-hero-fg:#1E2530; --rb-hero-muted:#69748A;
  --rb-hero-glow:rgba(47,111,176,.10);
  --rb-emphasis-bg:#2F5C82; --rb-emphasis-fg:#FFFFFF; --rb-emphasis-muted:#C7D9E7;
  --rb-palette-cerulean:#2F6FB0; --rb-palette-metallic-blue:#1F3A52; --rb-palette-steel-blue:#5B87AC;
  --rb-palette-carbon:#1E2530; --rb-palette-white:#FFFFFF;
}

/* ---------- 1b. Tokens — dark theme: soft charcoal-blue, not near-black ---------- */
:root:not([data-theme="light"]){
  --rb-canvas:#1B2129; --rb-bg:var(--rb-canvas); --rb-bg-deep:#171D24;
  --rb-surface:#232A33; --rb-surface-2:#2B333D; --rb-surface-soft:rgba(43,51,61,.62);
  --rb-text:#EDEFF2; --rb-muted:#9BA7B4;
  --rb-line:#38424D; --rb-border:var(--rb-line);
  --rb-accent:#5B93C4; --rb-accent-2:#7BA9D1; --rb-accent-hover:#6FA3CF; --rb-accent-text:#7BA9D1;
  --rb-action-fg:#0E141A;
  --rb-control-bg:#232A33; --rb-control-fg:#EDEFF2; --rb-control-placeholder:#7A8794;
  --rb-shadow:0 20px 55px rgba(0,0,0,.30); --rb-shadow-lg:0 30px 90px rgba(0,0,0,.36);
  --rb-hero-start:#1E2530; --rb-hero-end:#1B2129; --rb-hero-fg:#EDEFF2; --rb-hero-muted:#9BA7B4;
  --rb-hero-glow:rgba(91,147,196,.14);
  --rb-emphasis-bg:#26445E; --rb-emphasis-fg:#F5F8FA; --rb-emphasis-muted:#C3D3DE;
  --rb-palette-cerulean:#5B93C4; --rb-palette-metallic-blue:#26445E; --rb-palette-steel-blue:#7FA6C7;
  --rb-palette-carbon:#10151B; --rb-palette-white:#FFFFFF;
}

/* ---------- 2. Topbar (menu + utility icons) ---------- */
.rabri-topbar{background:color-mix(in srgb,var(--rb-emphasis-bg) 82%,black 18%);color:var(--rb-emphasis-muted)}
.rabri-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;padding-block:4px}
.rabri-topbar .rabri-menu{gap:clamp(10px,1.6vw,24px)}
.rabri-topbar .rabri-menu>li>a,.rabri-topbar .rabri-menu-library__trigger>a{padding:10px 0;font-size:13px;color:var(--rb-emphasis-muted)}
.rabri-topbar .rabri-menu>li>a:hover,.rabri-topbar .current-menu-item>a,.rabri-topbar .rabri-menu-library__trigger>a:hover{color:#fff}
.rabri-topbar .rabri-menu .current-menu-item>a:after,.rabri-topbar .rabri-menu a:hover:after{background:#fff}
.rabri-topbar .rabri-menu-library__trigger>button{background:rgba(255,255,255,.14);color:#fff}
.rabri-topbar-actions{display:flex;align-items:center;gap:8px}
.rabri-topbar-actions .rabri-icon-button{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.rabri-topbar-actions .rabri-icon-button:hover{background:rgba(255,255,255,.22)}
.rabri-topbar .rabri-mega-menu{top:calc(100% + 7px)}

/* ---------- 3. Header (brand lockup + CTA only — no menu, no search) ---------- */
.rabri-header{background:var(--rb-emphasis-bg)}
.rabri-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.rabri-brand-lockup{display:flex;align-items:center;gap:12px;min-width:0}
.rabri-brand-lockup .rabri-brand--header,.rabri-brand-lockup .rabri-custom-logo{width:auto;min-width:0;height:42px;padding:2px 8px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.rabri-brand-lockup-text{min-width:0}
.rabri-brand-lockup-text strong{display:block;color:#fff;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rabri-brand-lockup-text small{display:block;color:var(--rb-emphasis-muted);font-size:12px;margin-top:2px}
.rabri-header-cta{display:flex;gap:8px;flex:0 0 auto}
.rabri-header-cta-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.rabri-header-cta-ghost:hover{background:rgba(255,255,255,.22)}
@media(max-width:760px){.rabri-header-cta-ghost{display:none}}

/* ---------- 4. Search + filter panel (own component, directly under the header) ---------- */
.rabri-search-panel-wrap{position:relative;z-index:6;margin-top:-18px}
.rabri-search-panel{background:var(--rb-surface);border:1px solid var(--rb-line);border-radius:calc(var(--rb-radius) - 6px);box-shadow:var(--rb-shadow-lg);padding:14px 16px 12px}
.rabri-search-panel .rabri-filter-bar{margin-bottom:0;padding:0;border:0;box-shadow:none;background:transparent}
.rabri-search-panel-live{display:flex;align-items:center;gap:6px;margin:8px 2px 0;font-size:12px;color:var(--rb-muted)}
.rabri-live-dot{width:6px;height:6px;border-radius:50%;background:#3fae6a;flex:0 0 auto}
@media(max-width:900px){.rabri-search-panel-wrap{margin-top:14px}}

/* ---------- 5. Hero — plain surface, no search box inside ---------- */
.rabri-hero{background:linear-gradient(180deg,var(--rb-hero-start),var(--rb-hero-end));padding-top:34px}
.rabri-hero:after{background:radial-gradient(circle,var(--rb-hero-glow),transparent 65%)}

/* ---------- 6. Footer — exact same band colour as the header ---------- */
.rabri-footer{background:var(--rb-emphasis-bg);color:var(--rb-emphasis-muted)}
.rabri-footer h2,.rabri-footer-discovery-copy h2{color:#fff}
.rabri-footer a{color:var(--rb-emphasis-muted)}
.rabri-footer a:hover{color:#fff}
.rabri-footer-kicker{color:#fff}
.rabri-footer-discovery{border-color:rgba(255,255,255,.14)}
.rabri-footer-search{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.rabri-footer-search input{color:#fff}
.rabri-footer-search input::placeholder{color:rgba(255,255,255,.55)}
.rabri-footer-search button{background:rgba(255,255,255,.9);color:var(--rb-emphasis-bg)}
.rabri-footer-shortcuts a{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.rabri-footer-shortcuts a:hover{background:rgba(255,255,255,.12)}
.rabri-footer-grid{border-color:rgba(255,255,255,.14)}
.rabri-footer-contact-links a{border:1px solid rgba(255,255,255,.22)}
.rabri-footer-bottom{border-color:rgba(255,255,255,.14);color:var(--rb-emphasis-muted)}

/* ---------- 7. Book mockup — flat "library catalogue card", not a 3D book ----------
   Same markup/classes as before (rabri-mockup-spine / -pages / -cover / -label),
   restructured with CSS grid only. Right column = spine (RTL binding edge).      */
.rabri-book-mockup{
  display:grid;
  grid-template-columns:10px 1fr;
  grid-template-rows:1fr auto;
  grid-template-areas:"spine cover" "spine stub";
  direction:rtl;
  width:100%;height:100%;margin:0;
  perspective:none;transform-style:flat;filter:none;
  border-radius:10px;overflow:hidden;
  background:var(--rb-surface);border:1px solid var(--rb-line);
  box-shadow:0 1px 2px rgba(20,30,45,.06);
  transition:transform .2s ease,box-shadow .2s ease;
}
.rabri-book-mockup:hover{transform:translateY(-4px) rotateZ(0);filter:none;box-shadow:0 16px 34px rgba(20,30,45,.14);transition:.2s ease}
.rabri-book-mockup:before{display:none}
.rabri-mockup-cover{grid-area:cover;position:relative;inset:auto;transform:none;border-radius:0;box-shadow:none;background:color-mix(in srgb,var(--mockup-main) 16%,var(--rb-surface));overflow:hidden;z-index:auto}
.rabri-mockup-cover:after{display:none}
.rabri-mockup-cover>.rabri-cover-image,.rabri-mockup-cover>.rabri-cover-fallback{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;object-fit:cover}
.rabri-mockup-cover>.rabri-cover-fallback{display:flex;flex-direction:column;justify-content:flex-end;padding:10px;background:transparent}
.rabri-mockup-cover>.rabri-cover-fallback span{color:var(--mockup-main)}
.rabri-mockup-cover>.rabri-cover-fallback strong{color:var(--rb-text)}
.rabri-mockup-cover>.rabri-cover-fallback small{color:var(--rb-muted)}
.rabri-mockup-pages{display:none}
.rabri-mockup-spine{grid-area:spine;position:static;top:auto;right:auto;bottom:auto;width:auto;z-index:auto;border-radius:0;transform:none;box-shadow:none;background-color:var(--mockup-accent);background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.68) 0 3px,transparent 3px 11px);background-repeat:repeat-y;background-position:center}
.rabri-mockup--audio .rabri-mockup-spine,.rabri-mockup--magazine.rabri-mockup--audio .rabri-mockup-spine{background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 2px,transparent 2px 6px,rgba(255,255,255,.45) 6px 8px,transparent 8px 15px)}
.rabri-mockup-label{grid-area:stub;position:static;z-index:auto;right:auto;top:auto;max-width:none;width:100%;padding:7px 9px;border-radius:0;border-top:2px dashed var(--rb-line);background:var(--rb-surface);color:var(--rb-text);font-size:11px;font-weight:700;line-height:1.4;white-space:normal;text-align:center;box-shadow:none}

/* Genuine per-category colour (previously every preset resolved to the same blue) */
.rabri-mockup--history,.rabri-mockup--heritage,.rabri-mockup--politics{--mockup-main:#3E6B99;--mockup-accent:#3E6B99}
.rabri-mockup--literature,.rabri-mockup--poetry{--mockup-main:#8A6E4E;--mockup-accent:#8A6E4E}
.rabri-mockup--science,.rabri-mockup--education{--mockup-main:#5C7A5C;--mockup-accent:#5C7A5C}
.rabri-mockup--children{--mockup-main:#7A5C8A;--mockup-accent:#7A5C8A}
.rabri-mockup--magazine,.rabri-mockup--audio,.rabri-mockup--classic{--mockup-main:#3E6B99;--mockup-accent:#3E6B99}

/* ---------- 8. Buttons — blue accent everywhere ---------- */
.rabri-button-primary,#loginform .button{background:var(--rb-accent);border-color:var(--rb-accent);color:var(--rb-action-fg)}
.rabri-button-primary:hover{background:var(--rb-accent-hover);border-color:var(--rb-accent-hover)}
.rabri-search button,.rabri-footer-search button{background:var(--rb-accent);color:var(--rb-action-fg)}

/* ---------- 9. Mobile ---------- */
@media(max-width:900px){
  .rabri-topbar .rabri-nav{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);background:var(--rb-surface);color:var(--rb-text);z-index:200;transform:translateX(105%);transition:transform .28s ease;overflow:auto;padding:20px}
  html[dir="rtl"] .rabri-topbar .rabri-nav{inset:0 0 0 auto;transform:translateX(-105%)}
  .rabri-topbar .rabri-nav[aria-hidden="false"].is-open{transform:translateX(0)}
  .rabri-topbar .rabri-menu{flex-direction:column;align-items:stretch;gap:2px}
  .rabri-topbar .rabri-menu>li>a{color:var(--rb-text);padding:12px 4px}
  .rabri-menu-toggle{display:grid!important}
}

/* =====================================================================
   PHASE 2 — homepage content sections: flatten glow/blur, keep the
   existing varied grid types (featured story, strip, directory, rail…)
   but bring them onto the same flat-card language as the header/mockup.
   ===================================================================== */
.rabri-featured-story:before,.rabri-term-showcase:after,.rabri-hero:after{filter:none;opacity:.6}
.rabri-featured-story{border-radius:16px;background:var(--rb-surface);box-shadow:0 1px 2px rgba(20,30,45,.05)}
.rabri-term-showcase,.rabri-section-card,.rabri-audio-library-card,.rabri-panel{box-shadow:0 1px 2px rgba(20,30,45,.05)!important;background:var(--rb-surface)!important}
.rabri-book-card,.rabri-home-books-section .rabri-book-card{background:var(--rb-surface)}
.rabri-book-card:hover{box-shadow:0 12px 28px rgba(20,30,45,.10);background:var(--rb-surface)}
.rabri-category-directory__item{background:var(--rb-surface)}
.rabri-category-directory__icon,.rabri-author-rail i,.rabri-contact-card-head>span,.rabri-section-card-heading>span{background:color-mix(in srgb,var(--rb-accent) 12%,transparent);color:var(--rb-accent)}
.rabri-home-cta-section{background:var(--rb-bg)}
.rabri-home-cta-section .rabri-home-cta-card{background:var(--rb-emphasis-bg);color:var(--rb-emphasis-fg);border-radius:16px;padding:clamp(20px,3vw,34px)}
.rabri-home-cta-card p{color:var(--rb-emphasis-muted)}
.rabri-home-stats{background:var(--rb-emphasis-bg);color:var(--rb-emphasis-fg);border:0}
.rabri-home-stats .rabri-hero-stats div{border-color:rgba(255,255,255,.16)}
.rabri-mega-menu__inner{box-shadow:0 20px 50px rgba(20,30,45,.16)}

/* =====================================================================
   PHASE 3 — single book page + audio player: same flat-card language,
   book mockup already inherits the new catalogue-card style globally.
   ===================================================================== */
.rabri-page-hero,.rabri-single-hero,.rabri-search-hero{background:linear-gradient(180deg,var(--rb-bg-deep),var(--rb-bg));box-shadow:none}
.rabri-single-actions{background:var(--rb-surface);box-shadow:0 1px 2px rgba(20,30,45,.05)}
.rabri-single-fab-dock{background:var(--rb-surface);backdrop-filter:none;box-shadow:0 10px 26px rgba(20,30,45,.14)}
.rabri-single-fab-dock a:hover,.rabri-single-fab-dock button:hover{background:var(--rb-accent);color:var(--rb-action-fg)}
.rabri-first-page-card figure{background:var(--rb-bg-deep)}
.rabri-first-page-card figure img{box-shadow:0 12px 30px rgba(20,30,45,.14)}
.rabri-details-card dd a{color:var(--rb-accent)}
.rabri-download-center__inner{background:var(--rb-surface);backdrop-filter:none;box-shadow:0 10px 26px rgba(20,30,45,.12)}
.rabri-download-center__summary span{background:var(--rb-accent);color:var(--rb-action-fg)}
.rabri-player-controls button{background:var(--rb-accent);color:var(--rb-action-fg)}
.rabri-mini-player{background:var(--rb-surface);border:1px solid var(--rb-line);box-shadow:0 14px 34px rgba(20,30,45,.16)}
.rabri-mini-controls button,.rabri-mini-close,.rabri-mini-sleep{background:var(--rb-surface-2)}
.rabri-mini-controls button:hover,.rabri-mini-close:hover,.rabri-mini-sleep:hover{border-color:var(--rb-accent);color:var(--rb-accent)}

/* =====================================================================
   PHASE 4 — archive/search filter bar, contact form, account/login.
   ===================================================================== */
.rabri-filter-bar{background:var(--rb-surface);box-shadow:0 1px 2px rgba(20,30,45,.05)}
.rabri-empty-state,.rabri-empty-card{background:var(--rb-surface)}
.nav-links .page-numbers{background:var(--rb-surface)}
.nav-links .current{background:var(--rb-accent);border-color:var(--rb-accent)}
.rabri-contact-card,.rabri-account-panel{background:var(--rb-surface);box-shadow:0 1px 2px rgba(20,30,45,.05)}
.rabri-contact-form input,.rabri-contact-form textarea,.rabri-account-form input,#loginform input[type=text],#loginform input[type=password]{background:var(--rb-bg-deep);border-color:var(--rb-line)}
.rabri-direct-contact a{color:var(--rb-accent)}

/* =====================================================================
   PHASE 5 — dialogs, favourites drawer: flatten the heavy blur/glow
   glass treatment to match the rest of the flat surfaces.
   ===================================================================== */
.rabri-dialog__backdrop{background:rgba(20,30,45,.5);backdrop-filter:blur(4px)}
.rabri-dialog__panel{background:var(--rb-surface);border:1px solid var(--rb-line);box-shadow:0 24px 60px rgba(20,30,45,.22)}
.rabri-dialog__panel figure img{box-shadow:0 12px 30px rgba(20,30,45,.16)}
.rabri-favorites-drawer{background:var(--rb-surface);box-shadow:-14px 0 40px rgba(20,30,45,.14)}

/* =====================================================================
   PHASE 6 — real scale fix. The earlier passes only recoloured
   components; a lot of dimensions were still hardcoded px values from
   the old cinematic-scale design and were never touched. Fixing those
   directly here, plus giving cards/panels a real border so they read
   as distinct surfaces in dark mode (a shadow alone barely shows on a
   dark background).
   ===================================================================== */
.rabri-top-spacer{background:transparent}

/* Hero art / book stack was sized for 4-5 overlapping books at a
   near-cinematic scale; shrink it to a normal proportion. */
.rabri-hero-grid{min-height:0}
.rabri-hero-art{min-height:220px;border-inline-start:1px solid var(--rb-line)}
.rabri-book-stack{height:210px;width:min(280px,90%)}
.rabri-stack-book{width:112px;height:168px}
.rabri-orbit-label{width:52px;height:52px;font-size:10px;line-height:1.2}

/* Filter/search panel: force a dense, consistent grid instead of the
   3-row sparse wrap that happens when the form has more fields than
   the old fixed 6-column template. */
.rabri-search-panel .rabri-filter-bar,.rabri-filter-bar{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));align-items:end;gap:8px 10px}
.rabri-filter-bar .rabri-filter-search{grid-column:1/-1}
.rabri-filter-bar select,.rabri-filter-bar input:not([type=hidden]){height:38px;min-height:38px;padding:0 10px;font-size:12px;border-radius:8px}
.rabri-filter-bar label>span{font-size:11px;margin-bottom:3px}
.rabri-filter-bar .rabri-button{height:38px;min-height:38px;padding:0 14px;font-size:12px}
.rabri-filter-clear{height:38px;font-size:12px}

/* Cards/panels need a real border, not just a shadow, to separate
   from a dark background. */
.rabri-search-panel,.rabri-book-card,.rabri-home-books-section .rabri-book-card,.rabri-section-card,.rabri-panel,.rabri-term-showcase,.rabri-audio-library-card,.rabri-featured-story,.rabri-book-mockup{border:1px solid var(--rb-line)}

/* Section/card padding was still on the old oversized scale. */
.rabri-section,.rabri-spacing--normal.rabri-section,.rabri-spacing--large.rabri-section{padding-block:20px 26px}
.rabri-hero-stats{padding:8px 0}
.rabri-hero-stats strong{font-size:16px}
.rabri-showcase-heading,.rabri-section-heading{margin-bottom:10px}
.rabri-book-card{padding:8px 8px 10px}