/* =====================================================================
Inkwell — component CSS, base reset, layout helpers, accessibility.
Version: 1.3.1
This file contains everything EXCEPT custom-property declarations
and the dark-mode cascade (which live in inkwell-tokens.css).
All rules in this file reference Inkwell tokens via var(...) and
contain no literal hex codes — palettes are swappable by replacing
the tokens file alone.
Consumption:
• Pure-CSS use: `tokens.css` re-exports this file alongside
inkwell-tokens.css. Link inkwell.css from .
• Tailwind v4: inkwell-theme.css imports this file inside
@layer components so Tailwind utilities can override
component styles by default.
The .select rule below has paired dark-mode background-image
overrides in inkwell-tokens.css; the override selectors carry
higher specificity, so the dark chevron always wins regardless
of source order or cascade layering.
===================================================================== */
/* =====================================================================
Base reset & body
===================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
font-size: var(--t-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* =====================================================================
Type styles
===================================================================== */
.t-display {
font-family: var(--serif); font-weight: 600;
font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.025em;
}
.t-h1 {
font-family: var(--serif); font-weight: 600;
font-size: var(--t-h1); line-height: 1.2; letter-spacing: -0.018em;
}
.t-h2 {
font-family: var(--serif); font-weight: 600;
font-size: var(--t-h2); line-height: 1.3; letter-spacing: -0.012em;
}
.t-h3 {
font-family: var(--serif); font-weight: 600;
font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.01em;
}
.t-lede { font: 400 var(--t-lede)/1.5 var(--serif); font-style: italic; color: var(--gray-700); max-width: 60ch; }
.t-body { font: 430 var(--t-body)/1.55 var(--sans); }
.t-small { font: 430 var(--t-small)/1.5 var(--sans); color: var(--gray-700); }
.t-caption { font: 500 var(--t-caption)/1.4 var(--sans); color: var(--gray-500); }
/* Eyebrow — small uppercase mono label with leading accent rule.
Use .eyebrow for product/dashboard contexts (signals technical metadata).
Use .eyebrow-serif for editorial contexts (small italic serif, magazine kicker). */
.eyebrow {
font-family: var(--mono);
font-size: var(--t-eyebrow);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gray-500);
display: inline-flex;
align-items: center;
gap: 12px;
}
.eyebrow::before {
content: "";
width: 24px;
height: 1.5px;
background: var(--accent);
}
.eyebrow-serif {
font-family: var(--serif);
font-size: 13px;
font-style: italic;
letter-spacing: 0.02em;
text-transform: none; /* defend against an uppercase ancestor */
color: var(--gray-700);
display: inline-flex;
align-items: center;
gap: 12px;
}
.eyebrow-serif::before {
content: "";
width: 24px;
height: 1.5px;
background: var(--accent);
}
/* =====================================================================
Editorial primitives
Long-form/magazine patterns. Use inside prose contexts; they expect
serif body and 60–65ch line-lengths.
===================================================================== */
.dropcap::first-letter {
font: 600 4.2em/0.85 var(--serif);
float: left;
padding: 6px 10px 0 0;
color: var(--accent);
}
.pullquote {
font: 500 clamp(22px, 3vw, 32px)/1.35 var(--serif);
font-style: italic;
max-width: 32ch;
margin: 32px auto;
padding-left: 24px;
border-left: 1.5px solid var(--accent);
color: var(--slate);
}
.byline {
display: flex;
align-items: baseline;
gap: 12px;
font: 12px var(--mono); /* mono earns its place HERE — actual metadata */
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-500);
}
.byline .author {
font: italic 14px/1.3 var(--serif);
text-transform: none;
letter-spacing: 0;
color: var(--gray-700);
}
figure.figure { margin: 32px 0; }
figure.figure img,
figure.figure video {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--r-md);
border: var(--border);
}
figure.figure figcaption {
font: italic 13px/1.5 var(--serif);
color: var(--gray-500);
margin-top: 10px;
padding-left: 12px;
border-left: 1.5px solid var(--gray-300);
}
/* Inline elements */
em.accent, .serif em { font-style: italic; color: var(--accent); }
a.link {
color: var(--accent);
text-decoration-color: var(--oat);
text-underline-offset: 3px;
}
a.link:hover { text-decoration-color: var(--accent); }
code, .code-inline {
font-family: var(--mono);
font-size: 0.86em;
background: var(--gray-100);
padding: 1.5px 5px;
border-radius: var(--r-xs);
}
/* =====================================================================
Components
===================================================================== */
/* ---------- Button ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 16px;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
border-radius: var(--r-sm);
border: 1.5px solid transparent;
cursor: pointer;
transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-d); }
.btn-secondary { background: var(--paper); color: var(--slate); border-color: var(--gray-300); }
.btn-secondary:hover { background: var(--gray-100); }
.btn-ghost { background: transparent; color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-danger { background: var(--rust); color: var(--paper); }
.btn-danger:hover { background: var(--rust-d); }
/* ---------- Input / Textarea / Select ---------- */
.input,
.textarea,
.select {
padding: 0 12px;
font: 14px var(--sans);
color: var(--slate);
background: var(--paper);
border: var(--border);
border-radius: var(--r-sm);
outline: none;
transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.input { height: 38px; }
.select { height: 38px; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.textarea { padding: 10px 12px; min-height: 96px; line-height: 1.5; resize: vertical; font-family: var(--sans); }
.input::placeholder,
.textarea::placeholder { color: var(--gray-500); }
.input:focus,
.textarea:focus,
.select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
.input:disabled,
.textarea:disabled,
.select:disabled,
.input.is-disabled {
background: var(--gray-100);
color: var(--gray-500);
cursor: not-allowed;
}
.input.is-error,
.textarea.is-error,
.select.is-error {
border-color: var(--rust);
box-shadow: 0 0 0 3px var(--rust-focus-ring);
}
/* ---------- Field group (label + control + help/error) ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > .input,
.field > .textarea,
.field > .select { width: 100%; }
.field-label {
font: 500 13px/1.2 var(--sans);
color: var(--slate);
}
.field-help {
font: 12px/1.4 var(--sans);
color: var(--gray-500);
}
.field-error {
font: 500 12px/1.4 var(--sans);
color: var(--rust);
}
/* ---------- Checkbox ---------- */
.checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.checkbox input {
appearance: none;
width: 18px; height: 18px;
border: var(--border);
border-radius: 5px;
background: var(--paper);
position: relative;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
.checkbox input:checked { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked::after {
content: "";
position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border: solid var(--paper);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ---------- Radio ---------- */
.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.radio input {
appearance: none;
width: 18px; height: 18px;
border: var(--border);
border-radius: 50%;
background: var(--paper);
position: relative;
cursor: pointer;
transition: border-color var(--t-fast);
}
.radio input:checked { border-color: var(--accent); }
.radio input:checked::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
transform: translate(-50%, -50%);
}
/* ---------- Switch ---------- */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input {
appearance: none;
width: 36px; height: 20px;
border-radius: var(--r-pill);
background: var(--gray-300);
position: relative;
cursor: pointer;
transition: background var(--t-fast);
}
.switch input::after {
content: "";
position: absolute;
left: 2px; top: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--paper);
box-shadow: var(--shadow-sm);
transition: left var(--t-fast) var(--ease-out);
}
.switch input:checked { background: var(--accent); }
.switch input:checked::after { left: 18px; }
/* ---------- Keyboard chip () ---------- */
kbd, .kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
font: 500 11px/1 var(--mono);
color: var(--gray-700);
background: var(--paper);
border: 1px solid var(--gray-300);
border-bottom-width: 2px;
border-radius: var(--r-xs);
vertical-align: baseline;
}
/* ---------- Badge / Pill ---------- */
.badge {
display: inline-flex; align-items: center;
height: 22px; padding: 0 9px;
font-size: 12px; font-weight: 500;
border-radius: var(--r-pill);
}
.badge-neutral { background: var(--gray-100); color: var(--gray-700); }
.badge-accent { background: var(--accent-tint); color: var(--accent); }
.badge-success { background: var(--olive-tint); color: var(--olive); }
.badge-warning { background: var(--warning-tint); color: var(--warning-dark); }
.badge-danger { background: var(--rust); color: var(--paper); }
/* ---------- Card ---------- */
.card {
background: var(--paper);
border: var(--border);
border-radius: var(--r-lg);
padding: var(--sp-5);
transition: border-color var(--t-base) ease;
}
.card.is-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.card.is-link:hover { border-color: var(--gray-500); }
/* ---------- Stat card ---------- */
.stat-card {
background: var(--paper);
border: var(--border);
border-radius: var(--r-md);
padding: 20px 22px 18px;
}
.stat-card.is-primary { border-left: 4px solid var(--accent); padding-left: 19px; }
.stat-num { font: 600 44px/1 var(--serif); margin-bottom: 8px; color: var(--slate); letter-spacing: -0.018em; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); }
.stat-delta { font-family: var(--mono); font-size: 11px; margin-top: 6px; }
.stat-delta.up { color: var(--olive); }
.stat-delta.down { color: var(--rust); }
.stat-delta.flat { color: var(--gray-500); }
/* ---------- Table ---------- */
.tbl {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--paper);
border: var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.tbl thead th {
text-align: left;
font: 600 11px/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500);
background: var(--gray-100);
padding: 12px 16px;
border-bottom: 1px solid var(--gray-300);
}
.tbl tbody td {
padding: 13px 16px;
border-bottom: 1px solid var(--gray-100);
font-size: 14px;
}
.tbl tbody tr:last-child td { border-bottom: none; }
/* ---------- Dark TL;DR / callout panel ---------- */
.tldr {
background: var(--slate);
color: var(--ivory);
border-radius: var(--r-md);
padding: 22px 26px;
}
.tldr-label {
font: 500 var(--t-eyebrow)/1 var(--mono);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--oat);
margin-bottom: 10px;
}
.tldr code {
background: var(--tldr-code-tint);
color: var(--ivory);
}
/* ---------- Severity pill ---------- */
.pill {
display: inline-flex; align-items: baseline; gap: 6px;
font: 600 12px/1 var(--sans);
border-radius: var(--r-pill);
padding: 5px 12px;
}
.pill.sev { background: var(--accent); color: var(--paper); letter-spacing: 0.03em; }
.pill.resolved { background: var(--olive); color: var(--paper); }
.pill.neutral { background: var(--gray-100); color: var(--gray-700); border: var(--border); }
.pill.neutral .v { font-family: var(--mono); }
/* ---------- Timeline ---------- */
.timeline { position: relative; padding: 4px 0 4px 16px; }
.timeline::before {
content: "";
position: absolute;
left: 16px; top: 8px; bottom: 8px;
width: 2px;
background: var(--gray-300);
}
.tl-entry { position: relative; padding: 0 0 22px 28px; }
.tl-entry::before {
content: "";
position: absolute;
left: -7px; top: 4px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--paper);
border: 2px solid var(--accent);
}
/* ---------- Section header ---------- */
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.sec-head .idx {
font: 600 13px/1 var(--mono);
color: var(--accent);
width: 34px;
flex-shrink: 0;
}
.sec-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -0.012em; }
.sec-head .count {
font: 11px/1 var(--mono);
color: var(--gray-500);
background: var(--gray-100);
padding: 2px 8px;
border-radius: var(--r-pill);
}
/* ---------- TOC pill nav ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a {
font-size: 12.5px;
padding: 7px 14px;
border: var(--border);
border-radius: var(--r-pill);
text-decoration: none;
color: var(--gray-700);
background: var(--paper);
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
display: inline-flex; align-items: center; gap: 7px;
}
.toc a .n { font: 10px/1 var(--mono); color: var(--gray-500); }
.toc a:hover { border-color: var(--slate); color: var(--slate); }
.toc a:hover .n { color: var(--accent); }
/* ---------- Avatar (PR-style monogram) ---------- */
.avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--oat);
color: var(--slate);
display: inline-flex; align-items: center; justify-content: center;
font: 600 13px/1 var(--sans);
letter-spacing: 0.02em;
border: var(--border);
}
/* ---------- Risk chip (with status dot) ---------- */
.chip-dot {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 12px;
border-radius: var(--r-sm);
border: var(--border);
font: 12.5px var(--mono);
color: var(--slate);
background: var(--paper);
}
.chip-dot .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.chip-dot.safe { background: var(--olive-tint); border-color: var(--olive-strong-border); }
.chip-dot.safe .dot { background: var(--olive); }
.chip-dot.medium { background: var(--oat); }
.chip-dot.medium .dot { background: var(--gray-500); }
.chip-dot.attention { background: var(--accent-tint); border-color: var(--accent-strong-border); }
.chip-dot.attention .dot { background: var(--accent); }
/* ---------- Alert / banner ---------- */
.alert {
display: flex;
gap: 12px;
padding: 12px 16px;
border-radius: var(--r-md);
border: var(--border);
background: var(--paper);
font-size: 14px;
line-height: 1.5;
color: var(--slate);
}
.alert-title { font-weight: 600; margin: 0 0 2px; font-size: 14px; color: var(--slate); }
.alert-body { color: var(--gray-700); }
/* Semantic is carried by tinted bg + border. The title stays slate so the
info/success/warning/danger variants read as one component rather than
"colored heading + body". Pair with an icon or role="alert" if a third
signal is needed. */
.alert.is-info { background: var(--accent-tint); border-color: var(--accent-strong-border); }
.alert.is-success { background: var(--olive-tint); border-color: var(--olive-strong-border); }
.alert.is-warning { background: var(--warning-tint); border-color: var(--warning-strong-border); }
.alert.is-danger { background: var(--rust-tint); border-color: var(--rust-tint-border); }
/* ---------- Multi-line code block ---------- */
.code-block {
position: relative;
background: var(--gray-100);
border: var(--border);
border-radius: var(--r-md);
padding: 14px 16px;
font: 13px/1.55 var(--mono);
color: var(--slate);
overflow-x: auto;
}
.code-block pre,
pre.code-block { margin: 0; font: inherit; color: inherit; white-space: pre; }
.code-block .copy {
position: absolute;
top: 8px; right: 8px;
height: 26px;
padding: 0 10px;
font: 500 11px/1 var(--mono);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-700);
background: var(--paper);
border: var(--border);
border-radius: var(--r-xs);
cursor: pointer;
}
.code-block .copy:hover { border-color: var(--slate); color: var(--slate); }
/* ---------- Dialog (native