/* ============================================================
   Polyhedron Modeling — BLUEPRINT direction
   Loads after site.css. Redefines the design tokens and adds the
   drafting devices this direction is built on. It deliberately does not
   restate component rules: if a component changes in site.css, both
   directions inherit the change.

   Contrast rule that shapes everything below:
   brand blue #0A2FFF on the dark ground is 2.4:1 and fails WCAG, so it is
   never used for text here. It appears only as a solid fill carrying white
   text. Every blue that has to be *read* is the #8597FF tint (6.6:1).
   ============================================================ */

:root{
  /* --- grounds ------------------------------------------------------- */
  --ground:#141A1E;          /* page ground: graphite, cooled and deepened */
  --ground-solid:#141A1E;
  --paper:#191F24;           /* alternating section ground */
  --panel:#1B2329;           /* cards, fields, table bodies */
  --panel-2:#1F272E;         /* a panel sitting on --paper, still separates */
  --header-bg:rgba(20,26,30,.92);
  --band-bg:#0E1316;
  --band-ink:#E8EDF2;
  --footer-bg:#101518;

  /* --- ink ----------------------------------------------------------- */
  --ink:#E8EDF2;             /* 14.9:1 — never pure white, easier on the eye */
  --muted:#A3B0B9;           /*  7.9:1 */
  --faint:#87949E;           /*  4.9:1 on the ground, 4.9:1 on the worst
                                surface (--panel-2). #7C8993 passed on the
                                ground but fell to 4.2:1 on nested panels. */

  /* --- rules --------------------------------------------------------- */
  --rule:#2B363E;            /* hairlines between panels */
  --rule-strong:#5A6E7C;     /* 3:1 — anything that must read as a boundary */
  --grid-line:#222C33;       /* the drafting grid itself */
  --grid-veil:none;

  /* --- accent -------------------------------------------------------- */
  --blue:#0A2FFF;            /* solid fills only, always under white text */
  --blue-hover:#2946FF;
  --error:#FF8A78;           /* 6.9:1 on --panel, 7.7:1 on --ground */
  --tint:#8597FF;            /* every blue that gets read */
  --blue-ink:#8597FF;        /* 6.6:1 — the single switch that keeps text,
                                focus rings and marks legible on the ground */
  --wash:#1A2242;
  --on-blue:#FFFFFF;

  /* --- plan illustrations -------------------------------------------- */
  --plan-bg:#1B2329;
  --plan-panel:#222B32;
  --plan-grid:#2A353D;
  --plan-wall:#C9D4DC;       /* walls go light: this is a negative print */
  --plan-mark:var(--blue-ink);
  --plan-room:#87949E;
  --plan-dim:#94A2AB;
}

/* The page ground is drafting paper. A 20px minor grid with a 100px major
   grid over it, both far below text contrast, carried across every page
   rather than confined to the hero as in the light direction. */
body{
  background-color:var(--ground);
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to right,var(--rule) 1px,transparent 1px),
    linear-gradient(to bottom,var(--rule) 1px,transparent 1px);
  background-size:20px 20px,20px 20px,100px 100px,100px 100px;
  background-position:-1px -1px;
}

/* Sections that carry running text sit on their own ground so the grid never
   competes with the paragraph behind it. */
.section,.page-hero,.band,.cta,.quote,.site-footer{position:relative}
.section::before,.page-hero::before{
  content:'';position:absolute;inset:0;background:var(--ground);opacity:.35;pointer-events:none;
}
.section--paper::before{background:var(--paper);opacity:.72}
.section > *,.page-hero > *{position:relative;z-index:1}

/* The hero keeps the grid fully visible: no text sits directly on it. */
.hero::before{opacity:.2}
.gridbg{background-image:none}

.site-footer{background:var(--footer-bg);border-top:1px solid var(--rule)}
.band{border-block:1px solid var(--rule-strong)}
.band::after{
  content:'';position:absolute;left:0;right:0;top:0;height:0;
  border-top:1px solid transparent;pointer-events:none;
}
.band .shell{position:relative}
/* start and end ticks, the way a dimension line is closed off */
.band .shell::before,.band .shell::after{
  content:'';position:absolute;top:-14px;width:1px;height:28px;background:var(--tint);opacity:.7;
}
.band .shell::before{left:var(--gut)}
.band .shell::after{right:var(--gut)}
.band .stat .k{color:var(--faint)}

/* --- drafting crop ticks -------------------------------------------------
   Every panel is marked at two opposing corners the way a drawing is
   trimmed. This is the detail that separates the direction from a plain
   dark theme, and it costs no markup. */
.card,.step-lg,.market,.flow div,.aside-box,.report,.reason,.svc-fig,.card-fig{
  position:relative;
}
.card::before,.step-lg::before,.market::before,.flow div::before,
.aside-box::before,.report::before,.reason::before,.svc-fig::before,.card-fig::before,
.card::after,.step-lg::after,.market::after,.flow div::after,
.aside-box::after,.report::after,.reason::after,.svc-fig::after,.card-fig::after{
  content:'';position:absolute;width:8px;height:8px;pointer-events:none;
  border-color:var(--tint);opacity:.5;
}
.card::before,.step-lg::before,.market::before,.flow div::before,
.aside-box::before,.report::before,.reason::before,.svc-fig::before,.card-fig::before{
  top:0;left:0;border-top:1px solid;border-left:1px solid;
}
.card::after,.step-lg::after,.market::after,.flow div::after,
.aside-box::after,.report::after,.reason::after,.svc-fig::after,.card-fig::after{
  bottom:0;right:0;border-bottom:1px solid;border-right:1px solid;
}

/* --- section heads open on a dimension line ------------------------------ */
.section-head{padding-top:28px}
.section-head::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule);
}
.section-head::after{
  content:'';position:absolute;top:-4px;left:0;width:1px;height:9px;background:var(--tint);
}
.section-head{position:relative}

/* --- accents that have to be read --------------------------------------- */
a:hover{color:#A8B6FF}
.svc-n{color:var(--rule-strong)}
.stat .v{color:var(--tint)}
.report thead th{background:var(--panel-2)}
.report td.n{color:var(--tint)}
a.card:hover{background:var(--wash)}

/* The one place the brand blue stays itself: a solid block under white text.
   Against a dark ground it reads far louder than it did against white, so it
   is the only saturated area on the page. */
.cta{background:var(--blue)}
.cta::before{opacity:.16}
.skip{background:var(--blue);color:#fff}

/* A graphite card has nowhere to go on a graphite ground, so the feature cell
   becomes the blue one — the only saturated block above the CTA. */
.reason--feature{background:var(--blue)}
.reason--feature .n{color:rgba(255,255,255,.85)}
.reason--feature .go{color:#fff}

/* --- illustrations ------------------------------------------------------ */
.svc-fig,.market .fig,.card-fig{background:var(--plan-panel);border-color:var(--rule)}
.plan-legend li{background:var(--panel)}

/* --- form --------------------------------------------------------------- */
.field input,.field select,.field textarea{color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field select option{background:var(--panel);color:var(--ink)}

/* --- version switcher (review aid) -------------------------------------- */