/* readability.css (labs 561) — /readability/ only. Prefix rd-. Colours are the house tokens (site.css :root; the
   dark edition redefines them in dark.css), so both editions follow without a second rule. EVERY MARK IS A SHAPE AND A
   WORD AS WELL AS A COLOUR: long words a dotted underline, likely passives a dashed one, adverb pile-ups a wavy one;
   a marked sentence carries a written tag ("Long 1 · 62 words") and a rule down its side. */
.rd-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.6rem 2.4rem; margin-top: 1.6rem; align-items: start; }
.rd-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .7rem; }
.rd-bar__l { font-size: .82rem; color: var(--ink-55); margin-right: .2rem; }
.rd-btn { -webkit-appearance: none; appearance: none; min-height: 44px; padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }
.rd-btn:hover { border-color: var(--ink-55); }
.rd-btn:focus-visible, .rd-text:focus-visible, .rd-copy:focus-visible, .rd-jump:focus-visible, .rd-key input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rd-label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-77); margin: 0 0 .4rem; }
.rd-text { display: block; width: 100%; min-height: 19rem; height: 46vh; max-height: 40rem; resize: vertical; box-sizing: border-box; padding: .9rem 1rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
    font: 400 1rem/1.6 Georgia, 'Times New Roman', serif; }
.rd-small { margin: .55rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-55); max-width: 40rem; }
.rd-small:empty { display: none; }
.rd-head { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.rd-range { margin: .5rem 0 1.1rem; font-size: .95rem; line-height: 1.55; color: var(--ink-77); }
.rd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.rd-card { border: 1px solid var(--line); border-radius: 10px; padding: .75rem .85rem .8rem; background: var(--paper); min-width: 0; }
.rd-card__n { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-77); }
.rd-card__v { display: block; margin: .15rem 0 0; font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-card__b { display: block; font-size: .8rem; color: var(--accent); font-weight: 600; min-height: 1.2em; }
.rd-card__t { display: block; margin-top: .3rem; font-size: .78rem; line-height: 1.45; color: var(--ink-55); }
.rd-counts { margin: 1.1rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.4rem; }
.rd-counts div { display: flex; justify-content: space-between; gap: .8rem; padding: .42rem 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem; }
.rd-counts dt { color: var(--ink-77); margin: 0; }
.rd-counts dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.rd-keys { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: 1.2rem 0 .8rem; padding: 0; border: 0; }
.rd-keys legend { padding: 0; margin: 0 0 .3rem; font-size: .82rem; font-weight: 600; color: var(--ink-77); }
.rd-key { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .9rem; color: var(--ink); cursor: pointer; }
.rd-key input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ink); }
.rd-copy { max-height: 32rem; overflow: auto; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
    font: 400 1rem/1.85 Georgia, 'Times New Roman', serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.rd-none { color: var(--ink-55); font-family: inherit; }
.rd-s--long { box-shadow: inset 3px 0 0 var(--accent); padding-left: .45rem; background: var(--unsure-wash); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rd-s--hard { box-shadow: inset 3px 0 0 var(--taken); padding-left: .45rem; background: var(--taken-wash); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rd-s--long.rd-s--hard { box-shadow: inset 3px 0 0 var(--accent), inset 6px 0 0 var(--taken); padding-left: .7rem; }
.rd-s--at { outline: 2px solid var(--ink); outline-offset: 2px; }
.rd-tag { display: inline-block; margin: 0 .15rem 0 0; padding: .05rem .45rem; border: 1px solid currentColor; border-radius: 4px; font: 600 .68rem/1.5 'DM Sans', system-ui, sans-serif;
    letter-spacing: .02em; text-transform: uppercase; vertical-align: .12em; white-space: nowrap; }
.rd-tag--long { color: var(--accent); }
.rd-tag--hard { color: var(--taken); }
.rd-w3 { text-decoration: underline dotted var(--info); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rd-pv { text-decoration: underline dashed var(--unsure); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rd-av { text-decoration: underline wavy var(--free); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rd-w3.rd-pv { text-decoration: underline dashed var(--unsure); border-bottom: 2px dotted var(--info); }
.rd-w3.rd-av { text-decoration: underline wavy var(--free); border-bottom: 2px dotted var(--info); }
.rd-copy--no-long .rd-s--long, .rd-copy--no-hard .rd-s--hard { box-shadow: none; background: none; padding-left: 0; }
.rd-copy--no-long .rd-s--long.rd-s--hard { box-shadow: inset 3px 0 0 var(--taken); padding-left: .45rem; background: var(--taken-wash); }
.rd-copy--no-hard .rd-s--long.rd-s--hard { box-shadow: inset 3px 0 0 var(--accent); padding-left: .45rem; background: var(--unsure-wash); }
.rd-copy--no-long .rd-tag--long, .rd-copy--no-hard .rd-tag--hard { display: none; }
.rd-copy--no-w3 .rd-w3, .rd-copy--no-pv .rd-pv, .rd-copy--no-av .rd-av { text-decoration: none; border-bottom: 0; }
.rd-copy--no-pv .rd-w3.rd-pv, .rd-copy--no-av .rd-w3.rd-av { text-decoration: underline dotted var(--info); text-decoration-thickness: 2px; }
.rd-copy--no-w3 .rd-w3.rd-pv { text-decoration: underline dashed var(--unsure); text-decoration-thickness: 2px; }
.rd-copy--no-w3 .rd-w3.rd-av { text-decoration: underline wavy var(--free); }
.rd-ex { font-family: Georgia, 'Times New Roman', serif; }

.rd-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem 2.2rem; margin-top: 1.8rem; }
.rd-h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.rd-list { margin: 0; padding: 0; list-style: none; }
.rd-list li { border-bottom: 1px solid var(--line-soft); font-size: .88rem; line-height: 1.45; color: var(--ink-77); }
.rd-list li.rd-none, .rd-list--words li { padding: .5rem 0; }
.rd-list b { color: var(--ink); font-weight: 600; }
.rd-list--words { columns: 2; column-gap: 1.4rem; }
/* M1 (561 fix): the count drops under its word when the two do not fit a column side by side (it used to be nowrap and
   ran into the next column). M2: a word or a quoted run with no break in it wraps instead of widening the page. */
.rd-list--words li { break-inside: avoid; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .6rem; }
.rd-list--words span { color: var(--ink-55); font-size: .8rem; }
.rd-list--words b, .rd-list--words span, .rd-jump, .rd-jump b, .rd-jump span { min-width: 0; overflow-wrap: anywhere; }
.rd-lists > div, .rd-grid > div { min-width: 0; }
.rd-jump { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 44px; padding: .5rem 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rd-jump:hover b { text-decoration: underline; }
.rd-jump span { display: block; }
.rd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: .5rem 3.2rem; margin-top: 1.6rem; }
.rd-cols p, .rd-cols li { margin: 0 0 1rem; font-size: .95rem; line-height: 1.65; color: var(--ink-77); max-width: 38rem; }
.rd-cols ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.rd-cols li { margin-bottom: .45rem; }
.rd-cols b { color: var(--ink); font-weight: 600; }
.rd-cols a { color: var(--ink); text-underline-offset: 2px; }
.rd-cols .rd-h3 { margin-top: 1.7rem; }
.rd-cols > div > .rd-h3:first-child { margin-top: 0; }
.rd-f { display: block; margin: .3rem 0 .2rem; padding: .5rem .7rem; border-left: 2px solid var(--line); background: var(--tint); color: var(--ink); font: 500 .86rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.band--tint .rd-f { background: var(--paper); }
@media (max-width: 860px) {
    .rd-grid { grid-template-columns: minmax(0, 1fr); }
    .rd-text { height: 38vh; min-height: 14rem; }
}
@media (max-width: 420px) {
    .rd-counts { grid-template-columns: minmax(0, 1fr); }
    .rd-card__v { font-size: 1.45rem; }
    .rd-list--words { columns: 1; }
}