/* world.css — the Build world's chrome. The world fills the screen; every
   overlay is small, floats over it, and uses the site tokens. Roles:
   truth = --warm, belief = --teal, measurement = --blue, failure = --red. */
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: var(--font-body, system-ui); color: var(--text); -webkit-tap-highlight-color: transparent; }
.w-stage { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.w-canvas { display: block; max-width: 100%; touch-action: none; }
.w-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.w-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .02em; line-height: 1.2;
  padding: .18rem .45rem; border-radius: 6px; color: var(--text);
  background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  transition: opacity var(--t2, .26s);
}
.w-label[data-role="belief"] { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.w-label[data-role="truth"] { color: var(--warm); border-color: color-mix(in srgb, var(--warm) 45%, transparent); }
.w-label[data-role="measure"] { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.w-label[data-role="fail"] { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
[data-theme="light"] .w-label { background: color-mix(in srgb, #fff 80%, transparent); }

/* ── the program drawer (code surfaces stay dark in both themes) ───────── */
.w-drawer {
  --code-bg: #0c0e15; --code-ink: #e2ddd5; --code-dim: #8a847b;
  --code-font: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;  /* a clear @ */
  position: fixed; z-index: 30; right: 12px; top: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px));
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: var(--code-bg); color: var(--code-ink); border: 1px solid #262b3a;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  transform: translateX(calc(100% + 24px)); transition: transform var(--t4, .82s) var(--ease-spring, ease);
}
.w-drawer.open { transform: none; }
.wd-head { display: flex; align-items: baseline; gap: .8rem; padding: .7rem .9rem; border-bottom: 1px solid #22273a; }
.wd-file { font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--code-ink); letter-spacing: .02em; }
.wd-status { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--code-dim); margin-left: auto; text-align: right; }
.wd-status[data-s="ready"] { color: #5ce88e; }
.wd-status[data-s="failed"] { color: #e8a87c; }
.wd-code { margin: 0; padding: .7rem 0; overflow: auto; flex: 1; font-family: var(--code-font); font-size: 12.5px; line-height: 1.75; color: var(--code-ink); background: none; border: 0; }
.wd-line { display: flex; align-items: baseline; padding: 0 .9rem; min-height: 1.75em; }
.wd-t { white-space: pre; }
.wd-line .k { color: #b07aff; } .wd-line .n { color: #e8d06a; } .wd-line .f { color: #6b9eff; } .wd-line .c { color: var(--code-dim); font-style: italic; }
.wd-tag { margin-left: auto; flex: none; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--code-dim); padding-left: .6rem; }
.wd-line[data-kind="made"] { box-shadow: inset 2px 0 0 #3d9e8d; }
.wd-line[data-kind="made"] .wd-tag { color: #5cc9b5; }
.wd-line[data-kind="yours"] { box-shadow: inset 2px 0 0 #5ce88e; background: rgba(92, 232, 142, .07); }
.wd-line[data-kind="yours"] .wd-tag { color: #5ce88e; }
.wd-line[data-kind="shown"] .wd-tag { color: var(--code-dim); }
.wd-line[data-kind="preview"] { opacity: .55; }
.wd-line[data-kind="blank"] { box-shadow: inset 2px 0 0 #e8a87c; background: rgba(232, 168, 124, .09); }
.wd-line[data-kind="blank"] .wd-tag { color: #e8a87c; }
.wd-edit { margin: .35rem .9rem .8rem; padding: .7rem; border-radius: 10px; background: #141824; border: 1px solid #2b3144; white-space: normal; }
.wd-ask { margin: 0 0 .6rem; font-family: var(--font-body, system-ui); font-size: 13.5px; line-height: 1.45; color: #d4cec4; }
.wd-row { display: flex; align-items: center; gap: .5rem; font-family: var(--code-font); font-size: 13px; }
.wd-prefix { color: var(--code-ink); flex: none; }
.wd-input { flex: 1; min-width: 0; font: inherit; color: var(--code-ink); background: #0a0c12; border: 1px solid #3a4158; border-radius: 8px; padding: .5rem .6rem; outline: none; }
.wd-input:focus { border-color: #e8a87c; }
.wd-tokens { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.wd-tok { font-family: var(--code-font); font-size: 12.5px; min-width: 40px; min-height: 36px; padding: 0 .55rem; color: var(--code-ink); background: #1b2030; border: 1px solid #323a52; border-radius: 8px; cursor: pointer; }
.wd-tok:active { background: #262d44; }
.wd-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.wd-edit .kbtn { font-family: var(--font-mono, monospace); font-size: 12px; min-height: 38px; padding: 0 .9rem; border-radius: 9px; cursor: pointer; color: var(--code-ink); background: #1b2030; border: 1px solid #323a52; }
.wd-edit .kbtn.go { color: #0c0e15; background: #e8a87c; border-color: #e8a87c; font-weight: 700; }
.wd-msg { margin: .6rem 0 0; font-size: 13.5px; line-height: 1.5; color: #d4cec4; min-height: 1em; font-family: var(--font-body, system-ui); }
.wd-msg[data-good="1"] { color: #5ce88e; }
@media (max-width: 720px) {
  .w-drawer { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 72vh; border-radius: 16px 16px 0 0; transform: translateY(calc(100% + 12px)); }
  .w-drawer.open { transform: none; }
  .wd-code { font-size: 11.5px; }
  .wd-line { padding: 0 .7rem; }
  .wd-tag { display: none; }
}

/* ── the page chrome: entry, caption, the hand, corner, time bar ─────────── */
:root { --sheet-h: 0px; }
.w-top { position: fixed; z-index: 20; left: 14px; top: 12px; display: flex; align-items: center; gap: .7rem; pointer-events: none; }
.w-brand { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .14em; color: var(--text); text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px; padding: .38rem .75rem; pointer-events: auto; text-decoration: none; }
.w-brand b { color: var(--warm); font-weight: 400; }
.w-corner { position: fixed; z-index: 25; right: 12px; top: 12px; display: flex; gap: .4rem; transition: right var(--t3, .48s) var(--ease-spring, ease); }
body.drawer-open .w-corner { right: calc(min(460px, 100vw - 24px) + 24px); }
.w-ib { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  font-family: var(--font-mono, monospace); font-size: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.w-ib[aria-pressed="true"] { color: var(--warm); border-color: color-mix(in srgb, var(--warm) 55%, transparent); }
.w-ib svg { width: 18px; height: 18px; }

.w-cap { position: fixed; z-index: 15; left: 400px; right: 20px; bottom: 26px; margin: 0 auto; max-width: 720px; text-align: center; pointer-events: none;
  font-family: var(--font-body, system-ui); font-size: 1.12rem; line-height: 1.45; color: #f4efe7; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 18px rgba(0,0,0,.45); padding: 0 .5rem; }
body.drawer-open .w-cap { right: calc(min(460px, 100vw - 24px) + 30px); }

.w-hand { position: fixed; z-index: 18; left: 18px; bottom: 18px; width: 360px; box-sizing: border-box; padding: .95rem 1rem 1rem;
  border-radius: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: 0 16px 44px rgba(0,0,0,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); }
.wh-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.wh-label { font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.wh-chip { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 10.5px; padding: .18rem .5rem; border-radius: 999px; color: var(--text2);
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); white-space: nowrap; }
.wh-chip[data-own="yours"] { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.wh-text { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--text); min-height: 1.4em; }
.wh-ctl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; align-items: center; }
.wh-ctl:empty { display: none; }
.wh-btn { min-height: 44px; padding: 0 1.1rem; border-radius: 11px; cursor: pointer; font-family: var(--font-body, system-ui); font-size: .95rem; font-weight: 600;
  color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); text-decoration: none; display: inline-flex; align-items: center; }
.wh-btn.go { color: #16110c; background: var(--warm); border-color: var(--warm); }
.wh-btn:disabled { opacity: .45; cursor: not-allowed; }
.wh-input { flex: 1 1 100%; min-height: 64px; box-sizing: border-box; resize: vertical; font: inherit; font-size: .95rem; padding: .6rem .7rem; border-radius: 10px;
  color: var(--text); background: color-mix(in srgb, var(--text) 5%, var(--bg)); border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); }
.wh-read { margin: .65rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--text2); }
.wh-read:empty { display: none; }
.wh-read b { color: var(--text); }
.wh-skip { flex: none; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text2); background: none; border: 0; cursor: pointer; padding: .35rem .2rem .35rem .5rem; min-height: 32px; }
.w-hand[hidden] { display: none; }
.w-timebar { display: flex; align-items: center; gap: .45rem; margin-top: .7rem; }
.w-timebar[hidden] { display: none; }
.w-timebar input[type=range] { flex: 1; min-width: 0; accent-color: var(--teal); height: 28px; }
.w-timebar button { width: 38px; height: 36px; border-radius: 9px; cursor: pointer; color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
.w-timebar span { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text2); min-width: 3.6em; text-align: right; }

.w-entry { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 20%, transparent), color-mix(in srgb, var(--bg) 70%, transparent)); transition: opacity .6s ease; }
.w-entry.gone { opacity: 0; pointer-events: none; }
.we-card { max-width: 440px; text-align: center; color: var(--text); }
.we-kicker { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--warm); }
.we-title { font-family: var(--font-display, serif); font-size: clamp(2.6rem, 9vw, 4.2rem); line-height: 1; margin: .5rem 0 .8rem; color: var(--text);
  text-shadow: 0 2px 30px color-mix(in srgb, var(--bg) 70%, transparent); }
.we-sub { font-size: 1.05rem; line-height: 1.55; color: var(--text); margin: 0 auto 1.4rem; max-width: 26rem; text-shadow: 0 1px 14px color-mix(in srgb, var(--bg) 80%, transparent); }
.we-go { min-height: 52px; padding: 0 2rem; border-radius: 999px; font-size: 1.05rem; font-weight: 700; cursor: pointer; color: #16110c; background: var(--warm); border: 0; box-shadow: 0 10px 30px color-mix(in srgb, var(--warm) 35%, transparent); }
.we-alt { display: block; margin: .9rem auto 0; background: none; border: 0; color: var(--text2); font-size: .9rem; cursor: pointer; text-decoration: underline; }
.we-alt[hidden] { display: none; }
.we-meta { margin-top: 1.1rem; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text2); letter-spacing: .06em; }

@media (max-width: 720px) {
  .w-stage { bottom: var(--sheet-h); }
  .w-hand { left: 0; right: 0; bottom: 0; width: auto; border-radius: 18px 18px 0 0; padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--bg); box-shadow: 0 -10px 30px rgba(0,0,0,.18); backdrop-filter: none; }
  .w-cap { left: 12px; right: 12px; bottom: calc(var(--sheet-h) + 12px); font-size: 1rem; }
  body.drawer-open .w-cap { right: 12px; }
  body.drawer-open .w-corner { right: 12px; }
  .w-top { left: 10px; top: 10px; }
  .w-brand { font-size: 10px; padding: .32rem .6rem; }
  .wb-long { display: none; }
  .w-corner { right: 10px; top: 10px; gap: .3rem; }
  .w-ib { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .w-drawer, .w-entry, .w-corner { transition: none; } }