/* Date: 2026-10-15 | File: process-complexity-calculator/calculator.css
Purpose: Styles unique to the Process Complexity Calculator. Everything style.css already provides is
reused as-is (.assessment*, .form-field, .form-row, .form-error, .form-hp, .btn*, .section*, utilities);
only the pieces with no existing equivalent live here: dropdowns, the score readout and scale, the
classification badge, the comparison table and the warning callouts.
All values come from tokens.css. Written as one self-contained block so it can be appended to
style.css verbatim later and this file plus its deleted, with no other change. */
/* ---- Hero treatment (this page only; calculator.css is not loaded anywhere else) ----
hero.php writes `background: var(--bg-gradient-hero)` as an INLINE style, which no stylesheet
selector can override without !important. So the extra depth is painted on ::before instead,
sitting above that inline gradient and below the copy. ::after carries the fade into the page.
The three stop colours below are the stops already inside --bg-gradient-hero; tokens.css only
exposes the composite gradient, not its individual colours. Promoting them to tokens.css would
be the clean fix, which is why they are declared once here rather than repeated inline. */
.hero-section {
--hero-wash-1: #cfe6f7; /* = stop 1 of --bg-gradient-hero */
--hero-wash-2: #f2dada; /* = stop 2 */
--hero-wash-3: #f7b3a6; /* = stop 3 */
position: relative;
overflow: hidden;
}
.hero-section > .layout-container { position: relative; z-index: 2; }
/* Four soft blooms plus a fine grain, so the flat 135deg gradient reads with depth. */
.hero-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(ellipse 55% 75% at 10% 74%, var(--hero-wash-1) 0%, transparent 78%),
radial-gradient(ellipse 48% 80% at 92% 11%, var(--hero-wash-3) 0%, transparent 78%),
radial-gradient(ellipse 42% 68% at 57% 88%, var(--hero-wash-2) 0%, transparent 85%),
radial-gradient(ellipse 45% 53% at 99% 90%, var(--hero-wash-1) 0%, transparent 84%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
background-size: auto, auto, auto, auto, 180px 180px;
opacity: 0.9;
}
/* Dissolves the hero into the white page instead of ending on a hard edge. */
.hero-section::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 210px;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-white) 98%);
}
/* ---- Step watermark: a large faded numeral keyed to the current step ----
The digit is anchored to the container's left edge and pulled 70% of its own width outside it,
so roughly 30% sits behind the white card and the rest reads in the page gutter. The clipping
layer is a sibling of the form, never an ancestor: overflow:hidden on an ancestor would stop
.assessment__nav from sticking. */
.pcc-section { position: relative; }
.pcc-section .layout-container { position: relative; z-index: 1; } /* card paints over the numeral */
.pcc-stepmark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pcc-stepmark__digit { position: absolute; top: var(--space-2xl); left: calc(50% - (var(--container-max) / 2) + var(--space-lg)); transform: translateX(-70%); font-size: clamp(220px, 26vw, 460px); font-weight: var(--weight-bold); line-height: 1; white-space: nowrap; user-select: none; color: var(--brand-primary); opacity: 0.1; transition: opacity var(--transition-base); }
/* Brand gradient fill where supported; the flat brand colour above is the fallback. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
.pcc-stepmark__digit { background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.16; }
}
@media (max-width: 1199px) {
.pcc-stepmark__digit { left: var(--space-lg); transform: translateX(-55%); font-size: clamp(170px, 30vw, 300px); }
}
/* ---- Question fields ---- */
/* Each question sits in its own shaded panel: a step holds up to six, and without a boundary
they read as one continuous wall of options. Vertical padding is kept tight so the panels
do not undo the scroll-depth work. */
.pcc-field { background: var(--bg-light); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-base) var(--space-lg); margin-bottom: var(--space-lg); }
.pcc-field__label { display: block; font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2xs); }
.pcc-field__optional { font-weight: var(--weight-normal); color: var(--text-muted); }
.pcc-field__help { font-size: var(--font-sm); color: var(--text-muted); margin-bottom: var(--space-sm); }
/* Text and number inputs only. Radios and checkboxes keep style.css's .assessment__option sizing,
which this rule would otherwise override (same specificity, and this file loads later). */
.pcc-field input:not([type="radio"]):not([type="checkbox"]), .pcc-field textarea { width: 100%; max-width: 520px; padding: var(--space-sm) var(--space-base); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); font: inherit; color: var(--text-primary); background: var(--bg-white); }
.pcc-field input:not([type="radio"]):not([type="checkbox"]):focus, .pcc-field textarea:focus { outline: 2px solid var(--brand-secondary); outline-offset: 1px; border-color: var(--brand-secondary); }
.pcc-field textarea { resize: vertical; }
.pcc-field__counter { font-size: var(--font-xs); color: var(--text-light); text-align: right; margin-top: var(--space-2xs); }
.pcc-derived { font-size: var(--font-sm); color: var(--brand-secondary); background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); }
.pcc-field .form-error { margin-top: var(--space-2xs); }
/* Option cards: every choice shows its own explanation, so options can be compared before picking.
Extends .assessment__option, which centres its items; a two-line card needs top alignment. */
.pcc-option { align-items: flex-start; gap: var(--space-base); background: var(--bg-white); }
.pcc-field .assessment__option:has(input:checked) { background: var(--bg-tint-primary); border-color: var(--brand-primary); }
.pcc-option input { margin-top: 3px; }
.pcc-option__body { display: block; }
.pcc-option__label { display: block; font-weight: var(--weight-medium); color: var(--text-primary); }
.pcc-option__note { display: block; font-size: var(--font-sm); color: var(--text-muted); margin-top: var(--space-2xs); line-height: var(--leading-normal); }
/* Two cards per row once there is room: halves the scroll depth of a step without hiding any explanation. */
@media (min-width: 768px) {
.pcc-field .assessment__options { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.pcc-field .assessment__option { height: 100%; }
}
/* Step navigation stays reachable: a long step would otherwise bury Next several screens down. */
.assessment__nav { position: sticky; bottom: 0; background: var(--bg-white); border-top: 1px solid var(--border-light); padding: var(--space-base) 0; margin-top: var(--space-lg); z-index: var(--z-sticky); box-shadow: 0 -8px 16px -12px rgba(0,0,0,0.25); }
/* ---- Result header: score readout and classification badge ---- */
.pcc-result__eyebrow { font-size: var(--font-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-xs); }
.pcc-score { display: flex; align-items: center; gap: var(--space-base); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.pcc-score__value { font-size: var(--font-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--brand-secondary); }
.pcc-score__max { font-size: var(--font-lg); font-weight: var(--weight-normal); color: var(--text-muted); margin-left: var(--space-2xs); }
.pcc-badge { padding: var(--space-2xs) var(--space-base); border-radius: var(--radius-full); font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--text-on-dark); background: var(--text-muted); }
.pcc-badge--simple { background: var(--brand-accent-green); }
.pcc-badge--medium { background: var(--brand-accent-blue); }
.pcc-badge--complex { background: var(--brand-accent-red); }
/* ---- Horizontal complexity scale (bands are 0-30 / 30-60 / 60-100) ---- */
.pcc-scale { margin-bottom: var(--space-lg); }
.pcc-scale__track { position: relative; display: flex; height: 10px; border-radius: var(--radius-full); overflow: visible; }
.pcc-scale__band { height: 100%; opacity: 0.35; }
.pcc-scale__band--simple { flex: 0 0 30%; background: var(--brand-accent-green); border-radius: var(--radius-full) 0 0 var(--radius-full); }
.pcc-scale__band--medium { flex: 0 0 30%; background: var(--brand-accent-blue); }
.pcc-scale__band--complex { flex: 0 0 40%; background: var(--brand-accent-red); border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.pcc-scale__marker { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--bg-white); border: 4px solid var(--brand-secondary); transform: translate(-50%, -50%); transition: left var(--transition-base); box-shadow: var(--shadow-sm); }
.pcc-scale__labels { display: flex; margin-top: var(--space-xs); font-size: var(--font-xs); color: var(--text-muted); }
.pcc-scale__labels span:nth-child(1) { flex: 0 0 30%; }
.pcc-scale__labels span:nth-child(2) { flex: 0 0 30%; text-align: center; }
.pcc-scale__labels span:nth-child(3) { flex: 0 0 40%; text-align: right; }
/* ---- Result blocks ---- */
.pcc-block-title { font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--brand-secondary); margin: var(--space-xl) 0 var(--space-xs); }
.pcc-block-note { font-size: var(--font-sm); color: var(--text-muted); margin-bottom: var(--space-base); }
.pcc-provisional { font-size: var(--font-sm); color: var(--text-secondary); background: var(--bg-tint-primary); border-left: 4px solid var(--brand-primary); padding: var(--space-sm) var(--space-base); border-radius: var(--radius-sm); margin-bottom: var(--space-base); }
.pcc-disclaimer { font-size: var(--font-sm); color: var(--text-muted); border-top: 1px solid var(--border-light); padding-top: var(--space-base); margin-top: var(--space-xl); }
/* Ranked complexity drivers: numerals come from the list itself, not a counter hack. */
.pcc-drivers { list-style: none; counter-reset: pcc-driver; padding: 0; }
.pcc-drivers li { counter-increment: pcc-driver; position: relative; padding-left: var(--space-3xl); margin-bottom: var(--space-base); }
.pcc-drivers li::before { content: counter(pcc-driver); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--brand-secondary); color: var(--text-on-dark); font-weight: var(--weight-bold); font-size: var(--font-sm); display: flex; align-items: center; justify-content: center; }
.pcc-drivers__name { display: block; font-weight: var(--weight-semibold); color: var(--text-primary); }
.pcc-drivers__text { color: var(--text-secondary); font-size: var(--font-sm); }
/* ---- Extraction comparison table (style.css has no styling at all) ---- */
.pcc-compare__scroll { overflow-x: auto; }
.pcc-compare { width: 100%; border-collapse: collapse; font-size: var(--font-sm); min-width: 420px; }
.pcc-compare th, .pcc-compare td { padding: var(--space-sm) var(--space-base); border: 1px solid var(--border-light); text-align: left; vertical-align: top; }
.pcc-compare thead th { background: var(--bg-light); color: var(--brand-secondary); font-weight: var(--weight-semibold); }
.pcc-compare tbody tr.is-selected { background: var(--bg-tint-primary); }
.pcc-compare tbody tr.is-unavailable { color: var(--text-light); }
.pcc-compare__name { font-weight: var(--weight-semibold); color: var(--text-primary); }
.pcc-compare__flags { display: block; font-size: var(--font-xs); color: var(--text-muted); margin-top: var(--space-2xs); }
.pcc-compare__score { font-weight: var(--weight-bold); color: var(--brand-secondary); white-space: nowrap; }
/* ---- Feasibility warnings (no generic alert/notice class exists) ---- */
.pcc-warnings { list-style: none; padding: 0; }
.pcc-warning { position: relative; padding: var(--space-sm) var(--space-base) var(--space-sm) var(--space-3xl); margin-bottom: var(--space-xs); background: var(--bg-light); border-left: 4px solid var(--brand-primary); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--font-sm); }
.pcc-warning::before { content: "!"; position: absolute; left: var(--space-base); top: var(--space-sm); width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--brand-primary); color: var(--text-on-dark); font-weight: var(--weight-bold); font-size: var(--font-xs); display: flex; align-items: center; justify-content: center; }
/* ---- Actions and the lead-capture panel ---- */
.pcc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-base); margin-top: var(--space-xl); }
.pcc-email { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--bg-light); border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.pcc-email .pcc-block-title { margin-top: 0; }
.pcc-email .btn { margin-top: var(--space-xs); }
/* ---- Factor overview: all eleven criteria, so no single factor dominates the read ---- */
.pcc-factors { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }
.pcc-factor { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-base); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-light); font-size: var(--font-sm); }
.pcc-factor__name { color: var(--text-secondary); }
.pcc-factor__level { font-weight: var(--weight-semibold); white-space: nowrap; }
.pcc-factor__level--none { color: var(--text-light); }
.pcc-factor__level--low { color: var(--brand-accent-green); }
.pcc-factor__level--moderate { color: var(--brand-accent-blue); }
.pcc-factor__level--high { color: var(--brand-primary); }
.pcc-factor__level--veryhigh { color: var(--brand-accent-red); }
/* ---- Report modal: native