/* The workspace's frame (design/v5/V5Work.dc.html, UI-12's design/runs/UI-12/): each side scrolls under the
   top row, its note centred at its width; its name over it in the top row, its tab bar at its top, the
   format bar at the bottom of the side in use. A pane itself (its layer, fades and name) is in
   workspace-pane.css; note content is in workspace-note.css. */

.ws-main {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

/* overflow stays auto: clipping it sideways (so a full-width note sliding beside the sidebar can't
   show a sideways scrollbar for a moment) cost WebKit most of its frames during the slide */
.sheet-scroll { flex: 1; min-height: 0; overflow: auto; }

/* The note: a centred column at its width. A new width is laid out once and its parts slide there on
   transforms (workspace/index.js setWidth): animating max-width re-wrapped every line on every frame */
.note {
  box-sizing: border-box;
  max-width: 600px;
  margin: 0 auto;
  /* its header 24 below the tab bar (UI-12: the bar 56 from the top, 36 tall) */
  padding: 116px 48px 96px;
}
.note[data-width="wide"] { max-width: 780px; }
.note[data-width="full"] { max-width: 100%; padding-right: 72px; padding-left: 72px; }
.note[hidden] { display: none; }

/* The note's header (design/v5/V5NoteMeta.dc.html): the terminal's chip · edited · words · saved, then
   one control group, Find │ Note Width │ ⋯. Find and Note Width are laid out wide once (.wide) and
   uncovered from their buttons on transforms (note-meta.js, core/reveal.js); what's in them fades in after (.open). */
.note-meta { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 0 4px; }
.nm-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--fill);
  color: var(--fg);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.nm-chip[hidden] { display: none; }
.nm-text {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.nm-text > span { flex: none; }
/* squeezed (the group growing beside it), the edited time goes first, then the words, each ending in …;
   the save state never goes (UI-9g) */
.nm-text > .nm-ed { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nm-ed > .nm-sep { margin-left: 2px; }
/* its word goes before its time is cut (note-meta-fit.js) */
.nm-text.snug .nm-edw { display: none; }
/* the time cut even so: it goes whole (note-meta-fit.js, UI-14d) */
.nm-text.undated > .nm-ed { display: none; }
/* no room even for "Saved": its dot alone; "Saving…" too, its dot grey (UI-14d: it was cut to "Sav"). Waiting
   and not saving keep their words: they're the ones that need reading */
.nm-text.bare .nm-save:is([data-state="saved"], [data-state="saving"]) > span { display: none; }
.nm-text.bare .nm-save[data-state="saving"] .nm-dot { display: block; background: var(--faint); }
/* still too tight (note-meta.js): the words go too */
.nm-text.tight > .nm-ed,
.nm-text.tight > .nm-words,
.nm-text.tight > .nm-words + .nm-sep { display: none; }
.nm-sep { color: var(--faint); }
.nm-save { display: inline-flex; align-items: center; gap: 5px; }
.nm-dot { display: none; width: 6px; height: 6px; border-radius: 3px; background: var(--good); }
.nm-save[data-state="saved"] .nm-dot { display: block; }
.nm-save[data-state="off"],
.nm-save[data-state="waiting"] { color: var(--task-text); }
.nm-fill { flex: 1; min-width: 0; }
.nm-group {
  display: flex;
  flex: none;
  box-sizing: border-box;
  height: 30px;
  border-radius: 15px;
}
/* the group's fill and its parts, on its reveal's carrier (note-meta.js) */
/* its fill a layer of its own, so it can fade into Note Options' solid menu (UI-10: 240 ms, on opacity) */
.nm-group-in { position: relative; isolation: isolate; display: flex; align-items: center; padding: 0 2px; }
.nm-group-in::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--fill); content: ""; transition: opacity 240ms var(--ease); }
.menu-held .nm-group-in::before { opacity: 0; }
.nm-div { flex: none; width: 1px; height: 14px; margin: 0 2px; background: var(--sep); }
.nm-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  color: var(--fg);
}
.nm-btn[hidden] { display: none; }
.nm-find,
.nm-width {
  position: relative;
  display: flex;
  flex: none;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 13px;
}
/* (Find's open width: 296, or what the header has room for, note-meta.js) */
.nm-find.wide { width: var(--nm-find-w, 296px); }
.nm-width.wide { width: 196px; }
/* each part's own fill, on its reveal's carrier, fading in on opacity (a colour change would be redrawn
   on the page's own frames, UI-9c) */
.nm-part-in { position: relative; z-index: 0; display: flex; align-items: center; }
.nm-width .nm-part-in { justify-content: flex-end; }
.nm-part-in::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--fill);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.nm-find.open .nm-part-in::before,
.nm-width.open .nm-part-in::before { opacity: 1; }
.nm-find.open .nm-btn,
.nm-width.open .nm-btn { color: var(--fg-strong); }
/* opened with the pointer, the width the keyboard was moved to shows no ring until a key is pressed (UI-9d) */
.nm-width.by-pointer :focus { outline: none; }
.nm-grow {
  flex: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms var(--ease), visibility 0s linear 200ms;
}
.nm-find.open .nm-grow,
.nm-width.open .nm-grow { opacity: 1; visibility: visible; transition-delay: 140ms, 0s; }
@media (prefers-reduced-motion: reduce) {
  .nm-find.open .nm-grow,
  .nm-width.open .nm-grow { transition-delay: 0s; }
}
.nm-findin { width: calc(var(--nm-find-w, 296px) - 26px); }
/* Find open in a narrow header: the terminal's chip makes room for it (note-meta.js) */
.note-meta.find-tight > .nm-chip { display: none; }
/* Narrow / Wide / Full, the stretch */
.nm-seg { width: 168px; height: 22px; margin-left: 2px; padding: 2px; box-sizing: border-box; border-radius: 11px; }
.nm-seg > .pill { top: 2px; bottom: 2px; border-radius: 9px; }
.nm-seg > button { height: 100%; padding: 0 4px; border: 0; border-radius: 9px; color: var(--muted); font: 500 11px var(--font-ui); }
.nm-seg > button[aria-selected="true"] { color: var(--fg-strong); font-weight: 600; }
/* Note Options, grouped under small labels; Line Numbers' tick at the right */
.menu.note-opts { width: 232px; }
.menu-head.menu-sec { padding: 6px 10px 2px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.note-opts .mi-ic { order: 0; width: 16px; }
.note-opts .mi-label { order: 1; }
.note-opts .mi-tick { order: 2; color: var(--accent-text); }
.note-opts .mi-key { order: 3; }
.note-opts .menu-item.danger .mi-ic { color: var(--drift-text); }

/* signed out, and a kept copy: tinted banners that open in the flow */
.nb-wrap > div { padding: 0 1px; }
.nbanner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--task-soft);
}
.nbanner p { flex: 1; margin: 0; color: var(--fg); font-size: 13px; line-height: 1.45; }
.nbanner b { color: var(--task-text); font-weight: 600; }
.nbanner.kept { flex-direction: column; align-items: stretch; gap: 10px; margin: 20px 0 4px; }
.nb-acts { display: flex; gap: 8px; }
.nb-btn { height: 28px; padding: 0 12px; border: 0; border-radius: 14px; color: var(--fg); font: 500 12px var(--font-ui); }
.nb-btn.strong { color: var(--fg-strong); }
.nb-primary {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--pri);
  color: var(--fg-strong);
  font: 600 12px var(--font-ui);
  white-space: nowrap;
}
@media (hover: hover) { .nb-primary:hover { background: var(--pri-hover); } }
.nb-primary:active { background: var(--pri-press); }

/* the page: the editor, and what floats over it */
.page { position: relative; margin-top: 8px; }
.edwrap { position: relative; }

/* Nothing open */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100%;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}
.empty p { margin: 0; }
.empty[hidden],
.empty-btn[hidden] { display: none; }
.empty-btn { height: 28px; padding: 0 12px; border: 0; border-radius: 14px; color: var(--fg-strong); font: 500 12px var(--font-ui); }

/* The tab bar (pages until UI-11, and still in the class names): the tabs, More, Add Tab and All Tabs,
   floating at the top centre of its pane, 56 from the window's top (UI-12); it stays put as the note scrolls.
   It keeps within the note header's edges (UI-14g: page-bar.js sets its width and its max-width to them) */
.pagebar {
  position: absolute;
  z-index: 4;
  top: 56px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
}
.pagebar[hidden] { display: none; }
.pg-seg { flex: 0 1 auto; min-width: 0; height: 36px; padding: 3px; border-radius: 999px; font-size: 12px; }
.pg-seg > .pill { top: 3px; bottom: 3px; }
/* a tab: its pill's button, and over the pill's right end its own × (UI-11). Equal widths, as the stretch needs */
.pg-seg > .pg-tab { position: relative; z-index: 1; display: flex; flex: 1 1 0; min-width: 0; height: 100%; }
.pg-btn {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  white-space: nowrap;
}
.pg-btn[aria-selected="true"] { color: var(--fg-strong); font-weight: 600; }
/* the name's room stops short of the ×: 12 in from the pill's left end, 3 clear of the × at its right. With
   room to spare the name sits in the pill's middle, as in any segmented control: a spacer before it stands
   in for what the × takes on the other side, and gives way first when the name needs the room */
.pg-tab.has-x > .pg-btn { padding: 0 28px 0 12px; }
.pg-tab.has-x > .pg-btn::before { flex: 0 1 16px; margin-right: -6px; content: ""; }
/* (the name never shrinks beside the spacer, only past the pill's room: shrinking with it, by its weight, it
   lost a fraction of a pixel and an ellipsis showed on a name that fit, in a tab under 112, UI-14g) */
.pg-tab.has-x > .pg-btn > .pg-name { flex: 0 0 auto; max-width: 100%; }
.pg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-dot { flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--warn); }
/* the ×: a 22 px circle inset 3 from the 28 px pill's top, bottom and right (concentric: 14 − 3 = 11),
   centred on the name's line. Quiet at rest, brighter while the pointer is on its pill, its own fill
   under the pointer. Its target is the pill's height and 27 wide, to the pill's end */
.pg-x {
  position: absolute;
  top: 50%;
  right: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  opacity: .55;
  transition: background-color 120ms var(--ease), color 120ms var(--ease), opacity 120ms var(--ease);
}
.pg-x::before { position: absolute; inset: -3px -3px -3px -2px; content: ""; }
.pg-x:focus-visible { opacity: 1; }
@media (hover: hover) {
  /* the pill stays lit while the pointer is on its ×, so the two read as one thing */
  .pg-tab:hover > .pg-btn:not([aria-selected="true"]) { background-color: var(--fill); }
  .pg-tab:hover > .pg-x { opacity: 1; }
  .pg-seg > .pg-tab > .pg-x.b:hover { background-color: var(--sel); color: var(--fg-strong); }
}
/* renaming the tab you're on: a field over its pill, the pill's shape and size */
.pg-seg > .pg-tab.renaming { visibility: hidden; }
.pg-rename {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  box-sizing: border-box;
  min-width: 96px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  outline: none;
  background: var(--bg);
  color: var(--fg-strong);
  font: 600 12px var(--font-ui);
  text-align: center;
}
.pg-rename::placeholder { color: var(--placeholder); font-weight: 400; }
/* (the caret sat in the middle of the centred "Untitled": gone while the field has the keyboard, UI-11 sweep #20) */
.pg-rename:focus::placeholder { color: transparent; }
.pg-round {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 18px;
  color: var(--fg);
}
.pg-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 36px;
  padding: 0 12px 0 16px;
  border-radius: 18px;
  color: var(--fg);
  font: 500 12px var(--font-ui);
  white-space: nowrap;
}
.pg-more[hidden],
.pg-round[hidden] { display: none; }
/* its words and chevron, which its menu's header copies (UI-14c); in the narrowest pane, its count alone */
.pg-more-in { display: inline-flex; align-items: center; gap: 4px; }
/* its menu dropped from it: the pill's fill fades into the menu's as it grows (Note Options' group's way),
   with no selected fill (§7c; shell.css's open-menu fill for a glass button is as specific, and earlier) */
.pagebar.menu-held > .pg-more.b[aria-expanded] { background-color: transparent; background-image: none; transition: background-color 240ms var(--ease); }
/* dragging a tab to a new place (UI-14c, UI-13's pattern): it lifts onto the solid surface with its shadow
   and follows the pointer; the others slide aside (300 ms snappy), the open one's pill with it; let go, it
   settles into its slot (200 ms). On transforms */
.pg-seg.pg-moving > .pg-tab,
.pg-seg.pg-moving > .pill { transition: transform 300ms var(--sp-snappy); }
.pg-seg.pg-moving > .pg-tab.pg-lift { z-index: 2; border-radius: 999px; background: var(--solid); box-shadow: var(--drop); }
/* (following the pointer, it moves with it; letting go, it glides like the rest) */
.pg-seg.pg-moving:not(.pg-settling) > .pg-tab.pg-lift { transition: none; }
/* (the open tab lifted: its pill rides under it, drawn on it as the selected fill) */
.pg-seg.pg-moving > .pg-tab.pg-lift.on { background: linear-gradient(var(--sel), var(--sel)), var(--solid); }
.pg-seg.pg-lift-on:not(.pg-settling) > .pill { transition: none; }
.pg-seg.pg-settling > .pg-tab,
.pg-seg.pg-settling > .pill { transition: transform 200ms var(--ease); }
/* an open tab in All Tabs (UI-14f): a dot where the current one has its tick, the kept copy's dot in the
   words' colour; a closed one shows nothing there */
.menu-item.mi-open .mi-tick { opacity: 1; }
.menu-item.mi-open .mi-tick svg { display: none; }
.menu-item.mi-open .mi-tick::before { width: 6px; height: 6px; margin-left: 4px; border-radius: 3px; background: var(--muted); content: ""; }
/* a kept copy in the All Tabs menu */
.menu-item.mi-kept .mi-label::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 3px;
  background: var(--warn);
  content: "";
  vertical-align: middle;
}

@media (max-width: 700px) {
  .note,
  .note[data-width="full"] { padding: 64px 16px 136px; }
}