/* Tables bar and picker, section states, line numbers, block cursor, drop line. */

/* the table bar floats where its table was; the table slides down to make room for it */
.tblbar {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* the format bar's and the tab bar's shape (UI-14b): 36 tall, a capsule, its controls 28 tall on a 14
     radius, 4 from every edge (3 inside its hairline) */
  height: 36px;
  padding: 0 3px;
  border-radius: 18px;
}
.tblbar[hidden] { display: none; }
.tb-act { height: 28px; padding: 0 8px; border: 0; border-radius: 14px; color: var(--fg); font: 500 12px var(--font-ui); white-space: nowrap; }
.tb-act:disabled { opacity: .35; }
.tb-act.danger { color: var(--drift-text); }
.tb-act.tb-done { color: var(--fg-strong); font-weight: 600; }
.tb-sep { flex: none; width: 1px; height: 16px; margin: 0 6px; background: var(--sep); }
.editor table.ntable { outline: 2px solid transparent; outline-offset: 1px; transition: margin-top 300ms var(--sp-smooth), outline-color 160ms var(--ease); }
.editor table.ntable td { transition: background-color 160ms var(--ease); }
.editor table.ntable.tbl-on { margin-top: 44px; }
/* the same table drawn again with its bar open (an undo): already there, nothing slides (tables.js) */
.editor table.ntable.tbl-now { transition: none; }

.tgrid { display: grid; grid-template-columns: repeat(8, 18px); gap: 3px; }
.tgrid button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--sep);
  border-radius: 4px;
  background: var(--fill);
}
.tgrid button.on { border-color: var(--accent); background: var(--accent-soft); }
.tgrid-head { gap: 16px; }
.tgrid-n { color: var(--fg); }

/* an outline rather than an inset shadow, which Safari can draw with an edge missing (a border
   would lose its top and left to the neighbouring cells in a collapsed table). 2 px (UI-13: 1 was too
   faint to tell a cell from the table) */
.editor table.ntable td.cur { outline: 2px solid var(--accent); outline-offset: -2px; }

/* UI-13 (design/runs/UI-13/): the whole table selected, by the circle on its corner: a ring round it and the
   accent's soft tint on every cell (the header row's too) */
.editor table.ntable.tbl-all { outline-color: var(--accent); }
.editor table.ntable.tbl-all tr td,
.editor table.ntable.tbl-all[data-head] tr:first-child td { background: var(--accent-soft); }
.tbl-corner,
.tbl-grip {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  animation: tbl-in 160ms var(--ease) both;
}
@keyframes tbl-in { from { opacity: 0; } }
.tbl-corner[hidden],
.tbl-grip[hidden],
.tbl-ghost[hidden],
.tbl-edges[hidden] { display: none; }
/* the circle: a 22 px target, its 12 px dot solid (UI-14b: the table's edge no longer shows through it), ringed
   in the strong text colour with a halo of the page, so it reads against the table's edge; the accent while
   the table is selected */
.tbl-corner { width: 22px; height: 22px; border-radius: 11px; }
.tbl-corner > i { width: 12px; height: 12px; border-radius: 6px; background: var(--solid); box-shadow: inset 0 0 0 1.5px var(--fg-strong), 0 0 0 2px var(--bg); transition: background-color 120ms var(--ease); }
.tbl-corner[aria-pressed="true"] > i { background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
@media (hover: hover) { .tbl-corner[aria-pressed="false"]:hover > i { background: linear-gradient(var(--press), var(--press)), var(--solid); } }
/* the whole table selected: no blinking caret in the cell it stays in (UI-14b) */
.editor.tbl-whole { caret-color: transparent; }
/* the two bars, on the table's own edge: 28 × 10 targets, a 10 × 2 (or 2 × 10) bar with a halo of the page */
.tbl-grip { border-radius: 6px; cursor: grab; }
.tbl-grip.col { width: 28px; height: 10px; }
.tbl-grip.row { width: 10px; height: 28px; }
.tbl-grip > i { border-radius: 1px; background: var(--fg); box-shadow: 0 0 0 2px var(--bg); transition: background-color 120ms var(--ease); }
.tbl-grip.col > i { width: 10px; height: 2px; }
.tbl-grip.row > i { width: 2px; height: 10px; }
@media (hover: hover) { .tbl-grip:hover > i { background: var(--fg-strong); } }
/* a row or column on the move: lifted onto the solid surface over its shadow (.tbl-ghost), following the
   pointer; the others slide aside (300 ms snappy), and it settles into its slot (200 ms), on transforms */
.editor table.ntable.tbl-moving td { transition: transform 300ms var(--sp-snappy); }
.editor table.ntable.tbl-moving td.tbl-lift { position: relative; z-index: 2; background: var(--solid); transition: none; }
.editor table.ntable.tbl-settling td,
.tbl-ghost.settling { transition: transform 200ms var(--ease); }
/* (under the editor, which is a layer of its own: the lifted cells, solid, sit on it, and its shadow falls
   on the rows around) */
.tbl-ghost { position: absolute; z-index: 0; background: var(--solid); box-shadow: var(--drop); pointer-events: none; }
/* every column's right edge and row's bottom edge: an 8 px target, lit in the accent on hover or held */
.tbl-edges { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tbl-edge { position: absolute; pointer-events: auto; touch-action: none; }
.tbl-edge.col { cursor: col-resize; }
.tbl-edge.row { cursor: row-resize; }
.tbl-edge > i { position: absolute; background: transparent; transition: background-color 120ms var(--ease); }
.tbl-edge.col > i { top: 0; bottom: 0; left: 3px; width: 2px; }
.tbl-edge.row > i { top: 3px; right: 0; left: 0; height: 2px; }
.tbl-edge:hover > i,
.tbl-edge[data-on] > i { background: var(--accent); }

/* Sections */
.editor .fold-head { cursor: default; }
/* renaming: the field is the pill's own shape, from its left end (UI-10f: its padding hangs out to the left
   under the arrow, which draws over it), so neither the words nor the row move (UI-9f). It's as wide as its
   words and its padding, 10 past them (sections.js fits it as Tom types) */
.editor .fold-in {
  box-sizing: border-box;
  max-width: calc(100% + 22px);
  height: 22px;
  margin: 0 0 0 -22px;
  padding: 0 10px 0 22px;
  border: none;
  outline: 1px solid var(--accent);
  outline-offset: 0;
  border-radius: 11px;
  background: var(--bg);
  color: var(--fg-strong);
  font: inherit;
  caret-color: var(--accent);
}
.editor .fold-pill:has(.fold-in) .fold-tw { z-index: 1; }
/* (the field is the pill for now: the pill's own fills stand down, workspace-note.css) */

/* armed (Backspace beside it: press again to delete): the pill itself is outlined, the whole object and
   nothing else (UI-10f: it was the full row, its end over the line numbers) */
.editor .fold.armed > .fold-head .fold-pill { box-shadow: 0 0 0 1px var(--danger); }

.editor .fold.armed > .fold-head .fold-tw { color: var(--drift-text); }

.editor .fold.dragging > .fold-head { opacity: .65; outline: 1px dashed var(--accent); outline-offset: -1px; }

/* where a dragged section will land: The System's bright 4px bar (sections-drag.js places it) */
.drop-line {
  position: absolute;
  z-index: 3;
  height: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--bg);
  pointer-events: none;
}

.drop-line[hidden] { display: none; }

/* Line numbers: in the margin, left of the text, ending 24 from it. Three digits (20 wide) then start inside
   the note's own 48 of padding, so they're whole wherever the note fills its pane: split view, or one pane
   at 1024 with the sidebar open. They ended 30 from it, and "100" was cut by 2.4 there (UI-10f sweep #6,
   UI-11 sweep N2) */
.gutter {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -52px;
  width: 28px;
  pointer-events: none;
  user-select: none;
}

.gutter[hidden] { display: none; }
.gutter .gin { position: relative; }

/* each number is a line box in the note's own font (gutter.js sets its line-height to the note's), so its
   baseline falls where a line of text's does; the digits, smaller and mono, sit on that baseline (UI-9f) */
.gutter span {
  position: absolute;
  right: 0;
  color: var(--faint);
  font: 400 13px var(--font-ui);
  white-space: nowrap;
}
.gutter span > i { font: 400 11px/1 var(--font-mono); font-style: normal; }

.gutter span.cur { color: var(--muted); }
/* a section opening or shutting (gutter.js): the numbers under it go at once and come back, settled,
   once it's done */
.gutter span.ln-out { opacity: 0; transition: opacity 120ms var(--ease); }
.gutter span.ln-in { animation: ln-in 160ms var(--ease) both; }
/* riding with a table as it makes room for its bar, on the table's own curve (UI-14b, gutter.js) */
.gutter span.ln-ride { transition: transform 300ms var(--sp-smooth); }
@keyframes ln-in { from { opacity: 0; } }

@media (max-width: 700px) {
  .page.numbered .editor { padding-left: 34px; }
  .gutter { left: 0; }
}

/* beside a section's header the caret is drawn (caret.js): thin, in the accent, blinking like the
   real one, which hides meanwhile */
.editor.caret-beside { caret-color: transparent; }
.fold-caret {
  position: absolute;
  z-index: 2;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  pointer-events: none;
  animation: caret-blink 1.06s steps(1) infinite;
}
.fold-caret[hidden] { display: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fold-caret { animation: none; } }