/*
 * Aether 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.
 */

:root {
  color-scheme: light only;
  --base-spacing: 16px;
  --ink: #121212;
  --ink-soft: #5f5f5f;
  --ink-faint: #929292;
  --paper: #ffffff;
  --surface-subtle: #f5f5f5;
  --surface-hover: #e9e9e9;
  --wash: var(--surface-subtle);
  --line: #d8d8d2;
  --line-strong: #1b1b1b;
  --focus: #121212;
  --danger: #8f2525;
  --interactive-hover-bg: var(--ink);
  --interactive-hover-fg: var(--paper);
  --color-primary: var(--ink);
  --color-box: var(--paper);
  --color-orange: #9b3e0d;
  --color-red: var(--danger);
  --color-danger: var(--danger);
  --color-success: #285a3d;
  /* One height for every inline chip: tags, schedule badges, filter chips. */
  --chip-h: 1.6rem;
  --form-radius: 0;
  --button-radius: 0;
  --font-stack-sans-serif: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --font-stack-headings: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --font-stack-monospace: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

*, *::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: rgba(255, 255, 255, 0.96);
  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: rgba(255, 255, 255, 0.94);
  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 rgba(0, 0, 0, 0.16);
}

.command-sheet::backdrop { background: rgba(255, 255, 255, 0.78); 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 rgba(0, 0, 0, 0.14);
}

.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: grayscale(1); }
.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: #deded8; }
.contrib-grid .lvl-2 { background: #a7a7a1; }
.contrib-grid .lvl-3 { background: #5f5f5b; }
.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: grayscale(1); }
.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; }
/* The two urgency states have to be told apart at a glance, so they sit further
   apart than the shared --color-orange / --danger pair does. */
.task-meta__due.is-due-today,
.task-detail-chip.is-due-today { color: #b45309; }
.task-meta__due.is-overdue,
.task-detail-chip.is-overdue { color: #c62828; }
.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 { color: var(--ink-soft); }
.project-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: rgba(255, 255, 255, 0.76); backdrop-filter: blur(2px); }
.sidebar-modal {
  border-left: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: -8px 0 0 rgba(0, 0, 0, 0.1);
}
.sidebar-modal::before { content: "aether / command"; display: block; padding: 0.48rem 0.75rem; border-bottom: 1px solid var(--ink); color: var(--ink-soft); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.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: "− "; }

/* Respect the requested white UI even when the operating system is dark. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light only; }
  html, body, body.development { background: var(--paper); color: var(--ink); }
  .sidebar-modal, .date-time-picker__trigger, .date-time-picker__panel { background: var(--paper); color: var(--ink); border-color: var(--ink); }
  input[type="time"], input[type="date"], input[type="datetime-local"] { background: var(--paper); color: var(--ink); border-color: var(--line); }
  .calendar-title, .calendar-tab, .calendar-nav-link { color: var(--ink); }
  .calendar-tab.is-active { background: var(--ink); color: var(--paper); }
  .calendar-day, .calendar-gutter { background: var(--paper); border-color: var(--line); }
  .calendar-hour-label, .calendar-day-label { color: var(--ink-soft); }
}

@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 black shadows and aliased chrome
 * text. Shared with the standalone library at github.com/bananatron/namespace.
 * ========================================================================== */

:root {
  --ink: #000000;
  --line-strong: #000000;
  --focus: #000000;

  /* Ordered dither, drawn as pixels rather than faked with opacity. */
  --dither-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='%23000'/%3E%3C/svg%3E");
  --dither-25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0z' fill='%23000'/%3E%3C/svg%3E");
  --dither-50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23000'/%3E%3C/svg%3E");
  --dither-75: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1H0zM0 1h1v1H0z' fill='%23000'/%3E%3C/svg%3E");

  /* Six title bar rules, two pixels apart. */
  --pinstripe: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 2px);

  --mac-shadow: 2px 2px 0 var(--ink);

  /* Two corners, not four. Controls curve, surfaces stay square. */
  --button-radius: 3px;
  --form-radius: 3px;

  /* Three control heights, so buttons, inputs and chips never disagree. */
  --control-h: 28px;
  --control-h-md: 24px;
  --control-h-sm: 20px;
}

/* 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,
.sidebar-modal::before {
  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;
}

/* Each strip gets a close box, 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. */
.home-session__header::before,
.auth-panel__header::before,
.command-sheet > header::before,
.sidebar-modal::before {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  border-radius: var(--button-radius);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5 8.5 8.5M8.5 1.5 1.5 8.5' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center;
  background-size: 9px 9px;
  box-shadow: 0 0 0 2px var(--paper);
}

.home-session__header::before,
.auth-panel__header::before,
.command-sheet > header::before {
  content: "";
}

/* The side panel labels itself instead of carrying a close box. */
.sidebar-modal::before {
  display: flex;
  gap: 0.6rem;
  width: auto;
  height: auto;
  border: 0;
  background-image: none;
  box-shadow: none;
}

.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(--ink); }
.sidebar-modal { box-shadow: -3px 0 0 var(--ink); }

/* The framed entry screens sit on a dithered desktop, edge to edge. */
body:has(.home-screen),
body:has(.auth-screen) {
  background-color: var(--paper);
  background-image: var(--dither-50);
}

/* 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(--ink); }

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

/* Checked boxes get the X, which is the part everybody remembers. */
input[type="checkbox"]:checked {
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1 11 11M11 1 1 11' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 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(--ink);
  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); }