/* ============================================================
   Life Base — the shell

   OneNote's structure, quieted (spec 11 §1.4). The navy title bar and
   the grey ribbon are parked in /workshop/paused-onenote-shell/; what
   is left of the chrome is near-white on purpose, so that the loudest
   thing on any screen is whatever the person made.
   ============================================================ */

:root{
  --ribbon-top:#f4f4f4;
  --ribbon-bot:#f0f0f0;
  --ribbon-border:#cccccc;
  /* ---- THE NAV, ONE STEP FURTHER OFF THE PAGE (2026-08-19) ----
     Still near-white and still untinted — spec 11 §1.4 stands. What
     changed is how far off white it sits. At #fbfaf9 the columns and the
     page were within four points of each other, so the nav had no edge of
     its own and the eye had to find the divider line to know where the
     notebook stopped. Measured against OneNote, whose columns are
     noticeably a surface rather than an absence, this is the single
     biggest reason its lists read as calmer.

     These are the ORIGINAL numbers, eyedropped from native 2x OneNote for
     Mac screenshots for the very first Life Base shell (commit e18fcf4,
     2026-07-21): `#f9f9f9` panel, `#ebebeb` divider. Two later passes
     drifted off them — first warm (#fbfaf9, then #f6f5f3, three points of
     red over blue, which is nothing on a swatch and unmistakably brown
     across a whole column), then neutral but too dark (#f5f5f5, reported
     as "dark and dull"). Going back to what was measured rather than
     guessing again.

     SELECTION AND HOVER ARE DELIBERATELY LIGHTER than the originals
     (#dfdfdf / #e8e8e8). Against #f9f9f9 those are a 26-point step, which
     reads as a block of colour rather than as "you are here" — asked for
     subtler, and a highlight only has to be findable, not loud. */
  --nav-bg:#f9f9f9;
  --strip-bg:#f2f2f2;
  --divider:#ebebeb;
  --strip-divider:#dfdfdf;
  --sel-row:#ededed;
  --hov-row:#f3f3f3;
  --purple:#7719aa;
  /* drop lines, the resize line, the rename edge: ink, never a hue.
     Colour in the nav argues with whatever the page is holding. */
  --mark:#242424;
  --strip-purple:#6d21a4;
  --avatar-purple:#8265b3;
  --ink:#242424;
  --ink-soft:#5b5a59;
  --ink-grey:#757575;
  /* The ink you WRITE in, as opposed to the ink the app's chrome is
     labelled in. OneNote's page text is black; ours read grey next to it
     for two reasons, and the hex was only the smaller one — see
     --content-ink's use below for the other. */
  --content-ink:#141414;
  --chrome:#e1e1e1;
  --grip:#757575;
  --menu-hov:#f0efed;
  /* ---- THE READING FACE (2026-08-06) ----
     Was Calibri, which came in with the OneNote grounding. Calibri's
     lowercase is only ~46% of its em; the platform sans is ~52%. So
     Calibri at 14.67px rendered its letters about 20% shorter than
     Notion's 16px, which is the whole of why our prose read "one size
     small" while the numbers looked close. Matching the NUMBER would
     not have fixed it; matching the FACE does, and it collapses the
     app to one family instead of a document font beside a chrome font. */
  --content-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* ---- THE VERTICAL SCALE, SAID ONCE ----
     Space is proportional to the size of the break in meaning: line to
     line is the smallest, then paragraph, then list item, then a
     heading, which takes roughly its own height above itself and almost
     nothing below because it belongs to what follows it. Every rule
     below reads from here, so the rhythm cannot drift between the page,
     a toggle, a column and a callout. */
  --lb-body:16px;
  --lb-lh:1.5;
  /* The gap is spent as PADDING, not margin. Notion's own recipe is 3px
     of padding plus 1px of margin, but adjacent margins collapse — the
     two 1px margins become one, so their real gap is 7px and not the 8
     the numbers read like. Padding does not collapse, so 4px on each
     side is 8px between any two lines, every time, and there is one
     number to reason about instead of two that interact. */
  --lb-blockpad:4px;     /* above and below every line-level block */
  --lb-blockgap:0px;     /* nothing outside it — see above */
  --lb-listpad:3px;      /* half the gap between list items */
}

*{box-sizing:border-box;margin:0;padding:0}
/* ---- A SIDEWAYS GESTURE IS FOR THE BOARD, NEVER FOR THE BROWSER ----
   Travelling a board left and right kept triggering Chrome's swipe-back
   arrow, which is the browser offering to leave the app while somebody is
   using it. The board's own wheel handler already calls preventDefault,
   but macOS reads the overscroll at the compositor, before any handler
   runs, so the gesture was claimed above our heads.

   `overscroll-behavior:none` is the one thing that speaks at that level:
   it tells the compositor this document has no scroll to chain OUT of, so
   there is nothing left over to turn into a navigation. Declared on the
   root and on every scroller under it — a chain is only as contained as
   its weakest link. */
html,body{height:100%;overscroll-behavior:none}
#canvas,#sections-list,.board-host{overscroll-behavior:contain}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  cursor:default;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:default}
::selection{background:#bcd6f2}
/* the selection, still painted while the right-click menu is open and the
   browser has stopped drawing its own (link.js) — same color, so nothing
   about the selection appears to change when the menu appears */
::highlight(lb-selshadow){background:#bcd6f2}

/* ---- SCROLLBARS ARE THE PLATFORM'S, AND THEY FADE (2026-08-07) ----
   These four lines used to style every scrollbar in the app:

     ::-webkit-scrollbar{width:11px;height:11px}
     ::-webkit-scrollbar-thumb{background:#c8c6c4;border:3px solid transparent;
       background-clip:content-box;border-radius:6px}
     ::-webkit-scrollbar-thumb:hover{background:#a19f9d;...}
     ::-webkit-scrollbar-track{background:transparent}

   The look was fine. The COST was not, and it is not obvious from
   reading them: declaring `::-webkit-scrollbar` with a width opts the
   whole document out of the platform's OVERLAY scrollbars and into
   classic ones — permanently drawn, and taking 11px of layout width for
   a gutter whether or not anything is scrolling. That is why a bar sat
   in the sidebar, down every app-block and beside the page at all times,
   with nobody scrolling anything.

   Removing them hands the decision back to the operating system, which
   is the only thing that knows the answer: on a Mac set to the default
   ("automatically, based on mouse or trackpad") they appear while you
   scroll and fade when you stop, and they float over the content instead
   of taking a column of it. On a machine set to "always", they always
   show — which is that person's own setting and not ours to override.

   One deletion, every scroller in the app: the sidebar tree, the page
   canvas, an app-block at its ceiling, the board's popovers, the
   notebook list. Don't put them back to "make scrollbars match" — the
   match is not worth the gutter, and matching a thing that should be
   invisible is a contradiction anyway.

   Individual apps that hide their own scrollbars (the typewriter's file
   list, its ribbon lines) still do, and should: those are scenes, not
   documents. */

#app{display:flex;flex-direction:column;height:100vh;background:#fff}

/* ---- the title bar and the ribbon are gone (spec 11 §1.1, §1.2) ----
   Both are parked whole in /workshop/paused-onenote-shell/, markup, CSS
   and handlers. A window that names its own app is a desktop habit
   nothing on the reference wall has, and a permanently visible toolbar
   is 42px spent on a page that is mostly not being formatted. What the
   ribbon did now happens on the selection (selbar.js), in the "/" panel,
   and in the right-click menu. */

/* ================= MAIN LAYOUT ================= */
#main{display:flex;flex:1;min-height:0}

/* ================= THE SIDEBAR (spec 11 §2) =================
   One panel, 312px, near-white, and it slides fully away. It replaces a
   47px icon strip + a 240px sections column + a 208px pages column —
   495px of chrome that stood between the window and a page holding
   whole applications.

   The tree is groups > sections > pages, in one scroll, which is what
   the data always said: `nb().items` holds groups and sections, and a
   section holds its pages. Only the rendering was ever split in three. */
/* ---- WIDER, DARKER, ROOMIER (2026-08-06) ----
   Three things were wrong with the tree and they compounded: 13.5px type,
   grey ink (#3d3b39 for sections, #57544f for pages, #5b5a59 for groups),
   and the app-wide `-webkit-font-smoothing:antialiased`, which thins every
   glyph. Small + grey + thin is why the panel read washed out beside
   ChatGPT's, whose names are plain near-black at a comfortable size.

   All three are fixed together, because fixing one alone barely shows.
   The panel opts back into the platform's own smoothing — the same move
   the page area already makes for its prose, and for the same reason. */
/* ============================================================
   THE NAV — TWO PANELS AND ONE BAR
   ============================================================
   Sections and section groups on the left, the pages of the section you
   are in beside them. Spec 11 §2 merged three columns into one tree; the
   tree was right about the DATA and wrong about the reading, because one
   column showed three kinds of thing with indent as the only separator.
   Two panels make depth a PLACE instead of a dent.

   244 + 216 = 460, against the one sidebar's 312 and the old three
   columns' 495 — the 47px icon strip does not come back. Both are
   draggable, because at ANY fixed pair of widths real section and page
   names truncate, and a column of rows all ending in "..." is the one
   thing this layout was supposed to fix. */
:root{
  /* ---- ONE WIDTH, BOTH COLUMNS ----
     230 + 230 = 460, the same total the uneven pair cost. A section name
     and a page name are the same KIND of name — both are things a person
     wrote — and giving one of them more room by default says one matters
     more. Either divider still drags; the default is simply even. */
  --col-sections:230px;
  --col-pages:230px;

  /* ---- THE NAV'S OWN RHYTHM ----
     One row height for both columns, so a folder and the page beside it
     sit on the same line and stay on it all the way down. 38 rather than
     40 rather than 36/34. Measured off the reference screenshot: OneNote's
     rows are ~36px logical at roughly 13px type — the same face we use, so
     the difference was never the FONT. Its lists read calmer because the
     ratio of ink to air is lower. Matching that ratio at our 15px ink
     (settled 2026-08-06, and not being re-opened for a nav) wants ~41px;
     40 is that, less a hair, so a laptop still shows a useful run of rows. */
  --nav-row:40px;
  --nav-head:46px;
}

#nav{
  display:flex;flex-direction:column;min-height:0;flex:none;
  /* +1 for the border. `box-sizing:border-box` takes the 1px right border
     OUT of this width, so the two 230px columns inside added up to one
     pixel more than the room left for them — panel 2 overflowed by
     exactly the border and painted over it. The nav's right edge simply
     was not there, except along the footer, which is a single element
     and does not overflow. */
  width:calc(var(--col-sections) + var(--col-pages) + 1px);
  background:var(--nav-bg);border-right:1px solid var(--divider);
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
}
#nav-cols{display:flex;flex:1;min-height:0}

/* ---- the whole nav folds as one ----
   One hamburger, one fold. A control per panel would ask people to manage
   a layout instead of read a notebook, and OneNote's own shelf has always
   folded its columns as one thing. `panels-off` keeps its name: the board
   and every stylesheet already listen for it. */
#main.panels-off #nav{display:none}

/* ---------------- PANEL 1 — sections and groups ---------------- */
#sections-col{
  position:relative;
  width:var(--col-sections);min-width:var(--col-sections);flex:none;
  background:var(--nav-bg);border-right:1px solid var(--divider);
  display:flex;flex-direction:column;min-height:0;
}

/* across both columns, not inside panel 1 — see index.html */
#nb-header{
  height:var(--nav-head);flex:none;display:flex;align-items:center;gap:7px;padding:0 10px 0 8px;
}
#sb-menu,#sb-peek{
  width:28px;height:28px;flex:none;border:0;background:transparent;border-radius:6px;
  color:#5b5a59;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
#sb-menu:hover,#sb-peek:hover{background:var(--hov-row)}
#nb-name{
  flex:1;font-size:15px;font-weight:600;color:#191919;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px;
  cursor:default;border-radius:5px;padding:3px 5px;
}
#nb-name:hover{background:var(--hov-row)}

/* the hamburger has to survive the fold, or there is no way back */
#sb-peek{
  position:fixed;left:9px;top:9px;z-index:40;opacity:0;pointer-events:none;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  transition:opacity .14s ease-out;
}
#main.panels-off #sb-peek{opacity:1;pointer-events:auto}

/* ★ THE RESERVED CORNER (2026-08-25) — the host states it, the app answers.

   Folded, #sb-peek is a 28px square floating at (9,9) over whatever the
   page is showing, and it is the ONLY way back to the nav, so it cannot
   move and it cannot go under anything. On an ordinary page it lands on
   white margin. On a page whose whole content is one app — "Add app" —
   it lands on the APP, and an audit of all eight found three whose own
   control sits exactly there: the Whiteboard's menu button, the Vision
   Board's panel burger (a burger under a burger), and the Spreadsheet's
   first toolbar button. All three were reachable-looking and unclickable.

   This is the standalone law's mechanism again, and deliberately so: the
   host does NOT reach into an app and move its furniture. It says how
   much of the corner is taken, once, in one number, and each app decides
   what to do about it. An app that ignores it still works — its corner
   control is simply still under the hamburger, which is exactly the
   situation the token exists to let it fix.

   Zero when the nav is open, because then the corner belongs to the nav
   and the app never had it. */
#main{--lb-corner-taken:0px}
#main.panels-off{--lb-corner-taken:36px}

/* search is a field above the tree, never a mode that hides it */
/* ---- AS WIDE AS THE COLUMN IT SITS OVER ----
   The head spans both columns so the two lists start level, but a search
   field stretched across all of it is a 460px box for a word or two —
   it read as the loudest thing in the nav. It is sized to panel 1, which
   is where the eye already is when it arrives at the top left. */
#sb-search{
  height:34px;flex:none;margin:0 10px 8px;padding:0 8px;
  width:calc(var(--col-sections) - 20px);max-width:calc(100% - 20px);
  display:flex;align-items:center;gap:6px;
  background:var(--hov-row);border-radius:7px;
}
#sb-search svg{flex:none}
#search-input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  font-size:14px;color:#242424;user-select:text;
}
#search-input::placeholder{color:#9c9a99}
.search-esc{
  flex:none;font-size:10px;color:#8a8886;border:1px solid var(--divider);
  border-radius:3px;padding:1px 5px;opacity:0;transition:opacity .12s;
}
#nav.mode-search .search-esc,#nav.mode-recent .search-esc{opacity:1}

/* ---- SEARCH IS PARKED (2026-08-28) ----
   The field is hidden here and its two entry points are guarded by
   SEARCH_ENABLED in app.js. Every rule for it is left in place, so
   turning the flag back on and deleting this one block restores it.
   See app.js for why it went. */
#sb-search{display:none}

/* Both lists carry the SAME top padding, which is what actually puts the
   first folder and the first page on one line. */
/* ---- THE LISTS OPEN WITH A LINE, LIKE THEY CLOSE WITH ONE ----
   The button rows at the foot sit under a hairline; the tops of the lists
   had nothing, so the head and the first row ran together and the two
   columns had a bottom edge but no top one. Same divider, same 1px. */
#sections-list,#pages-list{border-top:1px solid var(--divider)}
/* ---- THE PANELS PAINT THEMSELVES, AND NOTHING ELSE ----
   `contain: layout paint` tells the browser that nothing inside these
   lists can affect the geometry of anything outside them, and that they
   never paint outside their own box. Scrolling a list of 200 pages then
   costs the list, instead of asking the page beside it whether it moved. */
#sections-list,#pages-list{contain:layout paint}
#sections-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 8px 10px}

/* ---- rows ----
   No section tab. The colored bar was assigned by the app, and color
   nobody chose is decoration that argues with whatever the page holds
   (spec 11 §1.4). One mark per row: a section wears a folder, a group
   wears a twist-down, neither wears both. */
/* ---- A ROW OFF SCREEN IS NOT DRAWN ----
   Every row is exactly `--nav-row` tall, so `contain-intrinsic-size` is
   not an estimate — it is the number. The browser can then skip layout
   and paint for rows outside the scroller and still know exactly how tall
   the list is, which keeps the scrollbar honest and the scroll position
   stable. On a notebook with 200 pages this is the difference between
   painting 200 rows and painting the dozen you can see. */
.section-row,.page-row{
  content-visibility:auto;
  contain-intrinsic-size:auto var(--nav-row);
}
.section-row{
  height:var(--nav-row);margin:1px 0;display:flex;align-items:center;gap:3px;border-radius:7px;
  padding:0 6px;font-size:15px;color:var(--ink);position:relative;
  white-space:nowrap;cursor:pointer;transition:background-color .1s ease-out;
}
/* `display:flex` on the row beats the `[hidden]` attribute's own
   `display:none`, which comes from the browser's stylesheet and loses
   every specificity contest. Without this line a collapsed group goes on
   showing every section inside it, and nothing throws. */
.section-row[hidden]{display:none}
.section-row:hover{background:var(--hov-row)}
/* ---- THE SHADE IS THE SELECTION; THE WEIGHT IS NOT (2026-08-07) ----
   A selected row went to weight 600 as well as taking the grey pill, so
   the text moved as you clicked around. One signal, and it is the pill. */
.section-row.selected,.section-row.selected:hover{background:var(--sel-row);color:#191919}
.section-row.child{padding-left:22px}
.section-row.child2{padding-left:40px}
/* ---- A GROUP IS NOT SHOUTED (2026-08-19) ----
   It carried weight 600 as its rank in the tree. The twist-down already
   says "I hold other things", and bold on top of it is the same fact said
   twice — in a column of plain rows a bold one reads as important rather
   than as structural, which is a different claim. One mark per row, and
   for a group the mark is the arrow. */
.group-row{font-weight:400;color:var(--ink);font-size:15px}
.group-row.child{padding-left:22px}
.g-chev{
  width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#8d8a86;border-radius:4px;
}
.group-row:hover .g-chev{color:#4a4744}
.g-chev:hover{background:rgba(0,0,0,.07);color:#242424}
.g-chev svg{display:block;transition:transform .14s ease-out}
.g-chev.shut svg{transform:rotate(-90deg)}
/* a folder looks like a folder, open when its pages are the ones showing
   in panel 2 — the one thing tying the two columns together */
.row-folder{
  width:19px;height:19px;flex:none;margin:0 6px 0 3px;color:#8d8a86;
  display:flex;align-items:center;justify-content:center;
}
.row-folder svg{display:block;width:17px;height:17px}
.section-row.selected .row-folder{color:#5c5852}
.section-row.drop-before{box-shadow:inset 0 2px 0 0 var(--mark)}
.section-row.drop-after{box-shadow:inset 0 -2px 0 0 var(--mark)}
.section-row.drop-into{background:rgba(0,0,0,.055);box-shadow:inset 0 0 0 1.5px var(--mark)}
.row-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- NO SECTION TAB (2026-08-19) ----
   Spec 11 §1.4 stopped the app handing colours out, and 2026-08-07 parked
   the picker that let you set one — but a section coloured BEFORE either
   of those went on drawing its tab, with nothing left in the app able to
   change it. One coloured bar in a column of plain rows reads as a warning
   rather than as a label, and it was stuck there.

   `s.color` and `s.colorSet` are untouched in storage, so nothing is lost
   and restoring the picker restores the tab with it. */
.section-tab{display:none}

/* the + on a GROUP row: the question "which group" has no other answer,
   where "add a section" is answered by the button at the foot */
.row-plus{
  width:24px;height:24px;flex:none;border:0;background:transparent;border-radius:5px;
  color:#8a8886;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;position:absolute;right:5px;transition:opacity .1s ease-out;
}
.section-row:hover .row-plus,.row-plus:focus-visible{opacity:1}
.row-plus:hover{background:rgba(0,0,0,.07);color:#3d3b39}

/* ---------------- PANEL 2 — pages ---------------- */
#pages-col{
  position:relative;
  width:var(--col-pages);min-width:var(--col-pages);flex:none;
  background:var(--nav-bg);
  display:flex;flex-direction:column;min-height:0;
}

#pages-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 8px 10px}
/* the two spacers a windowed page list uses to keep the scrollbar the
   right length while only the visible rows exist (app.js fillPages).
   They must take part in layout and nothing else: no border, no
   pointer, and never a drop target. */
#pages-list > .pg-spacer{flex:0 0 auto;pointer-events:none;padding:0;margin:0;border:0}
/* ---- THE SAME RECIPE AS A SECTION ROW ----
   Same height, same padding, same mark size, same gap — so a page name
   starts at exactly the x a section name starts at in its own column, and
   the two lists read as one grid rather than two lists that nearly line
   up. A page name is not a lesser name: same ink, same size, same weight. */
.page-row{
  height:var(--nav-row);margin:1px 0;display:flex;align-items:center;gap:3px;border-radius:7px;
  padding:0 6px;font-size:15px;color:var(--ink);
  white-space:nowrap;overflow:hidden;
  outline:none;cursor:pointer;transition:background-color .1s ease-out;
}
/* The slot is 19px and CLIPS. Without this, anything longer than a glyph
   spills straight across the page name beside it — which is how a bad
   icon field became three unreadable rows rather than three plain ones. */
.page-row .page-kind{
  flex:none;margin:0 6px 0 3px;color:#a5a29e;display:flex;align-items:center;
  justify-content:center;width:19px;height:19px;overflow:hidden;
}
.page-row .page-kind svg{display:block;width:16px;height:16px}
/* an app's own mark, in full colour and a shade larger — the one place
   colour in the nav is the app saying which app it is */
.page-row .page-kind.app svg{width:17px;height:17px}
.page-row .page-kind.em{font-size:15px;line-height:1}
.page-row.selected .page-kind{color:#5c5852}
.page-row .row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.page-row:hover{background:var(--hov-row)}
.page-row.selected,.page-row.selected:hover{background:var(--sel-row);color:#191919}
.page-row.drop-before{box-shadow:inset 0 2px 0 0 var(--mark)}
.page-row.drop-after{box-shadow:inset 0 -2px 0 0 var(--mark)}

.col-empty{padding:14px 14px 0;font-size:13.5px;color:#a5a29e;line-height:1.45}

/* ---------------- the feet ---------------- */
#pages-foot{flex:none;display:flex;border-top:1px solid var(--divider)}
#pages-foot .col-btn{flex:1;min-width:0;justify-content:center;padding:0 6px}
#pages-foot .col-btn + .col-btn{border-left:1px solid var(--divider)}
.col-btn{
  height:42px;flex:none;display:flex;align-items:center;gap:7px;
  padding:0 14px;font-size:13.5px;font-weight:600;color:var(--ink-soft);
  background:var(--nav-bg);border:0;cursor:pointer;
  white-space:nowrap;overflow:hidden;transition:background-color .1s ease-out;
}
.col-btn svg{flex:none}
.col-btn span{overflow:hidden;text-overflow:ellipsis}
.col-btn:hover{background:var(--hov-row);color:#191919}
#add-section{border-top:1px solid var(--divider)}

/* ---- ONE BAR, UNDER BOTH PANELS ----
   The account, undo, redo and the save mark are about the NOTEBOOK, not
   about the sections column, so the bar runs under both and each panel's
   button row sits straight on top of it. */
#nav-foot{
  flex:none;height:48px;display:flex;align-items:center;gap:8px;
  padding:0 12px;border-top:1px solid var(--divider);background:var(--nav-bg);
}
/* the panel's own colour, with the letter in ink. A dark disc was the
   loudest thing in a near-white panel, which is backwards: it is the
   quietest thing there. Empty until auth.js knows who is signed in. */
#avatar{
  width:30px;height:30px;border-radius:50%;background:var(--nav-bg);color:#191919;
  border:1px solid #e0ddd9;
  font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;
  flex:none;cursor:pointer;transition:background-color .12s ease-out;
}
#avatar:hover{background:var(--hov-row)}
#avatar:empty{background:#f0eeec}
.foot-btn{
  width:26px;height:26px;flex:none;border:0;background:transparent;border-radius:5px;
  color:#8a8886;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.foot-btn:hover{background:rgba(0,0,0,.06);color:#3d3b39}
.foot-btn:disabled{opacity:.32;cursor:default;background:transparent}

/* ---- THE COLUMNS DRAG ----
   At any fixed pair of widths real names truncate. The grip is 9px of
   target over a 1px line, because a divider you have to hunt for is a
   divider nobody moves. */
.col-grip{
  position:absolute;top:0;bottom:0;right:-4px;width:9px;z-index:5;
  cursor:col-resize;background:transparent;
}
.col-grip::after{
  content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;
  background:var(--mark);opacity:0;transition:opacity .12s ease-out;
}
.col-grip:hover::after,.col-grip.dragging::after{opacity:.32}
body.col-dragging{cursor:col-resize;user-select:none}

/* ================= CANVAS ================= */
#canvas{flex:1;min-width:0;background:#fff;overflow:auto;display:flex;flex-direction:column}
/* ---- the header sits on the column's axis (spec 11 §3.3) ----
   It used to be pinned 38px from the left edge of the canvas, which was
   right when the writing started at the left edge too. With a centred
   column that put the title and the date in one place and the first
   sentence 140px to the right of them, which reads as two documents. */
#page-header{
  /* ONE number, because the title icon has to know it too. An
     absolutely positioned child is laid out against the PADDING BOX,
     so this padding shifts the title down and does NOT shift the icon
     — which is exactly how the icon ended up 20px off centre. */
  --lb-header-pad-top:20px;
  flex:none;padding:var(--lb-header-pad-top) 0 0;
  width:100%;max-width:var(--lb-read);
  margin:0 auto;
}
/* ---- the page is a document, not an interface ----
   The app sets -webkit-font-smoothing:antialiased globally, which thins
   every glyph. On 22px title text that's invisible; on 14.67px body text
   it is most of why our prose read grey next to OneNote's, which is a
   native app rendering at full weight. The title and the body were always
   the SAME hex — the title just survived the thinning. So the page area
   opts back into the platform's own smoothing, and both take OneNote's
   near-black ink. Chrome (ribbon, nav, panels) keeps the thin rendering:
   that part IS an interface. */
#page-title{
  display:inline-block;min-width:290px;max-width:100%;
  padding:2px 0 3px;border-bottom:1px solid #8a8886;outline:none;
  /* 34px at weight 500. Notion sets 40px semibold — 2.5x its body. Ours
     is a little smaller and a little lighter on purpose: the underline
     rule below is still doing part of the work a heavier weight would
     otherwise have to do, and 2.1x body is enough separation once the
     body itself grew. Line-height is tightened because a display size
     does not need a reading measure's leading. */
  font-family:var(--content-font);font-size:34px;font-weight:500;color:var(--content-ink);
  line-height:1.2;letter-spacing:-.012em;
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
  user-select:text;cursor:text;word-break:break-word;
}
#page-stamp{
  padding:11px 0 0;color:var(--ink-grey);font-size:13px;
  display:flex;gap:37px;user-select:none;
}
#page-body{position:relative;flex:1;min-height:100%;cursor:text}

/* the two measures, set once (spec 11 3.3). `--lb-wide` is clamped from
   JS to whatever the canvas can actually give (updateScrollRoom), so a
   narrow window shrinks the app rather than letting it run off the page. */
:root{
  /* 700px at 16px platform sans runs about 75 characters, inside the
     comfortable 65-80 band. It was 750px at 14.67px Calibri, which ran
     past 95 — longer lines AND smaller letters, which is the pair that
     makes a column tiring rather than either one alone. */
  --lb-read:700px;
  --lb-wide:1050px;
  --lb-gutter:26px;
}

/* ---- THE COLUMN (spec 11 3.1, 3.3) ----
   One centred column per page. The `.container` / `.c-body` classes are
   kept because roughly forty queries across the app find "the writing
   surface" by them; what changed is that there is one of them, it is not
   positioned, and it has no frame, no handle and no resize strips. All
   of that is parked in /workshop/paused-onenote-shell/.

   TWO WIDTHS, ONE CENTRE LINE. What makes a paragraph and a kanban feel
   native to the same page is not the same width — it is the same centre.
   Text sits at a reading measure; anything that asks for more grows
   symmetrically around the identical axis, so nothing is ever offset.
   `--lb-read` at 750px runs about 85 characters at 14.67px, inside the
   comfortable 70-90 band. `--lb-wide` is the room an app needs. */
.container{
  max-width:var(--lb-full,var(--lb-wide));
  margin:0 auto;
  /* the biggest break in meaning on the page is title -> first line, so
     it takes the biggest gap. 16px was left over from a 22px title; a
     34px one needs room under it or the heading below reads as part of
     the date stamp. This is the top of the same scale the paragraph gap
     is the bottom of. */
  padding:14px var(--lb-gutter) 0;
}
.c-body{
  padding:2px 0 3px;outline:none;background:transparent;
  font-family:var(--content-font);font-size:var(--lb-body);line-height:var(--lb-lh);color:var(--content-ink);
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
  max-width:var(--lb-read);margin:0 auto;
  white-space:pre-wrap;word-break:break-word;user-select:text;cursor:text;
}

/* while a selection drag is live, it cannot cross into another editable —
   see "selection stays where it started" in app.js */
body.lb-sel-lock .c-body:not(.sel-src),
body.lb-sel-lock #page-title:not(.sel-src){user-select:none}

/* container resize affordance — invisible until the cursor is
   over an edge/corner; only the cursor changes (OneNote style) */
.c-rs{position:absolute;z-index:6}
.rs-n{top:-3px;left:10px;right:10px;height:7px;cursor:ns-resize}
.rs-s{bottom:-3px;left:10px;right:10px;height:7px;cursor:ns-resize}
.rs-e{right:-3px;top:10px;bottom:10px;width:7px;cursor:ew-resize}
.rs-w{left:-3px;top:10px;bottom:10px;width:7px;cursor:ew-resize}
.rs-ne{top:-4px;right:-4px;width:10px;height:10px;cursor:nesw-resize}
.rs-nw{top:-4px;left:-4px;width:10px;height:10px;cursor:nwse-resize}
.rs-se{bottom:-4px;right:-4px;width:10px;height:10px;cursor:nwse-resize}
.rs-sw{bottom:-4px;left:-4px;width:10px;height:10px;cursor:nesw-resize}

/* ---- HEADINGS SAY IT WITH SIZE AND WEIGHT, NEVER WITH COLOR ----
   They were 21.3 / 17.3 / 16px, all weight 400, all Word-blue, with 2px
   of margin. Three problems in one line: an h1 only 1.45x the body is
   not a heading, weight 400 gives it nothing to stand on, and the blue
   was the color-coded hierarchy Word and OneNote use — which stops
   working the moment the page is one long column instead of a grid of
   small boxes. Notion's ratios (1.875 / 1.5 / 1.25 of the body) at
   weight 600 in the SAME ink as the text is the version that survives.

   The margin is the other half. A heading takes roughly its own height
   ABOVE itself and almost nothing below, because it belongs to what
   comes after it, not to what came before. Symmetric 2px said the
   opposite and is most of why sections never looked like sections. */
.c-body h1,.c-body h2,.c-body h3,.c-body h4{
  font-weight:600;color:var(--content-ink);line-height:1.3;
  padding:var(--lb-blockpad) 0;margin-bottom:0;
}
.c-body h1{font-size:1.875em;margin-top:1.08em}
.c-body h2{font-size:1.5em;margin-top:1.1em}
.c-body h3{font-size:1.25em;margin-top:1em}
/* the first line of a page has nothing to be separated FROM */
.c-body h1:first-child,.c-body h2:first-child,
.c-body h3:first-child,.c-body h4:first-child{margin-top:0}
/* A list is prose, not a block quote. The browser's own stylesheet puts
   1em above and below a top-level ul/ol — about 15px here, most of a
   blank line — so every list a person made pushed the writing above and
   below it apart, and the gap appeared the instant "* " landed. Nested
   lists never had it, which is why the spacing looked arbitrary. */
.c-body ul,.c-body ol{padding-left:1.7em;margin:0}
/* an item is its own line-level block, so it takes the same rhythm the
   paragraphs do — 6px between items, none inside a wrapped one */
.c-body li{padding:var(--lb-listpad) 0}
.c-body li>ul,.c-body li>ol{padding-top:var(--lb-listpad)}
.todo{margin:0 2px 0 0;vertical-align:-2px;accent-color:#d83b01}
.tag-star{color:#e98a15}

/* ================= MENUS & POPUPS ================= */
#menu-root{position:fixed;inset:0;pointer-events:none;z-index:1000}
#menu-root>*{pointer-events:auto}

.ctx{
  position:fixed;min-width:196px;
  background:rgba(245,245,245,.62);
  -webkit-backdrop-filter:saturate(1.8) blur(25px);
  backdrop-filter:saturate(1.8) blur(25px);
  border:.5px solid rgba(0,0,0,.28);border-radius:14.5px;
  box-shadow:0 10px 32px rgba(0,0,0,.22),0 1px 4px rgba(0,0,0,.08);
  padding:5px;z-index:1001;
}
.ctx-item{
  height:24px;display:flex;align-items:center;gap:9px;padding:0 11px 0 12.5px;
  font-size:13px;color:rgba(0,0,0,.85);border-radius:5px;white-space:nowrap;
}
.ctx-item:hover{background:rgba(0,0,0,.05)}
.ctx-item.disabled{color:rgba(0,0,0,.3)}
.ctx-item.disabled:hover{background:transparent}
.ctx-sep{height:1px;background:rgba(0,0,0,.09);margin:5px 11.5px}
.ci-label{flex:none}
.ci-sc{margin-left:auto;color:rgba(0,0,0,.3);font-size:13px;padding-left:24px}
.ci-arrow{margin-left:auto;padding-left:32px;display:flex;margin-right:.5px}
.ci-sw{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.22);flex:none}
.ci-check{width:14px;flex:none;color:var(--purple);font-size:12px;visibility:hidden}
.ctx-item.checked .ci-check{visibility:visible}

.popup{
  position:fixed;background:#fff;border:1px solid #e1dfdd;border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.16),0 1px 4px rgba(0,0,0,.08);
  padding:5px;z-index:1002;min-width:120px;
}
.pop-item{
  height:26px;display:flex;align-items:center;gap:8px;padding:0 10px;
  font-size:13px;color:#242424;border-radius:3px;white-space:nowrap;
}
.pop-item:hover{background:var(--menu-hov)}
.pop-item.active-item{background:#e8e7e6}
.pop-sep{height:1px;background:#eae8e6;margin:4px 8px}
.swatch-grid{display:grid;grid-template-columns:repeat(6,24px);gap:5px;padding:3px}
.swatch{width:24px;height:24px;border-radius:3px;border:1px solid rgba(0,0,0,.15)}
.swatch:hover{outline:1px solid #8a8886;outline-offset:1px}
.swatch-none{grid-column:1/-1;height:24px;font-size:12px;color:#44413f;display:flex;align-items:center;padding:0 6px;border-radius:3px}
.swatch-none:hover{background:var(--menu-hov)}

.nb-drop{min-width:260px}
.rename-input{
  flex:1;font:inherit;color:inherit;background:#fff;border:0;outline:none;
  box-shadow:0 0 0 1px #a6a4a3;border-radius:2px;padding:1px 3px;min-width:40px;
  user-select:text;
}

/* ================= SEARCH & RECENT PANES (strip modes) ================= */
/* Search and Recent answer with PAGES, so they take over panel 2 and
   leave the notebook itself on screen in panel 1 — a results mode that
   blanks the whole nav is what spec 11 removed, and it is not coming back
   through a side door. */
#nav.mode-search #pages-list,
#nav.mode-recent #pages-list,
#nav.mode-search #pages-foot,
#nav.mode-recent #pages-foot{display:none}
#nav.mode-search #search-pane,
#nav.mode-recent #recent-pane{flex:1;min-height:0;display:flex;flex-direction:column}
#search-pane,#recent-pane{flex:1;min-height:0;display:flex;flex-direction:column}
#search-pane[hidden],#recent-pane[hidden]{display:none}

/* the field itself lives in the sidebar block above — it is not part of
   the panes any more, because it is not a mode */
#search-results,#recent-list{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:10px}

.sr-group{
  padding:12px 15px 3px;font-size:11px;font-weight:600;color:#8a8886;
  text-transform:uppercase;letter-spacing:.4px;
}
.sr-row{
  display:flex;align-items:flex-start;gap:8px;padding:5px 10px 5px 15px;
  font-size:14px;color:#242424;cursor:default;transition:background-color .12s ease-out;
}
.sr-row:hover{background:var(--hov-row)}
.sr-row.kb-sel,.sr-row.kb-sel:hover{background:var(--sel-row)}
.sr-icon{flex:none;margin-top:2px;color:#605e5c;display:flex}
.sr-main{flex:1;min-width:0}
.sr-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-crumb{
  font-size:11px;color:#8a8886;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:1px;
}
.sr-snip{
  font-size:12px;color:#605e5c;margin-top:2px;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.sr-snip mark{background:#fff0a8;color:inherit;border-radius:1px;padding:0 1px}
.sr-empty{padding:26px 20px;font-size:13px;color:#8a8886;line-height:1.5}

#recent-head{
  height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px 0 15px;border-bottom:1px solid var(--divider);
  font-size:13px;font-weight:700;color:#242424;
}
#recent-clear{font-size:11px;color:#8a8886;padding:3px 6px;border-radius:3px}
#recent-clear:hover{background:var(--hov-row);color:#605e5c}
.rc-time{flex:none;font-size:11px;color:#9c9a99;margin-top:2px}


/* An artifact already sitting in somebody's notebook, on a page or a
   board. Nothing can create one now — the shelf is parked in
   /workshop/paused-artifacts. This is the fallback that keeps an old
   one from drawing as a blank box. */
.nb-artifact-block{padding:4px 2px;min-width:300px}
.nb-artifact-empty{padding:20px;color:#8a8886;font-size:13px;text-align:center}
.b-obj.b-artifact{background:#fff;border:1px solid #e8e6e3;border-radius:8px;overflow:auto;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.b-artifact-body{padding:14px 16px}

/* ---- linking (LBLink): inline links, picker, menu, toast ---- */
a.lb-link{color:#4a6fa5;text-decoration:none;border-bottom:1px solid rgba(74,111,165,.35);cursor:pointer}
a.lb-link:hover{border-bottom-color:#4a6fa5;background:rgba(74,111,165,.07)}
.lb-link-picker{
  position:fixed;z-index:1000;width:300px;background:#fff;border:1px solid #e3e1de;
  border-radius:9px;box-shadow:0 10px 34px rgba(0,0,0,.18);padding:8px;
  font:13px/1.4 -apple-system,"Segoe UI",sans-serif;
}
.lbp-input{
  width:100%;box-sizing:border-box;border:1px solid #e3e1de;border-radius:6px;
  padding:7px 9px;font-size:13px;outline:none;color:#242424;
}
.lbp-input:focus{border-color:#c7bfe0}
.lbp-list{max-height:260px;overflow-y:auto;margin-top:6px}
.lbp-row{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:5px;cursor:pointer}
.lbp-row:hover,.lbp-row.hot{background:#f4f2f7}
.lbp-glyph{flex:none;font-size:13px;width:16px;text-align:center}
.lbp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#242424}
.lbp-sub{flex:none;font-size:11px;color:#a19f9d;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbp-empty{padding:14px;font-size:12px;color:#a19f9d;text-align:center}
.lbp-remove{
  width:100%;margin-top:6px;padding:6px;border-radius:6px;font-size:12px;
  color:#c43e5c;background:#faf0f2;border:0;cursor:pointer;
}
.lbp-remove:hover{background:#f5e3e7}
/* ---------------- the right-click menu ----------------
   One vertical list of named rows, the shape of a Mac menu and of the /
   panel: a 20px lead column for a glyph or a color chip, the name, and
   the shortcut on the right. See editor/menu-plugin.js for what it
   carries and what was parked. */
.lb-link-menu{
  position:fixed;z-index:1001;background:rgba(252,252,251,.98);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(0,0,0,.09);border-radius:11px;
  box-shadow:0 14px 42px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.07);
  padding:5px;min-width:212px;max-width:280px;
  max-height:calc(100vh - 24px);overflow-y:auto;
}
.lb-link-menuitem{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:0 9px;height:28px;border:0;background:none;
  border-radius:6px;font:13px -apple-system,"Segoe UI",sans-serif;color:#242424;cursor:default;
}
.lb-link-menuitem:hover{background:#f1f0ee}
.lb-link-menuitem.on{color:#5b1f86;font-weight:600}
.lb-link-menuitem.strong{font-weight:600}
.lb-link-lead{
  width:17px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:#45423d;line-height:1;
}
.lb-link-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-link-sc{flex:none;font-size:11.5px;color:#a19f9d;letter-spacing:.02em}
.lb-link-chip{
  width:14px;height:14px;border-radius:4px;display:block;
  border:1px solid rgba(0,0,0,.13);
}
.lb-link-chip.none{background:linear-gradient(135deg,#fff 42%,#d33 46%,#d33 54%,#fff 58%)}
.lb-link-head{
  font-size:10.5px;font-weight:600;letter-spacing:.05em;color:#a19f9d;
  padding:9px 10px 3px;text-transform:uppercase;user-select:none;
}
.lb-link-sep{height:1px;background:#ece9e6;margin:4px 6px}

/* ---------------- the spelling squiggle ----------------
   Ours, not the browser's — see the header of spell.js for why the app
   had to take this over.

   THE COMMENT HERE USED TO SAY "same red dotted underline Chrome
   draws" while the rule below said `wavy` in `#e5484d`. Those are not
   the same thing and it showed: a heavy, saturated, cartoon zig-zag
   under ordinary prose. Reported as "scary red", which is exactly
   right.

   What Notion and OneNote actually draw is not a colour either of them
   chose. Both hand spelling underlines to the PLATFORM, so on a Mac you
   get the fine, muted, tightly-spaced dotted line the OS draws
   everywhere else, and it looks like part of the system rather than
   part of the app.

   CSS has a value for exactly this: `text-decoration-line:
   spelling-error` tells the browser to render its own native spelling
   mark, whatever that is on this platform. That is not an approximation
   of Notion and OneNote — it is the same mechanism they use, so it
   matches by construction and keeps matching if the OS changes it.

   The fallback below runs only where that value is unsupported, and is
   deliberately DOTTED rather than wavy and a good deal lighter than
   what was here: #d4646b at 1px reads as a hint, #e5484d wavy reads as
   an accusation. */
.lb-misspelled{
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:#d4646b;
  text-decoration-thickness:1px;
  text-decoration-skip-ink:none;
  text-underline-offset:2px;
}
@supports (text-decoration-line: spelling-error){
  .lb-misspelled{
    text-decoration-line:spelling-error;
    /* the spec says the rest of the shorthand is ignored under
       spelling-error; cleared anyway so nothing here reads as if it
       were still having an effect */
    text-decoration-style:initial;
    text-decoration-color:initial;
    text-decoration-thickness:initial;
    text-underline-offset:initial;
  }
}
.lb-link-toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);
  background:#242424;color:#fff;padding:8px 15px;border-radius:7px;font:12.5px -apple-system,sans-serif;
  z-index:1002;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.lb-link-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* match flash on the canvas after jumping to a content result */
@keyframes lb-flash{
  0%{box-shadow:0 0 0 3px rgba(255,213,77,.95);background:rgba(255,240,168,.55)}
  100%{box-shadow:0 0 0 3px rgba(255,213,77,0);background:transparent}
}
.container.flash{animation:lb-flash 1.6s ease-out;border-radius:3px}

/* ================= NOTEBOOK MANAGER MODAL ================= */
#nb-modal-root{
  position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
}
#nb-modal-root[hidden]{display:none}
#nb-modal-backdrop{
  position:absolute;inset:0;background:rgba(28,24,34,.26);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
#nb-modal{
  position:relative;width:min(880px,85vw);height:min(660px,82vh);
  background:rgba(249,249,249,.94);
  -webkit-backdrop-filter:saturate(1.8) blur(30px);backdrop-filter:saturate(1.8) blur(30px);
  border:.5px solid rgba(0,0,0,.22);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.1);
  display:flex;flex-direction:column;overflow:hidden;
  animation:nbm-in .18s ease-out;
}
@keyframes nbm-in{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
#nb-modal-head{
  height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 0 24px;border-bottom:1px solid var(--divider);
}
#nb-modal-title{font-size:15px;font-weight:700;color:#242424;letter-spacing:-.1px}
#nb-modal-close{
  width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;color:#605e5c;
}
#nb-modal-close:hover{background:rgba(0,0,0,.12)}
#nb-modal-list{flex:1;overflow-y:auto;padding:12px 14px}
.nbm-row{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  border:1px solid transparent;
}
.nbm-row:hover{background:#f0efee}
.nbm-row.current{background:#ede9f4;border-color:rgba(119,25,170,.22)}
.nbm-row.drop-before{box-shadow:inset 0 2px 0 0 var(--purple)}
.nbm-row.drop-after{box-shadow:inset 0 -2px 0 0 var(--purple)}
.nbm-grip{color:#c0bebd;display:flex;flex:none;cursor:grab}
.nbm-icon{flex:none;display:flex}
.nbm-main{flex:1;min-width:0}
.nbm-name{
  font-size:14px;font-weight:600;color:#242424;display:flex;align-items:center;gap:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nbm-cur{
  flex:none;font-size:10px;font-weight:600;color:var(--purple);
  background:rgba(119,25,170,.1);border-radius:4px;padding:1px 7px;letter-spacing:.2px;
}
.nbm-meta{font-size:11px;color:#8a8886;margin-top:2px}
.nbm-acts{flex:none;display:flex;gap:2px;opacity:0}
.nbm-row:hover .nbm-acts{opacity:1}
.nbm-act{
  width:27px;height:27px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  color:#605e5c;
}
.nbm-act:hover{background:rgba(0,0,0,.07)}
.nbm-act.danger:hover{color:#d13438}
#nb-modal-foot{flex:none;border-top:1px solid var(--divider);padding:12px 16px}
#nb-modal-add{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;
  border-radius:8px;background:var(--purple);color:#fff;font-size:13px;font-weight:600;
}
#nb-modal-add:hover{background:#8724c2}
#nb-modal-add:active{background:#671693}

/* ================= IN-APP CONFIRM DIALOG ================= */
#lb-dialog-root{
  position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
}
#lb-dialog-root[hidden]{display:none}
#lb-dialog-backdrop{position:absolute;inset:0;background:rgba(28,24,34,.18)}
#lb-dialog{
  position:relative;width:340px;
  background:rgba(246,246,246,.85);
  -webkit-backdrop-filter:saturate(1.8) blur(25px);backdrop-filter:saturate(1.8) blur(25px);
  border:.5px solid rgba(0,0,0,.22);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28),0 1px 4px rgba(0,0,0,.08);
  padding:20px 18px 14px;text-align:center;
  animation:nbm-in .15s ease-out;
}
#lb-dialog-title{font-size:14px;font-weight:700;color:#242424;margin-bottom:6px}
#lb-dialog-msg{font-size:12.5px;color:#4c4a49;line-height:1.45;margin-bottom:16px}
#lb-dialog-btns{display:flex;gap:8px}
.lb-btn{
  flex:1;height:28px;border-radius:7px;font-size:13px;font-weight:500;
  background:rgba(0,0,0,.07);color:#242424;
}
.lb-btn:hover{background:rgba(0,0,0,.12)}
.lb-btn.danger{background:#d13438;color:#fff;font-weight:600}
.lb-btn.danger:hover{background:#b92c30}

/* a link whose target is gone keeps its copy-time label, quietly marked (spec 01 §2.12) */
a.lb-link.gone { opacity: .55; text-decoration-style: dotted; }