/* ============================================================
   THEME CONFIGURATION
   To change the entire site's color scheme, modify ONLY the
   variables below. No other changes needed.
   ============================================================
   Current theme: "Santa's Cloak"
   Santa's classic red and white — warm, inviting, professional
   but distinctly Santa. Rich cloak red primary, snow/ice
   secondary tones, charcoal text on light backgrounds, white
   text on dark/red backgrounds.
   ============================================================ */

:root {
  /* ---------- Primary (Santa cloak reds) ---------- */
  --color-primary:        #b01e24;  /* rich Santa red — main brand color */
  --color-primary-dark:   #7f1218;  /* darker red — hovers, headers, emphasis */
  --color-primary-darker: #5c0d11;  /* deepest red — nav, footer, hero base */
  --color-primary-light:  #fbe9ea;  /* light red tint — subtle backgrounds */
  --color-primary-bright: #d43a41;  /* brighter red — accents on dark red */

  /* ---------- Secondary (white / snow) ---------- */
  --color-secondary:      #ffffff;  /* pure snow white */
  --color-snow:           #f4f7fa;  /* soft snow — alt section background */
  --color-snow-dim:       #e8eef4;  /* dimmer snow — borders on light, icon tiles */

  /* ---------- Accent (ice / gold) ---------- */
  --color-accent:         #a8d0e6;  /* ice blue — links/accents on dark red */
  --color-accent-deep:    #5b8fa8;  /* deeper ice — small accents on light */
  --color-accent-gold:    #e3b23c;  /* warm gold — festive highlights, badges */
  --color-accent-gold-dark:#9c7414; /* dark gold — gold text on light bg */

  /* ---------- Text ---------- */
  --color-text-dark:      #2b2f33;  /* dark charcoal — main body text */
  --color-text-muted:     #5a636b;  /* muted charcoal — secondary text */
  --color-text-faint:     #8b959d;  /* faint gray — captions, separators */
  --color-text-light:     #ffffff;  /* white — text on dark/red backgrounds */
  --color-text-light-dim: rgba(255,255,255,.78); /* dimmed white on dark/red */

  /* ---------- Backgrounds ---------- */
  --color-bg-main:        #fdfbf8;  /* page background — warm snow paper */
  --color-bg-card:        #ffffff;  /* card / section backgrounds */
  --color-bg-hero:        #7f1218;  /* hero base (used in gradients below) */
  --color-bg-dark:        #5c0d11;  /* nav, footer, code blocks */
  --color-bg-alt:         #f4f7fa;  /* alternating sections (snow) */
  --color-bg-wash:        #fbe9ea;  /* light red wash sections */

  /* ---------- Borders ---------- */
  --color-border:         #e3e7eb;  /* default borders on light */
  --color-border-strong:  #c9d1d8;  /* stronger borders */
  --color-border-light:   rgba(255,255,255,.25); /* borders on dark/red */

  /* ---------- Shadows ---------- */
  --color-shadow:         rgba(92,13,17,.10);   /* shadow tint (deep red) */
  --shadow-sm: 0 1px 2px var(--color-shadow), 0 1px 3px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow), 0 2px 4px rgba(92,13,17,.06);
  --shadow-lg: 0 12px 32px rgba(92,13,17,.16), 0 4px 8px rgba(92,13,17,.08);

  /* ---------- Semantic / status tints ---------- */
  --color-info:           #3a6ea5;  /* informational blue */
  --color-info-bg:        #e9f1f8;
  --color-success:        #2e7d4f;  /* pine green (kept for "good" states) */
  --color-success-bg:     #e9f4ec;
  --color-warning:        #9c7414;  /* dark gold */
  --color-warning-bg:     #faf3e0;
  --color-danger:         #b01e24;  /* same family as primary red */
  --color-danger-bg:      #fbe9ea;
  --color-purple:         #6b4a8f;
  --color-purple-bg:      #f2ecf8;
  --color-teal:           #22706b;
  --color-teal-bg:        #e7f4f2;

  /* ---------- Maturity scale (level 1 → 5 progression) ---------- */
  --color-level-1:        #d98a7a;  /* pale clay red */
  --color-level-2:        #d45d58;  /* mid red */
  --color-level-3:        #b01e24;  /* primary red */
  --color-level-4:        #7f1218;  /* dark red */
  --color-level-5:        #5c0d11;  /* deepest red */

  /* ---------- Code block palette (on dark red) ---------- */
  --color-code-bg:        #5c0d11;
  --color-code-border:    #7f1218;
  --color-code-text:      #f3dede;
  --color-code-key:       #a8d0e6;  /* ice blue keys */
  --color-code-str:       #f2c14e;  /* warm gold strings */
  --color-code-com:       #c08a8e;  /* muted rose comments */

  /* ---------- Hero / pagehead gradient layers ---------- */
  --gradient-hero:
    radial-gradient(1200px 500px at 80% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 420px at 10% 110%, rgba(168,208,230,.18), transparent 60%),
    linear-gradient(160deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  --gradient-pagehead:
    radial-gradient(900px 380px at 85% -20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(150deg, var(--color-primary-darker), var(--color-primary));
  --hero-dots: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);

  /* ---------- Snow effect ---------- */
  --color-snowflake:      rgba(255,255,255,.75);

  /* ---------- Overlays (white-on-dark tints & accent tints) ---------- */
  --overlay-white-soft:   rgba(255,255,255,.06);  /* faintest white wash on dark */
  --overlay-white-hover:  rgba(255,255,255,.10);  /* hover wash on dark */
  --overlay-white-active: rgba(255,255,255,.12);  /* active wash on dark */
  --overlay-white-line:   rgba(255,255,255,.12);  /* hairline on dark */
  --overlay-white-text:   rgba(255,255,255,.85);  /* high-emphasis white text */
  --overlay-white-bread:  rgba(255,255,255,.6);   /* breadcrumb white on dark */
  --overlay-white-faint:  rgba(255,255,255,.5);   /* faint white text */
  --overlay-white-sep:    rgba(255,255,255,.4);   /* separators on dark */
  --overlay-accent-line:  rgba(168,208,230,.45);  /* ice accent border on dark */
  --overlay-accent-bg:    rgba(168,208,230,.10);  /* ice accent tint on dark */

  /* ---------- Layout tokens (not colors — safe to leave) ---------- */
  --np-radius: 10px;
  --np-radius-lg: 16px;
  --np-maxw: 1200px;
}

/* ============================================================
   BASE
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text-dark);
  background: var(--color-bg-main);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--color-primary-dark);
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1rem; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

code, pre, .mono {
  font-family: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .92em;
}

.container {
  max-width: var(--np-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.container-wide {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   TOP NAVIGATION
   ============================================================ */
.np-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-dark);
  border-bottom: 3px solid var(--color-accent-gold);
  box-shadow: var(--shadow-md);
}

.np-nav-inner {
  max-width: var(--np-maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.np-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-light);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-decoration: none;
}
.np-brand:hover { text-decoration: none; color: var(--color-accent-gold); }

.np-brand-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--color-primary-bright), var(--color-primary-dark) 70%);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-light);
  font-weight: 800;
  /* "1NE" is three characters in a 36px disc, so it needs to sit tighter
     and smaller than the two-character mark it replaced. */
  font-size: .72rem;
  letter-spacing: -.01em;
  box-shadow: inset 0 0 0 2px var(--color-border-light);
  flex-shrink: 0;
}

.np-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}

.np-nav-links a {
  color: var(--color-text-light-dim);
  font-size: .92rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.np-nav-links a:hover { background: var(--overlay-white-hover); color: var(--color-text-light); text-decoration: none; }
.np-nav-links a.active { color: var(--color-accent-gold); background: var(--overlay-white-soft); }

.np-nav-cta {
  border: 1px solid var(--color-accent-gold) !important;
  color: var(--color-accent-gold) !important;
}
.np-nav-cta:hover { background: var(--color-accent-gold) !important; color: var(--color-primary-darker) !important; }

.np-nav-toggle {
  display: none;
  background: none; border: 1px solid var(--color-border-light);
  color: var(--color-text-light); border-radius: 6px; padding: 6px 10px;
  font-size: 1.1rem; cursor: pointer;
}

@media (max-width: 760px) {
  .np-nav-toggle { display: block; }
  .np-nav-links {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--color-bg-dark);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 18px;
    gap: 2px;
    border-bottom: 3px solid var(--color-accent-gold);
  }
  .np-nav-links.open { display: flex; }
  .np-nav-links a { padding: 12px 10px; }
}

/* ============================================================
   HERO
   ============================================================ */
.np-hero {
  background: var(--gradient-hero);
  color: var(--color-text-light);
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}

.np-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-dots);
  background-size: 26px 26px;
  opacity: .18;
  pointer-events: none;
}

.np-hero .container { position: relative; z-index: 1; }

.np-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--overlay-accent-line);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  background: var(--overlay-accent-bg);
}

.np-hero h1 { color: var(--color-text-light); max-width: 18ch; }
.np-hero p.lede {
  font-size: 1.15rem;
  color: var(--overlay-white-text);
  max-width: 62ch;
  margin-bottom: 0;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.np-section { padding: 72px 0; }
.np-section.tight { padding: 48px 0; }
.np-section.alt { background: var(--color-bg-alt); }
.np-section.greenwash { background: var(--color-bg-wash); }

.np-section-head { max-width: 760px; margin-bottom: 40px; }
.np-section-head .kicker {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px;
}
.np-section-head p { color: var(--color-text-muted); font-size: 1.05rem; }

/* Standalone kicker (replaces former inline-styled kickers) */
.kicker {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px;
}

/* ============================================================
   CARDS
   ============================================================ */
.np-grid { display: grid; gap: 24px; }
.np-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.np-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.np-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .np-grid.cols-3, .np-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .np-grid.cols-2, .np-grid.cols-3, .np-grid.cols-4 { grid-template-columns: 1fr; }
}

.np-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--np-radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.np-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}
.np-card h3 { margin-bottom: 8px; }
.np-card p { color: var(--color-text-muted); font-size: .96rem; flex-grow: 1; }

.np-card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.np-card-link {
  font-weight: 600;
  font-size: .92rem;
  color: var(--color-primary);
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.np-card-link::after { content: "→"; transition: transform .15s ease; }
.np-card:hover .np-card-link::after { transform: translateX(4px); }

/* Path cards on home */
.np-path-card {
  position: relative;
  border-top: 4px solid var(--color-primary);
  padding: 36px 32px;
}
.np-path-card .badge {
  position: absolute; top: -14px; left: 28px;
  background: var(--color-primary); color: var(--color-text-light);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* Buttons use the same pressable construction as the tiles: a gradient face
   sitting on a solid edge that gives it thickness, and a press that travels
   exactly the height of that edge. Only the shape differs — a tile is a
   destination you tap, a button is an action in a line of copy. Keep the two
   in step: change the model here and in the TILES block together. */
.np-btn {
  --btn-lift: 4px;
  --btn-cast: rgba(43,47,51,.22);
  /* A hairline ring, so a pale button keeps its edge when it sits on a white
     card rather than on the snow page ground. */
  --btn-ring: transparent;
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .95rem;
  padding: 12px 22px; border-radius: 14px;
  border: 0;
  cursor: pointer; text-decoration: none;
  background: var(--btn-face);
  color: var(--btn-ink);
  box-shadow:
    inset 0 0 0 1px var(--btn-ring),
    inset 0 1px 0 var(--btn-gloss),
    0 var(--btn-lift) 0 var(--btn-edge),
    0 calc(var(--btn-lift) + 6px) 12px var(--btn-cast);
  transition: transform .13s ease, box-shadow .13s ease, background .13s ease;
}

.np-btn:hover,
.np-btn:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px var(--btn-ring),
    inset 0 1px 0 var(--btn-gloss),
    0 calc(var(--btn-lift) + 1px) 0 var(--btn-edge),
    0 calc(var(--btn-lift) + 9px) 16px var(--btn-cast);
}

.np-btn:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 3px;
}

.np-btn:active:not([disabled]) {
  transform: translateY(var(--btn-lift));
  box-shadow:
    inset 0 0 0 1px var(--btn-ring),
    inset 0 1px 0 var(--btn-gloss),
    0 0 0 var(--btn-edge),
    0 2px 5px var(--btn-cast);
}

/* A disabled control has nothing to press, so it loses its thickness too. */
.np-btn[disabled],
.np-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
  box-shadow: inset 0 0 0 1px var(--btn-edge);
}

.np-btn-primary {
  --btn-face: linear-gradient(168deg, #c8323a 0%, var(--color-primary) 46%, #97181f 100%);
  --btn-edge: #660e13;
  --btn-gloss: rgba(255,255,255,.26);
  --btn-ink: var(--color-text-light);
}
.np-btn-primary:hover { color: var(--color-text-light); }

.np-btn-gold {
  --btn-face: linear-gradient(168deg, #f0c95a 0%, var(--color-accent-gold) 52%, #c8992c 100%);
  --btn-edge: #9a7420;
  --btn-gloss: rgba(255,255,255,.62);
  --btn-ink: var(--color-primary-darker);
}
.np-btn-gold:hover { color: var(--color-primary-darker); }

/* The secondary action. It was a hairline outline on nothing; it is now the
   same frost face as the reference tiles so it reads as pressable too. */
.np-btn-outline {
  --btn-face: linear-gradient(168deg, #ffffff 0%, #f7f9fb 55%, #e9eef4 100%);
  --btn-edge: #b3bfcc;
  --btn-gloss: rgba(255,255,255,.95);
  --btn-ring: rgba(176,30,36,.30);
  --btn-ink: var(--color-primary-dark);
}
.np-btn-outline:hover { color: var(--color-primary-dark); }

/* For use on the dark hero/footer grounds, where a white face would shout. */
.np-btn-ghost-light {
  --btn-face: linear-gradient(168deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.11) 100%);
  --btn-edge: rgba(0,0,0,.34);
  --btn-gloss: rgba(255,255,255,.34);
  --btn-ink: var(--color-text-light);
  --btn-cast: rgba(0,0,0,.32);
}
.np-btn-ghost-light:hover { color: var(--color-text-light); }

@media (prefers-reduced-motion: reduce) {
  .np-btn { transition: box-shadow .13s ease, background .13s ease; }
  .np-btn:hover, .np-btn:focus-visible, .np-btn:active { transform: none; }
}

/* ============================================================
   TABLES
   ============================================================ */
.np-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--np-radius);
  box-shadow: var(--shadow-sm);
  background: var(--color-bg-card);
  margin: 20px 0 28px;
}
table.np-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 640px;
}
.np-table th {
  background: var(--color-primary-dark);
  color: var(--color-text-light);
  text-align: left;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 16px;
  white-space: nowrap;
}
.np-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text-muted);
}
.np-table tr:nth-child(even) td { background: var(--color-snow); }
.np-table tr:hover td { background: var(--color-primary-light); }
.np-table td strong { color: var(--color-text-dark); }
.np-table .rowhead { font-weight: 600; color: var(--color-primary-dark); white-space: nowrap; }

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.np-pill {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.np-pill.green { background: var(--color-primary-light); color: var(--color-primary-dark); }
.np-pill.gold { background: var(--color-warning-bg); color: var(--color-accent-gold-dark); }
.np-pill.red { background: var(--color-danger-bg); color: var(--color-danger); }
.np-pill.blue { background: var(--color-info-bg); color: var(--color-info); }
.np-pill.grey { background: var(--color-snow-dim); color: var(--color-text-muted); }

/* Maturity level dots */
.np-level { display: inline-flex; gap: 4px; align-items: center; }
.np-level i {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-snow-dim); display: inline-block;
  border: 1px solid var(--color-border-strong);
}
.np-level i.on { background: var(--color-primary); border-color: var(--color-primary-dark); }

/* ============================================================
   CALLOUTS
   ============================================================ */
.np-callout {
  border-left: 4px solid var(--color-accent-gold);
  background: var(--color-warning-bg);
  border-radius: 0 var(--np-radius) var(--np-radius) 0;
  padding: 18px 22px;
  margin: 24px 0;
  font-size: .95rem;
}
.np-callout.green { border-color: var(--color-primary); background: var(--color-primary-light); }
.np-callout.red { border-color: var(--color-danger); background: var(--color-danger-bg); }
.np-callout.blue { border-color: var(--color-info); background: var(--color-info-bg); }
.np-callout strong { color: var(--color-text-dark); }
.np-callout p:last-child { margin-bottom: 0; }

/* ============================================================
   BLOCKQUOTE
   ============================================================ */
blockquote.np-quote {
  margin: 28px 0;
  padding: 24px 30px;
  background: var(--color-bg-card);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--np-radius) var(--np-radius) 0;
  box-shadow: var(--shadow-sm);
  font-family: Georgia, serif;
  font-size: 1.08rem;
  color: var(--color-primary-dark);
  font-style: italic;
}

/* Quote attribution (replaces former inline-styled divs) */
.np-quote-attr {
  font-size: .85rem;
  font-style: normal;
  color: var(--color-text-muted);
  margin-top: 10px;
  font-family: Inter, sans-serif;
}

/* ============================================================
   FLOW / PIPELINE DIAGRAM
   ============================================================ */
.np-flow {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  margin: 28px 0;
}
.np-flow-step {
  flex: 1 1 150px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--np-radius);
  padding: 18px 16px;
  margin: 6px 14px 6px 0;
  position: relative;
  box-shadow: var(--shadow-sm);
  min-width: 150px;
}
.np-flow-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -16px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent-gold-dark);
  font-weight: 800;
  font-size: 1.1rem;
  z-index: 2;
}
.np-flow-step .step-num {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  color: var(--color-accent-gold-dark); text-transform: uppercase;
  display: block; margin-bottom: 6px;
}
.np-flow-step h4 { font-size: .98rem; margin-bottom: 6px; }
.np-flow-step p { font-size: .82rem; color: var(--color-text-muted); margin: 0; }
.np-flow-step.ai {
  border-top-color: var(--color-accent-gold);
  background: linear-gradient(180deg, var(--color-warning-bg), var(--color-bg-card));
}
.np-flow-step.ai .step-num { color: var(--color-accent-gold-dark); }
.np-flow-step.ai .step-num::before { content: "✦ "; }

@media (max-width: 900px) {
  .np-flow { flex-direction: column; }
  .np-flow-step { margin-right: 0; }
  .np-flow-step:not(:last-child)::after {
    content: "↓"; right: 50%; top: auto; bottom: -16px;
    transform: translateX(50%);
  }
}

/* ============================================================
   CODE / ARTIFACT BLOCKS
   ============================================================ */
.np-codeblock {
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: var(--np-radius);
  padding: 20px 24px;
  font-size: .85rem;
  line-height: 1.6;
  overflow-x: auto;
  margin: 16px 0 24px;
  border: 1px solid var(--color-code-border);
}
.np-codeblock .c-key { color: var(--color-code-key); }
.np-codeblock .c-str { color: var(--color-code-str); }
.np-codeblock .c-com { color: var(--color-code-com); font-style: italic; }

/* Story / artifact card */
.np-artifact {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--np-radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 24px 0;
  overflow: hidden;
}
.np-artifact-head {
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-primary-light);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.np-artifact-head .id {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: .78rem; font-weight: 700;
  background: var(--color-primary-dark); color: var(--color-text-light);
  padding: 3px 10px; border-radius: 6px;
}
.np-artifact-head h4 { margin: 0; font-size: 1.02rem; flex: 1; min-width: 200px; }
.np-artifact-body { padding: 22px 24px; }
.np-artifact-body p:last-child { margin-bottom: 0; }

/* Acceptance criteria list */
.np-ac {
  list-style: none; margin: 12px 0; padding: 0;
}
.np-ac li {
  padding: 10px 14px 10px 40px;
  position: relative;
  border-bottom: 1px dashed var(--color-border);
  font-size: .92rem;
  color: var(--color-text-muted);
}
.np-ac li::before {
  content: "✓";
  position: absolute; left: 12px; top: 10px;
  color: var(--color-primary); font-weight: 800;
}
.np-ac li:last-child { border-bottom: none; }
.np-ac .gwt { font-family: Consolas, monospace; font-size: .85rem; }
.np-ac .gwt b { color: var(--color-primary-dark); }

/* Constraint tag list */
.np-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.np-tag {
  font-size: .75rem; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-light);
  color: var(--color-primary-dark);
}
.np-tag.security { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.np-tag.privacy { background: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info); }
.np-tag.a11y { background: var(--color-warning-bg); border-color: var(--color-accent-gold); color: var(--color-accent-gold-dark); }
.np-tag.perf { background: var(--color-purple-bg); border-color: var(--color-purple); color: var(--color-purple); }
.np-tag.i18n { background: var(--color-teal-bg); border-color: var(--color-teal); color: var(--color-teal); }

/* ============================================================
   TABS (MATURITY EXPLORER)
   ============================================================ */
.np-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 0;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
}
.np-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 10px 18px;
  font-size: .88rem; font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  margin-bottom: -2px;
}
.np-tab-btn:hover { color: var(--color-primary-dark); background: var(--color-primary-light); }
.np-tab-btn.active {
  color: var(--color-primary-dark);
  background: var(--color-bg-card);
  border-color: var(--color-border);
  border-bottom: 2px solid var(--color-bg-card);
}
.np-tab-panel {
  display: none;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--np-radius) var(--np-radius);
  padding: 28px;
}
.np-tab-panel.active { display: block; }

/* ============================================================
   MATURITY SCALE
   ============================================================ */
.np-maturity-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 24px 0; }
.np-maturity-cell {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--np-radius);
  padding: 16px 14px;
  text-align: center;
  border-top: 4px solid var(--color-border-strong);
}
.np-maturity-cell.l1 { border-top-color: var(--color-level-1); }
.np-maturity-cell.l2 { border-top-color: var(--color-level-2); }
.np-maturity-cell.l3 { border-top-color: var(--color-level-3); }
.np-maturity-cell.l4 { border-top-color: var(--color-level-4); }
.np-maturity-cell.l5 { border-top-color: var(--color-level-5); }
.np-maturity-cell .lvl {
  font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700;
  color: var(--color-primary-dark);
}
.np-maturity-cell .name { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin: 4px 0 8px; }
.np-maturity-cell p { font-size: .78rem; color: var(--color-text-faint); margin: 0; }
@media (max-width: 900px) { .np-maturity-scale { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .np-maturity-scale { grid-template-columns: 1fr; } }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.np-breadcrumb {
  font-size: .85rem;
  color: var(--color-text-muted);
  padding: 18px 0 0;
}
.np-breadcrumb a { color: var(--color-text-muted); }
.np-breadcrumb a:hover { color: var(--color-primary); }
.np-breadcrumb span.sep { margin: 0 8px; color: var(--color-text-faint); }

/* Breadcrumb on dark/red page headers (replaces inline styles) */
.np-pagehead .np-breadcrumb { padding-top: 0; color: var(--overlay-white-bread); }
.np-pagehead .np-breadcrumb a { color: var(--overlay-white-bread); }
.np-pagehead .np-breadcrumb a:hover { color: var(--color-text-light); }
.np-pagehead .np-breadcrumb span.sep { color: var(--overlay-white-sep); }

/* ============================================================
   PAGE HEADER (SUB-PAGES)
   ============================================================ */
.np-pagehead {
  background: var(--gradient-pagehead);
  color: var(--color-text-light);
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
}
.np-pagehead h1 { color: var(--color-text-light); margin-bottom: 12px; }
.np-pagehead p { color: var(--overlay-white-text); max-width: 68ch; font-size: 1.08rem; margin-bottom: 0; }
.np-pagehead .np-eyebrow { margin-bottom: 16px; }
.np-pagehead .np-eyebrow.mt { margin-top: 18px; }

/* ============================================================
   SIDEBAR LAYOUT FOR DOCS
   ============================================================ */
.np-doc-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 960px) { .np-doc-layout { grid-template-columns: 1fr; } }

.np-doc-sidebar {
  position: sticky;
  top: 88px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--np-radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 960px) { .np-doc-sidebar { position: static; } }
.np-doc-sidebar .side-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-text-muted);
  margin-bottom: 12px;
}
.np-doc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.np-doc-sidebar li { margin: 0; }
.np-doc-sidebar a {
  display: block;
  padding: 7px 10px;
  font-size: .88rem;
  color: var(--color-text-muted);
  border-radius: 6px;
  border-left: 2px solid transparent;
}
.np-doc-sidebar a:hover { background: var(--color-primary-light); color: var(--color-primary-dark); text-decoration: none; }
.np-doc-sidebar a.current { color: var(--color-primary-dark); font-weight: 600; border-left-color: var(--color-accent-gold); background: var(--color-primary-light); }

/* ============================================================
   FOOTER
   ============================================================ */
.np-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-light-dim);
  padding: 56px 0 32px;
  margin-top: 0;
  border-top: 3px solid var(--color-accent-gold);
}
.np-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 860px) { .np-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .np-footer-grid { grid-template-columns: 1fr; } }
.np-footer h5 {
  color: var(--color-accent-gold);
  font-family: inherit;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 14px;
}
.np-footer ul { list-style: none; margin: 0; padding: 0; }
.np-footer li { margin-bottom: 8px; }
.np-footer a { color: var(--color-text-light-dim); font-size: .9rem; }
.np-footer a:hover { color: var(--color-accent-gold); text-decoration: none; }
.np-footer .brand-line {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-text-light); font-weight: 700; margin-bottom: 12px;
}
.np-footer p { font-size: .88rem; max-width: 40ch; }
.np-footer-bottom {
  border-top: 1px solid var(--overlay-white-line);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .82rem;
  color: var(--overlay-white-faint);
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-muted { color: var(--color-text-muted); }
.text-small { font-size: .88rem; }
.mt-0 { margin-top: 0; }
/* The markup uses these spacing utilities on six pages but only .mt-0 was ever
   defined, so every mt-3 / mt-4 / mt-7 silently collapsed to no margin. */
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-7 { margin-top: 28px; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.np-divider {
  height: 1px; background: var(--color-border);
  margin: 48px 0; border: none;
}
.np-anchor { scroll-margin-top: 84px; }

/* ============================================================
   SNOW ACCENT (SUBTLE, FESTIVE)
   ============================================================ */
.np-snow {
  pointer-events: none;
  position: absolute; inset: 0;
  overflow: hidden;
}
.np-snow i {
  position: absolute;
  top: -10px;
  background: var(--color-snowflake);
  border-radius: 50%;
  animation: np-fall linear infinite;
}
@keyframes np-fall {
  to { transform: translateY(110vh); }
}

/* ============================================================
   PRINT FRIENDLINESS
   ============================================================ */
@media print {
  .np-nav, .np-footer, .np-doc-sidebar { display: none; }
  .np-doc-layout { grid-template-columns: 1fr; }
  body { background: var(--color-secondary); }
}

/* ============================================================
   BLUEPRINT REVISION 1.1 — concise public entry, lifecycle tree,
   Delivery Harness, family preview, and Genie at Work.
   ============================================================ */
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 300; background: var(--color-accent-gold); color: var(--color-primary-darker); padding: 10px 14px; font-weight: 800; }
.skip-link:focus { top: 16px; }
.np-pagehead .container { position: relative; z-index: 1; }
.np-pagehead .lede { color: var(--overlay-white-text); max-width: 67ch; }
.blueprint-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 32px; align-items: start; }
.tree-legend { border: 1px solid var(--color-border); border-radius: var(--np-radius); background: var(--color-bg-card); padding: 20px; box-shadow: var(--shadow-sm); }
.tree-legend h3 { margin-bottom: 10px; }
.tree-legend p { color: var(--color-text-muted); font-size: .9rem; }
.blueprint-tree { margin-top: 30px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--np-radius-lg); background: var(--color-bg-card); box-shadow: var(--shadow-md); }
.tree-root { margin: 0; padding: 0; list-style: none; }
.tree-phase { border-bottom: 1px solid var(--color-border); }
.tree-phase:last-child { border-bottom: 0; }
.tree-phase details { padding: 0; }
.tree-phase summary { display: flex; align-items: center; gap: 12px; padding: 19px 22px; cursor: pointer; color: var(--color-primary-dark); font-family: Georgia, serif; font-size: 1.18rem; font-weight: 700; list-style: none; }
.tree-phase summary::-webkit-details-marker { display: none; }
.tree-phase summary::before { content: "+"; display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); font-family: Inter, sans-serif; font-size: 1rem; font-weight: 800; }
.tree-phase details[open] summary { background: var(--color-snow); }
.tree-phase details[open] summary::before { content: "−"; background: var(--color-primary); color: var(--color-text-light); }
.tree-phase-title { flex: 1; }
.tree-phase small { color: var(--color-text-faint); font-family: Inter, sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tree-children { margin: 0; padding: 4px 22px 22px 57px; list-style: none; }
.tree-children li { position: relative; margin: 10px 0; padding-left: 20px; color: var(--color-text-muted); font-size: .92rem; }
.tree-children li::before { content: ""; position: absolute; left: 0; top: .75em; width: 9px; border-top: 1px solid var(--color-border-strong); }
.tree-label { color: var(--color-text-dark); font-weight: 700; }
.vision-tip { position: relative; border-bottom: 1px dashed var(--color-accent-deep); color: var(--color-primary); cursor: help; }
.vision-tip::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 9px); z-index: 20; width: min(310px, 76vw); visibility: hidden; opacity: 0; border-radius: 8px; background: var(--color-primary-darker); padding: 11px 13px; color: var(--color-text-light); font-size: .78rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; box-shadow: 0 8px 22px rgba(0,0,0,.22); transition: opacity .15s ease; }
.vision-tip:hover::after, .vision-tip:focus::after { visibility: visible; opacity: 1; }
.harness-grid, .system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.harness-step { border-top: 4px solid var(--color-primary); border-radius: var(--np-radius); background: var(--color-bg-card); padding: 20px; box-shadow: var(--shadow-sm); }
.harness-step:nth-child(2) { border-top-color: var(--color-accent-gold); }.harness-step:nth-child(3) { border-top-color: var(--color-accent-deep); }
.harness-step .num { display: block; color: var(--color-accent-gold-dark); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.harness-step p, .system-card p { margin-bottom: 0; color: var(--color-text-muted); font-size: .9rem; }
.system-card { border: 1px solid var(--color-border); border-radius: var(--np-radius); background: var(--color-bg-card); padding: 20px; box-shadow: var(--shadow-sm); }.system-card h3 { margin-bottom: 7px; }
.wish-frame { overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--np-radius-lg); background: var(--color-bg-card); box-shadow: 0 20px 45px rgba(92,13,17,.17); }
.wish-browser { display: flex; align-items: center; gap: 7px; background: var(--color-primary-darker); padding: 12px 16px; color: var(--color-text-light-dim); font-size: .78rem; }.wish-browser i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary-bright); }.wish-browser i:nth-child(2) { background: var(--color-accent-gold); }.wish-browser i:nth-child(3) { background: var(--color-accent); }.wish-browser span { margin-left: 8px; }
.wish-app { min-height: 570px; background: linear-gradient(160deg, #fff 0%, var(--color-snow) 100%); }.wish-appbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); padding: 17px 26px; }.wish-appbar strong { display: flex; align-items: center; gap: 9px; color: var(--color-primary-dark); }.wish-appbar b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--color-primary); color: var(--color-text-light); font-size: .68rem; }.wish-progress { display: flex; gap: 7px; }.wish-progress i { width: 28px; height: 4px; border-radius: 9px; background: var(--color-snow-dim); }.wish-progress i.active { background: var(--color-primary); }
.wish-stage { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; padding: 42px; }.wish-copy { padding: 24px 0; }.wish-copy p { color: var(--color-text-muted); }.wish-safe { display: flex; gap: 10px; margin-top: 24px; border-left: 3px solid var(--color-accent-gold); padding: 10px 12px; color: var(--color-text-muted); font-size: .82rem; }.wish-form { border-radius: 12px; background: var(--color-bg-card); padding: 26px; box-shadow: 0 7px 18px rgba(92,13,17,.09); }.wish-form label { display: block; margin: 15px 0 5px; color: var(--color-primary-dark); font-size: .8rem; font-weight: 800; }.wish-input { width: 100%; border: 1px solid var(--color-border-strong); border-radius: 7px; background: #fcfcfc; padding: 12px; color: var(--color-text-muted); font-size: .9rem; }.wish-item { display: flex; gap: 10px; align-items: center; margin: 13px 0; border: 1px solid var(--color-border); border-radius: 8px; padding: 11px; }.wish-item .gift { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 7px; background: var(--color-primary-light); }.wish-preview-note { margin-top: 18px; color: var(--color-text-faint); font-size: .78rem; }.wish-form .np-btn { width: 100%; justify-content: center; margin-top: 16px; }
.genie-timeline { position: relative; max-width: 900px; margin: 34px auto 0; padding-left: 40px; }.genie-timeline::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; border-left: 2px solid var(--color-primary-light); }.genie-entry { position: relative; margin: 0 0 24px; border: 1px solid var(--color-border); border-radius: var(--np-radius); background: var(--color-bg-card); padding: 20px 22px; box-shadow: var(--shadow-sm); }.genie-entry::before { content: ""; position: absolute; left: -36px; top: 24px; width: 15px; height: 15px; border: 4px solid var(--color-bg-main); border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }.genie-entry time { display: block; margin-bottom: 5px; color: var(--color-accent-gold-dark); font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.genie-entry p { margin-bottom: 0; color: var(--color-text-muted); }
@media (max-width: 960px) { .blueprint-intro, .np-doc-layout { grid-template-columns: 1fr; }.np-doc-sidebar { position: static; }.harness-grid, .system-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .tree-phase summary { padding: 16px; font-size: 1.05rem; }.tree-phase small { display: none; }.tree-children { padding: 4px 16px 18px 42px; }.harness-grid, .system-grid, .wish-stage { grid-template-columns: 1fr; }.wish-stage { padding: 24px; }.wish-appbar { padding: 14px; }.wish-progress { display: none; }.genie-timeline { padding-left: 31px; } }

/* ============================================================
   MAKE-A-WISH INTERACTIVE PREVIEW — session-only prototype.
   Refined paper, compact progress, child-safe language, no collection.
   ============================================================ */
.wish-prototype-shell { background: linear-gradient(145deg, #fff 0%, #f5f8fb 55%, #fdf3f3 100%); }
.wish-prototype-topline { display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.92); padding: 15px 25px; }.wish-prototype-topline strong { display: flex; align-items: center; gap: 10px; color: var(--color-primary-dark); font-size: .95rem; }.wish-prototype-topline b { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--color-primary); color: white; font-size: .7rem; }.wish-preview-lock { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: .76rem; font-weight: 700; }
.wish-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 17px 26px 0; }.wish-step-button { display: flex; align-items: center; gap: 9px; border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 9px 6px 14px; color: var(--color-text-faint); font-family: inherit; font-size: .78rem; font-weight: 700; text-align: left; cursor: pointer; }.wish-step-button span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; background: white; color: var(--color-text-muted); font-size: .7rem; }.wish-step-button:hover { color: var(--color-primary-dark); }.wish-step-button.active { border-color: var(--color-primary); color: var(--color-primary-dark); }.wish-step-button.active span { border-color: var(--color-primary); background: var(--color-primary); color: white; }.wish-step-button.complete span { border-color: var(--color-accent-gold); background: var(--color-accent-gold); color: var(--color-primary-darker); }
.wish-prototype-main { min-height: 590px; padding: 36px; }.wish-view { display: none; animation: wish-in .24s cubic-bezier(.23,1,.32,1); }.wish-view.active { display: block; }@keyframes wish-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wish-split { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 44px; min-height: 470px; }.wish-welcome-visual { position: relative; min-height: 310px; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.32), transparent 24%), linear-gradient(145deg, var(--color-primary-darker), var(--color-primary) 74%, var(--color-primary-bright)); padding: 28px; color: white; box-shadow: 0 18px 40px rgba(92,13,17,.22); }.wish-welcome-visual::before { content: "✦"; position: absolute; right: 22px; top: 14px; color: var(--color-accent-gold); font-size: 3rem; opacity: .9; }.wish-welcome-visual::after { content: ""; position: absolute; right: -50px; bottom: -85px; width: 280px; height: 220px; border: 32px solid rgba(255,255,255,.1); border-radius: 50%; }.wish-welcome-visual p { position: relative; z-index: 1; max-width: 23ch; color: rgba(255,255,255,.88); font-family: Georgia, serif; font-size: 1.4rem; line-height: 1.35; }.wish-mini-card { position: absolute; z-index: 2; right: 24px; bottom: 24px; width: 170px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.12); padding: 15px; backdrop-filter: blur(8px); }.wish-mini-card strong { display: block; color: var(--color-accent-gold); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }.wish-mini-card span { display: block; margin-top: 5px; color: white; font-size: .8rem; line-height: 1.4; }
.wish-copy-large .kicker { margin-bottom: 12px; }.wish-copy-large h2 { font-size: clamp(1.75rem, 3.5vw, 2.45rem); }.wish-copy-large p { max-width: 49ch; color: var(--color-text-muted); }.wish-value-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 23px 0; }.wish-value { border: 1px solid var(--color-border); border-radius: 9px; background: white; padding: 11px; color: var(--color-text-muted); font-size: .76rem; line-height: 1.35; }.wish-value b { display: block; margin-bottom: 3px; color: var(--color-primary-dark); font-size: .76rem; }.wish-action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }.wish-action-row .np-btn { justify-content: center; }.wish-inline-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; color: var(--color-text-faint); font-size: .78rem; }.wish-inline-note span:first-child { color: var(--color-accent-gold-dark); font-weight: 900; }
.wish-panel { width: min(640px, 100%); margin: 0 auto; border: 1px solid var(--color-border); border-radius: 16px; background: white; padding: 30px; box-shadow: 0 13px 32px rgba(92,13,17,.09); }.wish-panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 21px; }.wish-panel-header p { margin: 0; color: var(--color-text-muted); font-size: .9rem; }.wish-panel-header h2 { margin-bottom: 6px; }.wish-question { margin: 22px 0; }.wish-question label, .wish-label { display: block; margin-bottom: 8px; color: var(--color-primary-dark); font-size: .85rem; font-weight: 800; }.wish-help { margin-top: 5px; color: var(--color-text-faint); font-size: .76rem; }.wish-choice-grid { display: flex; flex-wrap: wrap; gap: 9px; }.wish-choice { border: 1px solid var(--color-border-strong); border-radius: 8px; background: white; padding: 10px 13px; color: var(--color-text-muted); font-family: inherit; font-size: .87rem; font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }.wish-choice:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }.wish-choice.selected { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }.wish-input-field, .wish-textarea { width: 100%; border: 1px solid var(--color-border-strong); border-radius: 8px; background: #fff; padding: 12px 13px; color: var(--color-text-dark); font: inherit; font-size: .93rem; transition: border-color .15s ease, box-shadow .15s ease; }.wish-textarea { min-height: 95px; resize: vertical; }.wish-input-field:focus, .wish-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(176,30,36,.12); }.wish-input-field::placeholder, .wish-textarea::placeholder { color: var(--color-text-faint); }.wish-suggestion-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }.wish-suggestion { border: 1px solid var(--color-primary-light); border-radius: 999px; background: var(--color-primary-light); padding: 6px 10px; color: var(--color-primary-dark); font-family: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }.wish-suggestion:hover { border-color: var(--color-primary); }.wish-add-link { display: inline-flex; margin-top: 12px; border: 0; background: transparent; padding: 0; color: var(--color-primary); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }.wish-add-link:hover { color: var(--color-primary-dark); text-decoration: underline; }.wish-item-field { margin-top: 10px; }.wish-panel-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }.wish-panel-actions .np-btn { justify-content: center; }.wish-panel-actions .np-btn:first-child { min-width: 105px; }.wish-panel-actions .np-btn:last-child { min-width: 175px; }
.wish-review { display: grid; grid-template-columns: .75fr 1.25fr; gap: 30px; align-items: start; }.wish-review-side { border-radius: 14px; background: linear-gradient(155deg, var(--color-primary-darker), var(--color-primary)); padding: 27px; color: white; }.wish-review-side h2 { color: white; }.wish-review-side p { color: rgba(255,255,255,.84); }.wish-review-side .wish-safe { margin-top: 28px; border-color: var(--color-accent-gold); color: rgba(255,255,255,.85); }.wish-summary-card { border: 1px solid var(--color-border); border-radius: 14px; background: white; padding: 27px; box-shadow: var(--shadow-sm); }.wish-summary-card h3 { margin-bottom: 4px; }.wish-summary-row { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--color-border); padding: 12px 0; color: var(--color-text-muted); font-size: .9rem; }.wish-summary-row span:last-child { color: var(--color-text-dark); font-weight: 700; text-align: right; }.wish-summary-wishes { margin: 14px 0 0; padding: 0; list-style: none; }.wish-summary-wishes li { position: relative; margin: 7px 0; padding-left: 23px; color: var(--color-text-muted); font-size: .89rem; }.wish-summary-wishes li::before { content: "✦"; position: absolute; left: 0; color: var(--color-accent-gold-dark); }.wish-review-accordion { margin-top: 20px; border-top: 1px solid var(--color-border); }.wish-review-accordion details { border-bottom: 1px solid var(--color-border); padding: 11px 0; }.wish-review-accordion summary { color: var(--color-primary-dark); font-size: .84rem; font-weight: 800; cursor: pointer; }.wish-review-accordion p { margin: 9px 0 1px; color: var(--color-text-muted); font-size: .82rem; }.wish-toast { margin-top: 14px; min-height: 1.3em; color: var(--color-success); font-size: .82rem; font-weight: 700; }.wish-sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 860px) { .wish-split, .wish-review { grid-template-columns: 1fr; }.wish-welcome-visual { min-height: 220px; }.wish-prototype-main { padding: 24px; }.wish-stepper { padding: 14px 18px 0; } }
@media (max-width: 620px) { .wish-prototype-topline { padding: 13px 16px; }.wish-preview-lock { font-size: .69rem; }.wish-step-button { font-size: 0; justify-content: center; padding: 8px 4px 12px; }.wish-step-button span { width: 26px; height: 26px; font-size: .75rem; }.wish-prototype-main { min-height: 500px; padding: 18px; }.wish-value-row { grid-template-columns: 1fr; }.wish-panel { padding: 21px; }.wish-panel-actions { flex-direction: column-reverse; }.wish-panel-actions .np-btn { width: 100%; }.wish-review-side, .wish-summary-card { padding: 21px; } }

/* Blueprint lifecycle tree controls and touch-friendly vision balloons. */
.tree-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }.tree-toolbar p { margin: 0; color: var(--color-text-muted); font-size: .85rem; }.tree-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }.tree-tool-button { border: 1px solid var(--color-border-strong); border-radius: 7px; background: var(--color-bg-card); padding: 8px 11px; color: var(--color-primary-dark); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }.tree-tool-button:hover, .tree-tool-button:focus-visible { border-color: var(--color-primary); background: var(--color-primary-light); outline: none; }.vision-tip { background: transparent; font: inherit; padding: 0; }.vision-tip[role="button"] { border-left: 0; border-right: 0; border-top: 0; }.vision-tip.pinned::after { visibility: visible; opacity: 1; }.vision-tip:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 620px) { .tree-toolbar { align-items: flex-start; flex-direction: column; }.tree-toolbar-actions { width: 100%; }.tree-tool-button { flex: 1; } }

/* ============================================================
   INTRANET REQUIREMENTS DEMO — focused, local-only demonstration.
   ============================================================ */
.intranet-banner { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; border: 1px solid #c8dbe8; border-radius: 8px; background: #edf5fb; padding: 10px 13px; color: #34586d; font-size: .82rem; font-weight: 700; }.intranet-banner b { color: var(--color-primary-dark); }.intranet-banner .vpn-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px rgba(46,125,79,.13); }
.requirements-demo { border: 1px solid var(--color-border-strong); border-radius: var(--np-radius-lg); background: var(--color-snow); box-shadow: var(--shadow-lg); overflow: hidden; }.requirements-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--color-border); background: white; padding: 18px 23px; }.requirements-demo-head strong { display: flex; align-items: center; gap: 10px; color: var(--color-primary-dark); }.requirements-demo-head b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--color-primary-dark); color: var(--color-accent-gold); font-size: .72rem; }.requirements-demo-head span { color: var(--color-text-faint); font-size: .77rem; font-weight: 700; }
.requirements-demo-body { padding: 24px; }.requirements-demo-grid { display: grid; grid-template-columns: minmax(0, .93fr) minmax(340px, 1.07fr); gap: 20px; }.intranet-card { border: 1px solid var(--color-border); border-radius: 11px; background: white; padding: 21px; }.intranet-card h3 { margin-bottom: 7px; }.intranet-card p { color: var(--color-text-muted); font-size: .9rem; }.intranet-card label { display: block; margin: 16px 0 7px; color: var(--color-primary-dark); font-size: .82rem; font-weight: 800; }.intranet-textarea { width: 100%; min-height: 132px; resize: vertical; border: 1px solid var(--color-border-strong); border-radius: 8px; background: #fff; padding: 12px; color: var(--color-text-dark); font: inherit; font-size: .9rem; line-height: 1.55; }.intranet-textarea:focus, .control-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(176,30,36,.12); }.intranet-help { margin: 8px 0 0; color: var(--color-text-faint); font-size: .75rem; }.intranet-action { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 17px; }.intranet-action .demo-status { color: var(--color-text-faint); font-size: .78rem; }
.delivery-pack { border-top: 4px solid var(--color-primary); }.delivery-pack-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.delivery-pack-head h3 { margin-bottom: 4px; }.delivery-id { border-radius: 5px; background: var(--color-primary-dark); padding: 4px 7px; color: white; font-family: Consolas, monospace; font-size: .72rem; font-weight: 800; }.delivery-pack p { margin-bottom: 0; }.delivery-pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }.delivery-piece { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-snow); padding: 11px; }.delivery-piece strong { display: block; color: var(--color-primary-dark); font-size: .8rem; }.delivery-piece span { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: .76rem; line-height: 1.4; }.delivery-piece em { display: block; margin-top: 7px; color: var(--color-accent-gold-dark); font-size: .69rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.demo-tabbar { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0 0; border-bottom: 1px solid var(--color-border); }.demo-tab { border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; background: transparent; padding: 9px 13px; color: var(--color-text-muted); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }.demo-tab.active { border-color: var(--color-border); background: white; color: var(--color-primary-dark); }.demo-panel { display: none; border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--np-radius) var(--np-radius); background: white; padding: 20px; }.demo-panel.active { display: block; }
.control-callout { display: flex; align-items: flex-start; gap: 14px; border-left: 4px solid var(--color-accent-gold); background: var(--color-warning-bg); padding: 14px 16px; }.control-callout strong { color: var(--color-primary-dark); }.control-callout p { margin: 3px 0 0; color: var(--color-text-muted); font-size: .84rem; }.control-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }.control-rule { border: 1px solid var(--color-border); border-radius: 8px; padding: 11px; }.control-rule b { display: block; color: var(--color-primary-dark); font-size: .78rem; }.control-rule span { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: .75rem; }.control-fields { display: grid; grid-template-columns: 1.3fr .7fr; gap: 12px; margin-top: 14px; }.control-fields label { display: block; margin-bottom: 6px; color: var(--color-primary-dark); font-size: .78rem; font-weight: 800; }.control-input { width: 100%; border: 1px solid var(--color-border-strong); border-radius: 7px; padding: 10px; color: var(--color-text-dark); font: inherit; font-size: .88rem; }.control-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }.control-buttons .np-btn { padding: 9px 12px; font-size: .8rem; }.policy-results { margin-top: 16px; border-top: 1px solid var(--color-border); }.policy-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-border); padding: 10px 0; color: var(--color-text-muted); font-size: .83rem; }.policy-result strong { color: var(--color-text-dark); }.policy-state { border-radius: 999px; padding: 3px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.policy-state.pending { background: var(--color-snow-dim); color: var(--color-text-muted); }.policy-state.pass { background: var(--color-success-bg); color: var(--color-success); }.policy-state.fail { background: var(--color-danger-bg); color: var(--color-danger); }
.evidence-lane { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.evidence-step { position: relative; border: 1px solid var(--color-border); border-top: 4px solid var(--color-border-strong); border-radius: 8px; padding: 13px; }.evidence-step.dev { border-top-color: var(--color-primary); }.evidence-step.qa { border-top-color: var(--color-accent-gold); }.evidence-step.ops { border-top-color: var(--color-accent-deep); }.evidence-step strong { display: block; color: var(--color-primary-dark); font-size: .84rem; }.evidence-step p { margin: 6px 0 0; color: var(--color-text-muted); font-size: .78rem; }.evidence-step .evidence-state { display: inline-block; margin-top: 10px; color: var(--color-text-faint); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.evidence-step .evidence-state.pass { color: var(--color-success); }.evidence-note { margin-top: 16px; color: var(--color-text-faint); font-size: .76rem; }
@media (max-width: 900px) { .requirements-demo-grid { grid-template-columns: 1fr; }.delivery-pieces, .control-rules, .evidence-lane { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .requirements-demo-head { align-items: flex-start; flex-direction: column; }.requirements-demo-body { padding: 15px; }.intranet-action { align-items: flex-start; flex-direction: column; }.control-fields { grid-template-columns: 1fr; } }

/* AUTH-PASS-017 — password storage / one-way hashing demo. */
.ai-control-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }.ai-control-map-step { position: relative; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-snow); padding: 11px; }.ai-control-map-step:not(:last-child)::after { content: "→"; position: absolute; right: -8px; top: 50%; z-index: 1; color: var(--color-accent-gold-dark); font-weight: 900; transform: translateY(-50%); }.ai-control-map-step strong { display: block; color: var(--color-primary-dark); font-size: .76rem; }.ai-control-map-step span { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: .72rem; line-height: 1.35; }.hash-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }.hash-choice { min-height: 104px; border: 1px solid var(--color-border-strong); border-radius: 9px; background: white; padding: 13px; color: var(--color-text-muted); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }.hash-choice strong { display: block; margin-bottom: 5px; color: var(--color-primary-dark); font-size: .84rem; }.hash-choice span { display: block; font-size: .76rem; line-height: 1.4; }.hash-choice:hover { border-color: var(--color-primary); }.hash-choice.selected.approved { border-color: var(--color-success); background: var(--color-success-bg); }.hash-choice.selected.prohibited { border-color: var(--color-danger); background: var(--color-danger-bg); }.hash-choice .choice-label { display: inline-block; margin-top: 7px; font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.choice-label.approved { color: var(--color-success); }.choice-label.prohibited { color: var(--color-danger); }.hash-disclaimer { margin-top: 15px; border-left: 3px solid var(--color-accent-deep); background: #edf5fb; padding: 12px 14px; color: #34586d; font-size: .8rem; }.hash-disclaimer a { color: var(--color-primary); font-weight: 700; }.hash-mapping-result { margin-top: 13px; color: var(--color-text-muted); font-size: .82rem; }.hash-mapping-result strong { color: var(--color-primary-dark); }
@media (max-width: 800px) { .ai-control-map { grid-template-columns: 1fr 1fr; }.ai-control-map-step:not(:last-child)::after { display: none; } }
@media (max-width: 560px) { .ai-control-map, .hash-choice-grid { grid-template-columns: 1fr; } }

/* Home-page priority: direct attention to the Blueprint without continuous visual noise. */
.np-btn-blueprint-priority { position: relative; box-shadow: 0 0 0 0 rgba(227,178,60,.42); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) { .np-btn-blueprint-priority { animation: blueprint-beacon 2.8s cubic-bezier(.23,1,.32,1) infinite; } }
@keyframes blueprint-beacon { 0%, 58%, 100% { box-shadow: 0 0 0 0 rgba(227,178,60,.05); filter: brightness(1); } 8% { box-shadow: 0 0 0 8px rgba(227,178,60,.24); filter: brightness(1.06); } 16% { box-shadow: 0 0 0 0 rgba(227,178,60,.05); filter: brightness(1); } }

/* VPN-only Requirements Workbench — prominent use-case-to-story demonstration. */
.intranet-session { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; border: 1px solid #c8dbe8; border-radius: 8px; background: #edf5fb; padding: 10px 13px; color: #34586d; font-size: .78rem; font-weight: 700; }.intranet-session strong { color: var(--color-primary-dark); }.intranet-session-pills { display: flex; flex-wrap: wrap; gap: 7px; }.intranet-session-pills span { border-radius: 999px; background: white; padding: 3px 7px; color: #48677a; font-size: .68rem; }.intranet-session-pills span:first-child { color: var(--color-success); }
.intranet-workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 20px; }.intranet-stage { position: relative; min-height: 76px; border: 1px solid var(--color-border); border-radius: 9px; background: white; padding: 11px; }.intranet-stage:not(:last-child)::after { content: "→"; position: absolute; right: -8px; top: 50%; z-index: 2; color: var(--color-accent-gold-dark); font-weight: 900; transform: translateY(-50%); }.intranet-stage strong { display: block; color: var(--color-primary-dark); font-size: .77rem; }.intranet-stage span { display: block; margin-top: 4px; color: var(--color-text-faint); font-size: .7rem; line-height: 1.35; }.intranet-stage.active { border-color: var(--color-primary); background: var(--color-primary-light); }.intranet-stage.complete { border-color: var(--color-success); background: var(--color-success-bg); }.intranet-stage.complete span { color: var(--color-success); }
.intranet-compliance-map { margin-top: 15px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-snow); padding: 13px; }.intranet-compliance-map h4 { margin-bottom: 5px; color: var(--color-primary-dark); font-family: Inter, sans-serif; font-size: .8rem; }.intranet-compliance-map p { margin-bottom: 8px; color: var(--color-text-muted); font-size: .76rem; }.intranet-map-tags { display: flex; flex-wrap: wrap; gap: 6px; }.intranet-map-tags span { border: 1px solid #c8dbe8; border-radius: 999px; background: white; padding: 4px 8px; color: #3a6ea5; font-size: .68rem; font-weight: 800; }.intranet-map-tags .alert { border-color: var(--color-accent-gold); color: var(--color-accent-gold-dark); }
.story-output { margin-top: 20px; border: 1px solid var(--color-primary-light); border-radius: 12px; background: white; padding: 20px; box-shadow: var(--shadow-sm); }.story-output-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.story-output-head h3 { margin-bottom: 5px; }.story-output-head p { margin: 0; color: var(--color-text-muted); font-size: .82rem; }.story-status { border-radius: 999px; background: var(--color-snow-dim); padding: 4px 9px; color: var(--color-text-muted); font-size: .69rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }.requirements-demo.interpreted .story-status { background: var(--color-success-bg); color: var(--color-success); }.story-artifacts { display: grid; grid-template-columns: .8fr 1.2fr 1.4fr; gap: 10px; margin-top: 15px; }.story-artifact { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-snow); padding: 12px; }.story-artifact b { display: block; margin-bottom: 5px; color: var(--color-primary-dark); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }.story-artifact span { display: block; color: var(--color-text-muted); font-size: .78rem; line-height: 1.42; }.story-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }.story-controls span { border: 1px solid var(--color-primary-light); border-radius: 999px; background: var(--color-primary-light); padding: 4px 9px; color: var(--color-primary-dark); font-family: Consolas, monospace; font-size: .68rem; font-weight: 800; }.story-controls span:nth-child(3) { border-color: #c8dbe8; background: #edf5fb; color: #3a6ea5; }.story-controls span:nth-child(4) { border-color: var(--color-accent-gold); background: #faf3e0; color: var(--color-accent-gold-dark); }.story-output-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; border-top: 1px solid var(--color-border); padding-top: 14px; }.story-output-footer p { margin: 0; color: var(--color-text-faint); font-size: .74rem; }.story-output-footer .np-btn { padding: 8px 11px; font-size: .78rem; }
@media (max-width: 900px) { .intranet-workflow, .story-artifacts { grid-template-columns: 1fr 1fr; }.intranet-stage:not(:last-child)::after { display: none; } }
@media (max-width: 620px) { .intranet-session { align-items: flex-start; flex-direction: column; }.intranet-workflow, .story-artifacts { grid-template-columns: 1fr; }.story-output-head, .story-output-footer { align-items: flex-start; flex-direction: column; } }

/* Local-only password visibility control. This is added by the static script and has no persistence. */
.password-field-wrap { position: relative; }.password-field-wrap .control-input { padding-right: 106px; }.password-visibility-toggle { position: absolute; right: 7px; top: 50%; border: 0; border-radius: 5px; background: var(--color-snow-dim); padding: 6px 8px; color: var(--color-primary-dark); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; transform: translateY(-50%); }.password-visibility-toggle:hover, .password-visibility-toggle:focus-visible { background: var(--color-primary-light); outline: none; }

/* Development Lab — AI creates the implementation package; the developer starts and approves it. */
.development-lab { border: 1px solid var(--color-border-strong); border-radius: var(--np-radius-lg); background: var(--color-snow); box-shadow: var(--shadow-lg); overflow: hidden; }.development-lab-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--color-border); background: white; padding: 18px 23px; }.development-lab-head strong { display: flex; align-items: center; gap: 10px; color: var(--color-primary-dark); }.development-lab-head b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--color-primary-dark); color: var(--color-accent-gold); font-size: .72rem; }.development-lab-head span { color: var(--color-text-faint); font-size: .77rem; font-weight: 700; }.development-lab-body { padding: 24px; }.development-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 20px; }.development-card { border: 1px solid var(--color-border); border-radius: 11px; background: white; padding: 21px; }.development-card h3 { margin-bottom: 7px; }.development-card p { color: var(--color-text-muted); font-size: .88rem; }.development-story { border-top: 4px solid var(--color-primary); }.development-story-id { display: inline-block; border-radius: 5px; background: var(--color-primary-dark); padding: 4px 7px; color: white; font-family: Consolas, monospace; font-size: .72rem; font-weight: 800; }.development-checklist { margin: 16px 0; padding: 0; list-style: none; }.development-checklist li { position: relative; margin: 8px 0; padding-left: 22px; color: var(--color-text-muted); font-size: .8rem; }.development-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 900; }.development-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.development-actions .np-btn { padding: 9px 12px; font-size: .8rem; }.development-run-status { margin-top: 12px; color: var(--color-text-faint); font-size: .77rem; }.development-run-status.ready { color: var(--color-success); font-weight: 800; }.development-output { min-height: 412px; border-top: 4px solid var(--color-accent-gold); }.development-output-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }.development-output-head h3 { margin-bottom: 4px; }.dev-state { border-radius: 999px; background: var(--color-snow-dim); padding: 4px 8px; color: var(--color-text-muted); font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }.development-lab.generated .dev-state { background: var(--color-success-bg); color: var(--color-success); }.development-lab.reviewed .dev-state { background: #e9f1f8; color: #3a6ea5; }.dev-control-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0; }.dev-control-row span { border: 1px solid var(--color-primary-light); border-radius: 999px; background: var(--color-primary-light); padding: 4px 8px; color: var(--color-primary-dark); font-family: Consolas, monospace; font-size: .67rem; font-weight: 800; }.dev-control-row span:nth-child(3) { border-color: #c8dbe8; background: #edf5fb; color: #3a6ea5; }.dev-code { overflow-x: auto; margin: 12px 0; border-radius: 8px; background: #30090c; padding: 15px; color: #f5dddd; font-family: Consolas, monospace; font-size: .75rem; line-height: 1.55; }.dev-code .comment { color: #d3999e; }.dev-code .keyword { color: var(--color-accent); }.dev-code .string { color: #f2c14e; }.dev-code .hidden { display: none; }.development-lab.generated .dev-code .hidden { display: inline; }.dev-test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.dev-test { border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-snow); padding: 9px; color: var(--color-text-muted); font-size: .74rem; }.dev-test b { display: block; margin-bottom: 3px; color: var(--color-primary-dark); font-size: .72rem; }.dev-test em { display: inline-block; margin-top: 5px; color: var(--color-text-faint); font-size: .67rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.development-lab.generated .dev-test em { color: var(--color-success); }.dev-evidence-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }.dev-evidence { border: 1px solid var(--color-border); border-top: 3px solid var(--color-border-strong); border-radius: 7px; background: white; padding: 10px; }.dev-evidence:nth-child(1) { border-top-color: var(--color-primary); }.dev-evidence:nth-child(2) { border-top-color: var(--color-accent-gold); }.dev-evidence:nth-child(3) { border-top-color: var(--color-accent-deep); }.dev-evidence:nth-child(4) { border-top-color: var(--color-success); }.dev-evidence strong { display: block; color: var(--color-primary-dark); font-size: .72rem; }.dev-evidence span { display: block; margin-top: 4px; color: var(--color-text-faint); font-size: .68rem; line-height: 1.35; }.development-lab.generated .dev-evidence span { color: var(--color-success); }.development-lab.reviewed .dev-evidence:last-child span { color: #3a6ea5; font-weight: 800; }
@media (max-width: 900px) { .development-grid { grid-template-columns: 1fr; }.dev-evidence-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .development-lab-head { align-items: flex-start; flex-direction: column; }.development-lab-body { padding: 15px; }.dev-test-grid, .dev-evidence-strip { grid-template-columns: 1fr; } }

/* Labs hub — one concise tabbed doorway to current and planned practice demonstrations. */

/* Direct entry panel: users can open either interactive workbench without finding a tab. */
.labs-direct-launch { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 25px 0 20px; }
.labs-direct-item { border: 1px solid var(--color-primary-light); border-radius: 12px; background: white; padding: 20px; box-shadow: var(--shadow-sm); }
.labs-direct-item::before { content: "OPEN WORKBENCH"; display: inline-block; margin-bottom: 9px; border-radius: 999px; background: var(--color-primary-light); padding: 4px 7px; color: var(--color-primary-dark); font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.labs-direct-item.development::before { background: #edf5fb; color: #3a6ea5; }
.labs-direct-item h2 { margin-bottom: 6px; }.labs-direct-item p { margin-bottom: 13px; color: var(--color-text-muted); font-size: .86rem; }.labs-direct-item .np-btn { width: 100%; justify-content: center; }
.labs-file-path { display: block; margin-top: 11px; color: var(--color-text-faint); font-family: Consolas, monospace; font-size: .72rem; text-align: center; }.labs-file-path b { color: var(--color-primary-dark); }.labs-direct-instruction { margin: 0 0 10px; color: var(--color-primary-dark); font-size: .88rem; font-weight: 800; }
@media (max-width: 700px) { .labs-direct-launch { grid-template-columns: 1fr; } }
.labs-summary { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }.labs-summary-card { border: 1px solid var(--color-border); border-radius: var(--np-radius); background: white; padding: 20px; box-shadow: var(--shadow-sm); }.labs-summary-card h3 { margin-bottom: 7px; }.labs-summary-card p { margin-bottom: 0; color: var(--color-text-muted); font-size: .9rem; }.labs-status-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }.labs-status-row span { border-radius: 999px; padding: 4px 9px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.labs-status-row .live { background: var(--color-success-bg); color: var(--color-success); }.labs-status-row .planned { background: var(--color-snow-dim); color: var(--color-text-muted); }
.labs-tabs { margin-top: 28px; }.labs-tab-list { display: flex; flex-wrap: wrap; gap: 7px; border-bottom: 1px solid var(--color-border); }.labs-tab-button { border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; background: transparent; padding: 10px 13px; color: var(--color-text-muted); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }.labs-tab-button:hover { color: var(--color-primary-dark); background: var(--color-primary-light); }.labs-tab-button.active { border-color: var(--color-border); background: white; color: var(--color-primary-dark); }.labs-panel { display: none; min-height: 300px; border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--np-radius) var(--np-radius); background: white; padding: 30px; }.labs-panel.active { display: block; }.labs-panel-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 30px; align-items: start; }.labs-panel-kicker { color: var(--color-primary); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.labs-panel h2 { margin-top: 6px; }.labs-panel p { color: var(--color-text-muted); }.labs-panel-features { margin: 16px 0 0; padding: 0; list-style: none; }.labs-panel-features li { position: relative; margin: 9px 0; padding-left: 23px; color: var(--color-text-muted); font-size: .88rem; }.labs-panel-features li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 900; }.labs-preview-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-snow); }.labs-preview-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-border); background: white; padding: 13px 15px; }.labs-preview-head strong { color: var(--color-primary-dark); font-size: .84rem; }.labs-preview-head span { color: var(--color-success); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.labs-preview-body { padding: 17px; }.labs-preview-body p { margin-bottom: 12px; font-size: .84rem; }.labs-signal-list { display: grid; gap: 7px; }.labs-signal { display: flex; gap: 8px; align-items: center; border: 1px solid var(--color-border); border-radius: 7px; background: white; padding: 9px; color: var(--color-text-muted); font-size: .76rem; }.labs-signal b { color: var(--color-primary-dark); }.labs-signal i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--color-success); }.labs-signal i.gold { background: var(--color-accent-gold); }.labs-signal i.blue { background: var(--color-accent-deep); }.labs-planned-card { display: grid; min-height: 210px; place-items: center; border: 1px dashed var(--color-border-strong); border-radius: 12px; background: linear-gradient(135deg, #fff, var(--color-snow)); padding: 28px; text-align: center; }.labs-planned-card strong { display: inline-block; border-radius: 999px; background: var(--color-snow-dim); padding: 5px 10px; color: var(--color-text-muted); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }.labs-planned-card p { max-width: 42ch; margin: 14px auto 0; color: var(--color-text-muted); font-size: .88rem; }.labs-planned-card small { display: block; margin-top: 13px; color: var(--color-text-faint); font-size: .75rem; }
@media (max-width: 860px) { .labs-summary, .labs-panel-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .labs-tab-list { display: grid; grid-template-columns: 1fr 1fr; }.labs-tab-button { border: 1px solid var(--color-border); border-radius: 7px; }.labs-tab-button.active { background: var(--color-primary-dark); color: white; }.labs-panel { margin-top: 10px; border-top: 1px solid var(--color-border); border-radius: var(--np-radius); padding: 21px; } }

/* ============================================================
   THE CONTINUOUS THREAD — one story followed across the Labs.
   Handoff strips connect the phases, the Jira ticket shows the
   staged artifact, and the provenance strip closes the loop
   back to the screen the story actually produces.
   ============================================================ */

.thread-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 0 0 22px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent-gold); border-radius: var(--np-radius); background: linear-gradient(135deg, #fff, var(--color-snow)); padding: 15px 18px; box-shadow: var(--shadow-sm); }
.thread-strip .thread-copy { min-width: 0; }
.thread-strip strong { display: block; color: var(--color-primary-dark); font-size: .86rem; }
.thread-strip p { margin: 4px 0 0; color: var(--color-text-muted); font-size: .82rem; }
.thread-strip .thread-keys { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.thread-strip .thread-keys span { border: 1px solid var(--color-border-strong); border-radius: 999px; background: white; padding: 3px 9px; color: var(--color-text-muted); font-family: Consolas, monospace; font-size: .7rem; }
.thread-strip .np-btn { flex: 0 0 auto; }

.thread-rail { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 20px; color: var(--color-text-faint); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.thread-rail i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); font-style: normal; }
.thread-rail a, .thread-rail b { color: var(--color-text-muted); font-weight: 800; text-decoration: none; }
.thread-rail a:hover { color: var(--color-primary); text-decoration: underline; }
.thread-rail .now { color: var(--color-primary-dark); }
.thread-rail .now i, .thread-rail .done i { background: var(--color-primary); }
.thread-rail .sep { color: var(--color-border-strong); }

/* ---------- Mock Jira ticket ---------- */
.jira-ticket { margin-top: 20px; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: 10px; background: white; box-shadow: var(--shadow-md); }
.jira-ticket[hidden] { display: none; }
.jira-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-bottom: 1px solid var(--color-border); background: var(--color-snow); padding: 12px 16px; }
.jira-key { color: var(--color-info); font-family: Consolas, monospace; font-size: .8rem; font-weight: 700; }
.jira-chip { border-radius: 4px; padding: 3px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jira-chip.story { background: var(--color-success-bg); color: var(--color-success); }
.jira-chip.epic { background: var(--color-purple-bg); color: var(--color-purple); }
.jira-chip.state { margin-left: auto; background: var(--color-info-bg); color: var(--color-info); }
.jira-body { padding: 18px 16px; }
.jira-body h4 { margin: 0 0 12px; color: var(--color-text-dark); font-size: 1.05rem; }
.jira-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-main); padding: 13px; }
.jira-field b { display: block; color: var(--color-text-faint); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.jira-field span { display: block; margin-top: 3px; color: var(--color-text-dark); font-size: .82rem; }
.jira-field span.mono { font-family: Consolas, monospace; color: var(--color-info); }
.jira-section { margin-top: 15px; }
.jira-section > b { display: block; margin-bottom: 6px; color: var(--color-primary-dark); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.jira-section p { margin: 0; color: var(--color-text-muted); font-size: .86rem; }
.jira-ac { margin: 0; padding: 0; list-style: none; }
.jira-ac li { position: relative; margin: 7px 0; border-left: 2px solid var(--color-snow-dim); padding-left: 13px; color: var(--color-text-muted); font-size: .85rem; }
.jira-ac li b { color: var(--color-primary-dark); }
.jira-labels { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.jira-labels span { border: 1px solid var(--color-border-strong); border-radius: 3px; background: var(--color-bg-main); padding: 3px 8px; color: var(--color-text-muted); font-family: Consolas, monospace; font-size: .71rem; }
.jira-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-border); background: var(--color-bg-main); padding: 11px 16px; }
.jira-foot small { color: var(--color-text-faint); font-size: .73rem; }

/* ---------- Provenance strip (Make-A-Wish) ---------- */
.provenance { margin: 0 0 26px; border: 1px solid var(--color-border); border-radius: var(--np-radius); background: white; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.provenance .kicker { color: var(--color-accent-gold-dark); }
.provenance h3 { margin: 4px 0 7px; font-size: 1.05rem; }
.provenance p { margin: 0 0 12px; color: var(--color-text-muted); font-size: .87rem; }
.provenance-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.provenance-control { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-main); padding: 10px 12px; }
.provenance-control b { display: block; color: var(--color-info); font-family: Consolas, monospace; font-size: .73rem; }
.provenance-control span { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: .78rem; }
.provenance-control em { display: inline-block; margin-right: 5px; color: var(--color-success); font-style: normal; font-weight: 800; }
.provenance-control:nth-child(n+3) b { color: var(--color-text-faint); }
.provenance-control:nth-child(n+3) em { color: var(--color-text-faint); }

@media (max-width: 640px) {
  .thread-strip { flex-direction: column; align-items: flex-start; }
  .thread-strip .np-btn { width: 100%; justify-content: center; }
  .jira-chip.state { margin-left: 0; }
}

/* ============================================================
   VERIFY & RELEASE — the QA suite and the promotion gate.
   The gate is the point of the whole site: a release that is
   blocked by a control, not by a person remembering to check.
   ============================================================ */

.run-verdict { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 22px 0; border: 1px solid var(--color-border); border-left: 5px solid var(--color-border-strong); border-radius: var(--np-radius); background: white; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.run-verdict .verdict-mark { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-snow-dim); color: var(--color-text-muted); font-size: 1.15rem; font-weight: 900; }
.run-verdict strong { display: block; color: var(--color-text-muted); font-size: .95rem; }
.run-verdict p { margin: 3px 0 0; color: var(--color-text-muted); font-size: .84rem; }
.run-verdict.blocked { border-left-color: var(--color-danger); background: var(--color-danger-bg); }
.run-verdict.blocked .verdict-mark { background: var(--color-danger); color: white; }
.run-verdict.blocked strong { color: var(--color-primary-dark); }
.run-verdict.cleared { border-left-color: var(--color-success); background: var(--color-success-bg); }
.run-verdict.cleared .verdict-mark { background: var(--color-success); color: white; }
.run-verdict.cleared strong { color: var(--color-success); }

.suite-list { display: grid; gap: 10px; margin: 18px 0; }
.suite { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--color-border); border-radius: 9px; background: white; padding: 13px 15px; }
.suite b { display: block; color: var(--color-text-dark); font-size: .87rem; }
.suite span.detail { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: .79rem; }
.suite code { font-size: .74rem; }
.suite .state { border-radius: 999px; padding: 5px 11px; font-size: .71rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.suite .state.idle { background: var(--color-snow-dim); color: var(--color-text-muted); }
.suite .state.pass { background: var(--color-success-bg); color: var(--color-success); }
.suite .state.fail { background: var(--color-danger); color: white; }
.suite.is-fail { border-color: var(--color-danger); border-left: 4px solid var(--color-danger); background: var(--color-danger-bg); }
.suite.is-pass { border-left: 4px solid var(--color-success); }

.failure-detail { margin: 0 0 20px; overflow: hidden; border: 1px solid var(--color-danger); border-radius: 10px; background: white; }
.failure-detail[hidden] { display: none; }
.failure-detail > header { border-bottom: 1px solid var(--color-border); background: var(--color-danger-bg); padding: 12px 16px; }
.failure-detail > header strong { color: var(--color-primary-dark); font-size: .88rem; }
.failure-detail > header span { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: .78rem; }
.failure-body { padding: 15px 16px; }
.failure-body p { margin: 0 0 11px; color: var(--color-text-muted); font-size: .85rem; }
.failure-trace { margin: 0 0 13px; overflow-x: auto; border-radius: 8px; background: var(--color-code-bg); padding: 14px 15px; color: var(--color-text-light); font-family: Consolas, monospace; font-size: .76rem; line-height: 1.65; }
.failure-trace .bad { color: #ff9b9b; }
.failure-trace .good { color: #9fe0b4; }
.failure-trace .dim { color: rgba(255,255,255,.55); }

.gate-list { display: grid; gap: 9px; margin: 18px 0; }
.gate { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--color-border); border-radius: 9px; background: white; padding: 12px 14px; }
.gate .dot { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--color-snow-dim); color: var(--color-text-faint); font-size: .72rem; font-weight: 900; }
.gate b { display: block; color: var(--color-text-dark); font-size: .85rem; }
.gate span.detail { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: .77rem; }
.gate .state { border-radius: 999px; padding: 4px 10px; font-size: .69rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.gate .state.idle { background: var(--color-snow-dim); color: var(--color-text-muted); }
.gate .state.pass { background: var(--color-success-bg); color: var(--color-success); }
.gate .state.fail { background: var(--color-danger); color: white; }
.gate .state.halted { background: var(--color-warning-bg); color: var(--color-warning); }
.gate.is-pass .dot { background: var(--color-success); color: white; }
.gate.is-fail { border-color: var(--color-danger); border-left: 4px solid var(--color-danger); background: var(--color-danger-bg); }
.gate.is-fail .dot { background: var(--color-danger); color: white; }
.gate.is-halted { opacity: .62; }

.lab-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0; }
.lab-actions .run-note { color: var(--color-text-muted); font-size: .8rem; }

.canary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 16px; }
.canary[hidden] { display: none; }
.canary div { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-main); padding: 11px 12px; text-align: center; }
.canary b { display: block; color: var(--color-primary-dark); font-size: .8rem; }
.canary span { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: .73rem; }

@media (max-width: 640px) {
  .suite, .gate { grid-template-columns: 1fr; }
  .gate .dot { display: none; }
  .lab-actions .np-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   INTERACTIVE MATURITY ASSESSMENT
   Score eight disciplines, get a level and a gap list. The
   guidance text is read from the reference tables already on
   the page, so the two can never drift apart.
   ============================================================ */

.assess { margin: 26px 0 34px; border: 1px solid var(--color-border); border-radius: var(--np-radius); background: white; box-shadow: var(--shadow-md); }
.assess-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); background: linear-gradient(135deg, var(--color-snow), #fff); padding: 18px 22px; }
.assess-head h2 { margin: 0; font-size: 1.3rem; }
.assess-head p { margin: 4px 0 0; color: var(--color-text-muted); font-size: .84rem; }
.assess-progress { flex: 0 0 auto; border: 1px solid var(--color-border-strong); border-radius: 999px; background: white; padding: 7px 14px; color: var(--color-primary-dark); font-size: .8rem; font-weight: 800; }
.assess-body { padding: 20px 22px 24px; }

.assess-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--color-border); }
.assess-row:last-of-type { border-bottom: 0; }
.assess-row .assess-name { min-width: 0; }
.assess-row .assess-name b { display: block; color: var(--color-text-dark); font-size: .9rem; }
.assess-row .assess-name span { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: .78rem; }
.assess-scale { display: flex; gap: 6px; }
.assess-dot { width: 42px; height: 38px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: white; color: var(--color-text-muted); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1), border-color .16s, background .16s; }
.assess-dot:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.assess-dot:active { transform: scale(.94); }
.assess-dot[aria-checked="true"] { border-color: transparent; color: white; }
.assess-dot[aria-checked="true"][data-level="1"] { background: var(--color-level-1); }
.assess-dot[aria-checked="true"][data-level="2"] { background: var(--color-level-2); }
.assess-dot[aria-checked="true"][data-level="3"] { background: var(--color-level-3); }
.assess-dot[aria-checked="true"][data-level="4"] { background: var(--color-level-4); }
.assess-dot[aria-checked="true"][data-level="5"] { background: var(--color-level-5); }

.assess-result { margin-top: 22px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-main); padding: 20px 22px; }
.assess-result[hidden] { display: none; }
.assess-score { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.assess-badge { display: grid; width: 88px; height: 88px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-level-3); color: white; box-shadow: var(--shadow-md); }
.assess-badge b { font-size: 2rem; font-weight: 900; line-height: 1; }
.assess-badge span { margin-top: 2px; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.assess-score-copy { min-width: 0; flex: 1 1 260px; }
.assess-score-copy h3 { margin: 0 0 5px; font-size: 1.2rem; }
.assess-score-copy p { margin: 0; color: var(--color-text-muted); font-size: .87rem; }

.assess-bars { display: grid; gap: 8px; margin-top: 20px; }
.assess-bar { display: grid; grid-template-columns: 190px 1fr 30px; gap: 12px; align-items: center; }
.assess-bar > b { color: var(--color-text-muted); font-size: .78rem; font-weight: 700; }
.assess-bar .track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--color-snow-dim); }
.assess-bar .fill { height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.23,1,.32,1); }
.assess-bar > span { color: var(--color-primary-dark); font-size: .78rem; font-weight: 800; text-align: right; }
.assess-bar.is-low > b { color: var(--color-primary-dark); font-weight: 800; }

.assess-gaps { margin-top: 22px; }
.assess-gaps > b { display: block; margin-bottom: 9px; color: var(--color-primary-dark); font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.assess-gap { margin-bottom: 10px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent-gold); border-radius: 8px; background: white; padding: 13px 15px; }
.assess-gap strong { display: block; color: var(--color-text-dark); font-size: .87rem; }
.assess-gap em { display: block; margin: 3px 0 6px; color: var(--color-accent-gold-dark); font-size: .74rem; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.assess-gap p { margin: 0; color: var(--color-text-muted); font-size: .84rem; }
.assess-note { margin-top: 18px; color: var(--color-text-faint); font-size: .78rem; }

@media (max-width: 780px) {
  .assess-row { grid-template-columns: 1fr; }
  .assess-scale { justify-content: space-between; }
  .assess-dot { width: 100%; }
  .assess-bar { grid-template-columns: 1fr 34px; }
  .assess-bar .track { grid-column: 1 / -1; order: 3; }
}


/* ============================================================
   HERO PORTRAIT
   The image is alpha-feathered in the file itself, so it dissolves
   into the hero gradient instead of ending on a hard edge. It sits
   below .np-hero .container (z-index 1) and below the dot texture,
   which lays over it and helps it read as part of the background.
   ============================================================ */
.hero-portrait {
  position: absolute;
  top: 6px;
  /* Hug the right edge of the 1200px content column, then push a little
     further out so the feathered edge falls outside the reading area. */
  right: calc(50% - (var(--np-maxw) / 2) - 36px);
  width: clamp(190px, 21vw, 296px);
  margin: 0;
  z-index: 0;
  pointer-events: none;
  transform: rotate(-5deg);
}

.hero-portrait::before {
  content: "";
  position: absolute;
  inset: -14%;
  background: radial-gradient(circle at 50% 44%, rgba(227,178,60,.22), rgba(227,178,60,0) 62%);
  pointer-events: none;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.92) drop-shadow(0 18px 34px rgba(0,0,0,.34));
}

/* Below the wide breakpoint the right edge would start crowding the lede,
   so pull the portrait in and shrink it before hiding it outright. */
@media (max-width: 1272px) {
  .hero-portrait { right: 24px; }
}

@media (max-width: 1080px) {
  .hero-portrait { width: clamp(150px, 18vw, 200px); top: 14px; }
  .np-hero h1, .np-hero p.lede { max-width: 24ch; }
  .np-hero p.lede { max-width: 46ch; }
}

@media (max-width: 860px) {
  .hero-portrait { display: none; }
  .np-hero h1 { max-width: 18ch; }
  .np-hero p.lede { max-width: 62ch; }
}

/* "big" carries the welcome visually rather than by shouting in caps. */
.hero-big {
  color: var(--color-accent-gold);
  font-size: 1.18em;
  letter-spacing: -.01em;
}

/* The balloon is a child of the figure so it tracks the portrait through
   every breakpoint. The parent is rotated -5deg; +8deg here lands it at a
   net +3deg, tilted the opposite way so the pair does not look glued. */
.hero-say {
  position: absolute;
  left: -52%;
  top: 60%;
  transform: rotate(8deg);
  transform-origin: 100% 0;
  background: var(--color-snow, #fdfbf8);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* Tail: a small rotated square tucked under the pill's top-right corner,
   pointing back at the beard. */
.hero-say::after {
  content: "";
  position: absolute;
  right: 14px;
  top: -5px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-radius: 3px;
  transform: rotate(45deg);
  z-index: -1;
}

@media (max-width: 1080px) {
  .hero-say { font-size: .82rem; padding: 7px 13px; left: -58%; }
}

/* ============================================================
   HERO TILES
   App-icon squares rather than a pair of adjacent pill buttons.
   The 3D comes from a solid offset edge (the "thickness" of the key)
   plus a cast shadow; pressing shortens the edge and drops the face
   onto it, so the travel distance and the edge height stay equal.
   ============================================================ */
.hero-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.tile {
  --tile-lift: 7px;
  --tile-cast: rgba(0,0,0,.34);
  --tile-cast-strong: rgba(0,0,0,.40);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  width: 172px;
  height: 172px;
  padding: 18px 16px 16px;
  border-radius: 30px;
  text-decoration: none;
  background: var(--tile-face);
  color: var(--tile-ink);
  box-shadow:
    inset 0 2px 0 var(--tile-gloss),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 var(--tile-lift) 0 var(--tile-edge),
    0 calc(var(--tile-lift) + 10px) 20px var(--tile-cast);
  transition: transform .13s ease, box-shadow .13s ease;
}

.tile:hover,
.tile:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 var(--tile-gloss),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 calc(var(--tile-lift) + 2px) 0 var(--tile-edge),
    0 calc(var(--tile-lift) + 14px) 26px var(--tile-cast-strong);
}

.tile:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 4px;
}

/* Pressed: the face travels exactly the height of the edge it sits on. */
.tile:active {
  transform: translateY(var(--tile-lift));
  box-shadow:
    inset 0 2px 0 var(--tile-gloss),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 0 var(--tile-edge),
    0 3px 8px var(--tile-cast);
}

.tile-icon {
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: auto;
  opacity: .92;
}

.tile-icon svg { width: 100%; height: 100%; display: block; }

.tile-label {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.tile-sub {
  font-size: .8rem;
  font-weight: 600;
  opacity: .72;
}

.tile-gold {
  --tile-face: linear-gradient(168deg, #f0c95a 0%, var(--color-accent-gold) 52%, #c8992c 100%);
  --tile-edge: #9a7420;
  --tile-gloss: rgba(255,255,255,.62);
  --tile-ink: var(--color-primary-darker);
}

.tile-frost {
  --tile-face: linear-gradient(168deg, #fdfbf8 0%, #f0f4f8 55%, #dbe4ec 100%);
  --tile-edge: #a3b0bd;
  --tile-gloss: rgba(255,255,255,.9);
  --tile-ink: var(--color-primary-dark);
}

@media (max-width: 1080px) {
  .hero-tiles { gap: 34px; }
  .tile { width: 152px; height: 152px; border-radius: 27px; }
  .tile-label { font-size: .96rem; }
}

@media (max-width: 480px) {
  .hero-tiles { gap: 22px; }
  .tile { width: 144px; height: 144px; border-radius: 26px; padding: 15px 14px 14px; }
}

/* The press animation is the point of the control, so keep the shadow
   change but drop the movement for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .tile { transition: box-shadow .13s ease; }
  .tile:hover, .tile:focus-visible, .tile:active { transform: none; }
}

/* ============================================================
   TILE GRID
   The same pressable tile as the hero, arranged as an app home
   screen. Used on the Blueprint page in place of eight buttons
   in a row, split into the story you follow and the reference
   you consult.
   ============================================================ */
.tile-block { margin-top: 34px; }

.tile-block-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 18px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
  max-width: 880px;
  margin: 0 auto;
}

/* In the grid the tile sizes itself from the column and stays square. */
.tile-grid .tile {
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  /* Snow-coloured pages need a far lighter cast than the dark hero. */
  --tile-cast: rgba(43,47,51,.20);
  --tile-cast-strong: rgba(43,47,51,.26);
}

/* Grid tiles are larger than the hero pair, so the glyph scales with them
   rather than leaving a hole in the middle of the square. */
.tile-grid .tile-icon { width: 46px; height: 46px; }

/* Position in the sequence, so the four Labs read as one story. */
.tile-step {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .55;
}

.tile-red {
  --tile-face: linear-gradient(168deg, #c8323a 0%, var(--color-primary) 46%, #8d1520 100%);
  --tile-edge: #660e13;
  --tile-gloss: rgba(255,255,255,.30);
  --tile-ink: var(--color-text-light);
}

.tile-red .tile-sub { opacity: .82; }

.tile-plain {
  --tile-face: linear-gradient(168deg, #ffffff 0%, #f7f9fb 55%, #e7edf3 100%);
  --tile-edge: #b3bfcc;
  --tile-gloss: rgba(255,255,255,.95);
  --tile-ink: var(--color-primary-dark);
}

/* A set of five would auto-fit to 4 + 1. Give it its own track count. */
.tile-grid.row-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1060px;
}

/* Between these widths auto-fit lands on three columns, which leaves a set
   of four sitting as 3 + 1. Force 2 x 2 and cap the width so the squares do
   not balloon to fill the container. */
@media (max-width: 900px) {
  .tile-grid,
  .tile-grid.row-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 440px;
  }
}

/* Five tiles at three across reads better than 2 + 2 + 1 in this band. */
@media (min-width: 561px) and (max-width: 900px) {
  .tile-grid.row-five { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 660px; }
}

@media (max-width: 520px) {
  /* auto-fit would drop to a single 340px square here, which is far too
     large; two columns keeps the app-screen feel on a phone. */
  .tile-grid, .tile-grid.row-five { grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: none; }
  .tile-grid .tile { border-radius: 24px; padding: 14px 13px 13px; }
  .tile-grid .tile-label { font-size: .9rem; }
  .tile-grid .tile-icon { width: 30px; height: 30px; }
}

/* ============================================================
   PRESSABLE: THE REMAINING CONTROLS
   These predate the button model and were flat. Same construction,
   smaller scale. Declared after their original rules so they win
   without needing extra specificity.
   ============================================================ */
.tree-tool-button {
  --tt-lift: 3px;
  position: relative;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(168deg, #ffffff 0%, #f7f9fb 55%, #e9eef4 100%);
  color: var(--color-primary-dark);
  box-shadow:
    inset 0 0 0 1px rgba(176,30,36,.26),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 var(--tt-lift) 0 #b3bfcc,
    0 calc(var(--tt-lift) + 5px) 9px rgba(43,47,51,.20);
  transition: transform .13s ease, box-shadow .13s ease;
}

.tree-tool-button:hover,
.tree-tool-button:focus-visible {
  background: linear-gradient(168deg, #ffffff 0%, #f7f9fb 55%, #e9eef4 100%);
  transform: translateY(-1px);
}

.tree-tool-button:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 3px;
}

.tree-tool-button:active {
  transform: translateY(var(--tt-lift));
  box-shadow:
    inset 0 0 0 1px rgba(176,30,36,.26),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 #b3bfcc,
    0 2px 4px rgba(43,47,51,.20);
}

/* The maturity scale reads as a row of keys. Choosing a level presses that
   key down and leaves it down — the selection is the pressed state, which is
   the one place the model earns its keep as more than decoration. */
.assess-dot {
  --dot-lift: 3px;
  position: relative;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(168deg, #ffffff 0%, #f6f8fb 55%, #e7edf4 100%);
  box-shadow:
    inset 0 0 0 1px rgba(43,47,51,.16),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 var(--dot-lift) 0 #bcc7d3,
    0 calc(var(--dot-lift) + 4px) 8px rgba(43,47,51,.18);
  transition: transform .13s ease, box-shadow .13s ease, background .13s ease, color .13s ease;
}

.assess-dot:hover { border: 0; color: var(--color-primary-dark); }

.assess-dot:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 3px;
}

.assess-dot:active {
  transform: translateY(var(--dot-lift));
  box-shadow:
    inset 0 0 0 1px rgba(43,47,51,.16),
    0 0 0 #bcc7d3,
    0 2px 4px rgba(43,47,51,.18);
}

.assess-dot[aria-checked="true"] {
  border: 0;
  color: white;
  transform: translateY(var(--dot-lift));
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.34),
    0 0 0 rgba(0,0,0,0);
}

@media (prefers-reduced-motion: reduce) {
  .tree-tool-button:hover,
  .tree-tool-button:focus-visible,
  .tree-tool-button:active,
  .assess-dot:active,
  .assess-dot[aria-checked="true"] { transform: none; }
}

/* Two of these can sit next to each other; without this they run together
   as one unbroken line of link text. */
.np-card-link + .np-card-link { margin-left: 20px; }

/* One footnote per workbench page, replacing what used to be a VPN banner
   repeated at every step. Where the workbench actually lives is a detail of
   corporate networking, not the point of the demonstration. */
.workbench-note {
  margin: 0 0 40px;
  color: var(--color-text-faint);
  font-size: .78rem;
  line-height: 1.55;
  max-width: 62ch;
}

.workbench-note span {
  margin-right: 4px;
  color: var(--color-accent-gold-dark);
  font-weight: 800;
}

.intranet-banner sup {
  margin-left: 1px;
  color: var(--color-accent-gold-dark);
  font-size: .8em;
}

/* ============================================================
   OBSERVE & LEARN
   Phase 6. The lab where a production signal becomes the next
   requirement. Signal tiles animate from a baseline to a current
   reading; the SLO bar burns; the proposed story reuses the same
   .jira-ticket component as Requirements, on purpose — the loop
   closing should look like the artefact it started with.
   ============================================================ */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.signal {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-border-strong);
  border-radius: 10px;
  background: white;
  padding: 14px 15px;
}

.signal b {
  display: block;
  color: var(--color-text-dark);
  font-family: Georgia, serif;
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.signal .label {
  display: block;
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 700;
}

.signal .delta {
  display: block;
  margin-top: 7px;
  color: var(--color-text-faint);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  min-height: 1em;
}

.signal.good { border-top-color: var(--color-success); }
.signal.good b, .signal.good .delta { color: var(--color-success); }
.signal.warn { border-top-color: var(--color-accent-gold); }
.signal.warn b, .signal.warn .delta { color: var(--color-accent-gold-dark); }
.signal.bad  { border-top-color: var(--color-danger); background: var(--color-danger-bg); }
.signal.bad b, .signal.bad .delta { color: var(--color-danger); }

/* Error budget. The fill is set from script; the marker is the SLO target. */
.slo {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-snow);
  padding: 15px 17px;
}

.slo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.slo-head b { color: var(--color-primary-dark); font-size: .85rem; }
.slo-head span { color: var(--color-text-faint); font-size: .76rem; font-weight: 700; }

.slo-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--color-snow-dim);
  overflow: hidden;
}

.slo-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-success), var(--color-accent-gold) 62%, var(--color-danger));
  transition: width .9s cubic-bezier(.23,1,.32,1);
}

.slo-foot { margin: 9px 0 0; color: var(--color-text-muted); font-size: .78rem; }

/* The alert that fired. Deliberately about the product, not the servers. */
.alert-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--color-danger-bg);
  padding: 14px 17px;
}

.alert-card[hidden] { display: none; }

.alert-card .siren {
  display: grid;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--color-danger);
  color: white;
  font-size: .8rem;
  font-weight: 800;
}

.alert-card b { display: block; color: var(--color-danger); font-size: .92rem; }
.alert-card p { margin: 4px 0 0; color: var(--color-text-muted); font-size: .84rem; }
.alert-card .who {
  display: block;
  margin-top: 7px;
  color: var(--color-text-faint);
  font-size: .74rem;
  font-weight: 700;
}

/* "Proposed", not "Ready" — a signal drafts the next story, a person approves it. */
.jira-chip.proposed { background: var(--color-warning-bg); color: var(--color-accent-gold-dark); }
.jira-labels span.new { border-style: dashed; }

@media (max-width: 860px) {
  .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .signal-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .slo-fill { transition: none; }
}

/* =====================================================================
   Documentation Lab
   A registered document is an artefact with a source, a version and an
   owner. These styles carry three states — untouched, drifted, published
   — plus the one line the reviewer is expected to refuse.
   ===================================================================== */

/* Small variant of the pressable button. Keeps the lift, loses the bulk,
   because a doc card holds a review action rather than a page CTA. */
.np-btn-sm {
  --btn-lift: 3px;
  padding: 8px 15px;
  border-radius: 11px;
  font-size: .82rem;
}

.doc-set {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.doc-card {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border-strong);
  border-radius: 10px;
  background: white;
  padding: 15px 17px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, background .2s ease;
}

.doc-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.doc-card-head > div { min-width: 0; }
.doc-card h3 { margin: 5px 0 0; color: var(--color-primary-dark); font-size: .98rem; }

.doc-key {
  display: inline-block;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-snow);
  padding: 2px 9px;
  color: var(--color-text-muted);
  font-family: Consolas, monospace;
  font-size: .7rem;
}

.doc-meta { display: block; margin-top: 5px; color: var(--color-text-faint); font-size: .76rem; }

.doc-status {
  flex: 0 0 auto;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-snow);
  padding: 3px 11px;
  color: var(--color-text-faint);
  font-size: .74rem;
  font-weight: 700;
}

/* Drifted, clean, refused, shipped. The border repeats the status colour so
   a scanned set can be read down the left edge without reading a word. */
.doc-card.drift { border-left-color: var(--color-danger); }
.doc-card.drift .doc-status { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); }
.doc-card.missing { border-left-color: var(--color-accent-gold); }
.doc-card.missing .doc-status { border-color: var(--color-accent-gold); background: var(--color-warning-bg); color: var(--color-accent-gold-dark); }
.doc-card.clean { border-left-color: var(--color-success); }
.doc-card.clean .doc-status { border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); }
.doc-card.accepted { border-left-color: var(--color-success); background: linear-gradient(135deg, #fff, var(--color-success-bg)); }
.doc-card.accepted .doc-status { border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); }

.doc-finding { margin: 11px 0 0; color: var(--color-text-muted); font-size: .84rem; }
.doc-finding[hidden] { display: none; }

/* The proposed edit, shown as a patch rather than as a finished page: a
   draft you have to read line by line is harder to rubber-stamp. */
.doc-diff {
  margin: 12px 0 0;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--color-code-bg);
  padding: 13px 15px;
  color: var(--color-text-light);
  font-family: Consolas, monospace;
  font-size: .76rem;
  line-height: 1.6;
}

.doc-diff[hidden] { display: none; }
/* The newlines in the markup do the wrapping, so these stay inline — making
   them blocks on top of a pre-formatted source double-spaces every line. */
.doc-diff .add { color: #9fe0b4; }
.doc-diff .del { color: #ff9b9b; }
.doc-diff .dim { color: rgba(255,255,255,.55); }

/* The refusable line. Gold, not green — it is not on its way in yet. */
.doc-diff .flag {
  display: block;
  border-left: 3px solid var(--color-accent-gold);
  padding-left: 9px;
  color: var(--color-accent-gold);
  font-weight: 700;
}

.doc-diff .flag.refused { border-left-color: #ff9b9b; color: #ff9b9b; text-decoration: line-through; }
.doc-diff .flag.replacement { border-left-color: #9fe0b4; color: #9fe0b4; font-weight: 400; text-decoration: none; }

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.doc-actions[hidden] { display: none; }
.doc-note { color: var(--color-text-muted); font-size: .78rem; }

.doc-claim-review {
  margin-top: 12px;
  border: 1px solid var(--color-accent-gold);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--color-warning-bg);
  padding: 13px 15px;
}

.doc-claim-review[hidden] { display: none; }
.doc-claim-review b { color: var(--color-accent-gold-dark); font-size: .88rem; }
.doc-claim-review p { margin: 5px 0 0; color: var(--color-text-muted); font-size: .82rem; }
.doc-claim-review.settled { border-color: var(--color-success); background: var(--color-success-bg); }
.doc-claim-review.settled b { color: var(--color-success); }

.doc-card.flagged { border-left-color: var(--color-accent-gold); }

.doc-release {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--color-success);
  border-radius: 10px;
  background: white;
  box-shadow: var(--shadow-md);
}

.doc-release[hidden] { display: none; }
.doc-release > header { border-bottom: 1px solid var(--color-border); background: var(--color-success-bg); padding: 12px 16px; }
.doc-release > header strong { color: var(--color-success); font-size: .9rem; }
.doc-release > header span { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: .78rem; }
.doc-release-body { padding: 14px 16px; }
.doc-release-list { margin: 0; padding: 0; list-style: none; }

.doc-release-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  border-bottom: 1px solid var(--color-border);
  padding: 9px 0;
}

.doc-release-list li:last-child { border-bottom: 0; }
.doc-release-list b { min-width: 118px; color: var(--color-primary-dark); font-family: Consolas, monospace; font-size: .78rem; }
.doc-release-list span { flex: 1 1 180px; color: var(--color-text-dark); font-size: .82rem; }
.doc-release-list em { color: var(--color-text-faint); font-size: .76rem; font-style: normal; }
.doc-release-list li.unchanged b, .doc-release-list li.unchanged span { color: var(--color-text-faint); }
.doc-release-foot { margin: 12px 0 0; color: var(--color-text-muted); font-size: .8rem; }

@media (max-width: 560px) {
  .doc-status { align-self: flex-start; }
  .doc-release-list b { min-width: 0; }
}

/* Six story tiles. Same ladder as row-five: six across when there is room,
   three in the middle band, two on a phone — never a lonely trailing tile. */
.tile-grid.row-six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 1240px;
}

@media (min-width: 561px) and (max-width: 1080px) {
  .tile-grid.row-six { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 660px; }
}

@media (max-width: 560px) {
  .tile-grid.row-six { grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: none; }
}

/* ============================================================
   QUIET WORKSHOP DOOR + TUCKED-AWAY DETAIL  (added 20 Aug 2026)
   The front of the site stays simple; these two patterns are the
   understated ways a curious visitor finds the technical layer.
   ============================================================ */
.workshop-door {
  font-size: .95rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 22px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--np-radius-lg);
  background: var(--color-bg-wash);
}
.workshop-door::before { content: "🔧 "; }
.workshop-door a {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--color-accent-gold);
}
.workshop-door a:hover { color: var(--color-primary-dark); }

.np-quiet-details {
  border: 1px solid var(--color-border);
  border-radius: var(--np-radius);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  margin: 26px 0;
}
.np-quiet-details > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--color-text-muted);
  list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.np-quiet-details > summary::-webkit-details-marker { display: none; }
.np-quiet-details > summary::before {
  content: "▸";
  color: var(--color-accent-gold-dark);
  transition: transform .15s ease;
}
.np-quiet-details[open] > summary::before { transform: rotate(90deg); }
.np-quiet-details > summary:hover { color: var(--color-primary-dark); }
.np-quiet-details > summary:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 2px;
  border-radius: var(--np-radius);
}
.np-quiet-details[open] > summary {
  color: var(--color-primary-dark);
  border-bottom: 1px solid var(--color-border);
}
.np-quiet-details-body { padding: 14px 18px 18px; }
@media (prefers-reduced-motion: reduce) {
  .np-quiet-details > summary::before { transition: none; }
}