:root{
  /* The palette is the logo's own: the mark's teal, the wordmark's near-black, and neutrals
     cooled to sit with them. --brand is the teal as drawn and is only ever a GRAPHIC — at
     3.6:1 on white it clears the 3:1 a border or a dot needs and fails the 4.5:1 text needs.
     --brand-deep is the same hue at 5.8:1, and carries every piece of text and every fill
     that has white text on it. */
  --canvas:#E6EEF0; --surface:#FFFFFF; --ink:#2C2E35; --muted:#5D686D;
  --line:#E2E8E9; --brand:#0693AC; --brand-text:#05707F; --brand-fill:#05707F;
  --glass:rgba(255,255,255,.74); --glass-border:rgba(255,255,255,.6);
  /* ---- the top bar ----
     Its own palette, because it is a dark surface inside a light page: --ink and --muted are
     the wrong colours on it, and it must NOT follow the reader's sepia/dark themes the way the
     page does. Contrast is measured at the gradient's lightest end, #05707F, which is the worst
     case: white on it is 5.8:1, --nav-muted is 4.7:1, and the search field is darker still. */
  --nav-bg:linear-gradient(105deg,#05707F 0%,#04505C 52%,#06323A 100%);
  --nav-edge:rgba(255,255,255,.16); --nav-control:rgba(255,255,255,.6);
  --nav-ink:#FFFFFF; --nav-muted:rgba(255,255,255,.85);
  --nav-hover:rgba(255,255,255,.12); --nav-active:rgba(255,255,255,.2);
  --nav-field:rgba(0,0,0,.18); --nav-field-on:rgba(0,0,0,.3);
  --nav-ring:rgba(255,255,255,.55);
  /* The single Arabic typeface for the whole site. Defined on :root (not only under [dir=rtl])
     because Arabic also appears inside English pages — sister titles, wash words, initials.
     It is appended to the Latin stacks so the browser resolves it per glyph: Latin keeps
     Plus Jakarta Sans / Spectral, and any Arabic character falls through to Cairo. */
  --font-ar:"Cairo",system-ui,sans-serif;
  --font:"Plus Jakarta Sans",var(--font-ar);
  --display:"Spectral",var(--font-ar),Georgia,serif;
  --read-size:17.5px;
  --r-xl:24px; --r-lg:20px; --r-md:14px; --pill:999px;
  --sh-1:0 1px 2px rgba(44,46,53,.05);
  --sh-2:0 2px 6px rgba(44,46,53,.05), 0 12px 28px rgba(44,46,53,.07);
  --sh-3:0 4px 10px rgba(44,46,53,.07), 0 20px 42px rgba(44,46,53,.11);
  --side:232px; --gap:clamp(12px,1.4vw,16px); --pad:clamp(12px,2vw,18px);
}
/* Arabic uses one typeface for both roles — body and display — rather than pairing Cairo with
   a serif, so headings, UI and reading text all match. --read-size is a touch smaller than the
   old Amiri value because Cairo has a noticeably larger x-height at the same px. */
html[dir="rtl"]{ --font:var(--font-ar); --display:var(--font-ar); --read-size:18px;
  --nav-bg:linear-gradient(255deg,#05707F 0%,#04505C 52%,#06323A 100%); }

/* ---- reader-mode themes: set by the theme control on an article page (body[data-theme]) ---- */
/* Sepia is warmer and slightly darker than white, so the brand text darkens a step to hold
   4.5:1 against the canvas as well as the surface. */
body[data-theme="sepia"]{
  --canvas:#EAE0CC; --surface:#F8F1E3; --ink:#3E3325; --muted:#7A6A54; --line:#E0D4BC;
  /* The bright teal has only 2.8:1 on the sepia canvas, so the graphic shade darkens here too. */
  --brand:#057F94; --brand-text:#045C69;
  --glass:rgba(248,241,227,.78); --glass-border:rgba(255,255,255,.5);
}
/* Dark mode is the case the single token could not cover: the text has to get lighter to be
   read, while a fill carrying white text has to stay dark or the white on it disappears.
   --brand-fill is therefore deliberately NOT overridden here. */
body[data-theme="dark"]{
  --canvas:#11161A; --surface:#1A2126; --ink:#E4E8EA; --muted:#94A0A7; --line:#2A343A;
  --brand:#3FC3DC; --brand-text:#3FC3DC;
  --glass:rgba(26,33,38,.78); --glass-border:rgba(255,255,255,.08);
  --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 8px 24px rgba(0,0,0,.35); --sh-3:0 16px 40px rgba(0,0,0,.45);
}
body{transition:background .25s,color .25s;}

/* Content for assistive tech and crawlers that must not affect the visual design — used for the
   page-level <h1> on listing pages whose visible headings belong to their components. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body.locked{overflow:hidden;}
h1,h2,h3{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.015em;}
p{margin:0;} ul{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* ============ NAV ============ */
.nav-wrap{position:sticky;top:0;z-index:40;padding:10px var(--pad) 4px;}
.nav{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);min-height:56px;padding:8px 8px 8px 12px;
  background:var(--nav-bg);color:var(--nav-ink);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid var(--nav-edge);border-radius:28px;box-shadow:var(--sh-2);}
.brand{display:flex;align-items:center;gap:11px;flex:none;}
/* The Center's mark is a square tile, and is shown as one — it was clipped to a circle, which cut
   its corners off. On the dark teal bars the light version of the mark is used
   (acrps-mark-light.svg: white tile, deep-teal emblem, 5.8 : 1 against the bar); the teal original
   would sit on the teal bar at under 1.6 : 1 and lose its edge. On white, the original is used. */
.brand-glyph{width:42px;height:42px;flex:none;border-radius:8px;background:linear-gradient(135deg,#0AA7C2,#04525E);
  color:#fff;display:grid;place-items:center;font-family:var(--font-ar);font-size:15px;font-weight:600;line-height:1;position:relative;overflow:hidden;
}
.brand-glyph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:auto;}
.brand-name{color:var(--nav-ink);font-weight:700;font-size:12.5px;white-space:normal;max-width:236px;letter-spacing:-.01em;display:block;line-height:1.22;}
html[dir="rtl"] .brand-name{max-width:250px;line-height:1.4;}
.brand-sub{font-size:11px;color:var(--nav-muted);display:block;line-height:1.2;}
.links{display:flex;gap:2px;flex:none;margin-inline-start:6px;}
.links a{font-size:13.5px;font-weight:500;color:var(--nav-muted);padding:7px 12px;border-radius:var(--pill);white-space:nowrap;transition:background .16s,color .16s;}
.links a:hover{background:var(--nav-hover);color:var(--nav-ink);}
.links a.active{background:var(--nav-active);color:var(--nav-ink);font-weight:700;}
.nav-right{display:flex;align-items:center;gap:10px;margin-inline-start:auto;flex:1 1 auto;min-width:0;justify-content:flex-end;}
.search{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;max-width:420px;height:40px;padding-inline:15px;
  border-radius:var(--pill);background:var(--nav-field);border:1px solid transparent;transition:background .18s,border-color .18s;}
.search:focus-within{background:var(--nav-field-on);border-color:var(--nav-ring);}
.search svg{flex:none;color:var(--nav-muted);}
.search input{flex:1;min-width:0;border:none;background:none;font-family:var(--font);font-size:14px;color:var(--nav-ink);}
.search input::placeholder{color:var(--nav-muted);}
.search input:focus{outline:none;}
/* ---- advanced search ---- */
.search-wrap{position:relative;flex:1 1 auto;min-width:0;max-width:420px;display:flex;}
.search-wrap .search{max-width:none;width:100%;}
/* The native type="search" clear only appears in some browsers, so the box has its own. */
.search-clear{flex:none;width:24px;height:24px;padding:0;border:none;background:var(--nav-hover);
  border-radius:var(--pill);display:inline-flex;align-items:center;justify-content:center;
  color:var(--nav-muted);line-height:0;cursor:pointer;transition:background .16s,color .16s;}
.search-clear svg{display:block;}
.search-clear:hover{background:var(--nav-active);color:var(--nav-ink);}
.search-clear[hidden]{display:none;}
.search input::-webkit-search-cancel-button{display:none;}
.adv-btn{flex:none;width:26px;height:26px;border:none;background:none;border-radius:var(--pill);
  display:grid;place-items:center;color:var(--nav-muted);cursor:pointer;transition:background .16s,color .16s;}
.adv-btn:hover,.search-wrap.adv-open .adv-btn{background:var(--nav-hover);color:var(--nav-ink);}
.adv-panel{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-start:0;z-index:70;
  width:min(460px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:16px;}
.adv-panel[hidden]{display:none;}
.adv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.adv-head strong{font-size:14px;}
.adv-close{border:none;background:none;font-size:21px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px;}
.adv-close:hover{color:var(--ink);}
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.adv-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.adv-field > span{font-size:11.5px;font-weight:600;color:var(--muted);}
.adv-field select,.adv-field input{width:100%;height:36px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:13.5px;padding-inline:10px;}
.adv-field select:focus,.adv-field input:focus{outline:none;border-color:var(--brand-text);background:#fff;}
.adv-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.adv-reset,.adv-submit{height:36px;padding-inline:16px;border-radius:var(--pill);font-family:var(--font);
  font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);}
.adv-submit{background:var(--brand-fill);border-color:var(--brand-text);color:#fff;}
.adv-submit:hover{opacity:.92;}
.adv-reset:hover{background:rgba(44,46,53,.05);}
@media (max-width:520px){ .adv-grid{grid-template-columns:1fr;} }

/* results page */
.search-for{font-size:14px;color:var(--muted);margin-block-start:-4px;margin-block-end:14px;}
/* Applied criteria as removable pills — each × drops just that one filter, "Clear all" resets. */
.active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-block-end:14px;}
.af-label{font-size:12px;font-weight:600;color:var(--muted);}
.af-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 5px 4px 12px;border-radius:var(--pill);
  background:rgba(6,147,172,.08);color:var(--brand-text);font-size:12.5px;font-weight:600;transition:background .16s;}
.af-pill:hover{background:rgba(6,147,172,.16);}
/* SVG rather than a "×" glyph so the mark is geometrically centred instead of depending on
   font metrics, and pinned at the pill's end rather than floating inside its padding. */
.af-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:rgba(6,147,172,.18);line-height:0;transition:background .16s;}
.af-pill:hover .af-x{background:rgba(6,147,172,.3);}
.af-x svg{display:block;}
.af-clear{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;margin-inline-start:2px;}
.af-clear:hover{color:var(--brand-text);}
.search-refine{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px;margin-block-end:var(--gap);}
.search-refine .adv-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.adv-apply{justify-content:flex-end;}
.search-people{margin-block-end:var(--gap);}
.search-people h3{font-size:15px;margin-block-end:10px;}
.search-empty{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:40px 24px;text-align:center;}
.search-empty p{font-size:15px;font-weight:600;margin:0;}
.search-empty .sub{font-size:13.5px;font-weight:400;color:var(--muted);margin-block-start:6px;}
.lang{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding-inline:12px;border-radius:var(--pill);
  background:none;border:1px solid var(--nav-control);color:var(--nav-ink);font-size:13px;font-weight:600;transition:all .16s;}
.lang:hover{background:var(--nav-hover);}
.menu-btn{display:none;}

/* ============ HERO ============ */
.hero-wrap{padding:6px var(--pad) 0;}
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);color:#fff;
  background:linear-gradient(128deg,#1E3A42 0%,#15262B 46%,#064A57 100%);
  box-shadow:var(--sh-2);
  display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(20px,3vw,42px);
  padding:clamp(22px,3.4vw,44px);
}
.hero::before{
  content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-8%;
  width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(10,167,194,.42),transparent 66%);pointer-events:none;
}
.hero-wash{
  position:absolute;inset-block-end:-6%;inset-inline-start:-1%;
  font-family:var(--font-ar);font-weight:700;font-size:clamp(120px,20vw,260px);line-height:.8;
  color:rgba(255,255,255,.032);pointer-events:none;user-select:none;
}
.hero-main{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;}
.kicker{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:5px 13px;border-radius:var(--pill);}
.kicker .live{width:6px;height:6px;border-radius:50%;background:#E4A05A;box-shadow:0 0 0 3px rgba(228,160,90,.25);}
.hero h1{font-family:var(--display);font-size:clamp(26px,4vw,46px);line-height:1.16;letter-spacing:-.02em;margin-block-start:16px;}
html[dir="rtl"] .hero h1{line-height:1.35;}
.hero-sister{font-family:var(--display);font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.5);line-height:1.45;
  margin-block-start:11px;padding-inline-start:12px;border-inline-start:2px solid rgba(228,160,90,.6);max-width:46ch;}
.hero-stand{font-size:15px;line-height:1.72;color:rgba(255,255,255,.74);margin-block-start:18px;max-width:60ch;}
.hero-by{display:flex;align-items:center;gap:10px;margin-block-start:20px;flex-wrap:wrap;}
.av{position:relative;overflow:hidden;border-radius:var(--pill);display:grid;place-items:center;font-weight:700;color:#fff;flex:none;}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-by .av{width:40px;height:40px;font-size:13px;border:2px solid rgba(255,255,255,.18);}
.hb-name{font-size:13.5px;font-weight:700;display:block;line-height:1.25;}
.hb-meta{font-size:12px;color:rgba(255,255,255,.55);display:block;line-height:1.25;}
.hero-cta{display:flex;gap:9px;flex-wrap:wrap;margin-block-start:auto;padding-block-start:24px;}
.hbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:20px;border-radius:var(--pill);
  font-size:13.5px;font-weight:700;transition:transform .16s,background .16s,opacity .16s;}
.hbtn.solid{background:#fff;color:#141A1D;}
.hbtn.ghost{background:none;border:1px solid rgba(255,255,255,.28);color:#fff;}
.hbtn:hover{transform:translateY(-2px);}
.hbtn.ghost:hover{background:rgba(255,255,255,.1);}
html[dir="rtl"] .hbtn svg.dir{transform:scaleX(-1);}

.hero-side{position:relative;z-index:1;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:20px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:12px;}
.hero-side h3{font-size:11.5px;font-weight:600;color:#E4A05A;}
.ins{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.6;color:rgba(255,255,255,.82);}
.ins .n{flex:none;width:21px;height:21px;border-radius:var(--pill);background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2);font-size:11px;font-weight:700;display:grid;place-items:center;margin-block-start:1px;}
.hero-side .foot-note{margin-block-start:auto;padding-block-start:12px;border-block-start:1px solid rgba(255,255,255,.12);
  font-size:11.5px;color:rgba(255,255,255,.5);}

/* ============ STATS ============ */
.stats{padding:var(--gap) var(--pad) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:var(--gap);}
.stat{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px 18px;
  display:flex;align-items:center;gap:13px;transition:transform .2s,box-shadow .2s;}
.stat:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.stat .ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;}
.stat .n{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1;display:block;}
.stat .l{font-size:12px;color:var(--muted);display:block;line-height:1.3;margin-block-start:2px;}

/* ============ TOPIC TILES ============ */
.tiles{padding:var(--gap) var(--pad) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--gap);}
.tile{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:16px 17px;min-height:96px;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--tacc);
  box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s;}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-3);}
.tile::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 90% at 100% 0%,rgba(255,255,255,.26),transparent 62%);}
.tile .tw{position:absolute;inset-block-start:-16px;inset-inline-end:6px;font-family:var(--font-ar);font-weight:700;
  font-size:66px;line-height:1;color:rgba(255,255,255,.15);}
.tile .tn{position:relative;z-index:1;font-size:14.5px;font-weight:700;line-height:1.25;}
.tile .tc{position:relative;z-index:1;font-size:11.5px;color:rgba(255,255,255,.75);margin-block-start:3px;}

/* ============ SHELL ============ */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:var(--gap);padding:var(--gap) var(--pad) 0;align-items:start;}
.scrim{position:fixed;inset:0;z-index:50;background:rgba(44,46,53,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .26s ease;}
.scrim.on{opacity:1;pointer-events:auto;}
.sidebar{position:sticky;top:86px;display:flex;flex-direction:column;gap:var(--gap);}
.drawer-head,.drawer-links{display:none;}
.panel{background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1);}
.panel-title{font-size:11.5px;font-weight:600;color:var(--muted);margin-block-end:11px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);padding:5px 11px;font-size:12.5px;font-weight:500;color:var(--muted);transition:all .16s;}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip .n{font-size:11px;opacity:.65;margin-inline-start:4px;}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.cta{border-radius:var(--r-lg);padding:18px 16px;color:#fff;background:linear-gradient(150deg,#05707F,#033D46 72%);box-shadow:var(--sh-2);}
.cta h3{font-size:15px;margin-block-end:6px;}
.cta p{font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.5;}
.cta .cta-btn{margin-block-start:13px;width:100%;height:36px;border:none;border-radius:var(--pill);background:#fff;color:#05707F;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform .16s;}
.cta .cta-btn:hover{transform:translateY(-1px);}

/* ============ CONTENT ============ */
.content{min-width:0;display:flex;flex-direction:column;gap:var(--gap);}
/* generic full-width component wrapper: standalone content components (pubGrid/researcherGrid/
   richText/cta) each render inside one of these so stacking spacing matches the old .shell>.content */
.section{min-width:0;padding:0 var(--pad);margin-block-start:var(--gap);display:flex;flex-direction:column;gap:var(--gap);}
/* two half-width components placed side by side by the page builder */
.section-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0 var(--pad);margin-block-start:var(--gap);align-items:start;}
.section-pair .section{padding:0;margin-block-start:0;min-width:0;}
@media (max-width:700px){ .section-pair{grid-template-columns:1fr;} }
.head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.head h2{font-size:clamp(18px,2.2vw,22px);}
.head .link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--brand-text);}
html[dir="rtl"] .head .link svg{transform:scaleX(-1);}
.segmented{display:flex;gap:2px;padding:3px;background:rgba(44,46,53,.05);border-radius:var(--pill);}
.seg{border:none;background:none;border-radius:var(--pill);padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background .16s,color .16s;}
.seg:hover{color:var(--ink);}
.seg.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);}
.segmented.views{margin-inline-start:auto;}
.segmented.views .seg{display:inline-flex;align-items:center;gap:5px;}
.arrows{display:flex;gap:6px;margin-inline-start:auto;}
.count-pill{font-size:12px;font-weight:600;color:var(--muted);background:rgba(44,46,53,.05);padding:6px 12px;border-radius:var(--pill);white-space:nowrap;}
.head .link.view-all{margin-inline-start:auto;}
.head .link.view-all + .arrows{margin-inline-start:0;}
.head .topic-filter{margin:0;}
.head .topic-filter select{min-width:150px;}
.abtn{width:34px;height:34px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;transition:all .16s;}
.abtn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff;}
.abtn:disabled{opacity:.32;cursor:default;}
html[dir="rtl"] .abtn svg{transform:scaleX(-1);}

.viewport{overflow:hidden;padding:4px;margin:-4px;}
.track{display:flex;gap:var(--gap);transition:transform .45s cubic-bezier(.22,.9,.32,1);}
.card{flex:0 0 calc((100% - 2*var(--gap))/3);background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:transform .22s ease,box-shadow .22s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap);}
.grid-cards .card{flex:none;}
.grid-cards[hidden],.table-wrap[hidden],.pub-pager[hidden]{display:none!important;}
.cover{height:108px;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:12px;background:var(--acc);}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.28),transparent 60%);}
.cover .wash{position:absolute;inset-block-end:-24px;inset-inline-end:8px;font-family:var(--font-ar);font-weight:700;font-size:62px;line-height:1;color:rgba(255,255,255,.16);pointer-events:none;}
/* A dark scrim, not a light one. White text on a white-translucent pill lightens exactly the
   patch it sits on — that is why these labels measured 2.5:1 on the old covers. At 0.35 black
   they clear 4.5:1 against the lightest point of any cover gradient. */
.badge{position:relative;z-index:1;font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);padding:3px 10px;border-radius:var(--pill);white-space:nowrap;}
.topic{position:relative;z-index:1;font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.22);padding:3px 9px;border-radius:var(--pill);white-space:nowrap;}
/* ---- book cards ----
   A book is drawn at real book proportions (2:3) and centred on a muted shelf backdrop of a
   fixed height, rather than the wide banner a paper gets. Sizing the backdrop instead of the
   card means books and papers keep matching row heights when a mixed listing shows both, and
   the book keeps its proportions at any grid column width. */
/* The shelf behind the book is tinted with that book's own cover gradient, so each card carries
   its colour identity. Kept at low opacity so the book still reads as the foreground object. */
.card.is-book .cover{height:224px;padding:16px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);}
.card.is-book .cover::before{content:"";position:absolute;inset:0;background:var(--acc);opacity:.18;}
.card.is-book .cover::after{content:none;}
.book{position:relative;z-index:1;height:100%;aspect-ratio:2/3;overflow:hidden;background:var(--acc);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;padding:11px 10px 10px 15px;
  border-radius:2px 6px 6px 2px;box-shadow:0 6px 16px rgba(44,46,53,.3),0 1px 3px rgba(44,46,53,.24);}
html[dir="rtl"] .book{padding:11px 15px 10px 10px;border-radius:6px 2px 2px 6px;}
.book::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.24),transparent 60%);}
.book .spine{position:absolute;inset-block:0;inset-inline-start:0;width:7px;background:rgba(0,0,0,.24);}
.book .spine::after{content:"";position:absolute;inset-block:0;inset-inline-start:7px;width:1px;background:rgba(255,255,255,.18);}
.book .c-wash{position:absolute;inset-block-end:-12px;inset-inline-end:-4px;font-family:var(--font-ar);
  font-weight:700;font-size:58px;line-height:1;color:rgba(255,255,255,.13);pointer-events:none;}
.book .c-pub{position:relative;z-index:1;font-size:8.5px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.72);}
.book .c-title{position:relative;z-index:1;font-family:var(--display);font-size:12.5px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
.book .c-author{position:relative;z-index:1;font-size:9.5px;color:rgba(255,255,255,.75);
  padding-block-start:7px;border-block-start:1px solid rgba(255,255,255,.24);}
.book img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
/* Type/topic move into the body for books, since the cover is now the book itself. */
.card-meta{display:flex;flex-wrap:wrap;gap:6px;}
.pill-type,.pill-topic{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:var(--pill);white-space:nowrap;}
.pill-type{color:var(--brand-text);background:rgba(6,147,172,.08);}
.pill-topic{color:var(--muted);background:rgba(44,46,53,.05);}

.card-body{padding:13px 14px 14px;display:flex;flex-direction:column;flex:1;gap:6px;}
.card-title{font-size:15px;font-weight:700;line-height:1.32;letter-spacing:-.01em;}
.card-sister{font-size:12px;color:var(--muted);line-height:1.45;padding-inline-start:8px;border-inline-start:2px solid var(--line);}
.card-foot{margin-block-start:auto;padding-block-start:12px;border-block-start:1px solid var(--line);display:flex;align-items:center;gap:8px;}
.who{font-size:12px;font-weight:600;line-height:1.25;display:block;}
.when{font-size:11.5px;color:var(--muted);display:block;line-height:1.2;}
.mins{margin-inline-start:auto;font-size:11px;font-weight:600;color:var(--muted);background:rgba(44,46,53,.05);padding:4px 10px;border-radius:var(--pill);white-space:nowrap;}

/* ---- public listing: table view + pager (Recent Researches/Books/Items) ---- */
.table-wrap{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-wrap table{width:100%;border-collapse:collapse;min-width:760px;}
.table-wrap thead th{text-align:start;font-size:11.5px;font-weight:600;color:var(--muted);padding:13px 15px;border-block-end:1px solid var(--line);white-space:nowrap;}
.table-wrap thead th.sortable{cursor:pointer;user-select:none;}
.table-wrap thead th.sortable:hover{color:var(--ink);}
.table-wrap .sort-ind{display:inline-block;margin-inline-start:5px;opacity:.35;font-size:10px;}
.table-wrap thead th.asc .sort-ind,.table-wrap thead th.desc .sort-ind{opacity:1;color:var(--brand-text);}
.table-wrap thead th.desc .sort-ind{transform:scaleY(-1);}
.table-wrap tbody td{padding:11px 15px;border-block-end:1px solid var(--line);vertical-align:middle;}
.table-wrap tbody tr:last-child td{border-block-end:none;}
.table-wrap tbody tr:hover{background:rgba(44,46,53,.028);}
.table-wrap .t-title{font-size:13.5px;font-weight:600;line-height:1.3;display:block;max-width:330px;}
.table-wrap .t-sister{font-size:11.5px;color:var(--muted);display:block;line-height:1.3;}
.table-wrap .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-inline-end:6px;}
.table-wrap .t-type{font-size:12.5px;white-space:nowrap;}
.table-wrap .t-cell{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.table-wrap .t-person{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.table-wrap .t-person .av{width:28px;height:28px;font-size:10px;}
.table-wrap .cell-link{text-align:end;}
html[dir="rtl"] .mini-btn svg{transform:scaleX(-1);}

.pub-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-start:var(--gap);}
.pub-pager .range{font-size:12.5px;color:var(--muted);}
.pub-pager-nav{display:flex;align-items:center;gap:5px;margin-inline-start:auto;}
.pbtn{width:32px;height:32px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;transition:all .16s;}
.pbtn.pbtn-step{width:auto;padding-inline:12px;gap:5px;grid-auto-flow:column;font-family:var(--font);font-size:12.5px;font-weight:600;}
.pbtn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff;}
.pbtn:disabled{opacity:.32;cursor:default;}
html[dir="rtl"] .pbtn svg{transform:scaleX(-1);}
.pub-pages{display:flex;gap:4px;}
.pnum{min-width:32px;height:32px;padding-inline:8px;border-radius:var(--pill);border:1px solid transparent;background:none;color:var(--muted);font-family:var(--font);font-size:12.5px;font-weight:600;transition:all .16s;}
.pnum:hover{background:rgba(44,46,53,.05);color:var(--ink);}
.pnum.on{background:var(--ink);color:#fff;}
.pnum.gap{pointer-events:none;opacity:.5;}
.perpage{height:32px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font);font-size:12.5px;font-weight:600;padding-inline:10px;}
@media (max-width:560px){ .pbtn.pbtn-step span{display:none;} .pbtn.pbtn-step{width:32px;padding-inline:0;} }
@media (max-width:440px){ .perpage{display:none;} }
.dots{display:flex;gap:5px;justify-content:center;}
.dots button{width:6px;height:6px;padding:0;border:none;border-radius:var(--pill);background:rgba(44,46,53,.18);transition:all .2s;}
.dots button.on{width:20px;background:var(--brand-fill);}

.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--gap);}
.rcard{background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:9px;transition:transform .2s,box-shadow .2s;}
.rcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.rhead{display:flex;align-items:center;gap:10px;}
.rname{font-size:14.5px;font-weight:700;line-height:1.2;display:block;}
.rrole{font-size:12px;color:var(--muted);display:block;line-height:1.3;}
.rbio{font-size:12.5px;color:var(--muted);line-height:1.55;}
.rfoot{margin-block-start:auto;padding-block-start:6px;display:flex;align-items:center;gap:8px;}
.rcount{font-size:11px;font-weight:600;color:var(--muted);background:rgba(44,46,53,.05);padding:3px 9px;border-radius:var(--pill);}
.rlink{font-size:12px;font-weight:600;color:var(--brand-text);margin-inline-start:auto;}
.empty{display:none;padding:34px;text-align:center;font-size:13.5px;color:var(--muted);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);}

/* ============ ARTICLE ============ */
.article-wrap{padding:var(--gap) var(--pad) 0;display:flex;justify-content:center;}
.article{max-width:760px;width:100%;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(22px,4vw,44px);}
.article .badge-row{display:flex;gap:8px;align-items:center;margin-block-end:14px;}
.article .abadge{font-size:11.5px;font-weight:600;color:var(--brand-text);background:rgba(6,147,172,.08);padding:4px 11px;border-radius:var(--pill);}
.article h1{font-family:var(--display);font-size:clamp(24px,3.4vw,36px);line-height:1.22;letter-spacing:-.015em;}
.article .article-sister{font-family:var(--display);font-size:15px;color:var(--muted);line-height:1.5;margin-block-start:10px;padding-inline-start:12px;border-inline-start:2px solid var(--line);}
.article .article-by{display:flex;align-items:center;gap:10px;margin-block-start:22px;padding-block:16px;border-block:1px solid var(--line);}
.article .article-body{font-size:15.5px;line-height:1.85;color:var(--ink);margin-block-start:22px;}
.article .article-body p{margin-block-end:16px;}
.article .article-insights{margin-block-start:22px;background:rgba(44,46,53,.03);border-radius:var(--r-md);padding:18px;}
.related-wrap{max-width:760px;margin:0 auto;width:100%;padding:0 var(--pad);}

/* ============ READER MODE (cloned from acrps-article.html) ============ */
.progress{position:fixed;inset-block-start:0;inset-inline-start:0;height:3px;width:0;z-index:70;
  background:linear-gradient(90deg,#0AA7C2,#D2874F);transition:width .1s linear;}

.reader-page{padding:10px var(--pad) 0;display:flex;flex-direction:column;gap:var(--gap);}
.cols{display:grid;grid-template-columns:252px minmax(0,1fr);gap:var(--gap);align-items:start;}

.rail{position:sticky;top:86px;display:flex;flex-direction:column;gap:var(--gap);}
/* The side the team arranges for every book or paper (Pages > System pages), continuing the rail
   under its fixed panels. A rail that has grown taller than the window scrolls within itself
   rather than leaving its lower half out of reach. */
.rail:has(.art-side-left){max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:thin;}
.art-side{display:flex;flex-direction:column;gap:var(--gap);min-width:0;}
.art-side > .section,.art-side > .section-pair{padding-inline:0;margin-block-start:0;}
.art-side .cb-heading h2{font-size:15px;}
.art-side .cb-cards,.art-side .cb-gallery,.art-side .cb-columns{--cb-cols:1;}
.art-side .grid-cards{grid-template-columns:minmax(0,1fr);}
.panel h3{font-size:11.5px;font-weight:600;color:var(--muted);margin:0 0 11px;}
.toc-list{list-style:none;margin:0;padding:0;}
.toc-list .toc-list{margin-inline-start:11px;}
.toc-link{display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.4;color:var(--muted);
  padding:7px 9px;border-radius:8px;border-inline-start:2px solid transparent;transition:all .15s;}
.toc-link::before{content:"";flex:none;width:13px;height:13px;border-radius:50%;
  border:1.4px solid currentColor;opacity:.45;
  background:radial-gradient(circle at 56% 50%, currentColor 0 2.2px, transparent 2.4px);}
.toc-link:hover{color:var(--ink);background:rgba(128,128,128,.1);}
.toc-link:hover::before{opacity:1;}
.is-active-link{color:var(--brand-text);font-weight:700;border-inline-start-color:var(--brand-text);background:rgba(6,147,172,.07);}
.is-active-link::before{opacity:1;}
.toc-hint{font-size:11px;color:var(--muted);line-height:1.45;margin-block-start:9px;padding-block-start:9px;border-block-start:1px solid var(--line);}

.ctrl-row{display:flex;align-items:center;gap:6px;}
.ctrl-row + .ctrl-row{margin-block-start:9px;}
.ctrl-label{font-size:11px;color:var(--muted);min-width:46px;}
.ctrl{flex:1;display:flex;gap:3px;padding:3px;background:rgba(128,128,128,.12);border-radius:var(--pill);}
.ctrl button{flex:1;border:none;background:none;border-radius:var(--pill);padding:6px 0;display:grid;place-items:center;}
.ctrl button.on{background:var(--surface);box-shadow:var(--sh-1);}
.swatch{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(128,128,128,.35);}

.reader-article{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;min-width:0;}
.art-cover{height:148px;position:relative;background:var(--acc,linear-gradient(140deg,#5A6E73,#0693AC));}
.art-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.26),transparent 62%);}
.art-cover .wash{position:absolute;inset-block-end:-28px;inset-inline-end:20px;font-family:var(--font-ar);font-weight:700;
  font-size:100px;line-height:1;color:rgba(255,255,255,.15);}
.art-cover .badges{position:absolute;inset-block-start:14px;inset-inline-start:18px;display:flex;gap:6px;flex-wrap:wrap;}
.pad{padding-inline:clamp(18px,3.4vw,52px);}
.art-head{padding-block-start:22px;}
.art-head h1{font-family:var(--display);font-size:clamp(23px,3.4vw,36px);line-height:1.22;letter-spacing:-.012em;}
.art-sister{font-family:var(--display);font-size:15.5px;color:var(--muted);line-height:1.45;margin-block-start:10px;
  padding-inline-start:11px;border-inline-start:2px solid var(--line);}
.art-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block:18px 0;padding-block-end:16px;border-block-end:1px solid var(--line);}
.art-who{font-size:13.5px;font-weight:700;display:block;line-height:1.25;}
.art-who-sub{font-size:12px;color:var(--muted);display:block;line-height:1.25;}
.meta-pills{display:flex;gap:6px;flex-wrap:wrap;}
.mpill{font-size:11.5px;font-weight:600;color:var(--muted);background:rgba(128,128,128,.12);padding:5px 11px;border-radius:var(--pill);}
.art-actions{display:flex;gap:7px;flex-wrap:wrap;margin-inline-start:auto;}

.summary{margin-block-start:20px;padding:17px 20px;border-radius:var(--r-md);
  background:rgba(6,147,172,.055);border:1px solid rgba(6,147,172,.14);}
.summary h2{font-size:11.5px;font-weight:600;color:var(--brand-text);margin-block-end:8px;letter-spacing:0;}
.summary p,.summary [data-lang-block]{font-family:var(--display);font-size:15px;line-height:1.75;}
.insights{margin-block-start:var(--gap);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:9px;}
.insight{display:flex;gap:10px;align-items:flex-start;font-family:var(--display);font-size:14px;line-height:1.6;
  padding:12px 14px;border-radius:var(--r-md);background:rgba(128,128,128,.07);}
.insight .n{flex:none;width:20px;height:20px;border-radius:var(--pill);background:var(--brand-fill);color:#fff;
  font-family:var(--font);font-size:11px;font-weight:700;display:grid;place-items:center;margin-block-start:2px;}

.art-body{padding-block:10px 32px;}
.art-body h2{font-family:var(--display);font-size:calc(var(--read-size) + 7px);margin-block:30px 12px;scroll-margin-top:96px;}
.art-body h3{font-family:var(--display);font-size:calc(var(--read-size) + 2px);margin-block:22px 9px;scroll-margin-top:96px;}
/* A third level, for documents that nest that deep (a model inside a chapter inside a section). */
.art-body h4{font-family:var(--display);font-size:calc(var(--read-size) + 0px);font-weight:700;margin-block:18px 8px;color:var(--muted);}
.art-body p,.art-body>[data-lang-block],.art-sec>[data-lang-block]{font-family:var(--display);font-size:var(--read-size);line-height:1.85;margin-block-end:17px;}
html[dir="rtl"] .art-body p,html[dir="rtl"] .art-body>[data-lang-block],html[dir="rtl"] .art-sec>[data-lang-block]{line-height:2.05;}
.art-body .speaking{background:rgba(6,147,172,.09);box-shadow:0 0 0 8px rgba(6,147,172,.09);border-radius:5px;transition:background .2s;}
body[data-theme="dark"] .art-body .speaking{background:rgba(210,135,79,.16);box-shadow:0 0 0 8px rgba(210,135,79,.16);}
/* Listen, under a section heading: that section's own recording, in the language being read. */
.sec-listen-row{display:flex;flex-wrap:wrap;gap:8px;margin-block:-4px 12px;}
.sec-listen-row[hidden]{display:none;}
.sec-listen{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);color:var(--ink);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .16s;}
.sec-listen[hidden]{display:none;}
.sec-listen:hover{border-color:var(--brand-text);color:var(--brand-text);}
.sec-listen.playing{background:var(--brand-fill);border-color:var(--brand-text);color:#fff;}
@media print{ .sec-listen-row,.sec-listen{display:none!important;} }
.art-body .w.on{background:var(--brand-fill);color:#fff;border-radius:4px;padding:0 2px;margin:0 -2px;}
body[data-theme="dark"] .art-body .w.on{background:#D2874F;color:#12171A;}

.cite{margin-block-end:26px;padding:16px 18px;border:1px dashed var(--line);border-radius:var(--r-md);}
.cite h3{font-size:11.5px;font-weight:600;color:var(--muted);margin-block-end:8px;}
.cite-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.cite-text{flex:1;min-width:220px;font-size:12.5px;line-height:1.6;color:var(--muted);}
.copy-btn{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--pill);padding:6px 13px;font-size:12px;font-weight:600;color:var(--ink);}
.copy-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--canvas);}

.rel-head{display:flex;align-items:baseline;gap:10px;margin-block-start:4px;}
.rel-head h2{font-size:17px;}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap);}
.rel-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px;
  display:flex;flex-direction:column;gap:7px;transition:transform .2s,box-shadow .2s;}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.rel-type{font-size:11px;font-weight:600;color:var(--brand-text);}
.rel-title{font-family:var(--display);font-size:15px;font-weight:600;line-height:1.35;}
.rel-meta{font-size:11.5px;color:var(--muted);margin-block-start:auto;padding-block-start:6px;}

@media (max-width:1024px){ .cols{grid-template-columns:minmax(0,1fr);} .rail{position:static;}
  .rail:has(.art-side-left){max-height:none;overflow:visible;} }
@media (max-width:700px){ .art-cover{height:110px;} .art-actions{margin-inline-start:0;width:100%;} }
@media print{
  .nav-wrap,.progress,.rail,.art-side,.art-actions,.rel-head,.rel-grid,.site-foot{display:none!important;}
  .cols{grid-template-columns:1fr!important;}
  .reader-page{padding:0;}
  .reader-article{box-shadow:none;}
}

/* ============ RESEARCHER PROFILE PAGE ============ */
.rp-page{padding:var(--gap) var(--pad) 0;display:flex;flex-direction:column;gap:var(--gap);}
.rp-hero{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;}
.rp-hero-cover{height:110px;position:relative;background:var(--acc,linear-gradient(140deg,#05707F,#033D46));}
.rp-hero-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.26),transparent 62%);}
.rp-hero-body{padding:0 clamp(16px,2.4vw,26px) 20px;display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;}
.rp-hero-av{width:104px;height:104px;font-size:32px;margin-block-start:-48px;border:4px solid var(--surface);box-shadow:var(--sh-1);}
.rp-hero-id{flex:1 1 240px;min-width:0;padding-block-start:12px;}
.rp-hero-id h1{font-family:var(--display);font-size:clamp(20px,2.6vw,27px);}
.rp-hero-role{font-size:13.5px;color:var(--muted);margin-block-start:4px;}
.rp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap);}
.rp-stat{background:var(--surface);border-radius:var(--r-lg);padding:15px 17px;box-shadow:var(--sh-1);}
.rp-stat .n{font-size:24px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.1;}
.rp-stat .l{font-size:12px;color:var(--muted);margin-block-start:3px;display:block;}
.rp-cols{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--gap);align-items:start;}
.rp-aside{display:flex;flex-direction:column;gap:var(--gap);position:sticky;top:86px;}
.rp-bio{font-size:13.5px;line-height:1.7;color:#2C363C;}
.rp-tags{display:flex;flex-wrap:wrap;gap:6px;}
.rp-tag{font-size:12px;font-weight:500;color:var(--muted);border:1px solid var(--line);padding:4px 10px;border-radius:var(--pill);}
.rp-contact{display:flex;flex-direction:column;gap:11px;}
.rp-crow{display:flex;flex-direction:column;gap:1px;font-size:13px;}
.rp-crow .k{font-size:11px;color:var(--muted);}
.rp-crow a{color:var(--brand-text);font-weight:600;}
.rp-pubs{min-width:0;}
@media (max-width:1024px){ .rp-cols{grid-template-columns:minmax(0,1fr);} .rp-aside{position:static;} }

/* ============ FORM ============ */
.form-wrap{padding:var(--gap) var(--pad) 0;display:flex;justify-content:center;}
.form-card{max-width:640px;width:100%;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(22px,4vw,36px);}
.form-card h1{font-family:var(--display);font-size:clamp(22px,3vw,30px);}
.form-card .lede{font-size:13.5px;color:var(--muted);line-height:1.6;margin-block-start:8px;}
.field{margin-block-start:18px;}
.field label{display:block;font-size:12.5px;font-weight:600;margin-block-end:6px;}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 13px;font:inherit;background:var(--canvas);color:var(--ink);}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-text);background:#fff;}
.form-actions{margin-block-start:22px;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:22px;border:none;border-radius:var(--pill);background:var(--brand-fill);color:#fff;font-size:13.5px;font-weight:700;transition:transform .16s,opacity .16s;}
.btn-primary:hover{transform:translateY(-2px);}
.notice{margin-block-start:16px;padding:12px 15px;border-radius:var(--r-md);font-size:13px;}
.notice.ok{background:rgba(78,143,122,.12);color:#20463A;}
/* Not the brand colour: a failure has to look like one, and teal does not. */
.notice.err{background:rgba(179,38,30,.1);color:#8C1D18;}

/* ============ FOOTER ============ */
.site-foot{margin:28px var(--pad) 0;padding:0 0 18px;}
.foot-inner{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(18px,2.6vw,28px);
  display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:clamp(18px,3vw,34px);}
/* The footer brand. The lockup was written into the footer template long before the artwork
   existed, and every rule for it was written against a .foot-lockup wrapper the template does not
   have — so it sat unstyled and invisible behind an onerror. With the file supplied it rendered
   at its natural 335px and walked over the next column. Sized here against the class that is
   actually in the markup.

   The round glyph beside it is dropped: the lockup already contains that same mark, and two
   copies of one logo an inch apart is not a design. */
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
/* Scales with the viewport rather than sitting at one size: the lockup is a 3.8:1 landscape
   shape, so height is what governs how present it is, and 40px made it read as a footnote. */
.foot-brand .foot-logo{height:clamp(48px,4.6vw,68px);width:auto;max-width:min(100%,320px);object-fit:contain;}
.foot-brand .foot-logo ~ .brand-glyph{display:none;}
.foot-brand .brand-glyph{width:36px;height:36px;font-size:16px;}
.foot-brand strong{display:block;font-size:14.5px;font-weight:700;line-height:1.3;}
.foot-brand p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-block-start:6px;max-width:34ch;}
.foot-col h4{font-size:11.5px;font-weight:600;color:var(--muted);margin:0 0 11px;}
.foot-col a,.foot-col span.fl{display:block;font-size:13px;line-height:1.5;padding-block:4px;}
.foot-col a:hover{color:var(--brand-text);}
.foot-col .fl{color:var(--muted);}
.foot-social{display:flex;gap:7px;}
.foot-social a{width:32px;height:32px;border-radius:var(--pill);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);padding:0;transition:all .16s;}
.foot-social a:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.foot-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 6px 0;font-size:12px;color:var(--muted);}
.watermark{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;padding:5px 12px;border-radius:var(--pill);
  background:rgba(44,46,53,.04);border:1px solid var(--line);font-size:11.5px;color:var(--muted);}
.watermark b{font-weight:700;color:var(--ink);}
.watermark .wm-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#0AA7C2,#04525E);}

/* ============ ENTRANCE ============ */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.22,.7,.3,1) forwards;}
  .rise.d1{animation-delay:.07s;} .rise.d2{animation-delay:.14s;}
  @keyframes rise{to{opacity:1;transform:none;}}
}
@media (prefers-reduced-motion:reduce){ .track{transition:none;} .sidebar{transition:none !important;} }

/* ============ RESPONSIVE ============ */
@media (min-width:1560px){ .card{flex:0 0 calc((100% - 3*var(--gap))/4);} }
@media (max-width:1240px){ .links a:nth-child(n+4){display:none;} .search{max-width:340px;} }
@media (max-width:1100px){ .hero{grid-template-columns:minmax(0,1fr);} }
@media (max-width:1024px){
  .links{display:none;}
  .menu-btn{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--pill);border:1px solid var(--nav-control);background:none;color:var(--nav-ink);}
  .shell{grid-template-columns:minmax(0,1fr);}
  .search{max-width:none;}
  .card{flex:0 0 calc((100% - var(--gap))/2);}
  .foot-inner{grid-template-columns:1fr 1fr;}
  .sidebar{position:fixed;z-index:60;inset-block:0;inset-inline-start:0;width:min(304px,86vw);background:var(--canvas);
    padding:14px;overflow-y:auto;gap:12px;transform:translateX(-102%);transition:transform .28s cubic-bezier(.3,.8,.35,1);}
  html[dir="rtl"] .sidebar{transform:translateX(102%);}
  .sidebar.open, html[dir="rtl"] .sidebar.open{transform:translateX(0);box-shadow:var(--sh-3);}
  .drawer-head{display:flex;align-items:center;gap:9px;padding-block-end:12px;border-block-end:1px solid var(--line);}
  .drawer-close{margin-inline-start:auto;width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);}
  .drawer-links{display:flex;flex-direction:column;gap:2px;}
  .drawer-links a{padding:10px 12px;border-radius:var(--r-md);font-size:14.5px;font-weight:600;color:var(--ink);}
  .drawer-links a:hover{background:rgba(44,46,53,.05);}
}
@media (max-width:980px){ .brand-name,.brand-sub{display:none;} }
/* The admin bar carries the Center's full name beside its mark. It has no menu links competing for
   the room, so the name stays until the screen is phone-narrow. */
.brand-admin .brand-name{max-width:340px;font-size:13.5px;line-height:1.25;}
.brand-admin .brand-sub{font-size:11.5px;margin-top:2px;}
@media (max-width:980px){ .brand-admin .brand-name,.brand-admin .brand-sub{display:block;} .brand-admin .brand-name{max-width:240px;font-size:12.5px;} }
@media (max-width:640px){ .brand-admin .brand-name,.brand-admin .brand-sub{display:none;} }
@media (max-width:700px){
  .card{flex:0 0 100%;}
  .brand-name,.brand-sub{display:none;}
  .hero-cta{width:100%;} .hbtn{flex:1;justify-content:center;}
}
@media (max-width:620px){
  .segmented{order:3;width:100%;overflow-x:auto;justify-content:flex-start;}
  .arrows{order:2;}
  .head .topic-filter{order:4;width:100%;}
  .head .topic-filter select{width:100%;}
  .people-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
  .cover{height:96px;}
  .foot-inner{grid-template-columns:1fr;} .watermark{margin-inline-start:0;}
}
@media (max-width:400px){
  .people-grid{grid-template-columns:minmax(0,1fr);}
  .lang span{display:none;} .lang{padding-inline:10px;}
}

.foot-lockup{display:flex;align-items:center;gap:11px;}
.drawer-head .brand-name{max-width:180px;}

/* ============ ADMIN ============ */
/* Shares the public site's tokens/top bar/footer markup so the admin feels like the same product. */
.admin-body{background:var(--canvas);color:var(--ink);font-size:15.5px;}
.admin-body .nav-wrap{padding-inline-end:calc(var(--pad) + 4px);}
.admin-body .nav-right{gap:8px;}
.admin-shell{display:flex;align-items:flex-start;padding:0 var(--pad) 0;gap:var(--gap);}

.admin-sidebar{position:sticky;top:86px;width:236px;flex:none;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:14px 10px;display:flex;flex-direction:column;gap:3px;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;}
.admin-sidebar a,.admin-sidebar .logout-btn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);color:var(--muted);font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;transition:background .16s,color .16s;}
.admin-sidebar a:hover,.admin-sidebar .logout-btn:hover{background:rgba(44,46,53,.05);color:var(--ink);}
.admin-sidebar a.on{background:var(--brand-fill);color:#fff;}
.admin-sidebar a.on .ic{color:#fff;}
.admin-sidebar .sep{height:1px;background:var(--line);margin:8px 6px;}
.nav-section-label{padding:6px 12px 2px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;}
.admin-sidebar .ic{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--ink);}
/* The row is nowrap+overflow:hidden, so a label long enough to push a "Soon" badge past the
   sidebar edge used to clip the badge. Let the label be the only thing that shrinks/ellipsises
   and pin the badge at the end so it always stays fully visible. */
.admin-sidebar .nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.admin-sidebar .badge-soon{flex:none;margin-inline-start:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;color:#fff;background:#C98134;border-radius:var(--pill);padding:2px 8px;line-height:1.6;}
.admin-sidebar a.on .badge-soon{background:rgba(255,255,255,.26);}
.admin-sidebar .ic svg{width:19px;height:19px;flex:none;}
.admin-drawer-close{display:none;}

.admin-main{flex:1;min-width:0;padding:var(--gap) 0 40px;}
.admin-main h1{font-size:25px;margin-bottom:4px;font-family:inherit;}
.admin-sub{color:var(--muted);font-size:14.5px;margin-bottom:20px;line-height:1.55;}
.admin-sub a{color:var(--brand-text);font-weight:600;}
.admin-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px;margin-bottom:18px;}
.admin-actions a,.admin-actions button{font-size:13.5px;font-weight:700;color:var(--brand-text);margin-inline-end:6px;border:1px solid transparent;background:rgba(6,147,172,.07);padding:5px 11px;border-radius:var(--pill);cursor:pointer;display:inline-block;transition:background .16s;}
.admin-actions a:hover,.admin-actions button:hover{background:rgba(6,147,172,.14);}
.admin-actions .danger{color:#B3261E;background:rgba(179,38,30,.08);}
.admin-actions .danger:hover{background:rgba(179,38,30,.16);}

/* ---- shared card-grid listing, used by every admin resource list ---- */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap);}
.admin-grid[hidden]{display:none;}
.admin-item-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s;}
.admin-item-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.admin-item-swatch{height:52px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:linear-gradient(135deg,var(--muted),var(--ink));}
.admin-item-initials{color:#fff;font-weight:700;font-size:14px;background:rgba(255,255,255,.18);border-radius:var(--pill);width:32px;height:32px;display:grid;place-items:center;}
.admin-item-tag{font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.2);padding:3px 10px;border-radius:var(--pill);white-space:nowrap;}
/* Book rows in an admin listing show the book itself, standing on a shelf backdrop tinted with
   that book's own cover gradient — the same treatment the public listing uses. */
.admin-book-shelf{position:relative;height:132px;display:flex;align-items:center;justify-content:center;
  padding:14px;overflow:hidden;background:var(--surface);}
.admin-book-shelf::before{content:"";position:absolute;inset:0;background:var(--acc);opacity:.18;}
.admin-book-shelf .admin-item-tag{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  background:rgba(44,46,53,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.admin-book{position:relative;z-index:1;height:100%;aspect-ratio:2/3;overflow:hidden;background:var(--acc);
  color:#fff;display:flex;align-items:flex-end;padding:8px 7px 8px 11px;
  border-radius:2px 5px 5px 2px;box-shadow:0 5px 14px rgba(44,46,53,.32),0 1px 3px rgba(44,46,53,.24);}
html[dir="rtl"] .admin-book{padding:8px 11px 8px 7px;border-radius:5px 2px 2px 5px;}
.admin-book .spine{position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:rgba(0,0,0,.26);}
.admin-book .ab-title{position:relative;z-index:1;font-family:var(--display);font-size:9px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.admin-book img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}

.admin-item-body{padding:14px 15px 4px;flex:1;display:flex;flex-direction:column;gap:5px;}
.admin-item-title{font-size:16px;font-weight:700;line-height:1.3;}
.admin-item-title code{font-size:13px;font-weight:600;background:rgba(44,46,53,.05);padding:1px 6px;border-radius:6px;}
.admin-item-meta{font-size:13.5px;color:var(--muted);line-height:1.5;}
.admin-item-meta b{color:var(--ink);font-weight:600;}
.admin-item-actions{padding:12px 15px 15px;margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;border-block-start:1px solid var(--canvas);}
.admin-item-actions form{display:inline;}
.admin-item-actions select{font-size:13px;padding:6px 9px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--canvas);}

/* ---- list/table view mode: a real datatable, same look as acrps-books.html's Table view ---- */
.admin-table-wrap{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.admin-table{width:100%;border-collapse:collapse;min-width:640px;}
.admin-table thead th{text-align:start;font-size:12.5px;font-weight:600;color:var(--muted);padding:13px 15px;border-block-end:1px solid var(--line);white-space:nowrap;}
.admin-table thead th.sortable{cursor:pointer;user-select:none;}
.admin-table thead th.sortable:hover{color:var(--ink);}
.admin-table thead th .sort-ind{display:inline-block;margin-inline-start:5px;opacity:.3;font-size:10px;}
.admin-table thead th.asc .sort-ind,.admin-table thead th.desc .sort-ind{opacity:1;color:var(--brand-text);}
.admin-table thead th.desc .sort-ind{transform:scaleY(-1);}
.admin-table tbody td{padding:11px 15px;border-block-end:1px solid var(--line);vertical-align:middle;font-size:13.5px;}
.admin-table tbody tr:last-child td{border-block-end:none;}
.admin-table tbody tr:hover{background:rgba(44,46,53,.028);}
.admin-table .t-swatch{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--pill);color:#fff;font-size:11px;font-weight:700;flex:none;}
.admin-table .t-primary{display:flex;align-items:center;gap:10px;min-width:200px;}
.admin-table .t-title{font-size:13.5px;font-weight:600;line-height:1.3;display:block;}
.admin-table .t-sub{font-size:11.5px;color:var(--muted);display:block;line-height:1.3;}
.admin-table .t-cell{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.admin-table .cell-actions{text-align:end;white-space:nowrap;}
.mini-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);padding:5px 12px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .16s;margin-inline-start:6px;}
.mini-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.mini-btn.danger{color:#B3261E;border-color:rgba(179,38,30,.3);}
.mini-btn.danger:hover{background:#B3261E;border-color:#B3261E;color:#fff;}

/* ---- listing toolbar: grid/list view toggle ---- */
.listing-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px;}
.view-toggle{display:inline-flex;gap:2px;padding:3px;background:rgba(44,46,53,.05);border-radius:var(--pill);}
.view-btn{border:none;background:none;border-radius:var(--pill);width:32px;height:28px;display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:background .16s,color .16s;}
.view-btn:hover{color:var(--ink);}
.view-btn.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);}

/* ---- pagination ---- */
/* Pager bar: row count on the left, rows-per-page next to it, page buttons on the right. */
.admin-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;}
.admin-pager-range{font-size:12.5px;color:var(--muted);}
.admin-pager .perpage{height:34px;}
.admin-pager .admin-pagination{margin-top:0;margin-inline-start:auto;}
.admin-pagination{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:20px;flex-wrap:wrap;}
.admin-pagination button{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-md);font-size:14px;font-weight:600;cursor:pointer;transition:background .16s;}
.admin-pagination button:hover:not(:disabled){background:rgba(44,46,53,.05);}
.admin-pagination button.on{background:var(--brand-fill);border-color:var(--brand-text);color:#fff;}
.admin-pagination button:disabled{opacity:.4;cursor:default;}

/* ---- generic small popup (usage list, etc.) ---- */
.admin-popup-backdrop{position:fixed;inset:0;z-index:200;background:rgba(44,46,53,.5);display:flex;align-items:center;justify-content:center;padding:20px;}
.admin-popup{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);width:min(420px,92vw);max-height:80vh;overflow-y:auto;}
.admin-popup-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);}
.admin-popup-head strong{font-size:14.5px;}
.admin-popup-close{border:none;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:0;}
.admin-popup-close:hover{color:var(--ink);}
.admin-popup-body{padding:14px 16px;}
.admin-popup-body ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.admin-popup-body li a{font-weight:600;color:var(--brand-text);}
.admin-popup-body li .path{color:var(--muted);font-size:12px;margin-inline-start:6px;}
.admin-confirm-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 16px;}
.admin-confirm .btn{height:38px;padding-inline:18px;font-size:13.5px;}
.usage-link{background:none;border:none;padding:0;font:inherit;color:var(--brand-text);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}

/* ---- component preview modal ---- */
.preview-modal-backdrop{display:none;position:fixed;inset:0;z-index:200;background:rgba(44,46,53,.55);align-items:center;justify-content:center;padding:20px;}
.preview-modal-backdrop.open{display:flex;}
.preview-modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);width:min(1100px,94vw);height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.preview-modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);flex:none;}
.preview-modal iframe{flex:1;width:100%;border:none;background:#fff;}

.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:22px;border-radius:var(--pill);border:none;background:var(--brand-fill);color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;transition:transform .16s,opacity .16s;}
.btn:hover{transform:translateY(-2px);}
.btn.secondary{background:rgba(44,46,53,.06);color:var(--ink);}
.btn.danger{background:#B3261E;}

.admin-form .field{margin-bottom:14px;}
.admin-form label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px;}
.admin-form input,.admin-form select,.admin-form textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;font-size:14.5px;font-family:inherit;background:var(--canvas);color:var(--ink);transition:border-color .16s,background .16s;}
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus{outline:none;border-color:var(--brand-text);background:#fff;}
.admin-form textarea{min-height:90px;resize:vertical;}
.admin-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.admin-form .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:760px){.admin-form .row3{grid-template-columns:1fr;}}
/* Top-aligned: a pair of fields on the same row should start level with each other, whatever
   their labels or help text do to the height of the row. */
.admin-form .fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;}
.admin-form .fields-grid .field.full{grid-column:1 / -1;}
@media (max-width:720px){.admin-form .fields-grid{grid-template-columns:1fr;}}

/* Collapsed, a section is one strip: its number, its headline, and the controls that reorder or
   delete it without needing it open. The padding drops to the strip's own so a shut row is a line
   rather than a card with empty space in it. */
.section-row{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;margin-bottom:8px;background:var(--canvas);}
.section-row.is-open{padding:14px;margin-bottom:12px;}
.section-row-head{display:flex;align-items:center;gap:10px;}
.sec-toggle{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:none;background:none;
  padding:4px 2px;text-align:start;color:var(--ink);cursor:pointer;}
.sec-caret{flex:none;width:0;height:0;border-inline-start:6px solid currentColor;
  border-block:5px solid transparent;transition:transform .16s;opacity:.55;}
html[dir="rtl"] .sec-caret{transform:scaleX(-1);}
.section-row.is-open .sec-caret{transform:rotate(90deg);}
html[dir="rtl"] .section-row.is-open .sec-caret{transform:rotate(90deg) scaleX(-1);}
.sec-n{flex:none;min-width:22px;height:22px;padding-inline:6px;border-radius:var(--pill);
  background:var(--surface);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--muted);}
.sec-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:600;}
.section-row-actions{display:flex;justify-content:flex-end;gap:6px;flex:none;}
.section-row.is-open .section-row-body{margin-top:12px;}
/* Each section body is the same isolated rich-text editor the main body fields use. */
.sec-editor{width:100%;height:260px;border:1px solid var(--line);border-radius:var(--r-md);
  display:block;background:#fff;}

/* ---- researcher photo upload ---- */
.photo-upload-preview{position:relative;width:104px;height:104px;border-radius:50%;background:var(--canvas) center/cover no-repeat;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.photo-upload-preview-lg{width:168px;height:168px;}
.photo-upload-preview-cover{width:150px;height:200px;border-radius:var(--r-md);background-size:cover;background-position:center;}
.photo-upload-empty{font-size:11.5px;color:var(--muted);text-align:center;padding:0 8px;}
.photo-upload-initial{font-family:var(--display);font-size:52px;font-weight:700;color:rgba(255,255,255,.85);}
.photo-upload-overlay{position:absolute;inset:0;background:rgba(44,46,53,.62);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;transition:opacity .16s;}
.photo-upload-preview:hover .photo-upload-overlay{opacity:1;}
.photo-upload-overlay .mini-btn{margin-inline-start:0;font-size:11px;padding:4px 10px;}

/* ---- toast notifications ---- */
.toast-stack{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.toast{background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;padding:12px 18px;border-radius:var(--r-md);box-shadow:var(--sh-2);cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;max-width:320px;}
.toast.in{opacity:1;transform:translateY(0);}
.toast::before{content:"✓ ";color:#4E8F7A;}
.toast.error{background:#B3261E;}
.toast.error::before{content:"! ";color:#fff;}
.admin-form .hint{font-size:12.5px;color:var(--muted);margin-top:4px;}

/* Select2 re-skinned to match the admin form inputs above */
.admin-form select.select2-hidden-accessible,.admin-filter-form select.select2-hidden-accessible{position:absolute!important;}
.select2-container--default .select2-selection--single{height:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--canvas);padding:10px 12px;transition:border-color .16s,background .16s;}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--brand-text);background:#fff;}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);font-size:14.5px;font-family:inherit;line-height:1.3;padding:0;padding-inline-end:18px;}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--muted);}
.select2-container--default .select2-selection--single{position:relative;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;top:0;right:8px;}
/* Select2 floats the clear "×" inside the rendered text, which lands it on top of the dropdown
   arrow and off the vertical centre. Pin it just left of the arrow instead. */
.select2-container--default .select2-selection--single .select2-selection__clear{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);
  float:none;margin:0;padding:0 4px;height:auto;width:auto;line-height:1;
  font-size:17px;font-weight:400;color:var(--muted);transition:color .16s;}
.select2-container--default .select2-selection--single .select2-selection__clear:hover{color:var(--brand-text);}
.select2-container--default .select2-selection--single .select2-selection__clear span{line-height:1;}
/* Room for the arrow. Only the remote selects show a clear "×" as well, so only those need the
   wider gutter — applying 52px everywhere made small dropdowns (rows-per-page) far too wide. */
.select2-container--default .select2-selection--single .select2-selection__rendered{padding-inline-end:26px;}
.js-remote-select + .select2-container--default .select2-selection--single .select2-selection__rendered{padding-inline-end:52px;}
.select2-dropdown{border:1px solid var(--line);border-radius:var(--r-md);font-family:inherit;overflow:hidden;}
.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-family:inherit;}
.select2-results__option{color:var(--ink);}
.select2-container--default .select2-results__option--highlighted{background:var(--brand-fill)!important;color:#fff!important;}
.select2-container--default .select2-results__option--selected{background:rgba(6,147,172,.08);}
.select2-container{width:100%!important;}
/* Select2 appends the OPEN dropdown to a container on <body>. The 100% rule above was stretching
   that to the full page width, so an open dropdown spanned the whole screen. */
body > .select2-container{width:auto!important;}
/* Compact dropdowns that sit inline (pager rows-per-page, the listing topic filter) must keep
   their own width rather than inheriting the full-width rule above. */
.pub-pager .select2-container,.admin-pager .select2-container{width:auto!important;min-width:0;}
.head .topic-filter .select2-container{width:auto!important;min-width:160px;}
.pub-pager .select2-selection--single,.admin-pager .select2-selection--single,
.head .topic-filter .select2-selection--single{padding:7px 10px;}

/* ---- admin login ----
   Split layout: a wine brand panel reusing the public hero's language (glyph, Arabic wash,
   radial bloom) beside the sign-in card, with the A2Z watermark from the site footer. */
.login-body{min-height:100vh;}
.login-split{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;}

.login-brand{position:relative;overflow:hidden;display:flex;align-items:center;
  padding:clamp(28px,4vw,60px);color:#fff;background:linear-gradient(150deg,#066476 0%,#04525E 48%,#022E35 100%);}
.login-brand::before{content:"";position:absolute;inset-block-start:-26%;inset-inline-end:-12%;
  width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(10,167,194,.38),transparent 66%);}
.login-brand::after{content:"";position:absolute;inset-block-end:-30%;inset-inline-start:-18%;
  width:58%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%);}
.login-wash{position:absolute;inset-block-end:-14%;inset-inline-end:-2%;font-family:var(--font-ar);
  font-weight:700;font-size:clamp(200px,30vw,420px);line-height:.75;color:rgba(255,255,255,.05);
  pointer-events:none;user-select:none;}
.login-brand-inner{position:relative;z-index:1;max-width:440px;}
.login-glyph{width:64px;height:64px;font-size:28px;border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.3);}
.login-brand-title{font-family:var(--display);font-size:clamp(26px,3vw,38px);line-height:1.2;
  letter-spacing:-.02em;margin-block-start:22px;}
.login-brand-sub{font-family:var(--font-ar);font-size:15px;color:rgba(255,255,255,.66);margin-block-start:10px;line-height:1.6;}
.login-brand-lede{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.74);margin-block-start:18px;}
.login-points{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:11px;}
.login-points li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.8);}
.lp-dot{width:6px;height:6px;flex:none;border-radius:50%;background:rgba(255,255,255,.62);
  box-shadow:0 0 0 4px rgba(255,255,255,.1);}

.login-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:clamp(24px,4vw,48px);background:var(--canvas);}
.login-card{width:min(390px,100%);background:var(--surface);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,34px);box-shadow:var(--sh-2);}
.login-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-text);background:rgba(6,147,172,.08);
  padding:4px 11px;border-radius:var(--pill);}
.login-head h2{font-size:24px;margin-block-start:14px;letter-spacing:-.02em;}
.login-head p{font-size:13.5px;color:var(--muted);margin-block-start:6px;}
.login-form{margin-block-start:22px;}
.login-error{margin-block-start:18px;}

/* input with a leading icon and an optional trailing button */
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap .input-ic{position:absolute;inset-inline-start:12px;display:grid;place-items:center;
  color:var(--muted);pointer-events:none;transition:color .16s;}
.admin-form .input-wrap input{padding-inline-start:38px;height:46px;}
.input-wrap:focus-within .input-ic{color:var(--brand-text);}
.pw-toggle{position:absolute;inset-inline-end:8px;width:32px;height:32px;border:none;background:none;
  border-radius:var(--pill);display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:background .16s,color .16s;}
.pw-toggle:hover{background:rgba(44,46,53,.06);color:var(--ink);}
/* The toggle holds both eye icons in one grid cell; the UA [hidden] rule does not reliably
   suppress an <svg> here, so hide it explicitly or both icons stack. */
.pw-toggle svg{grid-area:1/1;}
.pw-toggle svg[hidden]{display:none;}
.caps-hint{margin-block-start:7px;font-size:12px;font-weight:600;color:#C98134;}

.login-btn{width:100%;justify-content:center;margin-block-start:6px;height:46px;position:relative;}
.login-btn:disabled{opacity:.75;cursor:default;transform:none;}
.btn-spinner{display:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:btnspin .7s linear infinite;}
.login-btn.is-busy .btn-label{opacity:.55;}
.login-btn.is-busy .btn-spinner{display:block;}
@keyframes btnspin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:no-preference){
  .shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97);}
  @keyframes shake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(4px);}
    30%,50%,70%{transform:translateX(-6px);}40%,60%{transform:translateX(6px);}}
}

.login-foot{display:flex;justify-content:center;}
.login-foot .watermark{margin-inline-start:0;background:var(--surface);}

@media (max-width:900px){
  .login-split{grid-template-columns:1fr;}
  /* On a phone the brand panel becomes a compact banner rather than a full screen to scroll past. */
  .login-brand{padding:30px 24px 34px;}
  .login-brand-title{font-size:24px;}
  .login-brand-lede,.login-points{display:none;}
  .login-wash{font-size:220px;inset-block-end:-24%;}
}

/* ---- dashboard ----
   Shares the login page's language: wine gradient, radial bloom, oversized Arabic wash. */
.dash-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);color:#fff;
  padding:clamp(24px,3.2vw,38px);margin-bottom:18px;
  background:linear-gradient(150deg,#066476 0%,#04525E 48%,#022E35 100%);box-shadow:var(--sh-2);}
.dash-hero::before{content:"";position:absolute;inset-block-start:-60%;inset-inline-end:-6%;
  width:46%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(10,167,194,.4),transparent 66%);}
.dash-wash{position:absolute;inset-block-end:-48%;inset-inline-end:2%;font-family:var(--font-ar);
  font-weight:700;font-size:clamp(180px,22vw,300px);line-height:.75;color:rgba(255,255,255,.05);
  pointer-events:none;user-select:none;}
.dash-hero-main{position:relative;z-index:1;max-width:640px;}
.dash-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  padding:4px 11px;border-radius:var(--pill);}
.dash-kicker-dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.dash-hero h1{font-family:var(--display);font-size:clamp(25px,3vw,34px);letter-spacing:-.02em;margin-block-start:14px;}
.dash-hero p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.76);margin-block-start:9px;}
.dash-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:22px;}
.dash-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding-inline:18px;
  border-radius:var(--pill);background:#fff;color:#04525E;font-size:13.5px;font-weight:700;
  transition:transform .16s,box-shadow .16s;}
.dash-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22);}
.dash-btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);}
.dash-btn.ghost:hover{background:rgba(255,255,255,.18);}

.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin-bottom:18px;}
.dash-stat{background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:2px;color:inherit;transition:transform .2s,box-shadow .2s;}
.dash-stat:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.ds-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;margin-bottom:8px;}
.ds-n{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em;}
.ds-l{font-size:12.5px;color:var(--muted);font-weight:600;}

/* min-width:0 on the tracks and panels: without it a grid item refuses to shrink below its
   content's min-content width, and the two-column dashboard pushed the page sideways. */
.dash-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start;}
.dash-cols > *{min-width:0;}
@media (max-width:1100px){ .dash-cols{grid-template-columns:minmax(0,1fr);} }
.dash-panel{padding:18px 20px 20px;min-width:0;overflow:hidden;}
.dash-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.dash-panel-head h3{font-size:15px;margin:0;}
.dash-link{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:12.5px;font-weight:600;color:var(--brand-text);}

.dash-recent{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;}
.dash-recent li + li{border-block-start:1px solid var(--line);}
.dash-recent a{display:flex;align-items:center;gap:12px;padding:11px 4px;color:inherit;border-radius:var(--r-md);transition:background .16s;}
.dash-recent a:hover{background:rgba(44,46,53,.035);}
.dr-swatch{width:34px;height:34px;flex:none;border-radius:9px;}
.dr-main{min-width:0;flex:1;}
.dr-title{display:block;font-size:13.5px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dr-meta{display:block;font-size:11.5px;color:var(--muted);margin-block-start:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dr-date{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap;}

.dash-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:8px;}
.dash-actions a{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-md);font-size:13px;font-weight:600;color:var(--ink);background:var(--canvas);
  transition:border-color .16s,background .16s,transform .16s;}
.dash-actions a:hover{border-color:var(--brand-text);color:var(--brand-text);background:var(--surface);transform:translateY(-2px);}
.da-ic{font-size:14px;line-height:1;color:var(--brand-text);}
.dash-actions.secondary a{background:none;font-weight:600;color:var(--muted);}
.dash-actions.secondary a:hover{color:var(--brand-text);}

.badge-count{font-size:12px;font-weight:700;color:#fff;background:#4E8F7A;border-radius:var(--pill);padding:3px 9px;}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.stat-box{flex:1;min-width:140px;background:var(--surface);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s;}
.stat-box:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.stat-box .n{font-size:27px;font-weight:800;display:block;}
.stat-box .l{font-size:13.5px;color:var(--muted);}
.top-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap;}

@media (max-width:900px){
  .admin-sidebar{position:fixed;z-index:60;inset-block:0;inset-inline-start:0;top:0;width:min(280px,86vw)!important;max-height:none;border-radius:0;transform:translateX(-102%);transition:transform .28s cubic-bezier(.3,.8,.35,1);padding:14px;}
  .admin-sidebar.open{transform:translateX(0);box-shadow:var(--sh-3);}
  .admin-drawer-close{display:flex;margin-inline-start:auto;width:32px;height:32px;flex:none;align-items:center;justify-content:center;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);}
  .admin-sidebar .drawer-title{display:flex;align-items:center;padding:4px 10px 12px;border-block-end:1px solid var(--line);margin-bottom:8px;font-weight:700;font-size:15.5px;}
  .admin-shell{padding-inline:var(--pad);}
}
@media (min-width:901px){ .admin-sidebar .drawer-title{display:none;} }

/* ---- visual page builder (opens as a popup) ---- */
.builder-col-title{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:#6C757E;margin-bottom:8px;text-transform:uppercase;}
.builder-card{background:#fff;border:1px solid #E6E4DE;border-radius:10px;padding:11px 13px;cursor:grab;display:flex;flex-direction:column;gap:3px;margin-bottom:8px;transition:box-shadow .12s,border-color .12s;}
.builder-card:active{cursor:grabbing;}
.builder-card:hover{border-color:#05707F;box-shadow:0 2px 6px rgba(44,46,53,.08);}
.builder-card strong{font-size:14.5px;}
.builder-card .sub{color:#6C757E;font-size:12.5px;}
.builder-canvas{min-height:64px;border-radius:12px;padding:2px;transition:outline-color .12s;outline:2px dashed transparent;outline-offset:4px;}
.builder-canvas.drop-target{outline-color:#05707F;background:rgba(6,147,172,.03);}
.canvas-item{flex-direction:row;align-items:center;justify-content:space-between;cursor:move;gap:10px;flex-wrap:wrap;}
.canvas-item .drag-handle{color:#6C757E;flex:none;}
.canvas-item .canvas-name{flex:1;min-width:100px;}
.canvas-item.dragging{opacity:.35;}
.canvas-item.width-half{background:#F1FAFB;border-color:#C6E2E8;}
.width-toggle{border:1px solid var(--line);background:var(--canvas);color:var(--muted);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--pill);cursor:pointer;flex:none;}
.width-toggle.on{background:var(--brand-fill);border-color:var(--brand-text);color:#fff;}
.builder-pinned{background:#F0EFEB;border-radius:10px;padding:10px 13px;font-size:13.5px;color:#6C757E;display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.builder-pinned .pin-icon{display:inline-flex;color:#05707F;flex:none;}
.builder-pinned:last-child{margin-bottom:0;margin-top:8px;}
.builder-preview-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex:none;}

/* popup shell — full page */
.builder-modal-backdrop{display:none;position:fixed;inset:0;z-index:100;background:var(--canvas);}
.builder-modal-backdrop.open{display:flex;}
.builder-modal{background:var(--canvas);width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
.builder-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex:none;gap:12px;}
.builder-modal-head strong{font-size:16px;}
.builder-modal-body{flex:1;display:flex;min-height:0;min-width:0;}

/* left side: component library and this-page canvas, side by side */
.builder-pane-left{flex:1;min-width:0;display:flex;overflow:hidden;}
.builder-col{flex:1;min-width:0;padding:16px;overflow-y:auto;}
.builder-col-palette{flex:0 0 34%;border-inline-end:1px solid var(--line);background:rgba(44,46,53,.015);}

.builder-slider{width:8px;flex:none;cursor:col-resize;background:var(--line);position:relative;transition:background .12s;}
.builder-slider::after{content:"";position:absolute;inset-block:0;inset-inline:-5px;}
.builder-slider:hover,.builder-slider.dragging{background:var(--brand-fill);}

/* right side: live preview — width is set in px by the slider so it can shrink to exactly 0 */
.builder-pane-right{width:44%;min-width:0;flex:none;display:flex;flex-direction:column;padding:16px;overflow:hidden;}
.builder-pane-right.hidden-pane{padding:0;}
#previewFrame{flex:1;width:100%;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;}

@media (max-width:900px){
  .builder-pane-left{flex-direction:column;}
  .builder-col-palette{flex:0 0 auto;max-height:40%;border-inline-end:none;border-block-end:1px solid var(--line);}
}
@media (max-width:760px){
  .builder-modal-body{flex-direction:column;}
  .builder-pane-left{flex:none;height:60%;}
  .builder-pane-right{width:100% !important;flex:1;}
  .builder-slider{display:none;}
}

/* =========================================================================
   VISUAL SECTION BUILDER (admin) — /admin/components/:id/edit and /new
   ========================================================================= */

/* ---- starter gallery ---- */
.starter-filter{display:flex;gap:8px;flex-wrap:wrap;margin-block-end:16px;}
.starter-tab{border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);
  padding:7px 15px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;}
.starter-tab.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.starter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap);}
.starter-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s;}
.starter-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.starter-card[hidden]{display:none;}
.starter-thumb{height:116px;background:var(--canvas);border-bottom:1px solid var(--line);
  padding:14px;display:flex;flex-direction:column;gap:6px;justify-content:center;overflow:hidden;}
.starter-thumb i{display:block;background:#D6D3CC;border-radius:3px;}
.starter-thumb .sk-bar{min-height:5px;}
.starter-thumb .sk-row{display:flex;gap:6px;height:38px;background:none;}
.starter-thumb .sk-row i{flex:1;height:100%;}
.starter-thumb .sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;height:48px;background:none;}
.starter-thumb .sk-split{display:flex;gap:8px;height:46px;background:none;}
.starter-thumb .sk-split i:first-child{flex:0 0 34%;}
.starter-thumb .sk-split i:last-child{flex:1;background:#E4E2DC;}
.starter-thumb .sk-rail{display:flex;flex-direction:column;gap:7px;height:48px;background:none;
  border-inline-start:2px solid #D6D3CC;padding-inline-start:9px;}
.starter-thumb .sk-rail i{height:100%;}
.starter-thumb .sk-empty{display:grid;place-items:center;height:100%;background:none;
  color:#B9B5AC;font-size:30px;font-weight:300;}
.starter-body{padding:13px 15px 4px;display:flex;flex-direction:column;gap:4px;flex:1;}
.starter-body strong{font-size:14.5px;}
.starter-body span{color:var(--muted);font-size:13px;line-height:1.5;}
.starter-foot{display:flex;align-items:center;gap:10px;padding:10px 15px 15px;}
.starter-count{color:var(--muted);font-size:12px;font-weight:600;margin-inline-end:auto;}
.starter-foot .btn{height:32px;padding-inline:15px;font-size:13px;}

/* ---- two-column builder: palette | stack ---- */
.builder2{display:grid;grid-template-columns:262px minmax(0,1fr);gap:var(--gap);align-items:start;}
.builder2-palette,.builder2-stack{background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:14px;}
.builder2-palette{position:sticky;top:86px;max-height:calc(100vh - 120px);overflow-y:auto;}
.builder2-head{display:flex;align-items:baseline;gap:8px;margin-block-end:10px;}
.builder2-head strong{font-size:14.5px;}
.builder2-head .hint{font-size:12px;color:var(--muted);font-weight:500;}
.builder2-head .hint.warn{color:#B3261E;font-weight:600;}
.builder2-search{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;
  font:inherit;font-size:13px;background:var(--canvas);color:var(--ink);margin-block-end:10px;}
.builder2-search:focus{outline:none;border-color:var(--brand-text);background:#fff;}
.builder2-group{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 6px;}
.builder2-group:first-child{margin-block-start:0;}
.builder2-none{color:var(--muted);font-size:13px;}
.palette-item{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:start;
  border:1px solid transparent;background:none;border-radius:var(--r-md);padding:8px 9px;
  cursor:pointer;transition:background .14s,border-color .14s;}
.palette-item:hover{background:rgba(6,147,172,.06);border-color:rgba(6,147,172,.18);}
.palette-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--canvas);color:var(--brand-text);}
.palette-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.palette-txt strong{font-size:13.5px;}
.palette-txt span{font-size:11.5px;color:var(--muted);line-height:1.4;}

/* ---- the stack of blocks ---- */
.builder2-list{display:flex;flex-direction:column;gap:9px;}
.builder2-empty{color:var(--muted);font-size:13.5px;line-height:1.6;background:var(--canvas);
  border:1px dashed var(--line);border-radius:var(--r-md);padding:24px;text-align:center;margin:0;}
.builder2-empty[hidden]{display:none;}
.builder2-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-block-start:18px;}
.bcard{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;}
.bcard.open{border-color:rgba(6,147,172,.35);box-shadow:var(--sh-1);}
.bcard.dragging{opacity:.45;}
.bcard-head{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  background:var(--surface);transition:background .14s;}
.bcard-head:hover{background:rgba(44,46,53,.03);}
.bcard-grip{color:#B9B5AC;cursor:grab;font-size:14px;line-height:1;}
.bcard-ic{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--canvas);color:var(--brand-text);}
.bcard-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.bcard-txt strong{font-size:13.5px;}
.bcard-sum{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bcard-tag{align-self:flex-start;margin-block-start:3px;font-size:10.5px;font-weight:700;
  color:#2B2E63;background:rgba(91,96,184,.14);padding:2px 8px;border-radius:var(--pill);}
.bcard-actions{display:flex;gap:4px;flex:none;}
.bcard-body{padding:4px 14px 16px;border-block-start:1px solid var(--line);background:var(--canvas);}
.bcard-body[hidden]{display:none;}

/* ---- one setting ---- */
.bfield{margin-block-start:14px;}
.bfield > label{display:block;font-size:12.5px;font-weight:600;margin-block-end:5px;}
.bfield input[type=text],.bfield input[type=number],.bfield select,.bfield textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 11px;font:inherit;
  font-size:13.5px;background:var(--surface);color:var(--ink);}
.bfield textarea{min-height:76px;resize:vertical;}
.bfield input:focus,.bfield select:focus,.bfield textarea:focus{outline:none;border-color:var(--brand-text);}
.bhelp{display:block;font-size:11.5px;color:var(--muted);margin-block-start:4px;}
.bswitch{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer;}
.bswitch input{width:auto;}
.brepeat-btn{font-size:12px;font-weight:700;color:var(--brand-text);background:rgba(6,147,172,.07);
  border:none;padding:4px 10px;border-radius:var(--pill);cursor:pointer;transition:background .14s;}
.brepeat-btn:hover{background:rgba(6,147,172,.15);}
.brepeat-btn.danger{color:#B3261E;background:rgba(179,38,30,.08);}
.brepeat-btn.danger:hover{background:rgba(179,38,30,.17);}

/* ---- picture picker ---- */
.bimage{display:flex;gap:11px;align-items:flex-start;}
.bimage-thumb{flex:none;width:86px;height:64px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface) center/cover no-repeat;}
.bimage-thumb.is-empty{background-image:repeating-linear-gradient(45deg,#F4F3EF 0 7px,#EAE8E2 7px 14px);}
.bimage-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.bimage-row{display:flex;gap:6px;}
.bimage-row .mini-btn{cursor:pointer;border:none;}
.bimage-url{font-size:12.5px !important;}

/* ---- rich text ---- */
.brich-frame{width:100%;height:280px;border:1px solid var(--line);border-radius:10px;
  display:block;background:#fff;}

/* ---- repeating rows ---- */
.brepeat-list{display:flex;flex-direction:column;gap:8px;}
.brepeat-row{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:8px 11px 12px;}
.brepeat-head{display:flex;align-items:center;gap:6px;}
.brepeat-n{width:20px;height:20px;border-radius:50%;background:var(--canvas);color:var(--muted);
  font-size:11px;font-weight:700;display:grid;place-items:center;flex:none;}
.brepeat-sp{flex:1;}
.brepeat-body{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.brepeat-body .brepeat{grid-column:1 / -1;}
.brepeat-add{margin-block-start:9px;height:34px;padding-inline:16px;font-size:13px;}

@media (max-width:900px){
  .builder2{grid-template-columns:minmax(0,1fr);}
  .builder2-palette{position:static;max-height:none;}
  .brepeat-body{grid-template-columns:minmax(0,1fr);}
}

/* =========================================================================
   BLOCKS (public) — markup produced by the visual section builder.
   Every class here is emitted by lib/blocks.js; nothing else uses them.
   ========================================================================= */

.cb{margin-block-end:var(--gap);}
.cb:last-child{margin-block-end:0;}

/* ---- colour tones shared by banners, notes and call-to-action strips ---- */
.cb-tone-wine{--cb-bg:var(--brand);--cb-fg:#fff;--cb-soft:rgba(6,147,172,.09);--cb-edge:rgba(6,147,172,.22);}
.cb-tone-teal{--cb-bg:#20463A;--cb-fg:#fff;--cb-soft:rgba(78,143,122,.13);--cb-edge:rgba(32,70,58,.22);}
.cb-tone-sand{--cb-bg:#7A4415;--cb-fg:#fff;--cb-soft:rgba(201,129,52,.14);--cb-edge:rgba(122,68,21,.22);}
.cb-tone-ink{--cb-bg:var(--ink);--cb-fg:#fff;--cb-soft:rgba(44,46,53,.07);--cb-edge:rgba(44,46,53,.18);}
.cb-tone-plain{--cb-bg:var(--surface);--cb-fg:var(--ink);--cb-soft:transparent;--cb-edge:var(--line);}

/* ---- text ---- */
.cb-heading h2,.cb-heading h3,.cb-heading h4{font-family:var(--display);line-height:1.25;}
.cb-rule{display:block;width:54px;height:3px;border-radius:2px;background:var(--brand-fill);
  margin-block-start:9px;}
.cb-heading[style*="center"] .cb-rule{margin-inline:auto;}
.cb-rich{line-height:1.75;color:var(--ink);}
.cb-rich :where(p,ul,ol){margin-block-end:.9em;}
.cb-rich :where(h2,h3,h4){font-family:var(--display);margin-block:1.1em .4em;}
.cb-rich a{color:var(--brand-text);font-weight:600;text-decoration:underline;}
.cb-rich img{max-width:100%;height:auto;border-radius:var(--r-md);}
/* Formatted text carries both languages at once, so the inactive one is hidden outright. */
html:not([dir="rtl"]) .cb-rich[data-lang-only="ar"]{display:none;}
html[dir="rtl"] .cb-rich[data-lang-only="en"]{display:none;}

.cb-quote{margin:0;padding:18px 22px;border-inline-start:3px solid var(--brand);
  background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;box-shadow:var(--sh-1);}
.cb-quote blockquote{margin:0;font-family:var(--display);font-size:clamp(16px,2vw,19px);line-height:1.6;}
.cb-quote-foot{display:flex;align-items:center;gap:10px;margin-block-start:12px;}
.cb-quote-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;}
.cb-quote-foot cite{font-style:normal;font-size:13px;font-weight:700;color:var(--muted);}

.cb-list{padding-inline-start:1.3em;line-height:1.8;color:var(--muted);}
.cb-list li{margin-block-end:5px;}
.cb-list.cb-cols-2{columns:2;column-gap:var(--gap);}
.cb-list-check{list-style:none;padding-inline-start:0;}
.cb-list-check li{position:relative;padding-inline-start:1.7em;}
.cb-list-check li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--brand-text);font-weight:700;}

.cb-note{background:var(--cb-soft);border:1px solid var(--cb-edge);border-radius:var(--r-md);
  padding:15px 18px;display:flex;flex-direction:column;gap:6px;}
.cb-note strong{font-size:14.5px;}
.cb-note p{color:var(--muted);font-size:14px;line-height:1.65;}

/* ---- pictures ---- */
.cb-image{margin:0;}
.cb-image img{width:100%;height:auto;display:block;border-radius:var(--r-md);box-shadow:var(--sh-1);}
.cb-image figcaption,.cb-gal-cell figcaption,.cb-video figcaption{
  font-size:12.5px;color:var(--muted);margin-block-start:7px;line-height:1.5;}

.cb-imagetext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(16px,3vw,32px);
  align-items:center;}
.cb-imagetext.cb-flip .cb-it-pic{order:2;}
.cb-it-pic img{width:100%;height:100%;max-height:380px;object-fit:cover;display:block;
  border-radius:var(--r-lg);box-shadow:var(--sh-1);}
.cb-it-body h3{font-family:var(--display);font-size:clamp(17px,2.2vw,22px);margin-block-end:9px;}
.cb-it-body p{color:var(--muted);line-height:1.7;margin-block-end:14px;}

.cb-gallery{display:grid;grid-template-columns:repeat(var(--cb-cols,3),minmax(0,1fr));gap:var(--gap);}
.cb-gal-cell{margin:0;}
.cb-gal-cell img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--r-md);box-shadow:var(--sh-1);transition:transform .2s;}
.cb-gal-cell a:hover img{transform:scale(1.02);}

/* A scroll-snap rail rather than scripted slides, so it works with JavaScript disabled and is
   swipeable on a phone by default. */
.cb-slideshow{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-block-end:6px;}
.cb-slideshow::-webkit-scrollbar{height:6px;}
.cb-slideshow::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.cb-slide{flex:0 0 100%;scroll-snap-align:center;min-height:var(--cb-h,360px);
  border-radius:var(--r-lg);background-size:cover;background-position:center;
  display:flex;align-items:flex-end;padding:22px;color:#fff;position:relative;overflow:hidden;}
.cb-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 35%,rgba(12,16,18,.72));}
.cb-slide-cap{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;max-width:56ch;}
.cb-slide-cap strong{font-family:var(--display);font-size:clamp(17px,2.4vw,23px);}
.cb-slide-cap span{font-size:13.5px;opacity:.9;line-height:1.55;}

.cb-video-frame{position:relative;padding-block-end:56.25%;border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-1);background:#000;}
.cb-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cb-video{margin:0;}

.cb-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,4vw,44px);padding:18px;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);}
.cb-logos img{max-height:42px;width:auto;opacity:.75;transition:opacity .16s;}
.cb-logos a:hover img{opacity:1;}

.cb-files{display:flex;flex-direction:column;gap:8px;}
.cb-file{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);transition:border-color .16s,transform .16s;}
.cb-file:hover{border-color:var(--brand-text);transform:translateX(2px);}
.cb-file-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--canvas);color:var(--brand-text);}
.cb-file-ic svg{width:18px;height:18px;}
.cb-file-txt{display:flex;flex-direction:column;gap:2px;}
.cb-file-txt strong{font-size:14px;}
.cb-file-txt span{font-size:12px;color:var(--muted);}

/* ---- layout ---- */
.cb-banner{display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:clamp(24px,5vw,52px);border-radius:var(--r-xl);background:var(--cb-bg);color:var(--cb-fg);}
.cb-banner.cb-has-image{color:#fff;}
.cb-banner h2{font-family:var(--display);font-size:clamp(22px,4vw,38px);line-height:1.2;max-width:22ch;}
.cb-banner p{font-size:clamp(14px,1.6vw,16.5px);line-height:1.65;opacity:.92;max-width:58ch;}
.cb-tone-plain.cb-banner{border:1px solid var(--line);box-shadow:var(--sh-1);}

.cb-cards{display:grid;grid-template-columns:repeat(var(--cb-cols,3),minmax(0,1fr));gap:var(--gap);}
.cb-card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;transition:transform .16s,box-shadow .16s;}
a.cb-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.cb-card-pic img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.cb-card-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px;}
.cb-card-body strong{font-size:15px;}
.cb-card-body span{font-size:13.5px;color:var(--muted);line-height:1.6;}

.cb-columns{display:grid;grid-template-columns:repeat(var(--cb-cols,2),minmax(0,1fr));gap:clamp(18px,3vw,34px);}
.cb-col h4{font-size:15.5px;margin-block-end:7px;}
.cb-col p{color:var(--muted);font-size:14px;line-height:1.7;}

.cb-faq{display:flex;flex-direction:column;gap:8px;}
.cb-faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 16px;}
.cb-faq-item summary{cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;
  display:flex;align-items:center;gap:10px;}
.cb-faq-item summary::-webkit-details-marker{display:none;}
.cb-faq-item summary::after{content:"+";margin-inline-start:auto;color:var(--brand-text);
  font-size:19px;font-weight:400;line-height:1;}
.cb-faq-item[open] summary::after{content:"–";}
.cb-faq-item p{margin-block-start:10px;color:var(--muted);font-size:14px;line-height:1.7;}

.cb-steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:s;}
.cb-step{display:flex;gap:14px;align-items:flex-start;}
.cb-step-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-fill);color:#fff;
  font-size:13.5px;font-weight:700;display:grid;place-items:center;}
.cb-step-body{display:flex;flex-direction:column;gap:3px;padding-block-start:3px;}
.cb-step-body strong{font-size:14.5px;}
.cb-step-body span{font-size:13.5px;color:var(--muted);line-height:1.65;}

.cb-timeline{list-style:none;padding:0;margin:0;border-inline-start:2px solid var(--line);
  padding-inline-start:22px;display:flex;flex-direction:column;gap:20px;}
.cb-tl-item{position:relative;display:flex;flex-direction:column;gap:3px;}
.cb-tl-item::before{content:"";position:absolute;inset-inline-start:-29px;top:5px;width:12px;height:12px;
  border-radius:50%;background:var(--brand-fill);border:2px solid var(--canvas);}
.cb-tl-when{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--brand-text);text-transform:uppercase;}
.cb-tl-item strong{font-size:14.5px;}
.cb-tl-item span:not(.cb-tl-when){font-size:13.5px;color:var(--muted);line-height:1.65;}

.cb-table-wrap{overflow-x:auto;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1);}
.cb-table{width:100%;border-collapse:collapse;font-size:14px;}
.cb-table th,.cb-table td{text-align:start;padding:11px 15px;border-block-end:1px solid var(--line);}
.cb-table th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.cb-table tr:last-child td{border-block-end:none;}

.cb-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--gap);
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px;}
.cb-fig{display:flex;flex-direction:column;gap:3px;text-align:center;}
.cb-fig-n{font-family:var(--display);font-size:clamp(24px,3.4vw,34px);line-height:1;color:var(--brand-text);}
.cb-fig-l{font-size:12.5px;color:var(--muted);font-weight:600;}

.cb-contact{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px 20px;
  display:flex;flex-direction:column;gap:11px;}
.cb-contact-row{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;}
.cb-contact-k{flex:0 0 110px;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);}
.cb-contact-v{font-size:14.5px;line-height:1.6;}
.cb-contact-v a{color:var(--brand-text);font-weight:600;}

.cb-map{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);}
.cb-map iframe{width:100%;height:100%;border:0;display:block;}

.cb-divider-line{height:1px;background:var(--line);margin-block:var(--gap);}
.cb-divider-dots{height:6px;margin-block:var(--gap);
  background:radial-gradient(circle,var(--line) 2px,transparent 2px) repeat-x center/16px 6px;}
.cb-divider-space{height:var(--gap);}

/* ---- buttons ---- */
.cb-buttons{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.cb-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;
  padding-inline:22px;border-radius:var(--pill);font-size:13.5px;font-weight:700;
  transition:transform .16s,opacity .16s;white-space:nowrap;}
.cb-btn:hover{transform:translateY(-2px);}
.cb-btn-primary{background:var(--brand-fill);color:#fff;}
.cb-btn-outline{border:1px solid currentColor;color:var(--brand-text);}
.cb-btn-plain{color:var(--brand-text);padding-inline:0;height:auto;text-decoration:underline;}
.cb-btn-light{background:#fff;color:var(--ink);}
.cb-imagetext .cb-btn,.cb-banner .cb-btn{align-self:flex-start;}

.cb-cta{display:flex;align-items:center;gap:clamp(14px,3vw,28px);flex-wrap:wrap;
  background:var(--cb-bg);color:var(--cb-fg);border-radius:var(--r-lg);padding:22px clamp(18px,3vw,30px);}
.cb-cta-txt{display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px;}
.cb-cta-txt strong{font-family:var(--display);font-size:clamp(16px,2.2vw,21px);}
.cb-cta-txt span{font-size:14px;opacity:.9;line-height:1.6;}
.cb-tone-plain.cb-cta{border:1px solid var(--line);}
.cb-tone-plain .cb-btn-light{background:var(--brand-fill);color:#fff;}

.cb-socials{display:flex;gap:9px;flex-wrap:wrap;}
.cb-social{display:inline-flex;align-items:center;height:34px;padding-inline:15px;
  border:1px solid var(--line);border-radius:var(--pill);font-size:13px;font-weight:600;
  background:var(--surface);transition:border-color .16s,color .16s;}
.cb-social:hover{border-color:var(--brand-text);color:var(--brand-text);}

/* ---- featured book / paper ---- */
.cb-feature{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(16px,3vw,28px);
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px;
  transition:transform .16s,box-shadow .16s;}
.cb-feature:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.cb-feature-cover{border-radius:var(--r-md);aspect-ratio:3/4;position:relative;overflow:hidden;}
.cb-feature-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cb-feature-body{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;}
.cb-feature-badge{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--brand-text);background:rgba(6,147,172,.09);padding:3px 11px;border-radius:var(--pill);}
.cb-feature-body strong{font-family:var(--display);font-size:clamp(17px,2.4vw,23px);line-height:1.3;}
.cb-feature-sub{font-size:14px;color:var(--muted);line-height:1.65;}
.cb-feature-who{font-size:12.5px;font-weight:600;color:var(--ink);}

/* A carousel-style publications row reuses the card grid but scrolls sideways. */
.cb-rail{display:flex !important;overflow-x:auto;scroll-snap-type:x proximity;gap:var(--gap);
  padding-block-end:6px;}
.cb-rail > *{flex:0 0 clamp(250px,26vw,300px);scroll-snap-align:start;}

@media (max-width:860px){
  .cb-imagetext{grid-template-columns:minmax(0,1fr);}
  .cb-imagetext.cb-flip .cb-it-pic{order:0;}
  .cb-gallery,.cb-cards{--cb-cols:2;}
  .cb-columns{--cb-cols:1;}
  .cb-feature{grid-template-columns:110px minmax(0,1fr);}
}
@media (max-width:560px){
  .cb-gallery,.cb-cards{--cb-cols:1;}
  .cb-list.cb-cols-2{columns:1;}
  .cb-contact-k{flex-basis:100%;}
}

/* =========================================================================
   PAGE DESIGNER — palette | page | live preview, all on /admin/pages/:id/edit
   ========================================================================= */
.designer{display:grid;grid-template-columns:250px minmax(320px,1fr) minmax(300px,1.05fr);
  gap:var(--gap);align-items:start;}
.designer-palette{position:sticky;top:86px;max-height:calc(100vh - 120px);overflow-y:auto;}
.designer-canvas,.designer-preview{background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:14px;}
.designer-preview{position:sticky;top:86px;display:flex;flex-direction:column;
  height:calc(100vh - 120px);}
.designer-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.designer-bar strong{font-size:14.5px;}
.designer-bar .hint{font-size:12px;color:var(--muted);font-weight:500;}
.designer-bar > .btn,.designer-bar > .hint:last-child{margin-inline-start:auto;}
.designer-status{font-size:12px;font-weight:600;color:var(--muted);}
.designer-status.bad{color:#B3261E;}

.designer-pinned{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--r-md);
  background:var(--canvas);border:1px dashed var(--line);margin-block:9px;}
.designer-pinned strong{font-size:13px;}
.designer-pinned span:last-child{font-size:11.5px;color:var(--muted);margin-inline-start:auto;}
.designer-pinned .pin-icon{color:var(--muted);display:grid;place-items:center;}

/* A "Half" card is shown at half width in the stack too, so the arrangement is visible without
   reading the button — and two of them in a row read as the pair they will render as. */
.bcard.width-half{width:calc(50% - 5px);display:inline-block;vertical-align:top;}
.bcard.width-half + .bcard.width-half{margin-inline-start:9px;}
.width-btn.on{background:rgba(44,46,53,.1);color:var(--ink);}

.designer-widths{display:inline-flex;gap:3px;background:var(--canvas);border-radius:var(--pill);padding:3px;}
.designer-widths .seg{border:none;background:none;border-radius:var(--pill);padding:4px 12px;
  font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;}
.designer-widths .seg.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);}
.designer-frame-wrap{flex:1;min-height:0;margin-block-start:10px;display:flex;justify-content:center;
  background:var(--canvas);border-radius:var(--r-md);overflow:hidden;}
.designer-preview iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;display:block;transition:width .2s;}
.designer-preview.is-phone iframe{width:400px;max-width:100%;}

@media (max-width:1280px){
  .designer{grid-template-columns:230px minmax(0,1fr);}
  .designer-preview{grid-column:1 / -1;position:static;height:640px;}
}
@media (max-width:900px){
  .designer{grid-template-columns:minmax(0,1fr);}
  .designer-palette{position:static;max-height:none;}
  .bcard.width-half{width:100%;display:block;}
  .bcard.width-half + .bcard.width-half{margin-inline-start:0;}
}

/* =========================================================================
   PAGE SIDEBARS (public) — a page body can have a rail either side
   ========================================================================= */
.page-shell{display:grid;gap:var(--gap);padding:0 var(--pad);margin-block-start:var(--gap);
  align-items:start;grid-template-columns:minmax(0,1fr);}
.page-shell.has-left{grid-template-columns:var(--side) minmax(0,1fr);}
.page-shell.has-right{grid-template-columns:minmax(0,1fr) var(--side);}
.page-shell.has-left.has-right{grid-template-columns:var(--side) minmax(0,1fr) var(--side);}
.page-shell .page-main{min-width:0;display:flex;flex-direction:column;gap:var(--gap);}
/* Inner sections already carry the page gutter, so it is removed inside the shell to stop the
   padding doubling up against the rails. */
.page-shell .page-main > .section,.page-shell .page-rail > .section{padding-inline:0;margin-block-start:0;}
.page-shell .page-main > .section-pair{padding-inline:0;margin-block-start:0;}
.page-rail{position:sticky;top:86px;display:flex;flex-direction:column;gap:var(--gap);min-width:0;}
.page-rail .cb-heading h2{font-size:15px;}
.page-rail .cb-cards,.page-rail .cb-gallery,.page-rail .cb-columns{--cb-cols:1;}
.page-rail .grid-cards{grid-template-columns:minmax(0,1fr);}
@media (max-width:1024px){
  .page-shell,.page-shell.has-left,.page-shell.has-right,.page-shell.has-left.has-right{
    grid-template-columns:minmax(0,1fr);}
  .page-rail{position:static;}
}

/* =========================================================================
   PAGE DESIGNER REGIONS (admin)
   ========================================================================= */
.designer-regions{display:grid;gap:9px;align-items:start;grid-template-columns:minmax(0,1fr);}
.designer-regions:has(.region-left:not([hidden])){grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr);}
.designer-regions:has(.region-right:not([hidden])){grid-template-columns:minmax(0,1.6fr) minmax(0,.62fr);}
.designer-regions:has(.region-left:not([hidden])):has(.region-right:not([hidden])){
  grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr) minmax(0,.62fr);}
.region-left{order:1;} .region-main{order:2;} .region-right{order:3;}
.designer-region{border:1.5px solid transparent;border-radius:var(--r-md);padding:8px;
  background:var(--canvas);min-width:0;transition:border-color .16s,background .16s;}
.designer-region.is-active{border-color:rgba(6,147,172,.4);background:var(--surface);}
.designer-region[hidden]{display:none;}
.region-head{display:flex;align-items:baseline;gap:8px;margin-block-end:7px;padding-inline:3px;}
.region-name{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.designer-region.is-active .region-name{color:var(--brand-text);}
.region-head .hint{font-size:11.5px;color:var(--muted);}
.region-empty{padding:16px;font-size:12.5px;}
.designer-check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--muted);cursor:pointer;}
.designer-check input{width:auto;}

/* =========================================================================
   BLOCKS GUIDE (admin)
   ========================================================================= */
.guide-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-block-end:14px;}
.guide-note{padding:16px 18px;}
.guide-note strong{font-size:14.5px;}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--gap);}
.guide-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:15px 16px;
  display:flex;flex-direction:column;gap:9px;}
.guide-card[hidden]{display:none;}
.guide-card.is-system{border:1px solid rgba(91,96,184,.3);}
.guide-head{display:flex;align-items:flex-start;gap:10px;}
.guide-name{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.guide-name strong{font-size:14.5px;}
.guide-group{font-size:11px;color:var(--muted);font-weight:600;}
.guide-blurb{font-size:13px;color:var(--muted);line-height:1.6;margin:0;}
.guide-row{font-size:12.5px;display:flex;gap:6px;flex-wrap:wrap;}
.guide-row b{font-weight:700;}
.guide-row span{color:#2B2E63;font-weight:600;}
.guide-dim{color:var(--muted);font-size:12px;}
.guide-fields summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--brand-text);}
.guide-fields ul{margin:8px 0 0;padding-inline-start:1.2em;font-size:12.5px;color:var(--muted);line-height:1.7;}
.guide-used{margin-block-start:auto;padding-block-start:9px;border-block-start:1px solid var(--line);
  font-size:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;}
.guide-used a{color:var(--brand-text);font-weight:600;}
.guide-sections{display:flex;gap:8px;flex-wrap:wrap;}
.guide-chip{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:var(--r-md);
  padding:9px 14px;background:var(--canvas);transition:border-color .16s;}
.guide-chip:hover{border-color:var(--brand-text);}
.guide-chip strong{font-size:13.5px;}
.guide-chip span{font-size:11.5px;color:var(--muted);}
.guide-chip-new{justify-content:center;color:var(--brand-text);font-weight:700;font-size:13.5px;
  border-style:dashed;}

/* =========================================================================
   READERSHIP (admin) — /admin/statistics
   ========================================================================= */
.stat-empty{border:1px dashed var(--line);box-shadow:none;background:var(--canvas);}
.stat-empty strong{font-size:14.5px;}

.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--gap);
  margin-block-end:18px;}
.stat-tile{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px 18px;
  display:flex;flex-direction:column;gap:3px;}
.stat-n{font-family:var(--display);font-size:clamp(24px,3vw,32px);line-height:1.1;color:var(--ink);}
.stat-of{font-size:15px;color:var(--muted);margin-inline-start:4px;}
.stat-l{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px;
  flex-wrap:wrap;}
.stat-delta{font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:var(--pill);}
.stat-delta.up{color:#20463A;background:rgba(78,143,122,.18);}
.stat-delta.down{color:#B3261E;background:rgba(179,38,30,.12);}

/* ---- daily bars ---- */
.stat-chart{display:flex;align-items:flex-end;gap:2px;height:150px;margin-block-start:12px;
  padding:8px;background:var(--canvas);border-radius:var(--r-md);}
.stat-bar{position:relative;flex:1;min-width:2px;height:100%;display:flex;align-items:flex-end;
  justify-content:center;}
.stat-bar-v,.stat-bar-u{position:absolute;bottom:0;width:100%;border-radius:3px 3px 0 0;}
.stat-bar-v{background:rgba(6,147,172,.28);}
.stat-bar-u{background:var(--brand-fill);width:52%;}
.stat-bar:hover .stat-bar-v{background:rgba(6,147,172,.45);}
.stat-axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
  margin-block-start:6px;font-weight:600;}

/* ---- ranked lists ---- */
.stat-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--gap);}
.stat-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:2px;}
.stat-list li{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--r-md);font-size:13.5px;min-width:0;}
.stat-list li:hover{background:rgba(44,46,53,.03);}
.stat-list a{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  position:relative;flex:1;min-width:0;}
.stat-list a:hover{color:var(--brand-text);}
.stat-list b{margin-inline-start:auto;font-size:13.5px;position:relative;flex:none;}
.stat-rank{flex:none;width:21px;height:21px;border-radius:50%;background:var(--canvas);
  color:var(--muted);font-size:11px;font-weight:700;display:grid;place-items:center;position:relative;}
.stat-dim{color:var(--muted);font-size:12px;position:relative;flex:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32%;}
.stat-bar-bg{position:absolute;inset-block:0;inset-inline-start:0;background:rgba(6,147,172,.09);
  border-radius:var(--r-md);}
.stat-list-bars li:first-child .stat-rank{background:var(--brand-fill);color:#fff;}
.stat-list-wide li{font-size:13px;}

/* ---- search terms ---- */
.stat-terms{display:flex;flex-wrap:wrap;gap:7px;margin-block-start:12px;}
.stat-term{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:var(--pill);padding:5px 13px;font-size:13px;background:var(--canvas);
  transition:border-color .16s;}
.stat-term:hover{border-color:var(--brand-text);}
.stat-term b{font-size:11.5px;color:var(--brand-text);}

@media (max-width:700px){
  .stat-dim{display:none;}
  .stat-chart{height:110px;}
}

/* ---- readership: document table toolbar + pager ---- */
.stat-table-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block:12px 4px;}
.stat-table-bar .builder2-search{max-width:380px;margin-block-end:0;}
.stat-found{font-size:12.5px;color:var(--muted);font-weight:600;}
#docPager{margin-block-start:12px;}
.pager-gap{padding-inline:4px;color:var(--muted);font-size:13px;align-self:center;}

/* =========================================================================
   No authored image may be wider than the column it sits in. The rich-text
   editor inserts pictures at whatever the original file measured, so without
   this a 2000px book cover pushes the whole page sideways.
   Specific rules (.book img, .cb-feature-cover img) still win on specificity.
   ========================================================================= */
img,video,iframe{max-width:100%;}
.art-body img,.cb-rich img,.panel img,[data-lang-block] img,.admin-form img{height:auto;}
.art-body img,[data-lang-block] img{display:block;border-radius:var(--r-md);margin-block:14px;}
.art-body figure,[data-lang-block] figure{margin:14px 0;}
.art-body figure img{margin-block:0;}
.art-body figcaption{font-size:13px;color:var(--muted);margin-block-start:7px;line-height:1.5;}
/* A picture dropped into an article body with an inline width from the editor must still shrink
   on a narrow screen rather than keeping its typed pixel width. */
.art-body img[width],[data-lang-block] img[width],.cb-rich img[width]{width:auto !important;}

/* =========================================================================
   RECORD FORM — grouped panels (publications, researchers)
   ========================================================================= */
.form-panel{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  margin-block-end:12px;}
.form-panel-head{display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  background:none;border:none;padding:15px 18px;cursor:pointer;font:inherit;color:inherit;
  transition:background .14s;}
.form-panel-head:hover{background:rgba(44,46,53,.03);}
.form-panel-mark{flex:none;width:22px;height:22px;border-radius:7px;background:var(--canvas);
  position:relative;transition:background .16s;}
.form-panel-mark::before,.form-panel-mark::after{content:"";position:absolute;inset-inline-start:50%;
  inset-block-start:50%;background:var(--muted);border-radius:1px;transform:translate(-50%,-50%);
  transition:transform .18s,opacity .18s;}
.form-panel-mark::before{width:9px;height:1.8px;}
.form-panel-mark::after{width:1.8px;height:9px;}
.form-panel.open .form-panel-mark{background:rgba(6,147,172,.1);}
.form-panel.open .form-panel-mark::before{background:var(--brand-fill);}
.form-panel.open .form-panel-mark::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}
.form-panel-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.form-panel-txt strong{font-size:15px;}
.form-panel-txt span{font-size:12.5px;color:var(--muted);line-height:1.5;}
.form-panel-txt a{color:var(--brand-text);font-weight:600;}
.form-panel-count{flex:none;font-size:11.5px;font-weight:700;color:var(--muted);
  background:var(--canvas);border-radius:var(--pill);padding:3px 10px;}
.form-panel-body{padding:0 18px 18px;}
.form-panel:not(.open) .form-panel-body{display:none;}
/* A resource with too few fields to need panels keeps its plain card. */
.form-panel:not(:has(.form-panel-head)) .form-panel-body{padding:18px;}
.form-panel .fields-grid{margin-block-start:0;}
.form-panel .field:first-child{margin-block-start:4px;}

/* ---- sticky save bar ---- */
.form-actions-sticky{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;
  background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:12px 16px;margin-block-start:14px;box-shadow:var(--sh-2);}

@media (max-width:640px){
  .form-panel-head{padding:13px 14px;}
  .form-panel-body{padding:0 14px 14px;}
  .form-panel-txt span{display:none;}
}

/* =========================================================================
   COVER FITTING
   A book cover is a designed object — a title, an author, a publisher's mark,
   laid out to be read. Cropping one to fill a frame cuts the words off, so a
   book is shown whole inside its 2:3 shape with its own gradient behind the
   letterboxing. A research paper's picture is a photograph or an illustration
   with no such geometry to protect, so that one fills its frame instead.
   ========================================================================= */
.book img,
.admin-book img,
.cb-feature-cover img{object-fit:contain;}
/* A featured research paper is a picture, not a cover: it fills. */
.cb-feature-cover.is-paper img{object-fit:cover;}

/* Nothing shows around a filled cover, but the record's gradient is still what sits behind one
   that has not loaded yet. */
.book,.admin-book,.cb-feature-cover{background-color:transparent;}

/* The wash word and title printed on a generated cover would show through a
   letterboxed real cover, so they are hidden once a picture is present. */
.book:has(img) .c-wash,
.book:has(img) .c-pub,
.book:has(img) .c-title,
.book:has(img) .c-author,
.admin-book:has(img) .ab-title{opacity:0;}

/* Admin cover picker: same reasoning, so what an editor sees while uploading
   matches what the site will show. */
/* The preview shows what the reader gets: the whole cover, letterboxed in its frame. */
.photo-upload-preview-cover{background-size:contain;background-repeat:no-repeat;background-position:center;}

/* =========================================================================
   PAGE EDITOR — tabs, sidebar slots, tidier toolbars
   ========================================================================= */
.pagetabs{display:flex;align-items:center;gap:6px;margin-block-end:14px;
  border-block-end:1px solid var(--line);padding-block-end:0;}
.pagetab{border:none;background:none;font:inherit;font-size:14px;font-weight:700;
  color:var(--muted);padding:9px 14px;cursor:pointer;border-radius:var(--r-md) var(--r-md) 0 0;
  border-block-end:2px solid transparent;margin-block-end:-1px;transition:color .14s,border-color .14s;}
.pagetab:hover{color:var(--ink);}
.pagetab.on{color:var(--brand-text);border-block-end-color:var(--brand-text);}
.pagetabs .designer-status{margin-inline-start:auto;padding-inline-end:4px;}

/* ---- sidebar placeholders ---- */
.region-add{flex:none;width:96px;align-self:stretch;min-height:150px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--line);
  border-radius:var(--r-md);background:none;cursor:pointer;color:var(--muted);font:inherit;
  font-size:11.5px;font-weight:600;line-height:1.35;text-align:center;padding:10px 6px;
  transition:border-color .16s,color .16s,background .16s;}
.region-add:hover{border-color:var(--brand-text);color:var(--brand-text);background:rgba(6,147,172,.04);}
.region-add[hidden]{display:none;}
.region-add span:first-child{font-size:20px;font-weight:300;line-height:1;}
.region-drop{margin-inline-start:auto;border:none;background:none;cursor:pointer;color:var(--muted);
  font-size:17px;line-height:1;padding:0 3px;border-radius:5px;transition:color .14s,background .14s;}
.region-drop:hover{color:#B3261E;background:rgba(179,38,30,.1);}

/* The regions row now also holds the two placeholders, so it is a flex row rather than a grid
   with fixed columns — each real region takes the space its placeholder gives up. */
.designer-regions{display:flex;gap:9px;align-items:stretch;}
.designer-regions .designer-region{min-width:0;}
.designer-regions .region-main{flex:1 1 auto;}
.designer-regions .region-left,.designer-regions .region-right{flex:0 1 27%;min-width:150px;}
.region-left{order:1;} .region-add[data-add="left"]{order:0;}
.region-main{order:2;}
.region-right{order:3;} .region-add[data-add="right"]{order:4;}
/* A publication template: the body is the publication itself, shown for orientation only. */
.designer-region.region-locked{border:1.5px dashed var(--line);background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(20,26,29,.025) 10px 20px);cursor:default;}
.region-locked .builder2-empty{margin:10px 4px;}
/* Fixed parts of a system page: in their real column, locked, and plainly not blocks you placed. */
.fixed-stack{display:flex;flex-direction:column;gap:6px;}
.bcard-fixed{border-style:dashed;background:transparent;}
.bcard-fixed .bcard-head{cursor:default;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(20,26,29,.025) 10px 20px);}
.bcard-fixed .bcard-head:hover{background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(20,26,29,.025) 10px 20px);}
.bcard-fixed .bcard-head:hover .bcard-sum{color:var(--muted);}
.bcard-fixed .bcard-ic{color:var(--muted);}
.bcard-fixed .bcard-sum{white-space:normal;}
.fixed-kind{flex:none;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--canvas);padding:2px 8px;border-radius:var(--pill);}
.fixed-then{margin:10px 2px 6px;font-size:11.5px;font-weight:600;color:var(--muted);}

/* ---- small icon buttons in the preview bar ---- */
.icon-btn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;
  transition:border-color .14s,color .14s;}
.icon-btn:hover{border-color:var(--brand-text);color:var(--brand-text);}
.designer-preview .designer-bar > .designer-widths{margin-inline-start:auto;}

/* =========================================================================
   FOLDING — palette groups, page regions, whole columns
   ========================================================================= */

/* A caret that points right when folded and down when open, used everywhere
   something collapses in the designer. */
.pal-caret{flex:none;width:8px;height:8px;border-inline-end:1.8px solid currentColor;
  border-block-end:1.8px solid currentColor;transform:rotate(-45deg);
  transition:transform .18s;margin-inline-end:2px;}
.pal-group.open > .pal-group-head .pal-caret,
.designer-region:not(.folded) .region-fold .pal-caret{transform:rotate(45deg);}

/* ---- palette groups ---- */
.pal-group{border-block-end:1px solid var(--line);}
.pal-group:last-child{border-block-end:none;}
.pal-group-head{display:flex;align-items:center;gap:8px;width:100%;text-align:start;
  background:none;border:none;font:inherit;cursor:pointer;padding:10px 4px;color:var(--muted);
  transition:color .14s;}
.pal-group-head:hover{color:var(--ink);}
.pal-group-name{flex:1;min-width:0;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pal-group-n{flex:none;font-size:11px;font-weight:700;background:var(--canvas);
  border-radius:var(--pill);padding:2px 8px;}
.pal-group.open > .pal-group-head{color:var(--ink);}
.pal-group.open > .pal-group-head .pal-group-n{background:rgba(6,147,172,.1);color:var(--brand-text);}
.pal-group-body{display:flex;flex-direction:column;gap:1px;padding-block-end:8px;}
.pal-group:not(.open) .pal-group-body{display:none;}

/* ---- region folding ---- */
.region-fold{flex:none;border:none;background:none;cursor:pointer;color:var(--muted);
  padding:3px 4px;border-radius:5px;display:grid;place-items:center;transition:color .14s,background .14s;}
.region-fold:hover{color:var(--brand-text);background:rgba(6,147,172,.08);}
.designer-region.folded .builder2-list,
.designer-region.folded .region-empty,
.designer-region.folded .fixed-stack,
.designer-region.folded .fixed-then{display:none;}
.designer-region.folded{padding-block-end:8px;}
.designer-region.folded .region-head{margin-block-end:0;}

/* ---- whole columns ---- */
.pane-toggles{display:inline-flex;gap:4px;margin-inline-start:12px;align-self:center;
  margin-block-end:6px;}
.pane-toggle{border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);
  padding:4px 12px;font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all .14s;}
.pane-toggle::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--line);
  transition:background .14s;}
.pane-toggle.on{color:var(--ink);border-color:rgba(6,147,172,.35);}
.pane-toggle.on::before{background:var(--brand-fill);}
.designer.no-palette .designer-palette{display:none;}
.designer.no-preview .designer-preview{display:none;}
.designer.no-palette{grid-template-columns:minmax(320px,1fr) minmax(300px,1.05fr);}
.designer.no-preview{grid-template-columns:250px minmax(0,1fr);}
.designer.no-palette.no-preview{grid-template-columns:minmax(0,1fr);}

@media (max-width:1280px){
  .designer.no-palette,.designer.no-preview,.designer.no-palette.no-preview{
    grid-template-columns:minmax(0,1fr);}
  .designer.no-palette .designer-canvas,.designer.no-preview .designer-canvas{grid-column:1 / -1;}
}

/* =========================================================================
   COLLAPSIBLE ADMIN MENU
   ========================================================================= */
/* The icon-rail styles that used to live here went with the in-sidebar collapse button:
   the menu is now hidden outright and reopened from the dots beside the logo. */

/* =========================================================================
   FRIENDLIER COLLAPSING everywhere it appears
   ========================================================================= */

/* Collapsing is a plain show/hide.
   An earlier version animated these with the grid 0fr/1fr trick, which was simply wrong here:
   that technique only collapses a container holding ONE child, and every one of these holds
   many — a button per block, a card per item, a field per setting. Only the first row
   collapsed and the rest stayed put, so the groups looked like they would not close. */
.pal-group:not(.open) .pal-group-body{display:none;}
.form-panel:not(.open) .form-panel-body{display:none;}
.designer-region.folded .builder2-list,
.designer-region.folded .region-empty{display:none;}

/* A folded region says what is inside it rather than just disappearing. */
.designer-region.folded .region-head::after{content:attr(data-folded-note);font-size:11.5px;
  color:var(--muted);font-weight:600;margin-inline-start:8px;}

/* Bigger, more obvious hit areas on every fold control. */
.pal-group-head,.form-panel-head,.region-fold,.sidebar-collapse{-webkit-tap-highlight-color:transparent;}
.region-fold{width:26px;height:26px;}
.pal-group-head:focus-visible,.form-panel-head:focus-visible,.region-fold:focus-visible,
.pane-toggle:focus-visible,.sidebar-collapse:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* "Open all / close all" for the palette, so twenty blocks are one click away again. */
.pal-allbtn{border:none;background:none;font:inherit;font-size:11.5px;font-weight:700;
  color:var(--brand-text);cursor:pointer;padding:2px 4px;border-radius:5px;}
.pal-allbtn:hover{background:rgba(6,147,172,.08);}

/* =========================================================================
   MENU PUT AWAY COMPLETELY — the sidebar goes, the dots beside the logo
   bring it back. (Replaces the earlier icon-rail behaviour.)
   ========================================================================= */

body.nav-collapsed .admin-sidebar{display:none;}
body.nav-collapsed .admin-shell{padding-inline:var(--pad);}
/* Peeking at the menu from a screen where it is hidden for room, not by preference. */
html.nav-collapsed-boot .admin-sidebar{display:none;}

/* =========================================================================
   DESIGN MODE — the designer gets the window, with almost no chrome
   ========================================================================= */
body.design-mode .admin-sidebar{display:none;}
body.design-mode .admin-shell{padding:0 10px;gap:0;}
body.design-mode .admin-main{padding:8px 0 12px;}
body.design-mode .top-actions{margin-block-end:6px;padding-block-start:4px;}
body.design-mode .top-actions h1{font-size:17px;}
body.design-mode .top-actions .admin-sub{display:none;}
body.design-mode .pagetabs{margin-block-end:8px;}
body.design-mode .designer{gap:10px;}
body.design-mode .designer-palette,
body.design-mode .designer-canvas,
body.design-mode .designer-preview{padding:10px;border-radius:var(--r-md);}
body.design-mode .designer-palette,
body.design-mode .designer-preview{top:64px;max-height:calc(100vh - 78px);height:calc(100vh - 78px);}
body.design-mode .designer-preview{height:calc(100vh - 78px);}
body.design-mode .designer-pinned{padding:6px 10px;margin-block:6px;}
body.design-mode .designer-pinned span:last-child{display:none;}
body.design-mode .designer-region{padding:6px;}

/* =========================================================================
   BLOCK CARDS — drag only, settings in the dialog, nothing else on the row
   ========================================================================= */
.bcard-head{cursor:pointer;}
.bcard-grip{cursor:grab;font-size:15px;padding:2px 4px;border-radius:5px;}
.bcard-grip:hover{background:rgba(44,46,53,.06);color:var(--ink);}
.bcard-grip:active{cursor:grabbing;}
/* The whole row is a settings button, so it says so on hover. */
.bcard-head:hover{background:rgba(6,147,172,.05);}
.bcard-head:hover .bcard-sum{color:var(--brand-text);}
.bcard-actions{opacity:0;transition:opacity .14s;}
.bcard:hover .bcard-actions,.bcard:focus-within .bcard-actions{opacity:1;}
.bcard.dragging{opacity:.4;outline:2px dashed var(--brand);}

/* =========================================================================
   BLOCK SETTINGS DIALOG
   ========================================================================= */
.bdlg-backdrop{position:fixed;inset:0;background:rgba(44,46,53,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:70;
  display:none;align-items:center;justify-content:center;padding:20px;}
.bdlg-backdrop.open{display:flex;}
.bdlg{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  width:min(680px,100%);max-height:min(88vh,880px);display:flex;flex-direction:column;
  overflow:hidden;animation:bdlgIn .16s ease;}
@keyframes bdlgIn{from{opacity:0;transform:translateY(8px) scale(.99);}to{opacity:1;transform:none;}}
.bdlg-head{display:flex;align-items:center;gap:11px;padding:15px 18px;
  border-block-end:1px solid var(--line);flex:none;}
.bdlg-head strong{font-size:15.5px;flex:1;min-width:0;}
.bdlg-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--canvas);color:var(--brand-text);}
.bdlg-x{border:none;background:none;font-size:24px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 6px;border-radius:6px;transition:color .14s,background .14s;}
.bdlg-x:hover{color:#B3261E;background:rgba(179,38,30,.1);}
.bdlg-body{padding:4px 18px 18px;overflow-y:auto;flex:1;min-height:0;}
.bdlg-body .bfield:first-child{margin-block-start:14px;}
.bdlg-foot{display:flex;justify-content:flex-end;gap:10px;padding:13px 18px;
  border-block-start:1px solid var(--line);background:var(--canvas);flex:none;}

@media (max-width:900px){
  body.design-mode .designer-palette,body.design-mode .designer-preview{
    height:auto;max-height:none;position:static;}
  .bdlg{max-height:94vh;}
}

/* =========================================================================
   MENU: the dots are the only control, so they show their state
/* The dots are always present now, not only while the menu is away. */

/* =========================================================================
   BLOCK SETTINGS DIALOG — wider, and laid out rather than stacked
   ========================================================================= */
.bdlg{width:min(940px,100%);}
.bdlg-body{padding:0 22px 20px;}
.bdlg-sec{padding-block-start:18px;}
.bdlg-sec + .bdlg-sec{border-block-start:1px solid var(--line);margin-block-start:4px;}
.bdlg-sec-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 2px;}
.bdlg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;}
.bdlg-grid > .span2,.bdlg-grid > .bdlg-pair{grid-column:1 / -1;}
/* English and Arabic side by side: one decision made twice, easier to compare than to scroll. */
.bdlg-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;}
.bdlg-pair .bfield{margin-block-start:14px;}
.bdlg .brepeat{margin-block-start:0;}
.bdlg .brepeat-body{grid-template-columns:repeat(2,minmax(0,1fr));}
.bdlg .brich-frame{height:240px;}
.bdlg-head{position:sticky;top:0;background:var(--surface);z-index:2;}
.bdlg-foot{position:sticky;bottom:0;}

@media (max-width:760px){
  .bdlg-grid,.bdlg-pair,.bdlg .brepeat-body{grid-template-columns:minmax(0,1fr);}
  .bdlg-body{padding-inline:16px;}
}

/* =========================================================================
   PREVIEW PANE — responsive. When the column is narrow the labelled controls
   become icons, so the header never wraps onto two lines or clips.
   ========================================================================= */
.designer-preview{container-type:inline-size;container-name:previewpane;}
.designer-widths .seg .seg-ic{display:none;}
.designer-widths .seg svg{width:14px;height:14px;display:block;}

@container previewpane (max-width: 420px){
  .designer-preview .designer-bar > strong{display:none;}
  .designer-widths .seg .seg-txt{display:none;}
  .designer-widths .seg .seg-ic{display:block;}
  .designer-widths .seg{padding:5px 9px;}
  .designer-preview .designer-bar{gap:6px;}
}
/* Browsers without container queries still get the same behaviour from the viewport. */
@supports not (container-type: inline-size){
  @media (max-width:1150px){
    .designer-preview .designer-bar > strong{display:none;}
    .designer-widths .seg .seg-txt{display:none;}
    .designer-widths .seg .seg-ic{display:block;}
    .designer-widths .seg{padding:5px 9px;}
  }
}

/* =========================================================================
   The whole page editor keeps the menu away, not just the Design tab —
   switching to Name & address should not make it reappear under you.
   ========================================================================= */
body.editor-mode .admin-sidebar{display:none;}
body.editor-mode .admin-shell{padding-inline:var(--pad);}
body.editor-mode.design-mode .admin-shell{padding:0 10px;}

/* =========================================================================
   LESS TEXT — the palette is a list of names, not of paragraphs
   ========================================================================= */
.palette-item{align-items:center;gap:9px;padding:6px 8px;}
.palette-item strong{font-size:13px;font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.palette-ic{width:26px;height:26px;border-radius:8px;}
.palette-ic svg{width:15px;height:15px;}
.pal-group-head{padding:8px 4px;}
.pal-group-body{gap:0;}

/* ---- block rows: one line, name + gist, everything else on hover ---- */
.bcard-head{padding:8px 10px;gap:8px;}
.bcard-ic{width:24px;height:24px;border-radius:7px;}
.bcard-ic svg{width:14px;height:14px;}
.bcard-txt strong{font-size:13px;}
.bcard-sum{font-size:11.5px;}
.bcard-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line);}
.bcard-dot.live{background:#5B60B8;}
.bcard-dot.saved{background:#4E8F7A;}
.builder2-empty{padding:14px;font-size:12.5px;}
.region-head{gap:6px;}
.region-name{font-size:11px;}
.region-add{width:74px;min-height:120px;font-size:11px;padding:8px 4px;}

/* =========================================================================
   RESPONSIVE — the designer answers to its own width, not the window's
   ========================================================================= */
.designer{container-type:inline-size;container-name:designer;}

@container designer (max-width: 620px){
  /* The gist of a block goes, not the controls: the width button is the one action with no
     other home — duplicate and delete are also on the block dialog, half/full is not. */
  .bcard-sum{display:none;}
}

/* The palette column answers to its own width too, so a folded preview does not
   leave it wrapping names it has room for. */
.designer-palette{container-type:inline-size;container-name:palbox;}
@container palbox (max-width: 190px){
  .palette-item strong{font-size:12.5px;}
  .pal-group-n{display:none;}
}

@media (max-width:900px){
  body.editor-mode .admin-sidebar{display:none;}
  body.editor-mode .admin-sidebar.open{display:flex;}
}


/* The menu control: just the glyph. It leads the bar (order:-1) so it sits against the start
   edge — left in English, right in Arabic. No box, no fill, no active colour: it is one of
   three things in the corner and does not need to compete with the logo. */
.nav-dots{order:-1;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:none;border:none;background:none;padding:0;
  margin-inline:0 2px;color:var(--nav-muted);cursor:pointer;transition:color .14s;}
.nav-dots:hover{color:var(--nav-ink);}
.nav-dots:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px;}

/* =========================================================================
   ONE MENU CONTROL. Where the layout has room the menu is a column; where it
   does not — a phone, or the page editor — the same control floats it over
   the page with a scrim, so opening it never reflows what you were reading.
   ========================================================================= */
body.nav-float .admin-sidebar{position:fixed;z-index:60;inset-block:0;inset-inline-start:0;
  top:0;width:min(280px,86vw);max-height:none;border-radius:0;padding:14px;
  display:flex;transform:none;box-shadow:var(--sh-3);}
body.nav-float .admin-sidebar .nav-label,
body.nav-float .nav-section-label{display:block;}
body.nav-float .admin-sidebar a,body.nav-float .admin-sidebar .logout-btn{
  justify-content:flex-start;padding-inline:12px;gap:12px;}
body.nav-float .admin-sidebar a::after{display:none;}
/* The drawer close button is only meaningful while the menu is floating. */
body.nav-float .admin-drawer-close{display:grid;place-items:center;}

/* Where the block being picked will land. Quiet, but it answers the one question the palette
   could not: which of the three regions am I adding to. */
.pal-target{margin:0 0 8px;font-size:11.5px;color:var(--muted);}
.pal-target b{color:var(--brand-text);font-weight:700;}

/* Reordering is drag-first, but the grip also takes focus and the arrow keys. */
.bcard-grip:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:5px;}

/* =========================================================================
   SLIDESHOW — arrows, dots and a timer on top of the scroll-snap rail.
   The controls are hidden until site.js marks the block ready, so with
   scripting off nobody is shown buttons that cannot do anything; the rail
   still scrolls, snaps and swipes on its own.
   ========================================================================= */
.cb-show{position:relative;}
.cb-show .cb-slideshow{scroll-behavior:smooth;}
.cb-show .cb-slideshow:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-lg);}

.cb-show-nav{display:none;position:absolute;top:calc(50% - 20px);z-index:2;
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--sh-2);
  align-items:center;justify-content:center;transition:background .14s,transform .14s,opacity .14s;}
.cb-show[data-ready] .cb-show-nav{display:flex;}
.cb-show-nav svg{width:18px;height:18px;}
.cb-show-nav:hover{background:#fff;transform:scale(1.06);}
.cb-show-prev{inset-inline-start:12px;}
.cb-show-next{inset-inline-end:12px;}
/* The arrows point the way the language runs. */
html[dir="rtl"] .cb-show-nav svg{transform:scaleX(-1);}

.cb-show-dots{display:none;position:absolute;inset-inline:0;bottom:12px;z-index:2;
  justify-content:center;gap:7px;}
.cb-show[data-ready] .cb-show-dots{display:flex;}
.cb-show-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);transition:background .16s,width .16s;}
.cb-show-dot:hover{background:rgba(255,255,255,.8);}
.cb-show-dot.on{background:#fff;width:22px;border-radius:4px;}
.cb-show-dot:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* The caption sits above the dots rather than under them. */
.cb-show .cb-slide{padding-block-end:34px;}

@media (max-width:560px){
  /* A thumb does the scrolling here; the arrows would only cover the picture. */
  .cb-show[data-ready] .cb-show-nav{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .cb-show .cb-slideshow{scroll-behavior:auto;}
}

/* =========================================================================
   DESIGNER RESPONSIVENESS
   Three columns that give way one at a time, and left/right region panels
   that answer to the canvas they sit in rather than to the window — folding
   the preview away widens the canvas, so the sidebars come back beside the
   body even though the window itself never changed size.
   ========================================================================= */

/* Fluid columns. The palette and the preview each give ground gradually,
   rather than holding a fixed width until a breakpoint takes the whole
   column away in one step. */
.designer{grid-template-columns:clamp(190px,17vw,250px) minmax(0,1.15fr) minmax(0,1fr);}
.designer.no-preview{grid-template-columns:clamp(190px,17vw,250px) minmax(0,1fr);}
.designer.no-palette{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.designer.no-palette.no-preview{grid-template-columns:minmax(0,1fr);}

/* Sticky columns are measured against the visual viewport where there is one,
   so a phone's disappearing browser chrome does not leave the designer short
   by the height of a toolbar that is not on screen. */
@supports (height:100dvh){
  .designer-palette{max-height:calc(100dvh - 120px);}
  .designer-preview{height:calc(100dvh - 120px);}
  body.design-mode .designer-palette{max-height:calc(100dvh - 78px);height:calc(100dvh - 78px);}
  body.design-mode .designer-preview{height:calc(100dvh - 78px);}
}

/* First to give: the preview drops under the page it is previewing, and takes
   a share of the window rather than a fixed 640px that can be taller than the
   screen it is sitting on. */
@media (max-width:1280px){
  .designer,.designer.no-preview{grid-template-columns:clamp(180px,22vw,230px) minmax(0,1fr);}
  .designer-preview,body.design-mode .designer-preview{
    height:clamp(360px,56vh,660px);max-height:none;}
}

/* Then the palette. It stops being a sticky rail and becomes a capped panel
   above the page — capped, because an uncapped list of every block available
   pushes the page being designed off the bottom of the screen. */
@media (max-width:1040px){
  .designer,.designer.no-preview,.designer.no-palette,.designer.no-palette.no-preview{
    grid-template-columns:minmax(0,1fr);}
  .designer-palette,body.design-mode .designer-palette{
    position:static;height:auto;max-height:min(45vh,400px);}
  .designer-canvas{grid-column:1 / -1;}
}

/* Phone. The tabs scroll sideways instead of stacking into three rows of
   chrome above a designer that then has no room left. */
@media (max-width:640px){
  body.design-mode .admin-shell{padding-inline:6px;}
  .designer-preview,body.design-mode .designer-preview{height:clamp(320px,52vh,520px);}
  .pagetabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .pagetabs::-webkit-scrollbar{display:none;}
  .pagetab,.pagetabs .designer-status,.pane-toggles{flex:none;}
  .pane-toggles{margin-inline-start:8px;}
  .designer-bar{gap:7px;}
  .icon-btn{width:34px;height:34px;}
}

/* Actions that only appear on hover are actions that do not exist on a touch
   screen, so there they are simply always there. */
@media (hover:none){
  .bcard-actions{opacity:1;}
}

/* ---- the left and right region panels, sized by the canvas ---- */
.designer-canvas{container-type:inline-size;container-name:canvas;}
.designer-regions .region-left,.designer-regions .region-right{flex:0 1 27%;min-width:0;}

/* Two sidebars need more room than one before they are worth keeping beside
   the body: under this the body would be the narrowest of the three columns,
   which is backwards. */
@container canvas (max-width: 900px){
  .designer-regions:has(.region-left:not([hidden])):has(.region-right:not([hidden])){flex-wrap:wrap;}
  .designer-regions:has(.region-left:not([hidden])):has(.region-right:not([hidden])) .region-left,
  .designer-regions:has(.region-left:not([hidden])):has(.region-right:not([hidden])) .region-right{
    flex:1 1 100%;}
}
@container canvas (max-width: 720px){
  .designer-regions{flex-wrap:wrap;}
  .designer-regions .region-left,.designer-regions .region-right{flex:1 1 100%;}
  .region-add{width:100%;min-height:46px;align-self:auto;flex-direction:row;gap:9px;}
  .region-add span:last-child br{display:none;}
}
@container canvas (max-width: 430px){
  .bcard.width-half{width:100%;display:block;}
  .bcard.width-half + .bcard.width-half{margin-inline-start:0;}
}

/* Where there are no container queries the window stands in for the canvas. */
@supports not (container-type: inline-size){
  @media (max-width:1040px){
    .designer-regions{flex-wrap:wrap;}
    .designer-regions .region-left,.designer-regions .region-right{flex:1 1 100%;}
    .region-add{width:100%;min-height:46px;align-self:auto;flex-direction:row;gap:9px;}
    .region-add span:last-child br{display:none;}
  }
}

/* =========================================================================
   ACTION BUTTONS — the controls on a block card and on a repeater row.
   These carried no rule at all, so every one of them was drawn with the
   browser's own <button> chrome: a grey 3-D bevel from 1996 sitting on a
   flat card. They are icons, so they get the shape of an icon — no box
   until you reach for one.
   ========================================================================= */
.bcard-btn{display:inline-grid;place-items:center;flex:none;width:27px;height:27px;padding:0;
  border:none;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;
  -webkit-appearance:none;appearance:none;font:inherit;line-height:0;
  transition:background .15s,color .15s,transform .12s;}
.bcard-btn svg{display:block;}
.bcard-btn:hover{background:rgba(6,147,172,.1);color:var(--brand-text);}
.bcard-btn:active{transform:scale(.9);}
.bcard-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}

/* Deleting is the one action here that cannot be undone, so it is the one
   that answers in a different colour. */
.bcard-btn.danger:hover{background:rgba(179,38,30,.11);color:#B3261E;}

/* Half is a state rather than a one-shot action, so unlike its neighbours it
   stays lit while it is on — the row shows its own width without being asked. */
.width-btn.on{background:rgba(6,147,172,.13);color:var(--brand-text);}
.width-btn.on:hover{background:rgba(6,147,172,.2);}

/* The repeater row's label takes the slack, so the controls sit against the
   end edge instead of bunching up against the row's name. */
.brepeat-label{flex:1;min-width:0;font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* The preview bar's buttons were a white box inside a white bar, outlined in
   the same grey as a disabled control. A warm tint reads as something you can
   press, and the wine only arrives on hover. */
.icon-btn{border-color:transparent;background:var(--canvas);color:var(--muted);
  transition:background .15s,color .15s,transform .12s;}
.icon-btn svg{display:block;}
.icon-btn:hover{background:rgba(6,147,172,.1);border-color:transparent;color:var(--brand-text);}
.icon-btn:active{transform:scale(.94);}

/* The drag grip is the one thing on the row that is not an action, so it stays
   quiet until the row is hovered and never takes the wine. */
.bcard-grip{color:#C9C4BA;transition:color .15s,background .15s;}
.bcard:hover .bcard-grip{color:var(--muted);}
/* Restated after the rule above, which is equally specific and would otherwise
   win on order and leave the grip with no feedback of its own. */
.bcard .bcard-grip:hover{color:var(--ink);background:rgba(44,46,53,.06);}

/* =========================================================================
   LINK FIELDS — one control for two quite different things: somewhere on
   this site, picked from a list, or an address anywhere else, typed. The
   two halves are exclusive, so they share the row rather than stack.
   ========================================================================= */
.blink{display:flex;flex-direction:column;gap:8px;}
.blink-bar{display:flex;align-items:center;gap:8px;}
.blink-modes{display:inline-flex;gap:3px;background:var(--canvas);border-radius:var(--pill);padding:3px;}
.blink-mode{border:none;background:none;border-radius:var(--pill);padding:5px 12px;font:inherit;
  font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;
  transition:background .14s,color .14s;}
.blink-mode:hover{color:var(--ink);}
.blink-mode.on{background:var(--surface);color:var(--brand-text);box-shadow:var(--sh-1);}
.blink-mode:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}

/* Only ever shown once the field points somewhere, so it is never a button that does nothing. */
.blink-open{display:inline-flex;align-items:center;gap:5px;margin-inline-start:auto;
  padding:5px 10px;border-radius:var(--pill);font-size:11.5px;font-weight:700;
  color:var(--muted);background:var(--canvas);cursor:pointer;
  transition:background .14s,color .14s;}
.blink-open:hover{background:rgba(6,147,172,.1);color:var(--brand-text);}
.blink-open svg{display:block;}
.blink-open[hidden]{display:none;}

.blink-pane[hidden]{display:none;}
.blink-ext{display:flex;gap:8px;}
.blink-ext input{flex:1;min-width:0;}

/* Kind first, then which one — the narrower column is the kind, since "Research papers" is
   about as long as it gets, while a title needs all the room it can have. */
.blink-pick{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1fr);gap:8px;align-items:start;}
.blink-pick[hidden]{display:none;}
/* The address, once, under the pair — rather than repeated under all fifty-odd rows of a list. */
.blink-path{grid-column:1 / -1;margin:0;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.blink-path[hidden]{display:none;}
.blink-new{font-size:13px;font-style:italic;}

@media (max-width:760px){
  .blink-pick{grid-template-columns:minmax(0,1fr);}
}

/* Select2 inside the block settings dialog. The skin is already defined further up for the
   admin forms; these only correct for the dialog being a denser, smaller context. */
.bfield .select2-container{width:100%!important;}
.bfield .select2-container--default .select2-selection--single{padding:8px 11px;border-radius:10px;
  background:var(--surface);}
.bfield .select2-container--default .select2-selection--single .select2-selection__rendered{
  font-size:13.5px;}
.bdlg-drop .select2-results__option{font-size:13.5px;padding:7px 11px;}
.bdlg-drop .select2-results__group{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:9px 11px 4px;}
/* The link picker offers a clear "×" as well as the arrow, so it needs the same wider gutter
   the remote selects take — without it the "×" sits on top of the title it would clear. */
.blink-select + .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-inline-end:52px;}
/* A link field is now two dropdowns side by side, which does not fit in half a dialog: titles
   wrapped to three lines in a column sized for "Caption (English)". It takes the full width. */
.bdlg-grid > .bfield:has(.blink){grid-column:1 / -1;}

/* =========================================================================
   BLOCK CARD CORNER — what the block is, and how wide it sits
   ========================================================================= */
.bcard{position:relative;}
.bcard-flags{position:absolute;top:6px;inset-inline-end:11px;z-index:1;
  display:flex;align-items:center;gap:7px;pointer-events:none;
  transition:opacity .14s;}
.bcard-flags > *{pointer-events:auto;}
/* The controls come out on hover and want the same corner, so the marks step aside for them —
   nothing is lost, since the width button says the same thing while it is there. */
.bcard:hover .bcard-flags,.bcard:focus-within .bcard-flags{opacity:0;}

.bcard-half{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand-text);background:rgba(6,147,172,.1);padding:2px 7px;border-radius:var(--pill);
  line-height:1.5;}
.bcard-half[hidden]{display:none;}

/* =========================================================================
   BLOCK SETTINGS DIALOG — the folding section headers
   These were built as <button>s with no rule of any kind, so they drew the
   browser's grey bevel around "CONTENT3"; and with nothing hiding a closed
   section's fields, clicking one folded nothing at all.
   ========================================================================= */
.bdlg-sec-head{display:flex;align-items:center;gap:8px;width:100%;text-align:start;
  background:none;border:none;font:inherit;cursor:pointer;padding:2px 0 8px;
  color:var(--muted);transition:color .14s;-webkit-appearance:none;appearance:none;}
.bdlg-sec-head:hover{color:var(--ink);}
.bdlg-sec-head:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px;}
.bdlg-sec.open > .bdlg-sec-head{color:var(--ink);}
.bdlg-sec-head .bdlg-sec-title{flex:1;min-width:0;margin:0;color:inherit;}
.bdlg-sec-n{flex:none;font-size:11px;font-weight:700;color:var(--muted);
  background:var(--canvas);border-radius:var(--pill);padding:2px 8px;}
.bdlg-sec.open > .bdlg-sec-head .bdlg-sec-n{background:rgba(6,147,172,.1);color:var(--brand-text);}
/* The caret points right when folded and down when open, like every other one in the admin. */
.bdlg-sec.open > .bdlg-sec-head .pal-caret{transform:rotate(45deg);}
/* The reason the fold button appeared to do nothing. */
.bdlg-sec:not(.open) > .bdlg-grid{display:none;}

/* =========================================================================
   CHECKBOXES — the one control in the dialog still drawn by the browser
   ========================================================================= */
/* .bfield > label{display:block} is more specific than .bswitch{display:flex}, so the switch
   lost its flex layout and the label sat flush against the box. Restated at the weight it needs. */
.bfield > label.bswitch{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;}
.bswitch input[type=checkbox],.bfield input[type=checkbox]{
  -webkit-appearance:none;appearance:none;flex:none;width:17px;height:17px;margin:0;
  border:1.5px solid var(--line);border-radius:5px;background:var(--surface);cursor:pointer;
  display:inline-grid;place-content:center;transition:background .14s,border-color .14s;}
.bswitch input[type=checkbox]::before,.bfield input[type=checkbox]::before{
  content:"";width:10px;height:10px;transform:scale(0);transition:transform .12s ease-out;
  box-shadow:inset 1em 1em #fff;
  clip-path:polygon(14% 45%,0 60%,40% 94%,100% 24%,86% 12%,38% 68%);}
.bswitch input[type=checkbox]:hover,.bfield input[type=checkbox]:hover{border-color:var(--brand-text);}
.bswitch input[type=checkbox]:checked,.bfield input[type=checkbox]:checked{
  background:var(--brand-fill);border-color:var(--brand-text);}
.bswitch input[type=checkbox]:checked::before,.bfield input[type=checkbox]:checked::before{
  transform:scale(1);}
.bswitch input[type=checkbox]:focus-visible,.bfield input[type=checkbox]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;}

/* The "which one?" picker on the single-item blocks. */
.bpick-note{margin:5px 0 0;font-size:11.5px;color:var(--muted);}
.bpick-note[hidden]{display:none;}
.bpick-select + .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-inline-end:52px;}

/* =========================================================================
   ADMIN FORM — tabs across the top, and the same tabs walked in order while
   a record is being created.
   ========================================================================= */
/* The card above these carries the cover, both titles, the slug and the appearance, which is
   most of a screen on a publication. Left in the flow the strip scrolled away with it, so
   changing tab meant scrolling back up to find the tabs. It stays under the site bar instead. */
.form-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-block-end:14px;padding-block:8px 10px;
  position:sticky;top:60px;z-index:6;background:var(--canvas);
  box-shadow:0 10px 12px -10px rgba(44,46,53,.18);}
.form-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--pill);padding:7px 14px;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--muted);cursor:pointer;transition:border-color .14s,color .14s,background .14s;}
.form-tab:hover{color:var(--ink);border-color:var(--muted);}
.form-tab.on{background:var(--brand-fill);border-color:var(--brand-text);color:#fff;}
.form-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.form-tab-n{font-size:11px;font-weight:700;background:var(--canvas);color:var(--muted);
  border-radius:var(--pill);padding:1px 7px;}
.form-tab.on .form-tab-n{background:rgba(255,255,255,.22);color:#fff;}
/* display:inline-flex above would otherwise beat the hidden attribute, leaving a tab the record
   type has emptied (Key insights on a book) on screen with a stale number. */
.form-tab[hidden],.form-tab-n[hidden]{display:none;}

/* Inside a pane the heading is context, not a control — the tab does the opening now. */
.form-panel-head.is-static{display:flex;align-items:baseline;gap:10px;width:100%;
  padding:16px 18px 10px;background:none;border:none;cursor:default;}
.form-panel[hidden]{display:none;}

.form-actions-sticky .btn[disabled]{opacity:.4;pointer-events:none;}

/* "+ New researcher" sits on the field's own label, next to the thing it adds to. */
.field-add-btn{display:inline-flex;align-items:center;gap:5px;margin-inline-start:8px;
  border:none;background:rgba(6,147,172,.08);color:var(--brand-text);border-radius:var(--pill);
  padding:2px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;
  vertical-align:middle;transition:background .14s;}
.field-add-btn:hover{background:rgba(6,147,172,.16);}
.field-add-btn svg{display:block;}

/* Appearance, now sitting under the cover it is the fallback for. */
.form-top-extra{margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line);}
.form-top-extra-title{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);}
.form-top-extra-title span{display:block;margin-block-start:3px;font-size:12px;font-weight:500;
  letter-spacing:0;text-transform:none;}

/* The save bar floats over whatever is scrolling past beneath it, so the form leaves it a gap
   to settle into. Without this the last field of a pane can never be brought out from under it. */
.form-actions-sticky{margin-block-start:34px;}

/* A file you upload rather than an address you paste. */
.file-field-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.file-field-row .btn{height:34px;padding-inline:14px;font-size:12.5px;}
.file-field-name{font-size:12.5px;color:var(--ink);word-break:break-all;}
.file-field-none{font-size:12.5px;color:var(--muted);}
.file-field-open{font-size:12.5px;font-weight:700;color:var(--brand-text);}
.file-field-name[hidden],.file-field-none[hidden],.file-field-open[hidden],.file-field-clear[hidden],
.file-field-status[hidden]{display:none;}

/* A paper with its own picture: the picture fills the band, with a wash over the top so the
   badges sitting on it stay legible whatever the photograph happens to be. */
.art-cover.has-image{height:clamp(190px,26vw,320px);
  background:var(--acover) center/cover no-repeat,var(--acc,linear-gradient(140deg,#5A6E73,#0693AC));}
.art-cover.has-image::after{background:linear-gradient(180deg,rgba(44,46,53,.45),rgba(44,46,53,.05) 45%,rgba(44,46,53,.35));}
.art-cover.has-image .wash{display:none;}

/* =========================================================================
   SHARE WHAT YOU HIGHLIGHTED — a small bar above the selection
   ========================================================================= */
.sel-share{position:absolute;z-index:60;display:none;gap:2px;padding:4px;
  background:var(--ink);border-radius:var(--pill);box-shadow:var(--sh-3);}
.sel-share.open{display:flex;}
.sel-share::after{content:"";position:absolute;inset-block-end:-5px;inset-inline-start:calc(50% - 5px);
  width:10px;height:10px;background:var(--ink);transform:rotate(45deg);border-radius:2px;}
.sel-share-btn{display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:50%;
  background:none;color:#fff;cursor:pointer;padding:0;transition:background .14s,transform .12s;}
.sel-share-btn:hover{background:rgba(255,255,255,.16);}
.sel-share-btn:active{transform:scale(.9);}
.sel-share-btn svg{width:16px;height:16px;display:block;}
.sel-share-btn:focus-visible{outline:2px solid #fff;outline-offset:1px;}
/* The copy button is the only one that stays here rather than opening somewhere, so it is the
   only one that has to say it worked. */
.sel-share-copy.done{background:#4E8F7A;}
@media print{ .sel-share{display:none!important;} }

/* Paired fields sat a notch out of line with each other in every form: .field carries an 18px
   top margin, and the first one in a panel is knocked down to 4px — which in a two-column grid
   means column one starts 14px above column two on the very first row. The spacing between rows
   belongs to the grid, not to each field, so inside a grid the margins come off and the gap does
   the work. Fixes Title EN/AR, the abstracts, the key insights — every pair at once. */
.admin-form .fields-grid{row-gap:18px;}
.admin-form .fields-grid > .field,
.form-panel .fields-grid > .field:first-child{margin-block:0;}

/* Reader: type size scales the reading column only, so the controls around it stay put. */
.reader-article,.article{--read-scale:1;}
.reader-article .art-body,.article .art-body,.reader-article .art-body p,.article .art-body p{
  font-size:calc(var(--read-size) * var(--read-scale));}
.reader-article .art-body h2,.article .art-body h2{font-size:calc(1.42em * var(--read-scale));}
.reader-article .art-body h3,.article .art-body h3{font-size:calc(1.18em * var(--read-scale));}
.reader-article .art-body h4,.article .art-body h4{font-size:calc(1.02em * var(--read-scale));}
#fontCtrl button[disabled]{opacity:.35;pointer-events:none;}
#langCtrl button{min-width:34px;font-weight:700;font-size:12.5px;}


/* =========================================================================
   READERSHIP CHARTS
   Two colours, both validated against the white card rather than picked by
   eye: a step up from the house wine (the wine itself is too dark to sit in
   a chart's lightness band) and a blue. Worst colour-blind separation ΔE 16.9,
   normal-vision 26.3, both clear of their floors; both above 3:1 on white.
   Anything showing one series uses the wine alone — on a bar, length already
   carries the magnitude, and a second hue would only be decoration.
   ========================================================================= */
/* Series colours, checked with the palette validator rather than picked by eye: teal + amber
   is CVD ΔE 18.6, normal-vision 25.2. The blue that used to be series 2 scores 7.2 against
   this teal — under the floor of 15 — so the two series would have been indistinguishable to
   most people, colour-blind or not. */
.viz{--s1:#0693AC;--s2:#C96A16;--viz-ink:var(--muted);--viz-grid:rgba(44,46,53,.07);}

.viz .builder2-head{align-items:center;}
.viz-legend{display:inline-flex;gap:14px;margin-inline-start:auto;}
.viz-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--viz-ink);}
.viz-key i{width:9px;height:9px;border-radius:3px;flex:none;}
.viz-key b{color:var(--ink);font-weight:700;margin-inline-start:2px;}
.viz-pc{color:var(--viz-ink);font-weight:600;}

/* ---- the daily line ---- */
.viz-fig{position:relative;margin:4px 0 0;height:190px;}
.viz-fig svg{width:100%;height:100%;display:block;overflow:visible;}
.viz-grid{stroke:var(--viz-grid);stroke-width:.5;vector-effect:non-scaling-stroke;}
.viz-line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round;}
.viz-line-1{stroke:var(--s1);}
/* The second series is the quieter fact — how many people, not how many opens —
   so it is drawn thinner and dashed as well as in its own hue. */
.viz-line-2{stroke:var(--s2);stroke-width:1.6;stroke-dasharray:3 2.4;}
.viz-hit{position:absolute;inset:0;cursor:crosshair;}
.viz-cursor{position:absolute;inset-block:0;width:0;pointer-events:none;}
.viz-cursor .viz-rule{position:absolute;inset-block:0;inset-inline-start:0;width:1px;
  background:rgba(44,46,53,.22);}
/* A dot per series, each at its own value — a 2px ring in the surface colour so the two stay
   separate where the lines cross. */
.viz-cursor::before,.viz-cursor::after{content:"";position:absolute;width:9px;height:9px;
  border-radius:50%;margin-inline-start:-4.5px;margin-block-start:-4.5px;
  box-shadow:0 0 0 2px var(--surface);}
.viz-cursor::before{background:var(--s1);top:var(--dot1,0);}
.viz-cursor::after{background:var(--s2);top:var(--dot2,0);}
.viz-tip{position:absolute;z-index:3;pointer-events:none;background:var(--ink);color:#fff;
  border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.5;white-space:nowrap;
  box-shadow:var(--sh-2);transform:translate(-50%,-100%);}
.viz-tip strong{display:block;font-size:12.5px;margin-block-end:3px;}
.viz-tip span{display:flex;align-items:center;gap:6px;}
.viz-tip i{width:8px;height:8px;border-radius:2px;flex:none;}
.viz-tip b{margin-inline-start:auto;padding-inline-start:12px;}
.viz-axis{display:flex;justify-content:space-between;align-items:baseline;
  margin-block-start:8px;font-size:11.5px;color:var(--viz-ink);}
.viz-axis-max{font-weight:600;}

/* ---- weekday columns ---- */
.viz-cols{display:flex;align-items:flex-end;gap:6px;height:150px;margin-block-start:6px;}
.viz-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:5px;height:100%;min-width:0;}
.viz-col-v{font-size:11.5px;font-weight:700;color:var(--ink);}
/* Rounded at the data end only; the other end is the baseline it is measured from. */
.viz-col-bar{width:100%;max-width:38px;background:var(--s1);border-radius:4px 4px 0 0;
  transition:opacity .14s;}
.viz-col:hover .viz-col-bar{opacity:.78;}
.viz-col-l{font-size:11px;color:var(--viz-ink);font-weight:600;}

/* ---- horizontal bars ---- */
.viz-bars{display:flex;flex-direction:column;gap:2px;margin-block-start:4px;}
.viz-bar-row{display:grid;grid-template-columns:minmax(84px,26%) minmax(0,1fr) auto;
  align-items:center;gap:10px;padding-block:5px;}
.viz-bar-l{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.viz-bar-track{height:15px;background:var(--canvas);border-radius:4px;overflow:hidden;}
.viz-bar{display:block;height:100%;background:var(--s1);border-radius:4px;
  transition:opacity .14s;}
.viz-bar-row:hover .viz-bar{opacity:.8;}
.viz-bar-v{font-size:12px;font-weight:700;color:var(--ink);min-width:44px;text-align:end;}

/* ---- the one composition bar ---- */
.viz-split{display:flex;gap:2px;height:26px;margin-block-start:6px;}
.viz-split > span{border-radius:4px;min-width:3px;}
.viz-split-a{background:var(--s1);}
.viz-split-b{background:var(--s2);}
.viz-split-keys{display:flex;gap:18px;flex-wrap:wrap;margin-block-start:12px;}

@media (max-width:640px){
  .viz-bar-row{grid-template-columns:minmax(70px,34%) minmax(0,1fr) auto;gap:8px;}
  .viz-fig{height:160px;}
  .viz-legend{margin-inline-start:0;width:100%;}
}

/* The reads-per-document pair under the share bar: the comparison the share itself cannot make,
   because a share mostly reflects how many of each kind exist. */
.viz-sub{margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;}
.viz-sub-row{display:flex;align-items:baseline;gap:10px;}
.viz-sub-l{font-size:12.5px;color:var(--muted);flex:1;min-width:0;}
.viz-sub-row b{font-family:var(--display);font-size:20px;line-height:1;color:var(--ink);}
.viz-sub-n{font-size:11.5px;color:var(--muted);min-width:64px;text-align:end;}
/* A bar's label is a way in where the thing it names has a page of its own. */
a.viz-bar-l{color:var(--ink);text-decoration:none;}
a.viz-bar-l:hover{color:var(--brand-text);text-decoration:underline;}

/* =========================================================================
   ACCESS & PERMISSIONS
   ========================================================================= */
.whoami{display:flex;align-items:center;gap:9px;padding-inline-end:6px;}
.whoami-av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#0AA7C2,#04525E);color:#fff;font-size:12.5px;font-weight:700;
  box-shadow:0 0 0 1px var(--nav-edge);}
.whoami-txt{display:flex;flex-direction:column;line-height:1.25;}
.whoami-txt b{font-size:12.5px;color:var(--nav-ink);}
.whoami-txt span{font-size:11px;color:var(--nav-muted);}
@media (max-width:760px){ .whoami-txt{display:none;} }

.rule-card h3{font-size:15px;margin-block-end:8px;}
.rule-list{margin:0;padding-inline-start:1.3em;list-style:decimal;font-size:13.5px;line-height:1.85;color:var(--ink);}
.rule-list b{font-weight:700;}
.rule-note{margin-block-start:12px;font-size:12.5px;color:var(--muted);line-height:1.65;
  border-inline-start:2px solid var(--line);padding-inline-start:12px;}

.iam-state{margin-inline-start:auto;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:var(--pill);}
.iam-state.on{color:#20463A;background:rgba(78,143,122,.18);}
.iam-state.off{color:#7A4415;background:rgba(201,129,52,.18);}
.iam-help{margin-block-start:12px;}
.iam-help summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--brand-text);}
.iam-help pre{margin:10px 0 0;padding:12px 14px;background:var(--canvas);border-radius:var(--r-md);
  font-size:12px;line-height:1.7;overflow-x:auto;}

/* ---- wide tables scroll rather than squash ---- */
.matrix-wrap{overflow-x:auto;}

/* ---- refused ---- */
.denied-card{max-width:680px;}
.denied-what{font-size:14.5px;line-height:1.7;margin:0 0 16px;}
.denied-who{border-block-start:1px solid var(--line);padding-block-start:14px;}
.denied-who h3{font-size:13px;margin-block-end:6px;}
.denied-grants{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px;line-height:1.9;}

/* ---- sign in ---- */
.login-or{display:flex;align-items:center;gap:10px;margin-block:16px;color:rgba(255,255,255,.5);font-size:12px;}
.login-or::before,.login-or::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.18);}
.login-iam{display:block;text-align:center;}

/* =========================================================================
   ACCESS — one table: every menu, every action, and who may do it
   ========================================================================= */
.crumb{margin:0 0 4px;font-size:12px;color:var(--muted);}
.crumb a{color:var(--muted);text-decoration:none;border-block-end:1px solid transparent;}
.crumb a:hover{color:var(--brand-text);border-block-end-color:currentColor;}
.crumb span{opacity:.5;margin-inline:2px;}

.rule-line{margin:0 0 18px;font-size:12.5px;line-height:1.8;color:var(--muted);
  border-inline-start:2px solid var(--line);padding-inline-start:12px;}
.rule-line b{color:var(--ink);font-weight:700;}
.rule-line code{font-size:11.5px;background:var(--canvas);border-radius:5px;padding:1px 6px;}

.access-table{width:100%;}
.access-table th,.access-table td{vertical-align:top;}
/* Each menu is one banded group; the rule between groups is the only heavy line on the table. */
.access-table tbody tr.area-first > *{border-block-start:1px solid var(--line);}
.access-table tbody tr.area-first:first-child > *{border-block-start:none;}
.access-table .area-cell{text-align:start;width:210px;padding-block:14px;}
.access-table .area-cell b{font-size:13.5px;display:block;}
.access-table .act-cell{width:190px;padding-block:14px;}
.access-table .act-cell b{font-size:13px;font-weight:600;display:block;}
.access-table .cell-sub{font-weight:400;line-height:1.5;margin-block-start:2px;}
.access-table td{padding-block:10px;}
.access-table .locked-cell{font-size:12px;color:var(--muted);line-height:1.7;
  background:var(--canvas);border-radius:var(--r-md);padding:12px 14px;}

.access-save{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block-start:18px;
  padding-block-start:16px;border-block-start:1px solid var(--line);}
.access-save .admin-sub{margin:0;font-size:12px;}

/* The two pickers. Select2 is styled for single fields elsewhere; inside a dense table it needs
   to sit tighter and be allowed to grow downwards instead of pushing the row apart. */
.access-table .select2-container{min-width:180px;}
.access-table .select2-container--default .select2-selection--multiple{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--canvas);min-height:38px;padding:2px 4px;}
.access-table .select2-container--default.select2-container--focus .select2-selection--multiple{
  border-color:var(--brand-text);}
/* The chip. Select2 4.1 renders the remove as an absolutely-positioned button and pads the
   label to clear it; laying the chip out as a flex row instead makes the spacing ours rather than
   a number that has to agree with the library theme. */
.access-table .select2-container--default .select2-selection--multiple .select2-selection__choice{
  display:inline-flex;align-items:center;gap:2px;position:relative;
  background:rgba(6,147,172,.09);border:none;color:var(--brand-text);font-size:12px;font-weight:600;
  border-radius:var(--pill);padding:3px 11px 3px 5px;margin:3px 4px 0 0;line-height:1.5;}
.access-table .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  position:static;order:-1;flex:none;border:none;background:none;color:var(--brand-text);
  width:15px;height:15px;padding:0;margin:0;display:inline-grid;place-items:center;
  border-radius:50%;font-size:13px;line-height:1;cursor:pointer;}
.access-table .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
  background:rgba(6,147,172,.22);color:var(--brand-text);}
.access-table .select2-container--default .select2-selection--multiple .select2-selection__choice__display{
  padding:0;}
.access-table .select2-search__field::placeholder{color:var(--muted);font-size:12px;}

.cell-sub{display:block;font-size:11.5px;color:var(--muted);}
code.tiny{font-size:11px;background:var(--canvas);border-radius:5px;padding:1px 6px;margin-inline-end:4px;}
.no-access{font-size:12px;color:#B3261E;font-weight:600;}

/* ---- refused, explained ---- */
.denied-card{max-width:680px;}
.denied-what{font-size:14.5px;line-height:1.7;margin:0 0 16px;}
.denied-who{border-block-start:1px solid var(--line);padding-block-start:14px;}
.denied-who h3{font-size:13px;margin-block-end:6px;}
.denied-id{color:var(--muted);font-size:12.5px;}

.iam-form .hint{font-size:11.5px;line-height:1.55;}
.iam-form input[readonly]{background:var(--canvas);color:var(--muted);}
.iam-test-out{font-size:12.5px;font-weight:600;color:var(--muted);align-self:center;}
.iam-test-out.ok{color:#20463A;}
.iam-test-out.bad{color:#B3261E;}

@media (max-width:1000px){
  /* The table stops being a table: each action becomes its own block, because four columns of
     dropdowns on a phone is a horizontal scroll nobody completes. */
  .access-table thead{display:none;}
  .access-table,.access-table tbody,.access-table tr,.access-table th,.access-table td{display:block;width:auto;}
  .access-table .area-cell{padding:14px 0 4px;}
  .access-table .act-cell{padding:8px 0 0;}
  .access-table td{padding-block:6px;}
  .access-table tbody tr.area-first > *{border-block-start:none;}
  .access-table tbody tr.area-first{border-block-start:1px solid var(--line);margin-block-start:10px;}
  .access-table .select2-container{min-width:0;width:100% !important;}
}

/* =========================================================================
   AUDIT TRAIL — a strip of figures, a filter bar, and the trail itself
   ========================================================================= */
.audit-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-block-end:var(--gap);}
.audit-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;}
.audit-stat.warn{border-color:rgba(179,38,30,.3);background:rgba(179,38,30,.04);}
.audit-n{display:block;font-size:22px;font-weight:700;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.audit-stat.warn .audit-n{color:#B3261E;}
.audit-lab{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;margin-block-start:4px;}
.audit-size{display:block;opacity:.7;}

.audit-off{border-color:rgba(201,129,52,.4);background:rgba(201,129,52,.06);font-size:13px;}

/* ---- the filter bar ---- */
.audit-filters{padding-block:14px;}
.af-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.af-field{display:flex;flex-direction:column;gap:4px;min-width:130px;}
.af-field.grow{flex:1;min-width:210px;}
.af-field label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.af-field input,.af-field select{border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 11px;font:inherit;font-size:13px;background:var(--canvas);height:38px;}
.af-go{display:flex;gap:8px;align-items:center;}
.af-go .btn{height:38px;padding-inline:18px;font-size:13px;}

/* ---- choosing the columns ---- */
.col-chooser{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;
  margin-block-end:14px;background:var(--canvas);}
.col-chooser[hidden]{display:none;}
.col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;
  margin-block-end:12px;}
.col-pick,.rec-switch{display:flex;align-items:flex-start;gap:9px;font-size:13px;cursor:pointer;}
.col-pick input,.rec-switch input{width:auto;margin-block-start:2px;flex:none;}
.col-pick b,.rec-switch b{display:block;font-size:13px;font-weight:600;}

/* ---- the trail ---- */
.audit-table{width:100%;}
.audit-table th,.audit-table td{vertical-align:top;}
.audit-table td{padding-block:9px;font-size:12.5px;}
.audit-table .col-at{width:104px;white-space:nowrap;}
.audit-table .col-who{width:170px;}
.audit-table .col-outcome{width:104px;}
.audit-table .col-ms,.audit-table .col-ip{width:100px;}
.audit-table .col-more{width:74px;text-align:end;}
.at-day{font-weight:600;}
.audit-row.refused{background:rgba(179,38,30,.035);}
.audit-row.failed{background:rgba(201,129,52,.05);}
.audit-row.open > td{border-block-end:none;}
.audit-table .mini-btn{margin-inline-start:0;}

/* Colour is never the only carrier: each pill says its own word. */
.pill-allowed,.pill-refused,.pill-failed{display:inline-block;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border-radius:var(--pill);padding:2px 9px;}
.pill-allowed{color:#20463A;background:rgba(32,70,58,.13);}
.pill-refused{color:#B3261E;background:rgba(179,38,30,.13);}
.pill-failed{color:#7A4415;background:rgba(201,129,52,.18);}

/* ---- one entry, in full ---- */
.audit-detail[hidden]{display:none;}
.audit-detail > td{background:var(--canvas);padding:14px 16px;}
.audit-dl{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);gap:6px 18px;margin:0;}
.audit-dl dt{font-size:11.5px;font-weight:700;color:var(--muted);}
.audit-dl dd{margin:0;font-size:12.5px;line-height:1.6;}
.audit-dl dd .cell-sub{display:block;}

.audit-pages{display:flex;align-items:center;justify-content:center;gap:16px;margin-block-start:16px;
  padding-block-start:14px;border-block-start:1px solid var(--line);}
.audit-pages .admin-sub{margin:0;font-size:12px;}
.mini-btn.off{opacity:.35;pointer-events:none;}

/* ---- what is recorded ---- */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px;
  margin-block-end:16px;}
.with-unit{display:flex;align-items:center;gap:8px;}
/* Styled here rather than inherited: one of these boxes sits in a plain form, not an
   .admin-form, and an unstyled square input beside a styled one reads as a bug. */
.with-unit input{width:120px;border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 11px;font:inherit;font-size:13.5px;background:var(--canvas);height:38px;}
.with-unit span{font-size:12.5px;color:var(--muted);}

.audit-danger{margin-block-start:20px;padding-block-start:16px;border-block-start:1px solid var(--line);}
.audit-danger h3{font-size:13.5px;margin:0 0 4px;}
.audit-danger .admin-sub{margin:0 0 12px;font-size:12px;}
.danger-row{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end;}
.inline-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.inline-form label{font-size:12.5px;color:var(--muted);}


@media (max-width:1000px){
  .af-field,.af-field.grow{min-width:0;flex:1 1 150px;}
  .audit-dl{grid-template-columns:minmax(0,1fr);gap:2px;}
  .audit-dl dt{margin-block-start:8px;}
}

/* ---- signing in: what is wrong, and the certificate ---- */
.checks-card{border-color:rgba(179,38,30,.3);}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.check{display:flex;gap:11px;align-items:flex-start;}
.check-mark{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  font-size:12px;font-weight:700;color:#fff;background:#B3261E;}
.check.warn .check-mark{background:#C98134;}
.check-body{min-width:0;}
.check-body b{display:block;font-size:13.5px;}
.check-why{display:block;font-size:12.5px;color:var(--muted);line-height:1.65;margin-block-start:3px;}
.check-fix{display:block;font-size:12.5px;margin-block-start:5px;}
.check-fix code{background:var(--canvas);border-radius:5px;padding:2px 8px;font-size:12px;}

.insecure-switch{margin-block-start:14px;padding-block-start:14px;border-block-start:1px solid var(--line);}
.insecure-switch .cell-sub{line-height:1.6;}

.iam-test-detail{width:100%;margin-block-start:14px;}
.iam-test-detail[hidden]{display:none;}
.cert-box{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--canvas);}
.cert-box h4{margin:0 0 10px;font-size:13px;}
.cert-dl{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:5px 16px;margin:0;}
.cert-dl dt{font-size:11.5px;font-weight:700;color:var(--muted);}
.cert-dl dd{margin:0;font-size:12.5px;line-height:1.6;word-break:break-all;}
.cert-note{color:var(--muted);font-size:11.5px;}
.cert-bad{color:#B3261E;font-weight:600;}
.cert-check{font-size:12px;color:var(--muted);line-height:1.65;margin:12px 0;}
.cert-box form{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0;}
.cert-box .admin-sub{margin:0;font-size:11.5px;}

/* ---- reading a paper out of its PDF ---- */
.pdf-import{border:1px solid rgba(6,147,172,.35);border-radius:var(--r-md);padding:14px;margin-top:10px;background:var(--surface);}
.pdfi-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.pdf-import[hidden],.pdfi-row[hidden]{display:none;}
.pdfi-choose{cursor:pointer;margin:0;}
.pdfi-row .admin-sub{margin:0;font-size:12px;flex:1;min-width:200px;}
.pdfi-busy{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);}
.pdfi-busy[hidden]{display:none;}
.pdfi-spin{width:15px;height:15px;flex:none;border:2px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:pdfi-turn .7s linear infinite;}
@keyframes pdfi-turn{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.pdfi-spin{animation-duration:2.4s;}}
.pdfi-result[hidden],.pdfi-error[hidden],.pdfi-missing[hidden]{display:none;}
.pdfi-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-end:8px;}
.pdfi-head b{font-size:13.5px;}
.pdfi-head .mini-btn{margin-inline-start:auto;}
.pdfi-found{margin:0;font-size:12.5px;color:var(--brand-text);line-height:1.6;}
.pdfi-missing{margin:6px 0 0;font-size:12.5px;color:#7A4415;line-height:1.6;}
.pdfi-filled{margin:10px 0 0;padding-inline-start:18px;font-size:12.5px;color:var(--muted);line-height:1.8;}
/* The provenance note is not decoration: somebody about to publish this needs to know the summary
   was lifted from the paper rather than written for it. */
.pdfi-note{margin:12px 0 0;padding-block-start:10px;border-block-start:1px dashed var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.7;}
.pdfi-error{margin:12px 0 0;font-size:12.5px;color:#B3261E;line-height:1.6;}

/* =========================================================================
   SECTION AUDIO (admin) — per section, per language; changed text is flagged
   ========================================================================= */
.sec-audio-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:12.5px;color:var(--muted);}
.sec-audio-bar.has-flag{border-color:rgba(196,120,20,.55);background:rgba(232,160,40,.07);}
.sec-audio-bar-ic{color:var(--brand-text);display:grid;place-items:center;}
.sec-audio-summary{flex:1;min-width:200px;}
.sec-audio-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.sec-audio-actions[hidden]{display:none;}
.sec-audio-actions select{width:auto;height:34px;padding:0 8px;}
.sec-audio-actions .btn{height:34px;padding-inline:12px;font-size:12.5px;}
.aud-warn{color:#9A5B00;}
.sec-aud-badges{display:flex;gap:4px;flex:none;}
.aud-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--pill);white-space:nowrap;
  background:var(--surface);color:var(--muted);border:1px solid var(--line);}
.aud-badge.is-ready{color:#1D6B3A;background:rgba(40,150,80,.1);border-color:rgba(40,150,80,.3);}
.aud-badge.is-changed,.aud-badge.is-voice{color:#8A4F00;background:rgba(232,160,40,.16);border-color:rgba(196,120,20,.45);}
.aud-badge.is-failed{color:#B3261E;background:rgba(179,38,30,.08);border-color:rgba(179,38,30,.3);}
.aud-badge.is-working{color:var(--brand-text);background:rgba(6,147,172,.08);border-color:rgba(6,147,172,.3);}
.section-row.audio-flag{border-color:rgba(196,120,20,.55);box-shadow:inset 3px 0 0 #E0A028;}
.form-tab.has-flag .form-tab-name::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#E0A028;margin-inline-start:6px;vertical-align:middle;}
.sec-audio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}
.sec-audio[hidden]{display:none;}
.sec-audio-lang{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:10px 12px;min-width:0;}
.sec-audio-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;}
.sec-audio-actions-row{margin-inline-start:auto;display:flex;gap:6px;}
.sec-audio-actions-row [hidden]{display:none;}
.sec-audio-note{margin:8px 0 0;font-size:12px;color:#8A4F00;}
.sec-audio-note[hidden]{display:none;}
.aud-player{width:100%;margin-top:8px;height:36px;}
.aud-player[hidden]{display:none;}
.aud-transcript{margin-top:8px;font-size:12.5px;}
.aud-transcript[hidden]{display:none;}
.aud-transcript summary{cursor:pointer;font-weight:600;color:var(--brand-text);}
.aud-words{margin-top:6px;max-height:220px;overflow:auto;white-space:pre-wrap;line-height:1.7;color:var(--ink);
  padding:8px 10px;background:var(--canvas);border-radius:var(--r-sm, 8px);}
.aud-words .aw{cursor:pointer;border-radius:3px;transition:background .1s;}
.aud-words .aw:hover{background:rgba(6,147,172,.1);}
.aud-words .aw.on{background:rgba(6,147,172,.25);}
@media (max-width:800px){ .sec-audio{grid-template-columns:minmax(0,1fr);} }

/* "You can always import the details from the PDF" — the hint at the top of a research paper. */
.pdf-hint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:12px 16px;
  border:1px solid rgba(6,147,172,.3);border-radius:var(--r-md);background:rgba(6,147,172,.06);
  font-size:13.5px;line-height:1.5;color:var(--ink);}
.pdf-hint-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface);color:var(--brand-text);}
.pdf-hint-txt{flex:1;min-width:220px;}
.pdf-hint-txt b:first-child{display:block;margin-bottom:1px;}
.pdf-hint-go{height:34px;padding-inline:14px;font-size:12.5px;flex:none;}
/* The field the hint points at, marked for a moment when it is brought into view. */
@keyframes fieldFlash{0%,60%{box-shadow:0 0 0 3px rgba(6,147,172,.45);}100%{box-shadow:0 0 0 3px rgba(6,147,172,0);}}
.field.field-flash{border-radius:var(--r-md);animation:fieldFlash 1.8s ease-out;}

/* A book's text is recorded as one piece; its audio block sits under the Body fields. */
.body-audio-row > label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.body-audio-row .sec-audio{margin-top:6px;}
.body-audio-row.audio-flag{border-inline-start:3px solid #E0A028;padding-inline-start:10px;}

/* Keywords, in the paper's Details panel. */
.kw-block{margin-block-start:12px;}
.kw-block .k{display:block;font-size:12px;color:var(--muted);margin-block-end:6px;}
.kw-list{display:flex;flex-wrap:wrap;gap:6px;}
.kw{font-size:12px;padding:3px 9px;border-radius:var(--pill);background:var(--canvas);border:1px solid var(--line);color:var(--ink);}
.kw-block{margin-block-start:16px;}
/* Cite this paper, closing the article. */
.art-cite{padding-block-start:0;}
.art-cite .cite{margin:0;}

/* ---- a field that needs correcting (admin.js checks every form) ---- */
.field.is-invalid > input,.field.is-invalid > select,.field.is-invalid > textarea,
.field.is-invalid .select2-selection,.field.is-invalid input:not([type=checkbox]){
  border-color:#B3261E!important;box-shadow:0 0 0 3px rgba(179,38,30,.14)!important;background:rgba(179,38,30,.03);}
.field.is-invalid > label{color:#B3261E;}
.field-error{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:12.5px;font-weight:600;color:#B3261E;line-height:1.45;}
.field-error::before{content:"!";flex:none;width:16px;height:16px;border-radius:50%;background:#B3261E;color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:1px;}
/* Mandatory fields say so on their label, before anyone has to be told. */
.req{color:#B3261E;font-weight:700;margin-inline-start:2px;}

/* ---- Site settings: one card per subject, and a strip to jump between them ---- */
.settings-nav{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 16px;position:sticky;top:60px;z-index:5;
  padding:8px 0;background:var(--canvas);}
.settings-nav a{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 13px;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);transition:all .14s;}
.settings-nav a:hover,.settings-nav a.on{color:#fff;background:var(--brand-fill);border-color:var(--brand-text);}
.settings-sec{scroll-margin-top:118px;}
.settings-head{margin:-2px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.settings-head h2{font-size:16px;margin:0 0 3px;}
.settings-head p{margin:0;font-size:13px;color:var(--muted);line-height:1.5;}
.settings-list{display:grid;gap:4px;max-width:640px;}
.settings-check{display:flex!important;align-items:center;gap:9px;font-weight:600;cursor:pointer;}
.settings-check input{width:auto;margin:0;}
.settings-form .form-actions-sticky{align-items:center;gap:14px;}

/* The admin footer's lockup: the mark, larger, beside the Center's name — as in the admin bar. */
.foot-brand-admin .foot-brand-lockup{display:flex;align-items:center;gap:14px;}
.foot-brand-admin .brand-glyph{width:56px;height:56px;border-radius:10px;font-size:22px;}
.foot-brand-admin strong{font-size:15px;line-height:1.3;max-width:26ch;}
.foot-brand-admin .foot-brand-ar{display:block;font-family:var(--font-ar);font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px;}
.foot-brand-admin p{margin-block-start:2px;}

/* Dashboard: the Center logo on the right of the welcome banner. */
.dash-hero .dash-logo{position:absolute;z-index:1;inset-inline-end:clamp(28px,6vw,90px);top:50%;transform:translateY(-50%);width:clamp(120px,14vw,190px);height:auto;aspect-ratio:1;border-radius:18px;object-fit:contain;}
@media (max-width:900px){.dash-hero .dash-logo{display:none;}}