/* Journal Advisor
   The page: a block of text inside a ruled frame, notes in the margin, and red ink for a warning alone. */

/* ---------- typefaces ---------- */
@font-face{font-family:"Amiri";font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/amiri-arabic-400-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Amiri";font-weight:700;font-style:normal;font-display:swap;
  src:url(fonts/amiri-arabic-700-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Amiri";font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/amiri-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amiri";font-weight:700;font-style:normal;font-display:swap;
  src:url(fonts/amiri-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amiri";font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/amiri-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Amiri";font-weight:700;font-style:normal;font-display:swap;
  src:url(fonts/amiri-latin-ext-700-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Plex Arabic";font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:600;font-style:normal;font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";font-weight:600;font-style:normal;font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Arabic";font-weight:600;font-style:normal;font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- the page's materials ---------- */
:root{
  --paper:#FBF8F0;      /* the paper */
  --field:#FFFEFA;      /* where the reader writes */
  --ink:#1C1915;        /* black ink */
  --ink-2:#575044;      /* thinned ink, for what is secondary */
  --line:#857D6D;       /* edges of buttons */
  --hair:#DCD5C5;       /* hairlines */
  --red:#A31F17;        /* red ink: for a warning and nothing else */
  --naskh:"Amiri","Plex Arabic",serif;
  --sans:"Plex Arabic",system-ui,sans-serif;

  /* six sizes and no more: two of the sans, four of the naskh, each step wider than the one before */
  --note:.90625rem;     /* sans: labels, notes, controls */
  --data:1rem;          /* sans: facts and figures */
  --text:1.125rem;      /* naskh: what is read */
  --title:1.3125rem;    /* naskh: a journal's name in a list, a heading, the box */
  --page:1.6875rem;     /* naskh: the name of a page, the journal that was asked about */
  --lead:2.375rem;      /* naskh: the first page's opening line, on a wide screen */

  /* leading: Arabic needs room for its marks; Latin has none to fill it and is set closer */
  --lx:1.75;            /* naskh text */
  --lt:1.6;             /* naskh titles */
  --ls:1.7;             /* sans */
  --ul:.5em;            /* an underline's distance from the baseline: clear of the deepest Arabic tails */

  /* a line of prose holds no more than about seventy characters, whatever the width of the window */
  --m-text:25em;        /* naskh text */
  --m-note:29em;        /* sans notes */

  --pad:20px;           /* inner edge of the text block */
  --hit:48px;           /* smallest thing a finger presses */
  --frame:44rem;        /* the text block at its widest */
  --w-note:17.875rem;   /* width of the margin column */
  --gap:34px;           /* between the text block and the margin */
  --edge:32px;          /* between the leaf and the window, on a wide screen */
}
html[dir="ltr"]{--lx:1.5;--lt:1.3;--ls:1.5;--ul:.18em}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--data)/var(--ls) var(--sans);font-variant-numeric:lining-nums;text-decoration-skip-ink:none}
html[dir="ltr"] body{text-decoration-skip-ink:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--ul)}
a:hover{text-decoration-thickness:2px}
button,textarea,select{font:inherit;color:inherit}
bdi[dir],[dir="ltr"],[dir="rtl"]{unicode-bidi:isolate}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1:focus,h2:focus,main:focus{outline:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nw{white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-70px;display:flex;align-items:center;min-height:48px;background:var(--ink);color:var(--paper);padding:0 16px;z-index:5;text-decoration:none}
.skip:focus{top:12px}
.wide{display:none}

/* a name in the page's other script, standing in a line of its own, keeps its own script's leading and underline */
[dir="rtl"] :is(.lead h1,.jt,.vt,.alt,.near li,.papers li,.compare tbody th,.next):has(> [dir="ltr"],> a > [dir="ltr"]),
[dir="rtl"] .eg a:has(> [dir="ltr"]){--lx:1.5;--lt:1.3;--ul:.18em;text-decoration-skip-ink:auto}
[dir="ltr"] :is(.lead h1,.jt,.vt,.alt,.near li,.papers li,.compare tbody th,.next):has(> [dir="rtl"],> a > [dir="rtl"]),
[dir="ltr"] .eg a:has(> [dir="rtl"]){--lx:1.75;--lt:1.6;--ul:.5em;text-decoration-skip-ink:none}

/* ---------- top of the page ---------- */
.top{max-width:var(--frame);margin:0 auto;padding:14px var(--pad) 8px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 16px}
.mark{font:700 var(--title)/var(--lt) var(--naskh);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--hit);white-space:nowrap}
#topnav{display:flex;gap:4px 20px;font-size:var(--note)}
#topnav a{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:var(--hit);min-width:var(--hit);white-space:nowrap}

/* ---------- the leaf: text block and margin ---------- */
.leaf{max-width:var(--frame);margin:0 auto}
.lead{padding:6px var(--pad) 18px}
.lead h1{font:700 var(--page)/var(--lt) var(--naskh);max-width:21em;text-wrap:balance}
.lead.small{padding-bottom:10px}
.back{padding:0 var(--pad);font-size:var(--note)}
.lead .back{padding:0}
.back a{display:inline-flex;align-items:center;min-height:var(--hit)}
.waiting{padding:18px var(--pad);color:var(--ink-2)}

/* the ruled frame: two parallel lines close the text block above and below */
.matn{position:relative;border-block:1px solid var(--ink);background:var(--paper)}
.matn::before{content:"";position:absolute;inset:4px 0;border-block:1px solid var(--ink);pointer-events:none;z-index:1}
.matn > *,.listwrap > *{padding-inline:var(--pad)}
.matn > :first-child{margin-top:5px}
.matn > :last-child{margin-bottom:5px}
.rule{border-top:1px solid var(--ink);padding:0 !important}
#rest,.listwrap{padding-inline:0 !important}
#rest > *{padding-inline:var(--pad)}

/* ---------- the one box ---------- */
.box{background:var(--field);padding-block:16px 12px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.box:focus-within{box-shadow:inset 0 0 0 3px var(--ink)}
/* the box grows with what is typed and stops at a whole number of lines: seven while writing, three once
   the answer is under it, so that a pasted abstract does not push the answer off the screen. Where it holds
   more than it shows, its last line fades */
.box textarea{--l:1.75;display:block;width:100%;min-height:var(--hit);max-height:calc(var(--l) * 3em + 4px);border:0;background:transparent;resize:none;
  font:400 var(--title)/var(--l) var(--naskh);padding:4px 0 0;field-sizing:content;outline:0}
.box textarea:dir(ltr){--l:1.5}
.box textarea::placeholder{color:var(--ink-2);opacity:1}
.box textarea.more:not(:focus){-webkit-mask-image:linear-gradient(#000 calc(100% - var(--l) * 1em),transparent);mask-image:linear-gradient(#000 calc(100% - var(--l) * 1em),transparent)}
.box .go,.more .go{min-height:48px;min-width:108px;padding:0 26px;border:0;border-radius:2px;background:var(--ink);color:var(--paper);
  font:600 var(--data)/1 var(--sans);cursor:pointer}
.box .go{justify-self:end}
.go:hover{background:#000}
.box.first textarea,.box textarea:focus{max-height:calc(var(--l) * 7em + 4px)}
.box.first textarea{min-height:calc(var(--l) * 3em + 4px)}
.box .hint{font-size:var(--note);color:var(--ink-2);max-width:var(--m-note)}
.box.first{padding-bottom:16px}

/* what the advisor understood: a line under what was typed. The tint runs the width of the block; the words keep to their measure */
.gloss{background:var(--field);padding-block:0 14px;font-size:var(--note);color:var(--ink-2)}
.matn > .gloss{padding-inline-end:max(var(--pad),calc(100% - var(--m-note) - var(--pad)))}
.gloss b{color:var(--ink);font-weight:600}

/* ---------- conditions ---------- */
.margin{padding-block:12px 4px}
.condbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.condbar .active{font-size:var(--note)}
.condpanel{display:none;padding-top:14px}
.conds-open .condpanel{display:block}
.fgroup{margin-bottom:14px}
.flabel{display:block;font:600 var(--note)/var(--ls) var(--sans);color:var(--ink-2);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.fgroup > .chip{margin-top:8px}
.fnote{font-size:var(--note);color:var(--ink-2);margin-top:8px;max-width:var(--m-note)}
.chip{min-height:var(--hit);padding:0 14px;border:1px solid var(--line);border-radius:2px;background:transparent;
  font:400 var(--note)/var(--ls) var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-align:start}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.chip[aria-pressed="true"]::before,.chip[aria-checked="true"]::before{content:"";width:11px;height:6px;
  border-left:2px solid;border-bottom:2px solid;transform:translateY(-2px) rotate(-45deg);flex:none}
.chip[data-conds]::after{content:"";width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg);flex:none}
.chip[data-conds][aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
/* in the panel the conditions stand in even columns: four quarters in a row, the rest two by two. A condition
   too long for half the row takes a row to itself, so its words stay on one line wherever the row can hold them */
.condpanel .chips .chip{flex:1 1 auto;min-width:calc(50% - 4px)}
.condpanel .chips.four{gap:6px}
.condpanel .chips.four .chip{min-width:calc(25% - 4.5px)}
/* the four quartiles stand in one row, or two and two where their words are too long for a row of four: never three and one */
html[dir="ltr"] .condpanel .chips.four .chip{min-width:clamp(calc(25% - 4.5px),calc((29.5rem - 100%) * 999),calc(50% - 3px))}
.condpanel .chips .chip,.fgroup > .chip{justify-content:center;text-align:center;padding:3px 6px;gap:6px}
.fgroup > .chip{width:100%}
.seg{display:flex;flex-wrap:wrap}
.seg .chip{border-radius:0;margin-inline-start:-1px;flex:1 1 auto;justify-content:center}
.seg .chip:first-child{margin-inline-start:0}
.morec{margin-bottom:14px}
.morec summary{cursor:pointer;min-height:var(--hit);display:flex;align-items:center;font-size:var(--note);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--ul);width:fit-content}
.morec summary::-webkit-details-marker{display:none}
.pick{display:block;margin-top:10px;font-size:var(--note);color:var(--ink-2)}
.pick select{display:block;width:100%;min-height:var(--hit);margin-top:4px;border:1px solid var(--line);border-radius:2px;background:var(--field);padding:0 10px;font-size:var(--note);color:var(--ink)}
.clear a{display:inline-flex;align-items:center;min-height:var(--hit);font-size:var(--note)}

/* notes on the advisor's words */
.terms p{font:400 var(--text)/var(--lx) var(--naskh);margin-bottom:10px;max-width:var(--m-text)}
.terms b{font:600 var(--note)/1 var(--sans)}
details.terms{padding-block:6px 14px;border-top:1px solid var(--hair);margin-inline:var(--pad);padding-inline:0 !important}
details.terms summary{cursor:pointer;min-height:var(--hit);display:flex;align-items:center;font:600 var(--note)/var(--ls) var(--sans)}
details.terms summary::after{content:"";width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg);margin-inline-start:10px}
details.terms[open] summary::after{transform:translateY(2px) rotate(-135deg)}
details.terms summary::-webkit-details-marker{display:none}
.terms.plain{padding-block:14px 6px;border-top:1px solid var(--hair);margin-inline:var(--pad);padding-inline:0 !important}
.covers{font:400 var(--text)/var(--lx) var(--naskh);padding-block:14px 12px;max-width:calc(var(--m-text) + 2 * var(--pad))}

/* ---------- heading of a list ---------- */
.head{padding-block:18px 2px}
.head h2{font:700 var(--title)/var(--lt) var(--naskh);text-wrap:balance}
.head p{font-size:var(--note);color:var(--ink-2);max-width:var(--m-note)}
.once{padding-bottom:6px}

/* ---------- journals in a list ---------- */
/* the number and the journal's name are read as one line: they share a baseline, however the name wraps */
.rows{padding-inline:0 !important}
.rows > li{position:relative;display:grid;grid-template-columns:2.2rem minmax(0,1fr);align-items:baseline;padding-block:16px 12px;border-top:1px solid var(--hair);margin-inline:var(--pad)}
.rows > li:first-child{border-top:0}
.num{font:700 var(--title)/var(--lt) var(--naskh);color:var(--ink-2)}
.jt{font:700 var(--title)/var(--lt) var(--naskh);text-wrap:balance}
.jt a{display:block;width:fit-content;min-height:var(--hit);padding-block:max(2px,calc((var(--hit) - var(--lt) * 1em) / 2));text-decoration-color:var(--line)}
.jt a:hover,.jt a:focus-visible{text-decoration-color:var(--ink);text-decoration-thickness:2px}
.jt [dir],.vt [dir],.alt [dir],.papers [dir]{display:block}
[dir="rtl"] :is(.jt,.vt,.alt,.papers) [dir="ltr"]{text-align:right}
[dir="ltr"] :is(.jt,.vt,.alt,.papers) [dir="rtl"]{text-align:left}
.alt{font:400 var(--text)/var(--lt) var(--naskh);color:var(--ink-2)}
.sent{font:400 var(--text)/var(--lx) var(--naskh);margin-top:4px;max-width:var(--m-text)}
.from{font-size:var(--note);color:var(--ink-2);margin-top:6px;max-width:var(--m-note)}
.rows .from{display:none}
.rows > .with-from .from{display:block}   /* where only the publisher tells two journals apart, it is shown at every width */
.facts{display:flex;flex-wrap:wrap;gap:2px 28px;margin-top:8px}
.facts .no,.no{color:var(--ink-2)}
.acts{display:flex;flex-wrap:wrap;gap:0 22px;align-items:center;margin-top:4px;font-size:var(--note)}
.acts a{display:inline-flex;align-items:center;min-height:var(--hit)}
.keep{min-height:var(--hit);border:0;background:transparent;padding:0;font-size:var(--note);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--ul)}
.keep[aria-pressed="true"]{color:var(--ink);font-weight:600;text-decoration:none}
.keep[aria-pressed="true"]::before{content:"";display:inline-block;width:10px;height:5px;border-left:2px solid;border-bottom:2px solid;transform:translateY(-3px) rotate(-45deg);margin-inline-end:7px}

/* a warning or a dated fact under a journal */
.care{margin-top:10px;padding-inline-start:12px;border-inline-start:2px solid var(--ink);font:400 var(--text)/var(--lx) var(--naskh);max-width:var(--m-text)}
.care.bad{border-color:var(--red);color:var(--red)}
.sent,.care,.head p,.terms p,.sheet dd,.sheet small,.gloss,.covers,.listed .why,.box .hint,.eg a,.from,.alt,.colophon .tail{text-wrap:pretty}
.care .advice{color:var(--ink)}
.care.bad .advice{display:block;margin-top:2px}
.tag{font:600 var(--note)/1 var(--sans);white-space:nowrap}
.tag.red,.stamp{background:var(--red);color:#fff;font:600 var(--note)/1 var(--sans);padding:6px 9px 7px;border-radius:2px;display:inline-flex;align-items:center;gap:6px}
.tag.red{margin-inline-end:4px;vertical-align:2px}
.tag svg,.stamp svg{width:11px;height:11px}
.sites{display:block;font:400 var(--note)/var(--ls) var(--sans);color:var(--ink);margin-top:4px}
.site{overflow-wrap:anywhere}

/* ---------- the state of a journal ---------- */
/* the state is said in a plain line, in red where it warns; the journal's name alone is set heavy */
.verdict{position:relative;padding-block:20px 14px}
.verdict.danger::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;border-inline-start:6px solid var(--red)}
.vt{font:700 var(--page)/var(--lt) var(--naskh);margin-top:6px;text-wrap:balance}
.rubric{font:400 var(--title)/var(--lt) var(--naskh);text-wrap:balance;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;max-width:24em}
.matn > .rubric{padding-block:18px 16px;max-width:calc(24em + 2 * var(--pad))}
.danger .rubric,.rubric.danger{color:var(--red)}
.stamp{flex:none}
.answers{margin-top:14px;display:grid;border-top:1px solid var(--ink)}
.answers > div{padding:10px 0 11px;border-bottom:1px solid var(--hair)}
.answers dt{font-size:var(--note);color:var(--ink-2)}
.answers dd{font-weight:600;display:flex;gap:8px;align-items:flex-start}
.answers .bad dd{color:var(--red)}
.ic{flex:none;width:18px;height:18px;margin-top:4px}
.bad .ic{background:var(--red);color:#fff;border-radius:2px;padding:3px}
.verdict .sent{margin-top:12px}
.verdict .acts{margin-top:8px}
.verdict.unknown .sent{margin-top:6px}
.offers{padding-block:4px 14px}
.also{font-size:var(--note);margin-top:12px;color:var(--ink-2)}
.near li{font:400 var(--text)/var(--lx) var(--naskh)}
.near a{display:block;width:fit-content;min-height:var(--hit);padding-block:max(2px,calc((var(--hit) - var(--lx) * 1em) / 2))}
.near small{font:400 var(--note)/1 var(--sans);color:var(--ink-2)}

/* journals on a predatory list: set apart under the suggestions and never numbered */
.listed{padding-block:20px 6px;border-top:1px solid var(--ink);margin-top:10px}
.listed .why{font:400 var(--text)/var(--lx) var(--naskh);margin-top:8px;max-width:var(--m-text)}
.listed .rows{margin-top:6px}
.listed .rows > li,.listed p.more{margin-inline:0}
.num.sign svg{display:block;width:18px;height:18px;background:var(--red);color:#fff;border-radius:2px;padding:3px}

/* ---------- more ---------- */
p.more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:14px 18px;border-top:1px solid var(--hair);margin-inline:var(--pad);padding-inline:0 !important}
.more .next{font:400 var(--text)/var(--lx) var(--naskh);color:var(--ink-2);min-width:0}
.more .next [dir]{display:inline}
.done,.empty{padding-block:14px 18px;font-size:var(--note);color:var(--ink-2)}

/* the kept journals side by side (wide screens and print): a value stays on one line, every row is read along one
   baseline, and the room that is left goes to the journal's name */
.wide:has(> .compare){overflow-x:auto}
.compare{width:100%;border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums;margin-block:8px 4px}
.compare th,.compare td{text-align:start;vertical-align:baseline;padding:14px 0;padding-inline-end:12px;border-top:1px solid var(--hair)}
.compare td{white-space:nowrap}
.compare td:nth-child(5),.compare td:nth-child(6){white-space:normal;min-width:8.5rem}   /* the two that may hold a sentence give way before a name does */
.compare td:last-child{white-space:normal;padding-inline-end:0;width:11rem}
.compare td small{white-space:normal;width:max-content;max-width:9.5em}
.compare thead th{font:600 var(--note)/var(--ls) var(--sans);color:var(--ink-2);border-top:0;padding-block:10px 8px;vertical-align:bottom}
.compare tbody th{font-weight:400;width:13rem;min-width:13rem}
/* Arabic says its longest answers in fewer letters: they stay on one line and the name takes the room left */
html[dir="rtl"] .compare tbody th{width:15rem}
html[dir="rtl"] .compare td:nth-child(5),html[dir="rtl"] .compare td:nth-child(6){min-width:9.75rem}
.compare tbody th > a{font:700 var(--title)/var(--lt) var(--naskh);text-decoration-color:var(--line)}
.compare small{display:block;font-size:var(--note);color:var(--ink-2)}
.compare .keep{margin-top:2px}
.compare .bad,.compare .warn{display:block}
.compare .bad{color:var(--red);font-weight:600}

/* ---------- a journal's own page ---------- */
.sheet{display:grid;padding-inline:0 !important;overflow-x:auto}
.sheet > div{padding:14px 0 15px;border-top:1px solid var(--hair);margin-inline:var(--pad)}
.sheet > div:first-child{border-top:0}
.sheet dt{font:600 var(--note)/var(--ls) var(--sans);color:var(--ink-2);margin-bottom:3px}
.sheet dd{min-width:0;max-width:27.5em}
.sheet dd.links{max-width:none}
.sheet dd:has(> .subjects){max-width:36rem}
.sheet .big{display:block;font:700 var(--title)/var(--lt) var(--naskh)}
.sheet small{display:block;font-size:var(--note);color:var(--ink-2);margin-top:2px;max-width:var(--m-note)}
.sheet small a{padding-block:calc((var(--hit) - 1.3em) / 2)}
.subjects{width:100%;border-collapse:collapse}
.subjects th{font:400 var(--note)/var(--ls) var(--sans);color:var(--ink-2);text-align:start;vertical-align:baseline;padding:0 0 6px}
.subjects td{padding:0;border-top:1px solid var(--hair);vertical-align:top}
.subjects td,.subjects th{overflow-wrap:anywhere}
.subjects td + td{padding-top:max(4px,calc((var(--hit) - var(--ls) * 1em) / 2 + .5px))}
.subjects td + td,.subjects th + th{padding-inline-start:12px}
.subjects td:nth-child(2){white-space:nowrap}
.subjects td:first-child a{display:inline-block;min-width:var(--hit);padding-block:max(4px,calc((var(--hit) - var(--ls) * 1em) / 2 + .5px))}
.top10{font-weight:600}
.links{display:flex;flex-direction:column}
.links a{display:block;width:fit-content;max-width:27.5em;padding-block:calc((var(--hit) - var(--ls) * 1em) / 2)}
.links svg,.papers svg{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-inline-start:4px}
.years{border-collapse:collapse;width:100%;max-width:26.25rem;font-variant-numeric:lining-nums tabular-nums}
.years th{font-weight:400;text-align:start;padding:3px 0;width:3.4em}
.years td{padding:3px 0}
.years th,.years td{vertical-align:baseline}
.years td:last-child{text-align:right;width:1%;white-space:nowrap;padding-inline-start:10px}
.barcell{width:auto}
.bar{display:block;block-size:0;border-block-start:12px solid var(--ink);min-inline-size:2px}
.papers li{padding:9px 0;border-top:1px solid var(--hair);font:400 var(--text)/var(--lx) var(--naskh)}
.papers li:first-child{border-top:0;padding-top:2px}
.papers small{font-family:var(--sans)}
.sources dd a{overflow-wrap:anywhere}
/* a reference the source asks to be quoted in its own words keeps its own direction */
.sources .cite{text-align:left;line-height:1.5}

/* ---------- start page: examples and the index of subjects ---------- */
.eg{padding-block:16px 12px}
.eg h2,.fihrist h2{font:700 var(--title)/var(--lt) var(--naskh);margin-bottom:6px;text-wrap:balance}
.eg li{display:grid;grid-template-columns:minmax(0,1fr);padding:9px 0 11px;border-top:1px solid var(--hair)}
.eg li:first-of-type{border-top:0}
.eg .kind{font:600 var(--note)/var(--ls) var(--sans);color:var(--ink-2)}
.eg a{font:400 var(--text)/var(--lx) var(--naskh);display:block;max-width:var(--m-text);padding-block:max(4px,calc((var(--hit) - var(--lx) * 1em) / 2 + .5px));text-decoration-color:var(--line)}
.eg a [dir="ltr"]{letter-spacing:.03em}
.eg .gets{font-size:var(--note);color:var(--ink-2)}
.fihrist{padding-block:16px 14px}
.fihrist .hint{font-size:var(--note);color:var(--ink-2);margin-bottom:4px}
.fihrist a{display:flex;align-items:baseline;align-items:last baseline;gap:8px;min-height:var(--hit);padding-block:max(2px,calc((var(--hit) - var(--lt) * 1em) / 2));text-decoration:none;font:400 var(--text)/var(--lt) var(--naskh)}
.fihrist a span{order:2;min-width:3.2em;text-align:right;font:400 var(--note)/1 var(--sans);font-variant-numeric:lining-nums tabular-nums;color:var(--ink-2)}
.fihrist b{font-weight:400;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line);text-underline-offset:var(--ul)}
.fihrist a:hover b{text-decoration-color:var(--ink);text-decoration-thickness:2px}
/* a counted index is read as a table of contents: name, dotted leader, count. The leader does the underline's work */
.fihrist.counted a::after{content:"";order:1;flex:1;min-width:24px;border-bottom:1px dotted var(--line);transform:translateY(-5px)}
.fihrist.counted b{text-decoration:none}
.fihrist.counted a:hover b,.fihrist.counted a:focus-visible b{text-decoration:underline;text-decoration-thickness:2px}
.fihrist .allsub{margin-top:8px}
.fihrist .allsub a{display:inline-flex;align-items:center;font:400 var(--data)/var(--ls) var(--sans);padding-block:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--ul)}
.fihrist.counted .allsub a::after{display:none}

/* ---------- closing lines: where the data comes from ---------- */
.colophon{margin:56px auto 0;padding:0 var(--pad) 44px;max-width:var(--frame);text-align:center;font:400 var(--text)/var(--lx) var(--naskh)}
.colophon > p{max-width:35rem;margin-inline:auto}
.colophon::before{content:"";display:block;width:56px;border-top:1px solid var(--ink);margin:0 auto 20px}
.colophon .tail .nw{white-space:normal}
.colophon .tail i{display:none}
.fit .colophon .tail i{display:block;float:left;width:50%;height:var(--h,0px);shape-outside:polygon(0 0,0 100%,calc(var(--h,0px) * var(--s,0)) 100%)}
.fit .colophon .tail i + i{float:right;shape-outside:polygon(100% 0,100% 100%,calc(100% - var(--h,0px) * var(--s,0)) 100%)}
.colophon .src,.colophon.short p{font:400 var(--note)/var(--ls) var(--sans);clear:both}
.colophon .src{padding-top:12px}
.colophon a{display:inline-flex;align-items:center;min-height:var(--hit)}

/* ================= by width ================= */
/* a column too narrow for the reader's own text size lets a sum and its currency part rather than run off the page */
@media (max-width:22.4em){.facts .nw{white-space:normal}}
@media (max-width:359px){
  .top{gap:10px}
  #topnav{gap:4px 12px}
}
@media (max-width:559px){
  .fit .colophon .tail i{display:none}   /* too narrow to shape the closing paragraph */
}
@media (max-width:639px){
  .care .tag.red{display:flex;width:fit-content;margin:0 0 6px}   /* the stamp stands above its sentence */
}
@media (min-width:640px){
  .facts{column-gap:34px}
  .rows .from{display:block}
  .answers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .answers > div{border-bottom:0;padding:12px 0 2px;padding-inline-end:18px}
  .answers > div + div{border-inline-start:1px solid var(--hair);padding-inline-start:18px}
  .links{flex-direction:row;flex-wrap:wrap;gap:0 26px}
}
/* a wide screen: the text block keeps its width and the notes stand beside it, in the margin */
@media (min-width:1100px){
  :root{--pad:30px;--hit:40px;--leaf:calc(var(--frame) + var(--gap) + var(--w-note) + 2 * var(--edge))}
  .wide{display:block}
  .narrow{display:none !important}
  .top{max-width:var(--leaf);padding:20px var(--edge) 12px}
  .leaf{max-width:var(--leaf);padding-inline:var(--edge)}
  .lead{padding:14px 0 22px}
  .lead:not(.small) h1{font-size:var(--lead)}
  .back{padding-inline:0}
  .matn{border:1px solid var(--ink);margin-inline-end:calc(var(--w-note) + var(--gap))}
  .matn::before{inset:4px;border:1px solid var(--ink)}
  .box{grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-block:18px 12px;gap:12px 20px}
  .box.first textarea{grid-column:1 / -1}
  .box.first{padding-bottom:20px}
  .box .hint{align-self:center}
  .verdict.danger::after{inset-inline-start:5px}
  .rows > li{padding-block:18px 14px}

  /* the margin column: conditions and notes sit outside the frame, beside the list */
  .listwrap{position:relative;min-height:40rem}
  .margin{position:absolute;inset-inline-end:calc(-1 * (var(--w-note) + var(--gap)));width:var(--w-note);padding:0 !important}
  .listwrap > .margin{top:18px}
  .margin.first{top:20px}
  .condbar{display:none}
  .condpanel{display:block;padding-top:0}
  .conds{border-bottom:1px solid var(--ink);margin-bottom:16px;padding-bottom:4px}
  /* label and value stand side by side on one baseline; a source's long name stands over what it gives */
  .sheet > div{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:0 20px;align-items:baseline;padding:16px 0 17px}
  .sheet dt{margin:0}
  .sheet.sources > div{display:block}
  .sheet.sources dt{margin-bottom:3px}
  .eg li{grid-template-columns:7.375rem minmax(0,1fr);align-items:baseline;gap:0 10px}
  .eg .gets{grid-column:2}
  .fihrist ul{columns:2;column-gap:44px}
  .fihrist li{break-inside:avoid}
  p.more,details.terms{margin-inline:var(--pad)}
  .listed p.more{margin-inline:0}
  /* the closing lines stand under the text block, on its axis */
  .colophon{max-width:var(--leaf);margin-top:72px;padding-inline:var(--edge) calc(var(--edge) + var(--w-note) + var(--gap))}

  /* a page without notes keeps no empty margin: the text block stands in the middle, and the top line and the closing lines with it */
  body:has(.matn):not(:has(.margin,.waiting)),html.bare body:not(:has(.matn)){--leaf:calc(var(--frame) + 2 * var(--edge))}
  body:has(.matn):not(:has(.margin,.waiting)) .matn{margin-inline-end:0}
  body:has(.matn):not(:has(.margin,.waiting)) .colophon{padding-inline:var(--edge)}
  /* the kept journals side by side need the whole width */
  body:has(.matn.full),html.full body:not(:has(.matn)){--leaf:76.25rem}
}
/* seven columns in a window that is only just wide: the table takes the room the edges can spare */
@media (min-width:1100px) and (max-width:1239px){
  body:has(.matn.full){--edge:12px}
  .matn.full{--pad:16px}
}
@media (min-width:1100px) and (pointer:coarse){
  :root{--hit:48px}
}
@media (prefers-reduced-motion:no-preference){
  .chip{transition:background-color .12s,color .12s,border-color .12s}
}

/* ================= on paper ================= */
/* A journal's page is a document to hand to someone: an upright sheet, label beside value, every outside address
   written out, and nothing that only a screen can do. The kept journals side by side are the one thing that needs
   the sheet turned. Red and the bars are drawn as lines, which print whether or not backgrounds do. */
@page{size:A4 portrait;margin:18mm 22mm}
@page wide{size:A4 landscape;margin:14mm}
@media print{
  :root{--pad:0px;--hit:0px}
  html{font-size:87.5%}
  body{background:#fff}
  body:has(.compare){page:wide}
  .top,.leaf,.colophon{max-width:none}
  .top{padding:0 0 4px}
  .lead{padding-top:0}
  .matn{margin:0;border:0}
  .matn::before{display:none}
  .top nav,.box,.acts,p.more,.margin,.skip,.gloss,.back,.keep,.colophon .src,.colophon.short a,
  details.terms:not([open]),details.terms summary::after,.links svg,.papers svg{display:none !important}
  a{text-decoration:none}

  /* the layout of a wide enough sheet, whatever width the browser gives the page */
  .rows .from{display:block}
  .facts{column-gap:34px}
  .answers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .answers > div{border-bottom:0;padding:10px 0 2px;padding-inline-end:18px}
  .answers > div + div{border-inline-start:1px solid var(--hair);padding-inline-start:18px}
  .sheet{display:block;overflow:visible}
  .sheet > div{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:0 20px;align-items:baseline;padding:9px 0 10px}
  .sheet dt{margin:0}
  .sheet.sources > div{display:block}
  .sheet.sources dt{margin-bottom:3px}
  .jt a,.near a,.eg a,.fihrist a,.subjects td:first-child a,.subjects td + td{min-height:0;padding-block:2px}
  .rows > li{padding-block:10px 9px}

  /* a hairline closes the block above it and never opens a sheet */
  .sheet > div,.rows > li,.papers li,.eg li{border-top:0;border-bottom:1px solid var(--hair)}
  .sheet > div:last-child,.rows > li:last-child,.papers li:last-child,.eg li:last-child{border-bottom:0}
  .rows:has(+ .listed) > li:last-child{border-bottom:1px solid var(--ink)}
  .listed,details.terms,.terms.plain{border-top:0}
  .compare th,.compare td{border-top:0;border-bottom:1px solid var(--hair)}
  .compare tbody tr:last-child > *{border-bottom:0}
  .rule,.colophon{break-before:avoid}
  .verdict,.rows > li,.papers li,.links a,.years,.subjects,.compare tr,.colophon,.sheet > div:not(:has(.links,.papers)){break-inside:avoid}
  .head,.rubric,.vt,.also,h2,h3,.answers dt{break-after:avoid}

  /* red ink and the bars, as lines */
  .tag.red,.stamp{background:none;color:var(--red);border:1px solid var(--red);padding:5px 8px 6px}
  .bad .ic,.num.sign svg{background:none;color:var(--red);border:1px solid var(--red)}

  /* an outside address is written out under its name */
  .links{display:block}
  .links a{width:auto;padding-block:0 7px}
  .links a::after,.papers a::after{content:attr(href);display:block;font:400 var(--note)/1.5 var(--sans);color:var(--ink-2);direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
  [dir="rtl"] :is(.links a,.papers a)::after{text-align:right}
  .sheet small a[href^="http"]{padding-block:0}
  .sheet small a[href^="http"]::after{content:" \2066(" attr(href) ")\2069";overflow-wrap:anywhere}
  .sheet small a:is(.addr,:has(> [dir="ltr"]:only-child))::after{content:none}

  /* the kept journals side by side */
  div.wide:has(.compare){display:block}
  div.wide:has(.compare) ~ .rows.narrow{display:none !important}
  .compare{margin-top:0}
  .compare th,.compare td{padding-block:9px}
  .colophon{margin-top:28px;padding-bottom:0}
}