/* Notebook: tabs Questions | Suspects | Clues, in the sheet (manila) and the desktop side column (panel). */
.nb { --nc: rgba(255,255,255,.32); --nl: rgba(43,33,21,.32); --ni: var(--file-ink); --nm: var(--file-muted); --nbg: var(--file); --nh: var(--ember); --nbad: #9c2618; --nok: #2b6a35; --nr: 6px; --nb-bar: 54px;
  display: flex; flex-direction: column; gap: 12px; color: var(--ni); }
.side-body .nb { --nc: var(--panel-2); --nl: var(--line); --ni: var(--ink); --nm: var(--muted); --nbg: var(--panel); --nbad: var(--bad); --nok: var(--good); }
.nb-pane { display: flex; flex-direction: column; gap: 12px; }

/* tabs: stick to the top of the sheet while its body scrolls */
.nb-tabs { position: sticky; top: -12px; z-index: 4; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: -12px -18px 0; padding: 8px 18px; min-height: var(--nb-bar); background: var(--nbg); border-bottom: 1.5px solid var(--nl); }
.side-body .nb-tabs { margin: -12px -16px 0; padding: 8px 16px; }
.nb-tabs button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border: 1.5px solid var(--nl); border-radius: var(--nr); background: transparent; color: var(--ni); font-weight: 700; font-size: 14px; white-space: nowrap; }
.nb-tabs button[aria-selected="true"] { background: var(--ni); border-color: var(--ni); color: var(--nbg); }
.nb-tabs .nb-n { font: 12px var(--f-type); opacity: .75; }
.nb-tabs .nb-n:empty { display: none; }
/* scrolling something into view keeps it clear of the tabs */
.sheet-body:has(> .nb), .side-body:has(> .nb) { scroll-padding-top: 66px; }
/* the question board's strip of open questions sticks below the tabs */
.nb .qb-drop { top: calc(var(--nb-bar) - 12px); margin: 0 -18px; }
.side-body .nb .qb-drop { margin: 0 -16px; }

/* suspects */
.nb-sus { display: grid; gap: 10px; }
.nb-s { background: var(--nc); border: 1.5px solid var(--nl); border-radius: var(--nr); padding: 10px; display: grid; gap: 8px; }
.nb-s-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.nb-face { width: 56px; height: 56px; border-radius: calc(var(--nr) + 2px); background-color: var(--nl); background-repeat: no-repeat; }
.nb-face.none { display: grid; place-items: center; font: 800 26px/1 var(--f-display); }
.nb-s-who { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: baseline; }
.nb-s-k { font: 800 18px/1 var(--f-display); grid-row: span 2; }
.nb-s-who b { font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-s-who small { grid-column: 2; font-size: 12.5px; color: var(--nm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-st { justify-self: end; max-width: 120px; padding: 4px 9px; border-radius: 999px; border: 1.5px solid var(--nl); font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center; }
.nb-st.out { border-color: transparent; background: var(--nl); color: var(--ni); }
.nb-st.lie { border-color: var(--nbad); background: var(--nbad); color: #fff; }
.nb-s.out .nb-face { filter: grayscale(1); opacity: .6; }
.nb-s.out .nb-s-who b { text-decoration: line-through; text-decoration-thickness: 2px; }
.nb-s.lie { border-color: var(--nbad); }
.nb-said { margin: 0; font: italic 13.5px/1.45 var(--f-type); }
.nb-links { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 3px; border: 1.5px solid var(--nl); border-radius: 999px; background: transparent; color: var(--ni); font-size: 12.5px; font-weight: 600; text-align: left; }
.nb-link .qb-th, .nb-link .qb-ico { width: 26px; height: 26px; border-radius: 50%; }
.nb-link .qb-ico svg { width: 20px; height: 20px; }
.nb-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-link.struck { opacity: .5; text-decoration: line-through; }
.nb-none { margin: 0; font-size: 12.5px; color: var(--nm); }

/* clues: one row each; text on tap; ★ pins to the top, ✕ crosses out */
.nb-clues-tab { display: flex; flex-direction: column; gap: 8px; }
.nb-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.nb-chips button { flex: none; border: 1.5px solid var(--nl); background: transparent; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; color: var(--ni); }
.nb-chips button[aria-pressed="true"] { background: var(--ni); border-color: var(--ni); color: var(--nbg); }
.nb-count { margin: 2px 0 0; font: 12px var(--f-type); color: var(--nm); letter-spacing: .04em; text-transform: uppercase; }
.nb-empty { margin: 0; font: 14px/1.45 var(--f-type); color: var(--nm); padding: 12px; border: 1.5px dashed var(--nl); border-radius: var(--nr); }
.nb-clues { display: grid; gap: 6px; }
.nb-clue { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; align-items: center; background: var(--nc); border: 1.5px solid var(--nl); border-radius: var(--nr); }
.nb-clue.ded { border-left: 4px solid var(--nh); }
.nb-clue.pinned { border-color: var(--nh); box-shadow: inset 0 0 0 1px var(--nh); }
.nb-clue.struck { opacity: .5; }
.nb-clue.struck .tt { text-decoration: line-through; }
.nb-main { position: relative; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px; border: 0; background: none; color: inherit; text-align: left; }
.nb-main .tt { min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nb-new { position: absolute; left: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--nh); box-shadow: 0 0 0 2px var(--nbg); }
.nb-pin, .nb-strike { height: 40px; border: 0; background: none; color: var(--nm); font-size: 18px; line-height: 1; border-radius: var(--nr); }
.nb-pin[aria-pressed="true"] { color: var(--nh); }
.nb-strike[aria-pressed="true"] { color: var(--nbad); }
.nb-detail { grid-column: 1 / -1; padding: 0 11px 11px; border-top: 1px dashed var(--nl); }
.nb-detail p { margin: 9px 0 0; font: 13.5px/1.45 var(--f-type); }
.nb-detail .hd { font-size: 22px; line-height: 1.2; color: #262650; white-space: pre-line; }
.side-body .nb-detail .hd { color: inherit; }

[data-theme="cozy"] .nb { --nc: #fff; --nl: var(--line); --nbad: #b8402b; --nok: #2e7d55; --nr: 14px; }
[data-theme="cozy"] .side-body .nb { --nc: #fff; --nbg: var(--panel); }
[data-theme="cozy"] .nb-tabs button[aria-selected="true"], [data-theme="cozy"] .nb-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fffaf1; }
[data-theme="cozy"] .nb-s { box-shadow: 0 4px 12px rgba(75,58,42,.1); }