/* ─────────────────────────────────────────────────────────────────
Workshop v2 — unified lab notebook system
Theme-aware: data-theme="dark" | "light" on
Caveat / Kalam / JetBrains Mono
───────────────────────────────────────────────────────────────── */
/* DARK = default (warm dark paper) */
:root, :root[data-theme="dark"] {
/* paper palette */
--paper: #1F1B16; /* main dark paper */
--paper-2: #261F18; /* slightly lighter paper (cards) */
--paper-3: #2E2620; /* hover / raised */
--margin: #3A2F26; /* left margin column */
--rule: rgba(180, 150, 110, 0.10); /* horizontal rules */
--rule-strong: rgba(180, 150, 110, 0.22);
/* ink */
--ink: #F4EFE6; /* primary text */
--ink-2: #C9C0AF; /* secondary text */
--ink-3: #8A7F70; /* tertiary / mono labels */
--ink-4: #5C5347; /* hairline borders */
/* accents */
--accent: #C8553D; /* terracotta */
--accent-soft: #C8553D33;
--amber: #C68A2E;
--green: #4A8062;
--red: #B84A3F;
--steel: #5B7A99;
--plum: #8E5A8C;
/* surface inks (for things that should always be readable on light card stocks
like sticky notes / index cards / pegcards-on-cream regardless of theme) */
--card-paper: #F2EDE0; /* index card background */
--card-ink: #1F1B16; /* index card text */
--card-ink-2: #5C5347; /* index card secondary */
--card-rule: rgba(31, 27, 22, 0.08);
--sticky-base: #E8DDA6;
--sticky-pin: #8B6F47;
/* shadows */
--shadow-card: 0 1px 0 rgba(0,0,0,0.10), 1px 3px 6px rgba(0,0,0,0.32);
--shadow-sticky: 0 1px 0 rgba(0,0,0,0.15), 2px 4px 8px rgba(0,0,0,0.35);
--shadow-tab: -2px 2px 0 rgba(0,0,0,0.25);
/* topbar */
--topbar-bg: rgba(31, 27, 22, 0.86);
/* texture (svg noise) */
--grain-color-1: 0.95;
--grain-color-2: 0.92;
--grain-color-3: 0.88;
--grain-alpha: 0.05;
--grain-blend: screen;
--grain-opacity: 0.6;
/* type */
--hand: 'Caveat', cursive;
--body: 'Kalam', cursive;
--mono: 'JetBrains Mono', monospace;
}
/* LIGHT = cream paper, dark ink */
:root[data-theme="light"] {
--paper: #F5EFE2; /* warm cream paper */
--paper-2: #EDE5D4; /* slightly deeper cream (cards) */
--paper-3: #E5DBC6; /* hover / raised */
--margin: #E8DEC8; /* left margin column */
--rule: rgba(74, 60, 42, 0.10);
--rule-strong: rgba(74, 60, 42, 0.22);
--ink: #2A2218;
--ink-2: #5C4F3E;
--ink-3: #8A7B65;
--ink-4: #BFB29A;
--accent: #B84A35;
--accent-soft: #B84A3533;
--amber: #B07820;
--green: #3D6B53;
--red: #A03830;
--steel: #4A6680;
--plum: #784875;
/* card surfaces stay the same warm tones in light mode but slightly deeper
so they still feel like a "thing on the page" */
--card-paper: #FBF6E8;
--card-ink: #1F1B16;
--card-ink-2: #5C5347;
--card-rule: rgba(31, 27, 22, 0.08);
--sticky-base: #F2DC9E;
--sticky-pin: #6E5436;
--shadow-card: 0 1px 0 rgba(74,60,42,0.08), 1px 3px 6px rgba(74,60,42,0.18);
--shadow-sticky: 0 1px 0 rgba(74,60,42,0.10), 2px 4px 8px rgba(74,60,42,0.22);
--shadow-tab: -2px 2px 0 rgba(74,60,42,0.18);
--topbar-bg: rgba(245, 239, 226, 0.86);
--grain-color-1: 0.10;
--grain-color-2: 0.08;
--grain-color-3: 0.05;
--grain-alpha: 0.04;
--grain-blend: multiply;
--grain-opacity: 0.5;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--body);
font-size: 16px;
line-height: 1.55;
min-height: 100vh;
}
/* paper texture: grain + ruled horizontal lines (DARK) */
:root[data-theme="dark"] body::before,
:root:not([data-theme="light"]) body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: 0;
background:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 31px,
var(--rule) 31px,
var(--rule) 32px
),
url("data:image/svg+xml;utf8,");
background-size: auto, 200px 200px;
opacity: 0.6;
mix-blend-mode: screen;
}
/* paper texture: grain + ruled horizontal lines (LIGHT) */
:root[data-theme="light"] body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
z-index: 0;
background:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 31px,
var(--rule) 31px,
var(--rule) 32px
),
url("data:image/svg+xml;utf8,");
background-size: auto, 200px 200px;
opacity: 0.5;
mix-blend-mode: multiply;
}
/* ─── notebook shell ─────────────────────────────────────────── */
.nb-shell {
position: relative;
z-index: 1;
display: flex;
min-height: 100vh;
}
/* left margin column — page numbers, dates, vertical accent */
.nb-margin {
width: 56px;
flex-shrink: 0;
background: linear-gradient(to right, transparent, var(--margin) 30%, var(--margin));
border-right: 1px solid var(--rule-strong);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 18px 0;
}
.nb-margin::after {
/* vertical red rule — like a real notebook margin */
content: '';
position: absolute;
right: 12px; top: 0; bottom: 0;
width: 1.5px;
background: var(--accent);
opacity: 0.55;
}
.nb-margin-page {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
color: var(--ink-3);
writing-mode: vertical-rl;
transform: rotate(180deg);
text-transform: uppercase;
margin-top: 12px;
}
.nb-margin-num {
font-family: var(--hand);
font-size: 22px;
color: var(--ink-2);
margin-top: auto;
margin-bottom: 8px;
transform: rotate(-4deg);
}
/* main page */
.nb-page {
flex: 1;
min-width: 0;
padding: 72px 180px 80px 36px;
position: relative;
overflow-x: hidden;
}
/* page header — every view shares this */
.nb-page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 1.5px solid var(--rule-strong);
padding-bottom: 14px;
margin-bottom: 24px;
}
.nb-page-title {
font-family: var(--hand);
font-size: 44px;
font-weight: 600;
color: var(--ink);
line-height: 1;
letter-spacing: -0.01em;
transform: rotate(-0.4deg);
}
.nb-page-sub {
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-3);
margin-top: 6px;
}
.nb-page-meta {
font-family: var(--mono);
font-size: 10px;
text-align: right;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.14em;
line-height: 1.7;
}
/* ─── tab dividers — sticking out the right edge ─────────────── */
.nb-tabs {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 6px;
z-index: 20;
}
.nb-tab {
background: var(--paper-2);
color: var(--ink-2);
border: 1px solid var(--ink-4);
border-right: none;
border-radius: 8px 0 0 8px;
padding: 14px 14px 14px 18px;
font-family: var(--hand);
font-size: 18px;
cursor: pointer;
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 10px;
min-width: 140px;
transition: transform 0.18s, background 0.18s, color 0.18s;
box-shadow: -2px 2px 0 rgba(0,0,0,0.25);
position: relative;
}
.nb-tab:hover {
background: var(--paper-3);
color: var(--ink);
transform: translateX(-3px);
}
.nb-tab.active {
background: var(--accent);
color: #FBF9F4;
border-color: var(--accent);
transform: translateX(-6px);
}
.nb-tab-num {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
opacity: 0.6;
}
.nb-tab.active .nb-tab-num { opacity: 0.8; }
/* ─── header bar (top right of every page) ───────────────────── */
.nb-topbar {
position: fixed;
top: 16px;
right: 16px;
z-index: 15;
display: flex;
gap: 8px;
align-items: center;
background: var(--topbar-bg);
backdrop-filter: blur(8px);
border: 1px solid var(--ink-4);
border-radius: 999px;
padding: 6px 8px 6px 14px;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.nb-topbar-btn {
background: transparent;
border: 1px solid var(--ink-4);
color: var(--ink-2);
border-radius: 999px;
padding: 4px 10px;
font-family: var(--mono);
font-size: 10px;
cursor: pointer;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.nb-topbar-btn:hover { background: var(--paper-3); color: var(--ink); }
.nb-topbar-btn.primary {
background: var(--accent); color: #FBF9F4; border-color: var(--accent);
}
.nb-topbar-btn.primary:hover { background: #B84A3A; }
/* "show archived" toggle pill in the topbar */
.nb-archive-toggle {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: lowercase;
padding: 4px 10px;
border-radius: 999px;
background: var(--paper-2);
color: var(--ink-3);
border: 1px solid var(--ink-4);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nb-archive-toggle:hover {
color: var(--ink-2);
border-color: var(--ink-3);
}
.nb-archive-toggle.is-on {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent-soft);
}
/* ─── sync pill + menu ─────────────────────────────────── */
.sync-pill {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 220px;
}
.sync-pill-icon {
font-size: 9px;
line-height: 1;
display: inline-block;
}
.sync-pill-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0.08em;
text-transform: lowercase;
font-size: 10px;
}
.sync-pill-unlinked .sync-pill-icon { color: var(--ink-4); }
.sync-pill-synced { border-color: var(--green); color: var(--green); }
.sync-pill-synced .sync-pill-icon { color: var(--green); }
.sync-pill-synced:hover { background: rgba(74, 128, 98, 0.10); color: var(--green); }
.sync-pill-paused { border-color: var(--amber); color: var(--amber); }
.sync-pill-paused .sync-pill-icon { color: var(--amber); }
.sync-pill-paused:hover { background: rgba(198, 138, 46, 0.10); color: var(--amber); }
.sync-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 280px;
background: var(--paper-2);
border: 1px solid var(--ink-4);
border-radius: 6px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
padding: 6px;
z-index: 1000;
font-family: var(--hand);
}
.sync-menu-section {
display: flex;
flex-direction: column;
gap: 2px;
}
.sync-menu-divider {
height: 1px;
background: var(--ink-4);
opacity: 0.4;
margin: 6px 4px;
}
.sync-menu-heading {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
padding: 6px 10px 4px;
}
.sync-menu-warn {
color: var(--amber);
text-transform: none;
letter-spacing: 0.04em;
}
.sync-menu-item {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 6px;
background: transparent;
border: none;
border-radius: 4px;
padding: 8px 10px;
font-family: var(--hand);
font-size: 17px;
color: var(--ink);
text-align: left;
cursor: pointer;
width: 100%;
}
.sync-menu-item:hover:not(:disabled) { background: var(--paper-3); }
.sync-menu-item:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.sync-menu-item.subtle { color: var(--ink-2); font-size: 15px; }
.sync-menu-glyph {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
text-align: center;
line-height: 1;
}
.sync-menu-glyph.good { color: var(--green); font-size: 10px; }
.sync-menu-glyph.warn { color: var(--amber); }
.sync-menu-hint {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
}
.sync-menu-status {
display: grid;
grid-template-columns: 22px 1fr;
align-items: center;
gap: 6px;
padding: 6px 10px;
}
.sync-menu-filename {
font-family: var(--hand);
font-size: 17px;
color: var(--ink);
font-weight: 600;
word-break: break-all;
}
.sync-menu-substatus {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 2px;
}
.sync-menu-status.paused .sync-menu-filename { color: var(--ink-2); }
/* ─── shared content blocks ─────────────────────────────────── */
/* hand-drawn-style box (using border + slight skew) */
.nb-box {
background: var(--paper-2);
border: 1px solid var(--ink-4);
border-radius: 4px;
padding: 16px 18px;
position: relative;
}
.nb-box-label {
position: absolute;
top: -8px; left: 14px;
background: var(--paper);
padding: 0 8px;
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-3);
}
.nb-box-title {
font-family: var(--hand);
font-size: 22px;
color: var(--ink);
margin: 0 0 10px 0;
display: flex;
align-items: baseline;
gap: 10px;
transform: rotate(-0.3deg);
}
.nb-box-title-fig {
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-3);
font-weight: 400;
}
/* utility */
.nb-mono { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.nb-hand { font-family: var(--hand); }
.nb-faded { color: var(--ink-3); }
/* project dot */
.nb-dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
vertical-align: middle;
flex-shrink: 0;
box-shadow: 0 0 0 2px var(--paper);
}
/* status pills */
.nb-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--ink-4);
color: var(--ink-2);
}
.nb-pill.todo { color: var(--ink-3); }
.nb-pill.doing { color: var(--amber); border-color: #6F4D1F; background: rgba(198, 138, 46, 0.08); }
.nb-pill.done { color: var(--green); border-color: #2E5740; background: rgba(74, 128, 98, 0.08); }
.nb-pill.overdue { color: var(--red); border-color: #6B2C26; background: rgba(184, 74, 63, 0.10); }
/* progress bar — ruled paper style */
.nb-progress {
height: 4px;
background: var(--paper-3);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.nb-progress-fill {
height: 100%;
background: var(--accent);
border-radius: 2px;
}
/* checkbox — hand-drawn square */
.nb-check {
width: 16px; height: 16px;
border: 1.5px solid var(--ink-3);
border-radius: 3px;
display: inline-flex;
align-items: center; justify-content: center;
flex-shrink: 0;
font-family: var(--hand);
font-size: 18px;
line-height: 1;
color: var(--green);
transform: rotate(-2deg);
}
.nb-check.done { color: var(--green); }
.nb-check.todo::after { content: ''; }
/* hand-drawn underline */
.nb-underline {
position: relative;
display: inline-block;
}
.nb-underline::after {
content: '';
position: absolute;
left: -2px; right: -2px;
bottom: -3px;
height: 2px;
background: var(--accent);
opacity: 0.7;
border-radius: 2px;
transform: rotate(-0.5deg) scaleX(0.96);
}
/* page corner — washi tape effect */
.nb-tape {
position: absolute;
background: rgba(200, 85, 61, 0.32);
border: 0.5px solid rgba(200, 85, 61, 0.5);
width: 60px;
height: 18px;
transform: rotate(-3deg);
pointer-events: none;
}
/* small annotation arrow / handwritten note */
.nb-callout {
font-family: var(--hand);
font-size: 16px;
color: var(--accent);
transform: rotate(-2deg);
line-height: 1.2;
white-space: nowrap;
}
/* button — pen-circle style */
.nb-btn {
background: transparent;
border: 1.5px solid var(--ink-3);
border-radius: 6px;
padding: 6px 12px;
font-family: var(--hand);
font-size: 16px;
color: var(--ink);
cursor: pointer;
transition: all 0.15s;
}
.nb-btn:hover {
border-color: var(--ink);
background: var(--paper-3);
}
.nb-btn.accent {
border-color: var(--accent);
color: var(--accent);
}
.nb-btn.accent:hover {
background: var(--accent);
color: #FBF9F4;
}
/* sticky-note appearance for pinboard mode */
.nb-sticky {
background: var(--sticky-base);
color: #1F1B16;
padding: 14px 14px 12px 14px;
font-family: var(--body);
font-size: 13px;
line-height: 1.4;
box-shadow: var(--shadow-sticky);
position: relative;
border-radius: 1px;
/* base rotation set inline via --sticky-rot; hover composes additional rotation + scale */
transform: rotate(var(--sticky-rot, 0deg));
transform-origin: 50% 6%;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.nb-sticky.is-clickable:hover {
transform: rotate(calc(var(--sticky-rot, 0deg) + 0.8deg)) scale(1.035);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.18);
}
.nb-sticky.pink { background: #E8B5B0; }
.nb-sticky.green { background: #B8C9A8; }
.nb-sticky.blue { background: #A8B8C8; }
.nb-sticky.purple { background: #C5A8C8; }
.nb-sticky.amber { background: #E5C994; }
/* index card — for tasks view */
.nb-card {
background: var(--card-paper);
color: var(--card-ink);
/* base rotation set inline via --card-rot; hover composes lift + scale */
transform: rotate(var(--card-rot, 0deg));
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
padding: 14px 16px;
border-radius: 2px;
box-shadow: var(--shadow-card);
position: relative;
border-left: 3px solid var(--ink-4);
/* faint horizontal ruled lines like an index card */
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 21px,
var(--card-rule) 21px,
var(--card-rule) 22px
);
}
.nb-card-title {
font-family: var(--body);
font-size: 16px;
font-weight: 700;
color: #1F1B16;
margin: 0 0 4px 0;
line-height: 1.3;
}
.nb-card-desc {
font-size: 12px;
color: #5C5347;
line-height: 1.4;
margin: 0;
}
.nb-card-meta {
display: flex;
gap: 8px;
align-items: center;
margin-top: 10px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #5C5347;
}
.nb-card-tape {
position: absolute;
top: -8px;
left: 12px;
width: 36px; height: 14px;
background: rgba(200, 85, 61, 0.32);
border: 0.5px solid rgba(200, 85, 61, 0.45);
transform: rotate(-4deg);
pointer-events: none;
}
/* keyframes */
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
/* responsive helpers */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.flex-1 { flex: 1; min-width: 0; }
.between { justify-content: space-between; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-start { align-items: flex-start; }
/* hide scrollbar in nice way */
.nice-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.nice-scroll::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }
.nice-scroll::-webkit-scrollbar-track { background: transparent; }
/* ─── Task side panel ──────────────────────────────────────── */
.nb-panel-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.35);
z-index: 30;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s;
}
.nb-panel-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.nb-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 480px;
max-width: 90vw;
background: var(--paper);
border-left: 1px solid var(--ink-4);
box-shadow: -8px 0 30px rgba(0,0,0,0.35);
z-index: 31;
transform: translateX(110%);
transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.25, 1);
display: flex;
flex-direction: column;
}
.nb-panel.open {
transform: translateX(0);
}
/* paper grain inside panel — same texture pass as the page */
.nb-panel::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 31px,
var(--rule) 31px,
var(--rule) 32px
);
opacity: 0.6;
}
/* left margin column inside panel — mirrors notebook */
.nb-panel-content {
position: relative;
padding: 24px 28px 24px 52px;
flex: 1;
overflow-y: auto;
z-index: 1;
}
.nb-panel-content::before {
content: '';
position: absolute;
left: 36px; top: 0; bottom: 0;
width: 1.5px;
background: var(--accent);
opacity: 0.45;
}
.nb-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1.5px solid var(--rule-strong);
padding-bottom: 14px;
margin-bottom: 20px;
}
.nb-panel-eyebrow {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
.nb-panel-title {
font-family: var(--hand);
font-size: 28px;
line-height: 1.1;
color: var(--ink);
margin: 0;
}
.nb-panel-close {
background: transparent;
border: 1px solid var(--ink-4);
color: var(--ink-2);
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
font-family: var(--mono);
line-height: 1;
flex-shrink: 0;
transition: all 0.15s;
}
.nb-panel-close:hover {
background: var(--paper-3);
color: var(--ink);
}
.nb-panel-footer {
position: relative;
padding: 14px 28px;
border-top: 1.5px solid var(--rule-strong);
display: flex;
align-items: center;
gap: 10px;
background: var(--paper);
z-index: 2;
}
/* ledger row interactivity */
.nb-ledger-row {
transition: padding-left 0.15s ease, background 0.12s;
}
.nb-ledger-row:hover {
background: var(--paper-2);
padding-left: 12px !important;
}
.nb-ledger-add:hover {
background: rgba(200,85,61,0.04);
}
.nb-ledger-add:hover span[style*="dashed"] {
border-color: var(--accent) !important;
color: var(--accent) !important;
}
/* + new project sticky */
.nb-sticky-add {
transition: all 0.15s;
}
.nb-sticky-add:hover {
border-color: var(--accent) !important;
color: var(--accent) !important;
background: rgba(200,85,61,0.04) !important;
}
/* form fields styled like notebook entries */
.nb-field {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 14px;
}
.nb-field-label {
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-3);
}
.nb-input, .nb-textarea, .nb-select {
background: var(--paper-2);
border: 1px solid var(--ink-4);
border-radius: 4px;
padding: 8px 10px;
color: var(--ink);
font-family: var(--body);
font-size: 14px;
line-height: 1.4;
width: 100%;
transition: border-color 0.15s;
}
.nb-input:focus, .nb-textarea:focus, .nb-select:focus {
outline: none;
border-color: var(--accent);
}
.nb-input.title {
font-family: var(--hand);
font-size: 22px;
background: transparent;
border: none;
border-bottom: 1.5px solid var(--rule-strong);
border-radius: 0;
padding: 4px 0;
color: var(--ink);
}
.nb-input.title:focus {
border-bottom-color: var(--accent);
}
.nb-textarea {
resize: vertical;
min-height: 60px;
font-family: var(--body);
}
.nb-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.nb-segmented {
display: flex;
gap: 0;
border: 1px solid var(--ink-4);
border-radius: 6px;
overflow: hidden;
}
.nb-segmented button {
flex: 1;
padding: 7px 10px;
border: none;
background: transparent;
color: var(--ink-2);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
}
.nb-segmented button:hover {
background: var(--paper-3);
color: var(--ink);
}
.nb-segmented button.active {
background: var(--accent);
color: #FBF9F4;
}
/* subtask list */
.nb-sublist {
display: flex;
flex-direction: column;
gap: 4px;
}
.nb-sub-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
border-bottom: 1px dashed var(--rule);
}
.nb-sub-row:last-child { border-bottom: none; }
.nb-sub-check {
width: 16px; height: 16px;
border: 1.5px solid var(--ink-3);
border-radius: 3px;
background: transparent;
cursor: pointer;
font-family: var(--hand);
font-size: 18px;
line-height: 1;
color: var(--green);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
transform: rotate(-2deg);
transition: all 0.15s;
}
.nb-sub-check:hover { border-color: var(--ink); }
.nb-sub-check.done { background: var(--paper-2); border-color: var(--green); }
.nb-sub-input {
flex: 1;
background: transparent;
border: none;
color: var(--ink);
font-family: var(--body);
font-size: 14px;
outline: none;
padding: 2px 0;
}
.nb-sub-input.done { text-decoration: line-through; color: var(--ink-3); }
.nb-sub-del {
background: transparent;
border: none;
color: var(--ink-3);
cursor: pointer;
font-family: var(--mono);
font-size: 11px;
padding: 2px 6px;
opacity: 0;
transition: opacity 0.15s;
}
.nb-sub-row:hover .nb-sub-del { opacity: 1; }
.nb-sub-del:hover { color: var(--red); }
/* tag chip with delete */
.nb-tag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 4px 2px 8px;
border: 1px solid color-mix(in srgb, var(--tag-color, var(--ink-4)) 38%, transparent);
background: color-mix(in srgb, var(--tag-color, transparent) 12%, transparent);
border-radius: 3px;
font-family: var(--mono);
font-size: 10px;
color: color-mix(in srgb, var(--tag-color, var(--ink-2)) 75%, var(--ink));
}
.nb-tag-chip button {
background: transparent;
border: none;
color: var(--ink-3);
cursor: pointer;
padding: 0 4px;
font-size: 12px;
line-height: 1;
}
.nb-tag-chip button:hover { color: var(--red); }
/* tag suggestion row — inline existing tags below the input */
.nb-tag-suggest-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
margin-top: 6px;
}
.nb-tag-suggest-label {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-right: 4px;
}
.nb-tag-suggest-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--mono);
font-size: 10px;
padding: 2px 8px;
border-radius: 999px;
background: transparent;
color: color-mix(in srgb, var(--tag-color, var(--ink-2)) 65%, var(--ink-2));
border: 1px dashed color-mix(in srgb, var(--tag-color, var(--ink-4)) 50%, var(--ink-4));
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, border-style 0.15s;
}
.nb-tag-suggest-chip:hover {
background: color-mix(in srgb, var(--tag-color, var(--ink-3)) 14%, var(--paper-3));
color: color-mix(in srgb, var(--tag-color, var(--ink)) 70%, var(--ink));
border-style: solid;
border-color: color-mix(in srgb, var(--tag-color, var(--ink-3)) 60%, var(--ink-3));
}
.nb-tag-suggest-chip .count {
color: var(--ink-3);
font-size: 9px;
}
/* blocker chips + "blocked" pill */
.nb-blocker-list {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 8px;
}
.nb-blocker-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: var(--paper-2);
border: 1px solid var(--ink-4);
border-radius: 4px;
font-size: 12px;
}
.nb-blocker-chip.done {
background: color-mix(in srgb, var(--green) 10%, var(--paper-2));
border-color: color-mix(in srgb, var(--green) 32%, var(--ink-4));
}
.nb-blocker-status {
flex-shrink: 0;
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 6px;
border-radius: 3px;
background: var(--ink-4);
color: var(--ink-2);
}
.nb-blocker-status.status-doing { background: var(--amber); color: #1F1B16; }
.nb-blocker-status.status-done { background: var(--green); color: white; }
.nb-blocker-status.status-note { background: var(--steel); color: white; }
button.nb-blocker-status { border: none; cursor: pointer; }
.nb-blocker-title {
flex: 1;
min-width: 0;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nb-blocker-chip.done .nb-blocker-title {
color: var(--ink-3);
text-decoration: line-through;
text-decoration-color: var(--ink-4);
}
.nb-blocker-proj {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
flex-shrink: 0;
}
.nb-blocker-remove {
background: transparent;
border: none;
color: var(--ink-3);
cursor: pointer;
padding: 0 4px;
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
.nb-blocker-remove:hover { color: var(--red); }
.nb-blocker-error {
margin-top: 6px;
font-family: var(--mono);
font-size: 10px;
color: var(--red);
letter-spacing: 0.05em;
}
/* the small "blocked" pill shown on cards/rows */
.nb-blocked-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--amber) 18%, transparent);
color: var(--amber);
border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
}
/* the "archived" pill — same shape as blocked, lower-key color.
Values bumped so the chip stays legible under .is-archived (opacity 0.45). */
.nb-archived-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--ink-3) 22%, transparent);
color: var(--ink-2);
border: 1px solid color-mix(in srgb, var(--ink-3) 50%, transparent);
}
/* faded archived treatment — applied to cards, pegcards, compact rows,
ledger rows, pinboard cards, calendar chips. opacity + dashed border. */
.is-archived {
opacity: 0.45;
border-style: dashed;
}
/* archived cards still respond to hover lift, but a touch less */
.nb-card.is-archived:hover,
.nb-pegcard.is-archived:hover {
opacity: 0.6;
}
/* search match highlight */
mark.nb-search-hit {
background: rgba(198, 138, 46, 0.32);
color: inherit;
padding: 0 1px;
border-radius: 2px;
border-bottom: 1px solid var(--amber);
}
/* keyboard shortcut help overlay */
.nb-help-overlay {
position: fixed;
inset: 0;
background: rgba(20, 14, 8, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
animation: nb-help-fade-in 0.18s ease-out;
}
@keyframes nb-help-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.nb-help-modal {
background: var(--paper);
border: 1px solid var(--ink-4);
border-radius: 6px;
width: 100%;
max-width: 520px;
box-shadow: 0 10px 36px rgba(0,0,0,0.5);
padding: 22px 26px 24px;
}
.nb-help-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--rule);
}
.nb-help-close {
background: transparent;
border: 1px solid var(--ink-4);
border-radius: 4px;
width: 28px;
height: 28px;
color: var(--ink-2);
cursor: pointer;
font-size: 14px;
}
.nb-help-close:hover { color: var(--ink); border-color: var(--ink-3); }
.nb-help-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 24px;
}
.nb-help-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px dashed var(--rule);
font-size: 13px;
color: var(--ink);
font-family: var(--body);
}
.nb-help-row kbd {
font-family: var(--mono);
background: var(--paper-2);
color: var(--ink);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid var(--ink-4);
border-bottom-width: 2px;
font-size: 11px;
min-width: 22px;
text-align: center;
}
@media (max-width: 540px) {
.nb-help-grid { grid-template-columns: 1fr; }
}
/* action buttons */
.nb-act {
background: transparent;
border: 1px solid var(--ink-4);
border-radius: 6px;
padding: 7px 14px;
color: var(--ink);
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.15s;
}
.nb-act:hover { background: var(--paper-3); }
.nb-act.primary {
background: var(--accent);
color: #FBF9F4;
border-color: var(--accent);
}
.nb-act.primary:hover { background: #B84A35; border-color: #B84A35; }
.nb-act.danger {
border-color: var(--red);
color: var(--red);
}
.nb-act.danger:hover {
background: var(--red);
color: #FBF9F4;
}
/* clickable feel for cards */
.is-clickable {
cursor: pointer;
transition: transform 0.1s, box-shadow 0.15s;
}
.is-clickable:hover {
transform: translateY(-1px);
}
.is-clickable:active {
transform: translateY(0);
}
/* drop indicator on board columns */
.nb-drop-indicator {
height: 2px;
background: var(--accent);
border-radius: 1px;
margin: 4px 0;
opacity: 0;
transition: opacity 0.1s;
}
.nb-drop-indicator.show {
opacity: 1;
}
/* tick-to-done circle on index cards */
.nb-card {
position: relative;
}
.nb-card.is-clickable:hover {
transform: rotate(calc(var(--card-rot, 0deg) + 0.6deg)) translateY(-3px) scale(1.02);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.14);
}
/* pegboard cards — pinned by a peg at top-left, pull forward on hover */
.nb-pegcard {
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}
.nb-pegcard:hover {
transform: rotate(0.5deg) scale(1.02);
transform-origin: 8px 0;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.18);
border-color: var(--ink-3) !important;
z-index: 1;
}
/* compact-mode board rows — indent on hover, like ledger rows */
.nb-compactrow {
transition: padding-left 0.15s ease, background 0.15s ease;
}
.nb-compactrow:hover {
padding-left: 14px !important;
background: var(--paper-3) !important;
}
.nb-card-tick {
position: absolute;
top: 10px;
left: 10px;
width: 22px; height: 22px;
border-radius: 50%;
border: 1.5px solid var(--ink-4);
background: var(--paper);
color: transparent;
cursor: pointer;
padding: 0;
z-index: 3;
transition: all 0.15s, color 0.1s;
display: flex; align-items: center; justify-content: center;
}
.nb-card-tick:hover {
border-color: #4A8062;
background: rgba(74, 128, 98, 0.12);
color: #4A8062;
transform: scale(1.08);
}
.nb-card-tick-mark {
font-family: var(--hand);
font-size: 16px;
line-height: 1;
font-weight: 700;
}
/* push title right when tick is present */
.nb-card-tick + div + .nb-card-title,
.nb-card .nb-card-tick ~ .nb-card-title {
padding-left: 28px;
}
/* fly-to-pile animation */
.nb-card.is-flying {
pointer-events: none;
animation: nb-fly-to-pile 0.48s cubic-bezier(0.55, 0.06, 0.68, 0.99) forwards;
z-index: 50;
}
@keyframes nb-fly-to-pile {
0% { transform: rotate(0deg) translate(0, 0) scale(1); opacity: 1; }
35% { transform: rotate(-8deg) translate(0, -12px) scale(1.04); opacity: 1; }
100% { transform: rotate(20deg) translate(80px, 600px) scale(0.18); opacity: 0; }
}
/* ─── Done pile ───────────────────────────────────────────────── */
.nb-pile {
position: relative;
display: flex;
align-items: center;
gap: 28px;
padding: 20px 28px 24px;
margin-top: 32px;
border-top: 2px dashed var(--rule-strong);
user-select: none;
}
.nb-pile.is-clickable { cursor: pointer; }
.nb-pile.is-clickable:hover .nb-pile-stack { transform: translateY(-3px) rotate(-0.4deg); }
.nb-pile.is-clickable:hover .nb-pile-label-text { color: var(--accent); }
.nb-pile .nb-pile-stack { transition: transform 0.18s ease-out; }
.nb-pile-stack {
position: relative;
width: 200px;
height: 130px;
flex-shrink: 0;
}
.nb-pile-layer {
position: absolute;
top: 6px;
left: 0;
right: 0;
height: 100px;
width: 180px;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(60, 40, 20, 0.16),
0 0.5px 1px rgba(60, 40, 20, 0.18);
transform-origin: 50% 90%;
padding: 12px 14px 10px;
}
.nb-pile-top-content {
font-family: var(--body);
color: #1F1B16;
overflow: hidden;
}
.nb-pile-top-title {
font-family: var(--hand);
font-size: 18px;
line-height: 1.15;
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #1F1B16;
}
/* empty state */
.nb-pile.is-empty { cursor: default; }
.nb-pile-empty {
position: relative;
width: 180px;
height: 100px;
margin-top: 6px;
}
.nb-pile-empty-frame {
position: absolute; inset: 0;
border: 1.5px dashed var(--ink-4);
border-radius: 2px;
background: transparent;
}
.nb-pile-empty-text {
position: absolute; inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 12px;
}
.nb-pile-label {
display: flex;
align-items: center;
gap: 16px;
}
.nb-pile-label-count {
font-family: var(--hand);
font-size: 56px;
line-height: 1;
color: var(--ink);
font-weight: 600;
letter-spacing: -0.02em;
}
.nb-pile-label-text {
display: flex;
flex-direction: column;
gap: 1px;
transition: color 0.15s;
}
/* ─── MiniPile (board done column) ─────────────────────────── */
.nb-minipile {
position: relative;
background: transparent;
border: none;
padding: 12px 10px 10px;
cursor: default;
display: flex;
flex-direction: column;
align-items: stretch;
width: 156px;
flex-shrink: 0;
font: inherit;
color: inherit;
border-radius: 6px;
transition: background 0.15s;
}
.nb-minipile.is-clickable { cursor: pointer; }
.nb-minipile.is-clickable:hover { background: var(--paper-2); }
.nb-minipile.is-clickable:hover .nb-minipile-stack { transform: translateY(-3px) rotate(-0.4deg); }
.nb-minipile-stack {
position: relative;
width: 136px;
height: 86px;
margin: 0 auto;
transition: transform 0.18s ease-out;
}
.nb-minipile-layer {
position: absolute;
top: 0; left: 6px;
width: 124px; height: 76px;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(60,40,20,0.20),
0 0.5px 1px rgba(60,40,20,0.15);
transform-origin: 50% 90%;
}
.nb-minipile-empty {
width: 124px; height: 76px;
border: 1.5px dashed var(--ink-4);
border-radius: 2px;
margin: 0 auto;
}
.nb-minipile-top-content {
position: absolute;
inset: 8px 8px 6px 8px;
display: flex;
align-items: flex-start;
overflow: hidden;
}
.nb-minipile-top-title {
font-family: var(--hand);
font-size: 14px;
line-height: 1.15;
color: #2A2218;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nb-minipile-foot {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 0 2px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--ink-2);
}
.nb-minipile-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: lowercase;
}
.nb-minipile-count {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--ink);
flex-shrink: 0;
}
/* ─── Done pile overlay ─────────────────────────────────────── */
.nb-overlay {
position: fixed; inset: 0;
background: rgba(20, 14, 8, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 0.32s ease;
display: flex;
align-items: stretch;
justify-content: center;
padding: 0;
}
[data-theme="light"] .nb-overlay {
background: rgba(60, 45, 30, 0.45);
}
.nb-overlay.open {
opacity: 1;
pointer-events: auto;
}
.nb-overlay.closing {
opacity: 0;
}
.nb-overlay-inner {
position: relative;
width: 100%;
max-width: 1200px;
margin: 24px;
background: var(--paper);
border-radius: 4px;
box-shadow: 0 18px 40px rgba(0,0,0,0.4),
0 4px 10px rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--rule-strong);
}
.nb-overlay-inner::before {
/* paper grain */
content: '';
position: absolute; inset: 0;
background-image: var(--grain);
background-size: 280px 280px;
mix-blend-mode: var(--grain-blend);
opacity: var(--grain-opacity);
pointer-events: none;
z-index: 0;
}
.nb-overlay-header {
position: relative;
z-index: 1;
padding: 24px 32px 18px;
border-bottom: 1px solid var(--rule);
display: flex;
align-items: flex-start;
gap: 16px;
}
.nb-overlay-close {
background: transparent;
border: 1px solid var(--ink-4);
color: var(--ink-2);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
flex-shrink: 0;
transition: all 0.15s;
}
.nb-overlay-close:hover {
background: var(--paper-3);
color: var(--ink);
}
.nb-overlay-grid {
position: relative;
z-index: 1;
flex: 1;
overflow-y: auto;
padding: 28px 32px 200px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 22px;
align-content: start;
}
.nb-overlay-note {
position: relative;
padding: 14px 14px 12px;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(60,40,20,0.18),
0 1px 2px rgba(60,40,20,0.14);
min-height: 130px;
display: flex;
flex-direction: column;
gap: 6px;
transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1),
opacity 0.4s ease-out;
cursor: default;
}
.nb-overlay-note:hover {
transform: translateY(-3px) rotate(0deg) scale(1.02) !important;
z-index: 5;
box-shadow: 0 8px 16px rgba(60,40,20,0.25),
0 2px 4px rgba(60,40,20,0.18);
}
.nb-overlay-note-pin {
position: absolute;
top: -4px; left: 14px;
width: 9px; height: 9px;
border-radius: 50%;
background: #8B6F47;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.nb-overlay-note-meta {
display: flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
margin-top: 2px;
}
.nb-overlay-note-title {
font-family: var(--body);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: #1F1B16;
text-decoration: line-through;
text-decoration-color: rgba(31,27,22,0.3);
}
.nb-overlay-note-desc {
font-family: var(--body);
font-size: 11px;
color: #5C5347;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nb-overlay-note-foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 6px;
border-top: 1px dashed rgba(31,27,22,0.2);
}
.nb-overlay-uncheck {
position: absolute;
bottom: 8px; right: 8px;
background: var(--paper);
border: 1px solid var(--accent);
color: var(--accent);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 3px;
cursor: pointer;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.18s, transform 0.18s, background 0.15s;
z-index: 2;
}
.nb-overlay-note:hover .nb-overlay-uncheck {
opacity: 1;
transform: translateY(0);
}
.nb-overlay-uncheck:hover {
background: var(--accent);
color: #FBF9F4;
}
/* anchor pile peeking up from the bottom — visual continuity */
.nb-overlay-anchor {
position: absolute;
left: 50%;
bottom: -32px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
}
.nb-overlay-anchor-stack {
position: relative;
width: 180px;
height: 80px;
}
.nb-overlay-anchor-layer {
position: absolute;
bottom: 0;
left: 0;
width: 180px;
height: 80px;
border-radius: 2px;
box-shadow: 0 -2px 4px rgba(60, 40, 20, 0.15);
transform-origin: 50% 100%;
}
/* ─── people: avatars, assignee picker, people menu ─────────────── */
.nb-avatar {
--av-color: var(--ink-3);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
border-radius: 50%;
background: var(--av-color);
color: #FBF9F4;
font-family: var(--mono);
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
text-transform: uppercase;
box-shadow: 0 0 0 1.5px var(--paper-2);
user-select: none;
}
.nb-avatar-more { background: var(--ink-4); color: var(--ink); }
.nb-avatar-online {
position: absolute;
right: -1px; bottom: -1px;
width: 30%; height: 30%;
min-width: 6px; min-height: 6px;
border-radius: 50%;
background: #5FB37F;
box-shadow: 0 0 0 1.5px var(--paper-2);
}
.nb-avatar-stack { display: inline-flex; align-items: center; flex: none; }
.nb-avatar-stack .nb-avatar + .nb-avatar { margin-left: -5px; }
/* on light card stock the ring should match the card */
.nb-card .nb-avatar { box-shadow: 0 0 0 1.5px var(--card-paper); }
.nb-assignee-row { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-assignee-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 3px;
border-radius: 999px;
border: 1px solid var(--ink-4);
background: transparent;
color: var(--ink-2);
font-family: var(--body);
font-size: 13px;
cursor: pointer;
opacity: 0.7;
transition: all 0.15s;
}
.nb-assignee-chip:hover { opacity: 1; border-color: var(--ink-3); }
.nb-assignee-chip.is-on {
opacity: 1;
color: var(--ink);
border-color: var(--av-color);
background: color-mix(in srgb, var(--av-color) 18%, transparent);
}
.nb-people-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; text-transform: none; letter-spacing: 0.04em; }
.nb-people-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-people-btn-filter { color: var(--accent); white-space: nowrap; }
.nb-people-btn.needs-me { border-color: var(--amber); color: var(--amber); }
.nb-people-btn.is-filtered { border-color: var(--accent); }
.nb-people-menu { min-width: 300px; }
.nb-people-menu .sync-menu-heading { padding: 6px 10px 4px; }
.sync-menu-item.is-current { background: var(--paper-3); }
.nb-people-empty { font-family: var(--hand); font-size: 16px; color: var(--ink-3); padding: 4px 10px; }
.nb-people-filter-grid { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 8px 6px; }
.nb-filter-chip {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
padding: 3px 9px; border-radius: 999px;
border: 1px solid var(--ink-4); background: transparent; color: var(--ink-2);
cursor: pointer;
}
.nb-filter-chip:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.nb-filter-chip.is-on { background: var(--accent); border-color: var(--accent); color: #FBF9F4; }
.nb-filter-chip:disabled { opacity: 0.35; cursor: default; }
.nb-conn {
font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: lowercase;
color: var(--ink-3); white-space: nowrap;
}
.nb-conn-live { color: var(--green); }
.nb-conn-offline { color: var(--amber); }
.nb-conn-local { color: var(--ink-4); }
.nb-conflict-note {
margin: 0 0 14px;
padding: 8px 12px;
border-left: 3px solid var(--amber);
background: rgba(198, 138, 46, 0.10);
color: var(--ink);
font-family: var(--body);
font-size: 13px;
border-radius: 4px;
}
.nb-roster { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
/* two lines per person: name + remove on top; colour, admin, PIN, open count underneath (wraps) */
.nb-roster-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 22px;
grid-template-areas:
"av name del"
". meta meta";
align-items: center;
gap: 6px 10px;
padding: 8px 0;
border-bottom: 1px dashed var(--rule-strong);
}
.nb-roster-row:last-child { border-bottom: none; }
.nb-roster-row > .nb-avatar { grid-area: av; }
.nb-roster-row > .nb-input { grid-area: name; min-width: 0; }
.nb-roster-row > .nb-blocker-remove { grid-area: del; }
.nb-roster-meta { grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.nb-roster-swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.nb-roster-pinstate { font-size: 9px; color: var(--ink-3); white-space: nowrap; }
.nb-swatch {
width: 14px; height: 14px; border-radius: 50%;
border: 2px solid transparent; cursor: pointer; padding: 0;
}
.nb-swatch.is-on { border-color: var(--ink); }
.nb-roster-count { font-size: 9px; color: var(--ink-3); white-space: nowrap; text-align: right; }
/* ─── display mode (wall / TV) ──────────────────────────────────── */
.dm-root {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--ink);
/* everything below is sized in em, so it scales with the screen */
font-size: clamp(13px, 1.05vw, 30px);
padding: 1.4em 2em 1.6em;
overflow: hidden;
}
.dm-root.is-idle { cursor: none; }
.dm-header { display: flex; align-items: center; gap: 2em; }
.dm-brand { display: flex; align-items: baseline; gap: 0.7em; flex: 1; min-width: 0; }
.dm-brand .nb-dot { width: 0.8em; height: 0.8em; align-self: center; }
.dm-brand-name { font-family: var(--hand); font-size: 2em; color: var(--ink-2); }
.dm-page-label {
font-family: var(--hand); font-size: 3.2em; font-weight: 600; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
/* Caveat glyphs overhang their box; pad so overflow:hidden doesn't shave them */
padding: 0 0.2em 0.05em 0.05em;
}
.dm-dots { display: flex; gap: 0.5em; }
.dm-dot {
width: 0.7em; height: 0.7em; border-radius: 50%; padding: 0;
border: 1.5px solid var(--ink-3); background: transparent; cursor: pointer;
}
.dm-dot.is-on { background: var(--accent); border-color: var(--accent); }
.dm-clock { text-align: right; flex: 1; }
.dm-time { font-family: var(--mono); font-size: 2.6em; font-weight: 500; line-height: 1; letter-spacing: 0.02em; }
.dm-date { font-family: var(--mono); font-size: 0.75em; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 0.4em; }
.dm-date .nb-conn { font-size: 1em; }
.dm-progress { height: 2px; background: var(--rule-strong); margin: 0.9em 0 1.3em; }
.dm-progress > div { height: 100%; background: var(--accent); transition: width 0.25s linear; }
.dm-main { flex: 1; min-height: 0; animation: dm-in 0.5s ease-out; }
@keyframes dm-in { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
.dm-empty {
height: 100%; display: flex; align-items: center; justify-content: center; gap: 0.4em;
font-family: var(--hand); font-size: 3em; color: var(--ink-2);
}
/* people lanes */
.dm-lanes {
display: grid;
grid-template-columns: repeat(var(--lanes), minmax(0, 1fr));
gap: 1.4em;
height: 100%;
}
.dm-lane {
--lane: var(--ink-3);
display: flex; flex-direction: column; gap: 0.6em;
min-width: 0; overflow: hidden;
border-top: 4px solid var(--lane);
background: var(--paper-2);
border-radius: 0 0 8px 8px;
padding: 1em;
}
.dm-lane-head { display: flex; align-items: center; gap: 0.8em; margin-bottom: 0.3em; }
.dm-lane-glyph {
width: 44px; height: 44px; border-radius: 50%; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border: 2px dashed var(--lane); color: var(--lane); font-family: var(--hand); font-size: 1.6em;
}
.dm-lane-name { font-family: var(--hand); font-size: 2.1em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0.2em; }
.dm-lane-sub { font-family: var(--mono); font-size: 0.7em; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.3em; }
.dm-lane-section {
font-family: var(--mono); font-size: 0.68em; color: var(--ink-3);
text-transform: uppercase; letter-spacing: 0.16em;
border-bottom: 1px dashed var(--rule-strong); padding-bottom: 0.3em; margin-top: 0.4em;
}
.dm-lane-idle { font-family: var(--hand); font-size: 1.3em; color: var(--ink-4); padding: 0.3em 0; }
.dm-more { font-family: var(--mono); font-size: 0.7em; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
/* task tile */
.dm-task {
--proj: var(--ink-4);
background: var(--paper);
border: 1px solid var(--rule-strong);
border-left: 4px solid var(--proj);
border-radius: 5px;
padding: 0.45em 0.7em;
}
.dm-task.is-big { padding: 0.7em 0.9em; background: var(--paper-3); }
.dm-task.is-overdue { border-color: var(--red); border-left-color: var(--red); }
.dm-task-title { font-family: var(--body); font-size: 1em; line-height: 1.3; }
.dm-task.is-big .dm-task-title { font-size: 1.25em; }
.dm-task-meta {
display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap;
margin-top: 0.35em;
font-family: var(--mono); font-size: 0.66em; color: var(--ink-3);
letter-spacing: 0.08em; text-transform: uppercase;
}
.dm-task-proj { display: inline-flex; align-items: center; gap: 0.4em; min-width: 0; }
.dm-task-proj .nb-dot { width: 0.8em; height: 0.8em; box-shadow: none; }
.dm-red { color: var(--red); font-weight: 600; }
.dm-high { color: var(--accent); font-weight: 600; }
.dm-subbar {
position: relative; height: 1.1em; margin-top: 0.5em;
background: var(--rule); border-radius: 999px; overflow: hidden;
}
.dm-subbar > div { height: 100%; background: var(--proj); opacity: 0.6; }
.dm-subbar > span {
position: absolute; right: 0.6em; top: 50%; transform: translateY(-50%);
font-family: var(--mono); font-size: 0.6em; color: var(--ink-2);
}
.dm-waiting { font-family: var(--body); font-size: 0.8em; color: var(--ink-3); padding: 0.2em 0 0 0.9em; }
/* status / attention columns */
.dm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; height: 100%; }
.dm-col { display: flex; flex-direction: column; gap: 0.55em; min-width: 0; overflow: hidden; }
.dm-col-head {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--hand); font-size: 2.4em; line-height: 1;
border-bottom: 2px solid currentColor; padding-bottom: 0.2em; margin-bottom: 0.2em;
}
.dm-col-count { font-family: var(--mono); font-size: 0.6em; }
/* projects */
.dm-projects { display: flex; flex-direction: column; gap: 1.1em; }
.dm-proj {
display: grid;
grid-template-columns: minmax(10em, 1.3fr) 3fr minmax(14em, 1.2fr) minmax(5em, auto);
align-items: center; gap: 1.5em;
}
.dm-proj-name { display: flex; align-items: center; gap: 0.6em; font-family: var(--hand); font-size: 1.8em; line-height: 1.1; min-width: 0; }
.dm-proj-name .nb-dot { width: 0.5em; height: 0.5em; flex: none; box-shadow: none; }
.dm-proj-bar { display: flex; height: 1.1em; background: var(--rule); border-radius: 999px; overflow: hidden; }
.dm-proj-done { height: 100%; }
.dm-proj-doing { height: 100%; opacity: 0.35; }
.dm-proj-stats { display: flex; gap: 1em; flex-wrap: wrap; font-family: var(--mono); font-size: 0.75em; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; }
/* hover controls */
.dm-controls {
position: fixed; right: 1.5em; bottom: 1.2em;
display: flex; gap: 0.4em;
opacity: 1; transition: opacity 0.4s;
}
.dm-root.is-idle .dm-controls { opacity: 0; pointer-events: none; }
.dm-controls button {
font-family: var(--mono); font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.6em 1em; border-radius: 999px;
border: 1px solid var(--ink-4); background: var(--topbar-bg); color: var(--ink-2);
backdrop-filter: blur(8px); cursor: pointer;
}
.dm-controls button:hover { color: var(--ink); background: var(--paper-3); }
.dm-speed {
display: inline-flex; align-items: center; gap: 0.4em;
font-family: var(--mono); font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase;
padding: 0 0.4em 0 1em; border-radius: 999px;
border: 1px solid var(--ink-4); background: var(--topbar-bg); color: var(--ink-2);
backdrop-filter: blur(8px);
}
.dm-speed select {
font: inherit; letter-spacing: inherit; text-transform: inherit;
color: inherit; background: transparent; border: none; padding: 0.6em 0.2em; cursor: pointer;
}
.dm-speed select option { background: var(--paper-2); color: var(--ink); }
@media (max-width: 900px) {
.dm-lanes { grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); height: auto; }
.dm-cols { grid-template-columns: 1fr; height: auto; }
.dm-root { overflow-y: auto; }
.dm-proj { grid-template-columns: 1fr; gap: 0.4em; }
}
/* ─── sign-in, PINs, read-only ──────────────────────────────────── */
.nb-fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.nb-fieldset:disabled .nb-field,
.nb-fieldset:disabled .nb-row,
.nb-fieldset:disabled .nb-roster,
.nb-fieldset:disabled > div { opacity: 0.72; }
.nb-fieldset:disabled button,
.nb-fieldset:disabled input,
.nb-fieldset:disabled select,
.nb-fieldset:disabled textarea { cursor: not-allowed; }
.nb-readonly-note { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.nb-signin-modal { max-width: 420px; }
.nb-signin-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nb-signin-person {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 14px 8px 10px;
border: 1px solid var(--ink-4); border-radius: 8px;
background: var(--paper-2); color: var(--ink);
font-family: var(--hand); font-size: 19px; cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.nb-signin-person:hover { background: var(--paper-3); border-color: var(--ink-3); }
.nb-signin-hint { font-size: 8px; color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase; }
.nb-signin-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nb-pin-input { font-family: var(--mono); font-size: 22px; letter-spacing: 0.4em; text-align: center; }
.nb-signin-error {
margin-top: 4px; padding: 7px 10px; border-left: 3px solid var(--red);
background: rgba(184, 74, 63, 0.10); color: var(--ink); font-family: var(--body); font-size: 13px; border-radius: 4px;
}
.nb-admin-toggle {
font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
padding: 3px 8px; border-radius: 999px;
border: 1px solid var(--ink-4); background: transparent; color: var(--ink-3); cursor: pointer;
}
.nb-admin-toggle.is-on { color: var(--amber); border-color: var(--amber); }
.nb-admin-toggle:disabled { cursor: not-allowed; opacity: 0.6; }
.nb-roster-pin { padding: 4px 8px; font-size: 9px; }
/* lazy-loaded view placeholder */
.nb-lazy-fallback {
display: flex; align-items: center; justify-content: center; min-height: 40vh;
font-family: var(--hand); font-size: 22px; color: var(--ink-3);
}
/* ─── raised hands ──────────────────────────────────────────────── */
.nb-hand-btn { position: relative; font-size: 13px; line-height: 1; padding: 3px 9px; filter: grayscale(0.8); }
.nb-hand-btn.has-hands { filter: none; border-color: var(--accent); }
.nb-hand-btn.is-up { filter: none; background: var(--accent-soft); border-color: var(--accent); animation: nb-hand-wave 2.4s ease-in-out infinite; }
@keyframes nb-hand-wave { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.nb-hand-count {
margin-left: 4px; font-family: var(--mono); font-size: 9px; color: var(--accent); font-weight: 600;
}
.nb-hand-menu { min-width: 300px; max-width: 340px; }
.nb-hand-form { display: flex; flex-direction: column; gap: 8px; padding: 2px 6px 6px; }
.nb-hand-text { min-height: 54px; font-size: 14px; }
.nb-hand-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; }
.nb-hand-name { font-family: var(--hand); font-size: 17px; color: var(--ink); line-height: 1.1; }
.nb-hand-when { font-size: 8px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; margin-left: 4px; }
.nb-hand-note { font-family: var(--body); font-size: 12px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
/* display: hands column + lane badge */
.dm-col-hands .dm-col-head { border-bottom-width: 3px; }
.dm-hand {
display: flex; gap: 0.8em; align-items: flex-start;
padding: 0.8em 0.9em;
background: color-mix(in srgb, var(--accent) 12%, var(--paper-2));
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
border-left: 4px solid var(--accent);
border-radius: 6px;
animation: dm-hand-pulse 2.5s ease-in-out infinite;
}
@keyframes dm-hand-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 0.35em color-mix(in srgb, var(--accent) 22%, transparent); } }
.dm-hand-name { font-family: var(--hand); font-size: 1.7em; line-height: 1; }
.dm-hand-text { font-family: var(--body); font-size: 1.1em; line-height: 1.3; margin-top: 0.25em; overflow-wrap: anywhere; }
.dm-hand-when { font-family: var(--mono); font-size: 0.65em; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.4em; }
.dm-lane-hand { font-size: 1.8em; animation: nb-hand-wave 2.4s ease-in-out infinite; }
.dm-hand-note {
font-family: var(--body); font-size: 0.95em; color: var(--ink);
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-left: 3px solid var(--accent); border-radius: 4px; padding: 0.35em 0.6em;
overflow-wrap: anywhere;
}
/* help-from picker + "asking you" */
.nb-hand-ask-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.nb-hand-ask { padding: 0; max-height: 120px; overflow-y: auto; }
.nb-hand-asks { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.nb-hand-asks.is-me { color: var(--accent); font-weight: 600; }
.nb-hand-btn.asks-me { filter: none; background: var(--accent); color: #FBF9F4; border-color: var(--accent); animation: nb-ask-pulse 1.6s ease-in-out infinite; }
.nb-hand-btn.asks-me .nb-hand-count { color: #FBF9F4; }
@keyframes nb-ask-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px var(--accent-soft); } }
.dm-hand-to { font-family: var(--mono); font-size: 0.75em; color: var(--ink-2); }
.dm-hand-asks {
display: flex; align-items: center; gap: 0.5em; margin-top: 0.4em;
font-family: var(--mono); font-size: 0.7em; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em;
}
.dm-asked-note {
display: flex; align-items: center; gap: 0.5em;
font-family: var(--body); font-size: 0.95em;
padding: 0.35em 0.6em; border-radius: 4px;
border: 1.5px dashed var(--accent); color: var(--ink);
animation: dm-hand-pulse 2.5s ease-in-out infinite;
}
/* Display mode blocked badge is red */
.dm-root .nb-blocked-pill {
background: color-mix(in srgb, var(--red) 15%, transparent);
color: var(--red);
border-color: color-mix(in srgb, var(--red) 40%, transparent);
}