/*
 * Trellis terminal-web system
 * One restrained visual language: white paper, near-black ink, one mono face,
 * hairline structure, and interaction states that read like a focused TUI.
 * Read in the dark scheme the same sheet is lit from behind instead of in
 * front; every rule below is written against tokens, so the two come out of
 * one set of declarations. Tokens live in variables.css.
 */

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

html {
  background: var(--paper);
  font-size: 15px;
  scrollbar-color: var(--ink) var(--wash);
}

html,
body,
body.development {
  min-height: 100%;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-stack-sans-serif);
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}

body { padding: 0 0 4rem; }

/* --- Text rendering ----------------------------------------------------
 * One smoothing policy for the whole app, set here and nowhere else.
 *
 * Body copy takes the platform's own smoothing rather than forced greyscale.
 * This is near-black ink on white paper at small mono sizes; `antialiased`
 * drops the extra coverage the OS rasteriser would add and leaves the stems
 * thin and washed, which reads as blur on Safari in particular. `auto` lets
 * macOS, Windows and Linux each render the face the way they hint it.
 *
 * The aliased bitmap chrome lives in the retro layer at the bottom of this
 * file and is scoped there, so it can't leak into running text.
 * --------------------------------------------------------------------- */
html {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  /* Keep iOS Safari from inflating text on rotation. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

a { color: inherit; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-family: var(--font-stack-headings);
  font-weight: 500;
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(1.45rem, 3vw, 2rem); }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55em;
  height: 1.55em;
  padding: 0 0.32em;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.72em;
  line-height: 1;
  text-transform: uppercase;
}

main,
body > .pa3 {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: 1.35rem clamp(1rem, 3vw, 2.4rem) 3rem;
}

/* Primary shell */
#main-nav {
  position: sticky;
  z-index: 100;
  top: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(14px);
}

#main-nav section {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1600px;
  height: 3.25rem;
  margin: 0 auto;
}

#main-nav a {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0 0.72rem;
  border: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 3.25rem;
  text-decoration: none;
  white-space: nowrap;
}

#main-nav a:hover,
#main-nav a:focus-visible {
  background: var(--interactive-hover-bg);
  color: var(--interactive-hover-fg);
}

#main-nav a.selected {
  border: 0;
  background: var(--ink);
  color: var(--paper);
}

#main-nav a.selected::after { display: none; }

#main-nav .app-mark {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.35rem 1rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

#main-nav .app-mark:hover,
#main-nav .app-mark:focus-visible { background: transparent; color: var(--ink); }

.terminal-cursor {
  animation: terminal-blink 1.1s steps(1, end) infinite;
}

@keyframes terminal-blink { 50% { opacity: 0; } }

.nav-command {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.nav-command kbd {
  color: var(--ink-faint);
  font-size: 0.62rem;
}

.nav-command:hover kbd,
.nav-command:focus-visible kbd,
.nav-command.selected kbd { color: inherit; opacity: 0.65; }

#main-nav .profile-command {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.6rem;
}

.profile-icon {
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid currentColor;
  border-radius: 0;
  filter: grayscale(1) contrast(1.08);
}

.profile-icon.is-large { width: 3.4rem; height: 3.4rem; }

.hotkey-hint {
  position: fixed;
  z-index: 80;
  right: 1rem;
  bottom: 0.8rem;
  display: flex;
  gap: 0.85rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.hotkey-hint span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Keyboard reference */
.command-sheet {
  width: min(42rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--shadow);
}

.command-sheet::backdrop { background: var(--veil); backdrop-filter: blur(3px); }

.command-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--ink);
}

.command-sheet h2 { margin: 0.12rem 0 0; font-size: 1.25rem; }
.command-sheet__eyebrow { color: var(--ink-soft); font-size: 0.66rem; text-transform: uppercase; }

.command-sheet__close {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.command-sheet__grid { display: grid; grid-template-columns: 1fr 1fr; }
.command-sheet__grid section { padding: 1.15rem; }
.command-sheet__grid section + section { border-left: 1px solid var(--line); }
.command-sheet__grid h3 { margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.command-sheet__grid p { display: grid; grid-template-columns: 8rem 1fr; align-items: center; min-height: 2rem; margin: 0; border-top: 1px dotted var(--line); font-size: 0.76rem; }
.command-sheet__grid p span { color: var(--ink-soft); }
.command-sheet__keys { display: inline-flex; align-items: center; gap: 0.28rem; color: var(--ink) !important; }
.command-sheet__keys kbd { flex: 0 0 auto; }

/* Notices */
.flashes {
  position: fixed;
  z-index: 200;
  top: 4rem;
  right: 1rem;
  width: min(28rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
}

.flash::before { content: "! "; font-weight: 600; }
.flash--notice::before { content: "✓ "; }

/* Primitive controls */
.field { margin-bottom: 1.25rem; }

legend,
.legend,
label,
.label {
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.field > label:not(.clip)::before,
.field > .label:not(.clip)::before { content: "> "; color: var(--ink); }

.input,
textarea,
select,
input[type="tel"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="text"] {
  min-height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  caret-color: var(--ink);
}

textarea { min-height: 8rem; padding: 0.7rem 0.8rem; resize: vertical; }

.input:hover,
textarea:hover,
select:hover,
input[type="tel"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="text"]:hover { border-color: var(--ink-soft); }

.input:focus,
textarea:focus,
select:focus,
input:focus {
  z-index: 1;
  border-color: var(--ink);
  outline: 0;
  box-shadow: 3px 3px 0 var(--ink);
}

input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }

select {
  height: 2.7rem;
  padding-inline: 0.75rem 2rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem !important;
  min-width: 1.15rem !important;
  height: 1.15rem;
  margin: 0 0.5rem 0 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  appearance: none;
}

input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }

input[type="submit"],
button,
.button {
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font-stack-sans-serif);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

input[type="submit"]:hover,
button:hover,
.button:hover,
.button:focus-visible {
  border-color: var(--ink);
  background: var(--interactive-hover-bg);
  color: var(--interactive-hover-fg);
  filter: none;
}

button.is-primary,
.button.is-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

button.is-primary:hover,
.button.is-primary:hover { background: var(--paper); color: var(--ink); }

button.is-danger,
.button.is-danger { border-color: var(--danger); background: var(--paper); color: var(--danger); }
button.is-danger:hover, .button.is-danger:hover { background: var(--danger); color: var(--paper); }

button.is-link,
.button.is-link { min-height: auto; padding-inline: 0; border-color: transparent; background: transparent; color: var(--ink); }
button.is-link:hover,
button.is-link:focus-visible,
.button.is-link:hover,
.button.is-link:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
}

button.is-small, .button.is-small { min-height: 2rem; padding: 0.38rem 0.65rem; font-size: 0.7rem; }
button.is-tiny, .button.is-tiny { min-width: 2.25rem; min-height: 2.25rem; padding: 0.35rem 0.55rem; font-size: 0.72rem; }

.hint { color: var(--ink-soft); font-size: 0.7rem; opacity: 1; }
.hint::before { content: "// "; }

.box {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  color: var(--ink);
}

.box.has-shadow { box-shadow: 4px 4px 0 var(--line); }
.box.is-red, .box.is-danger { border-color: var(--danger); background: var(--paper); color: var(--danger); }
.box.is-blue { border-color: var(--ink); background: var(--wash); color: var(--ink); }

.tag,
.tag[class*="tag--"],
.timing-badge,
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-h);
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

.tag::before { content: "#"; color: var(--ink); }
a.tag:hover,
a.tag:focus-visible,
.filter-chip:hover,
.filter-chip:focus-visible {
  border-color: var(--interactive-hover-bg);
  background: var(--interactive-hover-bg);
  color: var(--interactive-hover-fg);
}

a.tag:hover::before,
a.tag:focus-visible::before { color: inherit; }

.filter-chip {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.65rem;
}

/* Home and entry */
.home-screen { display: grid; place-items: center; min-height: calc(100vh - 3.25rem); padding-bottom: 5rem; }

.home-session { width: min(100%, 47rem); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--line); }
.home-session__header, .entry-screen__visual figcaption {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--ink);
  color: var(--ink-soft);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.home-session__header span:last-child::before { content: "● "; color: var(--ink); }
.home-session__body { padding: clamp(1rem, 4vw, 2.4rem); }
.home-prompt { margin: 0 0 1.2rem; font-size: 0.82rem; text-align: left; }
.home-prompt > span { color: var(--ink-faint); }
.home-prompt--muted { margin: 1.2rem 0 0; color: var(--ink-soft); }
.home-landscape { display: block; width: min(100%, 28rem); margin: 0 auto; border: 1px solid var(--ink); image-rendering: pixelated; filter: var(--art-filter); }
.home-activity { display: grid; gap: 0.7rem; width: min(100%, 47rem); margin-top: 2.4rem; overflow: hidden; }
.home-activity__label { color: var(--ink-soft); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; }

.contrib-grid { justify-content: flex-start; overflow-x: auto; padding-bottom: 0.3rem; }
.contrib-grid .day { width: 10px; height: 10px; border: 1px solid var(--line); background: var(--paper); }
.contrib-grid .lvl-1 { background: color-mix(in srgb, var(--ink) 14%, var(--paper)); }
.contrib-grid .lvl-2 { background: color-mix(in srgb, var(--ink) 38%, var(--paper)); }
.contrib-grid .lvl-3 { background: color-mix(in srgb, var(--ink) 66%, var(--paper)); }
.contrib-grid .lvl-4 { background: var(--ink); }

.entry-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  width: min(100%, 68rem);
}
.entry-screen__copy { padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--line); }
.entry-screen__eyebrow { color: var(--ink-soft); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.entry-screen h1 { margin: 1rem 0 1.4rem; font-size: clamp(3.3rem, 8vw, 6.8rem); font-weight: 500; letter-spacing: -0.08em; line-height: 0.84; }
.entry-screen__copy > p { max-width: 34rem; margin: 0 0 2rem; color: var(--ink-soft); font-size: clamp(0.9rem, 1.5vw, 1.08rem); }
.entry-screen__action { gap: 2rem; }
.entry-screen__visual { margin: 0; border: 1px solid var(--ink); box-shadow: 9px 9px 0 var(--line); }
.entry-screen__visual img { display: block; width: 100%; image-rendering: pixelated; filter: var(--art-filter); }
.entry-screen__visual figcaption { border-top: 1px solid var(--ink); border-bottom: 0; }

.auth-screen {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 8rem);
}
.auth-panel { width: min(100%, 34rem); border: 1px solid var(--ink); box-shadow: 7px 7px 0 var(--line); }
.auth-panel__header { display: flex; justify-content: space-between; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--ink); color: var(--ink-soft); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.auth-panel__body { padding: clamp(1.2rem, 5vw, 2.2rem); }
.auth-panel h1 { margin: 0 0 0.5rem; }
.auth-panel__intro { margin: 0 0 1.8rem; color: var(--ink-soft); font-size: 0.8rem; }
.auth-panel .field { margin-bottom: 0.9rem; }
.auth-code { font-size: 1.5rem !important; letter-spacing: 0.35em; text-align: center; }

/* Lists, toolbars and tables */
.tasks-toolbar { min-height: 2.5rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--ink); }
.tasks-toolbar__filters { gap: 0.45rem; }
.tasks-toolbar__add::after { content: " new"; margin-left: 0.35rem; }

.filters-panel { padding: 1rem; border-color: var(--ink); box-shadow: 4px 4px 0 var(--line); }
.filters-panel::before { content: "filter / query"; display: block; margin-bottom: 0.8rem; color: var(--ink-soft); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }

table { width: 100%; border: 0; background: transparent; }
table tr, table tr:nth-child(even) { background: var(--paper); }
table td { padding: 0.78rem 0.55rem; border-bottom: 1px solid var(--line); }
table tr:hover td, table tr:focus-within td { background: var(--surface-hover); }

.task-card {
  min-height: 3.8rem;
  padding: 0.65rem 0.35rem;
  border-bottom: 1px solid var(--line);
}
.task-card:hover, .task-card:focus-within { background: var(--surface-hover); outline-offset: -2px; }
.task-title { font-size: 0.9rem; font-weight: 500; }
.task-title.link { display: inline-flex; align-items: center; min-height: 1.6rem; }
.task-meta { color: var(--ink-soft); font-size: 0.7rem; }
.task-meta__due, .task-meta__done { color: inherit; }
.task-meta__due.is-due-today,
.task-detail-chip.is-due-today { color: var(--warning); }
.task-meta__due.is-overdue,
.task-detail-chip.is-overdue { color: var(--overdue); }
.task-complete-btn { width: 2.3rem; height: 2.3rem; color: var(--ink-faint); }
.task-complete-btn:hover,
.task-complete-btn:focus-visible { background: var(--interactive-hover-bg); color: var(--interactive-hover-fg); }
.task-complete-btn.is-completed { color: var(--ink); }
.task-score { color: var(--ink-soft); }
.task-score__unit { color: var(--ink-soft); }
.task-pts--t1,
.task-pts--t2,
.task-pts--t3,
.task-pts--t4,
.task-pts--t5 { color: var(--ink-soft); }
.task-action-btn { width: 2.25rem; height: 2.25rem; border: 1px solid transparent; color: var(--ink-soft); }
.task-action-btn:hover,
.task-action-btn:focus-visible { border-color: var(--interactive-hover-bg); background: var(--interactive-hover-bg); color: var(--interactive-hover-fg); }

.score-summary { padding: 0.8rem 1rem; border-color: var(--line); }
.score-summary__value { font-size: 1.35rem; font-weight: 500; }
.score-summary__label,
.score-summary__sub,
.score-summary__foot { color: var(--ink-soft); }
.score-summary__bar { height: 2px; border-radius: 0; background: var(--line); }
.score-summary__bar-fill { border-radius: 0; background: var(--ink); }
.score-summary__delta.is-positive, .score-summary__delta.is-negative { color: var(--ink); }

/* Metrics are data-first, with rules instead of cards. */
.metrics-stat-grid { gap: 0; border-block: 1px solid var(--ink); }
.metrics-stat, .metrics-panel { border: 0; background: var(--paper); box-shadow: none; }
.metrics-stat { padding: 1.1rem; border-right: 1px solid var(--line); }
.metrics-stat:last-child { border-right: 0; }
.metrics-stat--points { background: var(--ink); color: var(--paper); }
.metrics-stat--points .metrics-stat__label, .metrics-stat--points .metrics-stat__note,
.metrics-stat--points .metrics-stat__note.is-positive,
.metrics-stat--points .metrics-stat__note.is-negative { color: var(--paper); opacity: 0.65; }
.metrics-stat strong { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 500; letter-spacing: -0.06em; }
.metrics-stat__note, .metrics-stat__note.is-positive, .metrics-stat__note.is-negative { color: var(--ink-soft); }
.metrics-panel { padding: 1rem 0; border-bottom: 1px solid var(--ink); }
.metrics-panel__header h2::before { content: ":: "; color: var(--ink-faint); }
.metrics-chart__plot { border: 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 24%, var(--line) 25%); }
.metrics-chart__day.is-today .metrics-chart__plot { border-color: var(--ink); background-color: var(--wash); }
.metrics-progress { height: 3px; background: var(--line); }
.metrics-progress div, .metrics-progress--muted div, .metrics-progress--goal div, .metrics-progress--time div { background: var(--ink); }
.metrics-week-days span { border: 0; border-top: 1px solid var(--line); background: var(--paper); }
.metrics-week-days span.is-today { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.metrics-week-days span.is-today strong, .metrics-week-days span.is-today em { color: var(--paper); }
.metrics-week-days em { color: var(--ink-soft); }
.metrics-week-days__caption { color: var(--ink-soft); }
.metrics-month { border: 0; border-bottom: 1px solid var(--ink); padding-inline: 0; background: var(--paper); box-shadow: none; }
.metrics-month h2::before { content: ":: "; color: var(--ink-faint); }
.metrics-month h2, .metrics-month__figures dt { color: var(--ink-soft); }
.metrics-month__figures dd { font-weight: 500; }

/* No colour to separate the two series here, so points read solid and tracked
   time reads dithered — the same trick the contribution grid uses. */
.metrics-chart__bar--points, .metrics-legend__key--points { background-color: var(--ink); }
.metrics-chart__bar--time, .metrics-legend__key--time { border: 1px solid var(--ink); background-color: var(--paper); background-image: var(--dither-50); }
.metrics-chart__bar.is-empty { border: 0; background: none; }
.metrics-header { border-bottom: 1px solid var(--ink); padding-bottom: 0.75rem; }
.metrics-header h1 { font-weight: 500; letter-spacing: -0.04em; }
.metrics-eyebrow, .metrics-header__note { color: var(--ink-soft); }
.metrics-live { border: 0; border-bottom: 1px solid var(--ink); padding-inline: 0; background: var(--paper); }
.metrics-live__pulse { border-radius: 0; background: var(--ink); }
.metrics-live__label, .metrics-live__clock span { color: var(--ink-soft); }
.metrics-live__clock strong { font-weight: 500; letter-spacing: -0.04em; }
.metrics-band__header h2::before { content: ":: "; color: var(--ink-faint); }
.metrics-band__header span, .metrics-project__rate, .metrics-project__figures dt, .metrics-projects__totals span, .metrics-chart__day span, .metrics-chart__day small, .metrics-week article small { color: var(--ink-soft); }
.metrics-page .is-positive, .metrics-page .is-negative { color: var(--ink); }
.metrics-project { border-top-color: var(--line); }
.metrics-projects__totals { border-top-color: var(--ink); }
.metrics-project__figures dd { font-weight: 500; }

/* Projects */
.project-page-header { padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.project-eyebrow, .page-eyebrow { color: var(--ink-soft); }
.project-eyebrow::before, .page-eyebrow::before { content: "~/"; color: var(--ink); }
.project-card { padding: 0.9rem 0.75rem; border-width: 0 0 1px; }
.project-card:hover,
.project-card:focus-visible { background: var(--surface-hover); filter: none; }
.project-running-indicator { border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); }
.project-running-indicator::before { content: "● "; }
.project-stopwatch { padding: 1.25rem; border-color: var(--ink); box-shadow: 5px 5px 0 var(--line); }
.project-stopwatch strong { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 500; letter-spacing: -0.06em; }
.project-stopwatch .project-time-summary__secondary strong { font-size: clamp(0.82rem, 2vw, 1rem); letter-spacing: -0.03em; }
.work-session-row { padding: 0.85rem 0; border-width: 0 0 1px; }
.work-session-row.is-running { border-color: var(--ink); background: var(--wash); }
.project-empty { padding: 3rem 1rem; border-style: dashed; }
.project-empty > .ph { color: var(--ink); }
.project-form > .field > p { margin-block: 0.35rem 0; color: var(--ink-soft); font-size: 0.7rem; }
.project-form > .field > p::before { content: "// "; }

/* Calendar */
.calendar-header { gap: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--ink); }
.calendar-title { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.03em; }
.calendar-tabs { display: flex; gap: 0; }
.calendar-tab { margin: 0; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 0; font-size: 0.68rem; }
.calendar-tab + .calendar-tab { border-left: 0; }
.calendar-tab.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.calendar-nav { display: flex; align-items: center; margin-left: auto; }
.calendar-nav-link { margin: 0; padding: 0.35rem 0.5rem; font-size: 0.68rem; }
.calendar-tab:not(.is-active):hover,
.calendar-tab:not(.is-active):focus-visible,
.calendar-nav-link:hover,
.calendar-nav-link:focus-visible {
  border-color: var(--interactive-hover-bg);
  background: var(--interactive-hover-bg);
  color: var(--interactive-hover-fg);
}
.calendar-grid { gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.calendar-day, .calendar-gutter { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--paper); }
.calendar-day.is-today { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.calendar-day-label { color: var(--ink-soft); font-size: 0.68rem; }
.calendar-item, .calendar-item.is-block, .calendar-item.is-event, .calendar-item.is-all-day {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  opacity: 1;
}
a.calendar-item, a.calendar-item:link, a.calendar-item:visited, a.calendar-item:hover, a.calendar-item:active { color: var(--ink); }
.calendar-item.is-block { background: var(--wash); border-style: dashed; }
.calendar-item.is-all-day { background: var(--ink); color: var(--paper); }
.calendar-item:hover, .calendar-item:focus-within { z-index: 999 !important; background: var(--interactive-hover-bg); color: var(--interactive-hover-fg); box-shadow: 3px 3px 0 var(--line); }
a.calendar-item:hover,
a.calendar-item:focus-visible { border-color: var(--interactive-hover-bg); color: var(--interactive-hover-fg); }
.calendar-now-line { height: 1px; background: var(--ink); }
.calendar-now-line::before { content: ">"; position: absolute; left: -0.55rem; top: -0.7rem; color: var(--ink); }
.calendar-24h { background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 60px); }

/* Side panels are command panes, not floating app windows. */
.modal-overlay { background: var(--veil); backdrop-filter: blur(2px); }
.sidebar-modal {
  border-left: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: -8px 0 0 var(--shadow);
}
.sidebar-modal__header, .sidebar-modal__footer { border-color: var(--ink); }
.sidebar-modal__content { padding: 1.2rem; }
.sidebar-modal__footer { padding: 0.8rem; }
.button-group [data-toggle-target="tab"] { min-height: 2.8rem; border: 0; border-right: 1px solid var(--line); }
.button-group [data-toggle-target="tab"].is-active { border-bottom: 0; background: var(--ink); color: var(--paper); }
.editor-body { border-color: transparent; line-height: 1.7; }
.editor-body:focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* Account and reading surfaces */
.profile-header { border-color: var(--ink); }
.profile-email, .profile-action__body p { color: var(--ink-soft); font-family: inherit; }
.profile-action-list { border-color: var(--ink); }
.profile-action { border-color: var(--line); }
.profile-action__icon { border-radius: 0; border-color: var(--line); color: var(--ink); }

.notes.show main article,
.journal_entries.show main article { border-width: 0 0 1px; box-shadow: none; }

details > summary { list-style: none; }
details > summary::before { content: "+ "; }
details[open] > summary::before { content: "− "; }

@media (max-width: 900px) {
  #main-nav { overflow-x: auto; padding-inline: 0.5rem; scrollbar-width: none; }
  #main-nav section { width: max-content; min-width: 100%; }
  #main-nav .fg1 { min-width: 0.3rem; }
  #main-nav a { flex-grow: 0; }
  .nav-command span { display: none; }
  .nav-command kbd { color: inherit; }
  .entry-screen { grid-template-columns: 1fr 0.72fr; gap: 2rem; }
  .task-actions { width: auto; opacity: 0.7; }
}

@media (max-width: 680px) {
  html { font-size: 14px; }
  body { padding-bottom: 3.5rem; }
  main, body > .pa3 { padding: 1rem 0.8rem 2rem; }
  #main-nav .app-mark { padding-right: 0.55rem; }
  #main-nav .app-mark span:first-child { font-size: 0; }
  #main-nav .app-mark span:first-child::after { content: ">$"; font-size: 0.8rem; }
  #main-nav a { padding-inline: 0.5rem; }
  .profile-icon { width: 1.45rem; height: 1.45rem; }
  .hotkey-hint { right: 0.55rem; bottom: 0.5rem; }
  .command-sheet__grid { grid-template-columns: 1fr; }
  .command-sheet__grid section + section { border-top: 1px solid var(--line); border-left: 0; }
  .entry-screen { grid-template-columns: 1fr; padding-block: 2rem; }
  .entry-screen h1 { font-size: clamp(3.3rem, 20vw, 5rem); }
  .entry-screen__visual { width: min(86%, 22rem); margin-left: auto; }
  .home-screen { display: block; min-height: auto; }
  .home-session, .home-activity { margin-inline: auto; }
  .metrics-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-stat:nth-child(2) { border-right: 0; }
  .metrics-stat:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  /* Three tiles across two columns leaves a hole; the last one takes the row. */
  .metrics-stat-grid--3 .metrics-stat:last-child { grid-column: 1 / -1; border-right: 0; }
  .metrics-chart { gap: 0.2rem; }
  .metrics-project__figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metrics-week { grid-template-columns: 1fr; }
  .project-page-header { align-items: flex-start; }
  .project-stopwatch { align-items: stretch; }
  .project-timer-start { grid-template-columns: 1fr; }
  .calendar-header { align-items: flex-start; }
  .calendar-title { width: 100%; }
  .calendar-nav { width: 100%; margin-left: 0; overflow-x: auto; }
  .calendar-grid-month { grid-template-columns: repeat(7, minmax(3.5rem, 1fr)); overflow-x: auto; }
  .calendar.calendar-week { overflow-x: auto; }
  .calendar.calendar-week .calendar-grid-week { width: 780px; }
  .tasks-table td:nth-child(3) { display: none; }
  .task-card { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .task-complete-btn { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }
  .task-actions { grid-column: 2 / -1; }
}

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

/* ==========================================================================
 * Retro Macintosh layer
 *
 * The terminal system above stays intact. This layer pushes it toward System 6
 * and 7: dither instead of grey, pinstriped title bars, System 7 push buttons
 * with a default ring, X checkboxes, hard offset shadows and aliased chrome
 * text. It is a second pass over the same tokens, not a second palette, so it
 * inverts with them. Shared with the standalone library at
 * github.com/bananatron/namespace.
 * ========================================================================== */

/* Chrome text renders aliased so it reads like a bitmap face.
 *
 * `none` only reads as a bitmap when the glyph lands on whole device pixels.
 * Blink snaps it and gets the intended hard edge; Safari rasterises the same
 * fractional size with smoothing switched off and the result is fuzzy rather
 * than crisp, so Safari keeps the platform default instead. Gecko ignores the
 * property outright. `hanging-punctuation` ships in Safari alone, which makes
 * this query a stand-in for "not Safari". */
@supports not (hanging-punctuation: first) {
  #main-nav,
  kbd,
  .button,
  button,
  input[type="submit"],
  legend,
  .legend,
  label,
  .label,
  .eyebrow,
  .home-session__header,
  .auth-panel__header,
  .command-sheet__eyebrow,
  .entry-screen__eyebrow {
    -webkit-font-smoothing: none;
  }
}

/* --- Menu bar ---------------------------------------------------------- */

#main-nav {
  height: 1.9rem;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  backdrop-filter: none;
}

#main-nav section { height: 1.9rem; }

#main-nav a {
  padding: 0 0.6rem;
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.9rem;
}

#main-nav .app-mark {
  padding-inline: 0.4rem 0.9rem;
  font-size: 0.75rem;
}

/* The slot on the far left where the Apple used to sit. */
#main-nav .app-mark::before {
  content: "\25A0";
  margin-right: 0.45rem;
  font-size: 0.62rem;
}

#main-nav .profile-command { padding-inline: 0.5rem; }
.profile-icon { width: 1.4rem; height: 1.4rem; }

/* --- Title bars -------------------------------------------------------- */

/* Panels that already carry a header strip become real Mac title bars. */
.home-session__header,
.auth-panel__header,
.entry-screen__visual figcaption,
.command-sheet > header {
  position: relative;
  align-items: center;
  padding-block: 0.35rem;
  background-image: var(--pinstripe);
  background-position: 0 center;
  background-size: 100% 12px;
  background-repeat: repeat-x;
}

/* A strip gets a close box only when its panel can close, and its label sits
   on paper so the stripes break around it the way they do in System 7. The
   box carries an X, because an empty square only reads as "close" to people
   who were there. Panels that cannot close keep the stripes and no box. */
.command-sheet > header::before {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  border-radius: var(--button-radius);
  background: var(--paper) var(--mark-close) no-repeat center;
  background-size: 9px 9px;
  box-shadow: 0 0 0 2px var(--paper);
}

.command-sheet > header::before {
  content: "";
}

.home-session__header > *,
.auth-panel__header > *,
.entry-screen__visual figcaption > *,
.command-sheet > header > * {
  position: relative;
  padding-inline: 0.5rem;
  background: var(--paper);
}

.command-sheet > header > div { padding-block: 0.15rem; }

/* --- Hard shadows ------------------------------------------------------ */

.home-session,
.auth-panel,
.entry-screen__copy,
.entry-screen__visual,
.project-stopwatch,
.filters-panel,
.flashes,
.box.has-shadow {
  border-color: var(--ink);
  box-shadow: var(--mac-shadow);
}

.command-sheet { box-shadow: 4px 4px 0 var(--shadow); }
.sidebar-modal { box-shadow: -3px 0 0 var(--shadow); }

/* The framed entry screens sit on a dithered desktop, edge to edge.
 *
 * The desktop is pinned to the viewport instead of tiled down the body, and
 * that is the whole reason it is a layer rather than a background on the body
 * box. The dither cell is one CSS pixel, so the tile repeats every two, and
 * two CSS pixels are a whole number of device pixels only where the device
 * pixel ratio is a whole number. At the 125% and 175% scaling that Windows
 * ships and most HiDPI Linux desktops use, the tile lands on fractions, the
 * browser has to round it differently at each scroll offset, and the dots
 * strobe: measured in Chrome, eight consecutive one-pixel scroll steps drew
 * the backdrop eight different ways at 1.25x and at 1.75x. Average ink does
 * not move while that happens, which is why it reads as a shimmer rather than
 * as a flash, and why it only shows up once the page is scrolling.
 *
 * No tile size fixes this. A one-pixel cell at 1.25x is 1.25 device pixels
 * whatever `background-size` says, so the only way to keep this exact pattern
 * is to stop moving it. Pinned, the raster is identical at every scroll offset
 * at every ratio, and a desktop that holds still under its windows is the more
 * faithful reading of the thing being imitated anyway.
 *
 * The cost is that a composited fixed layer turns off subpixel antialiasing
 * for the text scrolling over it, so small type on these four screens is
 * greyscale-smoothed and about five percent lighter. That is the trade: the
 * shimmer is visible on every scroll, the smoothing is visible side by side.
 *
 * Paper comes off the body so the layer is not painted over; a negative
 * z-index puts it under the content but still above the root background, which
 * already carries paper. */
body:has(.home-screen),
body:has(.auth-screen) {
  background-color: transparent;
}

body:has(.home-screen)::before,
body:has(.auth-screen)::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background-color: var(--paper);
  background-image: var(--desktop-texture);
  pointer-events: none;
}

/* The dither is a backdrop, never a text background. A 50% checkerboard eats
   the antialiased edge of a glyph, so running text on it reads as a badly
   hinted face, and `--ink-soft` on it disappears outright.
 *
 * Paper therefore goes on the screen's boxes as a group. Naming the panels one
 * at a time is what left the signed-out entry screen on bare dither while the
 * signed-in home was fine: a panel added later had to remember to join the
 * list, and the failure was unreadable text rather than a missing style.
 * Opting out is the part that has to be deliberate now. */
.home-screen > *,
.auth-screen > *,
.entry-screen > * {
  background-color: var(--paper);
}

/* `.entry-screen` is a layout grid, not a window; it lets the desktop through
   between its two panels. */
.home-screen > .entry-screen {
  background-color: transparent;
}

.home-activity { padding: 0.8rem; border: 1px solid var(--ink); }

/* --- Push buttons ------------------------------------------------------ */

input[type="submit"],
button,
.button {
  min-height: var(--control-h);
  border-radius: var(--button-radius);
  font-weight: 700;
  line-height: 1;
}

button.is-small, .button.is-small { min-height: var(--control-h-md); }
button.is-tiny, .button.is-tiny { min-height: var(--control-h-sm); }

/* Inputs share the button height so a form lines up across a row. */
.input,
textarea,
select,
input[type="tel"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="text"] {
  min-height: var(--control-h);
  border-radius: var(--form-radius);
}

select { height: var(--control-h); }

kbd {
  min-height: var(--control-h-sm);
  border-radius: var(--button-radius);
  line-height: 1;
}

.tag, .filter-chip, .timing-badge {
  min-height: var(--chip-h);
  border-radius: var(--button-radius);
  line-height: 1;
}

button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
  background: var(--interactive-hover-bg);
  color: var(--interactive-hover-fg);
}

button:active,
.button:active,
input[type="submit"]:active {
  background: var(--ink);
  color: var(--paper);
}

/* A primary button is a colour change and nothing else, so a row of buttons
   never steps up and down. */
button.is-primary,
.button.is-primary {
  margin: 0;
  box-shadow: none;
}

button.is-primary:hover,
.button.is-primary:hover { background: var(--paper); color: var(--ink); }

button.is-danger:hover,
button.is-danger:focus-visible,
.button.is-danger:hover,
.button.is-danger:focus-visible { background: var(--danger); color: var(--paper); }

button.is-link, .button.is-link { border-radius: 0; font-weight: 400; }

button:disabled,
.button:disabled,
button[disabled] {
  border-color: var(--ink-faint);
  background-image: var(--dither-50);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Welded runs and tabs stay square. */
.button-group [data-toggle-target="tab"],
.calendar-tab { border-radius: 0; }

kbd { box-shadow: 1px 1px 0 var(--shadow); }

/* --- Controls ---------------------------------------------------------- */

/* Checked boxes get the X, which is the part everybody remembers. */
input[type="checkbox"]:checked {
  background: var(--paper) var(--mark-check) no-repeat center / 100% 100%;
  box-shadow: none;
}

input[type="radio"]:checked {
  background: var(--paper) radial-gradient(circle at 50% 50%, var(--ink) 0 3px, transparent 3.5px);
  box-shadow: none;
}

select { box-shadow: var(--mac-shadow); }
select:focus { box-shadow: var(--mac-shadow); }

input[type="range"] { appearance: none; height: 16px; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid var(--ink);
  background-color: var(--paper);
  background-image: var(--dither-25);
}
input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 16px;
  margin-top: -6px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 1px 1px 0 var(--shadow);
  appearance: none;
}

/* --- Data surfaces ----------------------------------------------------- */

/* Four dither levels instead of four greys. */
.contrib-grid .day { border-color: var(--line); background-color: var(--paper); background-image: none; }
.contrib-grid .lvl-1 { border-color: var(--ink); background-image: var(--dither-12); }
.contrib-grid .lvl-2 { border-color: var(--ink); background-image: var(--dither-25); }
.contrib-grid .lvl-3 { border-color: var(--ink); background-image: var(--dither-50); }
.contrib-grid .lvl-4 { border-color: var(--ink); background-color: var(--ink); background-image: none; }

.metrics-chart__bar--points,
.score-summary__bar-fill,
.metrics-progress div {
  background-color: var(--ink);
  background-image: repeating-linear-gradient(-45deg, var(--paper) 0 1px, transparent 1px 5px);
}

.metrics-stat--points { background-image: none; }

.project-empty { background-color: var(--paper); }

.project-running-indicator { border-radius: 0; }

/* --- Scrollbars -------------------------------------------------------- */

/* Only lands where the browser still draws classic scrollbars. Overlay
   scrollbars ignore both these rules and scrollbar-color. */
html { scrollbar-color: auto; }

::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track {
  border-left: 1px solid var(--ink);
  background-color: var(--paper);
  background-image: var(--dither-25);
}
::-webkit-scrollbar-thumb { border: 1px solid var(--ink); background: var(--paper); }

/* --- Touch focus zoom -------------------------------------------------- */

/* iOS Safari zooms the page when it focuses a field under 16px and never
   zooms back, which pushes form footers off-screen. The mobile root is 14px,
   so rem-sized fields fall below that line; hold every text-entry control at
   16px on small or touch screens. Last in the cascade so it wins. */
@media (max-width: 680px), (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="color"], [type="image"], [type="hidden"]),
  textarea,
  select,
  [contenteditable]:not([contenteditable="false"]) {
    font-size: 16px !important;
  }
}