/* ============================================================ Brad O'Haire portfolio - Principles page styles Scoped to /principles. Reuses the design tokens from site.css (--bg, --panel, --panel2, --line, --ink, --muted, --dim, --accent, --accent2, --ok, --radius, --maxw). Does NOT redefine tokens. Echoes the lab rollout's details/summary disclosure pattern (numbered dot, title + line, chevron) so the chrome is consistent across the site. ============================================================ */ /* ---- Intro ---- */ .pr-lede{color:var(--muted);font-size:clamp(16px,2.1vw,18px);max-width:760px;margin:-8px 0 0} /* the five-item index: a compact, scannable jump list into the cards below. Five is an odd count, so equal-width grid tracks at intermediate widths always leave a lonely trailing cell. To stay full and orphan-free we use only two clean states: one 5-up row when there is room for all five, and a 1-up full-width stack below that. No width in between can split 5 evenly, so we never land on an orphan. */ .pr-index{list-style:none;margin:26px 0 0;padding:0;display:grid; grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:none} .pr-index li{margin:0;min-width:0} /* below the 5-up threshold, stack to a single full-width column (no orphan cell) */ @media (max-width:860px){ .pr-index{grid-template-columns:1fr} } .pr-index a{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:12px 15px;transition:border-color .2s ease,background .2s ease,transform .2s ease} .pr-index a:hover{border-color:#37405a;transform:translateY(-2px)} /* active marker: the index item whose card is in view gets an accent edge (set by principles.js) */ .pr-index a.is-active{border-color:rgba(110,168,254,.5);background:rgba(110,168,254,.06)} .pr-index .pri-n{flex:0 0 auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums; letter-spacing:.5px;color:var(--accent)} .pr-index .pri-t{color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.35} /* ---- "How to read this" helper, same treatment as the lab rollout-howto ---- */ .pr-howto{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13.5px; line-height:1.6;max-width:820px;margin:0 0 24px;padding:14px 16px;background:var(--panel2); border:1px solid var(--line);border-radius:12px} .pr-howto-tag{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; color:var(--accent);border:1px solid rgba(110,168,254,.3);border-radius:5px;padding:2px 8px;margin-top:1px} /* ============================================================ The five principles: native

disclosures. Reuses the lab rollout vocabulary (numbered marker, title + sub line, rotating + chevron). Keyboard- and SR-operable with no JS, collapsed-but-readable by default. ============================================================ */ .pr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} /* per-card reveal: each card rises in on scroll, staggered by principles.js via --pr-i. site.css owns the base .reveal on the

. */ .pr-chev{flex:0 0 auto;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center; color:var(--dim);font-size:19px;font-weight:400;line-height:1;border:1px solid var(--line);border-radius:8px; margin-top:3px;transition:transform .25s ease,color .2s ease,border-color .2s ease} .pr-sum:hover .pr-chev{color:var(--ink);border-color:#37405a} .pr-d[open] .pr-chev{transform:rotate(45deg);color:var(--accent);border-color:rgba(110,168,254,.45)} /* the expanded body */ .pr-body{padding:18px 20px 20px} /* applied block */ .pr-applied-k{color:var(--dim);font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; margin:0 0 12px} .pr-applied-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;max-width:820px} .pr-applied-list li{position:relative;color:var(--muted);font-size:14.5px;line-height:1.6;padding-left:20px} /* a small accent tick marker per applied point */ .pr-applied-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px; background:linear-gradient(135deg,var(--accent),var(--accent2))} .pr-applied-list li b{color:var(--ink);font-weight:600} /* the anti-pattern callout: a bordered, red-edged strip so it reads as the failure avoided */ .pr-anti{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13.5px; line-height:1.6;max-width:820px;margin:18px 0 0;padding:14px 16px;background:var(--panel2); border:1px solid rgba(255,107,107,.28);border-left:3px solid #ff6b6b;border-radius:10px} .pr-anti-tag{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase; color:#ff6b6b;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.4); border-radius:999px;padding:4px 11px;margin-top:1px;white-space:nowrap} /* ---- closing lines ---- */ .pr-close{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:760px;margin:30px 0 0} .pr-more{margin:16px 0 0;font-size:13.5px;font-weight:600} .pr-more a{color:var(--accent)} .pr-more a:hover{text-decoration:underline} /* ============================================================ Mobile: <=480px. Cards reflow, the chevron drops under the title is not needed (it stays inline), nothing overflows. ============================================================ */ @media (max-width:480px){ .pr-index{gap:8px} .pr-index a{padding:11px 13px} .pr-howto{padding:13px 13px;font-size:13px} .pr-sum{gap:12px;padding:16px 14px} .pr-n{width:30px;height:30px;font-size:12px} .pr-name{font-size:15.5px} .pr-body{padding:16px 14px 18px} .pr-applied-list li{font-size:14px} .pr-anti{padding:13px 13px} } /* very narrow: keep the numbered marker and chevron from crowding the heading */ @media (max-width:360px){ .pr-sum{gap:10px} .pr-n{width:28px;height:28px} .pr-applied-list li{padding-left:18px} } /* ============================================================ Reduced motion: every card shown at full strength immediately, no per-item lift, no chevron-rotate transition, no hover lift. The expand/collapse still works (it is native

); only the motion is dropped. Everything stays fully readable. ============================================================ */ @media (prefers-reduced-motion: reduce){ .pr-card .pr-d{opacity:1;transform:none;transition:none} .pr-chev{transition:none} .pr-index a{transition:none} .pr-index a:hover{transform:none} .pr-sum:hover{background:transparent} } /* ============================================================ Deep dive: "How the safety floor actually works". The code-level proof behind principle 02. Reuses the tokens and the panel / amber / red callout vocabulary already on the page so it reads as part of the same system. The illustrative code block scrolls INTERNALLY (overflow-x:auto) and never widens the page on mobile. ============================================================ */ #pr-deepdive{padding-top:0} .dd-kicker{color:var(--muted);font-size:clamp(15px,2vw,17px);line-height:1.6;max-width:760px;margin:-6px 0 0} /* the narrative paragraphs */ .dd-narrative{max-width:760px;margin:22px 0 0;display:flex;flex-direction:column;gap:14px} .dd-narrative p{color:var(--muted);font-size:15px;line-height:1.7;margin:0} .dd-narrative b{color:var(--ink);font-weight:600} /* ---- the illustrative code block ---- */ .dd-code{margin:26px 0 0;background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .dd-code-cap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px; border-bottom:1px solid var(--line);background:rgba(110,168,254,.04)} .dd-code-tag{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; color:var(--accent);background:rgba(110,168,254,.12);border:1px solid rgba(110,168,254,.4); border-radius:999px;padding:4px 11px;white-space:nowrap} .dd-code-note{color:var(--dim);font-size:12.5px;line-height:1.5;min-width:0} /* the pre is the horizontal scroll container, so a long line scrolls inside the box and never pushes the page wider. tabindex on the

 makes the
   scroll region keyboard-reachable; site.css gives it a focus-visible ring. */
.dd-code pre{margin:0;padding:18px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dd-code pre:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0 0 var(--radius) var(--radius)}
.dd-code code{display:block;white-space:pre;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13px;line-height:1.7;color:#e7e9ee;tab-size:2}
/* syntax tints, all checked for AA contrast on the dark panel */
.dd-code .c-k{color:#9d7bff;font-weight:600}   /* keywords  */
.dd-code .c-f{color:#6ea8fe}                    /* fn names  */
.dd-code .c-s{color:#7fd6a8}                    /* strings   */
.dd-code .c-c{color:#9aa3b5;font-style:italic}  /* comments, lifted above --dim for readable AA */

/* ---- tradeoffs + failure-mode subhead ---- */
.dd-subhead{color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.2px;margin:30px 0 0}

/* two-up on wide, single column when it gets tight (well before the 480 break) */
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 0;align-items:start}
@media (max-width:760px){.dd-grid{grid-template-columns:1fr}}

.dd-block{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.dd-tradeoff{border-left:3px solid var(--accent2)}
.dd-failure{border-left:3px solid #ff6b6b}
.dd-block-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  border-radius:999px;padding:4px 11px;margin:0 0 12px}
.dd-tag-amber{color:var(--accent2);background:rgba(157,123,255,.12);border:1px solid rgba(157,123,255,.4)}
.dd-tag-red{color:#ff6b6b;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.4)}
.dd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.dd-list li{position:relative;color:var(--muted);font-size:14px;line-height:1.6;padding-left:18px}
.dd-list li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.dd-list li b{color:var(--ink);font-weight:600}

/* ---- deep-dive mobile <=480px: tighten padding, nothing overflows ---- */
@media (max-width:480px){
  .dd-code-cap{padding:13px 14px}
  .dd-code pre{padding:15px 14px}
  .dd-code code{font-size:12.5px}
  .dd-block{padding:14px 14px}
  .dd-list li{font-size:13.5px}
}

/* deep-dive reveals ride the shared .reveal in site.css; this only ensures
   the code block and callouts never animate under reduced motion. */
@media (prefers-reduced-motion: reduce){
  .dd-code,.dd-block{transition:none}
}