/* calc-kit.css — the shared calculator surface.
 *
 * Twenty calculators were built one page at a time, so the controls, the field, the
 * yearly/monthly basis switch, the result cards and the FAQ block were re-authored in each
 * page's inline <style>. They drifted: before this file existed the suite shipped five
 * different .seg bodies, four different .seg button paddings, five different .inputline
 * heights and two different .figure sizes for what is meant to be one control each, and a
 * fix had to be applied up to nineteen times to land everywhere.
 *
 * Every rule here is the body the majority of those pages already shipped, so adopting the
 * kit is a de-duplication rather than a redesign. A page that genuinely needs to differ
 * overrides in its own <style>, which still loads after this file.
 *
 * Cascade: this sheet must be linked AFTER /assets/mobile.css. mobile.css carries the
 * theme tokens (--ce-*), the one site header and footer, and the shared contrast overrides
 * (body .ctrl .hint, body .inputline .aff) at a higher specificity, so it wins either way,
 * but the page-level block that used to sit here loaded after mobile.css and the kit keeps
 * that position.
 *
 * Theme (2026-10, docs/design/THEME.md): every colour below is a --ce-* token from mobile.css.
 * The header and footer are NOT styled here: they are the shared chrome (scripts/markets/
 * chrome.mjs, stamped by scripts/growth/sync-chrome.mjs) and mobile.css owns them.
 */

/* ------------------------------------------------------------------------
   Legacy names
   The pages' own rules (and their scripts' inline styles) were written against these names.
   They are aliases of the theme tokens, so those rules follow the theme without a second copy
   of any colour. New rules use the --ce-* tokens directly.
     --navy        the selected / "this one" fill   -> primary
     --paper       a recessed area inside a card     -> surface-2
     --paper-raised a card                           -> surface
   ------------------------------------------------------------------------ */
:root {
  --navy:var(--ce-primary);
  --navy-soft:var(--ce-primary-hover);
  --blue:var(--ce-link);
  --blue-bright:var(--ce-cyan);
  --blue-ghost:var(--ce-info-bg);
  --paper:var(--ce-surface-2);
  --paper-raised:var(--ce-surface);
  --ink:var(--ce-ink);
  --ink-soft:var(--ce-muted);
  --ink-faint:var(--ce-dim);
  --rule:var(--ce-border);
  --amber:var(--ce-warn);
  --amber-soft:var(--ce-warn-bg);
  --good:var(--ce-good);
  --bad:var(--ce-bad);
}

/* ------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------ */
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--ce-bg);
  color:var(--ce-ink);
  font-family:var(--ce-font);
  -webkit-font-smoothing:antialiased;
}
/* A plain link takes the theme link colour (the UA default is a lavender on dark). :where() keeps
   this at the specificity of a bare `a`, so .crumbs a, .nextstep a and every page's own link rule
   still win. */
:where(main, .faqwrap, .disclaimer) a { color:var(--ce-link); }
:where(main, .faqwrap, .disclaimer) a:where(:hover) { color:var(--ce-link-hover); }

/* ------------------------------------------------------------------------
   Page top: breadcrumb, eyebrow, title and lede sit at the top of <main>, on the page
   background, 28px below the header, as on a city page. (They used to sit in a 250-273px
   dark band inside the header, which no other page had.)
   ------------------------------------------------------------------------ */
.pagehead { margin:0 0 28px; }
.crumbs {
  font-size:12px;
  line-height:1.5;
  color:var(--ce-dim);
  margin:0 0 18px;
}
.crumbs a { color:var(--ce-muted); }
.crumbs a:hover { color:var(--ce-ink); }
.crumbs .sep { margin:0 6px; color:var(--ce-dim); }
.crumbs [aria-current] { color:var(--ce-ink); }
.kicker {
  font-family:var(--ce-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ce-cyan);
  margin:0 0 14px;
}
.pagehead h1 {
  font:600 var(--ce-h1)/1.12 var(--ce-display);
  letter-spacing:-.02em;
  color:var(--ce-ink);
  margin:0;
}
.pagehead .tagline {
  margin:12px 0 0;
  font-size:16px;
  line-height:1.6;
  color:var(--ce-muted);
  max-width:64ch;
}

/* ------------------------------------------------------------------------
   Page layout: the one app frame (1160px, 24px gutters), so the inputs column starts at the
   header logo's left edge, as on every other app page.
   ------------------------------------------------------------------------ */
.wrap {
  max-width:var(--ce-frame);
  margin:0 auto;
  padding:28px var(--ce-gutter) 0;
}
.grid {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:24px;
  align-items:start;
}
.results {
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ------------------------------------------------------------------------
   Card surface
   ------------------------------------------------------------------------ */
.panel {
  background:var(--ce-surface);
  border:1px solid var(--ce-border);
  border-radius:var(--ce-radius);
  padding:6px 20px 18px;
}

/* ------------------------------------------------------------------------
   Controls
   ------------------------------------------------------------------------ */
.ctrl {
  padding:15px 0;
  border-bottom:1px solid var(--ce-border);
}
.ctrl:last-child { border-bottom:none; }
.ctrl > label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ce-ink);
  margin-bottom:8px;
}
.ctrl .hint {
  font-weight:400;
  color:var(--ce-dim);
  font-size:12px;
}
.seclabel {
  font-family:var(--ce-display);
  font-weight:600;
  font-size:13.5px;
  color:var(--ce-ink);
  margin:4px 0 2px;
}
.secnote {
  font-size:11.5px;
  color:var(--ce-muted);
  line-height:1.5;
  margin:0 0 2px;
}
.fineprint {
  font-size:11.5px;
  color:var(--ce-muted);
  margin-top:8px;
  line-height:1.5;
}

/* ------------------------------------------------------------------------
   The field: a raised well with a >= 3:1 boundary (WCAG 1.4.11), on every card.
   ------------------------------------------------------------------------ */
.inputline {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--ce-border-input);
  border-radius:var(--ce-radius-sm);
  padding:10px 13px;
  background:var(--ce-surface-2);
  transition:border-color .14s,box-shadow .14s;
}
.inputline:hover:not(:focus-within) { border-color:var(--ce-dim); }
.inputline:focus-within {
  border-color:var(--ce-focus);
  box-shadow:0 0 0 1px var(--ce-focus),0 0 0 4px var(--ce-info-bg);
}
.inputline input {
  border:none;
  outline:none;
  background:transparent;
  font-family:var(--ce-mono);
  font-size:15.5px;
  color:var(--ce-ink);
  width:100%;
  text-align:right;
}
.inputline input::placeholder { color:var(--ce-dim); opacity:1; }
.inputline input:disabled { color:var(--ce-dim); }
.inputline .aff {
  font-family:var(--ce-mono);
  color:var(--ce-dim);
  font-size:14px;
  white-space:nowrap;
}
.derived {
  font-size:11.5px;
  color:var(--ce-dim);
  margin-top:6px;
  font-family:var(--ce-mono);
  line-height:1.5;
  /* Matches line-height (1.5), not 1em: at 1em the reserved box was shorter than the real line
     box once syncDerived() fills it in, so every .ctrl field below the first populated one still
     shifted down by the difference on load. */
  min-height:1.5em;
}
.derived b {
  color:var(--ce-link);
  font-weight:600;
}

/* ------------------------------------------------------------------------
   The basis switch (yearly / monthly): a raised track, the chosen basis in primary.
   ------------------------------------------------------------------------ */
.seg {
  display:inline-flex;
  gap:3px;
  background:var(--ce-surface-2);
  border:1px solid var(--ce-border-input);
  border-radius:var(--ce-radius-sm);
  padding:3px;
  flex-shrink:0;
}
.seg button {
  appearance:none;
  border:none;
  background:transparent;
  font-family:var(--ce-font);
  font-size:12px;
  color:var(--ce-muted);
  padding:6px 9px;
  border-radius:6px;
  cursor:pointer;
  transition:.14s;
  white-space:nowrap;
  line-height:1;
}
.seg button[aria-pressed="true"] {
  background:var(--ce-primary);
  color:var(--ce-primary-ink);
  font-weight:600;
}
.seg button:hover:not([aria-pressed="true"]) { color:var(--ce-ink); }
.seg button:focus-visible {
  outline:3px solid var(--ce-focus);
  outline-offset:2px;
}

/* ------------------------------------------------------------------------
   Chips and pills: raised, the chosen one in primary.
   ------------------------------------------------------------------------ */
.chips button {
  appearance:none;
  border:1px solid var(--ce-border-strong);
  background:var(--ce-surface-2);
  color:var(--ce-muted);
}
.chips button:hover { border-color:var(--ce-link); color:var(--ce-ink); }
.chips button.selected,
.chips button[aria-pressed="true"] {
  background:var(--ce-primary);
  border-color:var(--ce-primary);
  color:var(--ce-primary-ink);
}

/* ------------------------------------------------------------------------
   The answer
   ------------------------------------------------------------------------ */
.headline {
  background:var(--ce-surface);
  border:1px solid var(--ce-border);
  border-radius:var(--ce-radius);
  padding:20px 24px;
}
.hl-label {
  font-family:var(--ce-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ce-muted);
}
.figure {
  font-family:var(--ce-mono);
  font-weight:600;
  font-size:40px;
  line-height:1.04;
  color:var(--ce-warn);
  cursor:pointer;
  display:inline-block;
  border-bottom:2px dashed color-mix(in srgb,var(--ce-warn) 45%,transparent);
  margin-top:4px;
  font-feature-settings:'tnum' 1;
  transition:background .14s,border-color .14s;
}
.figure:hover { background:var(--ce-warn-bg); }
.figure:focus-visible {
  outline:3px solid var(--ce-focus);
  outline-offset:3px;
}
.permo {
  font-family:var(--ce-mono);
  font-size:15px;
  color:var(--ce-dim);
}
.showwork {
  background:none;
  border:none;
  color:var(--ce-link);
  font-size:12px;
  cursor:pointer;
  padding:8px 0 0;
  /* 12px text + 8px top padding rendered 22-23px tall, under the 24px WCAG 2.5.8 (AA) target size. */
  min-height:24px;
  text-decoration:underline;
  text-underline-offset:2px;
}
.showwork:hover { color:var(--ce-link-hover); }
.showwork:focus-visible {
  outline:3px solid var(--ce-focus);
  outline-offset:2px;
}
.trace {
  margin-top:6px;
  padding:14px 16px;
  background:var(--ce-surface-2);
  border:1px solid var(--ce-border);
  border-radius:var(--ce-radius-sm);
  font-family:var(--ce-mono);
  font-size:12.5px;
  color:var(--ce-muted);
  line-height:1.7;
  display:none;
}
.trace.open { display:block; }
.trace b { color:var(--ce-ink); }
.feq {
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--ce-border);
}
.feq-l {
  color:var(--ce-ink);
  font-size:14px;
  letter-spacing:.01em;
  margin-bottom:6px;
  white-space:nowrap;
  overflow-x:auto;
}
.feq-v {
  font-size:12px;
  color:var(--ce-muted);
  margin-bottom:6px;
  line-height:1.9;
}
.feq-fv,.feq-fv b {
  color:var(--ce-warn);
  font-weight:600;
  font-size:15px;
}

/* ------------------------------------------------------------------------
   Breakdown
   ------------------------------------------------------------------------ */
.breakdown {
  background:var(--ce-surface);
  border:1px solid var(--ce-border);
  border-radius:var(--ce-radius);
  padding:18px 24px;
}
.bd-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid var(--ce-border);
  font-size:14px;
  gap:14px;
}
.bd-row:last-child { border-bottom:none; }
.bd-row .k { color:var(--ce-muted); }
.bd-row .v {
  font-family:var(--ce-mono);
  font-weight:500;
  font-feature-settings:'tnum' 1;
  text-align:right;
  color:var(--ce-ink);
}

/* ------------------------------------------------------------------------
   Sensitivity table: a raised head with mono labels, rows divided by the border token.
   ------------------------------------------------------------------------ */
.senscard {
  background:var(--ce-surface);
  border:1px solid var(--ce-border);
  border-radius:var(--ce-radius);
  padding:18px 24px;
}
.sens-title {
  font-family:var(--ce-display);
  font-weight:600;
  font-size:14px;
  color:var(--ce-ink);
}
.sens-note {
  font-size:12px;
  color:var(--ce-muted);
  margin:2px 0 10px;
}
.senstable {
  width:100%;
  border-collapse:collapse;
  font-family:var(--ce-mono);
  font-size:13px;
}
.senstable th {
  text-align:left;
  font-family:var(--ce-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ce-dim);
  background:var(--ce-surface-2);
  padding:7px 8px;
  border-bottom:1px solid var(--ce-border);
}
.senstable th:last-child,.senstable td:last-child { text-align:right; }
.senstable td {
  padding:8px;
  border-bottom:1px solid var(--ce-border);
  color:var(--ce-muted);
  font-feature-settings:'tnum' 1;
}
.senstable tr:last-child td { border-bottom:none; }
.senstable tbody tr { transition:background .12s; }
.senstable tbody tr:hover { background:var(--ce-surface-2); }
.senstable tr.current td {
  color:var(--ce-ink);
  font-weight:600;
  background:var(--ce-warn-bg);
}
.senstable tr.current td:first-child {
  border-radius:6px 0 0 6px;
  box-shadow:inset 3px 0 0 var(--ce-warn);
}
.senstable tr.current td:last-child { border-radius:0 6px 6px 0; }
.senstable tr.current:hover { background:transparent; }

/* ------------------------------------------------------------------------
   Secondary buttons: transparent with a strong outline (THEME.md "Secondary").
   ------------------------------------------------------------------------ */
.csvbtn {
  appearance:none;
  border:1px solid var(--ce-border-strong);
  background:transparent;
  color:var(--ce-ink);
  font-family:var(--ce-font);
  font-size:13px;
  font-weight:500;
  padding:11px 16px;
  border-radius:var(--ce-radius-sm);
  cursor:pointer;
  transition:.14s;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  margin-right:8px;
  text-decoration:none;
}
.csvbtn:hover {
  border-color:var(--ce-link);
  background:var(--ce-surface-2);
  color:var(--ce-ink);
}
.csvbtn:active { transform:translateY(1px); }
.csvbtn:focus-visible {
  outline:3px solid var(--ce-focus);
  outline-offset:2px;
}

/* ------------------------------------------------------------------------
   Next step
   ------------------------------------------------------------------------ */
.nextstep {
  background:var(--ce-surface);
  border:1px solid var(--ce-border);
  border-radius:var(--ce-radius);
  padding:16px 20px;
  margin-top:14px;
}
.nextstep .ns-l {
  font-family:var(--ce-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ce-cyan);
}
.nextstep p {
  margin:6px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--ce-muted);
}
.nextstep a {
  color:var(--ce-link);
  font-weight:600;
}
.nextstep a:hover { color:var(--ce-link-hover); }

/* ------------------------------------------------------------------------
   On-page FAQ
   ------------------------------------------------------------------------ */
.faqwrap {
  max-width:var(--ce-frame);
  margin:48px auto 0;
  padding:0 var(--ce-gutter);
}
.faq-title {
  font:600 var(--ce-h2)/1.25 var(--ce-display);
  color:var(--ce-ink);
  margin:0 0 14px;
}
.faqitem {
  background:var(--ce-surface);
  border:1px solid var(--ce-border);
  border-radius:12px;
  margin-bottom:10px;
}
.faqitem summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 18px;
  font-family:var(--ce-display);
  font-weight:600;
  font-size:15px;
  color:var(--ce-ink);
  transition:color .14s;
}
.faqitem summary::-webkit-details-marker { display:none; }
.faqitem summary::after {
  content:"+";
  font-family:var(--ce-mono);
  font-size:17px;
  color:var(--ce-dim);
  transition:transform .18s;
  flex-shrink:0;
}
.faqitem[open] summary::after {
  transform:rotate(45deg);
  color:var(--ce-link);
}
.faqitem summary:hover { color:var(--ce-link-hover); }
.faqitem summary:focus-visible {
  outline:3px solid var(--ce-focus);
  outline-offset:2px;
  border-radius:12px;
}
.faqitem p {
  margin:0;
  padding:0 18px 16px;
  font-size:14px;
  line-height:1.65;
  color:var(--ce-muted);
  max-width:75ch;
}
.disclaimer {
  max-width:var(--ce-frame);
  margin:18px auto 0;
  padding:0 var(--ce-gutter);
  font-size:11.5px;
  color:var(--ce-dim);
  line-height:1.6;
}

/* ------------------------------------------------------------------------
   Related calculators
   ------------------------------------------------------------------------ */
.relrow {
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--ce-border);
  font-size:13px;
  color:var(--ce-muted);
  line-height:1.7;
}
.relrow .rel-l { font-weight:600; color:var(--ce-ink); }
.relrow a {
  color:var(--ce-link);
  font-weight:600;
  text-decoration:none;
}
.relrow a:hover { color:var(--ce-link-hover); text-decoration:underline; }

/* ------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */
@media (max-width:880px) {
  .grid { grid-template-columns:1fr; }
  .figure { font-size:32px; }
}
/* On a phone a long formula wraps instead of becoming a horizontal scroll box: a scroll region
   with no focusable content cannot be scrolled from the keyboard (axe scrollable-region-focusable). */
@media (max-width:640px) {
  .feq-l { white-space:normal; overflow-wrap:anywhere; overflow-x:visible; }
}

/* ------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------ */
@keyframes rise {
  from { transform:translateY(10px); }
  to { transform:none; }
}
@media (prefers-reduced-motion:no-preference) {
  .panel,.results>*,.faqwrap { animation:rise .5s cubic-bezier(.2,.7,.3,1) both; }
  .panel { animation-delay:.04s; }
  .results>*:nth-child(1) { animation-delay:.06s; }
  .results>*:nth-child(2) { animation-delay:.12s; }
  .results>*:nth-child(3) { animation-delay:.18s; }
  .results>*:nth-child(4) { animation-delay:.24s; }
  .faqwrap { animation-delay:.3s; }
}
@media (prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    animation:none!important;
  }
}

/* ------------------------------------------------------------------------
   One control, one geometry
   The two rules below are the whole point of the kit: each replaces a fix
   that would otherwise have to be made on nineteen pages.

   Measured in Edge on origin/main before the kit existed, across all 19
   calculators at BOTH 320px and 390px, after `document.fonts.ready` and with
   every <details> forced open (498 visible switches):
     .seg button  shipped FOUR paddings (6px 9px, 6px 11px, 8px 4px, 9px 8px)
                  and rendered at THREE heights: 24px, 30.5px and 31px. The
                  24px ones sit exactly ON the WCAG 2.5.8 (AA) 24x24
                  target-size floor with nothing in hand. NONE measured under
                  it: zero of 498. A min-height lifts every basis switch clear
                  of the floor in one place, so the AA minimum stops being
                  something the layout happens to land on.
     .inputline   rendered at SEVEN heights (35, 39, 41, 42, 42.4, 45, 58px)
                  from four paddings, for what is meant to be one field. A
                  min-height gives the field one floor and takes every input
                  row to a 44px touch target.

   Re-measured the same way AFTER the kit, which is the evidence that matters:
     .seg button  24, 28, 30.5px. The 28px is the rule doing its job on the 17
                  adopters; the 24px that remain are cap-rate and
                  market-negotiation-plan, which have not adopted the kit.
     .inputline   42.4, 44, 45px - down from seven heights to three, and every
                  adopter's input row now clears the 44px touch target.

   An earlier revision of this comment claimed two .seg heights, five
   .inputline heights (36, 41, 42, 45, 56 - of which 36 and 56 occur nowhere)
   and that the kit took switches "under the AA floor from 4 to 0". None of
   those reproduce. The likely cause is measuring before the webfonts settled;
   a first harness pass here produced exactly that artifact. The drift being
   described is real and both rules are justified by the numbers above - but
   they are justified by switches sitting ON the floor with zero margin, not
   under it, and by seven field heights collapsing to three.

   min-height rather than a fixed height: a field or a switch that genuinely
   needs to be taller (a two-line label, a larger control) still grows.
   ------------------------------------------------------------------------ */
.seg button {
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.inputline { min-height:44px; }
/* The <input> fills the field's full height. The focus ring is .inputline:focus-within (above), but
   with the row's vertical padding on the wrapper the input sat centred ~12px inside that ring, so
   the focused element's own box was nowhere near the indicator that marks it: a keyboard audit
   measuring around the focused control saw nothing change on an empty field (populated money
   fields only appeared to pass because focus strips their thousands separators), and a tap on
   the top or bottom 12px of the visible field focused nothing at all. The vertical padding now
   lives inside the input, so the whole field is the target and its border is the focused
   control's edge. Rendered heights are unchanged: the 44px floor above sets the row either way.
   !important because several pages restate .inputline padding at higher specificity
   (.mc-col .inputline, .minirow .inputline, ...); their horizontal padding is left alone. */
.inputline { padding-top:0!important; padding-bottom:0!important; }
.inputline > :is(input, select) { align-self:stretch; }
/* Native visibility wins over badge, segmented-control and verdict layouts. */
main [hidden], .ce-validation-summary[hidden] { display:none!important; }
body.ce-calculator-invalid main :is(.results,.result-block)>:not(.ce-validation-summary){display:none!important}
.ce-validation-summary{padding:22px;border:1px solid var(--ce-warn);border-left-width:4px;border-radius:12px;background:var(--ce-surface);color:var(--ce-ink);}
.ce-validation-summary h2{font-size:20px;margin:0 0 10px;color:var(--ce-ink)}
.ce-validation-summary a,.ce-field-error{color:var(--ce-warn)}
.ce-field-error{font-size:12px;line-height:1.5;margin:6px 0}
[aria-invalid="true"]{outline:2px solid var(--ce-warn);outline-offset:3px}
main .seg button,main .chips button,main .chip{min-width:44px;min-height:44px;}
main .costline{flex-wrap:wrap;gap:6px}
/* At <=960px assets/site-ux.js pins a .ce-calc-dock to the bottom of every calculator (58px tall,
   12px up, so its top edge sits ~70px above the viewport bottom) and tags <body> with
   .ce-has-calc-dock. Without a matching scroll-padding, keyboard focus scrolled fields into view
   UNDER the dock: tabbing through cap-rate left 21 stops completely hidden (WCAG 2.4.11 Focus Not
   Obscured). 96px clears the dock with room for the focus ring. The search dialog and the open
   site menu reset scroll-padding to 0 in mobile.css; this rule stands aside in both states. */
@media (max-width:960px) {
  html:not(.site-menu-lock):not(:has(.ce-search-dialog[open])):has(body.ce-has-calc-dock) {
    scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------------------
   Print stays light (THEME.md): white paper, dark ink. Redefining the tokens is enough, since
   every rule above and every page rule reads them.
   ------------------------------------------------------------------------ */
@media print {
  :root {
    color-scheme:light;
    --ce-bg:#fff; --ce-bg-deep:#fff; --ce-chrome:#fff; --ce-surface:#fff; --ce-surface-2:#fff; --ce-surface-3:#f2f2f2;
    --ce-border:#ccc; --ce-border-strong:#999; --ce-border-input:#999;
    --ce-ink:#111; --ce-muted:#333; --ce-dim:#555; --ce-link:#111; --ce-link-hover:#111; --ce-cyan:#333;
    --ce-primary:#ddd; --ce-primary-ink:#111; --ce-warn:#7a4a0f; --ce-good:#1d5e3f; --ce-bad:#8c302b;
    --ce-good-bg:transparent; --ce-bad-bg:transparent; --ce-warn-bg:transparent; --ce-info-bg:transparent;
  }
  html, body { background:#fff; color:#111; }
  .ce-validation-summary { color:#111; background:#fff; }
}