/* Shared by the NgramReader and the Book Classifier (copied between the two apps; keep both copies the same). */
:root { --bg: #ffffff; --fg: #1b1b1b; --muted: #5a5a5a; --line: #e3e3e3; --line2: #cfcfcf; --accent: #1f5f99; --accent-fg: #fff; --soft: #eef3f8; --warn-bg: #fff6e0; --err-bg: #fdecea; --code: #8a2c18; --faint: #a9a9a9;
  --ui: Brill, 'Noto Serif', serif; --serif: Brill, 'Noto Serif', serif; --arabic: Amiri, 'Geeza Pro', serif; --panel-w: 340px; --fd: 0px; color-scheme: light; }
html { font-size: calc(16px + var(--fd)); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font: calc(14px + var(--fd))/1.45 var(--ui); }
a { color: var(--accent); }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em; color: var(--code); overflow-wrap: anywhere; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 18px 0 6px; }
h3 { font-size: 1rem; font-weight: 600; margin: 14px 0 4px; }
button { font: inherit; font-size: calc(13px + var(--fd)); min-height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg); color: var(--fg); cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }
input[type=text], input[type=search], select { font: inherit; padding: 7px 9px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg); color: var(--fg); min-width: 0; }

:root[data-theme=dark] { --bg: #16191d; --fg: #e8e8e8; --muted: #a8adb4; --line: #2f343b; --line2: #454b53; --accent: #7db8ea; --accent-fg: #0f1215; --soft: #222a33; --warn-bg: #3a3018; --err-bg: #3f2320; --code: #f0a58f; --faint: #8d949d; color-scheme: dark; }
dialog { background: var(--bg); color: var(--fg); }
.theme-sw button { min-height: 26px; padding: 0 8px; font-size: calc(12px + var(--fd)); }
.theme-sw.in-menu { display: none; }
::placeholder { color: var(--muted); opacity: 1; }
/* disabled controls: transparency alone falls below 4.5:1 on the dark ground */
:root[data-theme=dark] button:disabled { opacity: 1; color: var(--faint); }
:root[data-theme=dark] .seg.off { opacity: 1; }
:root[data-theme=dark] .seg.off button { color: var(--faint); }
:root[data-theme=dark] .seg.off button.on { background: var(--line2); border-color: var(--line2); color: var(--fg); }
/* the branded band: colours and proportions from design/branding-reference.png; sizes are fixed, the text-size buttons do not change it */
:root { --brand: #1f5f99; }
:root[data-app=classifier] { --brand: #b8560f; }
header.site { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 88px; padding: 0 24px 18px; background: var(--brand); color: #fff; }
.brand { min-width: 0; }
.brand a.name { display: grid; grid-template-columns: 44px auto; column-gap: 14px; align-items: center; color: #fff; text-decoration: none; }
.band-mark { grid-row: 1 / 3; width: 44px; height: auto; display: block; }
.band-title { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.brand .sub { color: rgba(255, 255, 255, 0.8); font-size: 13px; line-height: 1.25; white-space: nowrap; }
header.site nav { display: flex; gap: 28px; align-items: center; font-size: 16px; white-space: nowrap; }
header.site nav a, .band-link { color: #fff; text-decoration: none; }
header.site nav a:hover, .band-link:hover { text-decoration: underline; background: none; }
.band-link { background: none; border: none; padding: 0; min-height: 0; font: inherit; cursor: pointer; }
header.site a:focus-visible, header.site button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.band-menu { display: none; width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none; align-items: center; justify-content: center; background: none; border: none; }
.band-menu:hover { background: rgba(255, 255, 255, 0.12); }
.band-rule { position: absolute; left: 20px; right: 20px; bottom: 8px; width: calc(100% - 40px); height: 14px; display: block; pointer-events: none; }
:root[data-app=classifier] .band-rule { height: 8px; }
@media (max-width: 767px) {
  header.site { height: 64px; padding: 0 8px 12px 12px; gap: 8px; }
  .brand a.name { grid-template-columns: 30px auto; column-gap: 10px; }
  .band-mark { width: 30px; }
  .band-title { font-size: 17px; }
  .band-full { display: none; }
  .brand .sub { font-size: 11px; }
  .band-menu { display: inline-flex; }
  .theme-sw.in-row { display: none; }
  .theme-sw.in-menu { display: inline-flex; margin: 8px 12px 6px; }
  .theme-sw.in-menu button { min-height: 36px; padding: 0 10px; color: #fff; background: none; border-color: rgba(255, 255, 255, 0.6); }
  .theme-sw.in-menu button.on { background: #fff; color: var(--brand); border-color: #fff; }
  .band-rule { left: 10px; right: 10px; bottom: 5px; width: calc(100% - 20px); height: 8px; }
  :root[data-app=classifier] .band-rule { height: 6px; }
  header.site nav { display: none; position: absolute; z-index: 30; top: 100%; right: 8px; flex-direction: column; align-items: stretch; gap: 0; min-width: 190px; padding: 6px 0; background: var(--brand); border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
  header.site nav.open { display: flex; }
  header.site nav a, header.site nav .band-link { display: block; padding: 11px 16px; min-height: 44px; text-align: left; }
}
.fontsize { display: inline-flex; }
.fontsize button { min-height: 26px; width: 28px; padding: 0; border-radius: 0; margin-left: -1px; }
.fontsize button:first-child { border-radius: 5px 0 0 5px; margin-left: 0; }
.fontsize button:last-child { border-radius: 0 5px 5px 0; }
#translit-pop { position: absolute; z-index: 40; display: flex; gap: 3px; align-items: center; padding: 4px; background: var(--bg); border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.14); }
#translit-pop button { min-height: 34px; min-width: 34px; padding: 0 6px; font-size: calc(16px + var(--fd)); }
#translit-pop button.on { background: var(--soft); border-color: var(--accent); }
#translit-pop span { color: var(--muted); font-size: calc(11px + var(--fd)); padding: 0 4px; }
@media (pointer: coarse) { #translit-pop span { display: none; } }

.shell { display: flex; align-items: flex-start; min-height: calc(100vh - 88px); }
#panel { flex: 0 0 var(--panel-w); width: var(--panel-w); padding: 12px 16px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-self: stretch; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head h2 { margin: 0; font-size: calc(15px + var(--fd)); }
#strip { display: none; flex: 0 0 38px; align-self: stretch; border-right: 1px solid var(--line); padding: 8px 3px; }
#strip button { width: 30px; padding: 6px 0; min-height: 90px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#strip span { writing-mode: vertical-rl; font-size: calc(12px + var(--fd)); }
body.folded #panel { display: none; }
body.folded #strip { display: block; }
#content { flex: 1 1 0; min-width: 0; padding: 0 20px 28px; }
#topbar { position: sticky; top: 0; z-index: 5; background: var(--bg); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
#chips { flex: 1 1 340px; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 2px 10px; border-radius: 15px; border-color: var(--line2); font-size: calc(12.5px + var(--fd)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip span { color: var(--muted); }
.meta { color: var(--muted); font-size: calc(12.5px + var(--fd)); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
#tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
#tabs button { border: none; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 10px 13px; min-height: 42px; color: var(--muted); white-space: nowrap; font-size: calc(14px + var(--fd)); }
#tabs button.on { border-bottom-color: var(--fg); color: var(--fg); font-weight: 600; }
#tabs button:disabled { color: var(--faint); opacity: 1; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0 6px; font-size: calc(13px + var(--fd)); }
.toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.grow { flex: 1 1 auto; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button.on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.seg.off { opacity: 0.45; pointer-events: none; }
.xbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xbar select { font-size: calc(13px + var(--fd)); padding: 5px 6px; }
.span input { width: 110px; }
.chart { width: 100%; min-height: 420px; }
.chart.fill { height: max(460px, calc(100vh - 298px)); }
.chart.tall { margin-bottom: 18px; }
#empty { color: var(--muted); padding: 40px 0; }

#lines { display: flex; flex-direction: column; gap: 6px; }
.line { display: flex; gap: 6px; }
.line input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(13px + var(--fd)); }
.line .remove { width: 34px; padding: 0; }
fieldset.mode { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: calc(13px + var(--fd)); }
fieldset.mode legend { font-weight: 600; padding: 0; margin-bottom: 2px; }
.hint, .note { color: var(--muted); font-size: calc(13px + var(--fd)); margin: 6px 0; }
.msg { padding: 8px 12px; border-radius: 6px; margin-top: 10px; }
.msg.error { background: var(--err-bg); }
.msg.warn { background: var(--warn-bg); }
#status { margin-top: 10px; font-style: italic; }
details.pv { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; font-size: calc(13px + var(--fd)); }
details.pv { overflow-x: auto; }
details.pv summary { cursor: pointer; overflow-wrap: anywhere; }
.pv-list td[dir=rtl] { white-space: nowrap; }
.pv-list th.num, .pv-list td.num { width: 1%; white-space: nowrap; }
.pv-key { color: var(--muted); }
.pv-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pv-tools input, .pv-tools select { font-size: calc(13px + var(--fd)); padding: 4px 6px; }
.pv-tools input { flex: 1; min-width: 120px; }
.pv-tools button { min-height: 28px; padding: 0 8px; }
table { border-collapse: collapse; width: 100%; font-size: calc(13px + var(--fd)); }
th, td { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
th { cursor: pointer; white-space: nowrap; user-select: none; font-weight: 600; }
th.asc::after { content: " ▲"; } th.desc::after { content: " ▼"; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td[dir=rtl] { text-align: right; font-family: var(--arabic); font-size: calc(17px + var(--fd)); }
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll td.num, .table-scroll th.num { width: 1%; white-space: nowrap; }
.table-scroll td:not(.num) { min-width: 9em; overflow-wrap: anywhere; }
table.pivot th:first-child, table.pivot td:first-child { text-align: left; white-space: nowrap; }
table.pivot td.num, table.pivot th.num { text-align: right; white-space: nowrap; }
#types-key { margin-top: 6px; }
table.pivot td.num { border: 1px solid var(--bg); }
.shaded { display: inline-block; padding: 1px 6px; border-radius: 3px; }
.how { background: var(--soft); border-radius: 6px; padding: 8px 14px; margin: 0 0 10px; }
.how summary { cursor: pointer; font-weight: 600; }
.how p, .how ul { margin: 6px 0; }
.how ul { padding-left: 20px; }
.howto ol { padding-left: 22px; margin: 8px 0 12px; }
.howto li { margin: 5px 0; }
.howto code span[lang=ar] { font-family: var(--arabic); font-size: 1.25em; }
.howto h2 { margin-top: 0; }
#empty .howto { max-width: 74ch; padding-top: 14px; }
#panel .howto { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#panel .howto h2 { font-size: calc(16px + var(--fd)); }
body.touring { padding-bottom: 250px; }
.tour-spot { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; scroll-margin-top: 72px; animation: tour-blink 1.2s ease-in-out infinite; }
tr.tour-spot { outline-offset: -3px; }
@keyframes tour-blink { 0%, 100% { outline-color: var(--accent); } 50% { outline-color: rgba(31,95,153,0.08); } }
@media (prefers-reduced-motion: reduce) { .tour-spot { animation: none; } }
#tour-card { position: fixed; z-index: 25; bottom: 16px; width: 372px; max-height: calc(100vh - 32px); overflow: auto; background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,0.18); padding: 12px 16px 12px; }
#tour-card[aria-busy] .tour-foot button { opacity: 0.5; pointer-events: none; }
#tour-card h3 { margin: 2px 0 6px; font-size: calc(16px + var(--fd)); }
.tour-name { margin: 0 112px 0 0; color: var(--muted); font-size: calc(12px + var(--fd)); }
.tour-text p { margin: 5px 0; }
.tour-more { margin: 6px 0 0; }
.tour-x { position: absolute; top: 6px; right: 6px; min-height: 26px; width: 26px; padding: 0; border: none; background: none; font-size: calc(18px + var(--fd)); }
.tour-skip { position: absolute; top: 9px; right: 34px; min-height: 22px; padding: 0 4px; border: none; background: none; color: var(--accent); text-decoration: underline; font-size: calc(12px + var(--fd)); }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tour-dots { display: inline-flex; gap: 4px; flex: 1 1 auto; justify-content: center; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); }
.tour-dots i.on { background: var(--accent); }
.tour-n { color: var(--muted); font-size: calc(12px + var(--fd)); white-space: nowrap; }
@media (max-width: 599px) { #topbar { position: static; } .tour-spot { scroll-margin-top: 8px; } .tour-skip { min-height: 32px; top: 4px; } .tour-x { min-height: 32px; width: 32px; top: 4px; right: 2px; } #tour-card { left: 0; right: 0; bottom: 0; width: auto; max-height: 46vh; border-radius: 12px 12px 0 0; border-width: 1px 0 0; } body.touring { padding-bottom: 46vh; } }
.book-cover { margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.book-cover img { display: block; width: 50%; height: auto; }
:root[data-theme=dark] .book-cover img { border: 1px solid var(--line2); }
.book-cover figcaption { margin-top: 8px; color: var(--muted); font-size: calc(13px + var(--fd)); line-height: 1.4; }
@media (max-width: 899px) { .book-cover img { width: 33%; } }
.tbl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 6px; }
.tbl-filter { font-size: calc(13px + var(--fd)); padding: 4px 8px; flex: 1 1 200px; min-width: 0; max-width: 360px; }
sup.uncertain { color: var(--muted); cursor: help; margin-left: 2px; }
.pager { display: flex; gap: 10px; align-items: center; margin: 6px 0; font-size: calc(13px + var(--fd)); }

footer { margin-top: 10px; padding: 14px 20px 26px; font-size: calc(13px + var(--fd)); color: var(--muted); border-top: 1px solid var(--line); text-align: center; }
footer p { max-width: 900px; margin-left: auto; margin-right: auto; }
.logos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.logos img { height: 50px; width: auto; background: #fff; border-radius: 3px; }
.version { font-size: calc(12px + var(--fd)); }
dialog { border: 1px solid var(--line2); border-radius: 8px; padding: 18px 22px; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto; color: var(--fg); }
dialog::backdrop { background: rgba(0,0,0,0.3); }
dialog .close { position: sticky; top: 0; float: right; min-height: 30px; width: 30px; padding: 0; }
.cite-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.cite-tabs button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cite-text { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: calc(13px + var(--fd)); overflow-wrap: anywhere; }
.cite-text pre { margin: 0; white-space: pre-wrap; font-size: calc(12px + var(--fd)); }
#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; background: var(--fg); color: var(--bg); padding: 7px 14px; border-radius: 6px; font-size: calc(13px + var(--fd)); }
@media (max-width: 899px) { #panel { flex-basis: 300px; width: 300px; } }
@media (max-width: 599px) {
  header.site { padding: 8px 12px; }
  #content { padding: 0 12px 24px; }
  #strip { flex: 0 0 auto; position: fixed; left: 0; bottom: 14px; z-index: 12; border: none; padding: 0 0 0 6px; }
  #strip button { flex-direction: row; min-height: 38px; width: auto; padding: 0 10px; background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  #strip span { writing-mode: horizontal-tb; }
  #panel { position: fixed; z-index: 20; top: var(--drawer-top, 0); bottom: 0; left: 0; width: min(88vw, 340px); background: var(--bg); box-shadow: 2px 0 14px rgba(0,0,0,0.18); overflow-y: auto; }
  .shell { display: block; }
  .chart.fill { height: 640px; }
  #topbar { padding: 6px 0; gap: 6px; }
  #chips, #what { flex: 1 1 100%; }
  #chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chip, .meta { flex: 0 0 auto; }
  .actions { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .actions button { flex: 0 0 auto; min-height: 30px; padding: 0 8px; font-size: calc(12px + var(--fd)); }
  #what h1 { font-size: calc(15px + var(--fd)); }
  #what .line2 { font-size: calc(12px + var(--fd)); max-height: 3.2em; overflow: hidden; }
  .logos img { height: 40px; }
}

/* ---- Book Classifier ---------------------------------------------------------------------------------------------- */
#what { flex: 1 1 340px; min-width: 0; }
#what h1 { font-family: var(--serif); font-size: calc(19px + var(--fd)); font-weight: 400; margin: 0; overflow-wrap: anywhere; }
#what .line2 { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: calc(13px + var(--fd)); color: var(--muted); align-items: baseline; }
.ar { font-family: var(--arabic); font-size: calc(17px + var(--fd)); color: var(--fg); unicode-bidi: isolate; }
#results-list h3 { font-size: calc(12px + var(--fd)); color: var(--muted); margin: 8px 0 4px; }
#results-list a.hit { display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--fg); margin-bottom: 4px; overflow-wrap: anywhere; }
#results-list a.hit.current { background: var(--soft); border-color: var(--line2); }
#results-list a.hit code { font-size: calc(11.5px + var(--fd)); color: var(--muted); }
#results-list a.hit .ar { text-align: right; }
.nodata { color: var(--muted); font-style: italic; padding: 10px 0; }
.text { font-size: calc(13.5px + var(--fd)); }
.chart + .chart { margin-top: 14px; }
#hdr-ctl { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
details.headers-table { margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
details.headers-table summary, details.essay summary { cursor: pointer; font-weight: 600; }