/* Composition CSS — admitted compositions per design/registry.yaml.
*
* Per design/LAW.md: compositions live in this file (not app.css) so the
* conformity scanner doesn't count them as bespoke drift. Each rule must
* resolve its visual constants from var(--*) tokens emitted to
* static/tokens.css.
*
* Currently implemented compositions:
* - proposition_intake (U2)
* - proposition_card (U2)
*
* Other compositions (Hero, ArtifactCard, ClaimCard, etc.) land as their
* respective surfaces stop using bespoke classes from app.css.
*/
/* ============================================================
* proposition_intake — U2 natural-language intent input
* ============================================================ */
.intake {
max-width: 880px;
margin: 0 auto;
padding: var(--space-9) var(--space-7);
}
.intake-eyebrow {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-eyebrow);
margin: 0 0 var(--space-4);
}
.intake-title {
font-family: var(--type-display-2-family);
font-size: var(--type-display-2-size);
line-height: var(--type-display-2-line);
font-weight: var(--type-display-2-weight);
letter-spacing: var(--type-display-2-tracking);
color: var(--color-text);
margin: 0 0 var(--space-4);
}
.intake-sub {
font-family: var(--type-lead-family);
font-size: var(--type-lead-size);
line-height: var(--type-lead-line);
color: var(--color-text-muted);
margin: 0 0 var(--space-7);
}
.intake-field {
position: relative;
display: block;
margin-bottom: var(--space-5);
}
.intake-textarea {
width: 100%;
min-height: 120px;
padding: var(--space-5) var(--space-6);
font-family: var(--type-body-family);
font-size: var(--type-lead-size);
line-height: var(--type-lead-line);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
resize: vertical;
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.intake-textarea:focus {
outline: none;
border-color: var(--color-orange);
box-shadow: 0 0 0 3px rgba(208, 74, 2, 0.15);
}
.intake-textarea::placeholder {
color: var(--color-slate-light);
}
.intake-actions {
display: flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-5);
}
.intake-submit {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-7);
font-family: var(--type-button-family);
font-size: var(--type-button-size);
font-weight: var(--type-button-weight);
letter-spacing: var(--type-button-tracking);
text-transform: uppercase;
color: var(--color-text-inverse);
background: var(--color-orange);
border: 0;
border-radius: var(--radii-md);
cursor: pointer;
transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.intake-submit:hover { background: #B53F00; }
.intake-submit:focus-visible {
outline: 2px solid var(--color-orange);
outline-offset: 2px;
}
.intake-submit:disabled {
background: var(--color-slate-light);
cursor: not-allowed;
}
.intake-aux {
font-family: var(--type-small-family);
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
.intake-aux a {
color: var(--color-orange);
text-decoration: none;
}
.intake-aux a:hover { text-decoration: underline; }
.intake-examples {
margin-top: var(--space-5);
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
.intake-examples-head {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-slate);
margin-bottom: var(--space-3);
}
.intake-examples ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-3);
}
.intake-examples li {
padding: var(--space-3) var(--space-4);
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
cursor: pointer;
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text);
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.intake-examples li:hover {
border-color: var(--color-orange);
}
/* ============================================================
* proposition_card — U2 review surface
* ============================================================ */
.proposition {
max-width: 880px;
margin: 0 auto var(--space-7);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.proposition-head {
padding: var(--space-7) var(--space-8) var(--space-5);
background: linear-gradient(135deg, var(--color-navy-deep), #1a3158 80%);
color: var(--color-text-inverse);
position: relative;
}
.proposition-head::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: var(--color-orange);
}
.proposition-eyebrow {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-orange);
margin: 0 0 var(--space-3);
}
.proposition-title {
font-family: var(--type-title-family);
font-size: var(--type-title-size);
line-height: var(--type-title-line);
font-weight: var(--type-title-weight);
color: var(--color-text-inverse);
margin: 0;
letter-spacing: var(--type-title-tracking);
}
.proposition-intent {
margin-top: var(--space-4);
font-family: var(--type-body-family);
font-style: italic;
color: #C9D5E4;
font-size: var(--type-body-size);
line-height: var(--type-body-line);
border-left: 2px solid rgba(255, 255, 255, 0.18);
padding-left: var(--space-4);
max-width: 600px;
}
.proposition-confidence {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 2px var(--space-3);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radii-pill);
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-orange-light);
margin-top: var(--space-4);
}
.proposition-body {
padding: var(--space-7) var(--space-8);
}
.proposition-rows {
display: grid;
grid-template-columns: 130px 1fr;
row-gap: var(--space-5);
column-gap: var(--space-6);
margin: 0;
}
.proposition-label {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
padding-top: 4px;
}
.proposition-value {
font-family: var(--type-body-family);
font-size: var(--type-body-size);
line-height: var(--type-body-line);
color: var(--color-text);
}
.proposition-value.is-empty {
font-style: italic;
color: var(--color-slate-light);
}
.proposition-value-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 2px var(--space-3);
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radii-pill);
font-family: var(--type-small-family);
font-size: var(--type-small-size);
color: var(--color-text);
margin-right: var(--space-2);
margin-bottom: var(--space-2);
}
.proposition-value-mono {
font-family: var(--type-mono-family);
font-size: var(--type-mono-size);
color: var(--color-text-muted);
}
.proposition-edit {
display: inline-block;
margin-left: var(--space-3);
font-family: var(--type-eyebrow-family);
font-size: 10px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--color-orange);
text-decoration: none;
cursor: pointer;
}
.proposition-edit:hover { text-decoration: underline; }
.proposition-assumptions {
margin-top: var(--space-7);
padding: var(--space-5) var(--space-6);
background: var(--color-paper);
border-left: 2px solid var(--color-orange);
border-radius: 0 var(--radii-md) var(--radii-md) 0;
}
.proposition-assumptions-head {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-slate);
margin-bottom: var(--space-3);
}
.proposition-assumptions ul {
margin: 0;
padding-left: var(--space-5);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
line-height: var(--type-body-line);
color: var(--color-text);
}
.proposition-limits {
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--color-rule);
font-family: var(--type-small-family);
font-size: var(--type-small-size);
line-height: var(--type-body-line);
color: var(--color-text-muted);
}
.proposition-limits-head {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-slate);
margin-bottom: var(--space-3);
}
.proposition-actions {
padding: var(--space-6) var(--space-8);
background: var(--color-paper);
border-top: 1px solid var(--color-rule);
display: flex;
align-items: center;
gap: var(--space-4);
}
.proposition-run {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-7);
font-family: var(--type-button-family);
font-size: var(--type-button-size);
font-weight: var(--type-button-weight);
letter-spacing: var(--type-button-tracking);
text-transform: uppercase;
color: var(--color-text-inverse);
background: var(--color-orange);
border: 0;
border-radius: var(--radii-md);
cursor: pointer;
transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.proposition-run:hover { background: #B53F00; }
.proposition-run:disabled { background: var(--color-slate-light); cursor: not-allowed; }
.proposition-secondary {
font-family: var(--type-button-family);
font-size: var(--type-button-size);
font-weight: var(--type-button-weight);
letter-spacing: var(--type-button-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
padding: var(--space-4) var(--space-6);
cursor: pointer;
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.proposition-secondary:hover {
border-color: var(--color-orange);
color: var(--color-orange);
}
.proposition-status {
margin-left: auto;
font-family: var(--type-small-family);
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
/* ============================================================
* manifest-reader — U3 ArtifactManifest-driven reading surface
* ============================================================ */
.manifest-reader {
max-width: 880px;
margin: 0 auto;
padding: var(--space-7) var(--space-7) var(--space-10);
font-family: var(--type-body-family);
color: var(--color-text);
}
.manifest-reader-head {
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--color-rule);
margin-bottom: var(--space-8);
}
.manifest-reader-title {
font-family: var(--type-display-2-family);
font-size: var(--type-display-2-size);
line-height: var(--type-display-2-line);
font-weight: var(--type-display-2-weight);
letter-spacing: var(--type-display-2-tracking);
color: var(--color-text);
margin: var(--space-4) 0 var(--space-4);
}
.manifest-reader-meta {
font-family: var(--type-body-family);
font-size: var(--type-body-size);
color: var(--color-text-muted);
line-height: var(--type-body-line);
}
.manifest-reader-version {
margin-top: var(--space-4);
font-family: var(--type-small-family);
font-size: var(--type-small-size);
color: var(--color-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
}
.manifest-reader-version-label {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-slate-light);
}
.manifest-reader-version-sep { color: var(--color-rule); margin: 0 var(--space-1); }
.manifest-reader-history {
margin-top: var(--space-4);
border: 1px solid var(--color-rule);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.manifest-reader-history summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
cursor: pointer;
color: var(--color-text-muted);
}
.manifest-reader-history-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--color-rule);
}
.manifest-reader-history-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
padding: var(--space-4);
border-bottom: 1px solid var(--color-rule);
}
.manifest-reader-history-row:last-child { border-bottom: 0; }
.manifest-reader-history-row-active {
background: var(--color-paper);
}
.manifest-reader-history-status {
display: inline-flex;
align-items: center;
margin-left: var(--space-2);
padding: 1px var(--space-2);
border: 1px solid var(--color-rule);
border-radius: var(--radius-pill);
color: var(--color-text-muted);
font-family: var(--type-small-family);
font-size: var(--type-small-size);
}
.manifest-reader-history-status-muted {
opacity: 0.75;
}
.manifest-reader-history-meta,
.manifest-reader-history-hash {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
color: var(--color-text-muted);
font-family: var(--type-small-family);
font-size: var(--type-small-size);
}
.manifest-reader-history-link {
width: fit-content;
color: var(--color-accent);
font-family: var(--type-small-family);
font-size: var(--type-small-size);
text-decoration: none;
}
.manifest-reader-history-link:hover { text-decoration: underline; }
/* ============================================================
* checklist-panel — U4 derived readiness surface
* ============================================================ */
.checklist-panel {
margin: 0 0 var(--space-8);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
}
.checklist-panel[data-status="ready"] {
border-color: var(--color-green);
}
.checklist-panel[data-status="blocked"] {
border-color: var(--color-red);
}
.checklist-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.checklist-panel-status {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
padding: var(--space-1) var(--space-3);
border-radius: var(--radii-pill);
background: var(--color-paper);
color: var(--color-text-muted);
}
.checklist-panel[data-status="ready"] .checklist-panel-status {
background: #DCFCE7;
color: var(--color-green);
}
.checklist-panel[data-status="blocked"] .checklist-panel-status {
background: #FEE2E2;
color: var(--color-red);
}
.checklist-panel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.checklist-panel-grid > div {
padding: var(--space-3);
background: var(--color-paper);
border-radius: var(--radii-md);
}
.checklist-panel-label {
display: block;
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-slate-light);
margin-bottom: var(--space-1);
}
.checklist-panel-grid strong {
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text);
}
.checklist-panel-blockers {
border-top: 1px solid var(--color-rule);
padding-top: var(--space-4);
}
.checklist-panel-blockers ul {
margin: var(--space-3) 0 0;
padding-left: var(--space-5);
}
.checklist-panel-blockers li {
margin-bottom: var(--space-2);
color: var(--color-text-muted);
}
.checklist-panel-blockers code {
font-family: var(--type-mono-family);
color: var(--color-red);
margin-right: var(--space-2);
}
.checklist-panel-clear {
margin: 0;
color: var(--color-text-muted);
font-size: var(--type-small-size);
}
/* ============================================================
* artifact-library — workspace-owned ArtifactVersion index
* ============================================================ */
.artifact-library {
max-width: 1120px;
margin: 0 auto;
padding: var(--space-8) var(--space-7) var(--space-10);
}
.artifact-library-head {
margin-bottom: var(--space-7);
}
.artifact-library-title {
margin: var(--space-3) 0 var(--space-3);
font-family: var(--type-display-2-family);
font-size: var(--type-display-2-size);
line-height: var(--type-display-2-line);
color: var(--color-text);
}
.artifact-library-sub {
max-width: 720px;
margin: 0;
color: var(--color-text-muted);
font-size: var(--type-lead-size);
line-height: var(--type-lead-line);
}
.artifact-library-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-5);
}
.artifact-library-card,
.artifact-library-none {
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
padding: var(--space-5);
}
.artifact-library-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.artifact-library-status {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
}
.artifact-library-card-title {
margin: 0 0 var(--space-3);
font-family: var(--type-title-family);
font-size: var(--type-subtitle-size);
line-height: var(--type-subtitle-line);
color: var(--color-text);
}
.artifact-library-meta,
.artifact-library-empty {
color: var(--color-text-muted);
font-size: var(--type-small-size);
line-height: var(--type-body-line);
}
.artifact-library-version {
margin-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-1);
color: var(--color-text-muted);
font-size: var(--type-small-size);
}
.artifact-library-version code {
font-family: var(--type-mono-family);
color: var(--color-text);
}
.artifact-library-actions {
margin-top: var(--space-5);
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.artifact-library-actions a,
.artifact-library-none a {
color: var(--color-orange);
text-decoration: none;
font-weight: 600;
}
.artifact-library-actions a:hover,
.artifact-library-none a:hover {
text-decoration: underline;
}
.manifest-section {
margin-bottom: var(--space-9);
}
.manifest-section-head {
margin-bottom: var(--space-5);
}
.manifest-section-title {
font-family: var(--type-title-family);
font-size: var(--type-title-size);
line-height: var(--type-title-line);
font-weight: var(--type-title-weight);
color: var(--color-text);
margin: var(--space-3) 0 var(--space-3);
}
.manifest-section-sub {
font-family: var(--type-lead-family);
font-size: var(--type-lead-size);
line-height: var(--type-lead-line);
color: var(--color-text-muted);
margin: 0;
}
.manifest-section-body {
border-left: 2px solid var(--color-rule);
padding-left: var(--space-5);
}
.manifest-block-heading {
font-family: var(--type-subtitle-family);
font-size: var(--type-subtitle-size);
font-weight: var(--type-subtitle-weight);
color: var(--color-text);
margin: var(--space-5) 0 var(--space-3);
}
.manifest-block-paragraph {
font-family: var(--type-body-family);
font-size: var(--type-body-size);
line-height: var(--type-body-line);
color: var(--color-text);
margin: 0 0 var(--space-4);
}
.manifest-claim {
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-left: 3px solid var(--color-orange);
border-radius: var(--radii-md);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-4);
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.manifest-claim:hover {
border-color: var(--color-orange);
}
.manifest-claim-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.manifest-claim-label {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
}
.manifest-claim-state {
display: inline-block;
font-family: var(--type-eyebrow-family);
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 1px var(--space-3);
border-radius: var(--radii-pill);
background: var(--color-paper);
color: var(--color-slate);
}
.manifest-claim-state[data-state="reviewer-accepted"],
.manifest-claim-state[data-state="accepted"] {
background: #DCFCE7; color: var(--color-green);
}
.manifest-claim-state[data-state="overridden"] {
background: #FEF3C7; color: #8A6D00;
}
.manifest-claim-state[data-state="rejected"] {
background: #FEE2E2; color: var(--color-red);
}
.manifest-claim-state[data-state="source-linked"] {
background: #E0F2FE; color: #155E75;
}
.manifest-claim-state[data-state="derived"],
.manifest-claim-state[data-state="system-reconciled"] {
background: #EDE9FE; color: #5B21B6;
}
.manifest-claim-value {
font-family: var(--type-mono-family);
font-size: var(--type-lead-size);
color: var(--color-text);
}
.manifest-claim-value strong {
font-weight: 600;
color: var(--color-text);
}
.manifest-claim-unit {
margin-left: var(--space-2);
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
.manifest-claim-period {
font-size: var(--type-small-size);
color: var(--color-text-muted);
margin-left: var(--space-2);
}
.manifest-claim-text {
margin-top: var(--space-2);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
font-style: italic;
line-height: var(--type-body-line);
color: var(--color-text-muted);
}
.manifest-claim-review {
margin-top: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
background: var(--color-paper);
}
.manifest-claim-review-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
}
.manifest-claim-review-row + .manifest-claim-review-row {
margin-top: var(--space-2);
}
.manifest-claim-review-label {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
}
.manifest-claim-review-value {
font-family: var(--type-mono-family);
font-size: var(--type-mono-size);
color: var(--color-text);
text-align: right;
}
.manifest-claim-review-note {
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-rule);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
line-height: var(--type-body-line);
color: var(--color-text-muted);
}
.manifest-claim-citation {
margin-top: var(--space-3);
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: transparent;
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
cursor: pointer;
color: var(--color-text-muted);
font-family: var(--type-body-family);
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
color var(--motion-duration-fast) var(--motion-ease-standard);
}
.manifest-claim-citation:hover {
border-color: var(--color-orange);
color: var(--color-orange);
}
.manifest-claim-citation-text {
font-family: var(--type-mono-family);
font-size: var(--type-mono-size);
}
.manifest-empty {
padding: var(--space-8) var(--space-7);
text-align: center;
background: var(--color-paper);
border: 1px dashed var(--color-rule);
border-radius: var(--radii-lg);
}
.manifest-empty p {
margin: var(--space-3) 0 0;
color: var(--color-text-muted);
}
.manifest-reader-foot {
margin-top: var(--space-10);
padding-top: var(--space-7);
border-top: 1px solid var(--color-rule);
}
.manifest-source {
margin-top: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-paper);
border-radius: var(--radii-md);
}
.manifest-source-row {
display: flex;
align-items: baseline;
gap: var(--space-4);
margin-bottom: var(--space-2);
flex-wrap: wrap;
}
.manifest-source-label {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-slate-light);
min-width: 110px;
}
.manifest-source-row a {
color: var(--color-orange);
text-decoration: none;
word-break: break-all;
}
.manifest-notes {
margin-top: var(--space-6);
}
.manifest-notes ul {
margin: var(--space-3) 0 0;
padding-left: var(--space-6);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
line-height: var(--type-body-line);
color: var(--color-text-muted);
}
/* Margin shim for Eyebrow primitive in hero contexts.
* The Eyebrow primitive itself carries no margin (it's atomic).
* Compositions place spacing. */
.examples-hero [data-primitive="eyebrow"] { margin-bottom: var(--space-5); }
.examples-promise [data-primitive="eyebrow"] { margin-bottom: var(--space-6); }
.example-card-hero [data-primitive="eyebrow"] { margin-bottom: var(--space-3); color: var(--accent); }
/* ============================================================
* commission — Commission Editor (NOT a wizard).
*
* One stable page. Two-column grid: editor (left), live proposition
* summary (right). No sections appear/disappear; click = toggle a
* single chip's class in place.
*
* Each option carries data-attributes for its state:
* data-selected = true|false
* data-suggested = true|false (soft hint from purpose cascade)
* data-blocked = true|false (capability gap or precondition missing)
* data-inferred = true|false (auto-filled from earlier choice)
*
* Only ONE genuine hierarchy: Issuer → Filing (the issuer's actual
* SEC filings narrow the Filing pills). Everything else is orthogonal.
* ============================================================ */
.commission {
max-width: 1240px;
margin: var(--space-7) auto var(--space-9);
}
.commission-head {
padding: 0 var(--space-7) var(--space-6);
}
.commission-title {
font-family: var(--type-display-2-family);
font-size: var(--type-display-2-size);
line-height: var(--type-display-2-line);
font-weight: var(--type-display-2-weight);
letter-spacing: var(--type-display-2-tracking);
color: var(--color-text);
margin: var(--space-3) 0 var(--space-3);
}
.commission-sub {
font-family: var(--type-body-family);
font-size: var(--type-body-size);
line-height: var(--type-body-line);
color: var(--color-text-muted);
max-width: 740px;
margin: 0;
}
.commission-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--space-7);
padding: 0 var(--space-7);
align-items: start;
}
@media (max-width: 980px) {
.commission-grid { grid-template-columns: 1fr; }
}
/* ---- Editor (left column) ------------------------------------------- */
.editor {
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-xl);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
.editor-row {
padding: var(--space-6) var(--space-7);
border-bottom: 1px solid var(--color-rule);
}
.editor-row:last-of-type { border-bottom: 0; }
.editor-row-head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.editor-row-icon {
font-size: 18px;
line-height: 1;
}
.editor-row-eyebrow {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-eyebrow);
}
.editor-row-hint {
font-family: var(--type-small-family);
font-size: var(--type-small-size);
font-style: italic;
color: var(--color-text-muted);
margin-left: auto;
}
/* Intent textarea + examples */
.editor-intent {
background: linear-gradient(180deg, var(--color-paper), var(--color-surface));
}
.editor-intent-textarea {
width: 100%;
min-height: 70px;
padding: var(--space-4) var(--space-5);
font-family: var(--type-body-family);
font-size: var(--type-lead-size);
line-height: var(--type-lead-line);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
resize: vertical;
}
.editor-intent-textarea:focus {
outline: none;
border-color: var(--color-orange);
box-shadow: 0 0 0 3px rgba(208, 74, 2, 0.10);
}
.editor-intent-actions {
display: flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-3);
flex-wrap: wrap;
}
.editor-examples {
list-style: none;
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
margin: 0;
padding: 0;
flex-basis: 100%;
}
.editor-examples li {
padding: 3px var(--space-3);
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radii-pill);
font-family: var(--type-small-family);
font-size: var(--type-small-size);
color: var(--color-text);
cursor: pointer;
}
.editor-examples li:hover { border-color: var(--color-orange); color: var(--color-orange); }
/* Issuer search */
.editor-issuer-field { position: relative; }
.editor-issuer-input {
width: 100%;
padding: var(--space-3) var(--space-4);
font-family: var(--type-body-family);
font-size: var(--type-lead-size);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
}
.editor-issuer-input:focus {
outline: none;
border-color: var(--color-orange);
box-shadow: 0 0 0 3px rgba(208, 74, 2, 0.10);
}
.editor-issuer-results {
position: absolute;
top: 100%;
left: 0; right: 0;
z-index: var(--z-popover);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
max-height: 280px;
overflow-y: auto;
box-shadow: var(--shadow-popover);
}
.editor-issuer-results li {
padding: var(--space-3) var(--space-4);
cursor: pointer;
border-bottom: 1px solid var(--color-rule);
display: flex;
flex-direction: column;
gap: 2px;
}
.editor-issuer-results li:last-child { border-bottom: 0; }
.editor-issuer-results li:hover { background: var(--color-paper); }
.editor-issuer-name { font-weight: 600; font-size: var(--type-body-size); color: var(--color-text); }
.editor-issuer-meta { font-family: var(--type-mono-family); font-size: var(--type-small-size); color: var(--color-text-muted); }
.editor-issuer-current {
margin-top: var(--space-3);
padding: var(--space-3) var(--space-4);
background: rgba(208, 74, 2, 0.06);
border-left: 2px solid var(--color-orange);
border-radius: 0 var(--radii-md) var(--radii-md) 0;
font-family: var(--type-body-family);
font-size: var(--type-body-size);
display: flex;
align-items: center;
gap: var(--space-3);
}
.editor-issuer-tick { color: var(--color-orange); font-weight: 700; }
.editor-issuer-cik {
font-family: var(--type-mono-family);
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
.editor-issuer-clear {
margin-left: auto;
background: transparent;
border: 0;
color: var(--color-orange);
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
cursor: pointer;
}
.editor-issuer-clear:hover { text-decoration: underline; }
/* Purpose tile grid */
.editor-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3);
}
.editor-tile {
position: relative;
text-align: left;
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
padding: var(--space-4);
cursor: pointer;
display: flex;
flex-direction: column;
gap: var(--space-2);
font-family: var(--type-body-family);
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
background var(--motion-duration-fast) var(--motion-ease-standard),
box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.editor-tile:hover {
border-color: var(--color-orange);
}
.editor-tile[data-selected="true"] {
border-color: var(--color-orange);
background: rgba(208, 74, 2, 0.06);
box-shadow: inset 0 0 0 1px var(--color-orange);
}
.editor-tile-icon {
font-size: 20px;
line-height: 1;
}
.editor-tile-label {
font-family: var(--type-title-family);
font-size: var(--type-section-size);
font-weight: var(--type-section-weight);
color: var(--color-text);
}
.editor-tile-summary {
font-size: var(--type-small-size);
line-height: 1.45;
color: var(--color-text-muted);
}
/* Pill row (filing, audience) */
.editor-pill-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.editor-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-pill);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text);
cursor: pointer;
}
.editor-pill:hover { border-color: var(--color-orange); color: var(--color-orange); }
.editor-pill[data-selected="true"] {
background: var(--color-orange);
color: var(--color-text-inverse);
border-color: var(--color-orange);
}
.editor-pill[data-inferred="true"][data-selected="false"] {
background: rgba(208, 74, 2, 0.06);
border-style: dashed;
border-color: var(--color-orange);
}
.editor-pill-icon { font-size: 14px; }
.editor-pill-label { font-weight: 600; }
.editor-pill-meta {
font-family: var(--type-mono-family);
font-size: 10px;
color: var(--color-text-muted);
margin-left: var(--space-1);
}
.editor-pill[data-selected="true"] .editor-pill-meta { color: rgba(255,255,255,0.75); }
/* Empty state (e.g. Filing before Issuer) */
.editor-empty {
padding: var(--space-4) var(--space-5);
background: var(--color-paper);
border: 1px dashed var(--color-rule);
border-radius: var(--radii-md);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: var(--space-3);
}
.editor-empty-icon { font-size: 16px; color: var(--color-orange); }
.editor-empty-warn { color: var(--color-red); border-color: var(--color-red); }
.editor-inferred-note {
margin-top: var(--space-3);
padding: var(--space-3) var(--space-4);
background: rgba(208, 74, 2, 0.04);
border-left: 2px solid var(--color-orange);
border-radius: 0 var(--radii-md) var(--radii-md) 0;
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text);
}
/* ---- Multi-select chip grid (scope, outputs) ----------------------- */
.editor-chip-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-3);
}
/* Two-line chip:
[icon] [label] [☐/✓ checkbox]
[icon] [summary muted, wraps to 2 lines] */
.editor-chip {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"icon label state"
"icon summary summary";
column-gap: var(--space-3);
row-gap: 2px;
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
cursor: pointer;
text-align: left;
color: var(--color-text);
font-family: var(--type-body-family);
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
background var(--motion-duration-fast) var(--motion-ease-standard),
box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.editor-chip:hover {
border-color: var(--color-orange);
background: var(--color-paper);
}
.editor-chip[data-selected="true"] {
background: var(--color-orange);
color: var(--color-text-inverse);
border-color: var(--color-orange);
box-shadow: 0 1px 3px rgba(208, 74, 2, 0.25);
}
.editor-chip[data-selected="false"][data-suggested="true"] {
background: rgba(208, 74, 2, 0.05);
border-color: rgba(208, 74, 2, 0.4);
}
.editor-chip[data-blocked="true"] {
background: var(--color-paper);
color: var(--color-text-muted);
cursor: not-allowed;
opacity: 0.5;
}
.editor-chip-icon {
grid-area: icon;
align-self: center;
color: var(--color-text-muted);
}
.editor-chip[data-selected="true"] .editor-chip-icon {
color: var(--color-text-inverse);
}
.editor-chip[data-selected="false"][data-suggested="true"] .editor-chip-icon {
color: var(--color-orange);
}
.editor-chip-label {
grid-area: label;
align-self: end;
font-family: var(--type-ui-family);
font-weight: 600;
font-size: var(--type-body-size);
line-height: 1.25;
}
.editor-chip-rationale {
grid-area: summary;
font-family: var(--type-ui-family);
font-size: 12px;
font-style: normal;
line-height: 1.4;
color: var(--color-text-muted);
margin: 0;
display: block;
max-width: 100%;
/* Allow wrap for full readability rather than truncating. */
white-space: normal;
overflow: hidden;
text-overflow: clip;
}
.editor-chip[data-selected="true"] .editor-chip-rationale {
color: rgba(255,255,255,0.85);
}
/* Multi-select checkbox indicator — top-right corner */
.editor-chip::after {
grid-area: state;
align-self: center;
content: "";
width: 18px;
height: 18px;
border: 1.5px solid var(--color-rule);
border-radius: var(--radii-sm);
background: transparent;
flex-shrink: 0;
}
.editor-chip[data-selected="true"]::after {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 0.95);
content: "✓";
color: var(--color-orange);
font-weight: 700;
font-family: var(--type-ui-family);
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.editor-chip[data-selected="false"][data-suggested="true"]::after {
border-color: rgba(208, 74, 2, 0.55);
}
/* Footer: Run + blockers */
.editor-foot {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-7);
border-top: 1px solid var(--color-rule);
background: var(--color-paper);
flex-wrap: wrap;
}
.editor-blockers {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--type-small-family);
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
.editor-blockers li::before {
content: "✗ ";
color: var(--color-red);
margin-right: var(--space-2);
}
.editor-constitutional {
padding: var(--space-5) var(--space-7);
background: var(--color-surface);
border-top: 1px solid var(--color-rule);
}
.editor-constitutional ul {
margin: var(--space-3) 0 0;
padding-left: var(--space-6);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
line-height: 1.55;
color: var(--color-text-muted);
}
.editor-advanced-link {
padding: var(--space-4) var(--space-7) var(--space-5);
text-align: center;
font-family: var(--type-small-family);
font-size: var(--type-small-size);
background: var(--color-surface);
}
.editor-advanced-link a {
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px dotted var(--color-slate-light);
}
.editor-advanced-link a:hover { color: var(--color-orange); border-bottom-color: var(--color-orange); }
/* ---- Right column: live Proposition Summary -------------------------- */
.proposition-summary {
position: sticky;
top: var(--space-5);
align-self: start;
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-xl);
box-shadow: var(--shadow-card);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
@media (max-width: 980px) {
.proposition-summary { position: static; }
}
.prop-summary-head {
display: flex;
align-items: center;
gap: var(--space-3);
}
.prop-summary-icon { font-size: 18px; }
.prop-summary-rows {
display: grid;
grid-template-columns: 80px 1fr;
row-gap: var(--space-3);
column-gap: var(--space-4);
margin: 0;
}
.prop-summary-rows dt {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
padding-top: 2px;
}
.prop-summary-rows dd {
margin: 0;
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text);
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.ps-empty { color: var(--color-slate-light); font-style: italic; }
.ps-mono { font-family: var(--type-mono-family); font-size: 11px; color: var(--color-text-muted); }
.ps-icon { font-size: 13px; }
.ps-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px var(--space-2);
background: rgba(208, 74, 2, 0.08);
border: 1px solid rgba(208, 74, 2, 0.2);
border-radius: var(--radii-pill);
font-size: 11px;
}
.ps-inferred-badge {
display: inline-block;
font-family: var(--type-eyebrow-family);
font-size: 9px;
letter-spacing: 1.2px;
text-transform: uppercase;
background: rgba(208, 74, 2, 0.1);
border: 1px dashed var(--color-orange);
color: var(--color-orange);
padding: 0 var(--space-2);
border-radius: var(--radii-pill);
margin-left: var(--space-2);
}
.prop-summary-readiness {
padding-top: var(--space-4);
border-top: 1px solid var(--color-rule);
}
.ps-readiness-head {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.ps-readiness-icon { font-size: 14px; }
.ps-readiness-state {
margin-left: auto;
font-family: var(--type-eyebrow-family);
font-size: 10px;
font-weight: 600;
letter-spacing: 1.3px;
text-transform: uppercase;
padding: 2px var(--space-3);
border-radius: var(--radii-pill);
}
.ps-readiness-state[data-state="ready"] { background: #DCFCE7; color: var(--color-green); }
.ps-readiness-state[data-state="blocked"] { background: #FEE2E2; color: var(--color-red); }
.ps-readiness-blockers {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--type-small-family);
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
.ps-readiness-blockers li::before {
content: "✗ ";
color: var(--color-red);
margin-right: var(--space-1);
}
.prop-summary-limits {
padding-top: var(--space-4);
border-top: 1px solid var(--color-rule);
}
.prop-summary-limits ul {
margin: var(--space-2) 0 0;
padding-left: var(--space-5);
font-family: var(--type-small-family);
font-size: var(--type-small-size);
line-height: 1.5;
color: var(--color-text-muted);
}
/* ============================================================
* share-panel — U5 SharedReader generator
* Composed from the canonical Modal primitive.
* ============================================================ */
.share-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.share-panel-sub {
font-family: var(--type-body-family);
font-size: var(--type-body-size);
line-height: var(--type-body-line);
color: var(--color-text-muted);
margin: 0;
}
.share-panel-toggle {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text);
}
.share-panel-actions {
display: flex;
justify-content: flex-end;
margin-top: var(--space-3);
}
.share-panel-generate {
padding: var(--space-3) var(--space-6);
font-family: var(--type-button-family);
font-size: var(--type-button-size);
font-weight: var(--type-button-weight);
letter-spacing: var(--type-button-tracking);
text-transform: uppercase;
color: var(--color-text-inverse);
background: var(--color-orange);
border: 0;
border-radius: var(--radii-md);
cursor: pointer;
}
.share-panel-generate:disabled { background: var(--color-slate-light); cursor: not-allowed; }
.share-panel-result {
padding-top: var(--space-4);
border-top: 1px solid var(--color-rule);
}
.share-panel-link-row {
display: flex;
gap: var(--space-3);
margin: var(--space-3) 0 0;
}
.share-panel-link {
flex: 1;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
font-family: var(--type-mono-family);
font-size: var(--type-mono-size);
color: var(--color-text);
background: var(--color-paper);
}
.share-panel-copy {
padding: var(--space-3) var(--space-5);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-family: var(--type-button-family);
font-size: var(--type-button-size);
font-weight: var(--type-button-weight);
}
.share-panel-copy:hover { border-color: var(--color-orange); color: var(--color-orange); }
.share-panel-foot {
margin: var(--space-3) 0 0;
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
.share-panel-error {
padding: var(--space-3) var(--space-4);
background: #FEE2E2;
color: var(--color-red);
border-radius: var(--radii-md);
font-size: var(--type-small-size);
}
/* Reader chrome: Share entry button + Shared banner */
.manifest-reader-actions { margin-top: var(--space-4); }
.manifest-reader-share {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border: 1px solid var(--color-orange);
background: transparent;
color: var(--color-orange);
border-radius: var(--radii-md);
font-family: var(--type-button-family);
font-size: var(--type-button-size);
font-weight: var(--type-button-weight);
letter-spacing: var(--type-button-tracking);
text-transform: uppercase;
cursor: pointer;
}
.manifest-reader-share:hover {
background: var(--color-orange);
color: var(--color-text-inverse);
}
.shared-banner {
max-width: 880px;
margin: 0 auto;
padding: var(--space-4) var(--space-7);
background: linear-gradient(135deg, var(--color-navy-deep), #112545 80%);
color: var(--color-text-inverse);
border-radius: var(--radii-lg);
display: flex;
align-items: center;
gap: var(--space-5);
margin-top: var(--space-5);
}
.shared-banner [data-primitive="eyebrow"] { color: var(--color-orange); }
.shared-banner-text {
font-family: var(--type-body-family);
font-size: var(--type-small-size);
line-height: var(--type-body-line);
color: #DCE3EE;
}
/* ============================================================
* citation-panel — U4 source-citation viewer
* Composed from the canonical Modal primitive; opened from any
* .manifest-claim-citation button in artifact_reader.html.
* ============================================================ */
.citation-panel {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.citation-panel-head {
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-rule);
}
.citation-panel-label {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
font-weight: var(--type-eyebrow-weight);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: var(--space-2);
}
.citation-panel-value {
font-family: var(--type-mono-family);
font-size: var(--type-lead-size);
font-weight: 600;
color: var(--color-text);
margin-top: var(--space-2);
}
.citation-panel-quote {
margin: 0;
}
.citation-panel-excerpt {
margin: var(--space-3) 0 0;
padding: var(--space-5) var(--space-6);
background: var(--color-paper);
border-left: 3px solid var(--color-orange);
border-radius: 0 var(--radii-md) var(--radii-md) 0;
font-family: var(--type-body-family);
font-size: var(--type-lead-size);
line-height: var(--type-lead-line);
color: var(--color-text);
font-style: italic;
}
.citation-panel-highlight {
padding: 0 var(--space-1);
border-radius: var(--radii-sm);
background: #FEF3C7;
color: var(--color-text);
font-style: normal;
font-weight: 700;
}
.citation-panel-meta {
display: grid;
grid-template-columns: 140px 1fr;
row-gap: var(--space-3);
column-gap: var(--space-5);
margin: 0;
padding-top: var(--space-4);
border-top: 1px solid var(--color-rule);
}
.citation-panel-meta dt {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0;
}
.citation-panel-meta dd {
margin: 0;
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text);
word-break: break-all;
}
.citation-panel-meta dd.mono { font-family: var(--type-mono-family); }
.citation-panel-attest {
margin: 0;
padding-top: var(--space-4);
border-top: 1px solid var(--color-rule);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
line-height: var(--type-body-line);
color: var(--color-text-muted);
font-style: italic;
}
.manifest-source-open {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
}
.manifest-source-open:hover {
border-color: var(--color-orange);
color: var(--color-orange);
}
.source-panel {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.source-panel-head {
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-rule);
}
.source-panel-title {
margin-top: var(--space-2);
font-family: var(--type-title-family);
font-size: var(--type-title-size);
line-height: var(--type-title-line);
color: var(--color-text);
}
.source-panel-sub {
margin-top: var(--space-2);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
color: var(--color-text-muted);
}
.source-panel-meta {
display: grid;
grid-template-columns: 140px 1fr;
row-gap: var(--space-3);
column-gap: var(--space-5);
margin: 0;
}
.source-panel-meta dt {
font-family: var(--type-eyebrow-family);
font-size: var(--type-eyebrow-size);
letter-spacing: var(--type-eyebrow-tracking);
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0;
}
.source-panel-meta dd {
margin: 0;
color: var(--color-text);
word-break: break-all;
}
.source-panel-citations {
padding-top: var(--space-4);
border-top: 1px solid var(--color-rule);
}
.source-panel-cited-list {
margin: var(--space-3) 0 0;
padding-left: var(--space-5);
}
.source-panel-cited-list li + li {
margin-top: var(--space-3);
}
.source-panel-citation-link {
display: block;
padding: 0;
border: 0;
background: transparent;
color: var(--color-orange);
font-family: var(--type-body-family);
font-size: var(--type-body-size);
font-weight: 600;
text-align: left;
cursor: pointer;
}
.source-panel-citation-link:hover {
text-decoration: underline;
}
.source-panel-citation-meta,
.source-panel-cited-empty {
display: block;
margin-top: var(--space-1);
font-family: var(--type-mono-family);
font-size: var(--type-mono-size);
color: var(--color-text-muted);
}
.source-panel-attest {
margin: 0;
padding-top: var(--space-4);
border-top: 1px solid var(--color-rule);
font-family: var(--type-body-family);
font-size: var(--type-small-size);
line-height: var(--type-body-line);
color: var(--color-text-muted);
font-style: italic;
}
/* ============================================================
* meta-bar — U1 thin context bar above the main topbar.
* Workspace + user context. Lives ABOVE the primary nav so the
* two never collide. Body matches the topbar palette.
* ============================================================ */
.meta-bar {
background: #050B16;
color: #94A3B8;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--type-small-family);
font-size: 11.5px;
line-height: 1;
}
.meta-bar-inner {
max-width: 1240px;
margin: 0 auto;
padding: 6px var(--space-7);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-6);
}
.meta-bar-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: #94A3B8;
}
.meta-bar-label {
font-family: var(--type-eyebrow-family);
font-size: 9.5px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
}
.meta-bar-item strong {
font-weight: 600;
color: #E7ECF3;
}
.meta-bar-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: var(--radii-pill);
background: var(--color-orange);
flex-shrink: 0;
}
.meta-bar-select {
appearance: none;
min-width: 210px;
max-width: 320px;
height: 26px;
padding: 0 26px 0 9px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radii-sm);
background:
linear-gradient(45deg, transparent 50%, #E7ECF3 50%) calc(100% - 14px) 10px / 5px 5px no-repeat,
linear-gradient(135deg, #E7ECF3 50%, transparent 50%) calc(100% - 9px) 10px / 5px 5px no-repeat,
rgba(255, 255, 255, 0.06);
color: #E7ECF3;
font: 600 12px/1 var(--type-small-family);
}
.meta-bar-select:focus-visible,
.meta-bar-link:focus-visible {
outline: 2px solid var(--color-orange);
outline-offset: 2px;
}
.meta-bar-link {
margin-left: var(--space-2);
padding: 3px 7px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radii-sm);
background: rgba(255, 255, 255, 0.06);
color: #E7ECF3;
font: 600 11px/1 var(--type-small-family);
cursor: pointer;
}
.meta-bar-link:hover {
background: rgba(255, 255, 255, 0.12);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
* login — session credential surface.
* ============================================================ */
.login-surface {
min-height: calc(100vh - 260px);
display: grid;
place-items: center;
}
.login-panel {
width: min(100%, 760px);
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--space-8);
padding: var(--space-8);
border: 1px solid rgba(8, 26, 46, 0.12);
border-radius: var(--radii-md);
background: rgba(255, 255, 255, 0.64);
box-shadow: 0 18px 45px rgba(8, 26, 46, 0.08);
}
.login-kicker {
margin: 0 0 var(--space-2);
font: 700 11px/1 var(--type-eyebrow-family);
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--color-orange);
}
.login-panel h1 {
margin: 0 0 var(--space-4);
font: 600 34px/1.08 Georgia, serif;
color: var(--navy-deep);
}
.login-copy {
margin: 0;
max-width: 44ch;
color: var(--slate);
}
.login-form {
display: grid;
gap: var(--space-4);
}
.login-form label {
display: grid;
gap: var(--space-2);
color: var(--navy);
font-weight: 650;
}
.login-form input {
width: 100%;
min-height: 42px;
border: 1px solid rgba(8, 26, 46, 0.18);
border-radius: var(--radii-sm);
padding: 0 var(--space-4);
background: #fff;
color: var(--navy-deep);
font: 500 14px/1 var(--type-body-family);
}
.login-submit {
min-height: 44px;
border: 0;
border-radius: var(--radii-sm);
background: var(--orange);
color: #fff;
font: 700 13px/1 var(--type-small-family);
cursor: pointer;
}
.login-submit:disabled {
opacity: 0.6;
cursor: wait;
}
.login-error {
margin: 0;
color: var(--red);
font-weight: 650;
}
@media (max-width: 720px) {
.login-panel {
grid-template-columns: 1fr;
padding: var(--space-6);
}
.meta-bar-inner {
align-items: flex-start;
flex-direction: column;
gap: var(--space-3);
}
.meta-bar-select {
max-width: calc(100vw - 64px);
}
}
/* ============================================================
* Markdown body — used by every artifact view that previously
* fell through to a {{ md }}
stub.
* The renderer lives at static/markdown.js; the page-level
* pattern is:
*
*
* {{ markdown }}
*
* Typography is reader-grade: Charter serif body, Inter
* headings, IBM Plex Mono code. Intentionally similar to
* Stripe Docs / Linear reading surfaces — generous spacing,
* soft horizontal rules, tasteful tables.
* ============================================================ */
.md-body {
max-width: 760px;
margin: 0 auto;
padding: 24px 28px 64px;
font-family: var(--type-body-family);
font-size: 15px;
line-height: 1.6;
color: var(--color-text);
}
.md-body > * + * { margin-top: 1.1em; }
.md-body h1 {
font-family: var(--type-title-family);
font-size: 28px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-text);
margin: 0 0 0.4em;
}
.md-body h2 {
font-family: var(--type-title-family);
font-size: 21px;
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--color-text);
margin-top: 2em;
margin-bottom: 0.35em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--color-rule);
}
.md-body h3 {
font-family: var(--type-title-family);
font-size: 17px;
font-weight: 600;
color: var(--color-text);
margin-top: 1.6em;
margin-bottom: 0.25em;
}
.md-body h4 {
font-family: var(--type-eyebrow-family);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: 1.4em;
margin-bottom: 0.2em;
}
.md-body p {
margin: 0;
}
.md-body strong {
font-weight: 600;
color: var(--color-text);
}
.md-body em {
font-style: italic;
color: var(--color-text);
}
.md-body a {
color: var(--color-action);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.md-body a:hover {
border-bottom-color: var(--color-action);
}
.md-body ul,
.md-body ol {
padding-left: 1.4em;
margin: 0;
}
.md-body ul li,
.md-body ol li {
margin-top: 0.25em;
}
.md-body ul li::marker {
color: var(--color-text-muted);
}
.md-body hr {
border: 0;
border-top: 1px solid var(--color-rule);
margin: 2.2em 0;
}
.md-body blockquote {
margin: 0;
padding: 0.4em 0.9em;
border-left: 3px solid var(--color-orange);
background: var(--color-paper);
color: var(--color-text-muted);
font-style: italic;
}
/* Inline code + code blocks */
.md-body code {
font-family: var(--type-mono-family);
font-size: 0.88em;
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radii-sm);
padding: 0.05em 0.4em;
color: var(--color-text);
}
.md-body pre.md-code {
font-family: var(--type-mono-family);
font-size: 13px;
line-height: 1.55;
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
padding: 16px 18px;
overflow-x: auto;
margin: 1.2em 0;
}
.md-body pre.md-code code {
background: transparent;
border: none;
padding: 0;
font-size: inherit;
}
/* Tables — full width, zebra rows, soft header. The wrapper owns the
* vertical rhythm and the horizontal scroll so wide tables (peer
* register, controls matrix) don't burst narrow viewports — markdown.js
* emits `…`. */
.md-body .md-table-wrap {
margin: 1.4em 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.md-body table.md-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.md-body table.md-table thead th {
text-align: left;
font-family: var(--type-eyebrow-family);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-text-muted);
padding: 10px 12px;
border-bottom: 2px solid var(--color-orange);
background: var(--color-paper);
}
.md-body table.md-table tbody td {
padding: 9px 12px;
border-bottom: 1px solid var(--color-rule);
vertical-align: top;
}
.md-body table.md-table tbody tr:nth-child(even) td {
background: rgba(0, 0, 0, 0.015);
}
.md-body table.md-table tbody tr:last-child td {
border-bottom: none;
}
/* Tasteful anchor IDs from heading slugs — heading is selectable
* for deeplinks without offset, but the anchor hash target should
* land just above the heading text. */
.md-body :where(h1, h2, h3, h4)[id] {
scroll-margin-top: 80px;
}
/* Error fallback when JS render fails. */
.md-body .md-error {
font-family: var(--type-eyebrow-family);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-red);
background: rgba(166, 30, 30, 0.05);
border: 1px solid var(--color-red);
border-radius: var(--radii-sm);
padding: 10px 14px;
}
/* ============================================================
* Controls Disclosure Matrix — in-browser reader
* The same data the .xlsx exporter writes, but presented as a
* proper HTML table with risk-tier color coding, sticky header,
* and chip dividers. Matches the .xlsx exactly in row order.
* ============================================================ */
.controls-matrix-summary {
display: flex;
align-items: center;
gap: var(--space-6);
margin: var(--space-5) 0;
padding: var(--space-4) var(--space-5);
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
flex-wrap: wrap;
}
.cm-summary-tile {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: var(--space-5);
border-right: 1px solid var(--color-rule);
}
.cm-summary-tile:last-of-type {
border-right: none;
}
.cm-summary-num {
font-family: var(--type-title-family);
font-size: 24px;
font-weight: 700;
line-height: 1;
color: var(--color-navy-deep, var(--color-text));
}
.cm-summary-label {
font-family: var(--type-eyebrow-family);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.cm-summary-legend {
display: flex;
align-items: center;
gap: var(--space-3);
margin-left: auto;
font-size: 12px;
color: var(--color-text-muted);
}
.cm-legend-swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: var(--radii-sm);
border: 1px solid var(--color-rule);
}
.cm-legend-text {
margin-right: var(--space-3);
}
.controls-matrix-scroll {
margin: var(--space-5) 0;
overflow-x: auto;
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
background: var(--color-surface);
}
.controls-matrix-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
line-height: 1.45;
}
.controls-matrix-table thead th {
position: sticky;
top: 0;
z-index: 1;
text-align: left;
vertical-align: middle;
background: var(--color-navy-deep, #0E2A47);
color: #FFFFFF;
font-family: var(--type-eyebrow-family);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 12px;
white-space: normal;
border-bottom: 2px solid var(--color-orange);
}
.controls-matrix-table tbody td {
padding: 10px 12px;
border-bottom: 1px solid var(--color-rule);
vertical-align: top;
}
.controls-matrix-table tbody tr:last-child td {
border-bottom: none;
}
.controls-matrix-table tbody td.mono,
.controls-matrix-table tbody td .mono {
font-family: var(--type-mono-family);
font-size: 11.5px;
}
.controls-matrix-table tbody td.small,
.controls-matrix-table tbody td .small {
font-size: 11.5px;
}
.controls-matrix-table tbody td.muted {
color: var(--color-text-muted);
}
/* Chip divider rows */
.controls-matrix-table tr.cm-chip-row td {
background: linear-gradient(180deg, #F4B183 0%, #EDA876 100%);
padding: 8px 14px;
border-bottom: 1px solid #D08F6A;
}
.cm-chip-label {
font-family: var(--type-title-family);
font-size: 13px;
font-weight: 700;
color: #2A1208;
margin-right: var(--space-4);
}
.cm-chip-missing {
font-style: italic;
font-size: 12px;
color: #6B2210;
}
.cm-chip-missing code {
font-family: var(--type-mono-family);
font-size: 11px;
padding: 1px 5px;
background: rgba(0, 0, 0, 0.07);
border-radius: var(--radii-sm);
}
/* Risk tier coloring on the Risk column */
.cm-tier-high {
background: #FEE2E2;
color: #7A1F1F;
font-weight: 500;
}
.cm-tier-medium {
background: #FEF3C7;
color: #5A4310;
}
.cm-tier-low {
background: #DCFCE7;
color: #15391E;
}
.cm-legend-swatch.cm-tier-high { background: #FEE2E2; border-color: #E5B3B3; }
.cm-legend-swatch.cm-tier-medium { background: #FEF3C7; border-color: #E5D196; }
.cm-legend-swatch.cm-tier-low { background: #DCFCE7; border-color: #A8D6B5; }
.cm-assertion {
background: #EFF6FF;
font-family: var(--type-mono-family);
font-size: 11px;
color: #234058;
}
.cm-notes-cell {
min-width: 140px;
background: repeating-linear-gradient(
180deg,
transparent 0,
transparent 23px,
rgba(0, 0, 0, 0.06) 23px,
rgba(0, 0, 0, 0.06) 24px
);
}
.cm-footer-note {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--color-paper);
border-left: 3px solid var(--color-orange);
border-radius: var(--radii-sm);
}
/* ============================================================
* Markdown auto-TOC — emitted by markdown.js when the rendered
* artifact has ≥ 3 h2 sections. Wikipedia-style contents box.
* ============================================================ */
.md-body .md-toc {
margin: 1.6em 0 2em;
padding: 14px 18px 16px;
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-left: 3px solid var(--color-orange);
border-radius: var(--radii-md);
font-size: 13px;
line-height: 1.45;
max-width: 520px;
}
.md-body .md-toc-head {
font-family: var(--type-eyebrow-family);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: 8px;
}
.md-body .md-toc-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: md-toc-l2;
}
.md-body .md-toc-list li {
margin: 3px 0;
}
.md-body .md-toc-l2 {
display: flex;
gap: 8px;
align-items: baseline;
}
.md-body .md-toc-num {
font-family: var(--type-mono-family);
font-size: 11.5px;
color: var(--color-text-muted);
flex-shrink: 0;
min-width: 1.6em;
}
.md-body .md-toc a {
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.md-body .md-toc a:hover {
color: var(--color-action);
border-bottom-color: var(--color-action);
}
.md-body .md-toc-sub {
list-style: none;
margin: 4px 0 4px 1.8em;
padding: 0;
}
.md-body .md-toc-l3 {
font-size: 12px;
color: var(--color-text-muted);
}
.md-body .md-toc-l3 a {
color: var(--color-text-muted);
}
/* ============================================================
* Manifest Reader — iframe-wrapped artifact view + collapsed
* diagnostic panels. Promotes the beautiful per-artifact view
* to the primary surface while keeping the manifest claim
* projection accessible.
* ============================================================ */
.manifest-reader-stage {
margin: var(--space-5) 0 var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
min-height: 760px;
}
.manifest-reader-frame {
width: 100%;
min-height: 760px;
height: calc(100vh - 240px);
border: 0;
display: block;
background: var(--color-surface);
}
/* Make the present button visually primary on decks */
.manifest-reader-primary {
background: var(--color-orange);
color: var(--color-text-inverse) !important;
border-color: var(--color-orange) !important;
font-weight: 600 !important;
}
.manifest-reader-primary:hover {
background: #B53F00;
border-color: #B53F00 !important;
}
/* Collapsed checklist + manifest-projection details — quieter than the
* dominant aside it used to be. The user sees the artifact first; the
* diagnostic panels open on demand. */
.checklist-panel-collapsed {
margin: var(--space-4) 0;
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
background: var(--color-paper);
}
.checklist-panel-collapsed[data-status="blocked"] {
border-left: 3px solid var(--color-red);
}
.checklist-panel-collapsed[data-status="ready"] {
border-left: 3px solid #1B7A3E;
}
.checklist-panel-summary {
cursor: pointer;
padding: 10px 14px;
display: flex;
align-items: center;
gap: var(--space-4);
font-family: var(--type-body-family);
font-size: 13px;
user-select: none;
list-style: none;
}
.checklist-panel-summary::-webkit-details-marker { display: none; }
.checklist-panel-summary::before {
content: "▸";
font-size: 10px;
color: var(--color-text-muted);
width: 12px;
transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.checklist-panel-collapsed[open] .checklist-panel-summary::before {
transform: rotate(90deg);
}
.checklist-panel-status {
font-family: var(--type-eyebrow-family);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: var(--radii-pill);
background: var(--color-surface);
border: 1px solid var(--color-rule);
}
.checklist-panel-collapsed[data-status="blocked"] .checklist-panel-status {
background: rgba(166, 30, 30, 0.08);
color: var(--color-red);
border-color: rgba(166, 30, 30, 0.25);
}
.checklist-panel-blocker-count {
font-size: 11px;
color: var(--color-text-muted);
margin-left: auto;
}
.checklist-panel-body {
padding: var(--space-4) var(--space-5) var(--space-5);
border-top: 1px solid var(--color-rule);
}
.manifest-projection-details {
margin: var(--space-4) 0;
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
background: var(--color-paper);
}
.manifest-projection-summary {
cursor: pointer;
padding: 10px 14px;
display: flex;
align-items: center;
gap: var(--space-4);
font-family: var(--type-body-family);
font-size: 13px;
user-select: none;
list-style: none;
}
.manifest-projection-summary::-webkit-details-marker { display: none; }
.manifest-projection-summary::before {
content: "▸";
font-size: 10px;
color: var(--color-text-muted);
width: 12px;
transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.manifest-projection-details[open] .manifest-projection-summary::before {
transform: rotate(90deg);
}
.manifest-projection-hint {
font-size: 12px;
color: var(--color-text-muted);
}
/* ============================================================
* Example overview — inline artifact stack
* Every artifact embedded as a lazy-loaded iframe so scrolling
* reveals the whole story. Sticky jump-nav above so the
* reviewer can leap to any artifact without leaving the page.
* ============================================================ */
.example-artifacts-head {
margin-bottom: var(--space-5);
}
.artifact-jump-nav {
position: sticky;
top: 0;
z-index: 5;
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 16px;
margin: 0 0 var(--space-6);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
/* On narrow screens (no flex-wrap room), make it horizontally
* scroll-snap so the pills stay accessible. */
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.artifact-jump-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-family: var(--type-body-family);
font-size: 12px;
color: var(--color-text-muted);
text-decoration: none;
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radii-pill);
white-space: nowrap;
scroll-snap-align: start;
transition: color var(--motion-duration-fast) var(--motion-ease-standard),
border-color var(--motion-duration-fast) var(--motion-ease-standard),
background var(--motion-duration-fast) var(--motion-ease-standard);
}
.artifact-jump-pill:hover {
color: var(--color-action);
border-color: var(--color-action);
}
.artifact-jump-pill-active {
color: var(--color-text-inverse);
background: var(--color-orange);
border-color: var(--color-orange);
}
.artifact-jump-icon {
font-size: 14px;
line-height: 1;
}
.artifact-jump-label {
font-weight: 500;
}
.artifact-stack {
display: flex;
flex-direction: column;
gap: var(--space-7);
}
.artifact-stack-item {
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
overflow: hidden;
scroll-margin-top: 80px; /* so jump-nav links land cleanly below the sticky bar */
box-shadow: var(--shadow-card);
}
.artifact-stack-head {
display: grid;
grid-template-columns: 48px 1fr auto;
gap: var(--space-4);
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--color-rule);
background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-paper) 100%);
}
.artifact-stack-icon {
font-size: 24px;
line-height: 1;
text-align: center;
}
.artifact-stack-titles {
min-width: 0;
}
.artifact-stack-format {
font-family: var(--type-eyebrow-family);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-orange);
margin-bottom: 4px;
}
.artifact-stack-title {
font-family: var(--type-title-family);
font-size: 18px;
font-weight: 600;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 4px;
}
.artifact-stack-summary {
margin: 0;
font-size: 12.5px;
line-height: 1.4;
color: var(--color-text-muted);
max-width: 60ch;
}
.artifact-stack-actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.artifact-stack-action {
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-family: var(--type-button-family);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text);
background: transparent;
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
text-decoration: none;
transition: color var(--motion-duration-fast) var(--motion-ease-standard),
background var(--motion-duration-fast) var(--motion-ease-standard),
border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.artifact-stack-action:hover {
color: var(--color-action);
border-color: var(--color-action);
}
.artifact-stack-action-primary {
color: var(--color-text-inverse);
background: var(--color-orange);
border-color: var(--color-orange);
}
.artifact-stack-action-primary:hover {
background: #B53F00;
border-color: #B53F00;
color: var(--color-text-inverse);
}
.artifact-stack-action-icon {
font-size: 14px;
padding: 4px 10px;
}
.artifact-stack-stage {
background: var(--color-paper);
}
.artifact-stack-frame {
display: block;
width: 100%;
height: 800px;
border: 0;
background: var(--color-surface);
}
/* ============================================================
* /examples gallery — direct artifact tile grid + popover modal
* Twelve tiles, one click → iframe popover. No two-step
* navigation.
* ============================================================ */
.examples-artifacts {
max-width: 1200px;
margin: 0 auto var(--space-8);
padding: 0 var(--space-5);
}
.examples-artifact-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-5);
}
.examples-artifact-tile {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: 20px 20px 56px;
text-align: left;
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
cursor: pointer;
font: inherit;
color: inherit;
/* Buttons inherit some upstream text-transform / letter-spacing
* from the global button styling. The tile content is reader-grade
* prose; reset on the container, then re-apply uppercase + tracking
* only on the eyebrow + foot. */
text-transform: none;
letter-spacing: normal;
transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
border-color var(--motion-duration-fast) var(--motion-ease-standard),
box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
min-height: 220px;
}
.examples-artifact-tile:hover {
transform: translateY(-2px);
border-color: var(--color-orange);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
.examples-artifact-tile:focus-visible {
outline: 2px solid var(--color-orange);
outline-offset: 2px;
}
.examples-artifact-icon {
font-size: 30px;
line-height: 1;
}
.examples-artifact-body { flex: 1; }
.examples-artifact-format {
font-family: var(--type-eyebrow-family);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-orange);
margin-bottom: 6px;
}
.examples-artifact-title {
font-family: var(--type-title-family);
font-size: 17px;
font-weight: 600;
line-height: 1.25;
color: var(--color-text);
margin-bottom: 8px;
}
.examples-artifact-summary {
font-size: 12.5px;
line-height: 1.45;
color: var(--color-text-muted);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.examples-artifact-foot {
position: absolute;
left: 20px;
bottom: 16px;
right: 20px;
display: flex;
align-items: center;
gap: 6px;
font-family: var(--type-button-family);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.examples-artifact-tile:hover .examples-artifact-foot {
color: var(--color-orange);
}
.examples-artifact-arrow {
transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.examples-artifact-tile:hover .examples-artifact-arrow {
transform: translate(2px, -2px);
}
.examples-artifact-badge {
position: absolute;
top: 16px;
right: 16px;
padding: 4px 10px;
background: var(--color-orange);
color: var(--color-text-inverse);
font-family: var(--type-eyebrow-family);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
border-radius: var(--radii-pill);
}
.examples-others {
margin-top: var(--space-9);
padding: var(--space-6);
background: var(--color-paper);
border: 1px solid var(--color-rule);
border-radius: var(--radii-lg);
}
.examples-others-head p {
margin: 6px 0 var(--space-4);
color: var(--color-text-muted);
font-size: 13px;
}
.examples-others-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4);
}
.examples-other-link {
display: block;
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
text-decoration: none;
color: var(--color-text);
transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.examples-other-link:hover {
border-color: var(--color-orange);
}
.examples-other-title {
display: block;
font-family: var(--type-title-family);
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
}
.examples-other-meta {
display: block;
font-size: 12px;
color: var(--color-text-muted);
margin-bottom: var(--space-3);
}
.examples-other-cta {
display: block;
font-family: var(--type-button-family);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-orange);
}
.examples-hero-meta {
margin-top: var(--space-3);
font-size: 13px;
color: var(--color-text-muted);
}
/* Three-line trust manifesto sitting between the hero lead and the
* featured-example meta. Each line is its own list item with a small
* orange dot — visual rhythm matches the constitutional discipline,
* doesn't shout. */
.examples-hero-principles {
list-style: none;
margin: var(--space-5) 0 var(--space-3);
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.examples-hero-principles li {
display: flex;
align-items: baseline;
gap: var(--space-3);
font-family: var(--type-body-family);
font-size: 13.5px;
color: var(--color-text);
}
.examples-hero-principle-dot {
display: inline-block;
width: 5px;
height: 5px;
background: var(--color-orange);
border-radius: 50%;
transform: translateY(-2px);
flex-shrink: 0;
}
/* ---- Sectioned gallery feed -----------------------------------------------
* Each artifact section gets its own header + grid. Sections stack
* vertically; visitor scrolls top-to-bottom, taking in one purpose
* before the next. Replaces the previous "one big grid of 12" layout
* which read as a feature-dump on first paint. */
.examples-section {
margin-top: var(--space-9);
}
.examples-section:first-child {
margin-top: var(--space-7);
}
.examples-section-head {
margin-bottom: var(--space-5);
max-width: 760px;
}
.examples-section-tagline {
margin: 6px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--color-text-muted);
}
/* "Read & present" gets the largest tiles — 2-col grid because these
* are the headline artifacts a partner / committee actually receives.
* The other sections keep the standard auto-fill grid. */
.examples-artifact-grid--read_present {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
/* Trust & provenance is currently a single tile — let it span wider
* so the "you can audit the system that made this" promise reads as
* a feature card rather than a tile lost in a grid. */
.examples-artifact-grid--trust_provenance .examples-artifact-tile {
min-height: 180px;
}
/* ---- Scroll-reveal motion -------------------------------------------------
* Sections + tiles fade in 8px from below as they enter the viewport.
* Within a section, tiles stagger by --stagger-index * 40ms — set
* inline on each tile by the template's loop.index0. The default
* (no .is-revealed yet) is invisible so the first paint doesn't flash
* the content before the IntersectionObserver fires. */
.examples-section,
.examples-artifact-tile {
opacity: 0;
transform: translateY(8px);
transition: opacity 320ms var(--motion-ease-standard),
transform 320ms var(--motion-ease-standard);
}
.examples-section { transition-duration: 260ms; }
.examples-artifact-tile {
transition-delay: calc(var(--stagger-index, 0) * 40ms);
}
.examples-section.is-revealed,
.examples-artifact-tile.is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Reduced motion: skip the fade/translate; sections + tiles render
* fully-formed on first paint. */
@media (prefers-reduced-motion: reduce) {
.examples-section,
.examples-artifact-tile {
opacity: 1;
transform: none;
transition: none;
}
}
/* ----- Reader popover modal -----
*
* Composes the canonical Modal primitive with size="peek". All sizing,
* animation, and viewport-collapse rules live in the primitive — this
* composition only adds reader-domain bits (iframe stage layout, head
* padding rhythm, body-is-stack-not-prose).
*
* Architectural note (2026-05-20): the previous version used
* size="sheet" + a wall of `.reader-popover .modal__panel` overrides
* trying to defeat sheet rules. The primitive selector
* `[data-primitive="modal"].modal--sheet .modal__panel` had higher
* specificity than the composition selector, so the overrides
* silently lost and the reader rendered edge-to-edge. The fix is at
* the primitive layer: add `peek` as a first-class size variant. The
* composition now owns zero sizing rules. */
.reader-popover .modal__head {
flex-shrink: 0;
padding: 14px 22px;
}
.reader-popover .modal__body {
/* The reader's body is a vertical stack (meta row → iframe stage →
* keyboard-hint footer), not prose. Override the primitive's
* default scrolling body so each child can size deliberately. */
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
padding: 0;
overflow: hidden;
}
/* The peek panel needs to be a flex column so head + body stack
* properly. The primitive sets the dimensions, this completes the
* layout contract. */
.reader-popover .modal__panel {
display: flex;
flex-direction: column;
}
/* The canonical Modal primitive owns the title + close. We add a thin
* meta row below it for format eyebrow / counter / per-kind actions. */
.reader-popover-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: 10px 20px;
border-bottom: 1px solid var(--color-rule);
background: var(--color-paper);
flex-shrink: 0;
}
.reader-popover-meta-left {
display: flex;
align-items: baseline;
gap: var(--space-4);
min-width: 0;
}
.reader-popover-eyebrow {
font-family: var(--type-eyebrow-family);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
color: var(--color-orange);
}
.reader-popover-counter {
font-family: var(--type-mono-family);
font-size: 11.5px;
color: var(--color-text-muted);
}
.reader-popover-meta-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.reader-popover-action {
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-family: var(--type-button-family);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text);
background: transparent;
border: 1px solid var(--color-rule);
border-radius: var(--radii-md);
text-decoration: none;
transition: color var(--motion-duration-fast) var(--motion-ease-standard),
border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.reader-popover-action:hover {
color: var(--color-orange);
border-color: var(--color-orange);
}
.reader-popover-action-present {
color: var(--color-text-inverse);
background: var(--color-orange);
border-color: var(--color-orange);
}
.reader-popover-action-present:hover {
background: #B53F00;
border-color: #B53F00;
color: var(--color-text-inverse);
}
/* Cycle nav lives as floating edge buttons on the iframe stage —
* Stripe Docs / Vercel template-preview pattern. Less chrome,
* faster to reach. */
.reader-popover-nav-edge {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--color-rule);
border-radius: 50%;
font-family: var(--type-title-family);
font-size: 22px;
line-height: 1;
color: var(--color-text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: color var(--motion-duration-fast) var(--motion-ease-standard),
border-color var(--motion-duration-fast) var(--motion-ease-standard),
transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.reader-popover-nav-edge-prev { left: 12px; }
.reader-popover-nav-edge-next { right: 12px; }
.reader-popover-nav-edge:hover {
color: var(--color-orange);
border-color: var(--color-orange);
transform: translateY(-50%) scale(1.06);
}
.reader-popover-nav-edge:focus-visible {
outline: 2px solid var(--color-orange);
outline-offset: 2px;
}
.reader-popover-stage {
flex: 1;
overflow: hidden;
background: var(--color-paper);
position: relative;
}
.reader-popover-frame {
width: 100%;
height: 100%;
border: 0;
display: block;
background: var(--color-surface);
}
/* Loading skeleton — visible while the iframe fetches; fades on the
* load event via the .reader-popover-loading-done state class. The
* top progress bar runs while the bars beneath shimmer; together
* they replace the blank-frame flash that made cycling feel slow. */
.reader-popover-loading {
position: absolute;
inset: 0;
background: var(--color-surface);
z-index: 2;
pointer-events: none;
opacity: 1;
transition: opacity 240ms ease;
}
.reader-popover-loading[hidden] { display: none; }
.reader-popover-loading-done { opacity: 0; }
.reader-popover-loading-bar {
position: absolute;
top: 0; left: 0;
height: 2px;
width: 40%;
background: var(--color-orange);
border-radius: 0 2px 2px 0;
animation: rp-loading-bar 1.6s ease-in-out infinite;
}
.reader-popover-loading-skel {
padding: 64px max(48px, 8%) 0;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 760px;
margin: 0 auto;
}
.reader-popover-loading-line {
height: 16px;
border-radius: 4px;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.04) 0%,
rgba(0, 0, 0, 0.10) 50%,
rgba(0, 0, 0, 0.04) 100%);
background-size: 200% 100%;
animation: rp-shimmer 1.4s linear infinite;
}
.reader-popover-loading-line-h {
height: 28px;
width: 60%;
margin-bottom: 12px;
}
.reader-popover-loading-line-t { height: 12px; }
.reader-popover-loading-line-t-short { width: 70%; }
@keyframes rp-loading-bar {
0% { transform: translateX(-100%); width: 30%; }
50% { transform: translateX(150%); width: 50%; }
100% { transform: translateX(300%); width: 30%; }
}
@keyframes rp-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Keyboard hint footer — Linear-style discoverability strip. */
.reader-popover-hints {
display: flex;
align-items: center;
gap: var(--space-5);
padding: 8px 20px;
border-top: 1px solid var(--color-rule);
background: var(--color-paper);
font-family: var(--type-body-family);
font-size: 11.5px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.reader-popover-hint {
display: inline-flex;
align-items: center;
gap: 6px;
}
.reader-popover-hint kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-family: var(--type-mono-family);
font-size: 10.5px;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-rule);
border-bottom-width: 2px;
border-radius: 3px;
}
.reader-popover-hint-permalink {
margin-left: auto;
opacity: 0;
color: var(--color-orange);
transition: opacity 200ms ease;
}
.reader-popover-hint-permalink.reader-popover-hint-flash {
opacity: 1;
}
/* Reduced-motion: respect user preference across the gallery + popover. */
@media (prefers-reduced-motion: reduce) {
.reader-popover-loading,
.reader-popover-loading-bar,
.reader-popover-loading-line,
.reader-popover-hint-permalink,
.examples-artifact-tile,
.examples-artifact-arrow {
animation: none !important;
transition: none !important;
}
.examples-artifact-tile:hover {
transform: none;
}
}
/* Mobile: gallery to single column; popover meta row stacks. The
* popover panel itself is already sized down to a sheet at ≤720px by
* the Modal primitive's peek variant, so no panel rules live here. */
@media (max-width: 720px) {
.examples-artifact-grid {
grid-template-columns: 1fr;
}
.reader-popover-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding: 14px 14px;
}
.reader-popover-meta-actions {
width: 100%;
flex-wrap: wrap;
}
}
/* Mobile responsiveness for the stack: head stacks vertically, actions
* wrap below the title, iframe takes less vertical room (still
* scrollable internally). */
@media (max-width: 720px) {
.artifact-stack-head {
grid-template-columns: 36px 1fr;
grid-template-areas:
"icon titles"
"actions actions";
gap: var(--space-3);
padding: 14px 14px;
}
.artifact-stack-icon { grid-area: icon; font-size: 20px; }
.artifact-stack-titles { grid-area: titles; }
.artifact-stack-actions { grid-area: actions; flex-wrap: wrap; }
.artifact-stack-title { font-size: 16px; }
.artifact-stack-frame { height: 560px; }
.artifact-jump-nav {
padding: 8px 10px;
flex-wrap: nowrap;
border-radius: 0;
margin-left: calc(-1 * var(--space-5));
margin-right: calc(-1 * var(--space-5));
}
.artifact-jump-pill {
font-size: 11px;
padding: 5px 10px;
}
}