/* Hallmark · shape: app screen · genre: editorial · theme: custom · idea: "A shared source desk" · paper: oklch(14% .002 250) · accent: neutral · display: system-ui · body: system-ui · nav: source desk top bar · signature: source and forum reading sequence · states: full empty loading error · axes: dark/grotesk/neutral · posture: Restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P8 H8 E8 S8 R8 V8 · weakest: dense reading; sources use generous measure and disclosure, controls stay secondary. */
/* Hallmark · finish-review: subagent · 2 findings · 2 resolved · mobile jump links and method disclosure */
/* Hallmark · answered: app scope exempts marketing hero and word budgets; no imagery is needed for a text research tool. */
@import url("./tokens.css");
@import url("./base.css");
.skip-link { position: fixed; inset-inline-start: var(--space-md); inset-block-start: var(--space-md); z-index: var(--z-sticky); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip-link:focus-visible { transform: translateY(0); }
.topbar { border-bottom: 1px solid var(--color-rule); }
.topbar-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { font-size: var(--text-lg); font-weight: 700; text-decoration: none; white-space: nowrap; }
.topbar-nav { display: flex; align-items: center; gap: var(--space-lg); }
.topbar-nav a { font-size: var(--text-sm); text-decoration: none; }
.user-name { color: var(--color-muted); font-size: var(--text-sm); }
button, .button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 1px solid var(--color-field-edge); border-radius: var(--radius-control); padding: var(--space-xs) var(--space-md); background: var(--color-transparent); color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
button.primary, .button.primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); font-weight: 700; }
button.quiet { border-color: var(--color-transparent); padding-inline: var(--space-xs); }
button:active, .button:active { transform: translateY(1px); }
button:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
input:not([type="checkbox"]), select, textarea { width: 100%; border: 1px solid var(--color-field-edge); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-xs) var(--space-sm); min-height: 44px; outline: 2px solid var(--color-transparent); outline-offset: 2px; }
input:not([type="checkbox"]):focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); }
input::placeholder, textarea::placeholder { color: var(--color-muted); }
input[type="checkbox"] { accent-color: var(--color-accent); width: 20px; height: 20px; flex-shrink: 0; }
textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
label { display: block; font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-xs); }
.field { min-width: 0; }
.field + .field { margin-top: var(--space-lg); }
.help, .muted { color: var(--color-muted); font-size: var(--text-sm); }
.help { margin-top: var(--space-xs); min-height: 1lh; }
.page { padding-block: var(--space-xl) var(--space-2xl); }
.page-heading { display: flex; gap: var(--space-lg); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-xl); }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: var(--text-3xl); letter-spacing: -.025em; font-weight: 700; max-width: 32ch; }
h2 { font-size: var(--text-xl); font-weight: 700; }
h3 { font-size: var(--text-lg); font-weight: 700; }
.page-heading p { color: var(--color-muted); margin-top: var(--space-xs); }
.filter-bar { display: grid; grid-template-columns: minmax(0,1fr) 200px auto; gap: var(--space-md); align-items: end; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.filter-bar label { margin-bottom: var(--space-xs); }
.filter-actions { display: flex; gap: var(--space-xs); align-items: center; }
.news-list { margin: 0; padding: 0; list-style: none; }
.news-row { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: var(--space-xl); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.news-row.read h2 { font-weight: 400; }
.news-row h2 { font-size: var(--text-xl); line-height: 1.4; max-width: 62ch; }
.news-row h2 a { text-decoration: none; }
.news-excerpt { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 78ch; }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-sm); }
.row-work { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.status { font-variant-numeric: tabular-nums; display: inline-block; font-size: var(--text-sm); color: var(--color-ink-2); }
.row-work .status { border-left: 2px solid var(--color-field-edge); padding-left: var(--space-sm); }
.row-work a, .row-work button { margin-top: var(--space-xs); }
.empty-state { padding-block: var(--space-2xl); max-width: 60ch; }
.empty-state h2 { margin-bottom: var(--space-sm); }
.empty-state p + p { margin-top: var(--space-sm); }
.source-health { margin-top: var(--space-xl); }
.source-health ul { margin: var(--space-sm) 0 0; padding-left: var(--space-lg); }
.notice { padding: var(--space-md); border-left: 2px solid var(--color-field-edge); background: var(--color-paper-2); color: var(--color-ink-2); margin-bottom: var(--space-lg); max-width: 90ch; }
.notice.error { border-left-width: 4px; }
.notice p + p { margin-top: var(--space-xs); }
.breadcrumb { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.article-heading { max-width: 940px; }
.article-heading h1 { max-width: 32ch; font-size: var(--text-3xl); line-height: 1.3; }
.article-heading .meta { margin-top: var(--space-lg); }
.source-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
.desk-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--gap-columns); margin-top: var(--space-xl); align-items: start; }
.reading-column { min-width: 0; }
.section { margin-top: var(--space-xl); }
.section:first-child { margin-top: 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.source-material { line-height: 1.75; color: var(--color-ink-2); max-width: 76ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.source-material p { white-space: pre-wrap; }
.source-label { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.source-more { margin-top: var(--space-lg); }
details > summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-size: var(--text-sm); color: var(--color-ink-2); }
details[open] > summary { margin-bottom: var(--space-md); }
.research-intro { color: var(--color-muted); font-size: var(--text-sm); max-width: 76ch; margin-bottom: var(--space-lg); }
.research-intro p + p { margin-top: var(--space-xs); }
.research-hit { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.research-hit h3 { line-height: 1.45; max-width: 65ch; }
.hit-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-ink-2); line-height: 1.75; max-width: 76ch; margin-top: var(--space-md); }
.hit-actions { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: center; margin-top: var(--space-md); }
.hit-actions a { font-size: var(--text-sm); min-height: 44px; display: inline-flex; align-items: center; }
.selection-form { margin: 0; }
.select-hit { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; color: var(--color-ink-2); margin: 0; cursor: pointer; }
.context { margin-top: var(--space-md); }
.context article { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.context article p { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: var(--space-xs); color: var(--color-ink-2); }
.context article a { font-size: var(--text-sm); }
.more-research { border-top: 1px solid var(--color-rule); }
.workbench { position: static; }
.workbench-section { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.workbench-section:first-child { padding-top: 0; border-top: 0; }
.workbench h2 { margin-bottom: var(--space-lg); }
.workbench .field + .field { margin-top: var(--space-md); }
.form-actions { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin-top: var(--space-md); }
.save-feedback { min-height: 1lh; color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-xs); }
.export-options { border: 0; margin: 0; padding: 0; display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.export-options label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin: 0; }
.export-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.export-actions .primary { width: 100%; }
#export-text { min-height: 240px; margin-top: var(--space-md); font-size: var(--text-sm); }
.comments { margin-top: var(--space-lg); }
.comment { border-top: 1px solid var(--color-rule); padding-block: var(--space-md); }
.comment-header { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.comment-header strong { color: var(--color-ink-2); font-weight: 700; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); margin-top: var(--space-xs); }
.login-shell { max-width: 420px; margin: var(--space-2xl) auto; }
.login-shell h1 { margin-bottom: var(--space-md); }
.login-intro { color: var(--color-muted); margin-bottom: var(--space-xl); }
.login-shell .primary { width: 100%; }
.login-shell .form-actions { margin-top: var(--space-lg); }
.login-help { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
footer { border-top: 1px solid var(--color-rule); padding-block: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); }
.inline-form { display: inline; }
@media (hover: hover) {
 button:hover:not(:disabled), .button:hover { background: var(--color-paper-3); color: var(--color-ink); }
 button.primary:hover:not(:disabled), .button.primary:hover { background: var(--color-ink); color: var(--color-accent-ink); }
 a:hover { color: var(--color-ink); text-decoration: underline; }
 summary:hover { color: var(--color-ink); }
}
@media (max-width: 60rem) {
 .desk-layout { grid-template-columns: minmax(0,1fr); }
 .workbench { position: static; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-lg); }
 .workbench-section, .workbench-section:first-child { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
 .workbench-section.notes { grid-column: 1 / -1; }
 .news-row { grid-template-columns: minmax(0,1fr) 170px; gap: var(--space-lg); }
}
@media (max-width: 40rem) {
 .topbar-inner { min-height: 72px; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-sm); }
 .topbar-nav { width: 100%; justify-content: space-between; gap: var(--space-md); }
 .brand { font-size: var(--text-md); }
 .page { padding-top: var(--space-lg); }
 .page-heading { display: block; margin-bottom: var(--space-lg); }
 h1, .article-heading h1 { font-size: var(--text-2xl); }
 .filter-bar { grid-template-columns: minmax(0,1fr); gap: var(--space-sm); }
 .filter-actions { justify-content: flex-start; }
 .news-row { grid-template-columns: minmax(0,1fr); gap: var(--space-md); }
 .row-work { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
 .row-work a, .row-work button { margin-top: 0; }
 .workbench { display: block; }
 .workbench-section + .workbench-section { margin-top: var(--space-lg); }
 .login-shell { margin-top: var(--space-xl); }
 button, .button, input:not([type="checkbox"]), select { min-height: 48px; }
 .hit-actions { gap: var(--space-sm); }
 .meta { gap: var(--space-xs) var(--space-sm); }
}

pre.source-material, pre.hit-text { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }

.article-jumps { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; gap: var(--space-md); padding-block: var(--space-xs); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.article-jumps a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); white-space: nowrap; }