/* ============================================================================
   notes-type.css — the typing half's arrangement                       v2.29.0
   ============================================================================
   Scoped to .eos-ntp, built from the same --ntp-* tokens as notes-pro.css and
   deliberately the mirror image of notes-ink.css: same row heights, same chip
   styling, same popover shape, same overflow behaviour. Switching Type <-> Draw
   should look like the same furniture rearranged, not a different application.

   THE RULE THIS FILE OBEYS: .eos-ntp-edwrap is flex:1;min-height:0, so it is the
   row that collapses when chrome grows. Every control here folds into a popover,
   the sub-row or the command palette BEFORE the editor loses a pixel.
   ==========================================================================*/

/* --------------------------------------------------------- mode-row buttons */

.eos-ntp-ctlb {
  width: 30px; height: 30px; flex: none; padding: 0;
  border: 0; background: transparent; color: var(--ntp-fg2);
  border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.eos-ntp-ctlb .svg { width: 16px; height: 16px; }
.eos-ntp-ctlb:hover { background: var(--ntp-soft); color: var(--ntp-fg); }
.eos-ntp-ctlb.on { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); }

/* ------------------------------------------------------- toolbar grouping */

.eos-ntp-tb .eos-ntp-g { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.eos-ntp-tb .st { font-size: 14px; text-decoration: line-through; }

/* Overflow order is deliberate and is the opposite of what flex-wrap does on its
   own. Structure folds first (the block style is also on the ; shortcuts and in
   the palette), then Lists. EMPHASIS and CAPTURE never fold — timestamp,
   scripture and link are what make this a sermon-notes panel. */
/* The PANEL is what varies, not the viewport — a 320px Studio panel can sit inside a
   1600px window, so every one of these is a container query. A media query here was
   simply wrong: the header refused to hide at exactly the size it needed to. */
.eos-ntp { container-type: inline-size; }

/* overflow-x:auto, never hidden. Clipping the tail of the toolbar puts More — the
   control that exists to REACH what folded — out of reach, which is the same defect
   as the old floating palette, wearing a different hat. */
.eos-ntp-tb {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  /* v2.33.0 - CENTRED. justify-content:center would push the first group off the left
     edge and out of reach once the row scrolls, so the centring is done with auto
     margins on the grow spacers: they collapse to nothing the moment the row overflows,
     and the toolbar falls back to left-aligned scrolling on its own. */
  justify-content: flex-start;
}
.eos-ntp-tb .grow { flex: 1 1 auto; min-width: 0; }
/* v2.33.0 - centring by MIRRORING the existing .grow spacer, not by auto margins. The
   first attempt put margin-left:auto on the first group and margin-right:auto on the
   last, and both computed to exactly 0px: flex-grow is resolved BEFORE auto margins, so
   .grow had already taken all 304px of free space and there was none left to centre with.
   A matching spacer at the head splits the slack evenly, and both collapse to nothing the
   moment the row overflows - so a narrow panel falls back to left-aligned scrolling on its
   own and the first control is never pushed out of reach. */
.eos-ntp-tb::before { content: ""; flex: 1 1 auto; min-width: 0; }
/* More is PINNED to the trailing edge of the scrolling strip. It is the control that
   reaches whatever folded away, so it is the one button that must never require a
   scroll to find. */
.eos-ntp-tb .more {
  position: sticky; right: 0; flex: none; z-index: 2;
  background: var(--ntp-softer);
  box-shadow: -8px 0 8px -6px var(--ntp-softer);
}
.eos-ntp-tb .grow { min-width: 0; }

/* v2.33.0 - THE FOLD ORDER WAS BACKWARDS AT THE BOTTOM. The old comment here claimed
   undo was "also Ctrl+Z, the palette and the status bar" and folded History first at
   330px. On a 320px floating Studio panel - which is precisely the phone case - there is
   no Ctrl+Z, no Ctrl+K, and it was never in the status bar at all. The panel deleted its
   only tappable Undo at exactly the width where it was the only one. Indent and outdent
   go instead; if the row still cannot afford both, Redo folds and Undo stays, because
   Redo is never the panic action. */
@container (max-width: 520px) { .eos-ntp-head { display: none; } }
@container (max-width: 430px) { .eos-ntp-tb .g-structure, .eos-ntp-tb .sep-structure { display: none; } }
@container (max-width: 380px) { .eos-ntp-tb .g-lists [data-cmd="indent"], .eos-ntp-tb .g-lists [data-cmd="outdent"] { display: none; } }
@container (max-width: 345px) { .eos-ntp-tb .g-lists, .eos-ntp-tb .sep-lists { display: none; } }
@container (max-width: 318px) { .eos-ntp-tb #eos-ntp-redo { display: none; } }

@supports not (container-type: inline-size) {
  @media (max-width: 520px) { .eos-ntp-head { display: none; } }
  @media (max-width: 430px) { .eos-ntp-tb .g-structure, .eos-ntp-tb .sep-structure { display: none; } }
  @media (max-width: 380px) { .eos-ntp-tb .g-lists [data-cmd="indent"], .eos-ntp-tb .g-lists [data-cmd="outdent"] { display: none; } }
  @media (max-width: 345px) { .eos-ntp-tb .g-lists, .eos-ntp-tb .sep-lists { display: none; } }
  @media (max-width: 318px) { .eos-ntp-tb #eos-ntp-redo { display: none; } }
}

/* ------------------------------------------------------------- sub-row */

.eos-ntp-subrow { display: none; }
.eos-ntp.has-subrow .eos-ntp-subrow {
  display: block; padding: 7px 13px;
  background: var(--ntp-bg); border-bottom: 1px solid var(--ntp-border);
}
.eos-ntp-find { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.eos-ntp-find input {
  height: 30px; min-width: 0; flex: 1 1 120px;
  border: 1px solid var(--ntp-border); background: var(--ntp-soft); color: var(--ntp-fg);
  border-radius: 8px; font: inherit; font-size: 12px; padding: 0 9px;
}
.eos-ntp-find input:focus-visible { outline: 2px solid var(--ntp-amber); outline-offset: 1px; }
.eos-ntp-find .cnt {
  font-size: 11px; color: var(--ntp-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; min-width: 56px; text-align: center; flex: none;
}
.eos-ntp-find .cnt.is-bad { color: var(--ntp-red); }
.eos-ntp-find .nav {
  width: 28px; height: 28px; flex: none; padding: 0; border: 0; background: transparent;
  color: var(--ntp-fg2); border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.eos-ntp-find .nav .svg { width: 15px; height: 15px; }
.eos-ntp-find .nav:hover { background: var(--ntp-soft); color: var(--ntp-fg); }
.eos-ntp-find .tg {
  height: 26px; padding: 0 8px; flex: none;
  border: 1px solid var(--ntp-border); background: transparent; color: var(--ntp-fg2);
  border-radius: 7px; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.eos-ntp-find .tg.on { background: var(--ntp-amber-glow); border-color: var(--ntp-amber-glow); color: var(--ntp-amber-txt); }
.eos-ntp-find .tg:hover { color: var(--ntp-fg); }

.eos-ntp-crumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11.5px; }
.eos-ntp-crumb .cb {
  border: 0; background: transparent; color: var(--ntp-fg2); font: inherit; font-size: 11.5px;
  padding: 2px 5px; border-radius: 6px; cursor: pointer; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eos-ntp-crumb .cb:hover { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); }
.eos-ntp-crumb .sepc { color: var(--ntp-muted); }
.eos-ntp-crumb .cnone { color: var(--ntp-muted); }

/* search highlights — DOM only, torn down before anything is saved */
.eos-ntp-editor mark[data-eosf] { background: var(--ntp-amber-glow); color: inherit; border-radius: 3px; }
.eos-ntp-editor mark[data-eosf].is-on { background: var(--ntp-amber); color: var(--ntp-on-amber); }

/* --------------------------------------------------------- status bar */

.eos-ntp-status { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.eos-ntp-status .eos-ntp-fbtn { flex: none; }
.eos-ntp-status .eos-ntp-fbtn.is-chip { border-color: transparent; background: transparent; padding: 0 7px; }
.eos-ntp-status .eos-ntp-fbtn.is-chip:hover { background: var(--ntp-amber-glow); }
.eos-ntp-status .eos-ntp-chip { flex: none; }
.eos-ntp-status .eos-ntp-fbtn.on { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); border-color: var(--ntp-amber-glow); }
@container (max-width: 380px) { .eos-ntp-status .eos-ntp-collapse { display: none; } }
@supports not (container-type: inline-size) {
  @media (max-width: 380px) { .eos-ntp-status .eos-ntp-collapse { display: none; } }
}

/* -------------------------------------------------- focus / privacy / caret */

/* Dim by an EXPLICIT class rather than "every child except the caret's". The
   `> *` form measured inconsistently across siblings — h3 carries its own
   opacity from notes-pro.css and the two declarations interacted differently per
   element — and a state effect that is only sometimes right is worse than none.
   notes-type.js marks the blocks; this only paints them. */
.eos-ntp.is-focus .eos-ntp-editor > .is-dim { opacity: .3 !important; transition: opacity .18s; }
.eos-ntp.is-focus .eos-ntp-editor > .is-caret { opacity: 1 !important; }

.eos-ntp.is-private .eos-ntp-editor { filter: blur(8px); pointer-events: none; user-select: none; }
.eos-ntp.is-private .eos-ntp-edwrap::after {
  content: "Notes hidden — click the shield to show them";
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 24px; font-size: 12.5px; font-weight: 600; color: var(--ntp-muted);
  background: color-mix(in srgb, var(--ntp-bg) 55%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .eos-ntp.is-private .eos-ntp-edwrap::after { background: rgba(128,128,128,.14); }
}

/* --------------------------------------------------------------- popovers */

.eos-type-pop {
  position: absolute; z-index: 60; display: none; width: 244px;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ntp-bg); border: 1px solid var(--ntp-border);
  border-radius: 14px; padding: 11px; box-shadow: var(--ntp-shadow);
}
.eos-type-pop.open { display: block; }
.eos-type-pop h5 {
  margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ntp-muted);
}
.eos-type-pop .olist { display: flex; flex-direction: column; gap: 1px; }
.eos-type-pop .oi {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--ntp-fg2);
  font: inherit; font-size: 12px; padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.eos-type-pop .oi:hover { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); }
.eos-type-pop .oi.h2 { padding-left: 20px; }
.eos-type-pop .oi.h3 { padding-left: 32px; font-size: 11.5px; }
.eos-type-pop .oi .ago { margin-left: auto; font-size: 10px; color: var(--ntp-muted); }
.eos-type-pop .none { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: var(--ntp-muted); }
.eos-type-pop .st { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 2px; color: var(--ntp-fg2); }
.eos-type-pop .st b { font-weight: 600; color: var(--ntp-fg); font-variant-numeric: tabular-nums; }
.eos-type-pop .meter { height: 5px; border-radius: 99px; background: var(--ntp-soft); margin: 7px 0 2px; overflow: hidden; }
.eos-type-pop .meter i { display: block; height: 100%; background: var(--ntp-amber); }
.eos-type-pop .meter.is-hot i { background: var(--ntp-red); }

.eos-type-pop.is-cmd { padding: 9px; }
.eos-type-pop.is-cmd input {
  width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid var(--ntp-border); background: var(--ntp-soft); color: var(--ntp-fg);
  border-radius: 9px; font: inherit; font-size: 13px;
}
.eos-type-pop.is-cmd #eos-type-cl { margin-top: 6px; }
.eos-type-pop.is-cmd .ci { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ntp-fg2); cursor: pointer; }
.eos-type-pop.is-cmd .ci.on { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); font-weight: 600; }
.eos-type-pop.is-cmd .ci.is-none { color: var(--ntp-muted); cursor: default; }

/* --------------------------------------------------------- accessibility */

.eos-ntp-ctlb:focus-visible,
.eos-ntp-subrow button:focus-visible,
.eos-type-pop button:focus-visible,
.eos-type-pop input:focus-visible { outline: 2px solid var(--ntp-amber); outline-offset: 2px; }

.eos-ntp.ink-big .eos-ntp-ctlb { width: 40px; height: 40px; }
.eos-ntp.ink-big .eos-ntp-find input,
.eos-ntp.ink-big .eos-ntp-find .tg { height: 36px; font-size: 13px; }
.eos-ntp.ink-contrast .eos-ntp-find .tg { border-width: 2px; }
.eos-ntp.ink-contrast .eos-ntp-editor mark[data-eosf] { outline: 1px solid currentColor; }
/* left-handed members get the mode-row controls on the leading edge too */
.eos-ntp.ink-left .eos-ntp-controls { flex-direction: row-reverse; }
.eos-ntp.ink-left .eos-ntp-status { flex-direction: row-reverse; }

@media (prefers-reduced-motion: reduce) {
  .eos-ntp-ctlb,
  .eos-ntp.is-focus .eos-ntp-editor > * { transition: none !important; }
}

/* ------------------------------------------------------ my notes (v2.30.0) --
   A SHEET over the editor, inside .eos-ntp-edwrap — never a new chrome row, and
   never the slot after edwrap (that belongs to notes-scripture.js). It is
   transient, so the editor gives up no permanent height for it. */

.eos-type-sheet {
  position: absolute; inset: 0; z-index: 12; display: none;
  flex-direction: column; background: var(--ntp-bg);
}
.eos-ntp.has-sheet .eos-type-sheet { display: flex; }
.eos-ntp.has-sheet .eos-ntp-ink,
.eos-ntp.has-sheet .eos-ntp-ink2,
.eos-ntp.has-sheet .eos-ntp-inkring { display: none; }

.eos-type-sheet .sh-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 9px; border-bottom: 1px solid var(--ntp-border); }
.eos-type-sheet .sh-t { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eos-type-sheet .sh-c { font-size: 11px; color: var(--ntp-muted); font-variant-numeric: tabular-nums; flex: none; }
.eos-type-sheet .grow { flex: 1; }
.eos-type-sheet .sh-x {
  width: 28px; height: 28px; flex: none; padding: 0; border: 0; background: transparent;
  color: var(--ntp-fg2); border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.eos-type-sheet .sh-x:hover { background: var(--ntp-soft); color: var(--ntp-fg); }
.eos-type-sheet .sh-x .svg { width: 15px; height: 15px; }

.eos-type-sheet .sh-srch { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--ntp-border); }
.eos-type-sheet .sh-srch .svg { width: 15px; height: 15px; color: var(--ntp-muted); flex: none; }
.eos-type-sheet .sh-srch input {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid var(--ntp-border); background: var(--ntp-soft); color: var(--ntp-fg);
  border-radius: 9px; font: inherit; font-size: 12.5px;
}
.eos-type-sheet .sh-chips { display: flex; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--ntp-border); overflow-x: auto; scrollbar-width: thin; }
.eos-type-sheet .sh-chip {
  height: 27px; padding: 0 11px; flex: none; white-space: nowrap;
  border: 1px solid var(--ntp-border); background: transparent; color: var(--ntp-fg2);
  border-radius: 999px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.eos-type-sheet .sh-chip.on { background: var(--ntp-amber); border-color: var(--ntp-amber); color: var(--ntp-on-amber); }

.eos-type-sheet .sh-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 5px 7px 10px; }
.eos-type-sheet .sh-row { display: flex; gap: 9px; padding: 9px 8px; border-radius: 10px; cursor: pointer; align-items: flex-start; }
.eos-type-sheet .sh-row:hover { background: var(--ntp-soft); }
.eos-type-sheet .sh-row:focus-visible { outline: 2px solid var(--ntp-amber); outline-offset: -2px; }
.eos-type-sheet .sh-star { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--ntp-muted); flex: none; }
.eos-type-sheet .sh-star .svg { width: 15px; height: 15px; }
.eos-type-sheet .sh-star.on { color: var(--ntp-amber-txt); }
.eos-type-sheet .sh-star.on .svg { fill: currentColor; }
.eos-type-sheet .sh-body { flex: 1; min-width: 0; }
.eos-type-sheet .sh-ttl { font-size: 12.5px; font-weight: 600; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.eos-type-sheet .sh-when { font-size: 10.5px; color: var(--ntp-muted); font-weight: 400; }
.eos-type-sheet .sh-x1 {
  font-size: 11.5px; color: var(--ntp-muted); margin-top: 2px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.eos-type-sheet .sh-x1 mark { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); border-radius: 3px; padding: 0 2px; }
.eos-type-sheet .sh-tags { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.eos-type-sheet .sh-tg { font-size: 10px; font-weight: 600; background: var(--ntp-soft); color: var(--ntp-fg2); border-radius: 999px; padding: 2px 8px; }
.eos-type-sheet .sh-meta { font-size: 10.5px; color: var(--ntp-muted); text-align: right; flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eos-type-sheet .sh-none { padding: 30px 22px; text-align: center; color: var(--ntp-muted); font-size: 12.5px; line-height: 1.6; margin: 0; }

.eos-type-sheet .sh-read { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; font-size: 14px; line-height: 1.7; color: var(--ntp-fg); }
.eos-type-sheet .sh-read h1 { font-size: 19px; margin: 2px 0 9px; }
.eos-type-sheet .sh-read h2 { font-size: 16px; margin: 14px 0 6px; color: var(--ntp-amber-txt); }
.eos-type-sheet .sh-read h3 { font-size: 14px; margin: 12px 0 4px; opacity: .9; }
.eos-type-sheet .sh-read blockquote { border-left: 3px solid var(--ntp-green); padding: 5px 14px; margin: 10px 0; font-style: italic; color: var(--ntp-fg2); }
.eos-type-sheet .sh-read img { max-width: 100%; border-radius: 8px; }

.eos-type-sheet .sh-foot {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px;
  border-top: 1px solid var(--ntp-border); background: var(--ntp-softer);
  font-size: 11px; color: var(--ntp-muted);
}
.eos-type-sheet .sh-foot .svg { width: 13px; height: 13px; flex: none; }
.eos-type-sheet .sh-go {
  color: var(--ntp-amber-txt); font-weight: 600; text-decoration: none;
  border: 1px solid var(--ntp-amber-glow); background: var(--ntp-amber-glow);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.eos-type-sheet .sh-go:hover { filter: brightness(1.08); }

/* the mode row is the tightest strip in the panel, so My notes is the first thing
   to fold there — it is also in the palette and in the statistics popover */
@container (max-width: 400px) { .eos-ntp .eos-ntp-foldable { display: none; } }
@supports not (container-type: inline-size) {
  @media (max-width: 400px) { .eos-ntp .eos-ntp-foldable { display: none; } }
}

/* -------------------------------------------------- font picker (v2.32.0) --
   Each row is set in its OWN family, because the name of a typeface tells a
   member far less than the shape of it. */

.eos-type-fcats { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.eos-type-fcats .fcat {
  height: 26px; padding: 0 10px; flex: none; white-space: nowrap;
  border: 1px solid var(--ntp-border); background: transparent; color: var(--ntp-fg2);
  border-radius: 999px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.eos-type-fcats .fcat.on { background: var(--ntp-amber); border-color: var(--ntp-amber); color: var(--ntp-on-amber); }

.eos-type-fonts { max-height: 208px; overflow-y: auto; overscroll-behavior: contain; }
.eos-type-fonts .frow { padding: 7px 9px; }
.eos-type-fonts .frow .fs { font-size: 15px; line-height: 1.25; }
.eos-type-fonts .frow.on { background: var(--ntp-amber-glow); color: var(--ntp-amber-txt); }
.eos-type-fonts .frow.on::after { content: "✓"; margin-left: auto; font-size: 12px; }

.eos-type-sizes { display: flex; gap: 5px; flex-wrap: wrap; }
.eos-type-sizes .fsz {
  min-width: 34px; height: 28px; padding: 0 8px; flex: none;
  border: 1px solid var(--ntp-border); background: transparent; color: var(--ntp-fg2);
  border-radius: 8px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.eos-type-sizes .fsz.on { background: var(--ntp-amber); border-color: var(--ntp-amber); color: var(--ntp-on-amber); }

#eos-type-font { width: 268px; }
@container (max-width: 340px) { #eos-type-font { width: calc(100cqw - 24px); } }


/* ============================ v2.33.0 - the user-friendly pass ============ */

/* the toast can carry a way out, and every message is now spoken */
.eos-ntp-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eos-ntp-toast.has-act { display: inline-flex; align-items: center; gap: 12px; padding-right: 8px; }
.eos-ntp-toast .act {
  border: 0; background: rgba(128,128,128,.3); color: inherit;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; cursor: pointer; flex: none; min-height: 32px;
}
.eos-ntp-toast .act:hover { background: rgba(128,128,128,.45); }
.eos-ntp-toast .act:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* the clock rides the bookmark button, so the control shows its own effect rather than
   describing it two controls away */
.eos-ntp-tsclock { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.eos-ntp-tb .ts-btn.has-clock { padding-right: 10px; }
.eos-ntp-now.is-moved { display: none !important; }

/* paper: a grid of real rulings with plain-words captions, not a list of nouns */
.eos-ink-papers { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.eos-ink-pap {
  border: 1px solid var(--ntp-border); background: transparent; color: var(--ntp-fg);
  border-radius: 10px; padding: 6px; cursor: pointer; text-align: left; font: inherit;
}
.eos-ink-pap:hover { border-color: var(--ntp-muted); }
.eos-ink-pap.on { border-color: var(--ntp-amber); box-shadow: 0 0 0 1px var(--ntp-amber); }
.eos-ink-pap:focus-visible { outline: 2px solid var(--ntp-amber); outline-offset: 2px; }
.eos-ink-pap .pv {
  display: block; height: 44px; border-radius: 6px; position: relative; overflow: hidden;
  border: 1px solid var(--ntp-border); background-color: var(--ntp-bg);
}
.eos-ink-pap .pn { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; margin-top: 5px; }
.eos-ink-pap.on .pn { color: var(--ntp-amber-txt); }
.eos-ink-pap .pc { display: block; font-size: 10px; line-height: 1.35; color: var(--ntp-muted); margin-top: 1px; }
.eos-ink-pap .pd { font-size: 9px; font-weight: 600; background: var(--ntp-soft); color: var(--ntp-muted); border-radius: 999px; padding: 1px 6px; }

/* The previews are DIAGRAMS, not faithful samples. A true-to-scale ruling is invisible at
   44px, so weight and spacing are exaggerated to hold up against the tile ground. */
.pv-lined   { background-image: repeating-linear-gradient(to bottom,transparent 0 9px,var(--ntp-border) 9px 10px); }
.pv-wide    { background-image: repeating-linear-gradient(to bottom,transparent 0 13px,var(--ntp-border) 13px 14px); }
.pv-dot     { background-image: radial-gradient(var(--ntp-border) 1.2px,transparent 1.2px); background-size: 8px 8px; }
.pv-grid    { background-image: repeating-linear-gradient(to bottom,transparent 0 8px,var(--ntp-border) 8px 9px),repeating-linear-gradient(to right,transparent 0 8px,var(--ntp-border) 8px 9px); }
.pv-eng     { background-image: repeating-linear-gradient(to bottom,transparent 0 4px,var(--ntp-border) 4px 5px),repeating-linear-gradient(to right,transparent 0 4px,var(--ntp-border) 4px 5px); }
.pv-cornell { background-image: linear-gradient(to right,transparent 0 26px,var(--ntp-muted) 26px 27px,transparent 27px),repeating-linear-gradient(to bottom,transparent 0 9px,var(--ntp-border) 9px 10px); }
.pv-plan    { background-image: linear-gradient(to right,transparent 0 14px,var(--ntp-muted) 14px 15px,transparent 15px),repeating-linear-gradient(to bottom,transparent 0 11px,var(--ntp-border) 11px 12px); }
.pv-music   { background-image: repeating-linear-gradient(to bottom,var(--ntp-border) 0 1px,transparent 1px 4px,var(--ntp-border) 4px 5px,transparent 5px 8px,var(--ntp-border) 8px 9px,transparent 9px 18px); }
.pv-story   { box-shadow: inset 0 0 0 1px var(--ntp-border); background-image: linear-gradient(var(--ntp-border),var(--ntp-border)); background-size: 100% 1px; background-position: 0 50%; background-repeat: no-repeat; }
.pv-blank::after { content: "no ruling"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: var(--ntp-muted); }

/* "Larger controls" has to reach the controls used by the member with the worst aim. It
   grew the pen toolbar and the mode row and did nothing to the format toolbar or the
   status bar. The row height is HELD and the target grown into the row's own padding
   instead, so the editor gives up nothing for it. */
.eos-ntp.ink-big .eos-ntp-tb button,
.eos-ntp.ink-big .eos-ntp-fbtn { min-width: 40px; }
.eos-ntp.ink-big .eos-ntp-tb button::after,
.eos-ntp.ink-big .eos-ntp-fbtn::after {
  content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px;
}
.eos-ntp.ink-big .eos-ntp-toast .act { min-height: 40px; font-size: 13px; }

/* An on-state that is not only a colour: invisible in greyscale, to several kinds of
   colour blindness, and gone entirely under forced-colors. */
.eos-ntp-tb button, .eos-ntp-status .eos-ntp-fbtn { position: relative; }
.eos-ntp-tb button.on::before,
.eos-ntp-status .eos-ntp-fbtn.on::before {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: 3px; height: 2px;
  border-radius: 2px; background: currentColor;
}
@media (forced-colors: active) {
  .eos-ntp-tb button.on, .eos-ntp-status .eos-ntp-fbtn.on { outline: 2px solid currentColor; outline-offset: -2px; }
}

/* Clear is the one destructive control in the panel, and it sat in the thumb arc beside
   Share. It leads the row now - moved in page-watch.php, NOT with `order`, so the keyboard
   reaches it where the eye finds it. */
.eos-ntp-status #eos-ntp-clear-btn { margin-right: 4px; }

/* --- More becomes searchable, and says what each part of it is ------------- */
.eos-ntp-msearch { padding: 8px 10px 6px; }
.eos-ntp-msearch input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
  padding: 7px 10px; min-height: 34px; border-radius: 8px;
  border: 1px solid var(--ntp-border); background: var(--ntp-bg); color: var(--ntp-fg);
}
.eos-ntp-msearch input:focus-visible { outline: 2px solid var(--ntp-amber); outline-offset: -1px; }
.eos-ntp-mg + .eos-ntp-mg { border-top: 1px solid var(--ntp-border); margin-top: 4px; padding-top: 4px; }
.eos-ntp-mg .mgh {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ntp-muted); padding: 6px 10px 3px;
}
.eos-ntp-mproxy {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px;
  background: transparent; border: 0; color: var(--ntp-fg);
  padding: 8px 10px; min-height: 34px; cursor: pointer; border-radius: 6px;
}
.eos-ntp-mproxy:hover { background: var(--ntp-soft); }
.eos-ntp-mnone { font-size: 11.5px; color: var(--ntp-muted); padding: 10px; margin: 0; }

/* --- the way back, next to Undo ------------------------------------------- */
.eos-ntp-tb .eos-ntp-caret {
  min-width: 16px !important; width: 16px; padding: 0; margin-left: -4px;
  color: var(--ntp-muted);
}
.eos-ntp-tb .eos-ntp-caret .mi { width: 12px; height: 12px; }
.eos-ntp-tb .eos-ntp-caret:hover { color: var(--ntp-fg); }
#eos-type-restore .none { font-size: 11px; line-height: 1.45; color: var(--ntp-muted); margin: 8px 0 0; }

/* A roving tab stop hands the whole toolbar ONE way in, so the ring has to be obvious
   when it lands - the member no longer tabs through every button to find where they are. */
.eos-ntp-tb button:focus-visible,
.eos-ntp-seg button:focus-visible { outline: 2px solid var(--ntp-amber); outline-offset: -2px; border-radius: 7px; }