reviewzy 0.2.0 → 0.4.0

package/src/dashboard/static/dashboard.css

@@ -1,317 +1,340 @@
 /* ============================================================
    reviewzy — dashboard page styles
+   The page layer: the sidebar shell, the list's own rhythm, and the
+   htmx behavior hooks. Every component surface is a shipped class;
+   nothing here repaints one.
    ============================================================ */
 
-/* ---- Page shell (navbar shell per cloudy-ui) ---- */
-.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
-.main { padding: var(--space-10) var(--space-12); max-width: 1400px; margin: 0 auto; width: 100%; }
+/* ---- The shell ----
+   The sidebar is a grid track, so the page column follows the animated
+   column width. A fixed 252px track would leave a 186px gap around the
+   66px rail. */
+.layout { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
 
-/* ---- Page header: the eyebrow / title / lede triplet (login/editor pages) ---- */
-.page-header { margin-bottom: var(--space-8); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
-.page-eyebrow { color: var(--accent); margin-bottom: var(--space-2); }
-.page-title { font: 550 var(--text-2xl)/1.15 var(--font-sans); color: var(--text); letter-spacing: -0.02em; margin-bottom: var(--space-3); }
-.page-lede { font-size: var(--text-base); color: var(--text-dim); max-width: 540px; }
-/* The entries header is just the title plus the total count, no eyebrow or lede. */
-.page-count { font-size: var(--text-sm); color: var(--text-dim); }
+/* The page column takes the main track's width: the design drops the cap beside a sidebar,
+   because a capped column leaves a dead strip beside the content once the track outgrows
+   --page-w (268px on each side at 1920). The track is pinned rather than auto-placed: under
+   768 the sidebar is the fixed drawer and leaves the grid, so auto-placement would land the
+   page in the `auto` track, which sizes to the content's own intrinsic width — zero inside a
+   `container-type: inline-size` wrapper, collapsing the editor page to its padding. min-width
+   keeps the grid item from growing to its widest table's min-content width, which would widen
+   the document at 390. */
+.layout > .page { grid-column: 2; min-width: 0; }
 
-/* ---- Filter form ---- */
-.filters { display: grid; grid-template-columns: minmax(0, 2fr) 200px 200px; gap: var(--space-3); align-items: end; margin-bottom: var(--space-8); }
-@media (max-width: 768px) { .filters { grid-template-columns: 1fr; } }
+/* One spacing ladder: the page opens at --space-8 and closes at --space-16. */
+.page { padding-block: var(--space-8) var(--space-16); }
+
+/* The rail's footer holds one control: the theme toggle keeps the slot, and
+   sign-out returns with the expanded column. */
+@media (min-width: 769px) {
+  .sidebar.rail .sidebar-user form { display: none; }
+}
+
+/* ---- List page rhythm: header, banner, tabs, then the queue section ---- */
+.page-header { margin-bottom: var(--space-8); }
+
+/* The banner is the component's card form here, not the bleed form: it sits on
+   the page column under the header. */
+#page-banner > .banner { margin-bottom: var(--space-4); }
+
+/* The status strip is a row of submit buttons inside the filters form; the count
+   line rides the toolbar's end edge and the filter-bar's own block margin closes
+   the pair. Five tabs with counts never fit a 390px column, so the strip scrolls
+   in its own box the way the navbar's link band does; the row keeps its hairline
+   across the scrolled content. */
+.status-scroll { margin-bottom: var(--space-4); overflow-x: auto; }
+.status-scroll .tabs,
+.style-guide-projects .tabs { width: max-content; min-width: 100%; }
+.list-meta {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
 
 /* ---- Entries region ---- */
 /* The loading strip is hidden until htmx marks the request in flight (hx-indicator adds the
    .htmx-request class); it sits beside the swap target, so a swap never removes it. */
-#entries-loading { display: none; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); padding: var(--space-2) 0; }
+#entries-loading { display: none; align-items: center; gap: var(--space-2); font-size: var(--t-2); color: var(--text-3); padding: var(--space-2) 0; }
 #entries-loading.htmx-request { display: flex; }
-/* The spinner reuses the @keyframes spin components.css ships for .btn-loading. */
-.spinner {
-  width: 12px; height: 12px;
-  border: 2px solid var(--line-strong);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  flex-shrink: 0;
-}
+/* A control mid-request ignores further activations: htmx marks the requesting element with
+   .htmx-request while the request is in flight, and pointer-events drops the duplicate click a
+   double-click would otherwise fire. */
+.htmx-request { pointer-events: none; }
 
-/* ---- Partial state ---- */
-.partial-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
-.partial-count { font-size: var(--text-sm); color: var(--text-dim); }
+/* ---- Bulk approve ----
+   The pinned batch action is the shipped section-sticky bar: transparent in flow so the sky
+   shows through, toned and hairlined only while it is stuck. Only its spacing is the page's. */
+.batch-bar { margin-bottom: var(--space-4); }
 
-/* ---- Screen-reader-only ---- */
-/* Present in the DOM and the accessibility tree, absent from layout, and never focusable. */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
+/* ---- Project sections: one heading and one table each ----
+   Batches stay a data concept behind the row selection and the one approve
+   action; nothing on the page discloses or groups by them. */
+.project-section { margin-bottom: var(--space-8); }
+.project-head {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-1);
+  margin-bottom: var(--space-3);
+}
+.project-name {
+  font: 500 var(--t-5)/1.2 var(--font-sans);
+  letter-spacing: -0.01em;
+  color: var(--text);
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+/* The project's count line: the drafts and entries of the rows shown in this group. */
+.project-meta {
+  margin-top: 0;
+  font-size: var(--t-2);
+  max-width: none;
 }
-
-/* ---- Project groups ---- */
-.project-group { margin-bottom: var(--space-10); }
-.project-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
-.project-name { font: 500 var(--text-lg)/1.2 var(--font-mono); color: var(--text); letter-spacing: -0.01em; }
-.batch { margin-bottom: var(--space-6); }
-.batch-header { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
-.batch-meta { font: 400 var(--text-xs)/1 var(--font-sans); color: var(--text-faint); }
 
 /* ---- Entry table cells ----
-   The table lays out fixed with a colgroup so the title column takes the remainder and the row
-   never overflows; select, status, file, and actions are the fixed columns. The status pill has
-   its own column, so the title truncates at one consistent point and the pill stays tight. */
-.col-select { width: 48px; }
-.col-status { width: 106px; }
-.col-file { width: 200px; }
+   The table lays out with a fixed colgroup so the entry column takes the remainder and a long
+   title or file path truncates instead of widening the table; select, status, filed and actions
+   are the fixed columns. The table never compresses below 560px: the fixed columns sum to 422
+   and the entry column needs room to read, so a narrower wrap scrolls instead of collapsing it.
+   Truncation itself is the shipped .truncate utility. */
+#entries-list table { table-layout: fixed; min-width: 560px; }
+.col-select { width: 44px; }
+.col-status { width: 108px; }
+.col-filed { width: 150px; }
 .col-actions { width: 120px; }
 .entry-head {
   display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-.entry-title {
-  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-1);
   min-width: 0;
-  font: 450 var(--text-base)/1.4 var(--font-sans);
+}
+/* The title is the row's link into the editor; the hover underline is the affordance. */
+.entry-link {
+  display: block;
+  font: 400 var(--t-3)/1.4 var(--font-sans);
   color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  text-decoration: none;
 }
-.entry-filer {
-  flex-shrink: 0;
-  font-size: var(--text-xs);
-  color: var(--text-faint);
-  white-space: nowrap;
+.entry-link:hover { text-decoration: underline; }
+.entry-file {
+  display: block;
+  font-size: var(--t-2);
+  color: var(--text-4);
 }
-.cell-file {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--text-faint);
+.cell-filed {
+  font-size: var(--t-2);
+  color: var(--text-4);
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-
-/* ---- Row actions and batch approve ----
-   A control mid-request ignores further activations: htmx marks the requesting element with
-   .htmx-request while the request is in flight, and pointer-events drops the duplicate click a
-   double-click would otherwise fire. */
-.htmx-request { pointer-events: none; }
-/* The cloudy-ui custom checkbox: an appearance:none box on the sunk plane, accent-filled with a
-   clip-path check when checked. The select-all also takes a dash in its indeterminate state (a
-   partially selected batch), which the native accent-color box could not express. */
-.cell-select input[type="checkbox"],
-.batch-header .select-all {
-  width: 15px;
-  height: 15px;
-  appearance: none;
-  background: var(--bg-sunken);
-  border: 1px solid var(--line);
-  border-radius: calc(var(--radius) * 0.5);
-  cursor: pointer;
-  flex-shrink: 0;
-  position: relative;
-  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
-}
-.cell-select input[type="checkbox"]:hover,
-.batch-header .select-all:hover { border-color: var(--line-strong); }
-.cell-select input[type="checkbox"]:checked,
-.batch-header .select-all:checked,
-.cell-select input[type="checkbox"]:indeterminate,
-.batch-header .select-all:indeterminate {
-  background: var(--accent);
-  border-color: var(--accent);
-}
-.cell-select input[type="checkbox"]:checked::after,
-.batch-header .select-all:checked::after {
-  content: '';
-  position: absolute;
-  inset: 3px;
-  background: var(--text-on-accent);
-  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+.cell-actions { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1); }
+.table-wrap tbody td.cell-actions { padding-left: var(--space-1); padding-right: var(--space-1); }
+/* The row's three icon actions sit at the small control step, so the 120px column holds them
+   without a 4px spill; the coarse floor is restated at the override's specificity, or a touch
+   row's tap targets would shrink with them. */
+.cell-actions .btn-icon { width: var(--ctl-sm); min-width: var(--ctl-sm); height: var(--ctl-sm); min-height: var(--ctl-sm); }
+@media (pointer: coarse) {
+  .cell-actions .btn-icon { width: var(--ctl-lg); min-width: var(--ctl-lg); height: var(--ctl-lg); min-height: var(--ctl-lg); }
 }
-.cell-select input[type="checkbox"]:indeterminate::after,
-.batch-header .select-all:indeterminate::after {
-  content: '';
-  position: absolute;
-  left: 3px;
-  right: 3px;
-  top: 50%;
-  height: 2px;
-  transform: translateY(-50%);
-  background: var(--text-on-accent);
-  border-radius: 1px;
+/* The semantic icon actions: the shipped .btn-icon paints the label colour, these give the
+   approve and reject glyphs their status colours in every state a disabled slot sits in. */
+.action-approve, .action-approve:hover { color: var(--success); }
+.action-reject, .action-reject:hover { color: var(--danger); }
+
+/* Under 900px the filed stamp (metadata, not a decision) leaves the row so the rest of the
+   table keeps its columns inside the wrap instead of scrolling wider. The column's width is
+   zeroed and its cells are dropped (Chromium ignores `visibility: collapse` on a col), and the
+   table's floor steps down with the column it lost. The wrap stays the named scroller for what
+   remains. */
+@media (max-width: 900px) {
+  #entries-list table { min-width: 440px; }
+  #entries-list col.col-filed { width: 0; }
+  #entries-list .cell-filed { display: none; }
 }
-.cell-actions { white-space: nowrap; }
-.cell-actions .btn + .btn { margin-left: var(--space-2); }
-.table-wrap tbody td.cell-actions { padding-left: var(--space-1); padding-right: var(--space-1); }
-.batch-bar {
+
+/* ---- Notices ----
+   The refusal list rides inside the page banner's body, in the banner text's voice. */
+.notice-list {
+  margin: var(--space-2) 0 0;
+  padding-left: var(--space-5);
   display: flex;
-  align-items: center;
-  margin-bottom: var(--space-4);
-  /* Sticks just below the 56px navbar so the approve button stays reachable while rows scroll
-     under it; the background and z-index stop table rows from showing through the bar. */
-  position: sticky;
-  top: 56px;
-  z-index: 10;
-  padding: var(--space-2) 0;
-  background: var(--bg);
+  flex-direction: column;
+  gap: var(--space-1);
+  font-size: var(--t-3);
+  color: var(--text-2);
 }
-.batch-header .select-all { align-self: center; }
-/* ---- Collapsible project sections and batches ----
-   The chevron points down expanded and turns when collapsed; the state is applied by dashboard.js
-   from localStorage, so the server ships everything open and the viewer's choice re-applies. */
-.collapse-toggle { align-self: center; }
-.collapse-toggle svg { transition: transform var(--dur-fast) var(--ease); }
-.collapse-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
-.project-header .collapse-toggle, .batch-header .collapse-toggle { margin-left: auto; }
-.notice-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
 
-/* ---- Diff view: the anchored snippet vs the entry's text, mono on sunken, anchor distinct ---- */
-.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-8); }
-@media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; } }
+/* ---- Empty-state actions: this page's filter-miss state holds two ways onward ---- */
+.empty-actions { display: flex; gap: var(--space-2); justify-content: center; }
+
+/* ---- The change: the anchored snippet as code on the well ----
+   The shipped pre owns the surface; the diff wraps instead of scrolling, which is the one
+   deviation this view adds. The anchor's annotation bar is the shipped .annot-mark. */
 .diff-code {
-  font: 400 var(--text-sm)/1.6 var(--font-mono);
-  background: var(--bg-sunken);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: var(--space-4);
+  margin: 0;
   white-space: pre-wrap;
   word-break: break-word;
-  color: var(--text-muted);
-  margin: 0;
 }
 .diff-line { display: block; }
-.diff-anchor {
-  background: var(--accent-soft);
-  border-left: 2px solid var(--accent);
-  color: var(--text);
-  padding-left: var(--space-2);
+/* A change with both removed and added words renders two rows: the file text with its removals,
+   then the proposal with its additions. The rule between them keeps each sentence whole. */
+.diff-rows .diff-proposed {
+  margin-top: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--line-soft);
 }
 
-/* ---- Empty states ---- */
-.empty-state { text-align: center; padding: var(--space-12) var(--space-6); }
-.empty-icon { margin: 0 auto var(--space-4); width: 32px; height: 32px; color: var(--text-faint); display: flex; align-items: center; justify-content: center; }
-.empty-state h3 { font: 500 var(--text-lg)/1.3 var(--font-sans); color: var(--text); margin-bottom: var(--space-2); }
-.empty-state p { font-size: var(--text-sm); color: var(--text-dim); max-width: 420px; margin: 0 auto var(--space-4); }
-.empty-actions { display: flex; gap: var(--space-2); justify-content: center; }
-
-/* ---- Error box (cloned from #error-box by dashboard.js) ---- */
-.callout-content { min-width: 0; }
-.callout-actions { margin-top: var(--space-2); }
-
-/* ---- Entry editor ---- */
-/* The one live region, kept out of sight by the shared .visually-hidden utility above. */
-.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
-.editor-main { min-width: 0; }
-.editor-rail { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: var(--space-8); }
-@media (max-width: 900px) {
-  .editor-grid { grid-template-columns: 1fr; }
-  .editor-rail { position: static; }
+/* ---- Entry editor: one full-track workspace ----
+   The workspace, its header and its support card take the page column's whole track: a cap beside
+   the sidebar centres a column away from the nav it belongs to. The page is the query container,
+   so the title step, the support card's columns and the pair's order follow the track width, not
+   the viewport. Container queries sit inside the browser floor the readme states, so the title step
+   and the pair's order keep the query rather than an intrinsic fallback. Each card sizes to its own
+   content and its pane scrolls past the cap; one support card spans the workspace below. */
+.editor-page { container-type: inline-size; }
+/* The entry title runs one line on the 1920 and 1440 tracks; a narrow page column steps it down
+   so a long machine title does not wrap mid-hyphen. */
+.editor-title { font-size: var(--t-7); }
+@container (max-width: 800px) {
+  .editor-title { font-size: var(--t-6); }
+}
+.editor-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  /* The pair's cards share one height: the taller card sets the row and the shorter one keeps its
+     own content at the top. The inner boxes stay content-sized; the slack is card surface. */
+  align-items: stretch;
+}
+/* Each card asks for its own readable measure and the pair wraps when the track cannot hold two,
+   so the collapse follows the track's own width instead of a breakpoint: it needs no container
+   query and holds in an engine without them. A terminal entry has no change card, so the settled
+   pane asks for the whole row, and one support card spans it below the pair. */
+.editor-grid > * { flex: 1 1 320px; min-width: 0; }
+#editor-region.editor-region-wide,
+.editor-support { flex: 1 0 100%; }
+.editor-pane { max-height: 60vh; overflow: auto; }
+/* The proposal box sizes to its text through dashboard.js's autosizer, so a one-line entry gets a
+   one-line box and a long one grows to the viewport cap instead of scrolling from the start. */
+/* One support card, two balanced columns: the sections keep their DOM order down each column and
+   each takes its own height, so a short Details never stretches to a taller Notes. The section
+   labels head their sections at the next type step; the nested "More" keeps the shipped size. The
+   320px floor is the same measure the pair asks for, so an engine without container queries still
+   meets one column on a phone instead of two slivers. */
+.editor-support-card .card-content {
+  padding: var(--space-2);
+  columns: 320px 2;
+  column-gap: var(--space-5);
+}
+.editor-support-card .support-section {
+  break-inside: avoid;
+  margin-bottom: var(--space-3);
 }
-/* The editor's title card header: the title falls back to the anchor text, which can be one long
-   unbroken string, so it wraps inside the card instead of overflowing or shoving the status pill. */
-.editor-title { min-width: 0; overflow-wrap: anywhere; }
-/* The entry text ships verbatim, often carrying markdown backticks and significant whitespace;
-   mono gives every glyph, space included, one full cell so both stay countable while editing. */
+.editor-support-card .support-section > summary { font-size: var(--t-4); }
+@container (max-width: 900px) {
+  .editor-support-card .card-content { columns: 1; }
+}
+/* The shipped empty state's block padding is card-scale; one line of it inside a section leaves
+   a tall blank band. It also centres its one line across the full card, which reads as a hole;
+   inside a section it lines up with the section's rows instead. */
+.support-section .empty-state {
+  align-items: flex-start;
+  text-align: left;
+  padding-block: var(--space-2);
+}
+#editor-notice:empty { display: none; }
+#editor-notice { margin-bottom: var(--space-4); }
+/* The one part of the narrow layout the pair's own measure cannot carry: once it has wrapped, the
+   proposal leads, so the reader meets the words before the file's own text. An engine without
+   container queries keeps the file's text first. */
+@container (max-width: 640px) {
+  #editor-region { order: -1; }
+}
+
+/* ---- Textareas: no manual resize ----
+   The shipped .input pins a control height and the shipped textarea rule adds a resize
+   handle; both fight the page's sizing. The editor box holds a viewport-clamped height and the
+   notes box a fixed one; the style-guide fields autosize to their content. */
+main.page textarea.input { height: auto; resize: none; }
 #editor-text { font-family: var(--font-mono); }
+#editor-notes { height: 120px; min-height: 120px; max-height: 120px; overflow-y: auto; }
+#style-guide-markdown { min-height: 200px; }
+#style-guide-glossary { min-height: 140px; }
 
-/* ---- Editor prev/next rails ----
-   One full-height fixed strip per side, below the 56px navbar, so the previous and next entries are
-   a single click away while reading. The strip sits inside the 48px page padding, clear of content. */
-.editor-nav-btn {
-  position: fixed;
-  top: 56px;
-  bottom: 0;
-  width: 44px;
+/* The live metrics row under the proposal's textarea: length, placeholders, tone. */
+.constraint-row {
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: var(--text-dim);
-  text-decoration: none;
-  z-index: 40;
-  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  margin-top: var(--space-3);
+  font-size: var(--t-2);
+  color: var(--text-3);
 }
-.editor-nav-prev { left: 0; }
-.editor-nav-next { right: 0; }
-.editor-nav-btn:hover { background: var(--bg-hover); color: var(--text); }
-.editor-nav-btn.is-disabled { color: var(--text-faint); opacity: 0.4; pointer-events: none; }
-.editor-nav-btn svg { width: 18px; height: 18px; }
-@media (max-width: 900px) { .editor-nav { display: none; } }
-#editor-region > .callout { margin-bottom: var(--space-4); }
-#editor-region > .btn { margin-top: var(--space-4); }
-.editor-actions { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
-/* The in-flight indicator for an approve or reject from the editor: htmx's own rules fade it in. */
-.editor-actions .htmx-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
+.placeholder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
+.placeholder-item { display: flex; align-items: center; gap: var(--space-2); }
+.placeholder-state { font-size: var(--t-2); color: var(--text-3); min-width: 52px; }
+.placeholder-state.is-present { color: var(--success); }
+.char-count.over { color: var(--danger); }
 
-/* The notes card: the agent's row reuses the constraint row shape; the human's textarea and its
+.editor-actions { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+/* The in-flight indicators for a reject from the editor and a style-guide save: htmx
+   fades the span in via .htmx-request, and display:none until then keeps the laid-out span from
+   widening the actions row past the viewport on a narrow screen. */
+.editor-actions .htmx-indicator { display: none; }
+.editor-actions .htmx-indicator.htmx-request { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--t-2); color: var(--text-3); }
+
+/* ---- Header prev/next ----
+   The neighbour pair lives in the page header's toolbar as secondary buttons; a boundary
+   keeps the slot with a disabled button so the pair never shifts. The meta row under the
+   title truncates the file path instead of letting a long one widen the page. */
+.page-meta { min-width: 0; }
+.page-meta-item { min-width: 0; }
+.page-file { min-width: 0; max-width: 100%; }
+
+/* ---- Notes ----
+   The notes card: the agent's row is the info-table readout; the human's textarea and its
    save button sit below it. */
 .notes-field { margin-top: var(--space-2); }
 .notes-actions { margin-top: var(--space-2); display: flex; justify-content: flex-end; }
 
-/* Constraint panel: live count and placeholder checklist; the server owns the refusal. */
-.constraint-row { display: flex; gap: var(--space-3); padding: 6px 0; }
-.constraint-row + .constraint-row { border-top: 1px solid var(--line); }
-.constraint-label { flex-shrink: 0; font: 450 11px/1.4 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); width: 96px; padding-top: 2px; }
-.constraint-value { min-width: 0; color: var(--text-muted); font-size: var(--text-sm); }
-.char-count { color: var(--text-muted); font-size: var(--text-sm); }
-.char-count.over { color: var(--danger); }
-.placeholder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
-.placeholder-item { display: flex; align-items: center; gap: var(--space-2); }
-.placeholder-state { font-size: var(--text-xs); color: var(--text-dim); min-width: 52px; }
-.placeholder-state.is-present { color: var(--success); }
-
-/* The context card's secondary block: the provenance rows (hash, filer, stale note) collapsed
-   behind a summary, so the anchor and the agent-supplied context rows lead the card. */
+/* The details card's secondary block: the provenance rows (hash, filer, stale note) collapsed
+   behind a disclosure, so the agent-supplied context rows lead the card. */
 .context-secondary { margin-top: var(--space-3); }
-.context-secondary summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-dim); }
 .context-secondary .info-table { margin-top: var(--space-2); }
 
 /* Repo row link: the brand icon beside the shortened owner/repo path, linking out to the host. */
-.repo-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
-.repo-link:hover { color: var(--accent); }
-.repo-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; opacity: 0.7; }
-.placeholder-token { font: 400 var(--text-sm)/1 var(--font-mono); color: var(--text); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 6px; }
+.repo-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text); text-decoration: none; }
+.repo-link:hover { color: var(--accent-text); text-decoration: none; }
+.repo-icon { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; opacity: var(--icon-dim); }
 
-/* Entry images: one image per row at the card's width, a remove form below each, and the
-   one-file upload form closing the card. The file input flexes to whatever width remains. */
-.image-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
-.entry-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
-.image-skip { margin: 0; font-size: var(--text-xs); color: var(--text-dim); }
+/* Entry images: the dropzone is the upload control; the arrived images sit under it as the
+   shipped dropzone list, and the submit ends the block as its action row. */
+.image-list { gap: var(--space-3); }
+.entry-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-1); }
+.image-skip { margin: 0; font-size: var(--t-2); color: var(--text-3); }
 .image-remove { margin-top: var(--space-1); }
-.image-upload { display: flex; gap: var(--space-2); align-items: center; }
-.image-upload .input { flex: 1; min-width: 0; }
-
-/* Revision history: newest first; the text clamps like the list's entry text. */
-.history-empty { font-size: var(--text-sm); color: var(--text-faint); padding: var(--space-2) 0; }
-.revision-list { list-style: none; margin: 0; padding: 0; }
-.revision { padding: var(--space-3) 0; }
-.revision + .revision { border-top: 1px solid var(--line); }
-.revision-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
-.revision-time { font-size: var(--text-xs); color: var(--text-faint); }
-.revision-head .btn { margin-left: auto; }
-.revision-text {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-size: var(--text-sm);
-  color: var(--text-muted);
-}
+.image-upload { display: flex; justify-content: flex-end; }
 
-/* ---- Login page: the navbar shell, then one centered card ---- */
-.login-main { display: flex; flex-direction: column; align-items: center; }
-.login-main .page-header, .login-card { width: 100%; max-width: 400px; }
-.login-card .card-content { display: flex; flex-direction: column; gap: var(--space-4); }
+/* ---- Login: the page-state card's content column ---- */
+.login-content { display: flex; flex-direction: column; gap: var(--space-4); }
 .login-actions { display: flex; justify-content: flex-end; }
 
-/* ---- Style guide editor: the section selector, then the one card ---- */
-.style-guide-projects { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
-#style-guide-region > .callout { margin-bottom: var(--space-4); }
+/* ---- Style guide editor: the section tabs, then the one card ---- */
+/* The project strip can hold every project's tab, so it scrolls in its own box like the status
+   strip does; the document never widens for it. */
+.style-guide-projects { margin-bottom: var(--space-4); overflow-x: auto; }
+/* The document default underlines every link on hover; the tab costume is a button's, so the
+   reset rides the anchor here. */
+.style-guide-projects a.tab,
+.style-guide-projects a.tab:hover { text-decoration: none; }
+/* The settled notices sit on the same measure as the card below them; a full-width callout
+   over a half-width form read as two unrelated blocks. */
+#style-guide-region > .callout { max-width: var(--page-narrow); margin-bottom: var(--space-4); }
 #style-guide-region > .btn { margin-top: var(--space-4); }
-.style-guide-card .card-content { display: flex; flex-direction: column; gap: var(--space-5); }
+/* The fields stack in one column on the narrow measure, so the guide's long inputs never
+   stretch the whole page column. */
+.style-guide-card { max-width: var(--page-narrow); }
+.style-guide-fields { display: flex; flex-direction: column; gap: var(--space-4); }
 .style-guide-card .editor-actions { margin-top: 0; }