@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/roboto-mono.woff2') format('woff2');
    font-weight: 100 700; /* variable font */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/roboto-mono-italic.woff2') format('woff2');
    font-weight: 100 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --grid: 24px;
    --bg: #000000;
    --panel: #000000;
    --line: #292929;
    --text: #d6d6d6;
    --bright: #ffffff;
    --muted: #7a7a7a;
    --danger: #e5484d;
    --box-line: #1f1f1f; /* embed/box borders */
    /* half-opacity variant of --dot-3 (50% white pixel) */
    --dot-3-dim: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEElEQVQImWP4//9/HQNBAAB/8gN8WAp0yAAAAABJRU5ErkJggg==');
    /* transparent tiles with one white pixel at top-left (3px / 6px pitch) */
    --dot-3: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEElEQVQImWP4////fwaCAACRlQP9mAgHgQAAAABJRU5ErkJggg==');
    --dot-6: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEElEQVQImWP4////f4bBBgBMZgP9CzWibwAAAABJRU5ErkJggg==');
}

* { box-sizing: border-box; }

/* Reserve scrollbar space so right-aligned controls never shift with note
   length */
html {
    scrollbar-gutter: stable;
    scrollbar-color: var(--line) var(--bg); /* Firefox */
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: var(--line);
    border: 2px solid var(--bg); /* slims the thumb, keeps the track black */
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: var(--bg); }

/* One continuous dot grid for the whole page (sidebar included). The tiling
   is shifted half a cell so dot rows land on multiples of the grid. */
body {
    margin: 0;
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: var(--grid);
    color: var(--text);
    background:
        radial-gradient(circle, var(--line) 1px, transparent 1px)
        calc(var(--grid) / -2) calc(var(--grid) / -2) / var(--grid) var(--grid),
        var(--bg);
}

p { margin: 0 0 var(--grid) 0; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--bright); }
.muted { color: var(--muted); }
.error { color: var(--danger); }

/* Note titles: TRMNL-esque inverted pill — white text with a black halo on a
   black pill speckled with white dots every 3px (decoded from the Obsidian
   snippet's --border-3 + invert(100%)). */
h1 {
    display: inline-block;
    height: var(--grid);
    line-height: var(--grid);
    margin: 0 0 var(--grid) 0;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--bright);
    background: var(--dot-3) repeat var(--panel);
    image-rendering: pixelated;
    border-radius: 5px 5px 8px 5px;
    -webkit-text-stroke: 4px var(--panel);
    paint-order: stroke fill;
    text-shadow:
        -2px -2px 0 var(--panel), 2px -2px 0 var(--panel),
        -2px 2px 0 var(--panel), 2px 2px 0 var(--panel),
        -2px 0 0 var(--panel), 2px 0 0 var(--panel),
        0 -2px 0 var(--panel), 0 2px 0 var(--panel);
}
h1 { display: table; } /* inline-block sizing but forces its own line */

/* Title row: pill title with the context subtitle beside it */
.title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--grid);
    margin: 0 0 var(--grid) 0;
}
/* margin-left -8px lines the page-title pill up with markdown header pills
   (.hline carries the same -8px) */
.title-row h1 { display: inline-block; margin: 0 0 0 -8px; }
/* Editable general-note title: type to rename, Enter/blur commits, Esc reverts. */
h1.note-title { cursor: text; outline: none; border-radius: 3px; padding: 0 4px; margin-left: -12px; }
h1.note-title:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.note-sub { color: var(--muted); }

/* Browse Categories: editable category names + note counts; and the per-
   category note list. Rows sit on the dot grid like bullets. */
.cat-browser, .cat-list { margin-left: -6px; }
.cat-row {
    display: flex;
    align-items: center;
    height: var(--grid);
    gap: 12px;
}
.cat-name {
    padding: 0 4px;
    cursor: text;
    outline: none;
    border-radius: 3px;
    color: var(--bright);
}
.cat-name:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.cat-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.cat-count:hover { color: var(--bright); }
.cat-empty { color: var(--muted); }
/* Single-category note table, sortable by Note / Modified. */
.cat-table {
    border-collapse: collapse;
    width: round(down, calc(100% + 6px), var(--grid));
    margin-left: -6px;
}
.cat-table th, .cat-table td {
    height: var(--grid);
    line-height: var(--grid);
    text-align: left;
    padding: 0 6px;
    font-weight: 400;
}
.cat-table thead th {
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 -1px 0 var(--line);
}
.cat-table thead th:hover { color: var(--bright); }
/* Sort-direction caret on the active column (CSS triangle, no glyph). */
.cat-table th[aria-sort]::after {
    content: '';
    display: inline-block;
    margin-left: 6px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}
.cat-table th[aria-sort="ascending"]::after { border-bottom: 4px solid var(--muted); }
.cat-table th[aria-sort="descending"]::after { border-top: 4px solid var(--muted); }
.cat-table td.cat-mod { color: var(--muted); font-size: 12px; }
.cat-table .cat-note a { color: var(--text); }
.cat-table .cat-note a:hover { color: var(--bright); }

/* Full month calendars on year/season notes (reuse the sidebar grid) */
.mini-cals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid) calc(var(--grid) * 2);
    margin: 0 0 var(--grid) -6px;
}
.mini-cal-title {
    display: block;
    line-height: var(--grid);
    padding-left: 6px; /* matches list item text inset */
    color: var(--bright);
    font-weight: 700;
    font-size: 12px;
}
.mini-cal-title:hover {
    text-decoration: underline dotted var(--muted);
    text-underline-offset: 3px;
}

input, button {
    font: inherit;
    color: inherit;
}

/* Panels: black boxes with hairline outlines, square corners */
.auth-card {
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--line);
    border-radius: 0;
}

/* Auth */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.auth-card {
    padding: var(--grid);
    width: 100%;
    max-width: 340px;
}
.auth-card h1 { margin-top: 0; }
.auth-card p { margin: 0 0 var(--grid) 0; }
.auth-card label {
    display: block;
    margin-bottom: var(--grid);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.auth-card input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 4px 7px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 0;
    font-size: 13px;
    line-height: var(--grid);
    color: var(--text);
}
.auth-card input:focus {
    outline: none;
    border-color: var(--bright);
}
.auth-card button {
    width: 100%;
    padding: 5px 7px;
    line-height: var(--grid);
    background: var(--panel);
    color: var(--bright);
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--line);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.auth-card button:hover {
    background: var(--bright);
    color: var(--panel);
}

/* Settings / API tokens page (reuses the auth-card chrome, but wider) */
.settings-card {
    max-width: 560px;
    align-self: flex-start;
    margin-top: calc(var(--grid) * 2);
}
.settings-card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--bright);
}
.token-reveal {
    margin-bottom: var(--grid);
    padding: calc(var(--grid) / 2) var(--grid);
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--bright);
}
.token-value {
    display: block;
    margin-top: 4px;
    word-break: break-all;
    font-size: 13px;
}
.token-table {
    width: 100%;
    margin-bottom: var(--grid);
    border-collapse: collapse;
    font-size: 12px;
}
.token-table th {
    text-align: left;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--line);
}
.token-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.token-table tr.token-revoked td { color: var(--muted); }
.token-table form { margin: 0; }
.token-revoke {
    width: auto;
    padding: 2px 8px;
    line-height: 1.6;
    font-size: 10px;
}

/* Sidebar drawer toggle: top-right of the sidebar; parks at the window's
   left edge while the drawer is closed */
.sb-toggle {
    position: fixed;
    top: 0;
    left: calc(var(--grid) * 10 - var(--grid));
    width: var(--grid);
    height: var(--grid);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 60;
}
.sb-toggle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-left: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translate(-30%, -50%) rotate(45deg); /* points left (open) */
    opacity: 0; /* revealed on hover only */
    transition: opacity 0.12s;
}
.sb-toggle:hover::before { border-color: var(--bright); opacity: 1; }
body.sb-closed .sidebar { display: none; }
body.sb-closed .sb-toggle { left: 0; }
body.sb-closed .sb-toggle::before {
    transform: translate(-70%, -50%) rotate(-135deg); /* points right */
}

/* Sidebar: a plain panel, deliberately outside the grid system */
.layout {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: calc(var(--grid) * 10); /* whole squares so the page grid lines up */
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    padding: var(--grid);
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line); /* divider without layout width */
}
/* The day grid keeps the dotted background (cells are exact grid squares,
   so an element-scoped tiling aligns with them) */
.sidebar .cal-grid {
    background: radial-gradient(circle, var(--line) 1px, transparent 1px)
        calc(var(--grid) / -2) calc(var(--grid) / -2) / var(--grid) var(--grid);
}

/* Calendar: compact, on the grid rhythm (every row is one grid unit; no dot
   background here, the sidebar is intentionally plain). */
.cal { margin-bottom: var(--grid); user-select: none; }
/* Header: bold plain-english date over shortcuts to the current
   year/season/month/week/day notes. Right-click a category shortcut to list
   its existing notes (app.js). */
.cal-date {
    display: block;
    height: var(--grid);
    line-height: var(--grid);
    padding-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--bright);
    white-space: nowrap;
}
.cal-date:hover {
    text-decoration: underline dotted var(--muted);
    text-underline-offset: 3px;
}
/* Date row holds the "..." actions menu button on its right edge. */
.cal-top { display: flex; align-items: center; }
.cal-top .cal-date { flex: 1 1 auto; }
.cal-more {
    position: relative;
    flex: 0 0 var(--grid);
    width: var(--grid);
    height: var(--grid);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.cal-more::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--muted);
    transform: translate(-50%, -50%);
    box-shadow: -4px 0 0 var(--muted), 4px 0 0 var(--muted);
}
.cal-more:hover::before {
    background: var(--bright);
    box-shadow: -4px 0 0 var(--bright), 4px 0 0 var(--bright);
}
.cal-head {
    display: flex;
    align-items: center;
    height: var(--grid);
    padding-left: 6px;
    font-size: 11px;
    white-space: nowrap;
}
.cal-sc {
    color: var(--muted);
    font-weight: 400;
}
.cal-sc:hover {
    color: var(--bright);
    text-decoration: underline dotted var(--muted);
    text-underline-offset: 3px;
}
.cal-sep {
    width: 1px;
    height: 10px;
    margin: 0 6px;
    background: var(--line);
}
.cal-spacer { flex: 1; }
/* Month nav: chevron glyphs drawn in CSS, dot = back to current month */
.cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: var(--grid);
}
.cal-nav.prev::before, .cal-nav.next::before {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
}
.cal-nav.prev::before { transform: translateX(1px) rotate(135deg); }
.cal-nav.next::before { transform: translateX(-1px) rotate(-45deg); }
.cal-nav.cur::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--muted);
}
.cal-nav.prev:hover::before, .cal-nav.next:hover::before { border-color: var(--bright); }
.cal-nav.cur:hover::before { background: var(--bright); }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(8, var(--grid));
    text-align: center;
    font-size: 12px;
}
.cal-dow, .cal-wk {
    display: block;
    font-size: 9px;
    color: var(--muted);
    line-height: var(--grid);
}
a.cal-wk { position: relative; }
a.cal-wk:hover { color: var(--bright); }
/* Same dot system as days */
.cal-wk.has-note::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--bright);
    transform: translateX(-50%);
}
.cal-wk.has-note.has-task::after {
    transform: translateX(calc(-50% - 3px));
    box-shadow: 6px 0 0 var(--bright);
}
.cal-day {
    display: block;
    position: relative;
    height: var(--grid);
    line-height: var(--grid);
    color: var(--text);
    font-weight: 500;
}
.cal-day:hover { color: var(--bright); }
/* Dim via color only: opacity would also fade selection boxes and dots */
.cal-day.dim { color: #4f4f4f; }
/* Mini calendars on current periods: past grey, today/future bright */
.cal-day.past { color: #4f4f4f; }
.cal-day.bright { color: var(--bright); }
.cal-day.empty { pointer-events: none; }
/* Today: 1px solid white border */
.cal-day.today {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--bright);
}
/* Selected day: white cell, black text, dots recolored to stay visible */
.cal-day.selected, .cal-day.selected:hover, .cal-day.selected.bright {
    background: var(--bright);
    color: #000;
}
.cal-day.selected.has-note::after { background: #000; }
.cal-day.selected.has-note.has-task::after { box-shadow: 6px 0 0 #000; }

/* Selected week note: white box around the whole row (incl. the W cell).
   Doubled class names beat .cal-day.today so white overpowers grey. */
.cal-row-sel.cal-row-sel {
    box-shadow: inset 0 1px 0 var(--bright), inset 0 -1px 0 var(--bright);
}
.cal-row-sel.cal-row-sel.first {
    box-shadow: inset 0 1px 0 var(--bright), inset 0 -1px 0 var(--bright),
        inset 1px 0 0 var(--bright);
}
.cal-row-sel.cal-row-sel.last {
    box-shadow: inset 0 1px 0 var(--bright), inset 0 -1px 0 var(--bright),
        inset -1px 0 0 var(--bright);
}

/* Selected month note: one border around the edge of the month's day blob */
.cal-day.msel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cal-day.m-t::before { border-top: 1px solid var(--bright); }
.cal-day.m-b::before { border-bottom: 1px solid var(--bright); }
.cal-day.m-l::before { border-left: 1px solid var(--bright); }
.cal-day.m-r::before { border-right: 1px solid var(--bright); }
/* Dot: white = has content; grey when the note has unchecked [ ] items */
.cal-day.has-note::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--bright);
    transform: translateX(-50%);
}
/* unchecked [ ] items add a second dot beside the content dot */
.cal-day.has-note.has-task::after {
    transform: translateX(calc(-50% - 3px));
    box-shadow: 6px 0 0 var(--bright);
}

.sidebar nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sidebar nav a {
    color: var(--muted);
    line-height: var(--grid);
    padding: 0 10px; /* text sits where the centered W numbers used to */
}
.sidebar nav a:hover { color: var(--bright); }
.sidebar nav a.active {
    color: var(--bright);
    box-shadow: 0 0 0 1px var(--line);
}
/* Bookmarks under Inbox */
.bm-sep {
    height: 1px;
    margin: calc(var(--grid) / 2) 0; /* full nav width, like the active box */
    background: var(--line);
}
.bm-item {
    position: relative;
    display: flex;
    align-items: center;
    line-height: var(--grid);
}
.bm-item a {
    flex: 1;
    color: var(--muted);
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bm-item a:hover, .bm-item.active a { color: var(--bright); }
.bm-item.active { box-shadow: 0 0 0 1px var(--line); }
.bm-handle {
    width: 12px;
    height: var(--grid);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
    transition-delay: 0s;
    flex-shrink: 0;
}
/* No visible graphic: the handle is an invisible grab area at the row's right
   (still draggable), revealed only by the grab cursor on hover. */
.bm-item:hover .bm-handle {
    opacity: 1;
    transition-delay: 0.5s;
}

.logout {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 10px;
    line-height: var(--grid);
}
.logout:hover { color: var(--bright); }

/* Layout
   Content is left-anchored two squares from the sidebar so it sits exactly
   on the page-wide grid (sidebar 10 squares + 2-square gutter = grid
   multiple). Content width is 40 squares minus the 6px text inset so the
   RIGHT edge of embeds/bars also lands on a grid column. All vertical
   margins must stay multiples of --grid. */
.container {
    flex: 1;
    max-width: calc(var(--grid) * 40);
    margin: calc(var(--grid) * 2);
    min-height: calc(100vh - var(--grid) * 4);
    padding: 0 0 0 6px;
}
/* The page body below the title stays hidden (the dot grid on <body> shows
   through) until its content has loaded, then the whole block fades in together
   — so nothing pops in piecemeal. The first child is the title row (kept visible
   so the page title shows immediately). JS adds .ov-ready to play the reveal. */
@keyframes ov-fade-in { from { opacity: 0; } to { opacity: 1; } }
.container > :not(:first-child) {
    animation: ov-fade-in 0.25s ease-out both;
    animation-play-state: paused;
}
body.ov-ready .container > :not(:first-child) { animation-play-state: running; }

/* Bullet editor. Lines are pulled back 6px so the bullet's cell starts on a
   dot column; the bullet is centered in that cell, and the text resumes 6px
   into the next cell. Indents step by exactly one cell. */
.note-editor { min-height: calc(var(--grid) * 4); cursor: text; }
.note-editor.tall { min-height: calc(var(--grid) * 10); }
.bullet-line {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-left: -6px;
    padding-right: 64px;
}
.bullet {
    position: relative;
    flex: 0 0 var(--grid);
    height: var(--grid);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bullet::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
}
.bullet-line:focus-within .bullet::before { background: var(--bright); }
/* Empty lines carry no bullet until ACTIVE — unless indented (.ind), where
   the bullet anchors them to their parent. */
.bullet-line.empty .bullet::before { display: none; }
.bullet-line.empty.ind .bullet::before,
.bullet-line.empty:focus-within .bullet::before { display: block; }
/* Headers: no bullet at all — removing the flex cell shifts the pill one
   grid square left; the collapse chevron sits in the cell left of that */
.bullet-line.hdr .bullet { display: none; }
/* A collapsed header keeps one empty row between it and the next content */
.bullet-line.hdr.collapsed { margin-bottom: var(--grid); }

/* Habit transfer button: floats at the page's right edge on a habit's "# Name"
   header row. Down-chevron = send to Inactive; up-chevron = send to Active. */
.habit-move {
    position: absolute;
    /* Land the button on the grid: its right edge meets the habit bar's
       grid-snapped right edge (the line's width-snap remainder), so the
       chevron sits at the centre of the last grid square, not the page edge. */
    right: calc(100% - round(down, 100%, var(--grid)));
    top: 0;
    width: var(--grid);
    height: var(--grid);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.habit-move::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
}
.habit-move.down::before { transform: translateY(-1px) rotate(45deg); }
.habit-move.up::before { transform: translateY(1px) rotate(225deg); }
.habit-move:hover::before { border-color: var(--bright); }
.habit-move:disabled { cursor: default; opacity: 0.4; }

/* Indent guides: one faint vertical line per ancestor level, on the RIGHT
   edge of each ancestor's bullet cell (i.e. just left of the child text). */
.bullet-line::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((1 - var(--ind, 0)) * var(--grid) - 0.5px);
    width: calc(var(--ind, 0) * var(--grid));
    background: repeating-linear-gradient(to right,
        rgba(255, 255, 255, 0.15) 0 1px, transparent 1px var(--grid));
    pointer-events: none;
}

/* Markdown headers: TRMNL pill (same recipe as the page title) */
.hline {
    display: inline-block;
    height: var(--grid);
    line-height: var(--grid);
    padding: 0 8px;
    margin-left: -8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--bright);
    background: var(--dot-3) repeat var(--panel);
    image-rendering: pixelated;
    -webkit-text-stroke: 4px var(--panel);
    paint-order: stroke fill;
    text-shadow:
        -2px -2px 0 var(--panel), 2px -2px 0 var(--panel),
        -2px 2px 0 var(--panel), 2px 2px 0 var(--panel);
    border-radius: 5px 5px 8px 5px;
}
.hline.h1 { font-size: 14px; }
.hline.h2 { font-size: 13px; border-radius: 3px 3px 3px 5px; }
.hline.h3 { font-size: 12px; border-radius: 3px; }

/* Collapse chevrons: centered in the grid cell left of the bullet, shown on
   hover for parents (always while collapsed). Drawn in CSS, no glyphs. */
.chev {
    position: absolute;
    left: calc(-1 * var(--grid));
    top: 0;
    width: var(--grid);
    height: var(--grid);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
}
.chev.has::before {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translateY(-1px) rotate(45deg); /* points down (expanded) */
}
.bullet-line.collapsed .chev.has::before {
    transform: translateX(-1px) rotate(-45deg); /* points right (collapsed) */
}
.bullet-line:hover .chev.has,
.bullet-line.collapsed .chev.has { opacity: 1; }
.chev.has:hover::before { border-color: var(--bright); }
.collapsed-hidden { display: none; }

/* Task bullets: the [ ] / [x] prefix swaps the dot for a circle checkbox */
.bullet-line.task .bullet { cursor: pointer; }
.bullet-line.task .bullet::before {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 1px solid var(--muted);
}
.bullet-line.task:focus-within .bullet::before { background: transparent; }
.bullet-line.task .bullet:hover::before,
.bullet-line.task:focus-within .bullet::before { border-color: var(--bright); }
.bullet-line.task.done .bullet::before,
.bullet-line.task.done:focus-within .bullet::before {
    background: var(--bright);
    border-color: var(--bright);
}
/* Black check inside the filled circle, drawn in CSS (no glyphs) */
.bullet-line.task.done .bullet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 3px;
    border-left: 1.5px solid var(--panel);
    border-bottom: 1.5px solid var(--panel);
    transform: translate(-50%, -70%) rotate(-45deg);
}
.bullet-line.task.done .bullet-text {
    color: var(--muted);
    text-decoration: line-through;
}
/* [/] in-progress: half-filled circle, white left / black right */
.bullet-line.task.half .bullet::before,
.bullet-line.task.half:focus-within .bullet::before {
    background: linear-gradient(to right, var(--bright) 50%, transparent 50%);
    border-color: var(--bright);
}
/* [-] cancelled: struck-through text, dash inside the circle */
.bullet-line.task.cancel .bullet-text {
    color: var(--muted);
    text-decoration: line-through;
}
.bullet-line.task.cancel .bullet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    border-top: 1.5px solid var(--muted);
    transform: translate(-50%, -50%);
}
/* [*]: the bullet becomes a star (drawn with clip-path, no glyphs) */
.bullet-line.star .bullet::before {
    width: 13px;
    height: 13px;
    border-radius: 0;
    background: var(--bright);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* "---" lines render as a dotted horizontal rule (6px pitch, like the
   inspiration's --border-6 + invert), spanning from the bullet's cell to the
   grid column at the right edge of the editor. */
.bullet-line.hr {
    padding-right: 0;
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
}
.bullet-line.hr .bullet { display: none; }
.bullet-line.hr .bullet-text { padding-left: 0; }
/* Two grid rows tall, a faint centered line (same tone as indent guides) */
.bullet-text hr {
    border: 0;
    height: 1px;
    margin: calc(var(--grid) - 0.5px) 0;
    background: rgba(255, 255, 255, 0.15);
}

.bullet-text {
    flex: 1;
    min-height: var(--grid);
    padding-left: 6px;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
}
.bullet-text strong { color: var(--bright); }
.bullet-text code {
    font-family: inherit; /* the UA's monospace default is taller and knocks
        the line off the grid */
    /* line-height MUST be 'normal' (shorter than the row), not var(--grid):
       a 24px line-height on this 12px-font inline box makes its ascent/descent
       exceed the 13px text strut, so the line box rounds up to 24.5px at 2x
       DPR and drifts 0.5px onto every following line. 'normal' keeps the box
       within the strut, so rows stay exactly one grid cell. */
    line-height: normal;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--line);
    padding: 0 4px;
    font-size: 12px;
}
.bullet-text a { color: var(--bright); text-decoration: underline; }
.wikilink {
    color: var(--bright);
    text-decoration: underline dotted var(--muted);
    text-underline-offset: 3px;
}
.wikilink:hover { text-decoration-color: var(--bright); }

/* (line timestamps removed: creation time is tracked but never displayed) */

/* Dashboard page: two columns, widths rounded to whole grid squares */
.dash-cols {
    display: flex;
    gap: var(--grid);
    align-items: flex-start;
}
.dash-left {
    width: 66%; /* fallback */
    width: round(nearest, 66%, var(--grid));
    flex-shrink: 0;
}
.dash-right { flex: 1; }
.dash-left .embed:first-child { margin-top: 0; }

/* Embed sections: a title line (chevron in the cell to its left) above a
   black box. Pulled back 6px so the box's left edge sits on a grid column.
   Collapsing hides the whole box. */
/* Width snapped DOWN to whole grid squares so the right edge stays on a
   column even when the flex container isn't a grid multiple (e.g. with a
   scrollbar present). */
.embed {
    margin: var(--grid) 0 0 -6px;
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
}
/* The controls row sits directly on the first embed (no blank row) */
.embed-controls + .embeds-zone > .embed:first-child { margin-top: 0; }
/* A collapsed embed swallows the blank row beneath it */
.embed.collapsed + .embed, .embed.collapsed + .progress { margin-top: 0; }
.embed-title {
    position: relative;
    line-height: var(--grid);
    padding-left: 6px; /* the standard text inset off the grid column */
}
.embed-label { color: var(--bright); font-weight: 500; }
.echev {
    position: absolute;
    left: calc(-1 * var(--grid));
    top: 0;
    width: var(--grid);
    height: var(--grid);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.echev::before {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translateY(-1px) rotate(45deg); /* down = expanded */
}
.echev:hover::before { border-color: var(--bright); }
.embed.collapsed .echev::before {
    transform: translateX(-1px) rotate(-45deg); /* right = collapsed */
}
.embed.collapsed .embed-box { display: none; }
/* box-shadow, not border: real borders add 2px of layout height per embed
   and drift everything below off the grid */
.embed-box {
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--box-line);
    padding: var(--grid);
}
/* Embeds are only as tall as their content. The 6px margin restores the
   main editor's alignment (box padding = 24px puts content ON a column;
   the editor expects to start 6px past one, so bullets/chevrons center in
   grid cells). */
.embed-box .note-editor {
    min-height: var(--grid);
    margin-left: 6px;
}
/* No underlines on links inside embeds (hover keeps the affordance) */
.embed-box a, .embed-box .wikilink, a.embed-label {
    text-decoration: none;
}
.embed-box a:hover, a.embed-label:hover {
    text-decoration: underline dotted var(--muted);
    text-underline-offset: 3px;
}
/* Inline ![[note]] embeds sit inside a bullet line; their chevron sits in
   the cell LEFT of the bullet, and the box hugs the bullet column. */
.inline-embed { margin: 0; }
.inline-embed .echev { left: calc(-2 * var(--grid) - 6px); }
/* The box shifts 6px left onto a grid column; width 100% (not auto) keeps it
   the same snapped width as its wrapper, so the right edge shifts back onto
   a column too instead of overshooting by 6px */
.inline-embed .embed-box { margin-left: -6px; width: 100%; }
.embed-empty { color: var(--muted); line-height: var(--grid); }

/* Frontmatter: the box always includes its "---" fence rows as seemingly
   empty rows — the raw dashes only show while a fence row is being edited
   (focused lines display their raw text). Fences are real, full-height,
   focusable lines, so arrows and clicks reach them; the top fence draws the
   box's top border, the bottom fence the bottom border. */
.bullet-line.fm-fence,
.bullet-line.fm-line {
    background: var(--panel);
    box-shadow: -1px 0 0 var(--box-line), 1px 0 0 var(--box-line);
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
    padding-left: var(--grid);
}
.bullet-line.fm-fence .bullet, .bullet-line.fm-line .bullet { display: none; }
.bullet-line.fm-fence .bullet-text { padding-left: 6px; min-height: var(--grid); }
.bullet-line.fm-fence .bullet-text hr { display: none; } /* fence reads as an empty row */
.bullet-line.fm-fence-top {
    box-shadow: -1px 0 0 var(--box-line), 1px 0 0 var(--box-line), 0 -1px 0 var(--box-line);
}
.bullet-line.fm-fence-bot {
    box-shadow: -1px 0 0 var(--box-line), 1px 0 0 var(--box-line), 0 1px 0 var(--box-line);
    margin-bottom: var(--grid); /* empty row below the EXPANDED box (the
        fence is display:none while collapsed, taking the margin with it) */
}
.fm-hidden { display: none; }
.note-editor.fm-collapsed .fm-line,
.note-editor.fm-collapsed .fm-fence { display: none; }

/* Code blocks: ``` fence pairs box their lines; inner lines render literal.
   Fence rows read as empty (their backticks show while edited). */
.bullet-line.cb-fence, .bullet-line.cb-line {
    background: var(--panel);
    box-shadow: -1px 0 0 var(--box-line), 1px 0 0 var(--box-line);
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
    padding-left: var(--grid);
}
.bullet-line.cb-fence .bullet, .bullet-line.cb-line .bullet { display: none; }
.bullet-line.cb-top {
    box-shadow: -1px 0 0 var(--box-line), 1px 0 0 var(--box-line), 0 -1px 0 var(--box-line);
}
.bullet-line.cb-bot {
    box-shadow: -1px 0 0 var(--box-line), 1px 0 0 var(--box-line), 0 1px 0 var(--box-line);
}
.bullet-line.cb-fence .bullet-text { opacity: 0; }
.bullet-line.cb-fence:focus-within .bullet-text { opacity: 1; }
.bullet-line.cb-line .bullet-text { font-size: 12px; }
/* Copy button: top-right of the block, CSS-drawn page-pair icon */
.cb-copy {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--grid);
    height: var(--grid);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.cb-copy::before, .cb-copy::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid var(--muted);
}
.cb-copy::before { left: 6px; top: 6px; }
.cb-copy::after { left: 9px; top: 9px; background: var(--panel); }
.cb-copy:hover::before, .cb-copy:hover::after { border-color: var(--bright); }
.cb-copy.copied::after { background: var(--bright); border-color: var(--bright); }

/* Habit tracker: the Active Habits editor keeps Inactive Habits at least
   half way down the page (like a tall note keeps its backlinks down) */
.habits-active {
    min-height: calc(50vh - var(--grid) * 4);
    min-height: round(down, calc(50vh - var(--grid) * 4), var(--grid));
    margin-bottom: var(--grid);
}
/* On the Habits page the "Active Habits" / "Inactive Habits" header pills span
   the content width minus two grid squares, so they clear the fold control that
   floats at the row's right end. */
body[data-mode="habits"] .title-row h1 { display: block; flex: 1 1 auto; margin-right: calc(var(--grid) * 2); }
body[data-mode="habits"] .title-row .title-controls { position: absolute; right: 0; top: 0; }
/* Always two empty rows between the Active editor and the Inactive header. */
body[data-mode="habits"] .habits-active { margin-bottom: 0; }
body[data-mode="habits"] .habits-active + .title-row { margin-top: calc(var(--grid) * 2); }

/* Habit chain bars. Every cell carries a faint grey grid outline (same tone
   as hr lines); the day number / streak shows only on hover (unless .reveal-n).
   States: 0 empty, 1 spaced dots, 2 dots, 3 fill (white/black), 4 snoozed Z.
   Weekly/monthly habits get a white divider before each week/month. Collapsed
   (default) = one row ending at the chain's last day; chevron expands it. */
.habit-bar {
    position: relative;
    margin-left: -6px;
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
}
.note-editor .habit-bar { margin-top: var(--grid); } /* empty row above chains */
/* A collapsed header's chain keeps an empty row before the next header. */
.habit-bar.under-collapsed { margin-bottom: var(--grid); }
.habit-bar .echev { top: 0; }
.habit-bar.collapsed .echev::before {
    transform: translateX(-1px) rotate(-45deg); /* right = collapsed */
}
/* A bar carries ONE grey outline around the whole strip; filled runs get a
   single white outline traced around the run (a blob), not per cell. */
.hab-cells {
    display: flex;
    flex-wrap: wrap;
    min-height: var(--grid); /* reserve the row so async cell-load doesn't shift layout */
    /* No box around the whole grid — the outline is drawn per-cell (hg-* / hb-*)
       so it hugs the real cells and steps in on a partial last row. */
}
.hab-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--grid);
    height: var(--grid);
    flex-shrink: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}
/* Filled cells in a bar draw the white blob edges (heatEdges -> hb-*::before) */
.hab-cells .hab-cell.hab-1::before,
.hab-cells .hab-cell.hab-2::before,
.hab-cells .hab-cell.hab-3::before,
.hab-cell.hg-t::before,
.hab-cell.hg-b::before,
.hab-cell.hg-l::before,
.hab-cell.hg-r::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Grey grid outline edges (non-filled cells at the grid boundary). */
.hab-cell.hg-t::before { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.hab-cell.hg-b::before { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.hab-cell.hg-l::before { border-left: 1px solid rgba(255, 255, 255, 0.15); }
.hab-cell.hg-r::before { border-right: 1px solid rgba(255, 255, 255, 0.15); }
.hab-cells .hab-cell:hover { box-shadow: inset 0 0 0 1px var(--bright); }
/* Standalone day-note box: a single cell IS the whole bar, so it keeps a
   per-cell outline — grey when empty/snoozed, white when filled. */
.dh-cell { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.dh-cell.hab-1, .dh-cell.hab-2, .dh-cell.hab-3 { box-shadow: inset 0 0 0 1px var(--bright); }
.dh-cell:hover { box-shadow: inset 0 0 0 1px var(--bright); }
.hab-n { visibility: hidden; }
.hab-cell:hover .hab-n, .hab-cell.reveal-n .hab-n { visibility: visible; }
.hab-cell.hab-1, .hab-cell.hab-2 {
    background: var(--dot-6) repeat var(--panel);
    image-rendering: pixelated;
}
.hab-cell.hab-2 { background: var(--dot-3) repeat var(--panel); }
.hab-cell.hab-1 .hab-n, .hab-cell.hab-2 .hab-n {
    color: var(--bright);
    -webkit-text-stroke: 3px var(--panel);
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 var(--panel), 1px -1px 0 var(--panel),
        -1px 1px 0 var(--panel), 1px 1px 0 var(--panel);
}
.hab-cell.hab-3 { background: var(--bright); color: #000; } /* fill */
.hab-cell.hab-3 .hab-n { color: #000; }
.hab-cell.hab-4 { color: var(--muted); font-weight: 700; } /* snoozed Z */
/* Fail: an empty square with a centre dot. The dot shows while the day label is
   hidden; revealing the label hides it — except day / week cells, which keep the
   dot (and drop the letter) so Fail stays distinct from Unset. */
.hab-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px; /* match the main calendar dots */
    height: 3px;
    border-radius: 50%;
    background: var(--muted);
    transform: translate(-50%, -50%);
}
.hab-cell:hover .hab-dot, .hab-cell.reveal-n .hab-dot { visibility: hidden; }
.hab-cell.reveal-n.hab-5 .hab-dot { visibility: visible; }
.hab-cell.reveal-n.hab-5 .hab-n { visibility: hidden; }
/* For ~1s after applying Unset/Fail, show the dot/empty cell instead of the
   hover date, so the just-set state is visible under the cursor. */
.hab-cell.suppress-label .hab-n { visibility: hidden; }
.hab-cell.suppress-label.hab-5 .hab-dot { visibility: visible; }
/* Weekly/monthly habits: a white line at the week/month boundary */
.hab-cell.hab-div::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--bright);
}

/* Dashboard "Habits": a name row (name + strict (loose) streak on the right)
   over a grid-aligned bar that fills the column. The row matches the bar's
   grid-snapped box so the streak's right edge lines up with the bar's. */
.dash-habit-name {
    display: flex;
    align-items: baseline;
    margin-left: -6px;
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
    line-height: var(--grid);
    color: var(--text);
}
.dh-label { padding-left: 6px; }
.dh-label.has-desc { cursor: default; }
.dh-label.has-desc:hover { color: var(--bright); }
.dh-streak { margin-left: auto; color: var(--muted); font-size: 12px; }
.dash-habit .habit-bar .echev { display: none; } /* no expand in the column */

/* Day-note "# Habits": header pill over a single row of status cells (one per
   habit, showing its first letter), separated by an empty grid square. The name,
   this-week chain, and description live in the hover panel. */
.day-habits { margin-top: calc(var(--grid) * 2); }
.dh-head { height: var(--grid); margin-bottom: var(--grid); }
.dh-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid); /* one empty grid square between habits */
    margin-left: -6px; /* align the first cell to the bullet column */
}
.dh-item {
    display: flex;
    flex: 0 0 var(--grid);
    width: var(--grid);
    height: var(--grid);
}
.dh-item .dh-cell { cursor: pointer; }

/* Habit description hover panel (with an optional "This week" mini-chain) */
.habit-desc-panel {
    position: fixed;
    z-index: 130;
    box-sizing: border-box;
    max-width: calc(var(--grid) * 14);
    /* One less grid of left indent than before; the bullet cell supplies the
       rest. Right padding stays a full grid so the right border clears the text. */
    padding: calc(var(--grid) / 2) var(--grid) calc(var(--grid) / 2) 6px;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--line);
    color: var(--text);
    display: none;
}
.habit-desc-panel.show { display: block; }
/* Desc lines mirror the Habits page: a bullet dot per line, indented by the
   bullet's relative depth (--hd-ind levels of one grid each). */
.hd-line {
    display: flex;
    align-items: flex-start;
    line-height: var(--grid);
    margin-left: calc(var(--hd-ind, 0) * var(--grid));
}
.hd-bullet {
    flex: 0 0 var(--grid);
    height: var(--grid);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hd-bullet::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
}
.hd-text { flex: 1 1 auto; min-width: 0; }
/* Hover-panel habit name (bold), above the week chain. */
.hd-title {
    font-weight: 700;
    color: var(--bright);
    line-height: var(--grid);
    margin-bottom: calc(var(--grid) / 4);
}
/* "This week" label and the 7-cell chain share one line. */
.hd-week {
    display: flex;
    align-items: center;
    gap: calc(var(--grid) / 2);
    margin-bottom: calc(var(--grid) / 2);
}
/* The week chain is exactly 7 cells — keep the grey outline hugging those cells
   instead of stretching to the panel width. */
/* The tooltip week chain is always a full 7-cell row, so a simple box outline
   around the container is correct (and cheaper than per-cell edges). */
.hd-week .hab-cells { display: inline-flex; flex-wrap: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.hd-week-label { color: var(--muted); line-height: var(--grid); white-space: nowrap; }
/* The viewed day in the week chain gets a white outline. */
.hd-week .hab-cell.hd-today { box-shadow: inset 0 0 0 1px var(--bright); }

/* {{heatmap}} shortcode: day cells in wrapping strips (bar), banded week
   columns (weeks), or mini month grids (calendar). Referenced days are
   white with black text and a white outline; day numbers keep cells
   legible. Nothing inside a heatmap is underlined. */
.hm {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
}
.hm a { color: var(--text); text-decoration: none; } /* beats .bullet-text a */
.hm-weeks { display: block; }
.hm-band { display: flex; }
.hm-err { color: var(--muted); line-height: var(--grid); }
/* Day cells match the calendar's day styling */
.hm-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--grid);
    height: var(--grid);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}
a.hm-cell:hover { color: var(--bright); }
.hm-cell.pad { color: #4f4f4f; } /* out-of-range dash */
.hm-cell.lab { font-size: 9px; letter-spacing: 1px; color: var(--muted); }
/* Heat cells: the progress bar treatment — dotted fill, white label with a
   black halo so it reads over the dots */
.hm-cell.h1, .hm-cell.h2, .hm-cell.h3 {
    position: relative;
    background: var(--dot-3) repeat var(--panel);
    image-rendering: pixelated;
    color: var(--bright);
    -webkit-text-stroke: 3px var(--panel);
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 var(--panel), 1px -1px 0 var(--panel),
        -1px 1px 0 var(--panel), 1px 1px 0 var(--panel);
}
/* White 1px outline traced around connected blobs of highlighted days
   (heatEdges() puts hb-* on the sides facing non-highlighted cells) */
.hm-cell.h1::before, .hm-cell.h2::before, .hm-cell.h3::before,
.cal-day.h1::before, .cal-day.h2::before, .cal-day.h3::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hb-t::before { border-top: 1px solid var(--bright); }
.hb-b::before { border-bottom: 1px solid var(--bright); }
.hb-l::before { border-left: 1px solid var(--bright); }
.hb-r::before { border-right: 1px solid var(--bright); }
.hm-wcol { display: flex; flex-direction: column; }
/* heatmap month grids carry no week column */
.cal-grid.no-wk { grid-template-columns: repeat(7, var(--grid)); }
/* "calendar" display: reuses the mini-cal grid; W column grey, no trailing
   blank row, white heat cells */
.hm-cals { margin-bottom: 0; }
.hm-cals a { color: var(--text); text-decoration: none; }
.hm-cals .mini-cal-title { color: var(--bright); }
.hm-cals .cal-wk { color: var(--muted); }
.hm-cals .cal-day:hover { color: var(--bright); }
.cal-day.h1, .cal-day.h2, .cal-day.h3 {
    background: var(--dot-3) repeat var(--panel);
    image-rendering: pixelated;
}
.cal-day.h1 .d, .cal-day.h2 .d, .cal-day.h3 .d {
    color: var(--bright);
    -webkit-text-stroke: 3px var(--panel);
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 var(--panel), 1px -1px 0 var(--panel),
        -1px 1px 0 var(--panel), 1px 1px 0 var(--panel);
}
/* Frontmatter chevron sits in the cell left of the note title */
.fm-chev {
    display: none;
    position: absolute;
    left: calc(-1 * var(--grid) - 6px);
    top: 0;
}
.fm-chev.show { display: flex; }
.fm-chev.fm-closed::before { transform: translateX(-1px) rotate(-45deg); }

/* ==highlight==: the title-pill treatment, filling the full grid row */
.bullet-text mark, .backlink-line mark {
    display: inline-block;
    height: var(--grid);
    line-height: var(--grid);
    vertical-align: top;
    background: var(--dot-3-dim) repeat var(--panel);
    color: var(--bright);
    image-rendering: pixelated;
    -webkit-text-stroke: 5px var(--panel);
    paint-order: stroke fill;
    text-shadow:
        -2px -2px 0 var(--panel), 2px -2px 0 var(--panel),
        -2px 2px 0 var(--panel), 2px 2px 0 var(--panel),
        -2px 0 0 var(--panel), 2px 0 0 var(--panel),
        0 -2px 0 var(--panel), 0 2px 0 var(--panel);
    padding: 0 5px;
    border-radius: 4px;
}

/* Progress bar: one grid row, filled square by square. White label sits on
   the black track; a clipped black copy inverts it over the fill. */
.progress {
    position: relative;
    height: var(--grid);
    margin: var(--grid) 0 var(--grid) -6px;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--bright);
    overflow: hidden;
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
}
/* Label: white with a black halo, readable over track and fill alike */
.p-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--bright);
    -webkit-text-stroke: 3px var(--panel);
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 var(--panel), 1px -1px 0 var(--panel),
        -1px 1px 0 var(--panel), 1px 1px 0 var(--panel);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.p-clip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
.p-cells {
    position: absolute;
    inset: 2px 0 2px 2px; /* 2px buffer against the bar edges */
    display: flex;
    gap: 2px; /* buffer between neighbouring squares */
}
.p-cell {
    width: 22px; /* +2px gap = one 24px square per cell */
    flex-shrink: 0;
    background: var(--dot-3) repeat var(--panel);
    image-rendering: pixelated;
}
.p-cell.partial {
    background: var(--dot-6) repeat var(--panel); /* sparser dots */
}
/* Backlinks: two columns — note name left, its combined lines right —
   with a subtle rule between notes */
/* The two reference sections (periodic / other) sit a grid row apart. */
/* A divider line between the periodic and other sections, matching the one
   between note groups within a section. */
.ref-section + .ref-section {
    position: relative;
    margin-top: var(--grid);
}
.ref-section + .ref-section::before {
    content: '';
    position: absolute;
    top: calc(var(--grid) / -2);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--box-line);
}
/* The "(N/M)" count toggles which section shows first. */
.ref-counts { cursor: pointer; }
.ref-counts:hover { color: var(--bright); }
.backlink-group {
    display: flex;
    gap: var(--grid);
    align-items: flex-start;
}
.backlink-group + .backlink-group {
    position: relative;
    margin-top: var(--grid);
}
.backlink-group + .backlink-group::before {
    content: '';
    position: absolute;
    top: calc(var(--grid) / -2);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--box-line);
}
.backlink-note {
    display: block;
    line-height: var(--grid);
    width: calc(var(--grid) * 6);
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.backlink-lines { flex: 1; min-width: 0; }
.backlink-line {
    position: relative;
    color: var(--text);
    line-height: var(--grid);
    padding-left: calc((var(--bl-indent, 0) + 1) * var(--grid));
}
.backlink-line::before {
    content: '';
    position: absolute;
    left: calc(var(--bl-indent, 0) * var(--grid) + var(--grid) / 2 - 2.5px);
    top: calc(var(--grid) / 2 - 2.5px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
}
/* Collapsible embed lists: a parent line keeps its bullet and gains a chevron
   in the cell to its LEFT (same as the editor); collapsed by default, its
   descendants (.bl-hidden) are hidden. */
.backlink-line.bl-hidden { display: none; }
.bl-chev {
    position: absolute;
    left: calc((var(--bl-indent, 0) - 1) * var(--grid));
    top: 0;
    width: var(--grid);
    height: var(--grid);
    cursor: pointer;
}
.bl-chev::before {
    content: '';
    position: absolute;
    left: calc(var(--grid) / 2 - 2.5px);
    top: calc(var(--grid) / 2 - 3.5px);
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translateY(1px) rotate(45deg); /* down = expanded */
}
.backlink-line.bl-collapsed > .bl-chev::before {
    transform: translateX(-1px) rotate(-45deg); /* right = collapsed */
}
.bl-chev:hover::before { border-color: var(--bright); }

/* Task lines in backlinks/embeds keep their checkbox: the dot is replaced
   by a real clickable circle (.bl-dot) that toggles the source bullet */
.backlink-line.task::before { content: none; }
.bl-dot {
    position: absolute;
    left: calc(var(--bl-indent, 0) * var(--grid) + var(--grid) / 2 - 7px);
    top: calc(var(--grid) / 2 - 7px);
    width: 12px;
    height: 12px;
    border: 1px solid var(--muted);
    border-radius: 50%;
    cursor: pointer;
}
.bl-dot:hover { border-color: var(--bright); }
.backlink-line.done .bl-dot {
    background: var(--bright);
    border-color: var(--bright);
}
.backlink-line.done .bl-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 3px;
    border-left: 1.5px solid var(--panel);
    border-bottom: 1.5px solid var(--panel);
    transform: translate(-50%, -70%) rotate(-45deg);
}
.backlink-line.done {
    color: var(--muted);
    text-decoration: line-through;
}
.backlink-line.half .bl-dot {
    background: linear-gradient(to right, var(--bright) 50%, transparent 50%);
    border-color: var(--bright);
}
.backlink-line.cancel {
    color: var(--muted);
    text-decoration: line-through;
}
.backlink-line.cancel .bl-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    border-top: 1.5px solid var(--muted);
    transform: translate(-50%, -50%);
}
/* Copy-up dots (periodic embeds): hovering a plain bullet swaps it for an
   up arrow; clicking copies the line to the end of the open note */
.up-dot {
    position: absolute;
    left: calc(var(--bl-indent, 0) * var(--grid) + var(--grid) / 2 - 7px);
    top: calc(var(--grid) / 2 - 7px);
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.backlink-line:has(> .up-dot:hover)::before { display: none; }
/* the arrow: a centered stem under a centered chevron head */
.up-dot:hover::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 3px;
    width: 7px;
    height: 7px;
    border-left: 1.5px solid var(--bright);
    border-top: 1.5px solid var(--bright);
    transform: translateX(-50%) rotate(45deg);
}
.up-dot:hover::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    width: 1.5px;
    height: 8px;
    background: var(--bright);
    transform: translateX(-50%);
}

/* While the mention search runs, the box dims under 50% black */
.embed.searching .embed-box::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
}
/* Unlinked mentions read grey: they are candidates, not confirmed links */
.mention-group .backlink-line { color: var(--muted); }
/* [*] lines: the dot becomes a star */
.backlink-line.star::before {
    width: 13px;
    height: 13px;
    border-radius: 0;
    background: var(--bright);
    left: calc(var(--bl-indent, 0) * var(--grid) + var(--grid) / 2 - 6.5px);
    top: calc(var(--grid) / 2 - 6.5px);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Pop-up menus: [[ autocomplete and calendar category lists */
.pop-menu {
    position: absolute;
    z-index: 120;
    min-width: 140px;
    max-height: calc(var(--grid) * 9);
    overflow-y: auto;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--line);
}
.pop-menu.fixed { position: fixed; }
.pop-menu.hidden { display: none; }
.pop-item {
    padding: 0 10px;
    line-height: var(--grid);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}
.pop-item.selected, .pop-item:hover {
    color: var(--bright);
    background: rgba(255, 255, 255, 0.06);
}
.pop-item.muted { cursor: default; }
.pop-sub { color: var(--muted); }
/* An alias result's "・Note Name" suffix tracks the row colour (grey unfocused,
   bright when selected) at 50% opacity, so it stays half as visible either way. */
.pop-sub.alias-sub { color: inherit; opacity: 0.5; }
/* The note "…" menu opens leftward with right-aligned labels */
.pop-menu.menu-right .pop-item { text-align: right; }

/* Embed zone controls: square buttons, grid-aligned, right edge on a column */
.embed-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    height: var(--grid);
    margin: calc(var(--grid) * 2) 0 0 -6px;
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
}
.ctl {
    position: relative;
    width: var(--grid);
    height: var(--grid);
    padding: 0;
    border: 0;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--box-line);
    cursor: pointer;
    flex-shrink: 0;
}
.ctl:hover { box-shadow: 0 0 0 1px var(--bright); z-index: 1; }
.ctl::before, .ctl::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
}
.ctl:hover::before, .ctl:hover::after { border-color: var(--bright); }
/* Fold button: chevrons up = collapse all (majority open) */
.ctl-fold::before, .ctl-fold-lines::before, .ctl-fold-habits::before { left: 10px; top: 8px; transform: rotate(-135deg); }
.ctl-fold::after, .ctl-fold-lines::after, .ctl-fold-habits::after { left: 10px; top: 13px; transform: rotate(-135deg); }
/* ...chevrons down = expand all (majority collapsed) */
.ctl-fold.mode-expand::before, .ctl-fold-lines.mode-expand::before, .ctl-fold-habits.mode-expand::before { top: 6px; transform: rotate(45deg); }
.ctl-fold.mode-expand::after, .ctl-fold-lines.mode-expand::after, .ctl-fold-habits.mode-expand::after { top: 11px; transform: rotate(45deg); }
/* Order button: one chevron up beside one down */
.ctl-order::before { left: 5px; top: 11px; transform: rotate(-135deg); }
.ctl-order::after { left: 14px; top: 9px; transform: rotate(45deg); }

/* Title-row controls: positioned like the embed buttons so their right edge
   shares the embeds' grid column */
.title-row { position: relative; }
.title-controls {
    position: absolute;
    top: 0;
    left: -6px;
    width: calc(100% + 6px);
    width: round(down, calc(100% + 6px), var(--grid));
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}
.title-controls .ctl, .title-controls .cal-nav { pointer-events: auto; }
/* Each period nav button occupies exactly one grid square */
.title-controls .cal-nav {
    width: var(--grid);
    height: var(--grid);
    margin-right: 0;
}
.ctl-bookmark::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid var(--muted);
    transform: translate(-50%, -50%);
}
.ctl-bookmark::after { content: none; }
.ctl-bookmark:hover::before { border-color: var(--bright); }
.ctl-bookmark.bookmarked::before {
    background: var(--bright);
    border-color: var(--bright);
}

/* "…" note actions button: three horizontal dots */
.ctl-more::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--muted);
    transform: translate(-50%, -50%);
    box-shadow: -4px 0 0 var(--muted), 4px 0 0 var(--muted);
}
.ctl-more::after { content: none; }
.ctl-more:hover::before {
    background: var(--bright);
    box-shadow: -4px 0 0 var(--bright), 4px 0 0 var(--bright);
}

/* Red Delete item in the actions menu */
.pop-item.danger { color: var(--danger); }
.pop-item.danger:hover { color: var(--bright); background: var(--danger); }

/* Delete-confirm dialog: a label above the Ctrl+O-style input */
.del-prompt {
    padding: 10px 12px;
    line-height: var(--grid);
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}
@keyframes ov-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.search-input.shake {
    animation: ov-shake 0.3s;
    color: var(--danger);
}

/* References sort: revealed on hover, sits at the right of the title row.
   The content box layers above it. */
.ctl-ref-sort {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 0;
}
.embed:hover .ctl-ref-sort { opacity: 1; }
/* Periodic/other grouping toggle: two stacked bars, left of the mentions
   magnifier. */
.ctl-ref-group {
    position: absolute;
    right: calc(var(--grid) * 2);
    top: 0;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 0;
}
.embed:hover .ctl-ref-group, .ctl-ref-group.on { opacity: 1; }
.ctl-ref-group::before, .ctl-ref-group::after {
    content: '';
    position: absolute;
    left: 6px;
    width: 12px;
    height: 4px;
    box-shadow: inset 0 0 0 1px var(--muted);
}
.ctl-ref-group::before { top: 7px; }
.ctl-ref-group::after { top: 13px; background: var(--muted); }
.ctl-ref-group:hover::before { box-shadow: inset 0 0 0 1px var(--bright); }
.ctl-ref-group:hover::after { background: var(--bright); }
/* Unlinked mentions: a magnifier directly left of the sort button. (Defined
   AFTER .ctl so position:absolute wins the specificity tie.) */
.ctl-mentions {
    position: absolute;
    right: var(--grid);
    top: 0;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 0;
}
.embed:hover .ctl-mentions, .ctl-mentions.on { opacity: 1; }
.ctl-mentions::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--muted);
    border-radius: 50%;
}
.ctl-mentions::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 13px;
    width: 4px;
    height: 1.5px;
    background: var(--muted);
    transform: rotate(45deg);
    transform-origin: left center;
}
.ctl-mentions:hover::before, .ctl-mentions.on::before { border-color: var(--bright); }
.ctl-mentions:hover::after, .ctl-mentions.on::after { background: var(--bright); }
.embed-box { position: relative; z-index: 1; }

/* Search overlay (Ctrl+O / Cmd+O) */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    background: rgba(0, 0, 0, 0.65);
}
.overlay.hidden { display: none; }
.search-panel {
    width: 360px;
    max-width: 90vw;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--bright); /* solid white border on overlays */
}
.search-input {
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    outline: none;
    font: inherit;
    color: var(--text);
}
.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}
.search-results li {
    padding: 3px 12px;
    line-height: var(--grid);
    color: var(--muted);
    cursor: pointer;
}
.search-results li.selected,
.search-results li:hover {
    color: var(--bright);
    background: rgba(255, 255, 255, 0.06);
}

/* ---------- attachments ---------- */
/* Media embeds (![[file.ext]]). Widths snap to the grid like other embeds. */
.attach-img {
    display: block;
    max-width: round(down, calc(100% + 6px), var(--grid));
    max-height: calc(var(--grid) * 16);
    box-shadow: 0 0 0 1px var(--box-line);
}
.attach-audio {
    display: block;
    width: round(down, calc(100% + 6px), var(--grid));
    height: var(--grid);
}
.attach-pdf {
    display: block;
    width: round(down, calc(100% + 6px), var(--grid));
    height: calc(var(--grid) * 20);
    border: 0;
    box-shadow: 0 0 0 1px var(--box-line);
}
.attach-link { color: var(--bright); }
.attach-link:hover { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }

/* Upload notice toast + drag-over outline. */
.ov-toast {
    position: fixed;
    bottom: var(--grid);
    left: 50%;
    transform: translateX(-50%);
    padding: 0 var(--grid);
    height: calc(var(--grid) * 1.5);
    line-height: calc(var(--grid) * 1.5);
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--line);
    color: var(--text);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 200;
}
.ov-toast.show { opacity: 1; }
body.drag-file::after {
    content: '';
    position: fixed;
    inset: 0;
    box-shadow: inset 0 0 0 2px var(--bright);
    pointer-events: none;
    z-index: 150;
}

/* Browse Attachments: thumbnail/open link + editable name in the first cell. */
.cat-table .att-open { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 8px; color: var(--muted); }
.cat-table .att-open:hover { color: var(--bright); }
.att-thumb {
    width: var(--grid);
    height: var(--grid);
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--box-line);
    display: block;
}
.att-name {
    cursor: text;
    outline: none;
    border-radius: 3px;
    padding: 0 4px;
    color: var(--text);
}
.att-name:focus { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }