/* Project Portal — the visual language, ported from the Mac app.
 *
 * Light-first: an off-white canvas, near-black serif type, soft gray panels.
 * Colour is reserved almost entirely for ghost blocks — everything else is
 * black, gray and white so the accents actually read as accents.
 *
 * Measurements here are the Swift ones, not approximations: 54px hours, a 46px
 * gutter, 13px checkboxes, 32×36 timeline chips, 190px board cards. Where a
 * number looks arbitrary it came from the source.
 *
 * The dark theme is new. The Mac app never had one, but a phone at 23:00 does,
 * so it keeps the same relationships — canvas one step behind surface, ink four
 * steps of gray, one warm accent — with the values inverted rather than the
 * design changed.
 *
 * **Naming.** `.ghost` is the schedule's ghost block and nothing else. A
 * secondary button is `.btn.quiet`. They were both called "ghost" once, and
 * because `.ghost` is absolutely positioned at `left: 56%`, every secondary
 * button in the app silently stacked on top of itself — which is what made the
 * 2FA dialog impossible to use. Don't reuse the name.
 */

:root {
    --canvas:          #f9f9f7;
    --surface:         #ffffff;
    --surface-sunken:  #f4f4f2;

    --ink:             #121212;
    --ink-secondary:   #666666;
    --ink-tertiary:    #9e9e9e;
    --ink-quaternary:  #c7c7c7;

    --hairline:        rgba(0, 0, 0, 0.08);
    --hairline-strong: rgba(0, 0, 0, 0.14);
    --shadow:          rgba(0, 0, 0, 0.06);
    --shadow-lifted:   rgba(0, 0, 0, 0.10);

    /* The one warm note. Marks now, and today in the note timeline. */
    --today:           #cd6944;
    --today-soft:      rgba(205, 105, 68, 0.12);

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-card: 18px;

    --s-xs: 4px;
    --s-sm: 8px;
    --s-md: 16px;
    --s-lg: 24px;
    --s-xl: 40px;
    --s-xxl: 64px;

    --panel-height: 560px;
    --hour-height: 54px;
    --gutter: 46px;
    /* Ghost blocks sit 28px in from where real events start, so both are
     * readable when they overlap in time. */
    --ghost-inset: 28px;

    --font-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --motion-standard: 420ms cubic-bezier(0.22, 1, 0.36, 1);
    --motion-quick:    240ms cubic-bezier(0.22, 1, 0.36, 1);
    --motion-entrance: 550ms cubic-bezier(0.16, 1, 0.3, 1);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --canvas:          #131312;
        --surface:         #1c1c1b;
        --surface-sunken:  #232322;
        --ink:             #ececea;
        --ink-secondary:   #a0a09c;
        --ink-tertiary:    #74746f;
        --ink-quaternary:  #4e4e4a;
        --hairline:        rgba(255, 255, 255, 0.10);
        --hairline-strong: rgba(255, 255, 255, 0.18);
        --shadow:          rgba(0, 0, 0, 0.40);
        --shadow-lifted:   rgba(0, 0, 0, 0.55);
        --today:           #e08760;
        --today-soft:      rgba(224, 135, 96, 0.16);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --canvas:          #131312;
    --surface:         #1c1c1b;
    --surface-sunken:  #232322;
    --ink:             #ececea;
    --ink-secondary:   #a0a09c;
    --ink-tertiary:    #74746f;
    --ink-quaternary:  #4e4e4a;
    --hairline:        rgba(255, 255, 255, 0.10);
    --hairline-strong: rgba(255, 255, 255, 0.18);
    --shadow:          rgba(0, 0, 0, 0.40);
    --shadow-lifted:   rgba(0, 0, 0, 0.55);
    --today:           #e08760;
    --today-soft:      rgba(224, 135, 96, 0.16);
    color-scheme: dark;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-serif);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}
body { min-height: 100vh; min-height: 100dvh; }

button, input, textarea, select {
    font: inherit; color: inherit; background: none; border: none; margin: 0;
}
button { cursor: pointer; }
a { color: inherit; }
::selection { background: var(--today-soft); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------- shell -- */

/* No max-width. The Mac app fills its window; capping the page at 1240px and
 * centring it left most of a wide screen empty while the board and the day
 * panes were the things that wanted the room. */
.app { padding: 0 var(--s-xl) var(--s-xxl); }

@media (max-width: 860px) { .app { padding: 0 var(--s-md) var(--s-xl); } }

.section { margin-top: var(--s-xl); }

.section-heading {
    display: flex;
    align-items: baseline;
    gap: var(--s-md);
    margin-bottom: var(--s-md);
}
.section-heading > h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}
.section-heading > .rule {
    flex: 1; height: 1px; background: var(--hairline); transform: translateY(-4px);
}
.section-heading > .trailing { flex: none; display: flex; align-items: center; gap: var(--s-xs); }

/* The little capsule buttons that sit at the end of a section heading. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-sunken);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-secondary);
    white-space: nowrap;
    transition: color var(--motion-quick);
}
.pill:hover { color: var(--ink); }
.pill svg { width: 9px; height: 9px; stroke-width: 2.4; fill: none; stroke: currentColor; }
.pill.on { color: var(--today); background: var(--today-soft); }

.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: 0 8px 8px -6px var(--shadow);
    padding: var(--s-md);
}
.card.flush { padding: 0; overflow: hidden; }

/* -------------------------------------------------------------- banner -- */

.banner {
    position: relative;
    height: 300px;
    margin: 0 calc(-1 * var(--s-xl));
    overflow: hidden;
    background: var(--surface-sunken);
}
.banner img { width: 100%; height: 130%; object-fit: cover; display: block; will-change: transform; }
.banner .tint { position: absolute; inset: 0; }
.banner::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--canvas) 100%);
    pointer-events: none;
}
.banner.project { height: 200px; }
@media (max-width: 860px) {
    .banner { height: 190px; margin: 0 calc(-1 * var(--s-md)); }
    .banner.project { height: 150px; }
}

/* ------------------------------------------------------------ greeting -- */

.greeting {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-md);
    flex-wrap: wrap;
    margin-top: var(--s-lg);
}
.greeting h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.012em;
}
.greeting .meta-line {
    display: flex; align-items: center; gap: var(--s-sm);
    font-family: var(--font-sans); font-size: 12px;
    color: var(--ink-secondary); margin-top: 7px; flex-wrap: wrap;
}
.greeting .meta-line .sep { color: var(--ink-quaternary); }
.greeting .meta-line svg { width: 15px; height: 15px; stroke: var(--ink-secondary); fill: none; stroke-width: 1.5; }
.greeting .meta-line .temp { color: var(--ink); }
.greeting .meta-line .place { color: var(--ink-tertiary); }
@media (max-width: 620px) { .greeting h1 { font-size: 27px; } }

/* ----------------------------------------------------------- day panes -- */

.day-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-md);
    height: var(--panel-height);
}
.day-grid > * { min-width: 0; min-height: 0; }

@media (max-width: 1000px) { .day-grid { grid-template-columns: 1fr; height: auto; } }

/* Below two columns, the panes become tabs.
 *
 * Stacked, they are two tall scrollers inside a scrolling page: a thumb that
 * lands on the agenda scrolls the agenda, and the task list below becomes hard
 * to reach. As true on an iPad in portrait as on a phone. */
.day-tabs { display: none; gap: var(--s-xs); margin-bottom: var(--s-sm); }
.day-tabs button {
    flex: 1; padding: 7px; border-radius: var(--r-md);
    background: var(--surface-sunken);
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    color: var(--ink-secondary);
    transition: background var(--motion-quick), color var(--motion-quick);
}
.day-tabs button.active { background: var(--ink); color: var(--surface); }

@media (max-width: 1000px) {
    .day-tabs { display: flex; }
    .day-grid { gap: 0; }
    .day-grid > * { height: 66dvh; min-height: 340px; }
    .day-grid.tabbed > .pane { display: none; }
    .day-grid.tabbed > .pane.active { display: flex; }
}

.pane {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: 0 8px 8px -6px var(--shadow);
    padding: var(--s-md);
    overflow: hidden;
}
.pane-header {
    display: flex; align-items: center; gap: var(--s-sm);
    flex: none; margin-bottom: var(--s-sm);
}
.pane-header h3 {
    margin: 0; font-family: var(--font-serif); font-size: 15px; font-weight: 500;
}
.pane-header .grow { flex: 1; }
/* `min-height: 0` is load-bearing: a flex child defaults to `min-height: auto`
 * and refuses to shrink below its content, so the scroller grows instead of
 * scrolling and pushes the add-row out of the card. */
.pane-body { flex: 1; min-height: 0; overflow-y: auto; }
@media (hover: hover) { .pane-body { overscroll-behavior: contain; } }

.pane-count { font-family: var(--font-sans); font-size: 10px; font-weight: 600; color: var(--ink-tertiary); }
.pane-done  { font-family: var(--font-sans); font-size: 10px; font-weight: 500; color: var(--ink-quaternary); }

/* ------------------------------------------------------------ schedule -- */

.sched-source { display: flex; align-items: center; gap: 5px; }
.sched-source .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none; }
.sched-source .dot.off { background: var(--ink-quaternary); }
.sched-source span {
    font-family: var(--font-sans); font-size: 10px; font-weight: 500;
    color: var(--ink-tertiary); white-space: nowrap;
}
.now-btn {
    font-family: var(--font-sans); font-size: 10px; font-weight: 600;
    color: var(--today); padding: 2px 6px; border-radius: 999px;
    background: var(--today-soft); flex: none;
}
.round-btn {
    width: 18px; height: 18px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--surface-sunken); color: var(--ink);
}
.round-btn svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.round-btn:hover { background: var(--hairline); }

/* All-day events scroll horizontally — nine of them at half width would be
 * unreadable slivers. */
.allday {
    display: flex; align-items: center; gap: var(--s-sm);
    flex: none; margin-bottom: 2px;
}
.allday > .label {
    width: calc(var(--gutter) - var(--s-sm));
    flex: none; text-align: right;
    font-family: var(--font-mono); font-size: 9px; line-height: 1.15;
    color: var(--ink-tertiary);
}
.allday > .items {
    display: flex; gap: 5px; overflow-x: auto; padding: 1px 0;
    scrollbar-width: none;
}
.allday > .items::-webkit-scrollbar { display: none; }
.allday .chip-event {
    flex: none; padding: 3px 7px; border-radius: var(--r-sm);
    background: var(--surface-sunken);
    font-family: var(--font-sans); font-size: 10.5px; font-weight: 500;
    color: var(--ink); white-space: nowrap;
}

.schedule-grid { position: relative; min-height: calc(24 * var(--hour-height)); }

.hour-row {
    position: relative; height: var(--hour-height);
    display: flex; align-items: flex-start; gap: var(--s-sm);
}
.hour-row .label {
    width: calc(var(--gutter) - var(--s-sm)); flex: none; text-align: right;
    font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary);
    transform: translateY(-5px);
}
.hour-row .line { flex: 1; height: 1px; background: var(--hairline); }

.now-line {
    position: absolute; left: 0; right: 0;
    display: flex; align-items: center;
    z-index: 10; pointer-events: none;
}
/* The pill sits in the gutter, where the hour numbers are — it replaces the
 * hour label rather than floating over the day. */
.now-line .pill {
    width: calc(var(--gutter) - var(--s-sm)); flex: none;
    display: flex; justify-content: flex-end;
}
.now-line .pill span {
    background: var(--today); color: #fff;
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    padding: 1.5px 4px; border-radius: 999px;
}
.now-line .knob {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--today); flex: none; margin-left: 10px;
}
.now-line .bar { flex: 1; height: 1.5px; background: var(--today); }

/* Real events are strictly black-and-white. A solid black rule is the entire
 * "colour" one gets — what's booked and what you merely intend are never
 * confused. */
.event {
    position: absolute;
    left: var(--gutter); right: 6px;
    display: flex; align-items: flex-start; gap: var(--s-sm);
    padding: 5px 7px;
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden; z-index: 2;
    text-align: left;
    transition: border-color var(--motion-quick), box-shadow var(--motion-quick);
}
.event:hover { border-color: var(--hairline-strong); box-shadow: 0 3px 6px -3px var(--shadow); }
.event .rule { width: 3px; align-self: stretch; border-radius: 1.5px; background: var(--ink); flex: none; }
.event .body { min-width: 0; flex: 1; }
.event .title {
    font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
    color: var(--ink); line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.event .when { font-family: var(--font-mono); font-size: 9px; color: var(--ink-secondary); }
.event .mark { flex: none; color: var(--ink-secondary); display: flex; }
.event .mark svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Ghost blocks carry their tasks' project colours. Dashed until you drop
 * something on them, which is when the border goes solid. */
.ghost {
    position: absolute;
    left: calc(var(--gutter) + var(--ghost-inset)); right: 6px;
    display: flex; align-items: flex-start; gap: 7px;
    padding: 5px 7px;
    border-radius: var(--r-md);
    overflow: hidden; z-index: 3;
    background: color-mix(in srgb, var(--block) 16%, transparent);
    border: 1px dashed color-mix(in srgb, var(--block) 55%, transparent);
    touch-action: none;
    cursor: grab;
    transition: transform var(--motion-quick), box-shadow var(--motion-quick),
                background var(--motion-quick), border-color var(--motion-quick);
}
.ghost:active { cursor: grabbing; }
.ghost.dragging { z-index: 20; transform: scale(1.015); box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--block) 30%, transparent); }
.ghost.joinable, .ghost.highlight {
    border-style: solid; border-width: 2px; padding: 4px 6px;
    border-color: color-mix(in srgb, var(--block) 95%, transparent);
    background: color-mix(in srgb, var(--block) 26%, transparent);
    transform: scale(1.02);
}
/* One segment per distinct project, so a block spanning two shows both instead
 * of collapsing to a misleading single hue. */
.ghost .rule {
    width: 3px; align-self: stretch; flex: none;
    display: flex; flex-direction: column; gap: 1px; padding: 1px 0;
}
.ghost .rule span { flex: 1; border-radius: 1.5px; }
.ghost .body { min-width: 0; flex: 1; }
.ghost .title-row { display: flex; align-items: center; gap: 4px; }
.ghost .title {
    font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ghost.complete .title { text-decoration: line-through; color: var(--ink-tertiary); }
.ghost .more {
    font-family: var(--font-sans); font-size: 9px; font-weight: 700;
    color: var(--surface); padding: 1px 4px; border-radius: 999px;
    background: color-mix(in srgb, var(--block) 85%, transparent); flex: none;
}
.ghost .when { font-family: var(--font-mono); font-size: 9px; color: var(--ink-secondary); }
.ghost ul { margin: 1px 0 0; padding: 0; list-style: none; }
.ghost li {
    display: flex; align-items: center; gap: 4px;
    font-family: var(--font-sans); font-size: 10px; color: var(--ink-secondary);
    line-height: 1.35; white-space: nowrap; overflow: hidden;
}
.ghost li i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.ghost li.done { text-decoration: line-through; color: var(--ink-quaternary); }
.ghost .close {
    flex: none; width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 10px;
    color: var(--ink-secondary); background: var(--surface);
    opacity: 0; transition: opacity var(--motion-quick);
}
.ghost:hover .close, .ghost.touch .close { opacity: 0.9; }

/* The grip is taller and always faintly visible on touch: there's no hover to
 * reveal it, and 8px is not a target a finger can find. */
.ghost .grip {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 8px; cursor: ns-resize; touch-action: none;
    display: grid; place-items: center;
}
.ghost .grip::after {
    content: ""; width: 28px; height: 3px; border-radius: 999px;
    background: var(--block); opacity: 0;
    transition: opacity var(--motion-quick);
}
.ghost:hover .grip::after { opacity: 0.7; }
@media (hover: none) {
    .ghost .grip { height: 22px; }
    .ghost .grip::after { opacity: 0.45; }
}

.drop-hint {
    position: absolute;
    left: calc(var(--gutter) + var(--ghost-inset)); right: 6px;
    border: 1.5px dashed var(--hairline-strong);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    z-index: 15; pointer-events: none; padding: 6px;
}
.drop-hint span {
    font-family: var(--font-mono); font-size: 9px; color: var(--ink);
    background: var(--surface); padding: 2px 5px; border-radius: 999px;
}

/* ----------------------------------------------------------- task list -- */

.task {
    display: flex; align-items: center; gap: var(--s-sm);
    padding: 6px 7px; border-radius: var(--r-md);
    position: relative; border: 1px solid transparent;
    transition: background var(--motion-quick);
}
.task:hover { background: var(--surface-sunken); }
.task.dragging { opacity: 0.4; }
.task.done { opacity: 0.62; }
.task.highlight {
    background: color-mix(in srgb, var(--task-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--task-color) 55%, transparent);
}
.task.drop-above::before {
    content: ""; position: absolute; left: 7px; right: 7px; top: -2px;
    height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* Square, not round — that's what the app used. */
.task .check {
    flex: none; width: 13px; height: 13px; border-radius: 4px;
    border: 1.2px solid var(--ink-quaternary);
    display: grid; place-items: center;
    transition: border-color var(--motion-quick), background var(--motion-quick);
}
.task:hover .check { border-color: var(--ink); }
.task.done .check { background: var(--ink-tertiary); border-color: var(--ink-tertiary); }
.task .check svg { width: 8px; height: 8px; stroke: var(--surface); stroke-width: 3; fill: none; opacity: 0; }
.task.done .check svg { opacity: 1; }

.task .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--task-color); }
.task.done .dot { background: var(--ink-quaternary); }

.task .name {
    flex: 1; min-width: 0;
    font-family: var(--font-serif); font-size: 12.5px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task.done .name { color: var(--ink-tertiary); text-decoration: line-through; text-decoration-color: var(--ink-quaternary); }
.task .name[contenteditable="true"] {
    outline: none; white-space: normal; text-overflow: clip;
    box-shadow: 0 1px 0 var(--ink-quaternary);
}

.task .mark { flex: none; display: flex; color: var(--ink-tertiary); }
.task .mark svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2; fill: none; }
.task .mark.lit { color: var(--task-color); }
.task .due { flex: none; font-family: var(--font-mono); font-size: 9px; color: var(--ink-tertiary); }

.task .timing {
    flex: none; font-family: var(--font-sans); font-size: 9px; font-weight: 500;
    color: var(--ink-secondary); padding: 2px 5px; border-radius: 999px;
    background: var(--surface-sunken); white-space: nowrap;
}
.task.done .timing { color: var(--ink-quaternary); }

.task .kill {
    flex: none; width: 14px; height: 14px; display: grid; place-items: center;
    font-size: 9px; color: transparent; transition: color var(--motion-quick);
}
.task:hover .kill { color: var(--ink-secondary); }
@media (hover: none) { .task .kill { color: var(--ink-quaternary); } }

.divider {
    display: flex; align-items: center; gap: var(--s-sm);
    padding: var(--s-sm) 7px 2px;
    font-family: var(--font-sans); font-size: 9px; font-weight: 500;
    color: var(--ink-quaternary);
}
.divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* The add row: a project dot that opens a picker, the field, a timing menu,
 * and a return key. */
.task-add {
    display: flex; align-items: center; gap: var(--s-sm);
    flex: none; padding-top: var(--s-sm); margin-top: 2px;
    border-top: 1px solid var(--hairline);
}
.task-add .dot-btn { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.task-add input {
    flex: 1; min-width: 0; outline: none;
    font-family: var(--font-serif); font-size: 12.5px;
}
.task-add input::placeholder { color: var(--ink-quaternary); }
.task-add .menu-btn {
    flex: none; font-family: var(--font-sans); font-size: 10px; font-weight: 500;
    color: var(--ink-secondary); white-space: nowrap;
}
.task-add .send { flex: none; width: 16px; height: 16px; display: grid; place-items: center; color: var(--ink-quaternary); }
.task-add .send.ready { color: var(--ink); }
.task-add .send svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; fill: none; }

.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; height: 100%; padding: var(--s-lg) var(--s-md); text-align: center;
}
.empty-state svg { width: 18px; height: 18px; stroke: var(--ink-quaternary); stroke-width: 1.4; fill: none; }
.empty-state .lead { font-family: var(--font-serif); font-size: 12px; color: var(--ink-tertiary); }
.empty-state .hint { font-family: var(--font-sans); font-size: 10px; color: var(--ink-quaternary); line-height: 1.5; }

/* -------------------------------------------------------------- notes -- */

.note-card { padding: var(--s-md); }
.note-head { display: flex; align-items: baseline; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.note-head h3 { margin: 0; font-family: var(--font-serif); font-size: 15px; font-weight: 500; }
.note-head .rel { font-family: var(--font-sans); font-size: 11px; color: var(--ink-tertiary); }
.note-head .grow { flex: 1; }
.note-head .save { font-family: var(--font-sans); font-size: 10px; color: var(--ink-tertiary); }

/* The date timeline: oldest left, newest right, like the calendar reads. */
.note-timeline {
    display: flex; gap: 6px; overflow-x: auto;
    padding: 2px 1px var(--s-sm); scrollbar-width: none;
}
.note-timeline::-webkit-scrollbar { display: none; }
.note-timeline button {
    flex: none; width: 32px; height: 36px; border-radius: var(--r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border: 1px solid var(--hairline); background: transparent;
    transition: background var(--motion-quick);
}
.note-timeline button:hover { background: var(--surface-sunken); }
.note-timeline button .wd { font-family: var(--font-sans); font-size: 8px; font-weight: 500; color: var(--ink-tertiary); }
.note-timeline button .dy { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.note-timeline button .has { width: 3px; height: 3px; border-radius: 50%; background: transparent; }
.note-timeline button.has-note .has { background: var(--ink); }

.note-timeline button.today { border-color: color-mix(in srgb, var(--today) 55%, transparent); border-width: 1.2px; background: var(--today-soft); }
.note-timeline button.today .wd { color: color-mix(in srgb, var(--today) 80%, transparent); }
.note-timeline button.today .dy { color: var(--today); }
.note-timeline button.today.has-note .has { background: var(--today); }

.note-timeline button.sel { background: var(--ink); border-color: transparent; }
.note-timeline button.sel .wd { color: color-mix(in srgb, var(--surface) 70%, transparent); }
.note-timeline button.sel .dy { color: var(--surface); }
.note-timeline button.sel.has-note .has { background: color-mix(in srgb, var(--surface) 85%, transparent); }
.note-timeline button.sel.today { background: var(--today); }
.note-timeline button.sel.today .dy, .note-timeline button.sel.today .wd { color: #fff; }

.note-frame {
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface-sunken) 60%, transparent);
    border: 1px solid var(--hairline);
    overflow: hidden;
    transition: border-color var(--motion-quick);
}
.note-frame.focused { border-color: var(--hairline-strong); }

.note-toolbar {
    display: flex; align-items: center; gap: 2px;
    padding: 5px var(--s-sm); border-bottom: 1px solid var(--hairline);
    overflow-x: auto; scrollbar-width: none; flex: none;
}
.note-toolbar::-webkit-scrollbar { display: none; }
.note-toolbar button {
    flex: none; min-width: 26px; height: 24px; padding: 0 6px; border-radius: var(--r-sm);
    font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--ink-secondary);
}
.note-toolbar button:hover { background: var(--surface-sunken); color: var(--ink); }
.note-toolbar button.active { background: var(--ink); color: var(--surface); }
.note-toolbar .sep { width: 1px; height: 14px; background: var(--hairline); margin: 0 4px; flex: none; }
.note-toolbar .grow { flex: 1; }

.note-editor {
    font-family: var(--font-serif); font-size: 14.5px; line-height: 1.6;
    outline: none; white-space: pre-wrap; word-break: break-word;
    caret-color: var(--ink); padding: var(--s-md);
}
.note-editor:empty::before {
    content: attr(data-placeholder); color: var(--ink-quaternary);
}
/* Markdown is styled live, but the syntax markers stay visible, just dimmed —
 * the editor and the file must agree about what you're looking at. */
.note-editor .md-marker { color: var(--ink-quaternary); font-weight: 400; }
.note-editor .md-h1 { font-size: 1.5em; font-weight: 600; }
.note-editor .md-h2 { font-size: 1.28em; font-weight: 600; }
.note-editor .md-h3 { font-size: 1.12em; font-weight: 600; }
.note-editor .md-bold { font-weight: 700; }
.note-editor .md-italic { font-style: italic; }
.note-editor .md-strike { text-decoration: line-through; }
.note-editor .md-code {
    font-family: var(--font-mono); font-size: 0.86em;
    background: var(--surface-sunken); padding: 1px 3px; border-radius: 3px;
}
.note-editor .md-quote { color: var(--ink-secondary); font-style: italic; }
.note-editor .md-bullet { color: var(--ink-tertiary); }

/* ------------------------------------------------------------ drawing -- */

.note-page { position: relative; }
.note-canvas { position: absolute; inset: 0; touch-action: none; z-index: 2; pointer-events: none; }
.note-page.drawing .note-canvas { pointer-events: auto; }
/* A faint dot grid — a mode indicator as much as a guide. */
.note-page.drawing {
    background-image: radial-gradient(var(--ink-quaternary) 0.9px, transparent 0.9px);
    background-size: 18px 18px; background-position: 8px 8px;
}
.note-page.drawing .note-editor { pointer-events: none; user-select: none; }

.pen-bar {
    position: absolute; right: var(--s-sm); bottom: var(--s-sm);
    display: flex; align-items: center; gap: var(--s-xs);
    padding: 5px; background: var(--surface);
    border: 1px solid var(--hairline); border-radius: 999px;
    box-shadow: 0 6px 16px -6px var(--shadow-lifted); z-index: 4;
}
.pen-bar button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-secondary); }
.pen-bar button:hover { background: var(--surface-sunken); }
.pen-bar button.active { background: var(--ink); color: var(--surface); }
.pen-bar .sep { width: 1px; height: 16px; background: var(--hairline); flex: none; }
.pen-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; }
.pen-swatch.active { border-color: var(--ink); }
.pen-width i { display: block; border-radius: 999px; background: currentColor; }
.pen-note { font-family: var(--font-sans); font-size: 9px; color: var(--ink-tertiary); padding: 0 6px; white-space: nowrap; }

/* ------------------------------------------------------------ projects -- */

.project-rows { display: flex; flex-direction: column; gap: var(--s-lg); }
.row-label {
    font-family: var(--font-sans); font-size: 9px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-quaternary); margin-bottom: var(--s-sm);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-md);
}
@media (max-width: 1500px) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .project-grid { grid-template-columns: 1fr; } }

.project-card {
    position: relative;
    display: flex; flex-direction: column;
    text-align: left; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: 0 7px 7px -5px var(--shadow);
    transition: transform var(--motion-quick), box-shadow var(--motion-quick), border-color var(--motion-quick);
}
.project-card:hover {
    transform: translateY(-2px) scale(1.006);
    box-shadow: 0 16px 20px -10px var(--shadow-lifted);
    border-color: var(--hairline-strong);
}
/* The banner strip: the project's own image, or its colour. */
.project-card .strip { height: 62px; position: relative; background: var(--surface-sunken); flex: none; }
.project-card .strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card .strip .tint { position: absolute; inset: 0; }
.project-card .info { padding: 0 var(--s-md) var(--s-md); flex: 1; display: flex; flex-direction: column; }
.project-card .chip-row {
    display: flex; align-items: flex-start; gap: var(--s-sm);
    margin-top: -15px; margin-bottom: var(--s-sm);
}
.project-card .icon {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    display: grid; place-items: center;
    background: var(--surface);
    box-shadow: 0 2px 6px -2px var(--shadow-lifted);
    border: 1px solid var(--hairline);
}
.project-card .icon i {
    width: 22px; height: 22px; border-radius: 6px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--pc) 16%, transparent);
    color: var(--pc);
}
.project-card .icon svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.project-card .chip-row .grow { flex: 1; }
.project-card .pin {
    margin-top: 17px; width: 16px; height: 16px; flex: none;
    display: grid; place-items: center; color: var(--ink-tertiary);
    opacity: 0; transition: opacity var(--motion-quick);
}
.project-card:hover .pin, .project-card .pin.on { opacity: 1; }
.project-card .pin.on { color: var(--pc); }
.project-card .pin svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.project-card .pin.on svg { fill: currentColor; }
.project-card .name { font-family: var(--font-serif); font-size: 15px; font-weight: 500; line-height: 1.25; }
.project-card .about {
    font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-tertiary);
    margin-top: 3px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-card .count {
    margin-top: auto; padding-top: var(--s-sm);
    display: flex; align-items: center; gap: 4px;
    font-family: var(--font-sans); font-size: 9px; color: var(--ink-tertiary);
}
.project-card .count b { font-family: var(--font-mono); font-weight: 500; color: var(--ink-secondary); }
.project-card .count .sep { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--ink-quaternary); }

.project-card.all {
    background: color-mix(in srgb, var(--surface-sunken) 55%, transparent);
    border-style: dashed;
    box-shadow: none;
}
.project-card.all:hover { background: var(--surface); }
.project-card.all .info { padding-top: var(--s-md); }

/* --------------------------------------------------------------- board -- */

.work-grid { display: flex; align-items: flex-start; gap: var(--s-md); }
.work-grid > .inbox { width: 280px; flex: none; }
.work-grid > .board { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-sm); }
@media (max-width: 900px) {
    .work-grid { flex-direction: column; }
    .work-grid > .inbox { width: 100%; }
    .work-grid > .board { width: 100%; }
}

.inbox-head { display: flex; align-items: baseline; margin-bottom: var(--s-sm); }
.inbox-head h4 { margin: 0; font-family: var(--font-serif); font-size: 14px; font-weight: 500; }
.inbox-head .grow { flex: 1; }
.inbox-empty {
    font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-quaternary);
    padding: var(--s-md) 0;
}
.inbox-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.inbox-add {
    display: flex; align-items: center; gap: 6px;
    border-top: 1px solid var(--hairline); padding-top: var(--s-sm); margin-top: var(--s-sm);
}
.inbox-add .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.inbox-add input { flex: 1; min-width: 0; outline: none; font-family: var(--font-serif); font-size: 12.5px; }
.inbox-add input::placeholder { color: var(--ink-quaternary); }

.board-row {
    padding: var(--s-sm);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    transition: background var(--motion-quick), border-color var(--motion-quick);
}
.board-row.drop-target {
    background: color-mix(in srgb, var(--pc) 8%, transparent);
    border-color: color-mix(in srgb, var(--pc) 70%, transparent);
    border-width: 1.6px; padding: calc(var(--s-sm) - 0.6px);
}
.board-row > header { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: 6px; }
.board-row > header .bar { width: 3px; height: 12px; border-radius: 1.5px; background: var(--pc); flex: none; }
.board-row > header .title {
    font-family: var(--font-serif); font-size: 13px; font-weight: 500; outline: none;
}
.board-row > header .n { font-family: var(--font-sans); font-size: 9px; font-weight: 600; color: var(--ink-tertiary); }
.board-row > header .grow { flex: 1; }
.board-row > header .done-toggle { font-family: var(--font-sans); font-size: 9px; color: var(--ink-quaternary); }
.board-row > header .more { width: 16px; height: 16px; display: grid; place-items: center; color: var(--ink-tertiary); font-size: 11px; }

.board-scroller { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: thin; }

.board-card {
    position: relative; width: 190px; flex: none;
    display: flex; flex-direction: column; gap: 5px;
    padding: 7px 8px 7px 12px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--surface-sunken) 75%, transparent);
    border: 1px solid var(--hairline);
    text-align: left;
    transition: background var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-quick);
}
.board-card:hover { background: var(--surface); border-color: var(--hairline-strong); box-shadow: 0 3px 6px -3px var(--shadow); }
.board-card.done { opacity: 0.6; }
.board-card::before {
    content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: 2.5px; border-radius: 1.5px; background: var(--task-color); opacity: 0.8;
}
.board-card.done::before { opacity: 0.3; }
.board-card .top { display: flex; align-items: flex-start; gap: 6px; }
.board-card .check {
    flex: none; width: 11px; height: 11px; border-radius: 3.5px; margin-top: 1px;
    border: 1.1px solid var(--ink-quaternary); display: grid; place-items: center;
}
.board-card.done .check { background: var(--ink-tertiary); border-color: var(--ink-tertiary); }
.board-card .check svg { width: 7px; height: 7px; stroke: var(--surface); stroke-width: 3; fill: none; opacity: 0; }
.board-card.done .check svg { opacity: 1; }
.board-card .name {
    font-family: var(--font-serif); font-size: 12px; line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.board-card.done .name { color: var(--ink-tertiary); text-decoration: line-through; }
.board-card .foot { display: flex; align-items: center; gap: 5px; min-height: 14px; }
.board-card .foot .grow { flex: 1; }
.board-card .foot svg { width: 8px; height: 8px; stroke: currentColor; stroke-width: 2; fill: none; }
.board-card .today-chip {
    font-family: var(--font-sans); font-size: 8px; font-weight: 600;
    color: var(--today); background: color-mix(in srgb, var(--today) 14%, transparent);
    padding: 1px 4px; border-radius: 999px;
}
.board-card .act { color: var(--ink-secondary); opacity: 0; display: flex; transition: opacity var(--motion-quick); }
.board-card:hover .act { opacity: 1; }
@media (hover: none) { .board-card .act { opacity: 0.7; } }

.dashed-add {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    border-radius: var(--r-md);
    border: 1px dashed var(--hairline);
    font-family: var(--font-sans); font-size: 10px; font-weight: 500;
    color: var(--ink-quaternary);
    transition: color var(--motion-quick), border-color var(--motion-quick);
}
.dashed-add:hover { color: var(--ink-secondary); border-color: var(--hairline-strong); }
.dashed-add svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2.6; fill: none; }
.dashed-add.card { width: 74px; flex: none; align-self: stretch; min-height: 46px; background: none; box-shadow: none; padding: 0; }
.dashed-add.wide { width: 100%; padding: 7px 10px; justify-content: flex-start; }

/* -------------------------------------------------------------- chrome -- */

.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: var(--s-sm);
    padding: var(--s-sm) var(--s-xl);
    background: color-mix(in srgb, var(--canvas) 86%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--motion-quick);
}
.topbar.scrolled { border-bottom-color: var(--hairline); }
.topbar .spacer { flex: 1; }
.topbar a, .topbar > button {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    font-family: var(--font-sans); font-size: 11px; font-weight: 500;
    color: var(--ink-secondary); text-decoration: none;
    transition: background var(--motion-quick), color var(--motion-quick);
}
.topbar a:hover, .topbar > button:hover { background: var(--surface-sunken); color: var(--ink); }
.topbar a.active { color: var(--ink); background: var(--surface-sunken); }
.topbar svg { stroke: currentColor; fill: none; stroke-width: 1.8; }
@media (max-width: 860px) { .topbar { padding: var(--s-sm) var(--s-md); } }

/* The floating back button on a project page. */
.back-btn {
    position: absolute; top: var(--s-md); left: var(--s-md); z-index: 30;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: 999px;
    background: var(--surface); color: var(--ink);
    font-family: var(--font-sans); font-size: 11px; font-weight: 500;
    box-shadow: 0 10px 18px -8px var(--shadow-lifted);
    border: 1px solid var(--hairline);
}
.back-btn svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.6; fill: none; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--r-md);
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    background: var(--ink); color: var(--surface);
    transition: opacity var(--motion-quick);
}
.btn:hover { opacity: 0.86; }
.btn:disabled { background: var(--ink-quaternary); cursor: default; }
/* Named `quiet`, never `ghost` — see the note at the top of this file. */
.btn.quiet { background: transparent; color: var(--ink-secondary); border: 1px solid var(--hairline); }
.btn.quiet:hover { color: var(--ink); border-color: var(--hairline-strong); opacity: 1; }
.btn.danger { background: transparent; color: #b4483a; border: 1px solid var(--hairline); }

.icon-btn {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center; color: var(--ink-secondary);
    transition: background var(--motion-quick), color var(--motion-quick);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--ink); }
.icon-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

.field {
    width: 100%; padding: 9px 11px; border-radius: var(--r-md);
    background: var(--surface-sunken);
    font-family: var(--font-sans); font-size: 13px; outline: none;
    border: 1px solid transparent; transition: border-color var(--motion-quick);
}
.field:focus { border-color: var(--hairline-strong); }
.field.mono { font-family: var(--font-mono); font-size: 11px; }

label.stack { display: block; margin-bottom: var(--s-md); }
label.stack > span {
    display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 600;
    color: var(--ink-secondary); margin-bottom: 5px;
}

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px;
    background: var(--surface-sunken);
    font-family: var(--font-sans); font-size: 10.5px; font-weight: 500;
    color: var(--ink-secondary);
}
.chip.warn { background: var(--today-soft); color: var(--today); }
.chip svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2; fill: none; }

/* -------------------------------------------------------------- sheet -- */

.scrim {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, 0.28);
    display: grid; place-items: center; padding: var(--s-md);
    animation: fade var(--motion-quick) both;
    backdrop-filter: blur(2px);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* The sheet pins its chrome and scrolls only the middle: a note sizes itself
 * to its content, and a sheet that stacked header → note → footer would grow
 * until the close button was pushed off the bottom with no way out. */
.sheet {
    width: min(620px, 100%); max-height: min(86vh, 860px);
    display: flex; flex-direction: column;
    background: var(--canvas);
    border-radius: var(--r-card); border: 1px solid var(--hairline);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: sheet-in var(--motion-standard) both;
}
@keyframes sheet-in {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.sheet > header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
    padding: 12px var(--s-md); border-bottom: 1px solid var(--hairline); flex: none;
}
.sheet > header h3 { margin: 0; font-family: var(--font-serif); font-size: 16px; font-weight: 500; }
/* `min-height: 0` — see the note on .pane-body. */
.sheet > .content { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-md); }
.sheet > .content.flush { padding: 0; }
.sheet > footer {
    display: flex; align-items: center; gap: var(--s-sm);
    padding: 10px var(--s-md); border-top: 1px solid var(--hairline); flex: none;
}
.sheet > footer .grow { flex: 1; }

@media (max-width: 620px) {
    .scrim { padding: 0; align-items: flex-end; }
    .sheet { width: 100%; max-height: 92dvh; border-radius: var(--r-card) var(--r-card) 0 0; }
}

/* --------------------------------------------------------------- menu -- */

.menu {
    position: fixed; z-index: 120; min-width: 190px; max-height: 70vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-md); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.3);
    padding: 5px; animation: fade var(--motion-quick) both;
}
.menu button {
    display: flex; align-items: center; gap: var(--s-sm);
    width: 100%; padding: 6px 10px; border-radius: var(--r-sm);
    font-family: var(--font-sans); font-size: 12.5px; text-align: left; color: var(--ink);
}
.menu button:hover { background: var(--surface-sunken); }
.menu button.danger { color: #b4483a; }
.menu button .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.menu button svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.7; fill: none; flex: none; }
.menu .sep { height: 1px; background: var(--hairline); margin: 4px 6px; }
.menu .label {
    font-family: var(--font-sans); font-size: 9px; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-quaternary);
    padding: 6px 10px 3px;
}
.menu .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; }
.menu .swatches button { width: 28px; height: 28px; border-radius: 50%; padding: 0; border: 2px solid transparent; }
.menu .swatches button.on { border-color: var(--ink); }
.menu .icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; }
.menu .icons button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.menu .icons button svg { width: 15px; height: 15px; }
.menu .icons button.on { background: var(--surface-sunken); }

/* -------------------------------------------------------------- login -- */

.login-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-md); }
.login-card { width: min(380px, 100%); }
.login-card h1 { font-family: var(--font-serif); font-size: 26px; font-weight: 400; margin: 0 0 var(--s-xs); }
.login-card p.sub { font-family: var(--font-sans); font-size: 12px; color: var(--ink-secondary); margin: 0 0 var(--s-lg); }
.error { font-family: var(--font-sans); font-size: 12px; color: #b4483a; margin-top: var(--s-sm); }
.ok-text { font-family: var(--font-sans); font-size: 12px; color: var(--ink-secondary); margin-top: var(--s-sm); }

/* -------------------------------------------------------------- toast -- */

.toast-stack {
    position: fixed; left: 50%; bottom: calc(var(--s-md) + env(safe-area-inset-bottom));
    transform: translateX(-50%); z-index: 200;
    display: flex; flex-direction: column; gap: var(--s-sm); pointer-events: none;
}
.toast {
    background: var(--ink); color: var(--canvas);
    font-family: var(--font-sans); font-size: 12px;
    padding: 9px 15px; border-radius: 999px;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.5);
    animation: toast-in var(--motion-standard) both; max-width: 82vw;
}
.toast.error { background: #b4483a; color: #fff; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* The floating drag preview. */
.drag-ghost {
    position: fixed; z-index: 300; pointer-events: none;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--r-md);
    background: var(--surface); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.35);
    font-family: var(--font-serif); font-size: 12px; color: var(--ink);
    white-space: nowrap; transform: translate(-50%, -50%);
}
.drag-ghost .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ------------------------------------------------------------ utility -- */

.row { display: flex; align-items: center; gap: var(--s-sm); }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.muted { color: var(--ink-secondary); }
.tiny { font-family: var(--font-sans); font-size: 11px; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-quaternary); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-tertiary); background-clip: content-box; }