/* ═══════════════════════════════════════════════════════════════════════════
ARTIFICER · Print stylesheet · v0.6
Forces ivory/indigo paper-stock mode for all print output. Strips chrome
that doesn't make sense on paper (theme toggle, sticky nav, hover states).
Include AFTER artificer.css so it overrides safely:
═══════════════════════════════════════════════════════════════════════════ */
@media print {
/* Force light theme regardless of setting */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
--bg: #ffffff;
--bg-raised: #f5ead0;
--bg-overlay: #eddcc0;
--bg-inactive: #f0e8d0;
--fg: #20203e;
--fg-secondary: #4a3f2a;
--fg-disabled: #8a8070;
--border: #cbb88a;
--accent: #7a5a10;
--accent-bright: #7a5a10;
--accent-fill: #c4932a;
--attention: #8a6618;
--attention-fill: #e0b558;
--urgent: #8a2418;
--urgent-fill: #a04540;
--success: #2a5a3a;
--steel: #2e4a5a;
--steel-fill: #5a7a8a;
--brand-purple: #4a25a0;
--brand-purple-fill: #331567;
--on-accent: #f5ead0;
--on-attention: #20203e;
--on-urgent: #f5ead0;
--on-success: #f5ead0;
--shadow-overlay: none;
color-scheme: light;
}
/* Page setup — generous gutters, classic letter */
@page {
size: letter;
margin: 0.75in 0.85in;
}
html, body {
background: #ffffff !important;
color: #20203e !important;
font-size: 10.5pt;
line-height: 1.5;
}
/* Hide chrome that doesn't belong on paper */
.theme-toggle,
[data-theme-toggle],
.skip-link,
nav[role="navigation"]:has(.theme-toggle),
.toast-region,
.tooltip,
video,
audio,
iframe { display: none !important; }
/* Strip motion + interactive affordances */
*, *::before, *::after {
transition: none !important;
animation: none !important;
text-shadow: none !important;
box-shadow: none !important;
}
/* Surfaces — drop fills so ink doesn't bleed */
.card,
.card--active,
.card--attention,
.card--urgent,
.pane--active,
.pane--inactive {
background: transparent !important;
border: 1px solid #cbb88a !important;
break-inside: avoid;
}
.card--active { border-left: 3px solid #7a5a10 !important; }
.card--attention { border-left: 3px solid #8a6618 !important; }
.card--urgent { border-left: 3px solid #8a2418 !important; }
.pane--inactive { opacity: 0.6 !important; filter: none !important; }
/* Buttons read as bracketed tokens on paper */
.btn {
background: transparent !important;
color: #20203e !important;
border: 1px solid #20203e !important;
padding: 2px 8px !important;
}
/* Badges — outline only, color persists for semantic meaning */
.badge {
background: transparent !important;
border: 1px solid currentColor !important;
padding: 0 6px !important;
}
.badge--accent { color: #7a5a10 !important; }
.badge--attention { color: #8a6618 !important; }
.badge--urgent { color: #8a2418 !important; }
.badge--success { color: #2a5a3a !important; }
.badge--ghost { color: #2e4a5a !important; }
/* Links — show URL after, but only for off-domain links */
a { color: #4a25a0 !important; text-decoration: underline; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #2e4a5a;
word-break: break-all;
}
a[href^="#"]::after,
a[href^="/"]::after,
a[href^="./"]::after,
a[href^="../"]::after { content: ""; }
/* Headings — keep with following content */
h1, h2, h3, .t-headline-lg, .t-headline-md {
break-after: avoid;
break-inside: avoid;
color: #20203e !important;
}
/* Tables, code blocks, lists — don't tear */
table, pre, blockquote, figure { break-inside: avoid; }
/* Code — light tint for legibility on paper */
code, .code, kbd, .kbd, pre {
background: #f5ead0 !important;
color: #20203e !important;
border: 1px solid #cbb88a !important;
}
/* Inputs — render as filled fields with the value visible */
.input, .textarea, .select {
background: transparent !important;
border: 1px solid #20203e !important;
color: #20203e !important;
}
/* Dots — keep semantic color, drop background */
.dot--accent { background: #7a5a10 !important; }
.dot--attention { background: #8a6618 !important; }
.dot--urgent { background: #8a2418 !important; }
.dot--success { background: #2a5a3a !important; }
/* Print-only utility */
.no-print { display: none !important; }
.print-only { display: block !important; }
.print-meta { font-size: 8.5pt; color: #2e4a5a; margin-top: 0.5in; }
}
@media screen {
.print-only { display: none; }
}