/* The Homla 404, "Wrong door" (web/not-found.js). Used inside the app shell
   (#view-notfound), on the signed-out standalone screen (#view-nf-standalone)
   and inlined by the server's standalone page (src/lib/not-found-page.ts).
   Motion: the door swings open once, then the light comes in; none with reduced motion. */
.nf { --nf-r: 18px; --nf-frame: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 80px -30px rgba(41,41,41,.28), 0 2px 10px rgba(41,41,41,.05);
  max-width: 1040px; margin: 0 auto; padding: 48px 0 72px; color: var(--text); }
.nf__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.nf__copy { display: grid; gap: 18px; justify-items: start; }
.nf__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1.3 var(--font-mono); letter-spacing: var(--track-mono, .04em); text-transform: uppercase; color: var(--text-2); }
.nf__sq { width: 8px; height: 8px; border-radius: 1px; background: var(--brand-2); }
.nf__title { margin: 0; font: 300 clamp(34px, 4.4vw, 56px)/1.03 var(--font-sans); letter-spacing: var(--track-display, -0.045em); text-wrap: balance; max-width: 13ch; color: var(--text); }
.nf__lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 44ch; text-wrap: pretty; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.nf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--r-md, 6px); border: 1px solid transparent;
  font: 500 14px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .16s var(--ease), border-color .16s var(--ease); }
.nf-btn--primary { background: var(--accent); color: var(--on-accent); }
.nf-btn--primary:hover { background: var(--accent-hover); }
.nf-btn--secondary { background: var(--bg-surface); color: var(--text); border-color: var(--line-strong); }
.nf-btn--secondary:hover { border-color: var(--line-control); }
.nf-btn kbd { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border-radius: 4px; background: rgba(255,255,255,.16); color: inherit; opacity: .85; }
.nf-btn:focus-visible, .nf-room:focus-visible, .nf__more a:focus-visible { outline: 2px solid var(--focus, var(--text)); outline-offset: 2px; }

.nf__art { display: grid; place-items: center; aspect-ratio: 320 / 236; padding: 26px; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--nf-r); box-shadow: var(--nf-frame);
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.2px); background-size: 16px 16px; background-position: 8px 8px; }
.nf__svg { display: block; width: 100%; height: auto; overflow: visible; }
.nf__room { stroke: var(--line-control); stroke-width: 1.25; stroke-dasharray: 4 6; opacity: .55; fill: var(--bg-surface); }
.nf__wall { stroke: var(--text); stroke-width: 6; stroke-linecap: square; }
.nf__jamb { stroke: var(--text); stroke-width: 2; }
.nf__arc { stroke: var(--brand); stroke-width: 1.25; stroke-dasharray: 3 5; opacity: .7; }
.nf__light { fill: var(--brand-2); opacity: .55; }
.nf__leaf { transform-box: view-box; transform-origin: 96px 150px; transform: rotate(-22deg); }
.nf__leaf path { stroke: var(--brand); stroke-width: 5; stroke-linecap: round; }
.nf__leaf circle { fill: var(--brand); }
.nf__leaf { animation: nf-swing 1.5s var(--ease-out) .35s both; }
.nf__light { animation: nf-light .9s var(--ease) 1.25s both; }
.nf__arc, .nf__room { animation: nf-fade .8s var(--ease) .1s both; }
@keyframes nf-swing { from { transform: rotate(0deg); } 60% { transform: rotate(-25deg); } to { transform: rotate(-22deg); } }
@keyframes nf-light { from { opacity: 0; } }
@keyframes nf-fade { from { opacity: 0; } }
/* lime light reads muddy on the dark canvas at full strength */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nf__light { opacity: .32; } }
:root[data-theme="dark"] .nf__light { opacity: .32; }
@media (prefers-reduced-motion: reduce) { .nf__leaf, .nf__light, .nf__arc, .nf__room { animation: none; } }

.nf__nav { margin-top: 56px; }
.nf__label { margin: 0 0 12px; font: 500 12px/1.3 var(--font-mono); letter-spacing: var(--track-mono, .04em); text-transform: uppercase; color: var(--text-2); }
.nf__rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.nf-room { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 14px 14px 12px; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-xl, 12px);
  box-shadow: var(--shadow-1); color: var(--text); text-decoration: none; transition: border-color .16s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.nf-room:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.nf-room__ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: var(--r-md, 6px); background: var(--tint); color: var(--on-tint); }
.nf-room__tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.nf-room__tx b { font-weight: 500; font-size: 14.5px; letter-spacing: -0.01em; }
.nf-room__tx span { font-size: 13px; line-height: 1.35; color: var(--text-2); }
.nf-room__go { display: grid; color: var(--text-2); transition: transform .2s var(--ease), color .16s var(--ease); }
.nf-room:hover .nf-room__go { transform: translateX(2px); color: var(--text); }
.nf__more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 0; font-size: 14px; color: var(--text-2); }
.nf__more a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.nf__more a:hover { color: var(--text); border-color: var(--text); }
.nf-i { display: block; flex: none; }

@media (max-width: 860px) {
  .nf { padding: 16px 0 48px; }
  .nf__head { grid-template-columns: 1fr; gap: 24px; }
  .nf__art { order: -1; max-width: 300px; width: 100%; padding: 16px; }
  .nf__nav { margin-top: 40px; }
}
@media (max-width: 560px) {
  .nf__rooms { grid-template-columns: 1fr; gap: 8px; }
  .nf__actions { display: grid; width: 100%; }
  .nf-btn { width: 100%; height: 46px; }
  .nf-btn kbd { display: none; }
  .nf--app .nf__art { max-width: 220px; }
  .nf__art { max-width: 260px; }
}

/* Standalone (signed out, server 404): a quiet top bar with the logo, the page centred on oat */
.nf-page { min-height: 100vh; min-height: 100dvh; background: var(--bg-canvas); color: var(--text); }
.nf-top { border: 0; background: none; box-shadow: none; position: static; display: flex; align-items: center; justify-content: space-between; max-width: 1104px; margin: 0 auto; padding: 18px 32px; }
.nf-top__logo { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font: 500 22px/1 var(--font-sans); letter-spacing: -0.04em; }
.nf-top__swing { fill: var(--brand); }
.nf-top__link { font: 500 14px/1 var(--font-sans); color: var(--text); text-decoration: none; padding: 10px 12px; border-radius: var(--r-md, 6px); }
.nf-top__link:hover { background: var(--bg-hover); }
.nf-page .nf { padding-left: 32px; padding-right: 32px; padding-top: 40px; max-width: 1104px; }
@media (max-width: 560px) { .nf-top { padding: 14px 16px; } .nf-page .nf { padding: 8px 16px 48px; } }