/* Hallmark · shape: app screen · genre: modern-minimal · theme: Blueprint (dealt 2/3)
 * nav: compact topbar · signature: interactive ruled task register · states: full, empty, error, saved, active · blueprint: cyanotype
 * axes: mid/geometric-sans/neutral · posture: drenched · contrast: pass · finish-review: in-thread, focus restoration fixed · v2.0.0 */
/* Hallmark · pre-emit critique: P product-led · H register is first · E full keyboard · S no fake social proof · R stacked at 375px · V local-only stated · weakest: sample context, explicitly disclosed. */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --app-border: var(--color-rule-2);
  --color-paper-soft: oklch(39% 0.105 256);
  --color-quiet-hover: oklch(42% 0.10 255);
}
html { scroll-behavior: smooth; }
body { min-height: 100dvh; }
button, select, input { font-family: var(--font-body); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; transition: none; }
.skip-link { position: fixed; top: -5rem; right: var(--space-md); z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip-link:focus-visible { top: var(--space-md); }
.container { max-width: 1512px; }
.topbar { border-bottom: 1px solid var(--color-rule-2); }
.topbar-inner { min-height: 82px; display: flex; align-items: center; gap: var(--space-2xl); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: var(--text-xl); }
.brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--color-rule); font-weight: 600; }
.brand-latin { align-self: end; margin-bottom: var(--space-2xs); color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-xs); }
.topbar nav { display: flex; align-items: stretch; min-height: 82px; gap: var(--space-xl); }
.nav-link { display: inline-grid; align-items: center; color: var(--color-muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: var(--text-sm); white-space: nowrap; }
.nav-link:hover, .nav-link.is-active { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.demo-chip { margin-inline-start: auto; color: var(--color-muted); font-size: var(--text-sm); border: 1px solid var(--color-rule-2); padding: var(--space-xs) var(--space-md); }
.heading-bar { display: flex; gap: var(--space-xl); justify-content: space-between; align-items: end; padding-block: var(--space-2xl) var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.context-line { margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
h1 { max-width: none; font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.16; font-family: var(--font-body); }
.heading-description { max-width: 58ch; margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-md); }
.project-choice { flex: 0 0 254px; }
.project-choice label, .field label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-xs); color: var(--color-ink-2); }
.project-choice select, .field select, .field input, .search-wrap input {
  width: 100%; min-height: 48px; color: var(--color-ink); border: 1px solid var(--color-muted);
  background: var(--color-paper-2); border-radius: 0; padding: var(--space-sm) var(--space-md); outline-offset: 2px;
}
select { appearance: auto; }
input::placeholder { color: var(--color-muted); opacity: 1; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: var(--space-xl); align-items: start; padding-top: var(--space-xl); }
.register { min-width: 0; }
.section-header { display: flex; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: var(--space-lg); }
.section-header h2, .summary h2 { font: 600 var(--text-2xl)/1.2 var(--font-body); }
.section-header p { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.quiet-action { border: 1px solid var(--color-rule-2); background: transparent; color: var(--color-ink); padding: var(--space-sm) var(--space-md); min-height: 44px; border-radius: 0; font-size: var(--text-sm); white-space: nowrap; }
.quiet-action:hover { background: var(--color-quiet-hover); }
.tool-row { display: flex; gap: var(--space-md); align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
.search-wrap { width: min(310px, 100%); position: relative; flex-shrink: 1; }
.search-wrap svg { position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-muted); }
.search-wrap input { padding-right: var(--space-xl); min-width: 0; }
.filters { display: flex; overflow-x: auto; gap: var(--space-2xs); padding: var(--space-2xs); max-width: 100%; }
.filter { border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--color-muted); padding: var(--space-sm) var(--space-md); min-height: 44px; white-space: nowrap; font-size: var(--text-sm); }
.filter:hover { border-color: var(--color-rule-2); color: var(--color-ink); }
.filter.is-selected { background: var(--color-ink); color: var(--color-accent-ink); }
.table-wrap { border-top: 2px solid var(--color-rule); }
table { width: 100%; border-collapse: collapse; text-align: right; }
th { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-align: right; padding: var(--space-md) var(--space-sm); }
th:last-child, td:last-child { text-align: left; }
td { border-top: 1px solid var(--color-rule-2); padding: var(--space-lg) var(--space-sm); font-size: var(--text-md); vertical-align: middle; }
tr:last-child td { border-bottom: 1px solid var(--color-rule-2); }
td:first-child { font-weight: 500; width: 54%; overflow-wrap: anywhere; }
.task-ref { display: block; margin-bottom: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); font-family: var(--font-outlier); direction: ltr; text-align: right; }
.task-state { display: inline-block; font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); color: var(--color-ink-2); white-space: nowrap; }
.task-state[data-state="done"] { background: var(--color-ink); color: var(--color-accent-ink); }
.row-action { min-height: 44px; border: 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); background: none; padding: var(--space-xs); font-size: var(--text-sm); white-space: nowrap; }
.row-action:hover { background: var(--color-quiet-hover); }
.empty-state { text-align: center; padding: var(--space-2xl) var(--space-lg); border-bottom: 1px solid var(--color-rule-2); }
.empty-state p { margin: var(--space-xs) 0 var(--space-lg); color: var(--color-muted); }
.add-form { margin-top: var(--space-2xl); padding: var(--space-lg) 0 var(--space-xl); border-top: 2px solid var(--color-rule); }
.add-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.add-title h3 { font: 600 var(--text-xl)/1.3 var(--font-body); }
.add-title p { color: var(--color-muted); font-size: var(--text-sm); }
.form-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 180px) auto; gap: var(--space-sm); align-items: end; }
.button-primary { min-height: 48px; background: var(--color-ink); border: 1px solid var(--color-ink); color: var(--color-accent-ink); border-radius: 0; font-weight: 600; padding: var(--space-sm) var(--space-lg); white-space: nowrap; }
.button-primary:hover { background: var(--color-ink-2); }
.button-primary:active, .quiet-action:active, .row-action:active { transform: translateY(1px); }
.form-notice { min-height: 1.5em; margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.form-notice.is-error { color: var(--color-ink); text-decoration: underline; }
.summary { position: sticky; top: var(--space-lg); border: 1px solid var(--color-rule); padding: var(--space-lg); min-width: 0; }
.summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); border-bottom: 1px solid var(--color-rule-2); padding-bottom: var(--space-lg); }
.summary h2 { font-size: var(--text-xl); }
.reference-no, .sheet-id { font: 500 var(--text-xs)/1.4 var(--font-outlier); color: var(--color-muted); }
.progress-block { padding: var(--space-xl) 0; }
.progress-label { font-size: var(--text-sm); color: var(--color-ink-2); }
.progress-value { display: block; font: 600 3.75rem/1.3 var(--font-display); margin-top: var(--space-md); direction: ltr; text-align: right; }
.progress-track { height: 10px; border: 1px solid var(--color-rule-2); padding: var(--space-3xs); margin-top: var(--space-lg); }
.progress-track span { display: block; width: var(--progress); height: 100%; background: var(--color-ink); }
.summary-list { margin: 0; }
.summary-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule-2); }
.summary-list dt { color: var(--color-ink-2); font-size: var(--text-sm); }
.summary-list dd { margin: 0; font: 600 var(--text-xl)/1 var(--font-display); }
.notes { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.notes h3 { font: 600 var(--text-md)/1.3 var(--font-body); margin-bottom: var(--space-sm); }
.notes p { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-sm); }
.sheet-id { padding-top: var(--space-xl); }
.footer { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-2xl); padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule-2); color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 1150px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-xl); }
  .summary-head, .sheet-id { grid-column: 1 / -1; }
  .progress-block { padding-bottom: var(--space-md); }
  .notes { margin-top: var(--space-sm); }
}
@media (max-width: 760px) {
  .topbar-inner { min-height: 70px; gap: var(--space-md); justify-content: space-between; }
  .topbar nav, .brand-latin { display: none; }
  .heading-bar { display: block; padding-block: var(--space-xl); }
  .project-choice { margin-top: var(--space-lg); max-width: 100%; }
  .heading-description { margin-top: var(--space-sm); }
  .layout { padding-top: var(--space-lg); }
  .tool-row { align-items: stretch; flex-direction: column; }
  .search-wrap { width: 100%; }
  .filters { width: 100%; }
  .filter { flex: 1 0 auto; }
  th { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule-2); column-gap: var(--space-md); row-gap: var(--space-sm); }
  td, tr:last-child td { border: 0; padding: 0; }
  td:first-child { grid-column: 1 / -1; width: 100%; }
  td:nth-child(2) { align-self: center; }
  td:last-child { justify-self: end; }
  .add-title { display: block; }
  .add-title p { margin-top: var(--space-xs); }
  .form-fields { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .button-primary { width: 100%; }
  .summary { grid-template-columns: minmax(0, 1fr); }
  .summary-head, .sheet-id { grid-column: auto; }
  .footer { display: block; }
  .footer span { display: block; margin-top: var(--space-xs); }
}
@media (max-width: 420px) {
  .section-header { flex-direction: column; align-items: flex-start; }
  .summary-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }