/* HomeOps — dark, OLED-first ("Nameplate" direction). One accent color
(red) exists only for overdue/danger — everything else is white at
varying opacity for hierarchy, on a true #000 ground so OLED panels can
actually turn pixels off. Flat rows with hairline dividers, not bordered
cards: the flat-list-of-rows pattern is the one piece of real visual
structure, same as the tree spine below.
Fonts are self-hosted (app/static/fonts/) rather than loaded from a CDN —
this app still needs to work with no internet; see CLAUDE.md. */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/archivo-700.woff2") format("woff2");
}
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/public-sans-400.woff2") format("woff2");
}
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/public-sans-500.woff2") format("woff2");
}
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/public-sans-600.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}
:root {
--paper: #000000;
--ink: #FFFFFF;
--ink-2: rgba(255,255,255,.70);
--ink-3: rgba(255,255,255,.45);
--line: rgba(255,255,255,.14);
--hover: rgba(255,255,255,.06);
--press: rgba(255,255,255,.10);
--bad: #FF453A;
--bad-wash: rgba(255,69,58,.09);
--bad-wash-hover: rgba(255,69,58,.14);
--bad-wash-active:rgba(255,69,58,.18);
--tap: 44px;
--row-h: 48px;
--sidebar-w: 272px;
--panel-w: 300px;
--gallery-h: 330px;
--display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
--body: "Public Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas,
"Liberation Mono", monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--body);
font-size: 16px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
font-variant-numeric: tabular-nums;
}
a { color: var(--ink); }
/* --- chrome ------------------------------------------------------------- */
/* Below ~900px: today's phone flow, a plain top bar. At ≥900px the top bar
disappears entirely — the sidebar carries the wordmark and nav instead,
so a second copy of the same chrome would just cost vertical space. */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 52px;
padding: 0 18px;
padding-top: env(safe-area-inset-top);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 10;
background: var(--paper);
}
.wordmark {
font-family: var(--display);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.01em;
color: var(--ink);
text-decoration: none;
}
.topnav { display: flex; gap: 4px; align-items: center; }
.menu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: var(--tap);
height: var(--tap);
padding: 0;
border: 1px solid var(--line);
background: transparent;
color: var(--ink);
cursor: pointer;
flex-shrink: 0;
}
.menu-toggle[aria-expanded="true"] { background: var(--hover); border-color: var(--ink); }
/* Mobile-only dropdown: the sidebar (below) carries these same links at
>=900px, but the sidebar itself is display:none under that width, so the
phone chrome needs its own way to reach them — see menu-toggle above. */
.mobile-menu[hidden] { display: none; }
.mobile-menu {
position: fixed;
top: calc(52px + env(safe-area-inset-top));
left: 0;
right: 0;
z-index: 9;
max-height: calc(100vh - 52px - env(safe-area-inset-top));
overflow-y: auto;
background: var(--paper);
border-bottom: 1px solid var(--line);
padding: 4px 18px 14px;
box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
}
.mobile-menu .side-nav { margin: 0; }
.app { display: block; }
.shell {
padding: 18px 18px 80px;
max-width: 680px;
margin: 0 auto;
}
/* --- headings ----------------------------------------------------------- */
.page-head { margin-bottom: 24px; }
h1 {
font-family: var(--display);
font-weight: 700;
font-size: 1.65rem;
line-height: 1.15;
letter-spacing: -0.005em;
margin: 0 0 4px;
text-wrap: balance;
}
h2 {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 10px;
color: var(--ink-3);
}
.typeline {
margin: 0 0 4px;
color: var(--ink-3);
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
}
.lede { margin: 0 0 4px; color: var(--ink-2); font-size: 0.92rem; }
.prose { margin: 10px 0 0; max-width: 62ch; }
.quiet { color: var(--ink-3); margin: 0 0 14px; max-width: 62ch; font-size: 0.9rem; }
.hint { color: var(--ink-3); font-size: 0.82rem; margin: 6px 0 0; }
.error { color: var(--bad); margin: 8px 0 0; font-weight: 600; }
/* --- breadcrumb --------------------------------------------------------- */
.trail {
font-family: var(--mono);
font-size: 0.76rem;
margin-bottom: 14px;
color: var(--ink-3);
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.trail a { color: var(--ink-3); text-decoration: none; }
.trail a:hover { color: var(--ink); }
.trail-sep { color: var(--line); }
/* --- tree ----------------------------------------------------------------
The hierarchy is the point of this app: a hairline spine shows
containment. Same flat-row language as tasks/documents/history below. */
.tree { list-style: none; margin: 0; padding: 0; }
.tree .tree {
margin-left: 22px;
padding-left: 12px;
border-left: 1px solid var(--line);
}
.node {
display: flex;
align-items: center;
gap: 12px;
min-height: var(--row-h);
padding: 7px 4px;
margin: 0 -4px;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
}
.tree > li:last-child > .node { border-bottom: 0; }
.node:active { background: var(--press); }
@media (hover: hover) { .node:hover { background: var(--hover); } }
.node.active { background: var(--hover); box-shadow: inset 2px 0 0 var(--ink); font-weight: 700; }
.node-glyph { display: flex; align-items: center; justify-content: center; font-size: 1.05rem; width: 1.15em; flex-shrink: 0; }
.node-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: 1.02rem; }
.node-meta { display: flex; gap: 6px; flex-shrink: 0; }
.chip {
font-family: var(--mono);
font-size: 0.76rem;
color: var(--ink-2);
border: 1px solid var(--line);
border-radius: 100px;
padding: 3px 10px;
white-space: nowrap;
}
.chip-overdue { color: var(--bad); border-color: var(--bad); }
/* A user's label — a small circle holding their 1-2 char initials,
identifying who a task is assigned to/added by/etc. wherever that's
shown (see docs/tasks-and-scheduling.md for the initials+color
definition). Color is per-user, set inline via the
--user-color/--user-color-fill custom properties (see design-decisions.md
for why this is a deliberate, scoped exception to "one hue, red").
vertical-align keeps it level with surrounding text when used inline
(task.html's "Added by/Assigned to" line), not just in flex rows. */
.user-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
vertical-align: middle;
border-radius: 50%;
border: 1.5px solid var(--user-color, var(--line));
background: var(--user-color-fill, transparent);
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 700;
line-height: 1;
color: var(--ink);
}
/* --- sections ------------------------------------------------------------ */
.section {
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.section.danger { border-top-style: dashed; }
/* --- specs (Details) ------------------------------------------------------
auto-fit grid: one column on a phone, more when the viewport actually
has room, no breakpoints to maintain. */
.specs {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.spec {
display: flex;
flex-direction: column;
gap: 3px;
padding: 11px 12px;
background: var(--paper);
font-size: 0.95rem;
}
.spec dt {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink-3);
}
.spec dd { margin: 0; font-family: var(--mono); white-space: pre-wrap; }
/* --- two-column entity layout ---------------------------------------------
Only at real desktop/tablet width (see media query below) — Details and
To-do aren't sequential reading with Documents and Contains, so
they don't need to be forced into one column just because there's room. */
.detail-columns { display: block; }
.col-left, .col-right { display: block; }
.col-divider { display: none; }
/* --- files ------------------------------------------------------------- */
.files { list-style: none; margin: 0 0 16px; padding: 0; }
.file {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
min-height: var(--row-h);
padding: 7px 4px;
margin: 0 -4px;
border-bottom: 1px solid var(--line);
}
.files > li:last-child .file { border-bottom: 0; }
.files-bordered > li:first-child .file { border-top: 1px solid var(--line); }
.file-name { font-weight: 600; word-break: break-word; color: var(--ink); text-decoration: none; }
.file-name:hover { text-decoration: underline; }
.file-dash { color: var(--ink-3); font-size: 0.82rem; }
.file-source { font-size: 0.82rem; color: var(--ink-3); text-decoration: none; }
.file-source:hover { color: var(--ink); text-decoration: underline; }
.file-size { color: var(--ink-3); font-family: var(--mono); font-size: 0.78rem; flex-shrink: 0; margin-left: auto; }
.file-remove-form { display: flex; }
.file-remove {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--bad);
cursor: pointer;
flex-shrink: 0;
}
@media (hover: hover) { .file-remove:hover { background: var(--bad-wash); } }
.uploader { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.file-pick {
flex: 1;
min-width: 200px;
position: relative;
display: flex;
align-items: center;
min-height: var(--tap);
padding: 0 14px;
border: 1px dashed var(--line);
color: var(--ink-3);
background: transparent;
cursor: pointer;
}
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-pick:focus-within { border-color: var(--ink); }
/* Fixed 148px thumbnails, flush against each other, capped at 3 columns via
gallery-box's max-width — auto-fill drops to fewer columns on narrower
viewports on its own. */
.gallery-box {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: calc(148px * 3);
max-height: var(--gallery-h);
margin-bottom: 14px;
}
.gallery-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: none;
}
.gallery-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, 148px);
gap: 0;
}
.shot { position: relative; margin: 0; }
.shot-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 3px 6px;
background: rgba(0, 0, 0, .68);
color: rgba(255, 255, 255, .92);
font-size: 0.68rem;
line-height: 1.4;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
opacity: 0;
transition: opacity .12s ease;
}
.shot-caption:focus { opacity: 1; }
@media (hover: hover) {
.shot:hover .shot-caption { opacity: 1; }
.shot-caption:hover { opacity: 1; background: rgba(0, 0, 0, .85); text-decoration: underline; }
}
/* On a touchscreen there's no hover to reveal these, and :focus-within needs
a keyboard — so they'd otherwise be permanently invisible (present but
opacity:0) on the primary target device. Show them plainly instead. */
@media (hover: none) {
.shot-caption { opacity: 1; background: rgba(0, 0, 0, .55); }
}
.shot-remove-form {
position: absolute;
top: 4px;
right: 4px;
z-index: 2;
opacity: 0;
transition: opacity .12s ease;
}
.shot-remove-form:focus-within { opacity: 1; }
@media (hover: hover) { .shot:hover .shot-remove-form { opacity: 1; } }
@media (hover: none) { .shot-remove-form { opacity: 1; } }
.shot-remove {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .6);
color: var(--bad);
cursor: pointer;
}
@media (hover: hover) { .shot-remove:hover { background: rgba(0, 0, 0, .8); } }
.shot img {
display: block;
width: 148px;
height: 148px;
object-fit: cover;
border: 1px solid var(--line);
}
/* Overlay scrollbar: no track, invisible until scroll (toggled in app.js),
positioned outside .gallery-scroll so it doesn't get carried away by its
own scroll offset. */
.gallery-scrollbar-thumb {
position: absolute;
top: 0;
right: 2px;
width: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, .35);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.gallery-scrollbar-thumb.visible { opacity: 1; }
.gallery-resizer {
flex: 0 0 auto;
height: 9px;
margin-top: 2px;
cursor: row-resize;
background: transparent;
}
@media (hover: hover) { .gallery-resizer:hover { background: var(--hover); } }
.gallery-resizer.dragging { background: var(--press); }
/* --- lightbox: enlarged photo + navigation rail ----------------------------
Rail docks right by default (20vw, drag-resizable from its left edge, same
technique as .panel-resizer). On portrait screens it becomes a fixed-height
bottom filmstrip instead — see the orientation query below. */
.lightbox[hidden] { display: none; }
.lightbox {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
}
.lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.lightbox-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
}
.lightbox-remove-form {
position: absolute;
z-index: 3;
}
.lightbox-stage {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 56px;
}
.lightbox-image {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.lightbox-nav, .lightbox-close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line);
background: rgba(0, 0, 0, .5);
color: var(--ink);
cursor: pointer;
}
@media (hover: hover) {
.lightbox-nav:hover, .lightbox-close:hover { background: var(--hover); }
}
.lightbox-remove {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .6);
color: var(--bad);
cursor: pointer;
opacity: 0;
transition: opacity .12s ease;
}
/* :focus-visible, not :focus-within on the form — a plain click focuses this
submit button in most browsers (clicking it is exactly how you'd open the
delete-confirm dialog), and that focus lingers after the dialog is
dismissed, which would otherwise pin the icon visible for the rest of the
session. :focus-visible only fires for keyboard/Tab focus, so a mouse
click never sticks it open. */
.lightbox-remove:focus-visible { opacity: 1; }
@media (hover: hover) {
.lightbox-stage:hover .lightbox-remove { opacity: 1; }
.lightbox-remove:hover { background: rgba(0, 0, 0, .8); }
}
/* Same touchscreen problem as .shot-remove-form above: no hover to reveal
this on a phone, so it'd otherwise never be reachable there. */
@media (hover: none) { .lightbox-remove { opacity: 1; } }
.lightbox-nav {
position: absolute;
z-index: 2;
top: 50%;
transform: translateY(-50%);
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-rail {
position: relative;
flex: 0 0 auto;
width: 20vw;
min-width: calc(100px + 24px); /* one column at its min size + .lightbox-rail-scroll's padding */
max-width: 60vw;
border-left: 1px solid var(--line);
background: var(--paper);
}
.lightbox-rail-resizer {
position: absolute; top: 0; left: -3px; width: 7px; height: 100%;
cursor: col-resize; z-index: 5; background: transparent;
}
@media (hover: hover) { .lightbox-rail-resizer:hover { background: var(--hover); } }
.lightbox-rail-resizer.dragging { background: var(--press); }
/* Thumbnails flex between 100px and 148px (normal thumbnail size) as the
rail is resized. The track max must stay indefinite (1fr, not a fixed
px) — auto-fit/auto-fill counts columns using the *max* of minmax() when
both bounds are fixed lengths, which made this behave like a flat 148px
grid (columns only appeared every ~156px, with maxed-out columns unable
to grow further into whatever was left). With 1fr, counting falls back to
the 100px min, so columns add much more readily; the 148px cap then lives
on the thumbnail itself (not the track), so a track wider than 148px just
centers its thumbnail instead of leaving one big dead strip. */
.lightbox-rail-scroll {
height: 100%;
overflow-y: auto;
padding: 12px;
}
.rail-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px;
align-content: start;
}
.lightbox-rail-scroll .gallery-group-label { margin-top: 14px; }
.lightbox-thumb {
position: relative;
display: block;
width: 100%;
max-width: 148px;
aspect-ratio: 1 / 1;
justify-self: center;
padding: 0;
border: 2px solid transparent;
background: none;
cursor: pointer;
opacity: .55;
}
.lightbox-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (hover: hover) {
.lightbox-thumb:hover { opacity: .8; }
.lightbox-thumb:hover .shot-caption { opacity: 1; }
}
.lightbox-thumb.current { opacity: 1; border-color: var(--ink); }
/* Full-image view: when the photo currently shown came from a sub-item,
name it inside the image's own bottom-right corner, linking back to that
task/entity. right/bottom are set inline by app.js from the ![]()
's
actual rendered box — it's letterboxed by object-fit, so the caption
can't just hug the stage's corner without landing outside the photo. No
background: the photo shows through, legibility comes from the
text-shadow instead. */
.lightbox-caption {
position: absolute;
z-index: 2;
max-width: min(60%, 320px);
padding: 8px;
line-height: 1.2;
color: #fff;
font-size: 0.82rem;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 1px 10px rgba(0, 0, 0, .7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transition: opacity .12s ease;
}
.lightbox-caption:focus-visible { opacity: 1; }
@media (hover: hover) {
.lightbox-stage:hover .lightbox-caption { opacity: 1; }
.lightbox-caption:hover { text-decoration: underline; }
}
@media (hover: none) { .lightbox-caption:not([hidden]) { opacity: 1; } }
/* Bottom filmstrip only kicks in once the window is both portrait-shaped
AND narrow — orientation alone isn't enough: a tall-but-still-wide window
(e.g. narrowing a desktop window without shortening it) would otherwise
flip to the cramped bottom row while there's still plenty of width for a
perfectly good side rail. 700px keeps a tablet-in-portrait on the side
rail and only drops phones (and narrowed desktop windows) to the strip. */
@media (orientation: portrait) and (max-width: 700px) {
.lightbox { flex-direction: column; }
.lightbox-rail {
width: auto !important;
min-width: 0;
max-width: none;
flex: 0 0 auto;
height: 108px;
border-left: 0;
border-top: 1px solid var(--line);
}
.lightbox-rail-resizer { display: none; }
.lightbox-rail-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
}
.rail-group { display: contents; }
.lightbox-rail-scroll .gallery-group-label { display: none; }
.lightbox-thumb { width: 84px; height: 100%; flex: 0 0 auto; }
}
/* --- picker (type/user picker) ------------------------------------------- */
.picker { list-style: none; margin: 0; padding: 0; }
.picker a {
display: flex;
gap: 14px;
align-items: flex-start;
min-height: var(--row-h);
padding: 12px 4px;
margin: 0 -4px;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
}
.picker > li:last-child a { border-bottom: 0; }
@media (hover: hover) { .picker a:hover { background: var(--hover); } }
.pick-glyph { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; width: 1.2em; flex-shrink: 0; }
.pick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-label { font-weight: 600; }
.pick-blurb { color: var(--ink-3); font-size: 0.88rem; }
.pick-count { margin-left: auto; padding-left: 14px; align-self: center; color: var(--ink-3); font-size: 0.88rem; flex-shrink: 0; white-space: nowrap; }
.picker-btn {
display: flex;
width: 100%;
gap: 14px;
align-items: flex-start;
min-height: var(--row-h);
padding: 12px 4px;
margin: 0 -4px;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
text-align: left;
font: inherit;
color: var(--ink);
cursor: pointer;
}
@media (hover: hover) { .picker-btn:hover { background: var(--hover); } }
/* --- tasks ----------------------------------------------------------------- */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 18px;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: var(--tap);
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 100px;
font-size: 0.88rem;
color: var(--ink-2);
}
.filter-bar select {
width: auto;
min-height: var(--tap);
padding: 0 10px;
}
.task-rows { list-style: none; margin: 0; padding: 0; }
.task-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: var(--row-h);
padding: 7px 4px;
margin: 0 -4px;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
}
.task-rows > li:last-child .task-row { border-bottom: 0; }
.task-row:active { background: var(--press); }
@media (hover: hover) { .task-row:hover { background: var(--hover); } }
.task-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-name { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.task-meta { color: var(--ink-2); font-family: var(--mono); font-size: 0.8rem; }
.task-row-side { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
/* Overdue: a soft red wash that fades in/out (not a hard border — a real
gradient, not a box-shadow glow, which reads as a harsh vignette no
matter how it's tuned) at the outer edges of a run of overdue rows. When
two or more overdue rows sit next to each other the shared seam between
them shows neither a fade nor a hairline — only the outer top edge of
the first and outer bottom edge of the last row fade, so a consecutive
run reads as one merged block. See docs/design-decisions.md. */
.task-row.overdue {
--wash: var(--bad-wash);
--top-stop: transparent;
--bottom-stop: transparent;
background: linear-gradient(to bottom,
var(--top-stop) 0, var(--wash) 28px,
var(--wash) calc(100% - 28px), var(--bottom-stop) 100%);
}
.task-row.overdue:active { --wash: var(--bad-wash-active); }
@media (hover: hover) { .task-row.overdue:hover { --wash: var(--bad-wash-hover); } }
.task-rows > li:has(> .task-row.overdue) + li:has(> .task-row.overdue) > .task-row.overdue {
--top-stop: var(--wash);
}
.task-rows > li:has(> .task-row.overdue):has(+ li > .task-row.overdue) > .task-row.overdue {
--bottom-stop: var(--wash);
border-bottom: 0;
}
/* --- checklist (task prereqs) ---------------------------------------------- */
.checklist { list-style: none; margin: 0 0 16px; padding: 0; }
.checklist li {
display: flex;
align-items: center;
gap: 10px;
min-height: var(--row-h);
padding: 6px 0;
border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist-text { flex: 1; }
.checklist li.checked .checklist-text { color: var(--ink-3); text-decoration: line-through; }
.checkbox {
flex-shrink: 0;
width: 28px;
height: 28px;
border: 1px solid var(--line);
background: transparent;
color: var(--ink);
font-weight: 700;
cursor: pointer;
}
.checklist li.checked .checkbox { background: var(--ink); color: #000; border-color: var(--ink); }
/* --- view tabs -------------------------------------------------------------- */
.view-tabs {
display: flex;
gap: 18px;
margin-bottom: 20px;
border-bottom: 1px solid var(--line);
overflow-x: auto;
}
.view-tab {
padding: 10px 2px;
color: var(--ink-3);
text-decoration: none;
font-family: var(--mono);
font-weight: 500;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.03em;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.view-tab:hover { color: var(--ink); }
.view-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.view-tab-history { margin-left: auto; }
/* --- calendar ---------------------------------------------------------------- */
.cal-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 16px;
}
.cal-label { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.cal-nav-btns, .cal-view-toggle { display: flex; gap: 6px; }
.cal-scroll { overflow-x: auto; }
.cal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(92px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
min-width: 640px;
}
.cal-weekday {
text-align: center;
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink-3);
padding-bottom: 8px;
background: var(--paper);
border: 0;
}
.cal-day {
min-height: 84px;
padding: 6px;
background: var(--paper);
display: flex;
flex-direction: column;
gap: 3px;
}
.cal-day.out-of-month { opacity: 0.4; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--ink); }
.cal-day-num { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); font-weight: 500; }
.cal-day.today .cal-day-num { color: var(--ink); }
.cal-task {
display: block;
font-family: var(--mono);
font-size: 0.72rem;
padding: 1px 5px;
border: 1px solid var(--line);
color: var(--ink-2);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cal-task:hover { border-color: var(--ink); color: var(--ink); }
.cal-task.overdue { border-color: var(--bad); color: var(--bad); }
.cal-task.projected { border-style: dashed; }
.cal-task.user-colored { border-color: var(--user-color); background: var(--user-color-fill); color: var(--ink); }
.cal-task.user-colored:hover { border-color: var(--user-color); }
.cal-more { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
.cal-week-grid .cal-day { min-height: 220px; }
.cal-week-grid .cal-task { white-space: normal; font-size: 0.78rem; padding: 4px 6px; }
/* --- agenda -------------------------------------------------------------- */
.agenda-section { margin-bottom: 28px; }
.agenda-section h2 { display: flex; align-items: center; gap: 8px; }
.agenda-count { color: var(--ink-3); font-weight: 400; }
.agenda-more { padding: 14px 0; text-align: center; }
/* --- history ---------------------------------------------------------------- */
.history-rows { list-style: none; margin: 0; padding: 0; }
.history-row {
padding: 9px 4px;
margin: 0 -4px;
border-bottom: 1px solid var(--line);
}
.history-rows > li:last-child { border-bottom: 0; }
.history-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
text-decoration: none;
color: var(--ink);
}
@media (hover: hover) { .history-main:hover .history-name { text-decoration: underline; } }
.history-name { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.history-meta { color: var(--ink-2); font-family: var(--mono); font-size: 0.78rem; }
.history-sub {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 4px;
}
/* Plain inline text (not flex) — same pattern as task.html's "Added by"
line: a literal space in the markup separates the name from the badge,
and the bare name/colon text inherits this font/color/size directly, so
it's guaranteed to match .history-date rather than depending on flex gap
behavior around anonymous text-node items (which don't reliably space
themselves apart from an adjacent element). */
.history-who { color: var(--ink-3); font-family: var(--mono); font-size: 0.78rem; }
.history-who .user-label { width: 18px; height: 18px; font-size: 0.56rem; }
.history-date { color: var(--ink-3); font-family: var(--mono); font-size: 0.78rem; }
.history-undo-form { display: inline; margin-left: 4px; }
.history-undo {
background: none;
border: 0;
margin: 0;
padding: 0;
font: inherit;
color: var(--ink-3);
cursor: pointer;
text-decoration: none;
}
@media (hover: hover) { .history-undo:hover { color: var(--ink); } }
.history-sub-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* --- schedule picker --------------------------------------------------------- */
.sched-kinds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sched-kind {
display: flex;
align-items: center;
gap: 10px;
min-height: var(--tap);
padding: 0 14px;
border: 1px solid var(--line);
}
.sched-group {
margin: 0 0 16px;
padding: 14px;
border: 1px solid var(--line);
}
.sched-group legend { padding: 0 4px; color: var(--ink-3); font-family: var(--mono); font-size: 0.8rem; }
.sched-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.sched-row input[type="number"] { max-width: 100px; }
.sched-row select { width: auto; }
.sched-group input, .sched-group select { min-height: var(--tap); }
label.sub { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink-2); margin-top: 4px; }
span.sub { color: var(--ink-2); }
.sched-multi { margin-bottom: 10px; }
.sched-multi-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.sched-multi-row input[type="number"] { max-width: 100px; }
.sched-multi-row select { width: auto; }
.row-add {
background: none;
border: 0;
padding: 6px 2px;
font: inherit;
font-weight: 600;
color: var(--ink);
cursor: pointer;
}
.row-delete {
flex-shrink: 0;
width: 32px;
height: 32px;
min-height: 0;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-2);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.row-delete:hover { color: var(--bad); border-color: var(--bad); }
template { display: none; }
.cf-row {
border: 1px solid var(--line);
padding: 14px 14px 0;
margin-bottom: 12px;
}
.cf-remove { margin-bottom: 14px; }
@supports selector(:has(*)) {
.schedule-picker .sched-group { display: none; }
.schedule-picker:has(#sk-fixed_interval:checked) .sched-fixed_interval,
.schedule-picker:has(#sk-relative_interval:checked) .sched-relative_interval,
.schedule-picker:has(#sk-monthly_day:checked) .sched-monthly_day,
.schedule-picker:has(#sk-yearly_date:checked) .sched-yearly_date {
display: block;
}
}
/* --- forms ----------------------------------------------------------------- */
.form { max-width: 520px; }
.field { margin-bottom: 18px; }
.field-row { display: flex; gap: 24px; flex-wrap: wrap; }
.field-row > div { flex: 1; min-width: 160px; }
.field label {
display: block;
font-family: var(--mono);
font-size: 0.76rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
textarea, select {
width: 100%;
min-height: var(--tap);
padding: 9px 12px;
font: inherit;
color: var(--ink);
background: transparent;
border: 1px solid var(--line);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
select { color-scheme: dark; }
select option {
color: var(--ink);
background: var(--paper);
}
input:focus, textarea:focus, select:focus,
a:focus-visible, button:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 1px;
}
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Lucide's sprite ships paths with no fill/stroke of their own (by design —
each icon is meant to inherit these from whatever wraps it), so every