/* =============================================================================
sq-edition.css — «النسخة المحقَّقة» / The Critical Edition.
-----------------------------------------------------------------------------
THE COMPONENTS OF THE APPROVED DESIGN.
The bake-off picked identity B, whose concept is one sentence: *the site looks
like it is made of evidence — a modern critical edition where the margin is a
real column carrying the apparatus beside the text instead of buried under it.*
sq-theme.css already carried B's palette exactly, and sq-base.css now carries
its type and rhythm. What was missing was everything that makes it that design
rather than a tidy blog: the apparatus column, the sebka ornament, the running
rail, the marginalia strip, the verse spine, the verdict. This file is that,
ported from design/proto/b-edition with the token names translated and the
values left alone.
Token translation applied throughout:
--paper/-2/-3 -> --bg / --bg-2 / --track --red -> --accent
--ink-2/-3 -> --ink-soft / --ink-faint --red-deep -> --accent-deep
--rule/-2 -> --line / --line-strong --fs-* -> --t-*
--font-* -> --f-* --s1..s7 -> --e-1..--e-7
========================================================================== */
:root {
--pad: clamp(1.1rem, 4vw, 3rem); /* the sheet's own inline padding */
}
/* =============================================================================
ORNAMENT — a sebka interlace band.
Drawn after the carved stucco documented at Madīnat al-Zahrāʾ (Córdoba, built
936-940). It is written as *after* that tradition, not as a reproduction of any
one object, and the colophon says so and cites it.
It paints in currentColor so one drawing is correct on paper and on the dark
band. It appears only under the masthead, above the dark band, above the
colophon, and inside the frame of a plate that is missing — never behind
running text, never in cards, never around form controls.
========================================================================== */
.sq-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.band { display: block; inline-size: 100%; block-size: 3.75rem; color: var(--ink); opacity: .17; }
.band--thin{ block-size: 2.5rem; opacity: .15; }
/* THE CHROME BAND — under the masthead and above the colophon. Same strip the
sebka occupied, so a page that carries its era's drawing and a page that
carries the platform's sit on the same rhythm and nothing jumps between them.
The figural band needs the taller strip for the same reason .band--tall
exists: a horse, a rider and a raised sword inside 40px is four pixels of
rider. Its scale rises with the strip, in sq_motif_svg(), not here. */
.band--chrome { block-size: 2.5rem; opacity: .15; }
.band--chrome-tall { block-size: 3.25rem; opacity: .15; }
/* AN ERA THAT EARNED NO BAND. Not another era's drawing and not the platform's
either — the platform's band IS al-Andalus's entry in the register, so
borrowing it would attribute Andalusi ornament to an era the colophon is busy
explaining has none. A short centred rule: typographic furniture, holding the
strip's height so the page keeps its rhythm, claiming nothing. */
.band-rule { block-size: 2.5rem; display: grid; place-items: center; }
.band-rule::before {
content: ""; inline-size: 5rem; block-size: 1px;
background: var(--ink); opacity: .22;
}
.colophon .band-rule::before { background: var(--on-contrast); opacity: .3; }
.rosette { inline-size: 1.5rem; block-size: 1.5rem; color: var(--accent); flex: none; }
/* =============================================================================
RUNNING RAIL — the thin strip above the masthead.
========================================================================== */
.rail {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
border-block-end: var(--hair) solid var(--line);
background: var(--bg-2);
}
.rail-in {
max-inline-size: var(--maxw); margin-inline: auto; padding: .55rem var(--pad);
display: flex; gap: var(--e-3); align-items: baseline; justify-content: space-between;
flex-wrap: wrap;
}
.rail b { font-weight: 400; color: var(--ink-soft); }
.rail .sep{ color: var(--line-strong); }
.rail a { color: var(--ink-soft); text-decoration: none; }
.rail a:hover { color: var(--accent); }
/* =============================================================================
MASTHEAD — a wordmark on a 2px rule, not a floating nav bar.
========================================================================== */
/* inline-size:100% is load-bearing. sq-base.css makes a column flex
container (for the sticky footer), and an auto inline margin on a flex ITEM
overrides the default `align-items: stretch` — so this shrank to its content
width, 488px instead of 1320px, and the masthead sat in a huddle in the middle
of the page. .rail and .colophon are unaffected because their auto margin is on
an inner wrapper, not on the flex child itself. */
.masthead { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto;
padding: var(--e-4) var(--pad) 0; }
.mast-row {
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4);
border-block-end: 2px solid var(--ink); padding-block-end: var(--e-2);
flex-wrap: wrap;
}
.wordmark {
font-family: var(--f-display); font-size: var(--t-4xl); line-height: 1; color: var(--ink);
text-decoration: none; display: flex; align-items: center; gap: .6rem;
}
.wordmark .dot {
inline-size: .3rem; block-size: .3rem; background: var(--accent);
border-radius: 50%; margin-block-end: .55rem;
}
/* The tag beside the wordmark, naming the current part of the edition. */
.wordmark .tag {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
margin-inline-start: .75rem; align-self: flex-end; padding-block-end: .5rem;
}
@media (max-width: 44.99rem) { .wordmark .tag { align-self: center; padding-block-end: 0; } }
.mast-nav { display: flex; gap: var(--e-3); font-family: var(--f-ui); font-size: var(--t-xs);
color: var(--ink-soft); flex-wrap: wrap; }
.mast-nav a { text-decoration: none; padding-block-end: .15rem;
border-block-end: var(--hair) solid transparent; }
.mast-nav a:hover { color: var(--accent); border-block-end-color: var(--accent); }
.mast-nav a[aria-current] { color: var(--ink); border-block-end-color: var(--ink); }
/* =============================================================================
THE SHEET — one column, then two, then three.
At >=1250px: [ text 40rem ][ marginalia 7rem ][ apparatus 19.5rem ]
========================================================================== */
.sheet {
max-inline-size: 46rem; margin-inline: auto; padding: 0 var(--pad);
display: grid; column-gap: var(--gutter); row-gap: 0;
grid-template-columns: minmax(0, 1fr);
}
/* ---------- headnote ------------------------------------------------------ */
.headnote { padding-block: var(--e-5) var(--e-4); }
.hn-grid { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); }
.kicker {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent);
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
margin-block-end: var(--e-3);
}
.kicker .yr { color: var(--ink-faint); }
.kicker .tick { inline-size: 1.4rem; block-size: var(--hair); background: var(--accent); display: inline-block; }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { color: var(--accent-deep); }
h1.title {
font-family: var(--f-display); font-size: var(--t-title); line-height: 1.3;
text-wrap: balance; margin-block-end: var(--e-3); color: var(--ink);
}
h1.title .bracket { color: var(--accent); }
.standfirst {
font-size: var(--t-mid); line-height: var(--lh-mid); color: var(--ink-soft);
max-inline-size: 34rem; margin-block-end: var(--e-4);
}
.byline {
display: flex; align-items: center; gap: var(--e-2); padding-block: var(--e-2);
border-block: var(--hair) solid var(--line); max-inline-size: 34rem;
}
.sigil {
inline-size: 2.6rem; block-size: 2.6rem; flex: none; display: grid; place-items: center;
border: var(--hair) solid var(--line-strong); background: var(--bg-2);
font-family: var(--f-display); font-size: 1.05rem; color: var(--accent);
overflow: hidden;
}
.sigil svg { inline-size: 1.4rem; block-size: 1.4rem; }
.sigil img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.byline-t { font-family: var(--f-ui); font-size: var(--t-sm); line-height: 1.5; flex: 1 1 auto; min-inline-size: 0; }
.byline-t a { color: inherit; text-decoration: none; }
.byline-t a:hover { color: var(--accent); }
.byline-t > span { display: block; font-size: var(--t-2xs); color: var(--ink-faint); }
.cover { margin: 0; }
.cover img { inline-size: 100%; border: var(--hair) solid var(--line-strong); background: var(--bg-2); }
.cover figcaption {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
line-height: 1.6; padding-block-start: .5rem;
}
/* =============================================================================
THE APPARATUS — the margin as a real column.
========================================================================== */
.apparatus { font-family: var(--f-ui); align-self: start; padding-block-end: var(--e-5); }
.app-block { border-block-start: var(--hair) solid var(--line); padding-block: var(--e-3); break-inside: avoid; }
.app-block:first-child { border-block-start: 2px solid var(--ink); }
.app-h {
font-size: var(--t-2xs); color: var(--accent); line-height: 1.4;
display: flex; align-items: baseline; gap: .5rem; margin-block-end: var(--e-2);
font-weight: 400;
}
.app-h::after { content: ""; flex: 1; block-size: var(--hair); background: var(--line); transform: translateY(-.25rem); }
.app-n { color: var(--ink-faint); }
.dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem var(--e-2); margin: 0; }
.dl dt { font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.7; white-space: nowrap; }
.dl dd { margin: 0; font-size: var(--t-xs); color: var(--ink); line-height: 1.7; }
.dl dd.muted { color: var(--ink-faint); }
/* A value sits BESIDE its key. .sq-ltr isolates digits so a range like 251-341
cannot be reordered by the surrounding RTL run, but it also carries
text-align:left — which in a 13rem apparatus cell flings a bare number to
the far edge, 200px from the word it answers, while the RTL rows next to it
stay at the start. That split is what made «مبنى المتن» read as a scatter.
The box is LTR here, so `end` is the physical right: the RTL start. */
.dl dd.sq-ltr { text-align: end; }
.dl dd a { color: inherit; text-decoration: none; }
.dl dd a:hover { color: var(--accent); }
.dl .bar { grid-column: 1 / -1; block-size: var(--hair); background: var(--line); margin-block: .2rem; }
.app-note { font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.75; margin-block-start: var(--e-2); }
.app-note strong { font-weight: 400; color: var(--accent); }
/* contents, which travels with the reader so the margin is never empty */
.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; font-size: var(--t-xs); line-height: 1.55;
border-block-end: var(--hair) dotted var(--line-strong); }
.toc li:last-child { border-block-end: 0; }
.toc a {
display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .4rem; align-items: baseline;
text-decoration: none; padding-block: .5rem; color: var(--ink-soft);
transition: color var(--dur-1) var(--ease);
}
.toc a::before { content: counter(toc); font-size: var(--t-2xs); color: var(--ink-faint); }
.toc a:hover, .toc a:hover::before { color: var(--accent); }
.toc a[aria-current], .toc a[aria-current]::before { color: var(--accent); }
.toc a[aria-current] .t::after {
content: ""; display: inline-block; inline-size: .3rem; block-size: .3rem;
background: var(--accent); transform: rotate(45deg); margin-inline-start: .4rem; vertical-align: middle;
}
.toc li[data-level="3"] a { padding-inline-start: .4rem; }
/* the era plotted on a real axis */
.erabar { margin-block-start: var(--e-2); block-size: 3px; background: var(--track); position: relative; }
.erabar i { position: absolute; inset-block: 0; background: var(--accent); }
/* a ready-made citation for the study */
.cite {
font-size: var(--t-2xs); color: var(--ink-soft); line-height: 1.8; background: var(--bg-2);
border-inline-start: 2px solid var(--brass); padding: .7rem .8rem; margin-block-start: var(--e-2);
}
/* the numbered source register */
.src-list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.src-list li {
counter-increment: s; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr);
gap: .45rem; padding-block: .5rem; border-block-end: var(--hair) dotted var(--line-strong);
font-size: var(--t-xs); line-height: 1.5;
}
.src-list li::before { content: counter(s); font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.9; }
.src-list li:last-child { border-block-end: 0; }
.src-list li:target { background: var(--mark); }
.src-list a { text-decoration: none; display: block; }
.src-list .st { color: var(--ink); display: block; }
.src-list .sa { color: var(--ink-soft); font-size: var(--t-2xs); display: block; }
.src-list .dom { font-size: var(--t-2xs); color: var(--ink-faint); overflow-wrap: anywhere; }
.src-list a:hover .st, .src-list a:hover .dom { color: var(--accent); }
/* what each source actually carries */
.fields { margin-block-start: var(--e-2); display: grid; gap: .3rem; }
.fields div { display: flex; gap: .5rem; align-items: baseline; font-size: var(--t-2xs); color: var(--ink-faint); }
.fields .k { min-inline-size: 4.6rem; }
.fields .v { color: var(--ink-soft); }
.fields .v--none { color: var(--ink-faint); font-style: italic; }
.fields .v--none::before { content: "·"; color: var(--accent); margin-inline-end: .35rem; }
/* documentation meters */
.meter {
display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 1.9rem; gap: .5rem;
align-items: center; font-size: var(--t-2xs); color: var(--ink-faint); margin-block-end: .45rem;
}
.meter i { display: block; block-size: 4px; background: var(--track); position: relative; }
.meter i b { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--accent); display: block; font-size: 0; }
.meter u { text-decoration: none; text-align: end; color: var(--ink-soft); }
/* =============================================================================
حالة التوثيق — THE VERDICT.
Not another apparatus table. It is designed to be SCREENSHOTTED: a study
travels far from this site and this block is what travels back with it. So it
(a) stands alone when cropped, which is why it repeats the study's identity and
the platform mark, (b) is unmistakably ours at phone size, and (c) works
equally as an attack and as a defence. A block that flatters weak articles is
worth nothing.
========================================================================== */
.verdict {
border: var(--hair) solid var(--line-strong);
border-block-start: 3px solid var(--ink);
background: var(--bg);
padding: var(--e-3) var(--e-3) var(--e-2);
margin-block-end: var(--e-4);
}
.verdict-top {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--e-2); margin-block-end: var(--e-2);
border-block-end: var(--hair) solid var(--line); padding-block-end: var(--e-1);
}
.verdict-eyebrow { font-family: var(--f-ui); font-size: var(--t-2xs); font-weight: 700; color: var(--ink-soft); }
.verdict-mark { font-family: var(--f-display); font-size: var(--t-xs); color: var(--ink-faint); }
/* The two numbers, side by side. The reader does the division; the platform does
not, because any threshold it picked would be one it invented. */
.verdict-pair {
display: flex; align-items: flex-end; justify-content: center;
gap: var(--e-2); margin-block: var(--e-2) var(--e-3);
padding-block-end: var(--e-3); border-block-end: var(--hair) solid var(--line);
}
.vp { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.vp b { font-family: var(--f-display); font-size: var(--t-3xl); line-height: 1; color: var(--accent); font-weight: 400; }
/* Length is context, not the claim — it stays quiet so the source count reads first. */
.vp:last-of-type b { color: var(--ink-soft); }
.vp span { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); text-align: center; }
.vp-vs { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-faint); padding-block-end: .55rem; }
.verdict-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.verdict-row dt { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-soft); }
.verdict-row dd { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; color: var(--ink); margin: 0; }
/* الإحالات is a term of art. If the owner had to ask, a reader will too. */
.verdict-gloss { font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.6; color: var(--ink-faint); margin-block-start: var(--e-1); }
.verdict-sub { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); margin-block: var(--e-3) var(--e-1); }
.verdict-id {
margin-block-start: var(--e-2); padding-block-start: var(--e-1);
border-block-start: var(--hair) solid var(--line);
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.6; color: var(--ink-faint);
}
/* =============================================================================
THE TEXT
========================================================================== */
.text { padding-block-end: var(--e-6); min-inline-size: 0; }
.text h2 {
font-family: var(--f-display); font-size: var(--t-2xl); line-height: var(--lh-2xl);
color: var(--ink); margin-block: var(--e-5) var(--e-3); padding-block-start: var(--e-2);
border-block-start: 2px solid var(--ink); position: relative;
}
.text h2.invocation {
border-block-start: 0; text-align: center; font-size: var(--t-xl);
margin-block: var(--e-4) var(--e-5); padding-block-start: 0;
}
.text h2.invocation::after {
content: ""; display: block; inline-size: 3.5rem; block-size: var(--hair);
background: var(--brass); margin: var(--e-3) auto 0;
}
.text h2 + h3 { margin-block-start: var(--e-4); }
.text h3 {
font-family: var(--f-ui); font-size: var(--t-lg); font-weight: 700; line-height: var(--lh-lg);
margin-block: var(--e-5) var(--e-3); position: relative; color: var(--ink);
}
/* the § mark that hangs in the margin at full width */
.text h2[data-n]::before, .text h3[data-n]::before {
content: "§" attr(data-n);
font-family: var(--f-ui); font-weight: 400; font-size: var(--t-2xs); color: var(--accent);
display: block; margin-block-end: .15rem;
}
.text h2.invocation::before { display: none; }
.text p { margin-block-end: var(--e-3); text-align: start; hyphens: none; }
.text p:last-child { margin-block-end: 0; }
.text > br { display: none; }
.text ul, .text ol { margin-block: 0 var(--e-3); padding-inline-start: 1.5rem; list-style: none; }
.text li { margin-block-end: .55rem; position: relative; }
.text li::before {
content: ""; position: absolute; inset-inline-start: -1.15rem; top: .85em;
inline-size: .32rem; block-size: .32rem; background: var(--accent); transform: rotate(45deg);
}
.text blockquote {
margin: var(--e-4) 0; padding: var(--e-3); background: var(--bg-2);
border-inline-start: 2px solid var(--line-strong); font-size: var(--t-mid);
color: var(--ink-soft); line-height: 1.85;
}
/* tabulated evidence */
.table-scroll { overflow-x: auto; margin-block: var(--e-4); border-block-end: var(--hair) solid var(--line); }
.text table { border-collapse: collapse; inline-size: 100%; min-inline-size: 32rem;
font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.7; }
.text th {
text-align: start; font-weight: 400; color: var(--accent); font-size: var(--t-2xs);
padding: .65rem .8rem; border-block-end: 2px solid var(--ink); vertical-align: bottom; background: var(--bg);
}
.text td { padding: .7rem .8rem; border-block-end: var(--hair) solid var(--line); vertical-align: top; color: var(--ink-soft); }
.text td:first-child { color: var(--ink); font-family: var(--f-body); font-size: var(--t-mid); line-height: 1.75; }
.text tr:last-child td { border-block-end: 0; }
/* -----------------------------------------------------------------------------
THE HEADING LADDER BELOW h3.
h2 is 34px in the display face with a rule above it; h3 is 24px sans-bold
with its § mark. Running text is 21px. That leaves no room ABOVE the body for
a fourth level, so h4/h5/h6 separate themselves by FACE, WEIGHT and COLOUR
rather than by size — which is what an edition does once the scale runs out.
h4 used to be 15px, SMALLER than the 21px text it headed, which is why a
heading read as a stray caption rather than as structure.
h2 34px display major section, rule above
h3 24px sans 700 ink subsection, § mark
h4 21px sans 700 ink a labelled piece of evidence
h5 17px sans 700 rubric the reading of that evidence
h6 15px sans 700 faint last resort
h5 is live on three published studies (58, 62, 70) and had NO rule at all: it
fell through to the browser default of 0.83em bold, i.e. smaller than the
caption under an image. ---------------------------------------------------- */
.text h4 {
font-family: var(--f-ui); font-size: var(--t-base); font-weight: 700;
color: var(--ink); line-height: var(--lh-lg);
margin-block: var(--e-4) var(--e-2); display: block;
}
.text h5 {
font-family: var(--f-ui); font-size: var(--t-mid); font-weight: 700;
color: var(--accent); line-height: var(--lh-mid);
margin-block: var(--e-3) var(--e-2); display: block;
}
.text h6 {
font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 700;
color: var(--ink-faint); line-height: var(--lh-sm);
margin-block: var(--e-3) var(--e-1); display: block;
}
.text h3 + h4, .text h4 + h5, .text h5 + h6 { margin-block-start: var(--e-2); }
/* A VERSE RUBRIC is the other thing an h4 can be: not a heading over prose but
a label naming the couplet beside it — «البيت الثاني» over a .poem-verse.
includes/reading-normalizer.php adds `.rubric` on exactly that structural
test, and 40 of the corpus's 68 h4s are this. It reads as apparatus at every
width: small, rubricated, with a hairline. At three-zone width it also leaves
the column and hangs in the marginalia strip (see the 80rem block below). */
.text h4.rubric {
font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 400;
color: var(--accent); line-height: var(--lh-xs);
margin-block: var(--e-3) .4rem; display: flex; align-items: center; gap: .5rem;
}
.text h4.rubric::before {
content: ""; inline-size: .9rem; block-size: var(--hair);
background: var(--accent); flex: none;
}
/* -----------------------------------------------------------------------------
MARKUP CONTRACT — عمود.
poem-verse > arabic-poetry-hemisphere > verse-right (الصدر) / verse-separator /
verse-left (العجز). Exact class names, no substring matching, no invented
classes, no added wrappers. The separator is a hairline SPINE carrying a red
lozenge at its centre — not a dot floating in a gap.
-------------------------------------------------------------------------- */
.text .poem-verse { margin-block: var(--e-2) var(--e-4); }
.text .poem-verse .arabic-poetry-hemisphere {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
font-size: var(--t-lit); line-height: var(--lh-lit); color: var(--ink);
font-family: var(--f-lit);
}
.text .poem-verse .verse-right { text-align: end; min-inline-size: 0; }
.text .poem-verse .verse-left { text-align: start; min-inline-size: 0; }
.text .poem-verse .verse-separator { inline-size: 2.75rem; align-self: stretch; position: relative; }
.text .poem-verse .verse-separator::before {
content: ""; position: absolute; inset-block: .55rem; inset-inline-start: 50%;
inline-size: var(--hair); background: var(--line-strong);
}
.text .poem-verse .verse-separator::after {
content: ""; position: absolute; top: calc(50% - .19rem); inset-inline-start: calc(50% - .19rem);
inline-size: .38rem; block-size: .38rem; background: var(--accent); transform: rotate(45deg);
}
/* A بيت whose عجز is missing degrades to a single hemistich rather than half an
axis. The editor emits this shape (write-view.php) when an author leaves the
عجز empty, so it must be styled even though no article in the corpus uses it
yet — an unstyled fallback is a fallback that looks broken the first time it
is needed. */
.text .single-verse, .text .verse-line {
display: block; text-align: center; margin-block: .4em;
font-size: var(--t-lit); line-height: var(--lh-lit); font-family: var(--f-lit); color: var(--ink);
}
/* The editor's own preview footer. */
.reader-footer {
border-block-start: var(--hair) solid var(--line); margin-block-start: var(--e-5);
padding-block: var(--e-4); text-align: center;
font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-faint);
}
/* plates.
49 of the 88 published studies carry in-text images, and the normalizer emits
them as bare ![]()
with no figure and no caption — their alt text is the upload
filename, so there is no honest caption to draw from. They are therefore framed
rather than captioned: a hairline plate frame on the recessed ground, which is
what every other piece of evidence on the page sits in. An unframed image in a
text set this way reads as something that fell into the page. */
.text > img,
.text p > img {
display: block; inline-size: 100%; block-size: auto;
margin-block: var(--e-4);
border: var(--hair) solid var(--line-strong);
background: var(--bg-2);
}
/* ---- an image WITH its caption and its source --------------------------
49 of the 88 published studies carry a bare ![]()
with neither, because the
old editor could only insert the file. Those keep rendering exactly as above;
nothing is invented for them and nothing is migrated. A figure inserted from
now on carries three distinct things — the caption (what this is), the source
(whose it is), and the alt text (what a reader who cannot see it is told) —
because one field cannot honestly be all three.
No float, no alignment, no resize: the edition owns the layout. */
.text figure.study-figure { margin-block: var(--e-4); }
.text figure.study-figure img {
display: block; inline-size: 100%; block-size: auto;
border: var(--hair) solid var(--line-strong); background: var(--bg-2);
}
.text figure.study-figure figcaption {
display: block; margin-block-start: var(--e-2);
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.75;
}
.text figure.study-figure .figure-caption { display: block; color: var(--ink-soft); }
.text figure.study-figure .figure-source { display: block; color: var(--ink-faint); }
.text figure.study-figure .figure-source::before {
content: ""; display: inline-block; inline-size: .8rem; block-size: var(--hair);
background: var(--brass); margin-inline-end: .4rem; vertical-align: .3em;
}
.plate { margin: var(--e-4) 0; }
.plate img { inline-size: 100%; border: var(--hair) solid var(--line-strong); }
.plate-void {
aspect-ratio: 16 / 4.5; border: var(--hair) solid var(--line-strong); background: var(--bg-2);
position: relative; overflow: hidden;
}
.plate-void svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: var(--ink); opacity: .07; }
.plate-void span {
position: absolute; inset-block-end: 0; inset-inline-start: 0; background: var(--bg);
border-block-start: var(--hair) solid var(--line-strong);
border-inline-end: var(--hair) solid var(--line-strong);
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); padding: .35rem .6rem;
}
.plate figcaption {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
line-height: 1.7; padding-block-start: .5rem; display: flex; gap: .5rem; align-items: baseline;
}
.plate figcaption b { font-weight: 400; color: var(--accent); flex: none; }
/* =============================================================================
END MATTER — the register of what stands beside this study
========================================================================== */
.endmatter { padding-block: var(--e-4) var(--e-6); }
.end-mark {
display: flex; align-items: center; gap: .6rem; font-family: var(--f-ui);
font-size: var(--t-2xs); color: var(--ink-faint); margin-block-end: var(--e-5);
}
.end-mark::after { content: ""; flex: 1; block-size: var(--hair); background: var(--line); }
.end-h { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent);
margin-block-end: var(--e-2); display: flex; gap: .5rem; align-items: baseline; }
.rel { list-style: none; margin: 0; padding: 0; border-block-start: 2px solid var(--ink); }
.rel li { border-block-end: var(--hair) solid var(--line); }
.rel a { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--e-3);
align-items: start; padding-block: var(--e-3); text-decoration: none; }
.rel .th { inline-size: 4rem; block-size: 4rem; object-fit: cover;
border: var(--hair) solid var(--line-strong); background: var(--bg-2); }
.rel .th--none { display: grid; place-items: center; color: var(--line-strong); }
.rel .t { font-size: 1.2rem; line-height: 1.6; display: block; margin-block-end: .3rem; color: var(--ink); }
.rel .m { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
display: flex; gap: .5rem; flex-wrap: wrap; }
.rel a:hover .t { color: var(--accent); }
.rel-none { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-faint);
border-block-start: 2px solid var(--ink); padding-block: var(--e-3); }
/* =============================================================================
COLOPHON — the dark band that closes every page.
========================================================================== */
.colophon { background: var(--contrast); color: var(--on-contrast); margin-block-start: var(--e-5);
font-family: var(--f-ui); }
.colophon .band { color: var(--on-contrast); opacity: .22; }
.col-in { max-inline-size: var(--maxw); margin-inline: auto; padding: var(--e-4) var(--pad) var(--e-5);
display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
.col-h { font-size: var(--t-2xs); color: var(--accent-on-contrast); margin-block-end: var(--e-2); }
.col-b { font-size: var(--t-xs); line-height: 1.85; color: var(--on-contrast); opacity: .85; }
.col-b a { color: var(--on-contrast); }
.col-b a:hover { color: var(--accent-on-contrast); }
.col-b .sq-ltr { letter-spacing: .04em; } /* Latin only — ALReq §4.3.7.1 */
/* =============================================================================
RESPONSIVE — one column, two zones, then three.
========================================================================== */
@media (max-width: 44.99rem) {
/* Below 720px a hemistich cannot hold its half of the axis, so the بيت stacks
in reading order at FULL size rather than being shrunk to preserve the
desktop arrangement. */
.text .poem-verse .arabic-poetry-hemisphere { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
.text .poem-verse .verse-right,
.text .poem-verse .verse-left { text-align: start; }
.text .poem-verse .verse-separator { inline-size: auto; block-size: 1.1rem; align-self: center; }
.text .poem-verse .verse-separator::before {
inset-block: auto; top: calc(50% - .5px); inset-inline-start: calc(50% - 1.75rem);
inline-size: 3.5rem; block-size: var(--hair);
}
.text .poem-verse .verse-separator::after { top: calc(50% - .19rem); }
}
@media (min-width: 45rem) {
.hn-grid { grid-template-columns: minmax(0, 1fr) 15rem; }
.dl { grid-template-columns: 7.5rem minmax(0, 1fr); }
.col-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
}
/* two zones: text + apparatus */
@media (min-width: 58.75rem) {
.sheet { max-inline-size: var(--maxw); grid-template-columns: minmax(0, 1fr) var(--apparatus); }
.apparatus { align-self: stretch; }
.apparatus--tail { align-self: start; }
.app-block--sticky {
position: sticky; inset-block-start: var(--e-3); background: var(--bg);
max-block-size: calc(100vh - 3rem); overflow: auto; overscroll-behavior: contain;
}
.headnote { grid-column: 1 / -1; grid-row: 1; }
.hn-grid { grid-template-columns: minmax(0, 1fr) var(--apparatus); }
.text { grid-column: 1; grid-row: 2; max-inline-size: var(--measure); }
.apparatus { grid-column: 2; grid-row: 2; }
.endmatter { grid-column: 1; grid-row: 3; max-inline-size: var(--measure); }
.apparatus--tail { grid-column: 2; grid-row: 3; padding-block-start: var(--e-4); }
.dl { grid-template-columns: 5.5rem minmax(0, 1fr); }
}
/* three zones: text + marginalia strip + apparatus.
THE BREAKPOINT IS 80rem, NOT 78.125rem, and the arithmetic is the reason.
The three columns are fixed widths that do not compress:
--measure 40rem + --marginalia 7rem + --apparatus 19.5rem = 66.5rem
two --gutter gaps at their 2.5rem ceiling = 5rem
two --pad edges at their 3rem ceiling = 6rem
-------
77.5rem = 1240px
At the old 78.125rem (1250px) the layout engaged with 1235px of client
width once a scrollbar was taken — five pixels short — so the sheet
overflowed to the LEFT and clipped the apparatus off the edge of the
window. Measured: exactly 5px of horizontal overflow at a 1250px
viewport, and none at 1240 or 1255. 80rem leaves real headroom. */
@media (min-width: 80rem) {
.sheet { grid-template-columns: var(--measure) var(--marginalia) var(--apparatus); justify-content: center; }
.hn-grid { grid-template-columns: calc(var(--measure) + var(--marginalia)) var(--apparatus); }
/* .text SPANS text + marginalia (1/3) but declares only ONE column.
That single column is deliberate and load-bearing.
A grid container wraps any loose text node in an ANONYMOUS grid item, and
an anonymous item cannot be selected — `.text > *` matches elements only.
So while a second [mgn] column existed here, any unwrapped text in a study
was auto-placed into it and a whole paragraph rendered down a 7rem sliver
beside the text. That is what the owner reported as a paragraph that
"goes to the left"; it was live on study 58.
Nothing ever needed that column: everything that hangs in the margin does
it with `transform` (h4.rubric) or `position: absolute` (figcaption, the §
marks) out of the main column. The second track existed only to catch
stray items. DO NOT ADD IT BACK — with one column, loose text lands in the
measure on its own row and simply reads as the paragraph it is. */
.text {
grid-column: 1 / 3; grid-row: 2; max-inline-size: none;
display: grid; grid-template-columns: [main] var(--measure);
row-gap: 0; align-content: start;
}
.text > * { grid-column: main; min-inline-size: 0; }
/* The verse rubrics hang in the margin: a ZERO-HEIGHT row whose line box
overflows into the margin column, so each label sits beside the couplet it
names. This is what keeps the margin alive through a 42-couplet poem. */
/* ONLY a rubric hangs in the margin. includes/reading-normalizer.php adds
`.rubric` to an h4 whose next element IS or CONTAINS a verse — the one test
that separates «البيت الثاني» (a rubric) from «تحليل النص:» (a heading),
which are 12 and 11 characters and so indistinguishable by length. A
heading pulled in here would sit 680px from its own paragraph, which is
what the owner reported as text "in a format that got pushed away". */
.text > h4.rubric {
block-size: 0; inline-size: var(--marginalia); margin: 0; overflow: visible; position: relative;
top: .8rem; display: block; text-align: start; white-space: nowrap;
transform: translateX(calc(-1 * (var(--measure) + var(--gutter))));
}
.text > h4.rubric::before { display: none; }
/* At full width the caption leaves the column and hangs in the marginalia
strip beside its image, which is where a printed edition puts it. It is
only ever a line or two; if it runs longer it simply continues down the
strip rather than pushing the text. Below this breakpoint the rule above
applies and caption and source follow the image, stacked. */
.text figure.study-figure { position: relative; }
.text figure.study-figure figcaption {
position: absolute; inset-inline-end: calc(-1 * (var(--marginalia) + var(--gutter)));
inline-size: var(--marginalia); margin-block-start: 0; top: 0;
}
.text h2[data-n]::before, .text h3[data-n]::before {
position: absolute; inset-inline-end: calc(-1 * (var(--marginalia) + var(--gutter)));
inline-size: var(--marginalia); text-align: start; top: .55rem; margin: 0;
}
.text h2[data-n]::before { top: calc(var(--e-2) + .35rem); }
.apparatus { grid-column: 3; }
.endmatter { grid-column: 1 / 3; grid-row: 3; max-inline-size: none; }
.apparatus--tail { grid-column: 3; }
}
/* =============================================================================
SKIP LINK + READER PREFERENCES
-----------------------------------------------------------------------------
Both were defined against the pre-bake-off reader and were removed with it.
They are re-provided here against the edition's own element (.text), because
without them the toolbar's four buttons change a data-attribute that nothing
reads — the controls would be there and do nothing.
========================================================================== */
/* Hidden by clipping, not by a -9999px offset. In RTL an inline-start offset
parks the link off the RIGHT edge — measured at x=10389 on a 390px viewport —
which is a horizontal-overflow trap waiting for the first container that does
not clip it. Clipping cannot overflow anything. */
.skip-link {
position: absolute; inline-size: 1px; block-size: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
position: static; inline-size: auto; block-size: auto; clip-path: none;
display: inline-block; z-index: var(--z-toast);
padding: var(--sp-2) var(--sp-3);
background: var(--contrast); color: var(--on-contrast);
font-family: var(--f-ui); font-size: var(--t-xs); text-decoration: none;
}
/* The body face is Amiri (a naskh) already, so "نسخ" is the default state and
"حديث" swaps to the UI sans for readers who prefer it. The size steps are
multiplicative so they hold whatever the base scale is set to. */
html[data-font="sans"] .text { font-family: var(--f-ui); line-height: 1.85; }
html[data-font="naskh"] .text { font-family: var(--f-body); line-height: var(--lh-base); }
html[data-size="large"] .text { font-size: calc(var(--t-base) * 1.18); }
html[data-size="large"] .text .poem-verse .arabic-poetry-hemisphere { font-size: calc(var(--t-lit) * 1.12); }
/* footnote refs, if a study carries them */
.fn-ref { text-decoration: none; }
.fn-ref sup { font-size: .7em; font-weight: 600; color: var(--accent-deep); }
.fn-ref:hover sup { text-decoration: underline; }
/* the reading-progress hairline under the masthead */
.read-progress {
position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
block-size: 2px; background: var(--accent); inline-size: 0;
transition: inline-size var(--dur-1) linear;
}
/* =============================================================================
THE INDEX — «فهرس الإصدار»
-----------------------------------------------------------------------------
An index is not an article: it is wider and denser. The rules here are the
prototype's, translated. The three moves that carry it:
1. The lead is ASYMMETRIC and overlapping — the title block sits on paper and
rides over the plate on a hairline, instead of sitting in a box beside it.
2. مختارات المحرّر is 2fr/1fr/1fr with DIFFERENT image ratios and an excerpt on
the lead pick only. Hierarchy comes from content, not from clipping three
identical cards to three identical sizes.
3. الوارد حديثاً is a five-column ledger — plate, title+researcher, era, date,
reads — not a stack of cards. A register is what an edition keeps.
========================================================================== */
.wrap-index { max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
/* ---- the lead ------------------------------------------------------------ */
.lead { padding-block: var(--e-5) var(--e-6); display: grid; gap: var(--e-4);
grid-template-columns: minmax(0, 1fr); align-items: center; }
.lead-t { position: relative; }
.lead-label {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent);
display: flex; align-items: center; gap: .6rem; margin-block-end: var(--e-3);
}
.lead-label::after { content: ""; flex: 1; block-size: var(--hair); background: var(--line); }
.lead-title {
font-family: var(--f-display); font-size: clamp(2.1rem, 1rem + 3.4vw, 4rem);
line-height: 1.3; text-wrap: balance; margin-block-end: var(--e-3); color: var(--ink);
}
.lead-title a { color: inherit; text-decoration: none; }
.lead-title a:hover { color: var(--accent); }
.lead-ex { font-size: var(--t-mid); line-height: 1.8; color: var(--ink-soft); margin-block-end: var(--e-4); }
.lead-meta {
font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-faint);
display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem var(--e-2);
}
.lead-meta b { font-weight: 400; color: var(--ink); }
.lead-meta a { color: inherit; text-decoration: none; }
.lead-meta .go { color: var(--accent); border-block-end: var(--hair) solid var(--accent); }
.lead-fig { margin: 0; }
.lead-fig img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
border: var(--hair) solid var(--line-strong); background: var(--bg-2); }
.lead-fig figcaption { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
padding-block-start: .5rem; line-height: 1.6; }
/* ---- section heads ------------------------------------------------------- */
.sec-h { display: flex; align-items: baseline; gap: var(--e-3);
border-block-end: 2px solid var(--ink); padding-block-end: var(--e-2); margin-block-end: var(--e-3); }
.sec-h h2 { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.3; color: var(--ink); }
.sec-h .n { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.sec-h .more { margin-inline-start: auto; font-family: var(--f-ui); font-size: var(--t-2xs);
color: var(--accent); text-decoration: none; }
.sec-h .more:hover { color: var(--accent-deep); }
/* ---- the editor's picks -------------------------------------------------- */
.picks { padding-block-end: var(--e-6); }
.picks-grid { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
.pick { display: block; text-decoration: none; padding-block-start: var(--e-3); }
.pick img { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-block-end: var(--e-3);
border: var(--hair) solid var(--line-strong); background: var(--bg-2); }
.pick .k { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent); display: block; margin-block-end: .4rem; }
.pick .t { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.4; display: block;
color: var(--ink); margin-block-end: .5rem; }
.pick .ex { font-size: var(--t-mid); line-height: 1.8; color: var(--ink-soft); display: block; margin-block-end: .6rem; }
.pick .m { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
display: flex; gap: .5rem; flex-wrap: wrap; }
.pick:hover .t { color: var(--accent); }
.pick--lead img { aspect-ratio: 4 / 3; }
.pick--lead .t { font-size: 1.9rem; line-height: 1.35; }
.pick-none { display: grid; place-items: center; aspect-ratio: 1 / 1; margin-block-end: var(--e-3);
border: var(--hair) solid var(--line-strong); background: var(--bg-2); color: var(--line-strong); }
.pick--lead .pick-none { aspect-ratio: 4 / 3; }
/* ---- the polarity-flipped band ------------------------------------------- */
.strip { background: var(--contrast); color: var(--on-contrast); }
.strip .band { color: var(--on-contrast); opacity: .2; }
.strip-in { max-inline-size: var(--maxw); margin-inline: auto; padding: var(--e-5) var(--pad);
display: grid; gap: var(--e-4); }
.strip p { font-size: 1.35rem; line-height: 1.85; max-inline-size: 38rem; color: var(--on-contrast);
font-family: var(--f-body); }
.stats { display: flex; gap: var(--e-5); flex-wrap: wrap; align-items: flex-end; }
.stat b { display: block; font-family: var(--f-display); font-size: 2.9rem; line-height: 1;
color: var(--on-contrast); font-weight: 400; }
.stat span { display: block; font-family: var(--f-ui); font-size: var(--t-2xs);
color: var(--on-contrast-2); padding-block-start: .35rem; }
/* ---- the register + the era axis ----------------------------------------- */
.lower { padding-block: var(--e-6); display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); }
.reg { list-style: none; margin: 0; padding: 0; }
.reg li { border-block-end: var(--hair) solid var(--line); }
.reg a { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: .35rem var(--e-3);
padding-block: var(--e-3); text-decoration: none; align-items: start; }
.reg .th { grid-column: 1; grid-row: 1; inline-size: 3.25rem; block-size: 3.25rem; object-fit: cover;
border: var(--hair) solid var(--line-strong); background: var(--bg-2); }
.reg .th--none { display: grid; place-items: center; color: var(--line-strong); }
.reg .t { grid-column: 2; grid-row: 1; font-size: 1.2rem; line-height: 1.6; display: block; color: var(--ink); }
.reg .m { grid-column: 2; grid-row: 2; font-family: var(--f-ui); font-size: var(--t-2xs);
color: var(--ink-faint); display: flex; gap: .5rem; flex-wrap: wrap; }
.reg .m .era { color: var(--ink-soft); }
.reg-head { display: none; }
.reg a:hover .t { color: var(--accent); }
.reg a:hover { background: var(--bg-2); }
.eras { list-style: none; margin: 0; padding: 0; }
.eras li { padding-block: .55rem; border-block-end: var(--hair) dotted var(--line-strong); }
/* NO SPECIMEN IN THIS LIST, and that is a decision rather than an omission.
A drawing was briefly given a reserved cell at the head of every row. The
owner's objection — "as if we were treating it like an image or a logo" —
was about the ROLE that slot assigns, not about its edges. Astra, shown the
page: "Every row gives the drawing the same reserved position and footprint,
so it reads as an identifying emblem ... A drawing after a particular
catalogued object is evidence from that object; it is not necessarily an
emblem of an entire era." Twelve 36px figures also cost 432px of a 390px
screen before a single date is set.
The drawings live where they can be read and questioned: the captioned
register in the colophon, the era page, the study's apparatus, and the day's
entry on the home page and the era index. This list's job is the register —
name, count, span, and position on a real axis. */
.eras a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem var(--e-2);
align-items: baseline; text-decoration: none; }
.eras .nm { font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.eras .c { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-soft); }
.eras .c--zero { color: var(--ink-faint); }
.eras .yr { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
grid-column: 1 / -1; padding-block-start: .1rem; }
.eras .ax { grid-column: 1 / -1; block-size: 3px; background: var(--track); position: relative;
margin-block-start: .25rem; }
.eras .ax i { position: absolute; inset-block: 0; background: var(--accent); min-inline-size: 2px; display: block; }
.eras a:hover .nm { color: var(--accent); }
.axis-note { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
line-height: 1.7; padding-block-start: var(--e-2); }
@media (max-width: 44.99rem) {
.mast-row { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.wordmark { font-size: 2rem; flex-wrap: wrap; }
.mast-nav { flex-wrap: wrap; gap: var(--e-3) var(--e-4); }
}
@media (min-width: 45rem) {
.picks-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-4); }
.pick--lead { grid-column: 1 / -1; }
/* the ledger becomes a real five-column register */
.reg a { grid-template-columns: 3.25rem minmax(0, 1fr) 8rem 6rem 5rem; align-items: center; row-gap: .2rem; }
.reg .th { grid-column: 1; grid-row: 1 / 3; }
.reg .t { grid-column: 2; grid-row: 1; }
.reg .m { display: contents; }
.reg .m > span { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.reg .by { grid-column: 2; grid-row: 2; padding-block-start: 0; }
.reg .era { grid-column: 3; grid-row: 1 / 3; }
.reg .d { grid-column: 4; grid-row: 1 / 3; }
.reg .v { grid-column: 5; grid-row: 1 / 3; }
.reg-head { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 8rem 6rem 5rem;
gap: var(--e-3); font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent);
padding-block: .6rem; border-block-end: var(--hair) solid var(--line); }
.strip-in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-6); align-items: end; }
}
@media (min-width: 56.25rem) {
/* The lead's overlap: the text block is on paper and rides OVER the plate. */
.lead { grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr); gap: 0; }
.lead-t { z-index: 1; background: var(--bg); padding-block: var(--e-5);
padding-inline-end: var(--e-5); margin-inline-end: -2.5rem;
border-inline-end: var(--hair) solid var(--line); }
.picks-grid { grid-template-columns: 2fr 1fr 1fr; }
.pick--lead { grid-column: auto; }
.pick { padding-inline-end: var(--e-4); border-inline-end: var(--hair) solid var(--line); }
.pick:last-child { padding-inline-end: 0; border-inline-end: 0; }
}
@media (min-width: 67.5rem) {
.lower { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--e-6); }
}
/* One orchestrated moment on load, and only one. The global reduced-motion
override in sq-base.css neutralises it. */
@keyframes sq-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
.lead-t { animation: sq-rise .7s cubic-bezier(.2, .7, .3, 1) both; }
.lead-fig { animation: sq-rise .7s cubic-bezier(.2, .7, .3, 1) .1s both; }
}
/* =============================================================================
DOCUMENTS OF THE PLATFORM'S OWN VOICE
-----------------------------------------------------------------------------
about / privacy / terms / colophon / publishing-policy. They render through
sq_doc_open()/sq_doc_close() into the same three-zone sheet a study uses, so a
long text gets a contents that travels with the reader instead of a boxed list
at the top that scrolls away. `.doc` is a modifier on `.text` — it inherits the
reading surface and only adjusts what a document needs.
========================================================================== */
.text.doc { padding-block-start: var(--e-3); }
.doc-section { margin-block-end: var(--e-5); scroll-margin-block-start: var(--e-4); }
.doc-section > h2 { margin-block-start: 0; }
.doc-section:first-child > h2 { margin-block-start: 0; }
/* A called-out passage: an admission, a caveat, or a place waiting for the
owner's own words. Rubricated, because that is what the accent is for. */
.doc-note {
margin-block: var(--e-3); padding: var(--e-3);
background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
border-inline-start: var(--hair-2) solid var(--accent);
}
.doc-note p { margin-block-end: var(--e-2); }
.doc-note p:last-child { margin-block-end: 0; }
/* The colophon's typeface register. */
.colo-list { margin: 0; display: grid; gap: var(--e-3); }
.colo-item { padding-block: var(--e-3); border-block-start: var(--hair) solid var(--line); }
.colo-item:first-child { border-block-start: 2px solid var(--ink); }
.colo-item dt { display: flex; align-items: baseline; gap: var(--e-2); margin-block-end: var(--e-1); }
.colo-name { font-family: var(--f-display); font-size: var(--t-lg); color: var(--ink); }
.colo-latin { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.colo-item dd { margin: 0; }
.colo-role { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent); margin-block-end: var(--e-1); }
/* A stated gap is not an error. The accent marks what the era HAS; an era that has
nothing says so in the same voice as the rest of the page, not in alarm red. */
.colo-role--none { color: var(--ink-faint); }
.colo-note { font-size: var(--t-mid); color: var(--ink-soft); line-height: 1.8; margin-block-end: var(--e-1); }
.colo-lic { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.7; }
.colo-lic a { margin-inline-start: .4rem; }
.colo-lic--open { color: var(--ink-soft); }
.colo-pending { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-faint); }
/* The contact address: the one thing a reader came to that page for. */
.contact-addr { margin-block: var(--e-4); font-family: var(--f-ui); font-size: var(--t-lg); }
.contact-addr a {
text-decoration: none;
border-block-end: var(--hair-2) solid color-mix(in srgb, var(--accent) 35%, transparent);
padding-block-end: .12em;
}
.contact-addr a:hover { border-block-end-color: var(--accent); }
/* The closing acknowledgement on شروط الاستخدام — the sentence that says the
reader is bound by what they just read. */
.terms-cta {
margin-block-start: var(--e-5); padding: var(--e-4);
background: var(--bg-2); border-block-start: var(--hair-2) solid var(--ink);
}
.terms-cta p:last-child { margin-block-end: 0; }
/* A quiet aside inside a document. */
.doc .sec-note {
font-size: var(--t-xs); line-height: 1.8; color: var(--ink-faint);
padding-inline-start: var(--e-3);
border-inline-start: var(--hair) solid var(--line-strong);
}
/* =============================================================================
THE REGISTER PAGES — «السجلّ», «العصور», «البحث»
-----------------------------------------------------------------------------
browse-view, era-view and search-results-view are one object seen three ways:
a head that says what this selection IS, the RECORD of that selection beside
it in a real margin column, and then the five-column register underneath.
They are built almost entirely from the parts above — .headnote / .hn-grid for
the two zones, .kicker + h1.title + .standfirst for the head, .app-block + .dl
for the record, .sec-h for every section, .reg for the register, .eras for the
axis, .rel for the researcher list, .empty for an honest empty state. Three
pieces were genuinely missing, plus one rule that was scoped too tightly to
reach the register; they are here, and nothing else was added.
========================================================================== */
/* The record column on a listing page.
It IS the apparatus — same face, same rules, same 2px opening hairline — so it
uses .apparatus with the --free modifier below, which hands grid placement back
to whatever container it sits in. Two mechanisms for this briefly existed side
by side — a separate wrapper class, and this modifier. They are collapsed onto
the modifier, because a wrapper that restates the apparatus's own font and
alignment is a second definition of the margin's face, free to drift from the
first. */
.apparatus .cover { margin-block-end: var(--e-3); }
.apparatus .finder { margin-block-end: var(--e-3); }
/* 2. The search control. The edition had none: .hero-search was the old feed's
rounded pill on a card, and .nf-search belongs to the 404 page. On an
edition a finder is a ruled slot with a rule down the middle, not a pill. */
.finder { display: flex; border: var(--hair) solid var(--line-strong); background: var(--bg); }
.finder input {
flex: 1 1 auto; min-inline-size: 0; appearance: none; border: 0; background: none;
font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink);
padding: .6rem .7rem; line-height: 1.6;
}
.finder input::placeholder { color: var(--ink-faint); }
.finder input:focus { outline: none; background: var(--bg-2); }
.finder button {
flex: none; appearance: none; border: 0; cursor: pointer;
border-inline-start: var(--hair) solid var(--line-strong);
background: var(--bg-2); color: var(--accent);
font-family: var(--f-ui); font-size: var(--t-2xs); padding: .6rem .9rem;
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.finder button:hover { background: var(--contrast); color: var(--on-contrast); border-inline-start-color: var(--contrast); }
/* 3. The era's own sentence, under its row on the axis. The homepage index has
no room for it and does not carry it; an index OF the eras is the one page
where the description is the content rather than a caption. */
.eras .ds {
grid-column: 1 / -1; font-size: var(--t-sm); line-height: 1.8;
color: var(--ink-soft); padding-block-start: .4rem; max-inline-size: 46rem;
}
/* 4. The matched passage, under the title, in a register row. .reg is otherwise
a two-line row (title / meta); a search hit needs a third line, because the
point of a result is WHERE the word is, and only the passage shows that.
The :has() rule keeps the era/date/reads cells centred against the taller
row where it is supported, and is a pure enhancement where it is not. */
.reg .ex {
grid-column: 2; display: block; padding-block-start: .35rem;
font-size: var(--t-sm); line-height: 1.8; color: var(--ink-soft);
}
.reg .ex .hl { background: var(--mark); }
@media (min-width: 45rem) {
.reg .ex { grid-column: 2; grid-row: 3; }
.reg a:has(.ex) .era,
.reg a:has(.ex) .d,
.reg a:has(.ex) .v { grid-row: 1 / 4; }
}
/* 4. sq_title_html() colours a leading [tag] in every study title, but the only
rule for it was scoped to h1.title. In the register the tag therefore
rendered flat — which is exactly the «reads like a typo» case that rule
exists to prevent. */
.reg .t .bracket, .pick .t .bracket, .rel .t .bracket { color: var(--accent); }
/* 5. THE REFINE PANEL — «تضييق البحث», folded in from the deleted
advanced-search.php. It is not a new component: it is the .field / .field-check
form vocabulary the auth and settings pages already use, sitting inside the
.app-block the margin column already keeps, so a narrowing control reads as
part of the record of the query rather than as a widget dropped beside it.
Every rule below is scoped to .apparatus and changes only measure and voice.
What is NOT changed: the input font-size. sq-components sets it to 16px with a
comment saying why — anything smaller makes iOS Safari zoom the viewport on
focus and leaves the page scrolled sideways afterwards. The labels shrink to
the apparatus's own key size; the controls you actually type into do not. */
.apparatus .field { margin-block-end: var(--e-3); }
.apparatus .field:last-of-type { margin-block-end: var(--e-2); }
/* The label reads as an apparatus KEY (.dl dt), not as a form heading: same size,
same weight, same ink, so the panel and the query card below it speak once. */
.apparatus .field label,
.apparatus .field > .field-label {
font-size: var(--t-2xs); font-weight: 400; color: var(--ink-faint);
line-height: 1.7; margin-block-end: var(--e-1);
}
.apparatus .field-check { margin-block-end: var(--e-3); gap: var(--e-2); }
.apparatus .field-check label { font-size: var(--t-xs); color: var(--ink); }
/* Square, like every other editorial surface, and on the recessed ground the rest
of the margin column sits on. */
.apparatus .field input,
.apparatus .field select {
background: var(--bg); border-radius: var(--r-1); padding: .5rem .6rem;
min-inline-size: 0; max-inline-size: 100%;
}
/* Safari and Chrome give a date input an intrinsic width and centre its own
controls; without this the two bounds overflow a 15rem margin column at the
narrow step, which is the one width where nobody would notice in review. */
.apparatus .field input[type="date"] { inline-size: 100%; }
/* The panel's action. .btn is the platform's filled control; in the margin it runs
the column's full width and takes the apparatus's own spacing, so it closes the
block instead of floating in it. */
.apparatus .btn {
display: block; inline-size: 100%; text-align: center;
border: 0; padding: .55rem .9rem; margin-block-start: var(--e-2);
}
/* =============================================================================
THE PEOPLE — the directory of researchers and one researcher's record.
-----------------------------------------------------------------------------
researchers-view.php and author-view.php are built entirely out of the parts
above: .headnote / .kicker / h1.title / .standfirst / .byline + .sigil for the
front matter, .sheet + .apparatus + .endmatter for the researcher's record,
.lower for the directory's margin, .app-block / .dl / .eras / .erabar /
.verdict-sub / .meter for the apparatus itself, .sec-h + .reg-head + .reg for
the registers, .strip for the closing band. Five additions were genuinely
missing, and each is a rule on an EXISTING class rather than a new component.
========================================================================== */
/* 1. The apparatus column, used outside .sheet.
.apparatus carries explicit grid placement for the sheet — column 2, then
column 3 at the widest step. In any other container (the index's two-column
.lower, say) that placement conjures a phantom THIRD column and pushes the
page wider than the viewport. This modifier hands placement back to the
container and changes nothing else, so the margin keeps its face, its rules
and its 2px opening hairline. */
.apparatus--free { grid-column: auto; grid-row: auto; }
/* 2. Two ordering links in one section head.
.sec-h .more takes `margin-inline-start: auto` to sit at the end of the
rule; a second one must not take it again or the pair splits across the
whole row. The active order is marked with aria-current, not with a class,
because it is the same state the masthead already expresses that way. */
.sec-h .more + .more { margin-inline-start: var(--e-2); }
.sec-h .more[aria-current] { color: var(--ink); border-block-end: var(--hair) solid var(--ink); }
/* 3. A link inside the polarity band's prose.
--accent is a PAPER colour: #A32A1E on --contrast measures 1.7:1, which is
invisible. On the flip the link takes the band's own ink and is marked by a
rubricated underline instead. */
.strip p a { color: var(--on-contrast); text-decoration: none;
border-block-end: var(--hair) solid var(--accent-on-contrast); }
.strip p a:hover { color: var(--accent-on-contrast); }
/* 4. The register of PEOPLE carries one column more than the register of
studies. researchers-view.php can be ordered by deposits OR by reads, and a
register ordered on a number it does not show is unreadable — so both
numbers are columns. Everything else is .reg unchanged. */
@media (min-width: 45rem) {
.reg--people a,
.reg-head--people { grid-template-columns: 3.25rem minmax(0, 1fr) 6.5rem 5.5rem 5.5rem 5.5rem; }
.reg--people .rd { grid-column: 6; grid-row: 1 / 3; }
}
/* 5. A missing field inside a register row is STATED, not left blank — the same
contract the apparatus keeps with .dl dd.muted. It is marked the way the
source apparatus already marks an empty field (.fields .v--none): a
rubricated point, not a paler grey, because anything paler than --ink-faint
drops under AA and the gap has to stay readable to be admitted. */
.reg .m .none::before { content: "·"; color: var(--accent); margin-inline-end: .35rem; }
/* =============================================================================
END MATTER: the researcher, and the مداخلات
-----------------------------------------------------------------------------
Both live after the text, in the register of what stands beside the study. The
author card reuses the byline's sigil so the same person is marked the same way
at the head of the study and at its foot.
========================================================================== */
.author-card {
display: flex; gap: var(--e-3); align-items: flex-start;
padding-block: var(--e-4); margin-block-end: var(--e-5);
border-block: var(--hair) solid var(--line);
}
.author-card .name { font-family: var(--f-display); font-size: 1.2rem; color: var(--ink); }
.author-card .name a { text-decoration: none; color: inherit; }
.author-card .name a:hover { color: var(--accent); }
.author-card .meta {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent); margin-block: .2rem .4rem;
}
.author-card .bio { font-size: var(--t-mid); line-height: 1.8; color: var(--ink-soft); margin: 0; }
.author-card .bio.muted { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-faint); }
.comments { margin-block-start: var(--e-5); }
.comments .c-count { color: var(--ink-faint); }
.comment-login, .comment-empty, .comment-more {
font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.8;
}
.comment-login a { color: var(--accent); }
.comment-form { margin-block: var(--e-3) var(--e-4); }
.comment-form textarea {
inline-size: 100%; font-family: var(--f-body); font-size: var(--t-mid); line-height: 1.8;
color: var(--ink); background: var(--bg); border: var(--hair) solid var(--line-strong);
border-radius: var(--r-2); padding: var(--e-2); resize: vertical; min-block-size: 6rem;
}
.comment-form textarea:focus { border-color: var(--accent); outline: var(--hair-2) solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 1px; }
.cf-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; margin-block-start: var(--e-2); }
.cf-hint { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.cf-submit {
font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700;
color: var(--on-accent); background: var(--accent); border: 0;
border-radius: var(--r-2); padding: .5rem 1.1rem;
}
.cf-submit:hover { background: var(--accent-deep); }
.cf-replying {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-soft);
background: var(--bg-2); padding: .4rem .6rem; margin-block-end: var(--e-1);
display: flex; gap: var(--e-2); align-items: baseline;
}
.cf-replying button { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent); }
.comment-list { border-block-start: 2px solid var(--ink); }
.comment { padding-block: var(--e-3); border-block-end: var(--hair) solid var(--line); }
.comment-reply { margin-inline-start: var(--e-4); border-inline-start: var(--hair) solid var(--line); padding-inline-start: var(--e-3); }
.comment-head { display: flex; align-items: center; gap: var(--e-2); margin-block-end: var(--e-1); }
.c-avatar { inline-size: 1.8rem; block-size: 1.8rem; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.c-avatar-fallback {
display: grid; place-items: center; font-family: var(--f-display);
color: var(--accent); border: var(--hair) solid var(--line-strong); border-radius: 50%;
inline-size: 1.8rem; block-size: 1.8rem; font-size: var(--t-xs);
}
.c-author { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; color: var(--ink); }
.c-when { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.c-body { font-size: var(--t-mid); line-height: 1.85; color: var(--ink); }
.c-reply-btn { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent); margin-inline-start: auto; }
.c-reply-btn:hover { color: var(--accent-deep); }
/* Flash messages. Moved here with the rest of the chrome: the shell emits them on
every page, so they belong beside the rail and the masthead rather than in the
component sheet. Square, like every other editorial surface in this design. */
.flash {
padding: var(--e-2) var(--e-3); margin-block-end: var(--e-3);
font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.7;
border-inline-start: var(--hair-2) solid var(--line-strong); background: var(--bg-2);
}
.flash ul { margin: var(--e-1) 0 0; padding-inline-start: var(--e-3); }
.flash li { margin-block-end: var(--e-1); }
.flash-success { background: color-mix(in srgb, var(--ok) 10%, var(--bg-2)); border-inline-start-color: var(--ok); color: var(--ink); }
.flash-error { background: color-mix(in srgb, var(--danger) 8%, var(--bg-2)); border-inline-start-color: var(--danger); color: var(--ink); }
.flash-zone { max-inline-size: var(--maxw); margin-inline: auto; padding: var(--e-3) var(--pad) 0; }
.flash-zone:empty { display: none; }
/* The era's own ornament band, and the line that says what it is drawn after.
An era with no defensible source renders neither — the absence is the honest
state, and the colophon names which eras are in it. */
.band--era { block-size: 3rem; opacity: .16; margin-block: var(--e-3) 0; }
/* The figural band. Figures need more room than a lattice does: at 3rem the
rider on the horse is four pixels tall, which reads as a smudge rather than a
man with a sword. 4.5rem at the motif's own 1.2 scale shows exactly one tile. */
.band--era.band--tall { block-size: 4.5rem; }
.motif-note {
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.8;
color: var(--ink-faint); max-inline-size: 46rem; margin-block: var(--e-2) var(--e-4);
}
.motif-note a { color: var(--accent); margin-inline-start: .4rem; }
/* AN ERA THAT EARNED NO BAND, on its own page. The refusal gets the same strip
and the same note the band would have had, because on this platform a decision
not to draw is a result and not a blank. The rule inside it is what a reader
sees in the masthead of every page of this era, so the two agree. */
/* THE ORNAMENT INSIDE THE APPARATUS. Narrow column, so the band is quieter than
the chrome's and sits on its own rule — it is a catalogue entry here, not trim. */
.app-orn { margin-block-start: var(--e-3); padding-block-start: var(--e-3);
border-block-start: var(--hair) solid var(--line); }
.app-orn .band { opacity: .3; }
.app-orn .band-rule { block-size: 1.5rem; }
.app-orn .app-note { margin-block-start: var(--e-1); }
.app-orn .app-note b { color: var(--ink); font-weight: 600; }
.app-orn .app-note a { color: var(--accent); margin-inline-start: .35rem; }
/* THE REGISTER EXHIBITING ITSELF, on the home page. The drawing is the subject
here, so it gets the era page's full strip rather than the chrome's, and the
sentence under it explains the object rather than merely naming it. */
.ornament-of-day { margin-block-start: var(--e-6); grid-column: 1 / -1; }
.ornament-of-day .band { opacity: .22; }
.ornament-of-day .motif-note { margin-block: var(--e-2) var(--e-2); }
.ornament-of-day .motif-note b { color: var(--ink); font-weight: 600; }
/* A widened result set says so, at metadata weight — loud enough to be read
before the list, quiet enough not to look like an error. */
.app-note--broadened {
border-inline-start: var(--hair-2) solid var(--accent);
padding-inline-start: var(--e-2); margin-block: var(--e-2);
}
/* The request board's standing promise. Set as apparatus rather than as body
copy: it is a term of use, and it has to be readable before the list, not
discovered after someone has voted. */
.req-contract {
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.9;
color: var(--ink-soft); max-inline-size: 46rem;
margin-block-start: var(--e-3); padding-inline-start: var(--e-2);
border-inline-start: var(--hair-2) solid var(--line-strong);
}
.req-contract b { color: var(--ink); font-weight: 600; }
/* The newest shelf: the same rows at a quieter weight, and with no vote control —
support belongs to the one list, so a request cannot be voted from two places
and appear to have two different counts. */
/* .lower is a two-column grid on wide screens; without this the shelf lands in
the 21rem sidebar column and a request title wraps onto three lines. */
.reqs-new { margin-block-end: var(--e-5); grid-column: 1 / -1; }
.reqs--tight li { padding-block: .45rem; }
/* FOLLOWING A REQUEST. Folded shut by default: the board's job is to show what
readers want, and an email field open under every row would make the page look
like a mailing-list signup. Opening it is a deliberate act, which is the same
standard the follow itself is held to. */
.req-follow { margin-block-start: var(--e-2); }
.req-follow > summary {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent);
cursor: pointer; width: max-content;
}
.req-follow form {
display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2);
align-items: flex-start; margin-block-start: var(--e-2);
padding-inline-start: var(--e-2); border-inline-start: var(--hair) solid var(--line);
}
.req-follow input[type="email"] {
flex: 1 1 18rem; min-inline-size: 0;
font-family: var(--f-ui); font-size: var(--t-xs);
padding: .45rem .6rem; border: var(--hair) solid var(--line-strong);
border-radius: var(--r-1); background: var(--bg); color: var(--ink);
}
.req-follow input[type="email"]:focus { outline: none; border-color: var(--accent); }
.req-follow-note {
flex: 1 1 100%; order: 3;
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.8;
color: var(--ink-faint); margin: 0; max-inline-size: 42rem;
}
.req-open-since {
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.7;
color: var(--ink-faint); margin-block: .25rem 0;
}
.motif-absent { margin-block: var(--e-3) 0; }
.motif-absent .band-rule { block-size: 3rem; }
.motif-note--absent b { color: var(--ink); font-weight: 600; }
/* The objects that evidence an era's ornament. Each is a Latin sentence inside an
RTL document, so each gets its own row and its own bidi isolate (.sq-ltr) —
run together with a separator they reorder, and two citations read as one. */
.colo-src { list-style: none; margin: var(--e-1) 0 0; padding: 0; }
.colo-src li {
padding-block: .35rem; border-block-start: var(--hair) dotted var(--line-strong);
font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.7;
}
/* This list is inside .text, which hangs a red lozenge off every li at -1.15rem
into the list's own padding. These rows zero that padding and carry a dotted
rule instead, so the lozenge had nothing to hang in and landed in the page
gutter beside the column. These are the evidence lines; they are marked by the
rule, not by a bullet. */
.colo-src li::before { content: none; }
.colo-src li:first-child { border-block-start: 0; }
.colo-src a { color: var(--ink-soft); text-decoration: none; display: block; }
.colo-src a:hover { color: var(--accent); }
/* =============================================================================
THE REQUEST BOARD — «طلبات الدراسات»
-----------------------------------------------------------------------------
Not a variant of .reg. A register row is one link; a request row is a vote
control beside a body, and forcing it through .reg's single-anchor grid would
have meant overriding almost every rule in it.
========================================================================== */
.reqs { list-style: none; margin: 0; padding: 0; }
.reqs li {
display: grid; grid-template-columns: 4.25rem minmax(0, 1fr);
gap: var(--e-3); padding-block: var(--e-3);
border-block-end: var(--hair) solid var(--line);
}
/* The vote control. It is a form, not a link, because it mutates — and it is the
widest thing in the row's first column so the count reads as the row's weight. */
.req-vote { margin: 0; }
.req-vote button,
.req-vote--done {
display: grid; justify-items: center; gap: .1rem; inline-size: 100%;
padding-block: .5rem; border: var(--hair) solid var(--line-strong);
background: var(--bg-2); color: var(--ink-soft);
transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.req-vote button:hover { border-color: var(--accent); color: var(--accent); }
.req-n { font-family: var(--f-ui); font-size: var(--t-lg); line-height: 1; color: var(--ink); }
.req-lab { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.req-vote--done { background: none; border-style: dotted; }
.req-body { min-inline-size: 0; }
.req-t { display: block; font-size: 1.2rem; line-height: 1.6; color: var(--ink); }
.req-ex { font-size: var(--t-sm); line-height: 1.8; color: var(--ink-soft); margin-block-start: .35rem; }
.req-m { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: .35rem; }
/* The answered row points at the study that closed it. Accent, because it is the
only thing on this page that is finished. */
.req-done {
display: inline-block; margin-block-start: .4rem;
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent);
text-decoration: none; border-block-end: var(--hair) solid var(--line-strong);
}
.req-done:hover { border-block-end-color: var(--accent); }
.reqs--done .req-t { color: var(--ink-soft); }
/* The ask form. Fields are full-measure and stacked: label above input, which is
the one arrangement that survives RTL, long Arabic labels and a narrow phone. */
.req-ask { display: grid; gap: .35rem; max-inline-size: var(--measure); padding-block: var(--e-3) var(--e-5); }
.req-ask label {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-soft);
margin-block-start: var(--e-2);
}
.req-ask input, .req-ask textarea, .req-ask select {
inline-size: 100%; padding: .6rem .7rem; font-size: var(--t-ui);
border: var(--hair) solid var(--line-strong); background: var(--bg);
color: var(--ink); border-radius: var(--r-0);
}
.req-ask textarea { resize: vertical; line-height: 1.8; }
.req-ask button {
justify-self: start; margin-block-start: var(--e-3);
padding: .6rem 1.4rem; font-family: var(--f-ui); font-size: var(--t-ui);
border: var(--hair-2) solid var(--ink); background: var(--ink); color: var(--on-contrast);
}
.req-ask button:hover { background: var(--accent); border-color: var(--accent); }
.req-opt { color: var(--ink-faint); }
.req-hint { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); margin-block-start: var(--e-2); }
/* =============================================================================
THE REVIEW BENCH — review-view.php
-----------------------------------------------------------------------------
The reviewer reads the study on the reader's own sheet, in the reader's own
measure and face, so nothing here restyles the study itself. What is added is
only the instrument around it: where you are in the queue, what the reviewer
knows that the reader does not, and the decision.
The one place on this platform with real buttons. They are still restrained:
نشر is filled in the rubrication accent because publishing is the affirmative
editorial act and rubrication is exactly what a scribe reddened; the other two
are outlined, and رفض borrows --danger for its text only. No new hue enters
the palette for the sake of a traffic light.
========================================================================== */
/* The bench bar. Sticky so that on a 6,000-word study the way out is never more
than a glance away — a reviewer who has to scroll back up to move on will
instead open a new tab, and then decide twice on the same study. */
.rev-bar {
position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
margin-block-end: var(--e-4);
padding-inline: var(--pad);
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(6px);
border-block-end: var(--hair) solid var(--line);
}
.rev-bar-in {
display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap;
max-inline-size: var(--maxw); margin-inline: auto; padding-block: .6rem;
font-family: var(--f-ui);
}
.rev-pos { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.rev-pos-n { font-size: var(--t-lg); line-height: 1; color: var(--ink); }
.rev-pos-of { font-size: var(--t-2xs); color: var(--ink-faint); }
.rev-wait { margin: 0; font-size: var(--t-2xs); color: var(--ink-soft); }
.rev-nav { margin-inline-start: auto; display: flex; gap: var(--e-3); }
.rev-nav a,
.rev-nav-off { font-size: var(--t-2xs); text-decoration: none; }
.rev-nav a {
color: var(--accent);
border-block-end: var(--hair) solid var(--line-strong);
}
.rev-nav a:hover { border-block-end-color: var(--accent); }
.rev-nav-off { color: var(--ink-faint); }
/* A gap in the record, stated rather than hidden. Same reasoning as the
documentation card: the absence is information the reviewer is deciding on. */
.rev-gap { color: var(--ink-faint); font-style: normal; }
/* The reviewer's own block in the margin — the only apparatus section a reader
never sees, so it is marked off by a rule rather than by a colour. */
.rev-ctx { border-block-start: var(--hair-2) solid var(--line-strong); padding-block-start: var(--e-3); }
.rev-prev {
margin-block-start: var(--e-3); padding: var(--e-2) var(--e-3);
background: var(--bg-2); border-inline-start: var(--hair-2) solid var(--brass);
font-size: var(--t-xs); line-height: 1.8; color: var(--ink-soft);
}
.rev-prev b { color: var(--ink); }
/* An empty body is the one thing that must stop a publish, so it is loud. */
.rev-void {
max-inline-size: var(--measure); margin-inline: auto; margin-block: var(--e-5);
padding: var(--e-4); background: color-mix(in srgb, var(--danger) 7%, var(--bg-2));
border-inline-start: var(--hair-2) solid var(--danger);
}
.rev-void p { margin: 0; font-size: var(--t-sm); line-height: 1.9; color: var(--ink); }
/* The decision. Framed, at the foot, after the whole study — the order is the
argument: you do not get to decide before you have read. */
.rev-decide {
/* Aligned to the INLINE START, not centred. .endmatter spans the text column
plus the marginalia strip, so `margin-inline: auto` floated this panel half
a marginalia-width away from the edge the study's own text sits on, and the
decision looked like it belonged to a different page. */
max-inline-size: var(--measure); margin-inline: 0 auto;
margin-block: var(--e-6) var(--e-5); padding: var(--e-4);
background: var(--bg-2); border: var(--hair) solid var(--line-strong);
}
.rev-h {
margin: 0 0 var(--e-3); font-family: var(--f-display); font-size: var(--t-xl);
font-weight: 400; color: var(--ink);
}
.rev-lab {
display: block; font-family: var(--f-ui); font-size: var(--t-2xs);
color: var(--ink-soft); margin-block-end: .35rem;
}
.rev-note {
inline-size: 100%; padding: var(--e-2); background: var(--bg);
border: var(--hair) solid var(--line-strong); color: var(--ink);
/* One step down from reading size. The note is prose the researcher will read,
so it keeps the body face — but at --t-base in naskh a four-row box is most
of a phone screen and the placeholder reads as a headline. */
font-family: var(--f-body); font-size: var(--t-sm); line-height: 1.9;
resize: vertical;
}
.rev-note:focus-visible { outline: var(--hair-2) solid var(--accent); outline-offset: 1px; }
.rev-note::placeholder { color: var(--ink-faint); opacity: 1; }
.rev-hint {
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.8;
color: var(--ink-faint); margin-block: .5rem 0;
}
.rev-acts { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-block-start: var(--e-3); }
.rev-btn {
font-family: var(--f-ui); font-size: var(--t-sm); padding: .55rem 1.4rem;
border: var(--hair) solid var(--line-strong); background: var(--bg); color: var(--ink);
cursor: pointer;
transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
background-color var(--dur-1) var(--ease);
}
.rev-btn:focus-visible { outline: var(--hair-2) solid var(--accent); outline-offset: 2px; }
.rev-btn--publish {
background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.rev-btn--publish:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.rev-btn--changes:hover { border-color: var(--ink); }
.rev-btn--reject { color: var(--danger); }
.rev-btn--reject:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--bg)); }
/* The queue, folded away. Reachable, never in the way. */
.rev-queue { margin-block-start: var(--e-4); border-block-start: var(--hair) solid var(--line); padding-block-start: var(--e-3); }
.rev-queue summary {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-soft); cursor: pointer;
}
.rev-queue ol { margin: var(--e-3) 0 0; padding-inline-start: 1.6rem; }
.rev-queue li { margin-block-end: .5rem; font-size: var(--t-sm); line-height: 1.7; }
.rev-queue a { color: var(--ink); text-decoration: none; border-block-end: var(--hair) solid var(--line); }
.rev-queue a:hover { border-block-end-color: var(--accent); color: var(--accent); }
.rev-here > span:first-child { color: var(--accent); }
.rev-q-by {
display: block; font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
}
/* =============================================================================
THE EDITORIAL DESK — review-view.php, outer layer
-----------------------------------------------------------------------------
A row carries four things and no more: who and what, how long it has sat, how
much there is to read, and — only when it fires — a routing exception. There
are deliberately no badges for the ordinary case, no source counts and no
author record; those decide nothing on a list and invite judging a study by
its metadata. They live on the bench, behind the study itself.
The exception line is brass, not red. It says "the next step for this one is
different", which is routing, not alarm — and the house style has one accent.
========================================================================== */
/* The shell has no visually-hidden utility and the desk's search needs a label
that is announced but not drawn. */
.sq-sr {
position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
/* --- the bar: statuses and search ---------------------------------------- */
.desk-tabs { display: flex; flex-wrap: wrap; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.desk-tabs a {
display: inline-flex; align-items: baseline; gap: .35rem;
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-soft);
text-decoration: none; padding-block-end: .2rem;
border-block-end: var(--hair-2) solid transparent;
}
.desk-tabs a:hover { color: var(--ink); }
.desk-tabs .is-on a { color: var(--accent); border-block-end-color: var(--accent); }
.desk-n { font-size: var(--t-2xs); color: var(--ink-faint); }
.desk-tabs .is-on .desk-n { color: var(--accent); }
.desk-find { margin-inline-start: auto; display: flex; align-items: center; gap: .4rem; }
.desk-find input[type="search"] {
inline-size: 11rem; max-inline-size: 42vw; padding: .3rem .5rem;
background: var(--bg); border: var(--hair) solid var(--line-strong); color: var(--ink);
font-family: var(--f-ui); font-size: var(--t-2xs);
}
.desk-find input:focus-visible { outline: var(--hair-2) solid var(--accent); outline-offset: 1px; }
.desk-find button {
font-family: var(--f-ui); font-size: var(--t-2xs); padding: .3rem .8rem; cursor: pointer;
background: var(--bg-2); border: var(--hair) solid var(--line-strong); color: var(--ink-soft);
}
.desk-find button:hover { color: var(--accent); border-color: var(--accent); }
.desk-clear { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
/* --- the rows ------------------------------------------------------------- */
.desk { list-style: none; margin: 0; padding: 0; }
/* A row is a grid, not a stack. Stacked blocks in a full-width container leave
Arabic text hugging the right edge with two thirds of the page empty, and the
rule under each row then measures nothing. Three columns put the identity, the
measurements and the actions each in a fixed place, so thirty-two rows can be
scanned down a column instead of read one at a time — which is the whole point
of a desk. Collapses to one column below the tablet breakpoint. */
.desk-row {
padding-block: var(--e-4); border-block-end: var(--hair) solid var(--line);
display: grid; gap: .35rem var(--e-4);
grid-template-columns: minmax(0, 1fr);
}
.desk-row:last-child { border-block-end: none; }
.desk-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem var(--e-3); }
.desk-t {
font-size: 1.22rem; line-height: 1.6; color: var(--ink); text-decoration: none;
border-block-end: var(--hair) solid transparent;
}
.desk-t:hover { color: var(--accent); border-block-end-color: var(--accent); }
.desk-by { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-soft); }
.desk-m {
display: flex; flex-wrap: wrap; gap: .4rem var(--e-3); margin-block: .4rem 0;
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
}
.desk-age { color: var(--ink-soft); }
.desk-gap { color: var(--ink-faint); }
.desk-exc {
margin-block: .55rem 0; padding: .4rem var(--e-3);
background: var(--bg-2); border-inline-start: var(--hair-2) solid var(--brass);
font-size: var(--t-xs); line-height: 1.85; color: var(--ink-soft);
}
.desk-exc b { color: var(--ink); }
.desk-note {
margin-block: .55rem 0; font-size: var(--t-xs); line-height: 1.85; color: var(--ink-soft);
}
.desk-note b { color: var(--ink); font-family: var(--f-ui); font-size: var(--t-2xs); }
.desk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-block-start: .6rem; }
.desk-inline { margin: 0; display: inline; }
.desk-go, .desk-sec {
font-family: var(--f-ui); font-size: var(--t-2xs); text-decoration: none;
border-block-end: var(--hair) solid var(--line-strong);
background: none; border-inline: 0; border-block-start: 0; padding: 0; cursor: pointer;
}
.desk-go { color: var(--accent); }
.desk-go:hover { border-block-end-color: var(--accent); }
.desk-sec { color: var(--ink-faint); }
.desk-sec:hover { color: var(--ink); border-block-end-color: var(--ink); }
.desk-none {
max-inline-size: var(--measure); padding-block: var(--e-5);
font-size: var(--t-sm); line-height: 1.9; color: var(--ink-soft);
}
@media (min-width: 48rem) {
.desk-row {
grid-template-columns: minmax(0, 1fr) 14rem 10.5rem;
align-items: baseline;
}
.desk-id { grid-column: 1; grid-row: 1; }
.desk-m { grid-column: 2; grid-row: 1; margin-block: 0; display: grid; gap: .15rem; }
.desk-acts { grid-column: 3; grid-row: 1; margin-block: 0; justify-content: start; }
/* The exception and the decision note run under all three: they are prose about
the row, not a fourth column of it. */
.desk-exc, .desk-note { grid-column: 1 / -1; grid-row: 2; }
.desk-note + .desk-exc, .desk-exc + .desk-exc { grid-row: auto; }
}
/* --- the administrative-rejection preview --------------------------------- */
/* What was ACTUALLY submitted, verbatim. Scrolls inside its own box: a pasted
![]()
tag with a long URL is exactly the case here, and it must not push the
page sideways. */
.rev-raw {
margin-block: .4rem var(--e-3); padding: var(--e-3); max-block-size: 11rem;
overflow: auto; background: var(--bg); border: var(--hair) solid var(--line);
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.8;
color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere;
}
.rev-grounds { list-style: none; margin: .2rem 0 var(--e-3); padding: 0; }
.rev-grounds li { margin-block-end: .3rem; }
.rev-grounds label {
display: flex; align-items: baseline; gap: .5rem;
font-size: var(--t-sm); line-height: 1.8; color: var(--ink); cursor: pointer;
}
/* --- the decision history -------------------------------------------------- */
.rev-hist {
max-inline-size: var(--measure); margin-inline: 0 auto;
margin-block: var(--e-5) 0; padding-block-start: var(--e-3);
border-block-start: var(--hair-2) solid var(--line-strong);
}
.rev-hist ol { list-style: none; margin: 0; padding: 0; }
.rev-hist li { padding-block: var(--e-2); border-block-end: var(--hair) solid var(--line); }
.rev-hist li:last-child { border-block-end: none; }
.rev-hist b { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink); }
.rev-hist-m { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); margin-inline-start: .5rem; }
.rev-hist-n { margin-block: .3rem 0; font-size: var(--t-sm); line-height: 1.9; color: var(--ink-soft); }
.rev-back { margin-block-start: var(--e-3); font-family: var(--f-ui); font-size: var(--t-2xs); }
.rev-back a { color: var(--accent); text-decoration: none; border-block-end: var(--hair) solid var(--line-strong); }
.rev-back a:hover { border-block-end-color: var(--accent); }
/* --- correcting a study ---------------------------------------------------
Wider than a decision panel: a body textarea at reading measure is unusable
for checking markup, which is most of what this screen is for. */
.rev-edit { max-inline-size: 58rem; }
.rev-in {
inline-size: 100%; padding: .45rem var(--e-2); margin-block-end: var(--e-3);
background: var(--bg); border: var(--hair) solid var(--line-strong); color: var(--ink);
font-family: var(--f-body); font-size: var(--t-sm); line-height: 1.8;
}
.rev-in:focus-visible { outline: var(--hair-2) solid var(--accent); outline-offset: 1px; }
.rev-two { display: grid; gap: 0 var(--e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .rev-two { grid-template-columns: 1fr 1fr; } }
/* The raw markup, so it is read as markup. Monospaced digits and LTR tag names
inside RTL prose are exactly what a reviewer is here to check. */
.rev-body {
font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.9;
white-space: pre-wrap; overflow-wrap: anywhere;
}
.rev-feature { margin-block: var(--e-3) 0; }
/* --- the bounded intake batch ---------------------------------------------
Deliberately plain. A checkbox column on the pending tab and a confirmation
page that shows each submission whole: this is the one place on the platform
where several studies are decided at once, and the guard against that is
seeing them, not styling them. */
.desk--pick .desk-row { position: relative; }
.desk-pick { grid-column: 1 / -1; grid-row: 0; margin-block-end: .2rem; }
@media (min-width: 48rem) {
.desk--pick .desk-row { grid-template-columns: 1.6rem minmax(0, 1fr) 14rem 10.5rem; }
.desk--pick .desk-pick { grid-column: 1; grid-row: 1; margin: 0; }
.desk--pick .desk-id { grid-column: 2; grid-row: 1; }
.desk--pick .desk-m { grid-column: 3; grid-row: 1; }
.desk--pick .desk-acts { grid-column: 4; grid-row: 1; }
.desk--pick .desk-exc,
.desk--pick .desk-note { grid-column: 2 / -1; grid-row: 2; }
}
.desk-pick input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--accent); }
.desk-batch {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3);
margin-block-start: var(--e-4); padding-block-start: var(--e-3);
border-block-start: var(--hair) solid var(--line);
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
}
.desk-batch button {
font-family: var(--f-ui); font-size: var(--t-sm); padding: .5rem 1.2rem; cursor: pointer;
background: var(--bg); color: var(--danger);
border: var(--hair) solid var(--line-strong);
}
.desk-batch button:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--bg)); }
.intake { list-style: none; margin: 0 0 var(--e-4); padding: 0; }
.intake li {
display: grid; gap: .3rem var(--e-3); grid-template-columns: minmax(0, 1fr);
padding-block: var(--e-3); border-block-end: var(--hair) solid var(--line);
}
@media (min-width: 40rem) { .intake li { grid-template-columns: 7rem minmax(0, 1fr); } }
.intake-keep {
display: flex; align-items: center; gap: .4rem; cursor: pointer;
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-soft);
}
.intake-keep input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--accent); }
.intake-body b { display: block; font-size: 1.1rem; line-height: 1.6; color: var(--ink); }
.intake-m {
display: block; font-family: var(--f-ui); font-size: var(--t-2xs);
color: var(--ink-faint); margin-block: .2rem .4rem;
}
.intake-warn { color: var(--danger); }
/* The live text no longer being the approved text is the one state on a
published study that needs to look like a problem. Brass, not red: it is a
thing to resolve, not a failure. */
.rev-diverged {
margin-block: var(--e-3) 0; padding: var(--e-2) var(--e-3);
background: var(--bg-2); border-inline-start: var(--hair-2) solid var(--brass);
font-size: var(--t-sm); line-height: 1.9; color: var(--ink-soft);
}
.rev-diverged b { color: var(--ink); }
.rev-unrecorded { color: var(--ink-faint); }
.rev-check {
display: flex; align-items: center; gap: .5rem; margin-block: var(--e-2) 0;
font-size: var(--t-sm); color: var(--ink); cursor: pointer;
}
.rev-check input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--accent); }
.rev-cover {
margin-block-start: var(--e-4); padding-block-start: var(--e-3);
border-block-start: var(--hair) solid var(--line);
}
.rev-comments .rev-hist-n { color: var(--ink); }
.rev-preview {
margin-block: var(--e-4) 0; padding: var(--e-4);
background: var(--bg); border: var(--hair) solid var(--line-strong);
}
.rev-preview .text { max-inline-size: var(--measure); margin-inline: 0; }
.rev-revisions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.rev-approved-tag { color: var(--accent); font-family: var(--f-ui); font-size: var(--t-2xs); }
/* Reporting a comment: present, never prominent. */
.c-report {
font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
text-decoration: none; margin-inline-start: var(--e-2);
}
.c-report:hover { color: var(--danger); }
.rep-quote {
margin: var(--e-2) 0 var(--e-3); padding: var(--e-2) var(--e-3);
background: var(--bg); border-inline-start: var(--hair-2) solid var(--line-strong);
font-size: var(--t-sm); line-height: 1.9; color: var(--ink);
}
/* =============================================================================
THE EDITORIAL LANDING PAGE — admin-view.php
-----------------------------------------------------------------------------
One question: what is waiting, and how long has it waited. The counts are the
loudest thing on the page and everything else is quiet, because the page
exists to be glanced at and left. A row with nothing waiting stays grey; only
a non-zero count takes the accent.
========================================================================== */
.adv-queue { list-style: none; margin: 0 0 var(--e-6); padding: 0; }
.adv-queue li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3);
padding-block: var(--e-3); border-block-end: var(--hair) solid var(--line);
}
.adv-queue li:last-child { border-block-end: none; }
.adv-n {
font-family: var(--f-ui); font-size: var(--t-2xl); line-height: 1;
color: var(--ink-faint); min-inline-size: 3.5rem;
}
.is-waiting .adv-n { color: var(--accent); }
.adv-t { font-size: var(--t-base); line-height: 1.7; color: var(--ink-soft); }
.is-waiting .adv-t { color: var(--ink); }
.adv-go {
margin-inline-start: auto; font-family: var(--f-ui); font-size: var(--t-2xs);
color: var(--accent); text-decoration: none;
border-block-end: var(--hair) solid var(--line-strong);
}
.adv-go:hover { border-block-end-color: var(--accent); }
.adv-unmeasured { color: var(--ink-faint); }
.adv-block { margin-block-end: var(--e-6); }
.adv-h {
margin: 0 0 var(--e-3); font-family: var(--f-display); font-size: var(--t-xl);
font-weight: 400; color: var(--ink);
}
.adv-note {
margin-block-start: var(--e-3); max-inline-size: var(--measure);
font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.9;
color: var(--ink-faint);
}
/* No max-inline-size here. The counts list above and the .adv-doors grid below
both run the full column; constraining the decisions log to the reading
measure left its hairlines stopping short of every other rule on the page,
which reads as breakage rather than as a measure. These lines are a label and
a date, not prose — they do not need one. */
.adv-log { list-style: none; margin: 0; padding: 0; }
.adv-log li { padding-block: var(--e-2); border-block-end: var(--hair) solid var(--line); }
.adv-log li:last-child { border-block-end: none; }
.adv-log b { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink); }
.adv-m { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); margin-inline-start: .5rem; }
.adv-d { margin-block: .25rem 0; font-size: var(--t-sm); line-height: 1.9; color: var(--ink-soft); }
/* ---- admin-comments-view.php ----------------------------------------------
The comment desk. Same furniture as the review bench (.rev-btn), because a
comment decision and a study decision are the same kind of act and should not
look like two different products. */
.acv-tabs {
display: flex; flex-wrap: wrap; gap: var(--e-3);
font-family: var(--f-ui); font-size: var(--t-xs);
margin-block: var(--e-4) var(--e-3);
padding-block-end: var(--e-2);
border-block-end: var(--hair) solid var(--line);
}
.acv-tabs a { color: var(--ink-soft); text-decoration: none; }
.acv-tabs a span { color: var(--ink-faint); margin-inline-start: .3rem; }
.acv-tabs a[aria-current="page"] { color: var(--accent-deep); }
.acv-tabs a:hover { color: var(--ink); }
.acv-list { list-style: none; margin: 0; padding: 0; }
.acv-list > li {
padding-block: var(--e-3);
border-block-end: var(--hair) solid var(--line);
}
.acv-list > li:last-child { border-block-end: none; }
.acv-who { margin: 0 0 var(--e-1); font-family: var(--f-ui); font-size: var(--t-sm); }
.acv-who a { color: var(--ink); }
.acv-body {
margin: 0; max-inline-size: var(--measure);
font-size: var(--t-sm); line-height: 1.95; color: var(--ink-soft);
}
.acv-on { margin: var(--e-1) 0 0; font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.acv-on a { color: var(--ink-soft); }
.acv-gone { color: var(--ink-faint); font-style: italic; }
.acv-label {
margin: 0 0 var(--e-1); font-family: var(--f-ui);
font-size: var(--t-2xs); color: var(--ink-faint);
}
/* The line being answered, set back from the one under judgement so the eye
knows which is which without reading. */
.acv-parent {
margin-block: var(--e-3);
padding-inline-start: var(--e-2);
border-inline-start: var(--hair) solid var(--line-strong);
opacity: .78;
}
.acv-focus {
margin-block: var(--e-3);
padding-inline-start: var(--e-2);
border-inline-start: var(--hair-2) solid var(--accent);
}
.acv-tag { color: var(--ink-faint); }
.acv-tag--flag { color: var(--accent-deep); }
.acv-acts { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-block-start: var(--e-2); }
.acv-act { margin: 0; }
.acv-reports { list-style: none; margin: 0; padding: 0; }
.acv-reports li {
padding-block: var(--e-2);
border-block-end: var(--hair) solid var(--line);
}
.acv-reports li:last-child { border-block-end: none; }
.acv-reports b { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink); }
.acv-pages {
display: flex; gap: var(--e-3); align-items: baseline;
margin-block-start: var(--e-4);
font-family: var(--f-ui); font-size: var(--t-xs);
}
/* ---- who is reading: the masthead account strip ---------------------------
The chrome told a signed-in reader nothing at all. This is the whole of the
signed-in indicator, so it has to read as part of the masthead rather than as
an applied widget: the same UI face and size as the nav, set off only by a
hairline. */
.mast-you {
display: flex; align-items: baseline; gap: var(--e-2);
margin-inline-start: auto;
font-family: var(--f-ui); font-size: var(--t-xs);
padding-inline-start: var(--e-3);
border-inline-start: var(--hair) solid var(--line);
}
.mast-you a { text-decoration: none; }
.you-name { color: var(--ink); }
.you-name::before {
/* A filled mark, the same rubric as the wordmark's dot: present = signed in. */
content: ""; display: inline-block; inline-size: .4em; block-size: .4em;
border-radius: 50%; background: var(--accent);
margin-inline-end: .45em; vertical-align: .15em;
}
.you-do, .you-in { color: var(--accent-deep); }
.mast-you a:hover { color: var(--accent); }
@media (max-width: 40rem) {
/* On a phone the masthead already wraps; the account strip goes to its own
line rather than squeezing the nav. The footer carries the full set. */
.mast-you { margin-inline-start: 0; border-inline-start: none; padding-inline-start: 0; }
}
/* ---- admin-requests-view.php: the study-linking search ------------------- */
.arv-find {
display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-end;
margin-block: var(--e-3);
}
.arv-find label {
flex: 1 1 100%; font-family: var(--f-ui); font-size: var(--t-2xs);
color: var(--ink-faint);
}
.arv-find input[type="search"] {
flex: 1 1 18rem; min-inline-size: 0;
font-family: var(--f-ui); font-size: var(--t-sm);
padding: .5rem .7rem; color: var(--ink);
background: var(--bg); border: var(--hair) solid var(--line-strong);
border-radius: var(--r-0);
}
.arv-find input[type="search"]:focus-visible {
outline: var(--hair-2) solid var(--accent); outline-offset: 2px;
}
/* ---- admin-search-view.php ------------------------------------------------
Tables, not charts. The page this replaced had three