:root {
  --yellow-1: #fff3bf;
  --font-mono: var(--font-monospace-code);
  --size-3: 1rem;
  --size-2: .5rem;
  --font-weight-9: 900;
  --pink-7: #d6336c;
  --gray-9: #212529;
  --border-size-2: 2px;
  --pink-5: #f06595;
  --radius-2: 5px;
  --cyan-1: #c5f6fa;
  --border-size-3: 5px;
  --size-fluid-2: max(1rem,min(2vw,1.5rem));
  --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 1px 1px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 2px 2px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 5px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 9px 9px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 16px 16px -2px hsl(var(--shadow-color)/var(--shadow-strength-7));
  --font-size-fluid-2: max(1.5rem,min(6vw,2.5rem));
  --yellow-3: #ffe066;
  --red-2: #ffc9c9;
  --red-7: #f03e3e;
  --font-weight-7: 700;
  --lime-5: #94d82d;
  --font-size-fluid-1: max(1rem,min(4vw,1.5rem));
  --size-4: 1.25rem;
  --gray-3: #dee2e6;
  --gray-6: #868e96;
  --radius-round: 1e5px;
  --gradient-8: conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);
  --size-1: .25rem;
  --gray-5: #adb5bd;
  --radius-1: 2px;
  --gradient-16: radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);
  --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 7px 14px -5px hsl(var(--shadow-color)/var(--shadow-strength-6));
  --red-1: #ffe3e3;
  --yellow-2: #ffec99;
  --font-size-0: .75rem;
  --font-monospace-code: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;
  --shadow-color: 220 40% 2%;
  --shadow-strength-3: calc(var(--shadow-strength) + 2%);
  --shadow-strength-4: calc(var(--shadow-strength) + 3%);
  --shadow-strength-5: calc(var(--shadow-strength) + 4%);
  --shadow-strength-6: calc(var(--shadow-strength) + 5%);
  --shadow-strength-7: calc(var(--shadow-strength) + 6%);
  --gradient-space: in oklab;
  --shadow-strength: 25%;
}
/* Our theme on top of Open Props. JIT emits canonical upstream values for
 * every var() our pages touch; anything here wins by coming later in
 * source order, preserving the design as-shipped (our fallbacks were
 * Tailwind-palette values, upstream is Open Color — nearly all hues
 * differ, so these overrides are the site's actual colors).
 * Keep this file to tokens where our design intentionally differs. */
:root {
  /* The site palette. Every themed colour is one of these five, plus white
   * for text on Cerulean (Honeydew lands at 4.30:1 there, just shy of AA).
   * test/theme-contrast.test.ts guards every pairing this theme relies on. */
  --punch-red: #e63946;
  --honeydew: #f1faee;
  --frosted-blue: #a8dadc;
  --cerulean: #457b9d;
  --oxford-navy: #1d3557;
  /* A lifted navy for body-background depth; still dark enough for light text. */
  --chrome-lift: #2a4a75;

  /* Not upstream at all. */
  --grape-9: var(--oxford-navy);    /* page chrome */
  --surface-1: var(--frosted-blue); /* light panels, cards, list items */

  /* Our scale, not upstream's (upstream content-2 is 45ch). */
  --size-content-2: 60ch;
  --size-content-4: 120ch;

  /* Not upstream: plain monospace stack. */
  --font-mono: monospace;

  /* Our gradients (upstream gradient-8/-16 are different artwork). */
  --gradient-8: linear-gradient(var(--cerulean), var(--oxford-navy));
  --gradient-16: linear-gradient(var(--cerulean), var(--oxford-navy));

  /* Our hues (upstream values differ). */
  --cyan-1: var(--honeydew);        /* the content card surface */
  --gray-3: var(--honeydew);        /* progress-bar track */
  --gray-5: var(--cerulean);        /* input borders */
  --gray-6: var(--cerulean);        /* progress-bar border */
  --gray-9: var(--oxford-navy);     /* text on light surfaces */
  --lime-5: var(--cerulean);        /* card borders */
  --pink-5: var(--cerulean);        /* panel and page borders */
  --pink-7: var(--punch-red);       /* headings and the logo shadow */
  --red-1: rgba(230, 57, 70, 0.12); /* rejected-form surface */
  --red-2: rgba(230, 57, 70, 0.18); /* connection notice surface */
  --red-7: var(--punch-red);        /* error and notice borders */
  --yellow-1: var(--honeydew);      /* body text */
  --yellow-2: var(--frosted-blue);  /* code chip, closed portal */
  --yellow-3: var(--frosted-blue);  /* h1 shadow */
  --border-size-3: 3px;
}
body { background-color: var(--grape-9, #1d3557);
  background-image: linear-gradient(to top, var(--oxford-navy, #1d3557) 0%,
    var(--oxford-navy, #1d3557) 55%, var(--chrome-lift, #2a4a75) 100%);
  background-attachment: fixed;
  color: var(--yellow-1, #f1faee);
  font-family: var(--font-mono, monospace); margin: 0; padding: var(--size-3); }
header { display: flex; justify-content: space-between; align-items: center;
  gap: var(--size-2); padding: var(--size-2) 0; margin-bottom: var(--size-3); }
header .logo a { color: var(--yellow-1, #f1faee); font-weight: var(--font-weight-9, 900);
  text-decoration: none; text-shadow: 2px 2px var(--pink-7, #e63946); }
header nav ul { display: flex; gap: var(--size-2); list-style: none; margin: 0; padding: 0; }
header nav a { color: var(--frosted-blue, #a8dadc); }
.content { display: flex; gap: var(--size-3); align-items: flex-start; }
.content > main { flex: 1; min-width: 0; }
.side-panel { width: 34ch; flex-shrink: 0; background: var(--surface-1, #a8dadc);
  color: var(--gray-9, #1d3557);
  border: var(--border-size-2, 2px) outset var(--pink-5, #457b9d);
  border-radius: var(--radius-2); padding: var(--size-3); }
@media (max-width: 767.98px) {
  .content { flex-direction: column; }
  .side-panel { width: auto; }
}
.page { max-width: var(--size-content-4, 120ch); margin: 0 auto;
  background: var(--cyan-1, #f1faee); color: var(--gray-9, #1d3557);
  border: var(--border-size-3, 3px) ridge var(--pink-5, #457b9d);
  border-radius: var(--radius-2); padding: var(--size-fluid-2);
  box-shadow: var(--shadow-4); }
h1 { font-size: var(--font-size-fluid-2); text-align: center; text-wrap: balance;
  color: var(--pink-7, #e63946); text-shadow: 2px 2px var(--yellow-3, #a8dadc); }
.notice { background: var(--red-2, rgba(230, 57, 70, 0.18)); border: var(--border-size-2, 2px) dashed var(--red-7, #e63946);
  border-radius: var(--radius-2); padding: var(--size-2); font-weight: var(--font-weight-7, 700); }
.goal-card { background: var(--surface-1, #a8dadc); border: var(--border-size-2, 2px) outset var(--lime-5, #457b9d);
  border-radius: var(--radius-2); padding: var(--size-3); margin-bottom: var(--size-3); }
.counts { font-size: var(--font-size-fluid-1); font-weight: var(--font-weight-9, 900); }
.bar { height: var(--size-4); background: var(--gray-3, #f1faee);
  border: var(--border-size-2, 2px) inset var(--gray-6, #457b9d); border-radius: var(--radius-round); overflow: hidden; }
.bar > .fill { height: 100%; background: var(--gradient-8, linear-gradient(#457b9d, #1d3557)); }
form { display: grid; gap: var(--size-2); margin: var(--size-3) 0; }
label { display: grid; gap: var(--size-1); font-weight: var(--font-weight-7, 700); }
.checkbox-field { display: flex; align-items: center; gap: 8px; }
.checkbox-field input { flex: 0 0 auto; margin: 0; }
input[type=text], input[type=number] { padding: var(--size-2); font: inherit;
  border: var(--border-size-2, 2px) inset var(--gray-5, #457b9d); border-radius: var(--radius-1); }
button { padding: var(--size-2) var(--size-3); font: inherit; font-weight: var(--font-weight-9, 900);
  color: #fff;
  background: var(--gradient-16, linear-gradient(#457b9d, #1d3557)); cursor: pointer;
  border-radius: var(--radius-2); box-shadow: var(--shadow-2); }
.errors { background: var(--red-1, rgba(230, 57, 70, 0.12)); border: var(--border-size-2, 2px) solid var(--red-7, #e63946);
  border-radius: var(--radius-2); padding: var(--size-2); }
.overlay-url code { word-break: break-all; background: var(--yellow-2, #a8dadc); padding: var(--size-1); }
.visitor-counter { text-align: center; margin-top: var(--size-4); font-size: var(--font-size-0); }

/* Boxed old-web composition shared by landing and admin. */
* { box-sizing: border-box; }
.page { border: 2px dotted var(--cerulean); border-radius: 0; padding: clamp(12px, 3vw, 30px); }
header { background: var(--oxford-navy); padding: 20px; border: 2px dotted var(--frosted-blue); flex-wrap: wrap; }
header .logo a { font-size: 1.15rem; text-shadow: none; }
.content { gap: 24px; }
.content > main { display: grid; gap: 20px; }
.panel { border: 2px dotted var(--cerulean); background: var(--honeydew); min-width: 0; }
.panel-heading { margin: 0; padding: 10px 14px; background: var(--frosted-blue); color: var(--oxford-navy); font-size: 1rem; border-bottom: 2px dotted var(--cerulean); }
.panel-body { padding: 16px; }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-rail { width: 27ch; flex-shrink: 0; display: grid; gap: 18px; }
.rail-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rail-links a::before { content: '» '; }
a { color: var(--oxford-navy); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.goal-card { border-radius: 0; padding: 0; margin: 0; }
.bar { border-style: solid; }
input[type=text], input[type=number], textarea { width: 100%; min-width: 0; background: var(--honeydew); color: var(--oxford-navy); border: 1px solid var(--cerulean); border-radius: 0; }
textarea { padding: 10px; font: inherit; resize: vertical; }
.overlay-url { margin: 20px 0; line-height: 1.6; }
.advanced { margin-block: 16px; border-block: 1px dotted var(--cerulean); padding-block: 12px; }
summary { cursor: pointer; font-weight: 700; }
button { border: 1px solid var(--oxford-navy); border-radius: 0; box-shadow: none; }
:focus-visible { outline: 3px solid var(--oxford-navy); outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-200%); background: var(--honeydew); padding: 12px; z-index: 10; }
.skip-link:focus { transform: none; }
footer { border-top: 2px dotted var(--cerulean); margin-top: 28px; padding-top: 16px; text-align: center; }
.visitor-counter { margin-top: 12px; }
.goal-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.goal-actions .hero-button { display: inline-block; padding: 10px 14px; border: 1px solid var(--oxford-navy); background: var(--honeydew); font-weight: 700; text-decoration: none; }
@media (max-width: 767.98px) {
  .panel-rail { width: 100%; }
  .content > main { width: 100%; }
}