/* Shaab Local Council — public website
   Palette: olive ink + limestone, with the council accent colour (Settings → Style colour 1) as the only accent. */
:root {
  --ink: #17302a;          /* olive-ink: text, header */
  --ink-2: #3d554d;        /* secondary text */
  --olive: #56703f;        /* olive leaf: links, icons */
  --sage: #e3eadc;         /* light olive tint: chips, hovers */
  --stone: #f4f5f1;        /* limestone page background */
  --paper: #ffffff;
  --line: #d9ddd3;
  --accent: #e24d00;       /* overridden from settings */
  --accent-ink: #ffffff;
  --radius-s: 6px; --radius-m: 12px; --radius-l: 22px;
  --shadow: 0 1px 2px rgba(23,48,42,.06), 0 8px 24px -12px rgba(23,48,42,.18);
  --font: 'Readex Pro', 'Rubik', system-ui, sans-serif;
  --wrap: 1200px;
  --fs: 1rem;
}
:lang(he) { --font: 'Rubik', 'Readex Pro', system-ui, sans-serif; }
* { box-sizing: border-box; }
html { font-size: calc(16px * var(--zoom, 1)); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--stone); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--olive); text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
h3 { font-size: 1.15rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; color: #fff; }

/* ---------- top bar & header ---------- */
.topbar { background: var(--ink); color: #cfd9d3; font-size: .85rem; }
.topbar .wrap { display: flex; align-items: center; gap: 18px; min-height: 38px; }
.topbar a { color: #e9efe9; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar .spacer { flex: 1; }
.topbar .langs { display: flex; gap: 4px; }
.topbar .langs a { padding: 2px 10px; border-radius: 999px; }
.topbar .langs a[aria-current] { background: rgba(255,255,255,.14); color: #fff; }
.topbar .contact-mini { display: flex; gap: 16px; }
.topbar .contact-mini i { opacity: .7; margin-inline-end: 4px; }

.header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; flex-wrap: wrap; }
@media (min-width: 1081px) {
  .header .wrap { row-gap: 0; }
  .header .brand { padding: 10px 0; }
  .header .header-tools { margin-inline-start: auto; }
  .header .nav { order: 3; flex: 0 0 100%; border-top: 1px solid var(--line); }
  .nav > ul { gap: 0; }
  .nav > ul > li > a, .nav > ul > li > button { padding: 12px 9px; font-size: .92rem; }
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex-shrink: 0; }
.brand img { height: 56px; width: auto; }
.brand b { font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.nav { flex: 1; }
.nav > ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav li { position: relative; }
.nav > ul > li > a, .nav > ul > li > button { display: flex; align-items: center; gap: 6px; padding: 10px 12px; color: var(--ink); font: inherit; font-weight: 500; font-size: .98rem; background: none; border: 0; border-radius: var(--radius-s); cursor: pointer; }
.nav > ul > li > a:hover, .nav > ul > li > button:hover, .nav li.open > button { background: var(--sage); color: var(--ink); }
.nav > ul > li > a.active { box-shadow: inset 0 -3px 0 var(--accent); border-radius: 0; }
.nav .fa-angle-down { font-size: .8em; opacity: .6; transition: transform .2s; }
.nav li.open .fa-angle-down { transform: rotate(180deg); }
.dropdown { display: none; position: absolute; inset-inline-start: 0; top: calc(100% + 6px); min-width: 280px; max-height: 70vh; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); padding: 8px; list-style: none; margin: 0; z-index: 50; }
.nav li.open > .dropdown { display: block; }
.dropdown a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; color: var(--ink); border-radius: var(--radius-s); }
.dropdown a:hover { background: var(--stone); color: var(--ink); }
.dropdown i { width: 1.2em; text-align: center; color: var(--olive); }
.header-tools { display: flex; gap: 6px; }
.icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font-size: 1.05rem; }
.icon-btn:hover { background: var(--sage); }
.menu-toggle { display: none; }

.search-panel { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.search-panel.open { display: block; }
.search-panel form { display: flex; gap: 10px; padding: 16px 0; }
.search-input { flex: 1; font: inherit; font-size: 1.05rem; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-m); background: var(--stone); color: var(--ink); }
.search-input:focus { outline: none; border-color: var(--olive); background: #fff; }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-m); border: 0; font: inherit; font-weight: 500; cursor: pointer; background: var(--accent); color: var(--accent-ink); }
.btn:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); filter: none; }
.btn[disabled] { opacity: .6; cursor: wait; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--sage); color: var(--ink-2); font-size: .82rem; }

/* ---------- hero (home) ---------- */
.hero { background: var(--paper); border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 36px; padding-top: 36px; padding-bottom: 36px; align-items: center; }
.hero-text h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: .35em; }
.hero-text p { color: var(--ink-2); font-size: 1.08rem; margin: 0 0 22px; max-width: 42ch; }
.hero-search { display: flex; gap: 8px; margin-bottom: 26px; }
.hero-search .search-input { padding: 15px 18px; }
.slider { position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 5 / 2.6; background: var(--sage); }
.slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.slider .slide.on { opacity: 1; }
.slider .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider .slide figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 40px 22px 18px; background: linear-gradient(transparent, rgba(23,48,42,.75)); color: #fff; font-weight: 500; }
.slider .dots { position: absolute; bottom: 14px; inset-inline-end: 16px; display: flex; gap: 6px; z-index: 2; }
.slider .dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.slider .dots button[aria-current="true"] { background: #fff; width: 26px; border-radius: 6px; }
.slider .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: var(--ink); cursor: pointer; }
.slider .arrow.prev { inset-inline-start: 12px; } .slider .arrow.next { inset-inline-end: 12px; }

/* quick services — the signature element */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 104px; padding: 14px 10px; border-radius: var(--radius-m); background: var(--ink); color: #f1f5f1; font-size: .88rem; line-height: 1.3; position: relative; overflow: hidden; }
.quick a i { font-size: 1.65rem; color: #c9d8bb; transition: transform .2s; }
.quick a::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--accent); transform: scaleX(0); transition: transform .25s; }
.quick a:hover { color: #fff; }
.quick a:hover::after { transform: scaleX(1); }
.quick a:hover i { transform: translateY(-2px); color: #fff; }

/* ---------- home blocks ---------- */
.block { padding: 56px 0; }
.block + .block { padding-top: 0; }
.block-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.block-head h2 { margin: 0; }
.block-head a { font-weight: 500; white-space: nowrap; }
.news-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: auto; gap: 22px; }
.news-grid .story:first-child { grid-row: span 2; }
.story { background: var(--paper); border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; color: var(--ink); }
.story:hover { border-color: var(--olive); color: var(--ink); }
.story .ph { aspect-ratio: 16/10; background: var(--sage) center/cover no-repeat; display: grid; place-items: center; color: var(--olive); font-size: 2rem; }
.story:first-child .ph { aspect-ratio: 16/11; }
.story .bd { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.story h3 { margin: 0; font-size: 1.05rem; }
.story:first-child h3 { font-size: 1.35rem; }
.story time { color: var(--ink-2); font-size: .85rem; }
.story p { margin: 0; color: var(--ink-2); font-size: .93rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.index-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 28px; list-style: none; padding: 0; margin: 0; }
.index-list a { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.index-list a i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--olive); flex-shrink: 0; }
.index-list a:hover { color: var(--accent); }
.index-list a:hover i { background: var(--accent); color: #fff; }
.contact-strip { background: var(--ink); color: #e9efe9; border-radius: var(--radius-l); padding: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.contact-strip div { display: flex; gap: 14px; align-items: flex-start; }
.contact-strip i { font-size: 1.4rem; color: #c9d8bb; margin-top: 4px; }
.contact-strip small { display: block; color: #a9bbb1; }
.contact-strip a { color: #fff; }

/* ---------- inner pages ---------- */
.page-head { background: var(--paper); border-bottom: 1px solid var(--line); padding: 26px 0 22px; }
.page-head h1 { margin: 6px 0 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--ink-2); }
.crumbs li + li::before { content: '/'; margin-inline-end: 6px; opacity: .5; }
.crumbs a { color: var(--ink-2); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; padding: 32px 20px 64px; }
.layout.full { grid-template-columns: minmax(0, 1fr); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 26px; }
.side { display: flex; flex-direction: column; gap: 22px; }
.side h3 { font-size: 1rem; margin-bottom: 10px; color: var(--ink-2); }
.side-cats { list-style: none; margin: 0; padding: 0; }
.side-cats a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-s); color: var(--ink); }
.side-cats a:hover, .side-cats a[aria-current] { background: var(--sage); color: var(--ink); }
.side-cats a[aria-current] { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
[dir=rtl] .side-cats a[aria-current] { box-shadow: inset -3px 0 0 var(--accent); }
.side-cats i { color: var(--olive); width: 1.2em; text-align: center; }
.side-cats .n { margin-inline-start: auto; font-size: .8rem; color: var(--ink-2); background: var(--stone); padding: 0 8px; border-radius: 999px; }
.side-cats ul { list-style: none; padding-inline-start: 22px; margin: 0; }
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list a { display: block; padding: 8px 0; border-bottom: 1px dashed var(--line); color: var(--ink); font-size: .93rem; }
.mini-list a:hover { color: var(--accent); }
.side-banner img { border-radius: var(--radius-m); display: block; }

/* listings */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.rows { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.row-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; color: var(--ink); border-bottom: 1px solid var(--line); }
.row-item:last-child { border-bottom: 0; }
.row-item:hover { background: var(--stone); color: var(--ink); }
.row-item .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--sage); color: var(--olive); display: grid; place-items: center; font-size: 1.2rem; }
.row-item h3 { margin: 0 0 2px; font-size: 1.02rem; }
.row-item p { margin: 0; color: var(--ink-2); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-item .meta { color: var(--ink-2); font-size: .82rem; white-space: nowrap; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery a { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius-m); overflow: hidden; background: var(--sage); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery a:hover img { transform: scale(1.04); }
.gallery .cap { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 12px 10px; color: #fff; font-size: .9rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.empty { text-align: center; padding: 48px 20px; color: var(--ink-2); }
.empty i { font-size: 2.2rem; color: var(--olive); display: block; margin-bottom: 10px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; }
.pager a, .pager span { min-width: 40px; height: 40px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: var(--radius-s); background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.pager [aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* topic */
.article h1 { margin-bottom: 10px; }
.article .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-2); font-size: .9rem; margin-bottom: 22px; }
.article .meta i { margin-inline-end: 5px; color: var(--olive); }
.article .lead-img { border-radius: var(--radius-m); margin-bottom: 22px; width: 100%; max-height: 520px; object-fit: cover; cursor: zoom-in; }
.prose { font-size: 1.04rem; overflow-wrap: anywhere; }
.prose img { border-radius: 8px; height: auto !important; }
.prose table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 6px 10px; }
.prose iframe { max-width: 100%; }
.media { margin-bottom: 22px; }
.media video, .media iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius-m); background: #000; }
.media audio { width: 100%; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 0 0 24px; }
.thumbs a { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; display: block; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.fields { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 24px; padding: 16px 18px; background: var(--stone); border-radius: var(--radius-m); }
.fields dt { color: var(--ink-2); }
.fields dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.files { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 8px; }
.files a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-m); color: var(--ink); background: var(--paper); }
.files a:hover { border-color: var(--olive); }
.files i { font-size: 1.5rem; color: var(--accent); }
.files .dl { margin-inline-start: auto; color: var(--olive); font-size: .88rem; }
.share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.share a, .share button { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--stone); color: var(--ink); border: 0; cursor: pointer; }
.share a:hover, .share button:hover { background: var(--ink); color: #fff; }
.map-frame { width: 100%; height: 320px; border: 0; border-radius: var(--radius-m); }
.related { margin-top: 36px; }

/* forms */
.form { display: grid; gap: 16px; }
.form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px 18px; margin: 0; }
.form legend { padding: 0 6px; font-weight: 600; }
.field label { display: block; font-size: .9rem; margin-bottom: 5px; color: var(--ink-2); }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px var(--sage); }
.field input[type=file] { padding: 8px; background: var(--stone); }
.field.wide { grid-column: 1 / -1; }
.field .err { color: #b42318; font-size: .82rem; margin-top: 4px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #b42318; }
.field.invalid .err { display: block; }
.hp { position: absolute; inset-inline-start: -9999px; }
.notice { padding: 12px 16px; border-radius: var(--radius-s); font-size: .95rem; }
.notice.ok { background: #e6f2e1; color: #1f4d17; }
.notice.bad { background: #fde8e6; color: #8a1c12; }
.form-box { margin-top: 30px; }
.form-box h2 { font-size: 1.25rem; }

/* phone book */
.pb-tools { display: flex; gap: 10px; margin-bottom: 18px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px; }
.person h3 { margin: 0 0 8px; font-size: 1.02rem; }
.person dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: .9rem; }
.person dt { color: var(--ink-2); }
.person dd { margin: 0; overflow-wrap: anywhere; }

/* footer */
.footer { background: var(--ink); color: #c4d1ca; margin-top: 0; }
.footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 36px; padding-top: 48px; padding-bottom: 36px; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.footer a { color: #e2eae4; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer address { font-style: normal; display: grid; gap: 10px; }
.footer address i { width: 1.3em; color: #9fb593; }
.footer .sub { display: flex; gap: 6px; flex-direction: column; }
.footer .sub input { font: inherit; padding: 10px 12px; border-radius: var(--radius-s); border: 1px solid #355047; background: #20403a; color: #fff; }
.footer .sub input::placeholder { color: #93a89e; }
.footer .social { display: flex; gap: 8px; margin-top: 16px; }
.footer .social a { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; background: #23443d; }
.footer .bottom { border-top: 1px solid #2b4a42; }
.footer .bottom .wrap { display: flex; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; font-size: .85rem; grid-template-columns: none; }

/* accessibility panel */
.a11y-btn { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #1d4ed8; color: #fff; font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow); }
.a11y-panel { position: fixed; bottom: 80px; inset-inline-start: 18px; z-index: 60; width: 260px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); padding: 14px; display: none; }
.a11y-panel.open { display: grid; gap: 6px; }
.a11y-panel h3 { font-size: 1rem; margin: 0 0 4px; }
.a11y-panel button { font: inherit; text-align: start; padding: 9px 12px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--stone); color: var(--ink); cursor: pointer; display: flex; gap: 10px; align-items: center; }
.a11y-panel button[aria-pressed="true"] { background: var(--ink); color: #fff; }
html.a11y-contrast body { filter: contrast(1.25); }
html.a11y-contrast { --ink-2: #000; --line: #777; }
html.a11y-links a { text-decoration: underline !important; }
html.a11y-readable body { --font: Arial, 'Segoe UI', sans-serif; letter-spacing: .02em; }
html.a11y-still *, html.a11y-still *::before { animation: none !important; transition: none !important; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10,20,17,.92); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 8px; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; }
.lightbox .x { top: 18px; inset-inline-end: 18px; }
.lightbox .p { inset-inline-start: 18px; top: 50%; } .lightbox .n { inset-inline-end: 18px; top: 50%; }
[dir=rtl] .lightbox .p i, [dir=rtl] .lightbox .n i, [dir=rtl] .slider .arrow i { transform: scaleX(-1); }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; z-index: 95; display: none; }
.toast.show { display: block; }

@media (max-width: 1080px) {
  .menu-toggle { display: inline-grid; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--paper); z-index: 70; transform: translateX(105%); transition: transform .25s; overflow-y: auto; padding: 70px 16px 24px; box-shadow: var(--shadow); }
  [dir=rtl] .nav { inset: 0 auto 0 0; transform: translateX(-105%); }
  .nav.open { transform: none !important; }
  .nav > ul { flex-direction: column; }
  .nav > ul > li > a, .nav > ul > li > button { width: 100%; justify-content: space-between; padding: 13px 12px; }
  .nav > ul > li > a.active { box-shadow: none; background: var(--sage); border-radius: var(--radius-s); }
  .dropdown { position: static; box-shadow: none; border: 0; padding: 0 10px 8px; min-width: 0; max-height: none; }
  .nav-close { position: absolute; top: 16px; inset-inline-end: 16px; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 65; display: none; }
  .nav-backdrop.open { display: block; }
  .header .wrap { justify-content: space-between; }
  .hero .wrap { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-grid .story:first-child { grid-column: span 2; grid-row: auto; }
}
@media (min-width: 1081px) { .nav-close, .nav-backdrop { display: none; } .quick { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) {
  .topbar .contact-mini { display: none; }
  .brand img { height: 44px; }
  .brand b { display: none; }
  .news-grid { grid-template-columns: 1fr; }
  .news-grid .story:first-child { grid-column: auto; }
  .footer .wrap { grid-template-columns: 1fr; }
  .row-item { grid-template-columns: 40px minmax(0,1fr); }
  .row-item .meta { display: none; }
  .fields { grid-template-columns: 1fr; gap: 2px; }
  .fields dd { margin-bottom: 8px; }
  .panel { padding: 18px; }
  .block { padding: 36px 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .topbar, .header, .footer, .side, .a11y-btn, .share { display: none !important; } .layout { display: block; } }
@media (max-width: 640px) {
  .news-grid .story:not(:first-child), .cards .story { flex-direction: row; }
  .news-grid .story:not(:first-child) .ph, .cards .story .ph { aspect-ratio: auto; width: 112px; flex-shrink: 0; }
  .news-grid .story:not(:first-child) .bd, .cards .story .bd { padding: 12px 14px; }
  .cards .story p { display: none; }
}
.layout.full > .article, .layout.full > .panel { width: 100%; max-width: 940px; margin-inline: auto; }

/* =====================================================================
   Motion & polish
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .75, .25, 1); --k: var(--olive); }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* scroll reveal (only when JS + motion are available) */
html.js.motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
html.js.motion [data-reveal].in { opacity: 1; transform: none; }

/* hero entrance — the one orchestrated moment */
html.motion .hero-text > * { animation: rise .8s var(--ease) both; }
html.motion .hero-text > :nth-child(2) { animation-delay: .08s; }
html.motion .hero-text > :nth-child(3) { animation-delay: .16s; }
html.motion .hero-text > :nth-child(4) { animation-delay: .24s; }
html.motion .quick a { animation: pop .55s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * 45ms); }
html.motion .hero .slider { animation: unveil 1.1s var(--ease) .1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.94); } }
@keyframes unveil { from { clip-path: inset(0 0 0 100% round var(--radius-l)); } to { clip-path: inset(0 0 0 0 round var(--radius-l)); } }
[dir=rtl] html.motion .hero .slider, html.motion[dir=rtl] .hero .slider { animation-name: unveil-rtl; }
@keyframes unveil-rtl { from { clip-path: inset(0 100% 0 0 round var(--radius-l)); } to { clip-path: inset(0 0 0 0 round var(--radius-l)); } }
.slider .slide.on img { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }

/* header gains depth once the page scrolls */
.header { transition: box-shadow .25s, background-color .25s; }
.header.scrolled { box-shadow: 0 10px 30px -18px rgba(23,48,42,.45); background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); }
.nav > ul > li > a { position: relative; }
.nav > ul > li > a::after { content: ''; position: absolute; inset-inline: 10px; bottom: 4px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .25s var(--ease); }
.nav > ul > li > a:hover::after { transform: scaleX(1); }
.dropdown { transform-origin: top; }
.nav li.open > .dropdown { animation: drop .2s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scaleY(.97); } }

/* cards: depth on hover */
.story { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s; }
.story .ph { transition: transform .6s var(--ease); }
.story { isolation: isolate; }
.story:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(23,48,42,.45); }
.story:hover .ph { transform: scale(1.04); }
.story .ph { transform-origin: center; }
.index-list a { transition: color .2s, padding .25s var(--ease); }
.index-list a:hover { padding-inline-start: 10px; }
.index-list a i { transition: background-color .2s, color .2s, transform .3s var(--ease); }
.index-list a:hover i { transform: rotate(-8deg) scale(1.08); }

/* inner page header: limestone texture + growing accent rule */
.page-head { position: relative; overflow: hidden; background:
  radial-gradient(circle at 1px 1px, rgba(86,112,63,.16) 1px, transparent 0) 0 0 / 18px 18px,
  linear-gradient(180deg, #fff, var(--stone)); }
.page-head h1::after { content: ''; display: block; width: 64px; height: 4px; border-radius: 4px; background: var(--accent); margin-top: 12px; }
html.motion .page-head h1 { animation: rise .6s var(--ease) both; }
html.motion .page-head h1::after { animation: grow .8s var(--ease) .25s both; transform-origin: inline-start; }
@keyframes grow { from { transform: scaleX(0); } }

/* back to top */
.to-top { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); }

/* =====================================================================
   Files: typed document cards, list rows, preview modal, audio player
   ===================================================================== */
.k-pdf { --k: #c9372c; } .k-word { --k: #2b5fb4; } .k-excel { --k: #1e7a46; } .k-ppt { --k: #c4561c; }
.k-image { --k: #7a4fb8; } .k-audio { --k: #0f766e; } .k-video { --k: #b8256a; } .k-archive { --k: #8a6a12; } .k-file, .k-page { --k: var(--olive); }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.doc-list { display: grid; gap: 10px; }
.doc { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s; }
.doc::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--k); transform: scaleY(0); transition: transform .3s var(--ease); }
.doc:hover { border-color: color-mix(in srgb, var(--k) 45%, var(--line)); box-shadow: 0 14px 34px -24px color-mix(in srgb, var(--k) 70%, #000); transform: translateY(-2px); }
.doc:hover::before { transform: scaleY(1); }
.doc-ic { width: 54px; height: 60px; border-radius: 10px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--k); background: color-mix(in srgb, var(--k) 11%, #fff); position: relative; }
.doc-ic::after { content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 14px; height: 14px; background: linear-gradient(225deg, var(--stone) 50%, color-mix(in srgb, var(--k) 28%, #fff) 50%); border-start-end-radius: 10px; }
[dir=rtl] .doc-ic::after { background: linear-gradient(135deg, var(--stone) 50%, color-mix(in srgb, var(--k) 28%, #fff) 50%); }
.doc-ic i { font-size: 1.45rem; }
.doc-ic b { font-size: .62rem; letter-spacing: .02em; font-weight: 700; }
.doc-bd { min-width: 0; }
.doc-bd h4 { margin: 0 0 3px; font-size: 1rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-bd h4 a { color: var(--ink); }
.doc-bd h4 a:hover { color: var(--k); }
.doc-bd small { color: var(--ink-2); font-size: .82rem; }
.doc-act { display: flex; gap: 6px; }
.act { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, transform .15s; text-decoration: none; }
.act:hover { border-color: var(--ink); color: var(--ink); }
.act:active { transform: scale(.96); }
.act.primary { background: var(--k, var(--ink)); border-color: transparent; color: #fff; }
.act.primary:hover { filter: brightness(1.1); color: #fff; }
.act i { font-size: .95em; }
.docs-block { margin: 30px 0 6px; }
.docs-block h3 { display: flex; align-items: center; gap: 8px; }
.docs-block .count { font-size: .78rem; background: var(--sage); color: var(--ink-2); border-radius: 999px; padding: 1px 9px; font-weight: 500; }

/* list rows */
.row-item { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); transition: background-color .2s; }
.row-item:hover { background: color-mix(in srgb, var(--k) 5%, #fff); }
.row-item .ic { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--k) 12%, #fff); color: var(--k); display: grid; place-items: center; font-size: 1.2rem; transition: transform .3s var(--ease), background-color .2s, color .2s; }
.row-item:hover .ic { background: var(--k); color: #fff; transform: scale(1.05); }
.ri-main { min-width: 0; }
.ri-main h3 { margin: 0 0 3px; font-size: 1.02rem; }
.ri-main h3 a { color: var(--ink); }
.ri-main h3 a.stretch::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.ri-main p { margin: 0; color: var(--ink-2); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ri-side { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.ri-side time { color: var(--ink-2); font-size: .84rem; white-space: nowrap; }
.ri-acts { display: flex; gap: 6px; }
.ri-acts .act { width: 38px; padding: 0; justify-content: center; }
.ftag { font-size: .76rem; font-weight: 600; color: var(--k); background: color-mix(in srgb, var(--k) 10%, #fff); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chev { color: var(--ink-2); transition: transform .25s var(--ease); }
.row-item:hover .chev { transform: translateX(-4px); }
[dir=ltr] .row-item:hover .chev { transform: translateX(4px); }
.row-item .player { position: relative; z-index: 1; margin-top: 10px; }

/* audio player */
.player { --k: #0f766e; display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--k) 7%, #fff); border: 1px solid color-mix(in srgb, var(--k) 18%, var(--line)); }
.pl-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--k); color: #fff; font-size: 1.05rem; cursor: pointer; position: relative; transition: transform .2s var(--ease); }
.pl-btn i.fa-play { margin-inline-start: 3px; }
[dir=rtl] .pl-btn i.fa-play { margin-inline-start: 0; margin-inline-end: 3px; transform: scaleX(-1); }
.pl-btn:hover { transform: scale(1.06); }
.player.playing .pl-btn::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--k); opacity: .5; animation: ring 1.6s ease-out infinite; }
@keyframes ring { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.25); opacity: 0; } }
.pl-top { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; margin-bottom: 7px; }
.pl-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.pl-time { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-bar { position: relative; height: 26px; cursor: pointer; border-radius: 6px; overflow: hidden; touch-action: none; }
.pl-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.pl-bars i { flex: 1; min-width: 1px; border-radius: 2px; background: color-mix(in srgb, var(--k) 26%, transparent); height: var(--h, 40%); }
.pl-bars.fill { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.pl-bars.fill i { background: var(--k); }
[dir=rtl] .pl-bars.fill { clip-path: inset(0 0 0 calc(100% - var(--p, 0%))); }
.pl-bar:focus-visible { outline: 2px solid var(--k); }
.pl-dl { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--k); border: 1px solid color-mix(in srgb, var(--k) 25%, var(--line)); background: #fff; }
.pl-dl:hover { background: var(--k); color: #fff; }

/* preview modal */
.viewer { position: fixed; inset: 0; z-index: 95; background: rgba(12,22,19,.82); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 3vh 3vw; }
.viewer[hidden] { display: none; }
.viewer-box { width: min(1100px, 100%); height: min(92vh, 100%); background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
html.motion .viewer:not([hidden]) .viewer-box { animation: zoomin .35s var(--ease); }
html.motion .viewer:not([hidden]) { animation: fadein .25s ease; }
@keyframes zoomin { from { transform: translateY(14px) scale(.97); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
.viewer-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.viewer-bar b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 12%, #fff); }
.viewer-body { flex: 1; min-height: 0; background: #2a2f2d; display: grid; place-items: center; }
.viewer-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer-body img, .viewer-body video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-body .msg { color: #fff; text-align: center; padding: 30px; }

@media (max-width: 640px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 46px minmax(0, 1fr); }
  .doc-ic { width: 46px; height: 52px; }
  .doc-act { grid-column: 1 / -1; }
  .doc-act .act { flex: 1; justify-content: center; }
  .row-item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .row-item .ic { width: 40px; height: 40px; }
  .ri-side { grid-column: 2; flex-wrap: wrap; }
  .act span { display: none; }
  .doc-act .act span { display: inline; }
  .viewer { padding: 0; }
  .viewer-box { height: 100%; border-radius: 0; }
}
html.a11y-still [data-reveal] { opacity: 1 !important; transform: none !important; }
html.a11y-still * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.row-item .pl-title { visibility: hidden; } .row-item .pl-top { margin-bottom: 2px; }
.doc-grid .doc { grid-template-columns: 54px minmax(0, 1fr); align-content: start; }
.doc-grid .doc-act { grid-column: 1 / -1; justify-content: flex-end; padding-top: 10px; border-top: 1px dashed var(--line); }
.doc-bd small { white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.pdf-embed { margin: 6px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: #525659; height: min(78vh, 900px); }
.pdf-embed iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 820px), (pointer: coarse) { .pdf-embed { display: none; } }

/* =====================================================================
   Instant search (command palette)
   ===================================================================== */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 22px; }
.hchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-size: .88rem; font-weight: 500; transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.hchip i { color: var(--olive); }
.hchip:hover { border-color: var(--olive); color: var(--ink); transform: translateY(-1px); }
.hchip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.hchip.on i { color: #c9d8bb; }
.hchip.sec { background: var(--sage); border-color: transparent; }
.page-chips { display: flex; gap: 8px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); padding-inline: 2px 24px; }
.page-chips::-webkit-scrollbar { display: none; }
.page-chips .hchip { flex: none; font-size: .84rem; padding: 6px 12px; }
@media (min-width: 900px) { .page-chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-inline: 0; } }
html.motion .page-chips .hchip { animation: rise .5s var(--ease) both; }
html.motion .page-chips .hchip:nth-child(n+2) { animation-delay: .05s; } html.motion .page-chips .hchip:nth-child(n+4) { animation-delay: .1s; } html.motion .page-chips .hchip:nth-child(n+6) { animation-delay: .15s; }

.qs { position: fixed; inset: 0; z-index: 96; background: rgba(12,22,19,.55); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.qs[hidden] { display: none; }
.qs-box { width: min(760px, 100%); max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -20px rgba(0,0,0,.5); }
html.motion .qs:not([hidden]) { animation: fadein .2s ease; }
html.motion .qs:not([hidden]) .qs-box { animation: qsin .3s var(--ease); }
@keyframes qsin { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.qs-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.qs-head > i { color: var(--olive); font-size: 1.15rem; }
.qs-input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1.15rem; color: var(--ink); background: transparent; }
.qs-input::-webkit-search-cancel-button { display: none; }
.qs-close { border: 0; background: none; cursor: pointer; padding: 0; }
kbd { font-family: inherit; font-size: .72rem; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--stone); color: var(--ink-2); }
.qs-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sage); border-top-color: var(--olive); opacity: 0; }
.qs.loading .qs-spin { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.qs-chips { display: flex; gap: 7px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.qs-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .84rem; cursor: pointer; transition: background-color .15s, border-color .15s; }
.qs-chip i { color: var(--olive); }
.qs-chip:hover { border-color: var(--olive); }
.qs-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.qs-chip[aria-pressed="true"] i { color: #c9d8bb; }
.qs-body { overflow-y: auto; padding: 8px; min-height: 120px; }
.qs-group { font-size: .78rem; color: var(--ink-2); padding: 10px 10px 4px; display: flex; justify-content: space-between; }
.qs-secs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.qs-sec { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: var(--sage); color: var(--ink); font-size: .88rem; font-weight: 500; }
.qs-sec small { color: var(--ink-2); font-weight: 400; }
.qs-sec[aria-selected="true"], .qs-sec:hover { background: var(--ink); color: #fff; }
.qs-sec[aria-selected="true"] small, .qs-sec:hover small { color: #c9d8bb; }
.qs-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; color: var(--ink); cursor: pointer; }
.qs-item .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 11%, #fff); }
.qs-item b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-item small { color: var(--ink-2); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.qs-item mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.qs-item[aria-selected="true"] { background: var(--stone); box-shadow: inset 3px 0 0 var(--accent); }
[dir=rtl] .qs-item[aria-selected="true"] { box-shadow: inset -3px 0 0 var(--accent); }
.qs-acts { display: flex; gap: 6px; }
.qs-acts .act { width: 34px; height: 34px; padding: 0; justify-content: center; }
.qs-empty { text-align: center; color: var(--ink-2); padding: 34px 20px; }
.qs-empty i { display: block; font-size: 1.8rem; color: var(--olive); margin-bottom: 8px; }
.qs-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); background: var(--stone); }
.qs-more { font-weight: 600; }
@media (max-width: 640px) {
  .qs { padding: 0; }
  .qs-box { max-height: 100vh; height: 100%; border-radius: 0; }
  .qs-foot span { display: none; }
}
.viewer { z-index: 97; }
.qs-sec mark { background: transparent; color: inherit; text-decoration: underline 2px var(--accent); }