/* Breakpoints — these four widths, and no others.
   Every stylesheet in the app uses them; a fifth value is a bug.

     1200  wide → standard    three-up grids drop to two, side panels unstick
      900  standard → tablet  sidebars stack, masthead labels become icons
      700  tablet → phone     the tab row becomes the bottom bar, one column
      560  phone              full-bleed rows, 16px inputs, --tap targets

   Container queries are exempt: they measure a pane, not the viewport, so
   files.css, organization.css and plot.css set their own thresholds.

   700 is mirrored once in JavaScript, in core/viewport.js, for the handful of
   decisions CSS cannot make: picking a layout, swapping a component. Keep the
   two in step. Surfaces that need width to be usable at all pair 700 with
   (orientation: portrait) and show .rotate-gate instead — see .needs-landscape
   below. */

:root {
  --paper: #f4f1e8;
  --paper-raised: #fbf9f3;
  --ink: #171713;
  --muted: #777269;
  --line: #d8d3c8;
  --blue: #184fd1;
  --blue-soft: #dbe5ff;
  --red: #b53b2f;
  --green: #2f7458;
  --shadow: 0 20px 55px rgba(34, 31, 25, .12);
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --sans: "Avenir Next", Avenir, "Century Gothic", Futura, sans-serif;
  --text-meta: 9px;
  --text-label: 10px;
  --text-control: 11px;
  --text-body: 12px;
  --text-reading: 13px;
  --text-panel-title: 23px;
  --text-stat: 28px;
  --text-page-title: clamp(30.4px, 4vw, 48px);
  --tracking-label: .12em;
  /* The Asimov letterform itself, as a mask so one asset serves every mark and
     each one takes its colour from whatever it sits on. */
  --asimov-mark: url(/ASIMOV.svg) center / contain no-repeat;
  /* Two sizes of touch target: --tap for things you aim at (nav, menu rows,
     dialog buttons), --tap-dense for the tool clusters that sit inside a list
     row, where a generous target costs the row its text. */
  --tap: 34px;
  --tap-dense: 26px;
  /* The gutter between boxed panels on a workspace. One value so the files,
     samples, organization, graph and resources tabs sit on the same rhythm. */
  --panel-gap: 22px;
  --font-panel-title: 400 var(--text-panel-title)/1.2 var(--serif);
  --font-page-title: 400 var(--text-page-title)/.96 var(--serif);
}

* { box-sizing: border-box; }

html { background: var(--paper); overscroll-behavior-y: none; }

body {
  margin: 0;
  min-height: 100vh;
  overscroll-behavior-y: none;
  color: var(--ink);
  background: var(--paper);
  font: 14px/1.45 var(--sans);
  letter-spacing: .005em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 76% -10%, rgba(24, 79, 209, .075), transparent 28rem);
  pointer-events: none;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.panel-title { margin: 0; color: var(--ink); font: var(--font-panel-title); letter-spacing: -.02em; }

.masthead {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -.02em;
}

.wordmark-mark {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: italic 17px/1 var(--serif);
  transition: background .12s;
}

.wordmark:hover .wordmark-mark { background: var(--ink); color: var(--paper); }
.wordmark-logo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wordmark-glyph { width: 54%; height: 54%; background: currentColor; -webkit-mask: var(--asimov-mark); mask: var(--asimov-mark); }

/* Compact density, chosen in the administration console. */
:root[data-density="compact"] .shell { padding: 22px 0 60px; }
:root[data-density="compact"] .intro { margin-bottom: 18px; }
:root[data-density="compact"] .view-nav { margin-bottom: 18px; }
:root[data-density="compact"] .folder-board { gap: 22px; }
:root[data-density="compact"] .card-body { min-height: 132px; padding: 16px; }
:root[data-density="compact"] .admin-panel { padding: 11px 13px 13px; }
:root[data-density="compact"] .admin-tile { padding: 10px 12px; }

.account { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.account-name { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.account-name:hover { color: var(--ink); }
/* Generated caret, so app.js writing textContent can't wipe it. */
.account-name::after { content: ""; width: 0; height: 0; border: 3.5px solid transparent; border-bottom: 0; border-top-color: currentColor; opacity: .7; }
.logout { padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.masthead-right { display: flex; align-items: center; gap: 18px; }
.masthead-tools { display: flex; align-items: center; gap: 8px; }
.masthead-status { position: relative; min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 249, 243, .42); color: var(--muted); cursor: pointer; font-size: 10px; transition: border-color .12s, background .12s, color .12s; }
.masthead-status:hover, .masthead-status.is-active { border-color: var(--ink); background: var(--paper-raised); color: var(--ink); }
.masthead-status svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.masthead-status strong { min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 999px; background: rgba(23, 23, 19, .08); color: var(--ink); font-size: 9px; font-variant-numeric: tabular-nums; line-height: 1; }
.masthead-live-timers { display: flex; align-items: center; }
.masthead-live-timer { min-width: 0; display: grid; grid-template-columns: minmax(0, auto) auto; align-items: baseline; gap: 6px; max-width: 156px; padding: 0 9px; color: var(--blue); }
.masthead-live-timer + .masthead-live-timer { border-left: 1px solid #c7d5f5; }
.masthead-live-timer > span { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.masthead-live-timer time { font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.masthead-status.has-live { padding-left: 5px; }
.masthead-status.has-live:not(.has-overflow) > strong { display: none; }
.masthead-status.has-active { border-color: #94a9df; color: var(--blue); }
.masthead-status.has-active strong { background: var(--blue); color: white; }
.masthead-status.deadline-status.has-deadline { border-color: #d7a08f; color: #a0442e; }
.masthead-status.deadline-status.is-overdue { border-color: var(--red); background: rgba(181, 59, 47, .08); color: var(--red); }
.masthead-status.deadline-status.is-overdue strong { background: var(--red); color: white; }
.masthead-menu { position: relative; }
.masthead-icon { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; }
.masthead-icon:hover, .masthead-icon.is-active { background: rgba(23, 23, 19, .07); color: var(--ink); }
.masthead-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.masthead-badge { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; margin: 0; padding: 0 4px; border: 2px solid var(--paper); background: var(--blue); color: white; font-size: 9px; font-weight: 700; }
.masthead-badge[hidden] { display: none; }
.masthead-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 180px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); box-shadow: var(--shadow); }
.masthead-panel[hidden] { display: none; }
.masthead-panel button { display: block; width: 100%; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; font-size: 12px; }
.masthead-panel button:last-child { border-bottom: 0; }
.masthead-panel button:hover { background: rgba(23, 23, 19, .05); }
.install-app { padding: 2px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; }
.install-app[hidden] { display: none; }
.save-state { color: var(--green); transition: color .12s; }
.save-state.is-saving { color: var(--muted); opacity: .6; }
.save-state.is-error { color: var(--red); }

.shell { width: min(1120px, calc(100% - 44px)); margin: 0 auto; padding: 34px 0 90px; }
.intro { margin-bottom: 28px; }
.eyebrow { margin: 0 0 14px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
h1 { margin: 0; font: 400 clamp(48px, 7vw, 84px)/.9 var(--serif); letter-spacing: -.035em; }

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-raised);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.primary-action span { font-size: 19px; line-height: 0; }
.primary-action:hover { background: var(--blue); border-color: var(--blue); }
.primary-action:active { opacity: .75; }
.primary-action:disabled { opacity: .35; cursor: not-allowed; }

.view-nav { position: relative; display: flex; gap: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.nav-item {
  position: relative;
  padding: 0 0 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s;
}
.nav-item::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .14s ease-out; }
.nav-item:hover, .nav-item.is-active { color: var(--ink); }
.nav-item.is-active::after { transform: scaleX(1); }
.nav-count { min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; margin-left: 5px; padding: 1px 5px 0; border-radius: 999px; background: rgba(23, 23, 19, .07); font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1; vertical-align: middle; }

.app-view { min-height: 320px; }
.project-grid, .folder-dropzone { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--panel-gap); }

.missed-todo-alert { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: -19px 0 35px; padding: 13px 0; border-block: 1px solid #cf9c91; color: var(--ink); }
.missed-todo-alert[hidden] { display: none; }
.missed-todo-alert > div:first-child { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 10px; }
.missed-todo-alert span { color: var(--red); font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.missed-todo-alert strong { font: 400 17px/1.2 var(--serif); }
.missed-todo-alert small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.missed-todo-actions { display: flex; align-items: center; gap: 7px; }
.missed-todo-actions button { min-height: 30px; padding: 1px 10px 0; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; }
.missed-todo-actions button:hover { border-color: var(--ink); color: var(--ink); }
.missed-todo-actions [data-carry-missed] { border-color: var(--ink); color: var(--ink); }
.missed-todo-actions .missed-todo-dismiss { width: 30px; padding: 0 0 2px; border-color: transparent; font-size: 16px; }

.layout-toggle { display: flex; gap: 24px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.layout-toggle button { position: relative; padding: 0 0 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .12s; }
.layout-toggle button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .14s ease-out; }
.layout-toggle button:hover, .layout-toggle button[aria-pressed="true"] { color: var(--ink); }
.layout-toggle button[aria-pressed="true"]::after { transform: scaleX(1); }

.folder-board { display: grid; gap: 34px; }
.folder-section { position: relative; }
.folder-head { display: flex; align-items: flex-end; justify-content: space-between; min-height: 38px; border-bottom: 3px solid var(--folder-color); }
.folder-title-wrap { display: flex; align-items: center; gap: 9px; }
.folder-tab { display: inline-block; min-width: 130px; padding: 9px 16px 7px; border-radius: 5px 5px 0 0; background: var(--folder-color); color: var(--folder-ink); font: 400 18px/1 var(--serif); letter-spacing: .01em; }
.folder-title-button { border: 0; text-align: left; cursor: text; }
.folder-title-input { min-width: 130px; max-width: min(420px, 65vw); padding: 7px 15px 6px; border: 2px solid var(--folder-ink); border-radius: 5px 5px 0 0; outline: 0; background: var(--folder-color); color: var(--folder-ink); font: 400 18px/1 var(--serif); }
.folder-count { min-width: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1; }
.folder-action { padding: 7px 3px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.folder-action:hover { color: var(--blue); }
.folder-tools { display: flex; align-items: center; gap: 2px; padding-bottom: 2px; }
.folder-grip, .folder-note, .folder-color-control, .folder-delete { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); }
.folder-grip { cursor: grab; font-size: 15px; letter-spacing: -2px; }
.folder-grip:active { cursor: grabbing; }
.folder-note { cursor: pointer; }
.folder-note svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.folder-note.has-content { color: var(--blue); }
.folder-color-control { position: relative; border-radius: 50%; cursor: pointer; font-size: 14px; }
.folder-color-control input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.folder-grip:hover, .folder-note:hover, .folder-color-control:hover { color: var(--blue); background: rgba(23, 23, 19, .05); }
.folder-delete { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 17px; }
.folder-delete:hover { color: var(--red); }
.folder-section { transition: opacity .12s, box-shadow .12s; }
.folder-section.is-folder-dragging { opacity: .35; }
.folder-section.folder-drop-before { box-shadow: 0 -3px 0 var(--blue); }
.folder-section.folder-drop-after { box-shadow: 0 3px 0 var(--blue); }
.folder-dropzone { min-height: 108px; padding: 14px 0 0; border: 1px solid transparent; border-top: 0; }
.folder-dropzone.is-empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-top: 0; }
.folder-dropzone.is-over { border-color: var(--project-color, var(--blue)); background: rgba(24, 79, 209, .035); }
.drop-hint, .board-note { margin: 0; color: #aaa49a; font-size: 11px; }
.board-note { text-align: center; }

/* Pin glyph shared by the announcements board and tracker notes (core/pinning.js). */
.pin-mark { width: 15px; height: 15px; display: inline-grid; place-items: center; color: var(--muted); }
.pin-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pin-mark.is-pinned { color: #b8860b; }
.pin-mark.is-pinned svg > :first-child { fill: currentColor; }
.pin-toggle { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; opacity: .5; transition: opacity .12s, color .12s; }
.pin-toggle:hover { opacity: 1; color: var(--blue); }
.pin-toggle.is-pinned { opacity: 1; }
.pin-tape {
  position: absolute;
  top: -7px;
  width: 54px;
  height: 20px;
  background: rgba(233, 224, 197, .72);
  box-shadow: 0 1px 2px rgba(52, 38, 22, .2);
}
.pin-tape-left { left: -14px; transform: rotate(-34deg); }
.pin-tape-right { right: -14px; transform: rotate(34deg); }

.project-card {
  position: relative;
  grid-column: span 4;
  min-height: 225px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(251, 249, 243, .62);
  cursor: grab;
  transition: background .12s, border-color .12s, opacity .12s;
}
.project-card:hover { border-color: #b9b3a7; background: var(--paper-raised); }
.project-card:focus-visible, .project-row:focus-visible, .archive-row:focus-visible, .person-card:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }
.project-card:active { cursor: grabbing; }
.project-card.is-dragging { opacity: .35; }
.project-card.drop-before { border-color: var(--blue); }
.card-top { display: flex; align-items: flex-start; justify-content: flex-end; }
.card-body { min-height: 166px; flex: 1; display: flex; flex-direction: column; padding: 22px; }
.project-cover { width: 100%; height: 59px; display: block; object-fit: cover; border-bottom: 1px solid var(--line); }
.card-color-block { width: 100%; height: 30px; display: block; background: var(--project-color); border-bottom: 1px solid var(--line); }
.drag-mark { color: #aaa49a; font-size: 17px; letter-spacing: -2px; transition: color .12s; }
.project-card:hover .drag-mark { color: var(--blue); }
.project-card h2 { min-height: 2.16em; display: -webkit-box; margin: 8px 0 7px; overflow: hidden; font: 400 27px/1.08 var(--serif); letter-spacing: -.015em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.role { margin: 0; color: var(--muted); font-size: 12px; }
.card-role { margin: 0; color: var(--project-color); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.card-summary { min-height: 2.9em; display: -webkit-box; margin: 11px 0 0; padding-top: 10px; overflow: hidden; border-top: 1px solid var(--line); color: var(--muted); font: italic 12px/1.45 var(--serif); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-bottom { flex: 0 0 auto; margin-top: auto; }
.progress-line { height: 2px; margin: 18px 0 10px; background: var(--line); }
.progress-line span { display: block; height: 100%; background: var(--blue); }
.project-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.lane-count { display: flex; align-items: baseline; gap: 5px; }
.lane-count strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lane-count.lane-active strong { color: var(--blue); }
.lane-count.lane-done strong { color: var(--green); }
.contact-stack { min-height: 27px; display: flex; margin-top: 16px; }
.contact-dot { width: 27px; height: 27px; display: grid; place-items: center; margin-right: -6px; border: 2px solid var(--paper-raised); border-radius: 50%; background: var(--blue-soft); color: var(--blue); object-fit: cover; font: 600 10px/1 var(--sans); }

.project-rows { display: grid; gap: 1px; border-top: 1px solid var(--line); }
.project-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 13px 6px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.project-row:hover { background: var(--paper-raised); }
.row-mark { width: 32px; height: 32px; display: block; object-fit: cover; border: 1px solid var(--line); background: var(--project-color); }
.row-main { min-width: 0; }
.project-row h2 { margin: 0; overflow: hidden; font: 400 20px/1.15 var(--serif); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.project-row .card-role { margin-top: 4px; }
.row-folder { padding: 4px 10px; border-radius: 999px; background: var(--folder-color); color: var(--folder-ink); font-size: 10px; }
.project-row .contact-stack { min-height: 0; margin-top: 0; }
.project-row .project-meta { justify-content: flex-start; gap: 18px; }

.empty-state { padding: 72px 24px; border: 1px dashed #c8c2b7; text-align: center; }
.empty-glyph { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); font: italic 27px/1 var(--serif); }
.empty-state h2 { margin: 0 0 7px; font: 400 25px/1.2 var(--serif); }
.empty-state p { margin: 0; color: var(--muted); }

.section-label { display: flex; align-items: center; gap: 10px; margin: 35px 0 13px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.section-label::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.archive-list { display: grid; gap: 1px; border-top: 1px solid var(--line); }
.archive-row { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 15px 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.archive-row:hover { background: rgba(255, 255, 255, .32); }
.archive-row span:last-child { color: var(--muted); font-size: 12px; }


.people-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.people-groups { display: flex; flex-wrap: wrap; gap: 7px; }
.people-group-pill { height: 30px; display: inline-flex; gap: 3px; }
.people-group-filter, .people-group-edit { height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid var(--line); border-radius: 15px; background: transparent; color: var(--muted); clip-path: inset(0 round 15px); -webkit-mask-image: -webkit-radial-gradient(white, black); cursor: pointer; font-size: 10px; line-height: 1; }
.people-group-pill .people-group-filter { border-color: var(--line); background: color-mix(in srgb, var(--group-color) 10%, var(--paper)); }
.people-group-filter span { min-width: 1ch; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; padding-top: 1px; opacity: .65; font-variant-numeric: tabular-nums; line-height: 1; }
.people-group-filter:hover, .people-group-filter.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper-raised); }
.people-group-pill .people-group-filter:hover, .people-group-pill .people-group-filter.is-active { border-color: var(--group-color); background: var(--group-color); color: var(--ink); }
.people-group-edit { width: 28px; padding: 0 6px 2px; border-color: var(--line); letter-spacing: -1px; }
.people-group-edit:hover { color: var(--ink); }
.people-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px 34px; }
.person-card { position: relative; min-height: 190px; padding: 24px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.person-card::after { content: "↗"; position: absolute; top: 25px; right: 3px; color: var(--muted); transition: color .12s; }
.person-card:hover::after { color: var(--blue); }
.person-card-main { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 15px; padding-right: 32px; }
.person-photo { width: 58px; height: 58px; display: block; border-radius: 50%; object-fit: cover; filter: saturate(.78); }
.person-initials { display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper-raised); color: var(--blue); font: 400 18px/1 var(--serif); }
.person-name { margin: 0 36px 3px 0; font: 400 24px/1.15 var(--serif); letter-spacing: -.025em; }
.person-affiliation, .person-email { margin: 0; color: var(--muted); font-size: 12px; }
.scholar-line { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 16px 0 0 73px; color: var(--blue); text-decoration: none; font-size: 10px; }
.scholar-line span:nth-child(2) { color: var(--muted); }
.person-interests, .person-groups { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0 73px; }
.person-interests span { color: var(--muted); font-size: 9px; }
.person-interests span + span::before { content: "·"; margin-right: 5px; }
.person-groups span { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--group-color) 18%, transparent); color: var(--ink); font-size: 9px; }
.person-projects { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0 73px; }
.tag { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; }

.todo-view { display: grid; gap: 24px; }
.todo-tag-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.todo-tag-bar label { min-width: 180px; display: grid; gap: 5px; }
.todo-tag-bar label span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.todo-tag-bar input { padding: 6px 0; border: 0; border-bottom: 1px solid #aaa499; outline: 0; background: transparent; color: var(--ink); }
.todo-tag-bar input:focus { border-color: var(--blue); }
.tag-index { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tag-index button { padding: 5px 7px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; }
.tag-index button:hover, .tag-index button.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.tag-index button span { margin-left: 3px; opacity: .6; font-variant-numeric: tabular-nums; }
.tag-index-empty { align-self: center; color: var(--muted); font-size: 10px; }
.todo-workspace { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--panel-gap); align-items: start; }
.notes-panel, .daily-panel { min-width: 0; }
.todo-panel-head, .daily-head { min-height: 57px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.todo-panel-head span, .daily-head span { color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.todo-panel-head h2, .daily-head h2 { margin: 3px 0 0; font: 400 27px/1 var(--serif); }
.todo-panel-head strong { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.note-head-tools { display: flex; align-items: center; gap: 12px; }
.note-layout { display: flex; border: 1px solid var(--line); }
.note-layout button { width: 27px; height: 25px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; }
.note-layout button + button { border-left: 1px solid var(--line); }
.note-layout button:hover { color: var(--ink); }
.note-layout button[aria-pressed="true"] { background: var(--ink); color: var(--paper-raised); }
.note-composer { margin-top: 16px; border: 1px solid var(--line); background: rgba(251, 249, 243, .55); }
.note-composer:focus-within { border-color: var(--blue); }
.note-composer textarea { width: 100%; display: block; padding: 16px; border: 0; outline: 0; background: transparent; color: var(--ink); resize: vertical; }
.note-composer textarea::placeholder, .todo-composer textarea::placeholder { color: #aaa49a; }
.note-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-top: 1px solid var(--line); }
.note-composer span { color: var(--muted); font-size: 9px; }
.note-composer button, .todo-composer button { padding: 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 10px; }
.note-stack { display: grid; gap: var(--panel-gap); margin-top: 17px; }
.note-stack.columns-1 { grid-template-columns: minmax(0, 1fr); }
.note-stack.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.note-stack.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.note-card { min-height: 165px; padding: 17px; background: #fff0a8; box-shadow: 0 5px 12px rgba(66, 55, 23, .1); }
.note-card:nth-child(3n + 2) { background: #f6e49c; }
.note-card:nth-child(3n) { background: #f9edbd; }
.note-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-meta time { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.note-actions, .todo-entry-tools { display: flex; align-items: center; gap: 5px; }
.entry-edit, .entry-copy { padding: 2px 4px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; }
.entry-edit:hover, .entry-edit:focus-visible, .entry-copy:hover, .entry-copy:focus-visible { border-color: currentColor; color: var(--blue); }
.note-delete, .todo-delete { padding: 0 3px; border: 0; background: transparent; color: #aaa49a; cursor: pointer; font-size: 15px; }
.note-delete:hover, .todo-delete:hover { color: var(--red); }
.note-card p { margin: 9px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.item-tags button { padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--blue); cursor: pointer; font-size: 9px; }
.item-tags button:hover { border-color: currentColor; }
.date-controls { display: flex; align-items: center; gap: 6px; }
.date-controls button { width: 27px; height: 27px; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.date-controls button:hover { border-color: var(--ink); color: var(--ink); }
.date-controls input { width: 116px; height: 27px; padding: 3px 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
.date-controls input::-webkit-calendar-picker-indicator { width: 16px; margin: 0; cursor: pointer; opacity: .65; }
.date-controls button[data-todo-today] { width: auto; padding: 0 10px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.calendar-panel { min-width: 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 16px; }
.calendar-weekday { padding-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.calendar-day { position: relative; aspect-ratio: 1; padding: 4px 5px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; font-size: 10px; font-variant-numeric: tabular-nums; }
.calendar-day:hover { border-color: var(--blue); }
.calendar-day.is-outside { opacity: .35; }
.calendar-day.is-today { border-color: var(--ink); border-width: 2px; }
.calendar-day.is-selected { outline: 2px solid var(--blue); outline-offset: -2px; }
.calendar-day.is-todo-drop-target { z-index: 2; border-color: var(--blue); background: var(--blue-soft); color: var(--ink); outline: 2px solid var(--blue); outline-offset: 2px; transform: scale(1.04); }
.calendar-day-num { font-weight: 600; }
.calendar-day-count { align-self: flex-end; font-weight: 700; }
.calendar-day.level-1 { background: #e3efe9; }
.calendar-day.level-2 { background: #bcdbcb; }
.calendar-day.level-3 { background: #7fbb9d; color: #fff; }
.calendar-day.level-4 { background: var(--green); color: #fff; }
.calendar-day-tasks { display: none; position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 180px; max-width: 240px; padding: 10px 12px; border: 1px solid var(--line); background: #fbf9f3; color: var(--ink); box-shadow: 0 8px 20px rgba(23, 23, 19, .18); text-align: left; }
.calendar-day:nth-of-type(7n-1) .calendar-day-tasks, .calendar-day:nth-of-type(7n) .calendar-day-tasks { left: auto; right: 0; }
.calendar-day:hover .calendar-day-tasks, .calendar-day:focus-visible .calendar-day-tasks { display: block; }
.calendar-day-tasks strong { display: block; margin-bottom: 6px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.calendar-day-tasks ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.calendar-day-tasks li { font-size: 10px; line-height: 1.4; }
.daily-status { display: grid; grid-template-columns: auto minmax(100px, 1fr); align-items: center; gap: 14px; margin: 16px 0 9px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.daily-status > div { height: 2px; background: var(--line); }
.daily-status i { height: 100%; display: block; background: var(--green); }
.todo-composer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(105px, 145px) auto; align-items: end; border-bottom: 1px solid #aaa499; }
.todo-composer:focus-within { border-color: var(--blue); }
.todo-input { min-width: 0; display: grid; }
.todo-composer textarea { min-width: 0; min-height: 42px; max-height: 130px; padding: 10px 2px 2px; border: 0; outline: 0; background: transparent; color: var(--ink); resize: vertical; }
.todo-input > span { padding: 0 2px 7px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.todo-compose-project { min-width: 0; margin: 0 9px 8px; padding: 2px 18px 2px 5px; border: 0; border-left: 1px solid var(--line); outline-color: var(--blue); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; text-overflow: ellipsis; }
.todo-composer button { padding: 0 0 10px 12px; }
.todo-list { margin-top: 8px; }
.todo-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: start; gap: 10px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.todo-item[draggable="true"] > div:nth-child(2) { cursor: grab; }
.todo-item.is-dragging { opacity: .3; }
.todo-entry-tools { align-items: flex-start; }
.todo-check { width: 18px; height: 18px; display: grid; place-items: center; padding: 0 0 1px; border: 1px solid #9f998e; background: transparent; color: white; cursor: pointer; font-size: 11px; }
.todo-check:hover { border-color: var(--blue); }
.todo-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.todo-project-control { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; margin-top: 5px; color: #8f897f; opacity: .58; transition: opacity .12s; }
.todo-project-control:hover, .todo-project-control:focus-within, .todo-project-control.is-linked { opacity: 1; }
.todo-project-control > span { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--todo-project-color); }
.todo-project-control::after { content: "⌄"; order: 1; width: 12px; color: var(--muted); pointer-events: none; font-size: 9px; line-height: 1; }
.todo-project-control select { min-width: 0; max-width: 180px; height: 20px; padding: 0 4px 0 5px; border: 0; outline-color: var(--blue); appearance: none; -webkit-appearance: none; background: transparent; color: inherit; cursor: pointer; font-size: 11px; text-overflow: ellipsis; }
.todo-project-control button { order: 2; width: 17px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); opacity: .42; cursor: pointer; font-size: 9px; }
.todo-project-control button:hover, .todo-project-control button:focus-visible { color: var(--blue); opacity: 1; }
.todo-actions { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; }
.todo-actions button { min-width: 25px; height: 21px; display: grid; place-items: center; padding: 0 4px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; line-height: 1; }
.todo-actions button + button { border-left: 1px solid var(--line); }
.todo-actions button:hover, .todo-actions button:focus-visible { background: var(--paper-raised); color: var(--ink); }
.todo-actions .todo-continue { color: var(--green); }
.todo-item.is-complete { opacity: .58; }
.todo-item.is-complete .todo-check { border-color: var(--green); background: var(--green); }
.todo-item.is-complete p { text-decoration: line-through; text-decoration-thickness: 1px; }
.todo-complete-label { display: inline-block; margin-top: 5px; color: var(--green); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.todo-empty { margin: 0; padding: 22px 3px; color: var(--muted); font-size: 11px; }

.confirm-dialog { width: min(1160px, calc(100% - 16px)); padding: 0; border: 1px solid #bdb7ab; border-radius: 3px; background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgba(23, 23, 19, .52); }
.confirm-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark title actions" "mark copy actions"; align-items: center; gap: 5px 20px; padding: 26px 30px; }
.confirm-mark { grid-area: mark; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--red); color: var(--red); font-weight: 700; }
.confirm-card h2 { grid-area: title; margin: 0; font: 400 32px/1 var(--serif); }
.confirm-card p { grid-area: copy; margin: 3px 0 0; color: var(--muted); }
.confirm-card > div { grid-area: actions; display: flex; justify-content: flex-end; gap: 9px; }
.confirm-card .button { border-radius: 2px; }
.confirm-card .confirm-delete { border-color: var(--red); background: var(--red); color: white; }
.confirm-card .confirm-delete:hover { background: #982f25; }

.install-dialog { width: min(460px, calc(100% - 28px)); padding: 0; border: 1px solid #bdb7ab; border-radius: 4px; background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow); }
.install-dialog::backdrop { background: rgba(23, 23, 19, .52); }
.install-card { position: relative; padding: 32px; }
.install-close { position: absolute; top: 18px; right: 18px; }
.install-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); }
.install-mark::before { content: ""; width: 46%; height: 46%; background: currentColor; -webkit-mask: var(--asimov-mark); mask: var(--asimov-mark); }
.install-card h2 { max-width: 330px; margin: 0; font: 400 38px/1.02 var(--serif); letter-spacing: -.02em; }
.install-steps { display: grid; gap: 18px; margin: 30px 0 24px; padding: 0; list-style: none; }
.install-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 13px; align-items: start; }
.install-steps li > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 16px; line-height: 1; }
.install-steps strong, .install-steps small { display: block; }
.install-steps strong { margin: 1px 0 2px; font-size: 13px; }
.install-steps small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.install-help { margin: 0 0 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.install-done { width: 100%; min-height: 42px; }

.editor-dialog {
  width: min(1160px, calc(100% - 16px));
  max-height: min(1040px, calc(100dvh - 16px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #bdb7ab;
  border-radius: 4px;
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.editor-dialog::backdrop { background: rgba(23, 23, 19, .46); }
.editor-form { position: relative; max-height: min(1040px, calc(100dvh - 16px)); overflow-y: auto; padding: 32px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.dialog-head h2 { margin: 0; font: 400 38px/1 var(--serif); letter-spacing: -.015em; }
.project-edit-back { justify-self: start; min-height: 34px; padding: 0 13px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; }
.project-edit-back:hover { background: var(--ink); color: white; }
.project-details-edit { position: absolute; z-index: 3; top: 16px; left: 16px; background: rgba(251, 249, 243, .92); }
.project-details-edit:hover { background: var(--ink); }
.project-editor-back { position: absolute; z-index: 3; top: 16px; left: 16px; background: rgba(251, 249, 243, .92); }
.project-editor-back:hover { background: var(--ink); }
.project-editor-close { position: absolute; z-index: 3; top: 16px; right: 16px; background: rgba(251, 249, 243, .92); }
.icon-button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; transition: background .12s; }
.icon-button:hover { background: rgba(23, 23, 19, .07); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label, .field > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid #aaa499;
  outline: 0;
  background: transparent;
  color: var(--ink);
  transition: border-color .12s;
}
.field textarea { min-height: 76px; resize: vertical; }
.field select { cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); }
.field input::placeholder, .field textarea::placeholder { color: #aaa49a; }
.field input[type="file"] { padding: 10px; border: 1px dashed var(--line); }
.field input[type="color"] { width: 70px; height: 42px; padding: 3px; border: 1px solid var(--line); }
.scholar-import { padding: 14px; border: 1px solid var(--line); background: rgba(24, 79, 209, .025); }
.scholar-import-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.scholar-preview { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.scholar-preview img, .scholar-placeholder { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; object-fit: cover; background: var(--blue-soft); color: var(--blue); font: 400 18px/1 var(--serif); }
.scholar-preview p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.scholar-preview button { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--red); cursor: pointer; font-size: 10px; }
.compact-form { min-height: 250px; }
.image-preview { width: min(100%, 360px); max-height: 180px; object-fit: cover; border: 1px solid var(--line); }
.color-options { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.color-options input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.color-options span { width: 24px; height: 24px; display: block; border: 3px solid var(--paper-raised); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.color-options input:checked + span { box-shadow: 0 0 0 2px var(--ink); }
.subhead { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; }
.subhead h3 { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.text-button { padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--blue); cursor: pointer; font-size: 11px; }
.contact-options { display: flex; flex-wrap: wrap; gap: 7px; }
.contact-option input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.contact-option span { display: block; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
.contact-option input:checked + span { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.contact-option input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.remove-row { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; }
.remove-row:hover { color: var(--red); }
.toggle-row { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: var(--muted); font-size: 12px; }
.toggle-row input { accent-color: var(--blue); }
.asimov-link-panel { padding: 13px; border: 1px solid var(--line); background: rgba(24, 79, 209, .025); }
.linked-asimov { display: grid; gap: 5px; }
.linked-asimov p { margin: 0; color: var(--muted); font-size: 11px; }
.linked-asimov button { justify-self: start; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--red); cursor: pointer; font-size: 10px; }
.asimov-picker { max-height: 240px; display: grid; gap: 5px; overflow-y: auto; }
.asimov-picker button { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 10px; border: 1px solid var(--line); background: var(--paper-raised); text-align: left; cursor: pointer; }
.asimov-picker button:hover { border-color: var(--blue); }
.asimov-picker span { color: var(--blue); font-size: 9px; text-transform: uppercase; }
.asimov-picker p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 10px; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 30px; }
.dialog-actions .danger { margin-right: auto; color: var(--red); }
.autosave-note { color: var(--green); font-size: 9px; letter-spacing: .04em; }
.editor-dialog.notepad-mode { width: min(1480px, calc(100% - 24px)); height: calc(100dvh - 24px); max-height: none; }
.editor-dialog.notepad-mode #editor-content { height: 100%; }
.folder-notepad { height: 100%; display: flex; flex-direction: column; overflow-y: auto; padding: 32px; }
.folder-notepad .dialog-head { margin-bottom: 18px; }
.folder-notepad .dialog-head .eyebrow { margin-bottom: 7px; }
.notepad-head-actions { display: flex; align-items: center; gap: 8px; }
.notepad-save-status { color: var(--green); font-size: 9px; }
.folder-notepad textarea { width: 100%; min-height: 420px; flex: 1 0 420px; padding: 22px; border: 1px solid #cbc4b6; outline: 0; background: #fffdf6; color: var(--ink); resize: none; font: 16px/1.65 var(--serif); box-shadow: inset 0 1px 10px rgba(34, 31, 25, .035); }
.folder-notepad textarea:focus { border-color: var(--blue); }
.folder-notepad textarea::placeholder { color: #aaa49a; }
.notepad-paste-hint { margin-top: 8px; color: var(--muted); font-size: 9px; text-align: right; }
.notepad-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.notepad-image { position: relative; min-width: 0; margin: 0; border: 1px solid var(--line); background: #fffdf6; }
.notepad-image img { width: 100%; max-height: 300px; display: block; object-fit: contain; }
.notepad-image button { position: absolute; top: 7px; right: 7px; width: 27px; height: 27px; padding: 0 0 2px; border: 0; border-radius: 50%; background: rgba(23, 23, 19, .82); color: white; cursor: pointer; font-size: 16px; }
.notepad-image button:hover { background: var(--red); }
.button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 1px 16px 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; line-height: 1; transition: background .12s; }
.button:hover { background: rgba(23, 23, 19, .05); }
.button.filled { border-color: var(--ink); background: var(--ink); color: white; }
.button.filled:hover { background: var(--blue); border-color: var(--blue); }

.editor-dialog.overview-mode, .editor-dialog.project-editor-mode { width: min(1680px, calc(100% - 16px)); }
.editor-dialog.overview-mode { height: min(1040px, calc(100dvh - 16px)); }
.editor-dialog.overview-mode #editor-content { height: 100%; }
.project-overview { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.overview-close { position: absolute; z-index: 3; top: 16px; right: 16px; background: rgba(251, 249, 243, .9); }
.overview-cover { width: 100%; height: clamp(80px, 12vw, 140px); display: block; object-fit: cover; }
.overview-color-block { width: 100%; height: clamp(40px, 6vw, 70px); display: block; background: var(--project-color); }
.project-editor-cover { width: calc(100% + 64px); height: clamp(80px, 12vw, 140px); display: block; margin: -32px -32px 28px; object-fit: cover; }
.project-editor-color { height: clamp(40px, 6vw, 70px); background: var(--project-color); }
.overview-content { padding: 34px; }
.overview-kicker { display: flex; gap: 10px; color: var(--project-color); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.overview-content h2 { margin: 12px 0; font: 400 clamp(38px, 6vw, 65px)/.95 var(--serif); letter-spacing: -.02em; }
.overview-summary { max-width: 700px; margin: 0; font: 18px/1.5 var(--serif); }
.is-muted { color: var(--muted); }
.overview-stats { display: flex; flex-wrap: wrap; gap: 34px; margin: 30px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.overview-stats div { display: grid; }
.overview-stats strong { font: 400 29px/1 var(--serif); }
.overview-stats span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.overview-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 9px; margin-top: 22px; }
.asimov-overview { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px; padding: 17px; border: 1px solid #c7d5f5; background: #edf2ff; color: var(--ink); text-decoration: none; }
.asimov-badge { padding: 5px 7px; background: var(--blue); color: white; font: 700 12px/1 var(--serif); }
.asimov-overview p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.github-overview { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px; padding: 17px; border: 1px solid #c8c5bd; background: #f4f3ef; color: var(--ink); text-decoration: none; }
.github-badge { padding: 5px 7px; background: var(--ink); color: white; font: 700 11px/1 var(--sans); }
.github-overview p { margin: 4px 0; color: var(--muted); font-size: 11px; }
.github-overview small { color: var(--muted); font-size: 9px; }
.subproject-section { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.subproject-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.subproject-head span { color: var(--project-color); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.subproject-head h3 { margin: 4px 0 0; font: 400 24px/1 var(--serif); }
.subproject-head button, .subproject-back { padding: 3px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--project-color); cursor: pointer; font-size: 10px; }
.subproject-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.subproject-lane { min-width: 0; min-height: 165px; padding: 12px; border: 1px solid var(--line); border-top: 3px solid var(--lane-color); background: rgba(251, 249, 243, .5); transition: border-color .12s, background .12s; }
.subproject-lane.lane-backlog { --lane-color: #9b958a; }
.subproject-lane.lane-active { --lane-color: var(--blue); }
.subproject-lane.lane-done { --lane-color: var(--green); }
.subproject-lane.is-over { border-color: var(--lane-color); background: rgba(24, 79, 209, .04); }
.subproject-lane > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.subproject-lane h4 { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.subproject-lane > header span { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.subproject-cards { display: grid; gap: 7px; }
.subproject-cards > p { margin: 24px 0; color: #aaa49a; font-size: 9px; text-align: center; }
.subproject-card { position: relative; min-width: 0; padding: 12px 12px 11px 31px; border: 1px solid #d5d0c5; background: var(--paper-raised); cursor: grab; transition: border-color .12s, opacity .12s, transform .12s; }
.subproject-card:hover { border-color: var(--lane-color); transform: translateY(-1px); }
.subproject-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.subproject-card.is-dragging { opacity: .35; }
.subproject-card .branch-mark { position: absolute; top: 12px; left: 11px; color: var(--lane-color); font-size: 14px; line-height: 1; }
.subproject-card h5 { margin: 0; overflow-wrap: anywhere; font: 400 15px/1.25 var(--serif); }
.subproject-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 8px; }
.subproject-detail .subproject-color-block { height: 72px; background: var(--project-color); }
.subproject-back { margin-bottom: 23px; }
.subproject-editor { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 18px; margin-top: 28px; padding: 20px; border: 1px solid var(--line); background: rgba(251, 249, 243, .52); }
.subproject-editor label { display: grid; gap: 6px; }
.subproject-editor label span { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.subproject-editor input, .subproject-editor select { width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid #aaa499; outline: 0; background: transparent; color: var(--ink); }
.subproject-editor input:focus, .subproject-editor select:focus { border-color: var(--blue); }
.subproject-editor .dialog-actions { grid-column: 1 / -1; margin-top: 4px; }
.project-log-section { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.project-log-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.project-log-head h3 { margin: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.project-log-head span { color: var(--muted); font-size: 10px; }
.project-log-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid #aaa499; }
.project-log-form:focus-within { border-color: var(--blue); }
.project-log-form input { min-width: 0; padding: 12px 2px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.project-log-form input::placeholder { color: #aaa49a; }
.project-log-form button { padding: 0 2px 0 14px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
.project-log-form button:hover { color: var(--blue); }
.log-stack { margin-top: 8px; }
.log-entry { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 5px 18px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.log-entry time { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.log-entry p { margin: 0; overflow-wrap: anywhere; }
.log-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; }
.log-tags span { color: var(--blue); font-size: 9px; }
.log-empty { margin: 0; padding: 17px 2px; color: var(--muted); font-size: 11px; }
.github-link-panel .linked-asimov > span { color: var(--muted); font-size: 9px; }
.github-public-label { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.github-url-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.github-url-form input { min-width: 0; padding: 9px 2px; border: 0; border-bottom: 1px solid #aaa499; outline: 0; background: transparent; color: var(--ink); }
.github-url-form input:focus { border-color: var(--blue); }
.github-url-form button { padding: 0 12px; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: white; cursor: pointer; font-size: 9px; }
.github-url-form button:disabled { opacity: .45; cursor: wait; }
.github-public-note { margin: 9px 0 0; color: var(--muted); font-size: 9px; }
.overview-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 38px; margin-top: 32px; }
.overview-columns h3 { margin: 0 0 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.overview-people { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 10px; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 2000; max-width: 360px; padding: 12px 16px; border-left: 3px solid transparent; border-radius: 3px; background: var(--ink); color: white; box-shadow: var(--shadow); opacity: 0; transform: translateY(6px); pointer-events: none; font-size: var(--text-body); transition: opacity .14s, transform .14s ease-out; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast[data-tone="success"] { border-left-color: #79b89c; }
.toast[data-tone="error"] { border-left-color: #ef8d82; }
.toast.is-progress { padding-left: 34px; }
.toast.is-progress::before { content: ""; position: absolute; top: 50%; left: 15px; width: 8px; height: 8px; margin-top: -4px; border: 1px solid rgba(255, 255, 255, .35); border-top-color: white; border-radius: 50%; animation: toast-spin .7s linear infinite; }
@keyframes pop { from { opacity: 0; transform: scale(.7); } }
@keyframes toast-spin { to { transform: rotate(360deg); } }

@media (max-width: 1200px) and (min-width: 901px) {
  .masthead-live-timer { display: block; max-width: none; }
  .masthead-live-timer > span { display: none; }
}

@media (max-width: 900px) {
  /* The name is the only elastic thing in the masthead, so it is what gives
     way. Laid out as a block, not a flex row, so text-overflow can reach the
     label — as a flex container the label is an anonymous item and truncates
     mid-letter instead of ellipsising. */
  .masthead-right, .account { min-width: 0; }
  .account-name {
    max-width: min(22vw, 120px);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-name::after { display: inline-block; margin-left: 5px; vertical-align: middle; }
  .masthead-status { width: 34px; padding: 0; justify-content: center; border-radius: 50%; }
  .masthead-status > span { display: none; }
  .masthead-status strong { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; border: 2px solid var(--paper); font-size: 8px; }
  .masthead-status.has-live:not(.has-overflow) > strong { display: inline-flex; }
  .project-card { grid-column: span 6; }
  .project-row { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 10px; }
  .row-mark { width: 28px; height: 28px; }
  .project-row .contact-stack { display: none; }
  .project-row .project-meta { grid-column: 2 / -1; }
  .people-list { display: grid; grid-template-columns: 1fr; }
  .todo-workspace { grid-template-columns: 1fr; }
}

/* Surfaces that cannot be made to work in a 390px column — the graph canvas,
   the administration console — carry .needs-landscape and a .rotate-gate
   child. In portrait the gate is all that renders; turning the phone puts the
   viewport over 700px and the real content comes back. */
.rotate-gate { display: none; }

@media (max-width: 700px) and (orientation: portrait) {
  /* The host is usually a grid sized to the viewport; the gate wants neither. */
  .needs-landscape { height: auto; min-height: 0; display: block; }
  .needs-landscape > :not(.rotate-gate) { display: none; }
  .needs-landscape > .rotate-gate {
    min-height: 340px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    padding: 48px 24px;
    border: 1px dashed #c8c2b7;
    text-align: center;
  }
  .rotate-gate-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--blue);
    font-size: 25px;
    line-height: 1;
  }
  .rotate-gate h2 { margin: 0; font: 400 25px/1.2 var(--serif); }
  .rotate-gate p { max-width: 30ch; margin: 0; color: var(--muted); font-size: var(--text-reading); }
}

/* ── Modal sheets ────────────────────────────────────────────────────────────
   Below the phone breakpoint every modal dialog stops being a centred card and
   becomes the screen. A card inset from a 360px viewport spends the only space
   there is on margins, and a card that caps its own height then scrolls inside
   itself strands the actions below the fold.

   The dialog becomes the scroll container and its content simply grows tall.
   Nothing here is per-dialog, so a new <dialog> is covered the moment it is
   written. Two house conventions carry the rest, and both are already
   universal in this codebase:

     · open it with showModal(), so :modal matches
     · name the close control *-close

   The selector is dialog[open]:modal — one notch above the .x-dialog.x-mode
   pairs in the page stylesheets, which is what it has to outrank. So a third
   convention, for whoever adds the next one: give a dialog its geometry
   through a class or [id="…"], never a bare #id, or it will sit above this
   layer and stay a card. Mirrored in pages/projects/tracker/frame.css for the
   shadow root. */
/* A phone in landscape is 740-930px wide, so a width test never catches it —
   hence the height half of this condition. Without it a rotated phone gets a
   centred card, which is the one shape a sheet must never be. */
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  dialog[open]:modal {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
  }
  /* Inner cards carry their own viewport-height cap and scroller; with the
     dialog doing the scrolling, both are wrong. */
  dialog[open]:modal > * { max-height: none; }
  /* Pinned to the viewport rather than to the content, so it survives the
     scroll. A fullscreen dialog is the containing block. Opaque, because
     content now passes underneath it. */
  dialog[open]:modal [class*="-close"] {
    position: fixed;
    top: 9px;
    right: 9px;
    z-index: 5;
    background: var(--paper-raised);
  }
}

@media (max-width: 700px) {
  /* The whole scale steps down a notch: a phone column is narrower than a
     desktop one but the words in it are the same length. */
  :root {
    --tap: 38px;
    --tap-dense: 30px;
    --panel-gap: 14px;
    --text-meta: 8px;
    --text-label: 9px;
    --text-control: 10px;
    --text-body: 11px;
    --text-reading: 12px;
    --text-panel-title: 18px;
    --text-stat: 22px;
    /* The desktop clamp floors at 30.4px, so it never reaches a phone's
       width. This one scales the whole way down. */
    --text-page-title: clamp(18px, 5vw, 26px);
  }
  body { font-size: 13px; }
  h1 { font-size: 34px; }
  .missed-todo-alert strong { font-size: 15px; }
  .folder-tab, .folder-title-input { font-size: 15px; }
  .project-card h2 { font-size: 21px; }
  .project-row h2 { font-size: 17px; }
  .person-name { font-size: 19px; }
  .todo-panel-head h2, .daily-head h2 { font-size: 20px; }
  .empty-state h2 { font-size: 20px; }
  .empty-glyph { width: 42px; height: 42px; font-size: 21px; }
  .subproject-head h3 { font-size: 19px; }
  .overview-stats strong { font-size: 22px; }
  .overview-summary { font-size: 15px; }
  .dialog-head h2 { font-size: 18px; }
  .confirm-card h2 { font-size: 24px; }
  .install-card h2 { font-size: 26px; }
  .overview-content h2 { font-size: clamp(24px, 7vw, 34px); }

  .nav-item { min-height: var(--tap); }
  .primary-action { min-height: var(--tap); }
  .icon-button { width: var(--tap); height: var(--tap); }
  .pin-toggle,
  .folder-grip, .folder-note, .folder-color-control, .folder-delete,
  .date-controls button,
  .note-layout button { width: var(--tap-dense); height: var(--tap-dense); }
  /* Inline beside a 20px select, not a row tool — it takes its scale from
     the control it belongs to. */
  .todo-project-control select { height: 24px; }
  .todo-project-control button { width: 24px; height: 24px; }
  .date-controls input { height: var(--tap-dense); }
  .note-delete, .todo-delete,
  .entry-edit, .entry-copy { min-width: var(--tap-dense); min-height: var(--tap-dense); }
  .todo-actions button,
  .todo-entry-tools button { min-width: var(--tap-dense); height: var(--tap-dense); padding-inline: 6px; }
  .folder-action { padding-block: 10px; }
  /* The live to-do list is the tracker's; see the matching block in
     pages/projects/tracker/frame.css for the row's phone treatment. */
  .todo-item { grid-template-columns: 22px minmax(0, 1fr); gap: 6px 9px; }
  .todo-actions, .todo-entry-tools { grid-column: 2; }
  .todo-check { width: 22px; height: 22px; font-size: 13px; }
}

@media (max-width: 560px) {
  .masthead { height: 62px; padding-inline: 14px; }
  .masthead-right { gap: 9px; }
  .masthead-tools { gap: 3px; }
  .wordmark > span:last-child { display: none; }
  .shell { width: min(100% - 28px, 1120px); padding-top: 22px; }
  .intro { margin-bottom: 24px; }
  .title-row { align-items: flex-start; flex-direction: column; }
  h1 { font-size: 27px; }
  .view-nav { flex-wrap: wrap; gap: 4px 18px; }
  .missed-todo-alert { align-items: stretch; flex-direction: column; gap: 11px; margin-top: -18px; padding: 13px 0; }
  .missed-todo-alert > div:first-child { grid-template-columns: 1fr; }
  .missed-todo-alert small { grid-column: 1; }
  .missed-todo-actions { display: grid; grid-template-columns: 1fr 1fr 30px; }
  .missed-todo-actions button { min-height: 36px; }
  .project-card { grid-column: 1 / -1; min-height: 205px; }
  .project-row { grid-template-columns: 28px minmax(0, 1fr); }
  .row-folder { grid-column: 2; justify-self: start; }
  .people-toolbar { align-items: stretch; flex-direction: column; }
  .todo-tag-bar { align-items: stretch; flex-direction: column; }
  .tag-index { justify-content: flex-start; }
  .todo-composer { grid-template-columns: minmax(0, 1fr) auto; }
  .todo-input { grid-column: 1 / -1; }
  .todo-compose-project { margin-left: 0; padding-left: 2px; border-left: 0; }
  .todo-item.is-complete { margin: 0 -7px; padding-right: 9px; padding-left: 9px; background: rgba(47, 116, 88, .09); opacity: 1; }
  .todo-item.is-complete > div { opacity: .64; }
  .todo-item.is-complete .todo-check { opacity: 1; }
  .todo-complete-label { padding: 2px 6px; border-radius: 999px; background: var(--green); color: white; }
  .note-stack.columns-1, .note-stack.columns-2, .note-stack.columns-3 { grid-template-columns: 1fr; }
  .person-card-main { grid-template-columns: 48px minmax(0, 1fr); }
  .person-photo { width: 48px; height: 48px; }
  .scholar-line, .person-interests, .person-groups, .person-projects { margin-left: 63px; }
  .scholar-import-row { grid-template-columns: 1fr; }
  .overview-columns { grid-template-columns: 1fr; }
  .subproject-board { grid-template-columns: 1fr; }
  .subproject-lane { min-height: 105px; }
  .subproject-editor { grid-template-columns: 1fr; padding: 16px; }
  .subproject-editor .dialog-actions { grid-column: 1; }
  .github-url-form { grid-template-columns: 1fr; }
  .github-url-form button { min-height: 34px; justify-self: start; }
  .log-entry { grid-template-columns: 1fr; }
  .log-tags { grid-column: 1; }
  .overview-content { padding: 25px 18px; }
  .overview-color-block, .project-editor-color { min-height: 52px; }
  .project-details-edit, .project-editor-back, .project-editor-close { top: 9px; }
  .confirm-card { display: block; padding: 24px 18px; }
  .confirm-mark { margin-bottom: 18px; }
  .confirm-card p { margin: 8px 0 24px; }
  .install-card { padding: 26px 22px 22px; }
  .install-card h2 { font-size: 24px; }
  .install-mark { margin-bottom: 24px; }
  .editor-form { padding: 24px 18px; }
  .project-editor-cover { width: calc(100% + 36px); margin: -24px -18px 24px; }
  .folder-notepad { padding: 24px 18px; }
  .folder-notepad textarea { min-height: 55vh; padding: 16px; }
  .notepad-images { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  /* No font-size floor on fields. Every layout in this app is built around
     10-13px type, and an inline editor, a filter or a project title forced to
     16px reads as broken — which is what a floor here did to each of them in
     turn. Fields keep their designed size and iOS Safari zooms the page when
     one is focused; that is the accepted trade. Undoing it means
     maximum-scale=1 on the viewport meta in index.html, which costs
     pinch-zoom everywhere, so it is a decision rather than a tweak.
     The two properties below are unrelated: they stop iOS washing out the
     text of a disabled field. */
  input, textarea, select { -webkit-text-fill-color: currentColor; opacity: 1; }
  .logout { font-size: 0; }
  .logout::after { content: "Exit"; font-size: 12px; }
  .toast { right: 14px; bottom: 14px; left: 14px; max-width: none; }
}

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