/* ════════ THE MANUSCRIPT — the source editor's own stylesheet ════════
   Owner 2026-10-25: "the text editor looks terrible, do like what we've done
   in gilyon-engine". This is gilyon's editor (gilyon/editor_page.html in
   that repository), fitted to a sefer:

     · ONE SHEET OF PAPER ON A GREY DESK, the text set the way the page sets
       it (the sefer's own face, size, alignment and drop word — the owner's
       2026-07-26 ruling still stands), and nothing else on the paper: no
       chips, no coloured heading bands, no boxes round paragraphs.
     · A PROOF MARK beside every paragraph, out in the margin on the desk: a
       quiet italic word saying what it is. It turns gold on the paragraph
       you are in, and says "changed" under it when a change is waiting.
     · THE CHOSEN PARAGRAPH gets a faint gold wash and a gold rule down its
       reading edge, and a white toolbar floats above it with every kind this
       sefer has as a button (the one it is now pressed), then move / page /
       undo.
     · A SAVE BAR across the foot: back, where the work stands ("No changes
       yet"), and the one button that saves and typesets again.
     · On a phone the marks sit above their paragraph and the toolbar sits in
       the flow, so nothing hangs off the edge of a narrow screen.

   The mark is still a grid column the paragraph reserves, so nothing that
   appears on hover or on choosing can move a word. */

/* ── the desk and the sheet ─────────────────────────────────────────────── */
/* gilyon's desk is a cool grey that makes the paper read as paper; in the
   dark theme it is a dark grey, and the sheet stays paper either way */
#ov-text{--ed-desk:#25272d}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) #ov-text{--ed-desk:#dde1e6}}
:root[data-theme=light] #ov-text{--ed-desk:#dde1e6}
#ov-text .ovbd{max-width:none;padding:0;gap:0;background:var(--ed-desk)}
/* no padding at the TOP: a sticky inset is measured from the scroll
   container's content box, so top padding here would leave a live band of
   text sliding above the pinned piece name. The sheet carries the gap. */
.teddesk{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overflow-x:hidden;
  padding:0 20px 110px;scroll-behavior:smooth}
/* The sheet is two things: the margin on the desk where the proof marks are
   written (--mk wide, --mkgap from the paper), and the paper itself, painted
   by ::before behind the text column only. The same width is kept empty on
   the far side, so it is the PAPER that sits in the middle of the desk. Every
   colour the sheet uses is declared here; nothing on it inherits a dark token. */
.tedsheet{
  --sh-paper:#fffdf8; --sh-ink:#17130c; --sh-dim:#7d7466; --sh-mark:#8a8172;
  --sh-rule:#e7e1d3; --sh-gold:#a8823a; --sh-gold-d:#7d6230; --sh-gold-soft:#e9dcc0;
  --sh-brick:#9b3b2f;
  --sh-tint:rgba(168,130,58,.05); --sh-sel:rgba(168,130,58,.09);
  --mk:150px; --mkgap:26px; --pad:54px;
  position:relative;isolation:isolate;
  margin:26px auto 0;width:100%;
  max-width:calc(2 * (var(--mk) + var(--mkgap)) + 780px);
  padding:24px 0 64px;
  padding-inline-end:calc(var(--mk) + var(--mkgap) + var(--pad));
  direction:rtl;text-align:right;color:var(--sh-ink);
  font-family:var(--ted-face,var(--hebrew))}
.tedsheet::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;
  inset-inline-start:calc(var(--mk) + var(--mkgap));
  inset-inline-end:calc(var(--mk) + var(--mkgap));
  background:var(--sh-paper);
  box-shadow:0 1px 2px rgba(28,42,69,.08),0 8px 30px rgba(28,42,69,.07)}
#ov-text.wide .tedsheet{max-width:calc(2 * (var(--mk) + var(--mkgap)) + 1040px)}
#ov-text.wide .tedside{display:none}
/* a desk too narrow for a margin on both sides keeps the marks' side only */
@media(max-width:1500px){
  .tedsheet{padding-inline-end:var(--pad);max-width:calc(var(--mk) + var(--mkgap) + 860px)}
  .tedsheet::before{inset-inline-end:0}
}

/* ── nothing there yet, or nothing found: said on the paper itself ──────── */
.ted-empty{padding:52px 24px;text-align:center;color:var(--sh-dim);
  margin-inline-start:calc(var(--mk) + var(--mkgap) + var(--pad));
  font-family:var(--ui);font-size:var(--t-ui);direction:ltr}
:root[dir=rtl] .ted-empty{direction:rtl}
.ted-empty .ee-i{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 12px;
  border-radius:50%;background:#f4efe4;color:var(--sh-gold-d)}
.ted-empty .ee-i svg{width:20px;height:20px}
.ted-empty b{display:block;color:var(--sh-ink);font-size:var(--t-title);font-weight:700;
  margin-bottom:4px}
/* the sheet fills in rather than flashing a spinner on white */
.ted-skel{padding:8px 0;margin-inline-start:calc(var(--mk) + var(--mkgap) + var(--pad))}
.ted-skel i{display:block;height:13px;border-radius:5px;margin:0 0 11px;
  background:linear-gradient(90deg,#efe9dd,#f7f3ea,#efe9dd);background-size:220% 100%;
  animation:tedshim 1.15s linear infinite}
.ted-skel i:nth-child(3n){width:62%} .ted-skel i:nth-child(4n){width:88%}
.ted-skel i.h{height:19px;width:34%;margin:22px 0 14px;background:#efe6d2}
@keyframes tedshim{from{background-position:140% 0}to{background-position:-40% 0}}

/* ── a piece of the sefer: its name across the top of the paper, the way
   gilyon's issue details sit in a quiet strip above the article ────────── */
/* the gap between pieces belongs to the SECTION, never to the sticky name —
   a sticky box is pinned by its margin box, so a top margin here would leave
   a band of the previous piece's text showing above the pinned name */
.tedgrp+.tedgrp{margin-top:30px}
.tedpiece{position:sticky;top:0;z-index:3;display:flex;align-items:baseline;gap:12px;
  direction:rtl;background:var(--sh-paper);margin:0 0 18px;padding:12px var(--pad) 10px;
  margin-inline-start:calc(var(--mk) + var(--mkgap));
  margin-inline-end:calc(-1 * var(--pad))}
.tedpiece::after{content:'';position:absolute;bottom:0;inset-inline:var(--pad);height:1px;
  background:var(--sh-rule)}
.tedpiece .pt{font-size:17px;font-weight:700;color:var(--sh-ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tedpiece .pa{font-size:13px;color:var(--sh-dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
/* gilyon's byline: small, spaced capitals in gold — a word, not a pill */
.tedpiece .pk{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sh-gold-d);margin-inline-start:auto;flex:none;
  direction:ltr}
:root[dir=rtl] .tedpiece .pk{direction:rtl;letter-spacing:0}
/* an OPAQUE tint: the name is pinned over live text, so a translucent
   highlight would let the paragraph beneath read straight through it */
.tedpiece.tgt{background:#f7eedb}
.tedpiece.tgt::after{background:var(--sh-gold);height:2px}

/* ── one paragraph: [ its proof mark, on the desk ][ the text, on the paper ]
   Off-screen paragraphs are skipped by the browser (content-visibility) and
   come back the moment they are worked on — that is what lets a 300-page
   sefer scroll like a page of it. The paragraph's box runs 14px past the
   text on the far side so its wash is never clipped by that skipping. */
.ted-p{position:relative;isolation:isolate;display:grid;
  grid-template-columns:var(--mk) minmax(0,1fr);
  column-gap:calc(var(--mkgap) + var(--pad));align-items:start;
  margin:0 0 .3em;margin-inline-end:-14px;padding:4px 0;padding-inline-end:14px;
  content-visibility:auto;contain-intrinsic-size:auto 58px}
.ted-p:hover,.ted-p:focus-within,.ted-p.sel,.ted-p.acts,.ted-p.dragging,.ted-p.has-bar{
  content-visibility:visible}
.ted-p.has-bar{z-index:2}
.ted-p.dragging{opacity:.35}
/* the wash behind the text: gilyon's hover tint, and on the chosen paragraph
   a deeper one with a gold rule down its reading edge */
.ted-flag{position:absolute;z-index:-1;grid-column:2;top:0;bottom:0;inset-inline:-14px;
  border-inline-start:3px solid transparent;border-radius:2px;
  transition:background .12s,border-color .12s}
.ted-p:hover .ted-flag{background:var(--sh-tint)}
.ted-p.sel .ted-flag,.ted-p:focus-within .ted-flag{background:var(--sh-sel);
  border-inline-start-color:var(--sh-gold)}
/* a change waiting is state, not chrome: a soft rule stays at rest */
.ted-p.dirty .ted-flag{border-inline-start-color:var(--sh-gold-soft)}
.ted-p.dirty.sel .ted-flag,.ted-p.dirty:focus-within .ted-flag{
  border-inline-start-color:var(--sh-gold)}

.ted-tx{grid-column:2;outline:none;line-height:1.72;white-space:pre-wrap;
  word-break:normal;overflow-wrap:anywhere;min-height:1.4em;min-width:0}
.ted-tx:empty::before{content:attr(data-empty);color:#b9b3a4;font-style:italic}
.ted-tx mark{background:rgba(245,158,11,.38);color:inherit;border-radius:2px}
.ted-p[data-r=title] .ted-tx,.ted-p[data-r=anaf] .ted-tx,
.ted-p[data-r=h2] .ted-tx,.ted-p[data-r=h3] .ted-tx,
.ted-p[data-r=author] .ted-tx{font-weight:700}
.ted-p[data-r=title] .ted-tx{margin:6px 0 2px}
.ted-p[data-r=anaf] .ted-tx,.ted-p[data-r=h2] .ted-tx{margin-top:8px}
.ted-p[data-r=role] .ted-tx,.ted-p[data-r=daf] .ted-tx{color:#4a4136}
.ted-p[data-r=unused] .ted-tx{color:#a49a8b;text-decoration:line-through
  rgba(120,110,95,.4)}
/* the enlarged initial the page opens a piece with. ::first-letter keeps it
   out of the DOM entirely, so typing into the paragraph can never break it. */
.ted-tx.dw::first-letter{float:right;font-size:2.4em;line-height:.94;font-weight:700;
  margin:.02em 0 0 .1em}
.ted-tx.lastc{text-align-last:center}

/* ── the proof mark: what this paragraph IS, written in the margin ───────── */
.ted-gut{grid-column:1;grid-row:1;position:relative;min-width:0;display:flex;
  align-items:flex-start;gap:4px;padding-top:.3em}
/* gilyon's `.mark`: italic book face, muted; gold on the paragraph you are
   in or under the pointer. It is a button — it chooses the paragraph. */
.ted-chip{flex:1;min-width:0;display:block;border:0;background:none;cursor:pointer;
  padding:2px 4px;text-align:left;color:var(--sh-mark);
  font:italic 14px/1.25 var(--serif)}
:root[lang=he] .ted-chip{font-style:normal;font-family:var(--hebrew);font-size:14.5px}
.ted-chip .cl{display:block;unicode-bidi:plaintext;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ted-chip .cm{display:block;font:600 10.5px/1.3 var(--ui);letter-spacing:.04em;
  color:var(--sh-gold);unicode-bidi:plaintext}
.ted-chip .cm:empty{display:none}
.ted-p:hover .ted-chip,.ted-chip:hover,.ted-p.sel .ted-chip,
.ted-p:focus-within .ted-chip{color:var(--sh-gold)}
.ted-p.dirty .ted-chip{color:var(--sh-gold-d)}
.ted-chip:focus-visible{outline:2px solid var(--sh-gold);outline-offset:1px;border-radius:3px}

/* the grip at the margin's outer edge, shown on the paragraph you point at:
   drag it into another piece, or click it to choose the piece from a list */
.ted-acts{flex:none;opacity:0;pointer-events:none;transition:opacity .12s}
.ted-p:hover .ted-acts,.ted-p:focus-within .ted-acts,.ted-p.acts .ted-acts,
.ted-p.sel .ted-acts{opacity:1;pointer-events:auto}
.ted-acts .ab{display:grid;place-items:center;width:22px;height:22px;padding:0;
  cursor:grab;background:none;border:1px solid transparent;border-radius:4px;color:#9a917f}
.ted-acts .ab svg{width:14px;height:14px}
.ted-acts .ab .aw{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.ted-acts .ab:hover{color:var(--sh-gold-d);border-color:#e0d9ca;background:#fff}
.ted-acts .ab:focus-visible{outline:2px solid var(--sh-gold);outline-offset:1px}

/* ── the toolbar on the chosen paragraph — gilyon's `.bar` ───────────────── */
.ted-bar{position:absolute;z-index:5;grid-column:2;inset-inline:-10px;
  bottom:calc(100% + 4px);display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  background:#fff;border:1px solid #d9d2c2;border-radius:6px;padding:6px;
  box-shadow:0 6px 24px rgba(28,42,69,.16);font-family:var(--ui);direction:ltr;
  text-align:left;animation:tedbar .12s ease-out}
.ted-bar.below{bottom:auto;top:calc(100% + 4px)}
:root[dir=rtl] .ted-bar{direction:rtl;text-align:right}
@keyframes tedbar{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.ted-bar .kind{border:1px solid transparent;background:none;border-radius:4px;
  padding:5px 9px;font:13.5px/1.2 var(--ui);color:#1c2a45;cursor:pointer;white-space:nowrap}
:root[lang=he] .ted-bar .kind,:root[lang=he] .ted-bar .tool{font-family:var(--ui-he,var(--ui))}
.ted-bar .kind:hover{background:#f4efe4}
.ted-bar .kind[aria-pressed=true]{background:#1c2a45;color:#fff}
.ted-bar .sep{width:1px;align-self:stretch;background:#e5dfd2;margin:2px 4px}
.ted-bar .tool{display:inline-flex;align-items:center;gap:5px;border:1px solid #e0d9ca;
  background:#fff;border-radius:4px;padding:4px 9px;font:13px/1.2 var(--ui);
  color:#1c2a45;cursor:pointer;white-space:nowrap}
.ted-bar .tool svg{width:14px;height:14px;flex:none}
.ted-bar .tool:hover{border-color:var(--sh-gold)}
.ted-bar .tool.undo{color:var(--sh-brick)}
.ted-bar .kind:focus-visible,.ted-bar .tool:focus-visible{outline:2px solid var(--sh-gold);
  outline-offset:1px}

/* what is pending on this paragraph, said plainly under it */
.ted-note{display:none;grid-column:2;direction:rtl;font-family:var(--ui);
  font-size:12px;color:var(--sh-gold-d);margin-top:3px;gap:10px;align-items:center}
:root[dir=ltr] .ted-note{direction:ltr}
.ted-p.dirty .ted-note{display:flex}
.ted-note b{font-weight:600;font-style:italic}
.ted-note .undo{background:none;border:0;cursor:pointer;color:var(--sh-dim);
  font-size:12px;text-decoration:underline;padding:0}
.ted-note .undo:hover{color:var(--sh-brick)}

/* where the dragged paragraph will land: a gold line across the text */
.ted-p.dropb::before,.ted-p.dropa::after{content:'';position:absolute;grid-column:2;
  inset-inline:-14px;height:2px;border-radius:2px;background:var(--sh-gold);
  box-shadow:0 0 0 3px rgba(168,130,58,.18)}
.ted-p.dropb::before{top:-3px}
.ted-p.dropa::after{bottom:-5px}
.tedghost{position:fixed;z-index:1500;pointer-events:none;background:var(--card);
  border:1px solid var(--accent-l);border-radius:var(--pill);box-shadow:var(--shadow);
  padding:4px 12px;font-size:var(--t-label);color:var(--ink-hi);max-width:320px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── re-designate / move — built from THIS sefer's parts, never a fixed list */
.tedpop{position:fixed;z-index:1450;width:296px;max-height:min(70vh,520px);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rad-s);
  box-shadow:var(--shadow);padding:6px;animation:slideUp .16s ease-out}
.tedpop .tph{font-size:var(--t-eyebrow);letter-spacing:1px;font-weight:700;
  text-transform:uppercase;color:var(--faint);padding:9px 9px 5px}
.tedpop .tpo{display:flex;align-items:baseline;gap:8px;width:100%;background:none;border:0;
  color:var(--ink);font-size:var(--t-ui);text-align:start;padding:6px 9px;
  border-radius:var(--rad-xs);cursor:pointer;font-family:inherit}
.tedpop .tpo:hover{background:var(--l2);color:var(--ink-hi)}
.tedpop .tpo.on{background:var(--accent-w);color:var(--accent);font-weight:700}
.tedpop .tpo:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tedpop .tpo .he{direction:rtl;font-family:var(--hebrew);font-size:14px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tedpop .tpo small{color:var(--faint);font-size:var(--t-meta);margin-inline-start:auto;
  white-space:nowrap;flex:none}
.tedpop .sep{height:1px;background:var(--line);margin:5px 2px}

/* ── the side: the sefer's own map, and the page the paragraph lands on ──── */
.tedside{width:344px;flex:none;display:flex;flex-direction:column;min-height:0;
  border-inline-start:1px solid var(--line);background:var(--card);padding:10px 12px 12px}
.tedside-h{flex:none;font-size:var(--t-eyebrow);letter-spacing:1px;font-weight:700;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
@media(max-width:1180px){.tedside{display:none}}
.tedtabs{flex:none;display:flex;gap:4px;background:var(--l2);border-radius:var(--rad-s);
  padding:3px;margin-bottom:10px}
.tedtabs button{flex:1;border:0;background:none;cursor:pointer;color:var(--dim);
  font-family:inherit;font-size:var(--t-label);font-weight:600;padding:5px 8px;
  border-radius:var(--rad-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tedtabs button:hover{color:var(--ink)}
.tedtabs button.on{background:var(--card);color:var(--ink-hi);box-shadow:var(--shadow-s)}
.tedtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tedpane{flex:1;min-height:0;display:flex;flex-direction:column}
.tedpane.hide{display:none !important}

/* THE MAP — every piece and heading, each one a jump. Its rows name what
   they are the way the sheet's margin does: a quiet italic word, not a pill. */
.tednav{flex:1;min-height:0;overflow:auto;direction:rtl;padding:2px}
.tednav .nrow{display:flex;align-items:baseline;gap:8px;width:100%;text-align:start;
  background:none;border:0;border-inline-start:3px solid transparent;border-radius:3px;
  cursor:pointer;padding:5px 8px;margin-bottom:1px;color:var(--ink);font-family:inherit;
  font-size:var(--t-ui);line-height:1.45}
.tednav .nrow:hover{background:var(--l2)}
.tednav .nrow.on{background:var(--accent-w);border-inline-start-color:var(--accent)}
.tednav .nrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tednav .nt{flex:none;font:italic 12px/1.2 var(--serif);color:var(--dim);white-space:nowrap}
:root[lang=he] .tednav .nt{font-style:normal;font-family:var(--hebrew);font-size:12.5px}
.tednav .nx{min-width:0;flex:1;font-family:var(--hebrew);font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tednav .nrow.piece{margin-top:12px;border-bottom:1px solid var(--line);border-radius:0;
  padding-bottom:6px}
.tednav .nrow.piece .nx{font-weight:700;color:var(--ink-hi);font-size:14.5px}
.tednav .nrow.piece:first-child{margin-top:0}
.tednav .nrow.d1{padding-inline-start:20px}
.tednav .nrow.d2{padding-inline-start:34px}
.tednav .nrow.dirty .nx{color:var(--accent)}
.tednav .nempty{padding:26px 10px;text-align:center;color:var(--faint);
  font-size:var(--t-label)}

.livepage{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;overflow:auto}
.livepage img,.livepage iframe{background:var(--sheet);border-radius:6px;
  box-shadow:var(--shadow-lg);display:block;max-width:100%}
.livepage img{height:auto}
.livepage iframe{width:100%;height:100%;border:0}
.livepage .lpn{font-size:var(--t-meta);color:var(--faint);font-family:var(--mono);
  padding:8px 0 0;flex:none}

/* ── the head: the title, one line of help, the search ─────────────────── */
#ov-text .ovhd{height:auto;min-height:48px;flex-wrap:wrap;row-gap:6px;padding:8px 18px}
.tedlede{font-size:12.5px;color:var(--dim);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
#ov-text .ovsearch{flex:0 1 220px;min-width:110px}

/* ── the save bar, gilyon's: back · where the work stands · save ────────── */
#ov-text .ovfoot.tedsave{position:relative;justify-content:center;gap:16px;
  padding:11px 18px;transition:background .14s,border-color .14s}
.tedback{background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--ink);
  font:inherit;font-size:var(--t-ui);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line2)}
.tedback:hover{color:var(--ink-hi);text-decoration-color:currentColor}
.tedstate{min-width:170px;font-size:13px;color:var(--dim);text-align:center;
  display:inline-flex;justify-content:center}
#ted-hint:empty{display:none}
#ted-dirty{display:inline-flex;align-items:center;gap:6px;font-weight:700;
  color:var(--accent);white-space:nowrap}
#ted-dirty::before{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:none}
#ted-dirty:empty{display:none}
#ov-text .tedsave #ted-apply{padding-inline:20px;font-weight:600}
/* the keys, at the bar's own start, out of the way of the three that matter */
.tedkbd{position:absolute;inset-inline-start:18px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:8px;font-size:var(--t-meta);
  color:var(--faint);white-space:nowrap}
.tedkbd kbd{font-family:var(--mono);font-size:9.5px;border:1px solid var(--line2);
  border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:var(--card2);
  color:var(--dim)}
/* UNSAVED IS A STATE, and it is worth a whole bar */
#ov-text.dirty .ovfoot{background:linear-gradient(0deg,rgba(var(--motif),.10),
  rgba(var(--motif),.10)),var(--card);border-top-color:var(--accent-l)}
#ov-text.dirty #ted-apply{animation:tedpulse 2.4s ease-in-out 1}
@keyframes tedpulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--motif),0)}
  35%{box-shadow:0 0 0 5px rgba(var(--motif),.26)}}

/* ── narrower screens ───────────────────────────────────────────────────── */
@media(max-width:1280px){.tedkbd{display:none}}
@media(max-width:1000px){.tedlede{display:none}}
/* gilyon at 900px: the sheet fills the screen, the marks sit above their
   paragraph as a small line, and the toolbar sits in the flow */
@media(max-width:900px){
  .teddesk{padding:0 0 90px}
  .tedsheet{--mk:0px;--mkgap:0px;--pad:18px;max-width:none;margin-top:0;
    padding:6px var(--pad) 40px}
  .tedsheet::before{inset-inline:0;box-shadow:none}
  .ted-empty,.ted-skel{margin-inline-start:0}
  .tedpiece{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad)}
  .ted-p{grid-template-columns:minmax(0,1fr);column-gap:0;
    margin-inline:-10px;padding-inline:10px}
  .ted-flag{grid-column:1;inset-inline:0}
  .ted-gut{grid-column:1;grid-row:auto;order:0;padding-top:2px}
  .ted-chip{text-align:start;font-size:12.5px;padding:0;display:flex;gap:8px;
    align-items:baseline}
  .ted-chip .cl,.ted-chip .cm{display:inline}
  .ted-chip .cm:empty{display:none}
  .ted-bar{position:static;grid-column:1;order:1;margin:4px 0 6px;box-shadow:none;
    animation:none}
  .ted-tx{grid-column:1;order:2}
  .ted-note{grid-column:1;order:3}
  .ted-p.dropb::before,.ted-p.dropa::after{grid-column:1;inset-inline:0}
  #ov-text .ovhd{padding:8px 12px;gap:8px}
  #ov-text #ted-width{display:none}
  #ov-text .ovsearch{flex:1 1 120px}
  #ov-text .ovfoot.tedsave{gap:10px;padding:9px 12px}
  .tedstate{min-width:0}
}
@media(max-width:520px){
  .tedback{display:none}
  #ov-text .ovfoot.tedsave{justify-content:space-between}
  #ov-text .tedsave #ted-apply{padding-inline:14px}
}

/* while the manuscript has the screen, the page behind it holds still: a
   studio bar wider than a phone must not let the whole view slide sideways */
html:has(#ov-text:not(.hide)){overflow:hidden}