/*
 * etzhayyim.com — /organism page stylesheet. Served same-origin so the page can
 * use `style-src 'self'` (no inline <style>). The organism body renders into
 * #app INSIDE the shared shell (header/nav/footer + shell.css); these selectors
 * are scoped to #app and prefixed `org-` so nothing leaks into the shell.
 * Adaptive light/dark via the shell tokens (--alive/--dormant/--line/--mute) +
 * Canvas surfaces. ADR: etzhayyim-did-web UIUX unification.
 */
#app{--org-stub:var(--stub,#5b6472);--org-clj:var(--alive,#39d98a);--org-atp:#f078c0;display:block}

#app .org-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;margin:.2rem 0 .2rem}
#app .org-hd h1{font-size:1.3rem;margin:0;letter-spacing:.01em}
#app .org-hd .sub{margin:0;opacity:.65;font-size:.8rem}

#app .org-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--alive);
  border:1px solid color-mix(in srgb,var(--alive) 45%,var(--line));background:color-mix(in srgb,var(--alive) 10%,transparent);
  padding:.18rem .6rem;border-radius:999px}
#app .org-live .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--alive);animation:org-blink 1.4s infinite}
#app .org-live.stale{color:var(--dormant);border-color:color-mix(in srgb,var(--dormant) 45%,var(--line));background:color-mix(in srgb,var(--dormant) 10%,transparent)}
#app .org-live.stale .dot{background:var(--dormant);animation:none}
@keyframes org-blink{0%,100%{opacity:1}50%{opacity:.2}}

#app .org-pills{display:flex;gap:.5rem;flex-wrap:wrap;margin:.7rem 0 1.1rem}
#app .org-pill{padding:.3rem .7rem;border-radius:999px;font-weight:600;font-size:.82rem;border:1px solid var(--line);background:var(--soft)}
#app .org-pill b{font-size:.95rem}
#app .org-pill.a{color:var(--alive)}
#app .org-pill.d{color:var(--dormant)}
#app .org-pill.s{color:var(--org-stub)}

#app .org-cols{display:grid;grid-template-columns:1.4fr .9fr;gap:1.1rem}
@media (max-width:840px){#app .org-cols{grid-template-columns:1fr}}

#app .org-card{background:var(--soft);border:1px solid var(--line);border-radius:.75rem;padding:.9rem 1rem;margin-bottom:.9rem}
#app .org-card h2{margin:.1em 0 .2em;font-size:1.05rem;border:0;padding:0}
#app .org-card h3{margin:.1em 0 .55em;font-size:.86rem;opacity:.7;font-weight:600}

#app .org-muted{opacity:.62;font-size:.78rem;margin-bottom:.6rem}
#app .org-hint{opacity:.7;font-size:.84rem;padding:.35rem 0}
#app .org-wbline{margin:.6rem 0 .25rem;font-size:.84rem}

#app .org-narr{margin:.15rem 0 .75rem;padding:.6rem .75rem;border-left:3px solid var(--alive);
  background:linear-gradient(90deg,color-mix(in srgb,var(--alive) 9%,transparent),transparent);border-radius:0 .5rem .5rem 0}
#app .org-narrtext{font-size:.95rem;line-height:1.7}
#app .org-narr .org-muted{margin-top:.3rem;font-size:.72rem}

#app .org-legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.76rem;opacity:.72}
#app .org-legend i{display:inline-block;width:.62rem;height:.62rem;border-radius:50%;margin-right:.3rem;vertical-align:middle}

#app .org-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:15rem;overflow:auto}
#app .org-tick{display:flex;gap:.5rem;align-items:baseline;padding:.32rem 0;border-top:1px solid var(--line);font-size:.78rem}
#app .org-tick:first-child{border-top:0}
#app .org-tactor{color:var(--alive);font-weight:600;min-width:5rem}
#app .org-tsubj{flex:1;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .org-tago{opacity:.6;font-size:.72rem;white-space:nowrap}