/* Notebook (notebook.js): the taste title on top, then Overview, Shelf, Taste and Settings. Mobile first.
   New class names (nb-*) on purpose: the older notebook rules in app.css carry !important type sizes. */

.nb { --nb-rule: #3a3936; --nb-field: #1e1e21; --nb-dim: #a29e94; min-height: calc(100vh - 162px); }
.nb button { cursor: pointer; }
.nb button:focus-visible, .nb a:focus-visible, .nb select:focus-visible, .nb summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nb-panel:focus, .nb-shelf:focus { outline: none; }
.nb-empty-line { margin: 0; color: #6f6b62; font: italic 15px/1.5 Georgia, serif; list-style: none; }

/* ---------- Header: the hanko and the title ---------- */

.nb-hero { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 6px 0 24px; }
.nb-hero-copy { display: contents; }
.nb-hero-copy > :not(.nb-kicker) { grid-column: 1 / -1; }
.nb-hanko { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 4px 0 0 2px; color: var(--paper); background: var(--red); border-radius: 7px; box-shadow: 5px 5px 0 #080808; font: 400 34px/1 "Yu Mincho", "MS Mincho", serif; transform: rotate(-6deg); }
.nb-hanko::after { content: ''; position: absolute; inset: 4px; border: 1.5px solid rgba(242, 238, 223, .55); border-radius: 4px; pointer-events: none; }
.nb-hanko span { position: relative; z-index: 1; }
.nb-hanko-ink { position: absolute; inset: -6px; border: 3px solid var(--red); border-radius: 12px; pointer-events: none; }
.nb-hero[data-state="empty"] .nb-hanko { color: #8f8b80; background: transparent; border: 2px dashed #57544e; box-shadow: none; transform: none; }
.nb-hero[data-state="empty"] .nb-hanko::after { display: none; }
.nb-kicker { flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; }
.nb-kicker > b { color: #8f8b80; letter-spacing: .14em; }
.nb-hero .nb-title { margin: 18px 0 0; color: var(--paper); font: italic 400 clamp(34px, 10.4vw, 78px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.04em; overflow-wrap: anywhere; }
.nb-hero[data-state="titled"] .nb-title { text-wrap: balance; }
.nb-line { max-width: 660px; margin: 14px 0 0; color: #cfcbbf; font: italic 17px/1.55 Georgia, serif; }
.nb-dots { display: flex; gap: 7px; margin-top: 14px; }
.nb-dots[hidden], .nb-title-actions[hidden], .nb-basis[hidden] { display: none; }
.nb-dots i { width: 11px; height: 11px; border: 1px solid #77746d; border-radius: 50%; }
.nb-dots i.on { border-color: var(--red); background: var(--red); }
.nb-title-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nb-chip { min-height: 44px; padding: 0 16px; border: 1px solid #57544e; border-radius: 22px; color: var(--paper); background: transparent; font: 700 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.nb-chip:hover, .nb-chip[aria-expanded="true"] { border-color: var(--red); color: #fff; }
.nb-chip[aria-expanded="true"] { background: rgba(239, 75, 63, .14); }
.nb-basis { max-width: 660px; margin-top: 14px; padding: 18px; color: var(--ink); background: var(--paper); box-shadow: 6px 6px 0 #080808; }
.nb-basis > p { margin: 0; color: #46433c; font: 15px/1.6 Arial, sans-serif; }
.nb-basis > p b { color: var(--ink); font: italic 400 17px Georgia, serif; }
.nb-basis-list { display: grid; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.nb-basis-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.nb-basis-list span { color: var(--red); font: 800 11px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.nb-basis-list li[data-role="modifier"] span { color: var(--blue); }
.nb-basis-list b { font: 400 17px/1.3 Georgia, serif; }
.nb-basis-list small { margin-left: 8px; color: #8a857a; font: 700 10px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.nb-basis-list i { grid-column: 2; height: 5px; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--strength, .1)); }
.nb-basis-list li[data-role="modifier"] i { background: var(--blue); }
.nb-note { margin: 14px 0 0; color: #6f6b62; font: 13px/1.55 Arial, sans-serif; }
.nb-basis .nb-note { margin: 0; }

/* ---------- Section tabs: sticky, with one red ink line ---------- */

.nb-body { display: block; padding-top: 0; }
.nb-tabs { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -16px 20px; padding: 0 8px; border-bottom: 1px solid var(--nb-rule); background: rgba(23, 23, 25, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nb-tabs button { position: relative; min-width: 0; min-height: 60px; display: grid; grid-template-rows: 24px auto; place-items: center; align-content: center; gap: 3px; padding: 6px 2px; border: 0; color: #9b978e; background: transparent; font: 700 11px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.nb-tabs button > span { color: #6f6c66; font: 21px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; transition: color .2s; }
.nb-tabs button:hover { color: var(--paper); }
.nb-tabs button[aria-selected="true"] { color: var(--paper); }
.nb-tabs button[aria-selected="true"] > span { color: var(--red); }
.nb-tabs button:focus-visible { outline-offset: -3px; }
.nb-tab-count { position: absolute; top: 6px; left: calc(50% + 10px); min-width: 20px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 9px; color: var(--paper); background: #3b3935; font: 700 10px/1 Arial, sans-serif; font-style: normal; letter-spacing: 0; }
.nb-tab-count:empty { display: none; }
.nb-tabs-ink { position: absolute; left: 0; bottom: -1px; width: 100px; height: 2px; background: var(--red); transform-origin: 0 50%; transform: translateX(var(--ink-x, 0)) scaleX(var(--ink-scale, 0)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }

/* ---------- Overview ---------- */

.nb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.nb-stat { position: relative; min-height: 72px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; overflow: hidden; border: 1px solid #3b3935; color: var(--paper); background: #1c1c1f; text-align: left; transition: border-color .2s, transform .2s; }
.nb-stat b { font: 400 34px/1 Georgia, serif; letter-spacing: -.03em; }
.nb-stat > span:last-child { color: #aaa69b; font: 700 11px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.nb-stat-mark { position: absolute; top: -8px; right: -4px; color: rgba(242, 238, 223, .07); font: 400 64px/1 "Yu Mincho", "MS Mincho", serif; pointer-events: none; }
.nb-stat[data-decision="watch"] b { color: var(--red); }
.nb-stat:hover { border-color: var(--red); }
.nb-stat:active { transform: scale(.98); }

.nb-overview { display: grid; gap: 18px; }
.nb-overview-side { display: grid; gap: 18px; align-content: start; }
.nb-card { padding: 20px 18px; box-shadow: 6px 6px 0 #080808; }
.nb-card .section-label { gap: 10px; }
.nb-link { min-height: 44px; margin: -12px -8px -12px 0; padding: 0 8px; border: 0; color: var(--ink); background: transparent; font: 700 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nb-link:hover { color: var(--red); }

.nb-recent-list { margin: 10px 0 0; padding: 0; list-style: none; }
.nb-recent-list > li + li { border-top: 1px solid rgba(18, 18, 18, .12); }
.nb-recent-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 66px; padding: 7px 0; color: var(--ink); text-decoration: none; }
.nb-recent-item img, .nb-recent-item .nb-thumb-fallback { width: 36px; height: 52px; object-fit: cover; background: var(--paper-deep); }
.nb-thumb-fallback { display: grid; place-items: center; color: #8e887a; font: 20px "Yu Mincho", serif; }
.nb-recent-item > span { min-width: 0; }
.nb-recent-item b { display: block; overflow: hidden; font: 400 16px/1.3 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.nb-recent-item:hover b { color: var(--red); }
.nb-recent-item time { color: #8a857a; font: italic 13px/1 Georgia, serif; white-space: nowrap; }
.nb-decision { display: block; margin-top: 4px; color: #6f6b62; font: 700 11px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.nb-decision[data-decision="watch"] { color: var(--red); }
.nb-decision[data-decision="watched"] { color: var(--blue); }

.nb-pile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.nb-pile > a { display: grid; align-content: start; gap: 7px; min-width: 0; color: var(--ink); text-decoration: none; }
.nb-pile img, .nb-pile .nb-thumb-fallback { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: var(--paper-deep); box-shadow: 4px 4px 0 rgba(18, 18, 18, .22); transition: transform .25s; }
.nb-pile > a:hover img { transform: translateY(-3px) rotate(-1deg); }
.nb-pile > a > span { display: -webkit-box; overflow: hidden; font: 14px/1.3 Georgia, serif; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nb-pile > .nb-empty-line { grid-column: 1 / -1; }
.nb-ghost { justify-self: start; min-height: 44px; padding: 0 16px; border: 1px solid #8a8374; color: var(--ink); background: transparent; font: 700 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.nb-ghost:hover { border-color: var(--red); color: var(--red); }
.nb-pile > .nb-ghost { grid-column: 1 / -1; }

.nb-track { height: 6px; margin-top: 12px; overflow: hidden; background: #cbc4b1; }
.nb-track i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }
.nb-map-copy { margin: 10px 0 0; color: #5d5950; font: italic 15px/1.5 Georgia, serif; }
.nb-sublabel { margin-top: 22px; }
.nb-themes { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.nb-themes span { --size: 1; padding: 6px 11px; border: 1px solid #b9b29f; border-radius: 18px; color: #3f3c36; font: italic calc(12px + var(--size) * 4px)/1.2 Georgia, serif; }
.nb-themes span:first-child { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.nb-themes em { color: #77736a; font: italic 15px Georgia, serif; }

.nb-quick { display: grid; justify-self: stretch; gap: 10px; margin-top: 22px; }
.nb-quick button { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center; min-height: 68px; padding: 11px 14px; border: 1px solid #3b3935; color: var(--paper); background: transparent; text-align: left; transition: border-color .2s; }
.nb-quick button:hover { border-color: var(--red); }
.nb-quick span { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; color: var(--paper); background: var(--red); font: 22px/1 "Yu Mincho", "MS Mincho", serif; }
.nb-quick b { align-self: end; font: 400 18px/1.2 Georgia, serif; }
.nb-quick small { align-self: start; color: #9b978e; font: 13px/1.35 Arial, sans-serif; }

/* ---------- Shelf ---------- */

.nb-shelf-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 14px; }
.nb-shelf-head h2 { margin-top: 6px; font: italic 400 clamp(26px, 7.4vw, 38px)/1.05 Georgia, serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
#libraryTotal { flex: 0 0 auto; color: var(--nb-dim); font: italic 15px Georgia, serif; }
.nb-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px; }
.nb-search { position: relative; display: block; grid-column: 1 / -1; }
.nb-search svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: #8f8b80; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.nb-search input { width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 1px solid #4a4843; border-radius: 0; color: var(--paper); background: var(--nb-field); font: 16px Arial, sans-serif; -webkit-appearance: none; appearance: none; }
.nb-search input::placeholder { color: #8a867d; }
.nb-search input:focus { border-color: var(--red); outline: 0; box-shadow: 0 0 0 1px var(--red); }
.nb-sort { display: block; min-width: 0; }
.nb-sort select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #4a4843; border-radius: 0; color: var(--paper); background: var(--nb-field); font: 15px Arial, sans-serif; }
.nb-layout { display: grid; grid-template-columns: 46px 46px; border: 1px solid #4a4843; }
.nb-layout button { display: grid; place-items: center; min-height: 44px; border: 0; color: #9b978e; background: transparent; }
.nb-layout button + button { border-left: 1px solid #4a4843; }
.nb-layout svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nb-layout button[aria-pressed="true"] { color: var(--ink); background: var(--paper); }
.nb-layout button:focus-visible { outline-offset: -3px; }

.nb-filters { display: flex; gap: 6px; margin: 0 -16px 18px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nb-filters::-webkit-scrollbar { display: none; }
.nb-filters button { flex: 0 0 auto; min-height: 44px; padding: 0 15px; border: 1px solid #4a4843; border-radius: 22px; color: #b8b4a9; background: transparent; font: 700 12px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.nb-filters button span { margin-left: 5px; color: #858178; font: italic 15px Georgia, serif; letter-spacing: 0; text-transform: none; }
.nb-filters button:hover { border-color: #8a867d; color: var(--paper); }
.nb-filters button[aria-pressed="true"] { border-color: var(--paper); color: var(--ink); background: var(--paper); }
.nb-filters button[aria-pressed="true"] span { color: var(--red); }

/* Grid: a wall of posters. Each has a hanko for its shelf and a "more" button for the sheet. */
.nb-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; align-items: start; }
.nb-item { position: relative; min-width: 0; display: grid; align-content: start; }
.nb-item-art { position: relative; }
.nb-item-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: #2a2a2d; box-shadow: 4px 4px 0 #080808; }
.nb-item-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.nb-item-cover:hover img { transform: scale(1.045); }
.nb-item-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #8e887a; font: 34px "Yu Mincho", serif; }
.nb-item[data-decision="pass"] .nb-item-cover img { filter: grayscale(.7) brightness(.85); }
.nb-item-stamp { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; color: var(--paper); background: #2c2a26; box-shadow: 0 0 0 2px rgba(242, 238, 223, .85); font: 400 16px/1 "Yu Mincho", "MS Mincho", serif; transform: rotate(-6deg); pointer-events: none; }
/* The seal on the cover in the decision's colour (decision.css): Saved ink, Tonight red, Passed muted, Finished paper. */
.nb-item[data-decision="watch"] .nb-item-stamp { background: var(--decision-tonight-fill, var(--red)); }
.nb-item[data-decision="watched"] .nb-item-stamp { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 2px rgba(18, 18, 18, .55); }
.nb-item[data-decision="pass"] .nb-item-stamp { background: #6a665e; }
.nb-item-more { position: absolute; top: 0; right: 0; display: grid; grid-auto-flow: column; place-content: center; gap: 3px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.nb-item-more::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: rgba(18, 18, 18, .78); box-shadow: 0 1px 6px rgba(0, 0, 0, .35); transition: background-color .2s, transform .2s; }
.nb-item-more i { position: relative; width: 4px; height: 4px; border-radius: 50%; background: var(--paper); }
.nb-item-more:hover::before { background: var(--red); transform: scale(1.06); }
.nb-item-more:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 50%; }
.nb-item-body { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 9px 2px 0; }
.nb-item-title { margin: 0; font: 400 15px/1.22 Georgia, serif; letter-spacing: -.01em; }
.nb-item-title a { display: -webkit-box; overflow: hidden; color: var(--paper); text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nb-item-title a:hover { color: var(--red); }
.nb-item-meta { margin: 0; color: #9a968c; font: 700 11px/1.35 Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.nb-status { color: #d8d3c6; }
.nb-item[data-decision="watch"] .nb-status { color: #ff7a6f; }
.nb-item[data-decision="watched"] .nb-status { color: #8fb3df; }
.nb-item-format, .nb-item-noted, .nb-item-signals { display: none; }
.nb-item-note { margin: 0; color: #c2beb2; font: 13px/1.4 Arial, sans-serif; }

/* List: one compact paper row per title. */
.nb-shelf[data-layout="list"] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.nb-shelf[data-layout="list"] .nb-item { grid-template-columns: 64px minmax(0, 1fr); color: var(--ink); background: var(--paper); box-shadow: 4px 4px 0 #080808; }
.nb-shelf[data-layout="list"] .nb-item-art { position: static; }
.nb-shelf[data-layout="list"] .nb-item-cover { height: 100%; min-height: 96px; aspect-ratio: auto; box-shadow: none; }
.nb-shelf[data-layout="list"] .nb-item-stamp { left: 40px; bottom: 8px; width: 24px; height: 24px; font-size: 14px; }
.nb-shelf[data-layout="list"] .nb-item-more { top: 50%; right: 4px; margin-top: -22px; }
.nb-shelf[data-layout="list"] .nb-item-body { gap: 4px; padding: 11px 52px 11px 14px; }
.nb-shelf[data-layout="list"] .nb-item-title { font-size: 17px; }
.nb-shelf[data-layout="list"] .nb-item-title a { color: var(--ink); }
.nb-shelf[data-layout="list"] .nb-item-title a:hover { color: var(--red); }
.nb-shelf[data-layout="list"] .nb-item-meta { color: #77726a; }
.nb-shelf[data-layout="list"] .nb-status { color: #2c2a26; }
.nb-shelf[data-layout="list"] .nb-item[data-decision="watch"] .nb-status { color: var(--red); }
.nb-shelf[data-layout="list"] .nb-item[data-decision="watched"] .nb-status { color: var(--blue); }
.nb-shelf[data-layout="list"] .nb-item-format { display: inline; }
.nb-shelf[data-layout="list"] .nb-item-signals { display: block; overflow: hidden; margin: 0; color: #6d685f; font: italic 14px/1.4 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.nb-shelf[data-layout="list"] .nb-item-note { color: #4a463f; }

.nb-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding: 40px 20px; border: 1px dashed #4a4843; color: var(--nb-dim); text-align: center; }
.nb-empty > span { color: var(--red); font: 44px/1 "Yu Mincho", "MS Mincho", serif; }
.nb-empty h3 { color: var(--paper); font: italic 400 26px/1.15 Georgia, serif; overflow-wrap: anywhere; }
.nb-empty p { max-width: 360px; margin: 0; font: 15px/1.55 Georgia, serif; }
.nb-empty .primary { min-height: 48px; margin-top: 6px; padding: 0 20px; font-size: 12px !important; }
.nb-empty .nb-ghost { border-color: #57544e; color: var(--paper); }
.nb-more { display: block; width: 100%; min-height: 52px; margin-top: 22px; border: 1px solid #4b4944; color: #c9c5b9; background: transparent; font: 700 12px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.nb-more:hover { border-color: var(--red); color: var(--paper); }

/* The per-title sheet: a bottom sheet on phones, a small card on wider screens. */
.nb-sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: min(88dvh, 640px); margin: 0; padding: 0; overflow: visible; border: 0; color: var(--ink); background: transparent; }
.nb-sheet::backdrop { background: rgba(8, 8, 9, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nb-sheet-inner { max-height: min(88dvh, 640px); overflow-y: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); background-color: var(--paper); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(18, 18, 18, .05) 28px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .4); }
.nb-sheet-inner::before { content: ''; display: block; width: 44px; height: 4px; margin: -6px auto 14px; border-radius: 2px; background: #c4bda9; }
.nb-sheet-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 14px; align-items: start; margin-bottom: 18px; }
.nb-sheet-cover a, .nb-sheet-cover > span { display: block; }
.nb-sheet-cover img, .nb-sheet-cover .nb-item-fallback { width: 56px; height: 80px; object-fit: cover; background: var(--paper-deep); box-shadow: 3px 3px 0 rgba(18, 18, 18, .25); }
.nb-sheet-copy { min-width: 0; }
.nb-sheet-status { margin: 0; color: #2c2a26; font: 800 12px/1.2 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.nb-sheet[data-decision="watch"] .nb-sheet-status { color: var(--red); }
.nb-sheet[data-decision="watched"] .nb-sheet-status { color: var(--blue); }
.nb-sheet h2 { margin: 5px 0 0; font: 400 22px/1.15 Georgia, serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.nb-sheet h2 a { color: inherit; text-decoration: none; }
.nb-sheet h2 a:hover { color: var(--red); }
.nb-sheet-meta { margin: 6px 0 0; color: #6f6b62; font: 14px/1.4 Arial, sans-serif; }
.nb-sheet-close { width: 44px; height: 44px; border: 1px solid #b0aa98; border-radius: 50%; color: var(--ink); background: transparent; font: 400 26px/1 Georgia, serif; }
.nb-sheet-close:hover { border-color: var(--red); color: var(--red); }
.nb-tray-label { margin: 0 0 8px; color: #6f6b62; font: 800 11px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
/* Moves are the shared decision bar (decision.css): Passed · Saved · Tonight | Finished. */
.nb-moves-inner { background: rgba(255, 255, 255, .3); }
.nb-sheet .companion-library-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-top: 14px; }
.nb-sheet .companion-library-actions button { min-height: 48px; padding: 8px 10px; border-color: #b0aa98; background: transparent; font: 15px/1.25 Arial, sans-serif; }
.nb-sheet .companion-library-actions button:hover { border-color: var(--ink); }
.nb-sheet button:focus-visible, .nb-sheet a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- Taste ---------- */

.nb-taste { padding: 22px 18px 26px; box-shadow: 6px 6px 0 #080808; }
.nb-taste h2 { margin-top: 18px; font: 400 clamp(32px, 8.4vw, 54px)/1.03 Georgia, serif; letter-spacing: -.04em; }
.nb-lede { max-width: 760px; margin: 12px 0 0; color: #55514a; font: italic 17px/1.6 Georgia, serif; }
.nb-taste-grid { display: grid; gap: 30px; margin-top: 28px; }
.nb-taste-part { min-width: 0; }
.nb-h3 { margin: 0 0 14px; color: var(--red); font: 800 12px/1.4 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.nb-taste-part .nb-h3 + .nb-dimensions + .nb-h3, .nb-dimensions + .nb-h3 { margin-top: 30px; }
.nb-affinities { display: grid; gap: 15px; }
.nb-affinity { min-width: 0; }
.nb-affinity-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.nb-affinity-head b { min-width: 0; font: 400 18px/1.3 Georgia, serif; overflow-wrap: anywhere; }
.nb-affinity-head small { margin-left: 8px; color: #8a857a; font: 700 10px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.nb-affinity-head span { color: #57534b; font: 700 14px Arial, sans-serif; }
.nb-affinity progress { display: block; width: 100%; height: 9px; border: 0; border-radius: 0; overflow: hidden; color: var(--red); background: #d7d0bb; -webkit-appearance: none; appearance: none; }
.nb-affinity progress::-webkit-progress-bar { background: #d7d0bb; }
.nb-affinity progress::-webkit-progress-value { background: var(--red); }
.nb-affinity progress::-moz-progress-bar { background: var(--red); }
.nb-evidence { margin-top: 4px; }
.nb-evidence summary { min-height: 44px; display: flex; align-items: center; color: var(--blue); font: 14px/1.4 Arial, sans-serif; cursor: pointer; }
.nb-evidence > p, .nb-evidence article p { margin: 6px 0; color: #5c574e; font: 14px/1.55 Arial, sans-serif; }
.nb-evidence article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.nb-evidence img { width: 40px; height: 58px; object-fit: cover; background: var(--paper-deep); }
.nb-evidence a { color: var(--ink); font: 16px/1.4 Georgia, serif; }
.nb-avoided { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #aaa697; color: #5f5b53; font: italic 15px/1.55 Georgia, serif; }
.nb-avoided b { color: var(--red); font: 800 11px/1.6 Arial, sans-serif; letter-spacing: .12em; }
.nb-dimensions { display: grid; border: 1px solid #aaa697; }
.nb-dimensions article { padding: 14px 15px; }
.nb-dimensions article + article { border-top: 1px solid #aaa697; }
.nb-dimensions b { color: var(--red); font: 800 11px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.nb-dimensions p { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.nb-dimensions span { padding: 5px 9px; border: 1px solid #bbb4a2; font: italic 14px/1.3 Georgia, serif; }
.nb-dimensions em { color: #817c72; font: italic 14px Georgia, serif; }
.nb-timeline { position: relative; display: grid; }
.nb-timeline::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 51px; width: 1px; background: #aaa697; }
.nb-timeline article { position: relative; display: grid; grid-template-columns: 39px 16px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
.nb-timeline article > b { font: 16px Georgia, serif; }
.nb-timeline article > i { z-index: 1; width: 9px; height: 9px; margin-top: 5px; border: 2px solid var(--paper); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red); }
.nb-timeline strong, .nb-timeline span { display: block; }
.nb-timeline strong { font: 700 13px Arial, sans-serif; }
.nb-timeline span { margin-top: 3px; color: #5f5b53; font: italic 15px/1.45 Georgia, serif; }

/* ---------- Settings ---------- */

.nb-settings { display: grid; gap: 18px; align-items: start; }
.nb-settings-side { display: grid; gap: 18px; }
.nb-settings .account-connection { padding: 22px 18px; }
.nb-settings .safety-panel h2, .nb-device h2 { margin-top: 18px; font: 400 26px/1.1 Georgia, serif; letter-spacing: -.02em; }
.nb-device p { margin: 10px 0 16px; color: #55514a; font: 15px/1.6 Arial, sans-serif; }
.nb-signout { min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); color: var(--ink); background: transparent; font: 700 12px/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.nb-signout:hover { border-color: var(--red); color: var(--paper); background: var(--red); }

/* ---------- Wider screens ---------- */

@media (min-width: 560px) {
    .nb-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; }
    .nb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nb-stat { min-height: 96px; grid-template-columns: none; align-content: end; justify-items: start; gap: 8px; padding: 14px 16px; }
    .nb-stat b { font-size: 42px; }
    .nb-stat-mark { top: -12px; right: -6px; font-size: 78px; }
    .nb-toolbar { grid-template-columns: minmax(0, 1fr) 200px auto; }
    .nb-search { grid-column: auto; }
    .nb-item-format { display: inline; }
    .nb-shelf[data-layout="list"] .nb-item-noted { display: inline; }
}

@media (min-width: 761px) {
    .nb-tabs { margin: 0 0 28px; padding: 0; display: flex; }
    .nb-tabs button { grid-template-rows: none; grid-auto-flow: column; gap: 9px; min-height: 54px; padding: 0 22px; font-size: 12px; }
    .nb-tab-count { position: static; margin-left: 2px; }
    .nb-filters { flex-wrap: wrap; margin: 0 0 22px; padding: 0; overflow: visible; }
    .nb-card { padding: 24px; box-shadow: 8px 8px 0 #080808; }
    .nb-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nb-taste { padding: 32px; box-shadow: 9px 9px 0 #080808; }
    .nb-settings .account-connection { padding: 27px 31px; }
    .nb-sheet { inset: 0; width: min(480px, calc(100% - 32px)); height: fit-content; margin: auto; }
    .nb-sheet-inner { padding: 24px; box-shadow: 10px 10px 0 #080808; }
    .nb-sheet-inner::before { display: none; }
}

@media (min-width: 900px) {
    .nb-hero { grid-template-columns: 112px minmax(0, 1fr); column-gap: 30px; align-items: start; padding: 22px 0 36px; }
    .nb-hero-copy { display: block; }
    .nb-hero .nb-title { margin-top: 10px; }
    .nb-hanko { width: 104px; height: 104px; margin-top: 10px; border-radius: 10px; box-shadow: 8px 8px 0 #080808; font-size: 60px; }
    .nb-hanko::after { inset: 6px; border-width: 2px; border-radius: 6px; }
    .nb-line { font-size: 19px; }
    .nb-overview { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: start; }
    .nb-overview-side { gap: 24px; }
    .nb-shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 18px; }
    .nb-shelf[data-layout="list"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
    .nb-item-title { font-size: 16px; }
    .nb-taste-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; }
    .nb-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nb-dimensions article + article { border-top: 0; }
    .nb-dimensions article:nth-child(even) { border-left: 1px solid #aaa697; }
    .nb-dimensions article:nth-child(n+3) { border-top: 1px solid #aaa697; }
    .nb-settings { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; }
}

@media (min-width: 1280px) {
    .nb-shelf[data-layout="list"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Taste: the nudges the person gave (notebook.js, nudge.js). Each chip can be taken back with ×. */
.nb-nudges { margin-top: 22px; padding-top: 16px; border-top: 1px solid #aaa697; }
.nb-nudges[hidden] { display: none; }
.nb-nudges .nb-h3 span { margin-right: 2px; font: 400 14px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }
.nb-nudges .nb-h3:focus { outline: none; }
.nb-nudge-group { display: grid; gap: 8px; margin-top: 12px; }
.nb-nudge-group b { color: #5f5b53; font: 800 11px/1.6 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.nb-nudge-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nb-nudge { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 0 0 0 15px; border: 1px solid #aaa697; border-radius: 22px; color: var(--ink); background: rgba(255, 255, 255, .35); font: italic 15px/1.2 Georgia, serif; }
.nb-nudge span { min-width: 0; overflow-wrap: anywhere; }
.nb-nudge-undo { flex: none; width: 44px; height: 44px; margin: -1px -1px -1px 0; padding: 0; border: 0; border-radius: 50%; color: #6f6b62; background: none; font: 400 21px/1 Georgia, serif; cursor: pointer; }
.nb-nudge-undo:hover { color: var(--red); }
.nb-nudge-undo:focus-visible { outline: 2px solid var(--red); outline-offset: -8px; }
.nb-nudge-undo:disabled { opacity: .5; cursor: wait; }
.nb-nudges .nb-note { margin-top: 12px; }
.nb-nudges .nb-empty-line { margin-top: 2px; font-size: 14px; }