/* camelnuggets.com — Cert Camel's home.
The tokens below are lifted verbatim from the app's own readme.html so the
site and the documentation it links to are visibly one thing. The Read Me and
the HAProxy guide are fetched from the tool repo at build time and carry their
own copies of these same values; keeping them identical is the point.
Light is the base. Dark arrives two ways — the OS preference, or an explicit
choice stored on the root element — so the dark block appears twice. An
explicit choice has to win in BOTH directions, which is what the :not() is
for. */
:root{
color-scheme:light;
--bg:#e9ebf1; --glow-1:rgba(99,102,241,.14); --glow-2:rgba(168,85,247,.12);
--surface:rgba(255,255,255,.62); --surface-solid:#f7f8fb;
--border:rgba(17,24,39,.11); --border-strong:rgba(17,24,39,.18);
--text:#0b0d12; --muted:#4d5666; --faint:#606875;
--accent:#6366f1; --accent-2:#a855f7;
--amber:#b45309; --amber-bg:rgba(245,158,11,.10);
--green:#15803d; --green-bg:rgba(34,197,94,.10);
--red:#b91c1c; --red-bg:rgba(239,68,68,.10);
--group-name:#4f46e5;
--shadow:0 1px 2px rgba(17,24,39,.04), 0 10px 30px -14px rgba(17,24,39,.20);
--radius:16px; --radius-sm:11px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
color-scheme:dark;
--bg:#0a0b0f; --glow-1:rgba(99,102,241,.20); --glow-2:rgba(168,85,247,.15);
--surface:rgba(255,255,255,.045); --surface-solid:#15161b;
--border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.18);
--text:#f2f3f6; --muted:#aab3c5; --faint:#808a9c;
--amber:#fbbf24; --amber-bg:rgba(245,158,11,.12);
--green:#4ade80; --green-bg:rgba(34,197,94,.11);
--red:#f87171; --red-bg:rgba(239,68,68,.13);
--group-name:#a5b4fc;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
color-scheme:dark;
--bg:#0a0b0f; --glow-1:rgba(99,102,241,.20); --glow-2:rgba(168,85,247,.15);
--surface:rgba(255,255,255,.045); --surface-solid:#15161b;
--border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.18);
--text:#f2f3f6; --muted:#aab3c5; --faint:#808a9c;
--amber:#fbbf24; --amber-bg:rgba(245,158,11,.12);
--green:#4ade80; --green-bg:rgba(34,197,94,.11);
--red:#f87171; --red-bg:rgba(239,68,68,.13);
--group-name:#a5b4fc;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.7);
}
*{box-sizing:border-box;}
body{margin:0; min-height:100vh; color:var(--text); background:var(--bg);
font-family:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
background-image:radial-gradient(58rem 58rem at 6% -10%,var(--glow-1),transparent 60%),
radial-gradient(48rem 48rem at 104% 2%,var(--glow-2),transparent 55%);
background-attachment:fixed; -webkit-font-smoothing:antialiased; line-height:1.65;}
h1,h2,h3{font-family:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",
-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;}
.shell{max-width:min(72rem,94vw); margin:0 auto;
padding:clamp(1.25rem,3vw,2.25rem) clamp(1rem,3vw,2.5rem) 5rem;}
/* Masthead: logo and wordmark left, navigation right. */
.masthead{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
padding:.2rem 0 1.15rem; border-bottom:1px solid var(--border); margin-bottom:2.2rem;}
.brand{display:flex; align-items:center; gap:.75rem; flex:none; text-decoration:none;}
.brand .mark{display:block; flex:none; height:2.75rem;}
.brand .mark img{height:100%; width:auto; display:block;}
.brand h1{font-size:1.65rem; line-height:1.1; letter-spacing:-.025em; font-weight:850;
margin:0; padding-bottom:.06em; white-space:nowrap;
background:linear-gradient(135deg,var(--text) 38%,var(--accent) 145%);
-webkit-background-clip:text; background-clip:text; color:transparent;}
.mastnav{display:flex; align-items:center; gap:.4rem; margin-left:auto; flex-wrap:wrap;}
.mastnav a{font-size:.85rem; font-weight:600; color:var(--muted); text-decoration:none;
padding:.4rem .8rem; border:1px solid transparent; border-radius:999px; white-space:nowrap;}
.mastnav a:hover{color:var(--text); border-color:var(--border-strong); background:var(--surface);}
.mastnav a[aria-current="page"]{color:var(--text); border-color:var(--border-strong);
background:var(--surface);}
/* Breadcrumb on pages that sit under Guides, since the nav only names the
section and not where you are inside it. */
.crumb{font-size:.78rem; color:var(--faint); margin:0 0 .4rem;}
.crumb a{color:var(--muted); text-decoration:none;}
.crumb a:hover{color:var(--accent); text-decoration:underline;}
.crumb span{margin:0 .4rem; opacity:.6;}
.lede{font-size:clamp(1.05rem,2vw,1.2rem); color:var(--muted); max-width:46rem; margin:0 0 1.6rem;}
/* --- Hero ----------------------------------------------------------------- */
/* The page opens on the consequence rather than the mechanism, so the display
line gets room to be read as a sentence and everything else stays quiet
around it. This is the one place on the site with a large type size. */
.hero{padding:clamp(1rem,4vw,2.75rem) 0 clamp(1.5rem,4vw,2.5rem);}
.eyebrow{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--group-name); margin:0 0 1rem;}
.display{font-size:clamp(1.9rem,5.2vw,3.35rem); line-height:1.08; letter-spacing:-.032em;
font-weight:850; margin:0 0 1.3rem; max-width:20ch; text-wrap:balance;}
/* The
is a deliberate break on wide screens and noise on narrow ones,
where the line wraps naturally anyway. */
@media (max-width:40rem){ .display br{display:none;} }
.hero .lede{max-width:44rem; font-size:clamp(1.08rem,2.1vw,1.28rem);}
/* Three facts about the tool, not three claims: set as quiet chips so they
read as specification rather than marketing. */
.tagline{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0 0; padding:0;}
.tagline span{font-size:.78rem; font-weight:650; color:var(--muted);
padding:.32rem .8rem; border:1px solid var(--border); border-radius:999px;
background:var(--surface);}
/* --- Fact strip ----------------------------------------------------------- */
/* Three dated deadlines from one published rule. Tabular figures so the
numbers line up as a series, which is the whole point of showing them
together - the shape of the trend is the argument. */
.factstrip{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
gap:1rem; margin:1.6rem 0; max-width:62rem;}
.fact{border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem 1.3rem;
background:var(--surface); box-shadow:var(--shadow); display:flex; flex-direction:column;}
.factnum{font-size:2.6rem; line-height:1; font-weight:850; letter-spacing:-.03em;
font-variant-numeric:tabular-nums; color:var(--text);}
.factlab{font-size:.82rem; color:var(--muted); margin-top:.45rem;}
.factwhen{font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color:var(--faint); margin-top:.55rem;}
/* Only the one in force now is coloured - the others are future, and colouring
all three would say "alarm" three times instead of "this is happening". */
.fact.now{border-color:var(--amber); background:var(--amber-bg);}
.fact.now .factnum{color:var(--amber);}
.fact.now .factwhen{color:var(--amber);}
/* --- Numbered ladder ------------------------------------------------------ */
/* Numbered because these ARE sequences - each verification step closes a gap
the previous one leaves open, and each guide assumes the one before it. Not
used anywhere the order is arbitrary. */
.ladder{list-style:none; counter-reset:step; margin:1.6rem 0; padding:0; max-width:62rem;}
.ladder > li{counter-increment:step; position:relative;
padding:0 0 1.5rem 3.4rem; margin:0;}
.ladder > li::before{content:counter(step,decimal-leading-zero);
position:absolute; left:0; top:-.1rem; width:2.4rem;
font-size:.9rem; font-weight:850; font-variant-numeric:tabular-nums;
letter-spacing:.02em; color:var(--group-name);}
/* The rail makes the sequence read as one movement rather than four boxes. It
stops at the last item so it does not dangle past the final step. */
.ladder > li::after{content:""; position:absolute; left:.72rem; top:1.5rem; bottom:.15rem;
width:1px; background:var(--border);}
.ladder > li:last-child{padding-bottom:0;}
.ladder > li:last-child::after{display:none;}
.ladder h3{margin:0 0 .3rem; font-size:1.02rem;}
.ladder p{margin:.3rem 0; max-width:52rem;}
.ladder .meta{font-size:.76rem; color:var(--faint); margin-top:.5rem;}
.ladder.guides > li{padding-bottom:2rem;}
.ladder.guides h3{font-size:1.12rem;}
.ladder.guides h3 a{text-decoration:none;}
.ladder.guides h3 a:hover{text-decoration:underline;}
/* --- Cards that are links ------------------------------------------------- */
.card.link{display:block; text-decoration:none; color:inherit;
transition:border-color .15s, transform .15s;}
.card.link h3{color:var(--group-name);}
.card.link:hover{border-color:var(--accent);}
.card.link p{color:var(--muted); font-size:.92rem;}
/* --- FAQ ------------------------------------------------------------------ */
/* rather than a script: it opens with JavaScript disabled, it is
keyboard-operable for free, and browser find-in-page reaches inside it. */
.faq{max-width:62rem; margin:1.4rem 0; border:1px solid var(--border);
border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow);
overflow:hidden;}
.faq details{margin:0; font-size:inherit; border-bottom:1px solid var(--border);}
.faq details:last-child{border-bottom:none;}
.faq summary{list-style:none; cursor:pointer; padding:.95rem 1.3rem;
font-size:.95rem; font-weight:650; color:var(--text);
display:flex; align-items:center; gap:.75rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+"; flex:none; width:1.1rem; text-align:center;
font-weight:800; color:var(--group-name);}
.faq details[open] summary::before{content:"\2212";}
.faq summary:hover{background:var(--surface-solid);}
.faq details > p{margin:0; padding:0 1.3rem 1.1rem 3.15rem; color:var(--muted);
font-size:.92rem; max-width:56rem;}
/* A screenshot that carries the page rather than illustrating a paragraph. */
.shotfig.wide{max-width:none;}
.shotfig.wide .shotlink{max-width:100%; display:block;}
h2{font-size:1.3rem; font-weight:750; letter-spacing:-.015em; margin:2.6rem 0 .7rem;
scroll-margin-top:1.5rem;}
h3{font-size:1rem; font-weight:700; margin:1.6rem 0 .4rem;}
p{margin:.7rem 0; max-width:62rem;}
ul,ol{margin:.7rem 0; padding-left:1.3rem; max-width:62rem;}
li{margin:.35rem 0;}
strong{font-weight:700;}
a{color:var(--group-name);}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.87em;
background:var(--surface-solid); border:1px solid var(--border); border-radius:6px;
padding:.1rem .35rem;}
pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem;
line-height:1.55; overflow-x:auto; margin:.9rem 0; padding:.9rem 1.1rem; color:var(--muted);
border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-solid);}
pre code{background:none; border:none; padding:0; font-size:1em;}
/* Wide content scrolls inside its own box so the page never scrolls sideways. */
.tablewrap{overflow-x:auto; margin:1rem 0; border:1px solid var(--border);
border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; font-size:.9rem;}
th,td{text-align:left; padding:.65rem 1rem; border-bottom:1px solid var(--border);
vertical-align:top;}
thead th{font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint);
font-weight:800;}
tbody tr:last-child td{border-bottom:none;}
.callout{border:1px solid var(--border); border-left-width:4px; border-radius:var(--radius-sm);
padding:.85rem 1.1rem; margin:1.3rem 0; background:var(--surface); max-width:62rem;}
.callout .h{font-weight:700; margin-bottom:.2rem;}
.callout p{margin:.35rem 0;}
.callout.warn{border-left-color:var(--amber); background:var(--amber-bg);}
.callout.crit{border-left-color:var(--red); background:var(--red-bg);}
.callout.good{border-left-color:var(--green); background:var(--green-bg);}
.callout.note{border-left-color:var(--accent);}
.card{border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.4rem;
background:var(--surface); box-shadow:var(--shadow); margin:0 0 1.1rem;}
.card > h3{margin-top:0;}
.cardrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
gap:1.1rem; align-items:stretch; margin:1.4rem 0;}
.cardrow > .card{margin:0; height:100%;}
.btn{display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-size:.92rem;
font-weight:650; text-decoration:none; color:var(--text); cursor:pointer;
padding:.6rem 1.2rem; border:1px solid var(--border-strong); border-radius:999px;
background:var(--surface);}
.btn:hover{border-color:var(--accent);}
.btn.primary{color:#fff; border-color:transparent;
background:linear-gradient(135deg,var(--accent),var(--accent-2));}
.btns{display:flex; gap:.6rem; flex-wrap:wrap; margin:1.4rem 0;}
.mini{font-size:.78rem; color:var(--faint);}
/* Screenshots. Shown small so they illustrate without pushing the text apart,
and opened full size on click.
width/height stay on the img so the browser reserves the space before the
file arrives - otherwise the text below jumps as each one loads, which on a
page of numbered steps means losing your place mid-instruction. */
.shotfig{margin:1.4rem 0; max-width:62rem;}
.shotlink{display:inline-block; max-width:min(28rem,100%); line-height:0;
border-radius:var(--radius); cursor:zoom-in; position:relative;}
.shot{max-width:100%; height:auto; display:block; border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow);}
.shotlink:hover .shot{border-color:var(--accent);}
.shotfig figcaption{font-size:.8rem; color:var(--faint); margin-top:.55rem;
max-width:52rem; line-height:1.5;}
.shotfig figcaption .zoom{color:var(--group-name); white-space:nowrap;}
/* The viewer.