/* Shared base for /design/* pages. Each direction's own file sets the type system and color. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
p, h1, h2, h3, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 12px; background: #fff; color: #000; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; }
svg.ac { fill: currentColor; flex: none; }

/* tooltip */
.tip { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; max-width: 300px; padding: 7px 10px; border-radius: 8px;
  font: 500 12.5px/1.35 var(--sans, system-ui); background: var(--tip-bg, #111); color: var(--tip-fg, #fff);
  box-shadow: 0 6px 24px rgba(0,0,0,.25); opacity: 0; transition: opacity .12s; }
.tip.on { opacity: 1; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* design-study switcher (not part of the product) */
.studies { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  font: 500 12px/1.4 system-ui, sans-serif; background: #f1f0ec; color: #555; border-top: 1px solid #dddbd3; }
.studies a { text-decoration: none; padding: 4px 8px; border-radius: 999px; }
.studies a:hover { background: #e4e2db; }
.studies a[aria-current] { background: #1d1d1b; color: #fff; }
.studies-lab { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: #8a877d; }

/* day strip + loud log: structure only; colors per direction */
.strip { width: 100%; height: auto; overflow: visible; }
.strip .hot { cursor: pointer; }
.strip .dot { transition: r .15s; }
.strip .dot:hover { r: 4.5; }
.log { display: grid; gap: 0; }
.log-item { display: grid; grid-template-columns: 68px 44px 1fr auto; gap: 0 12px; align-items: center; padding: 14px 0; position: relative; }
.log-time { font-variant-numeric: tabular-nums; }
.log-node { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.log-node i { position: absolute; right: -3px; top: -3px; width: 18px; height: 18px; border-radius: 50%; font: 600 10px/18px var(--sans, system-ui); text-align: center; font-style: normal; }
.log-name { font-weight: 600; }
.log-name .cs { font-weight: 400; opacity: .7; font-family: var(--mono, monospace); font-size: .85em; }
.log-db { text-align: right; line-height: 1; }
.log-db b { display: block; font-variant-numeric: tabular-nums; }
.log-db small { font-size: 11px; opacity: .7; }
@media (max-width: 520px) {
  .log-item { grid-template-columns: 44px 1fr auto; grid-template-areas: "node time db" "node body db"; gap: 2px 12px; }
  .log-time { grid-area: time; } .log-node { grid-area: node; } .log-body { grid-area: body; } .log-db { grid-area: db; }
}