/* VIEWKEY — app.css. Design width 1920 (DESIGN.md). Root scales 100vw/1920 -> proportional 1280-2560; below 1024 fixed px, mobile layout. */
@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Pontano+Sans:wght@400;500;600&family=Oxanium:wght@400;500;600&display=swap');

:root{
  --bg:#7A0C74;
  --bg-deep:#6A1F5C;
  --ink:#F7EBDD;
  --ink-dark:#26051F;
  --mute:#eadbe8;
  --gold:#E2B564;
  --teal:#23B5B1;
  --coral:#FF5364;
  --warn:#E2B564;

  --rule-plum:rgba(247,235,221,.24);
  --rule-plum-soft:rgba(247,235,221,.30);
  --rule-table:rgba(247,235,221,.32);
  --rule-hair:rgba(247,235,221,.18);
  --rule-gold:#E2B564;

  --rule-panel-w:max(1px, 2.0px);
  --rule-card-w:max(1px, 2.0px);
  --rule-table-w:max(1px, 2.4px);
  --rule-row-w:max(1px, 1.0px);
  --rule-input-w:max(1px, 2.0px);
  --rule-tab-w:max(1px, 3.0px);
  --rule-tag-w:max(1px, 2.0px);

  --font-display:'Gilda Display', serif;
  --font-body:'Pontano Sans', sans-serif;
  --font-mono:'Oxanium', sans-serif;

  --ease:cubic-bezier(.4,0,.2,1);

  --bg:#7A0C74;
  --a:var(--gold);
  --b:var(--teal);
}

html{font-size:calc(100vw / 120);scroll-behavior:smooth}
@media (max-width:1023px){html{font-size:16px}}

body{background:var(--bg);color:var(--ink);font-family:var(--font-body)}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:400;line-height:1.08;letter-spacing:.002em}
.num,[data-cell],.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
a{text-decoration:none}
:where(button,input,select,textarea){border:0;background:none;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
button{cursor:pointer}
::selection{background:var(--gold);color:var(--ink-dark)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---- page frame (LUAT 53): one container, one ground, used by every route ---- */
.shell{width:100%;padding:0 2.4375rem 0 2.5rem;box-sizing:border-box}
main{background:var(--bg)}
main .route{padding-top:2.5rem;padding-bottom:4rem}

/* ---- borders (LUAT 56 rule #23): classes only, zero ad-hoc border/outline in routes ---- */
.rule-panel{border:var(--rule-panel-w) solid var(--rule-plum);border-radius:.875rem;background:var(--bg-deep)}
.rule-card{border:var(--rule-card-w) solid var(--rule-plum-soft);border-radius:.625rem}
.rule-table{border:var(--rule-table-w) solid var(--rule-table);border-radius:.625rem}
.rule-row{border-bottom:var(--rule-row-w) solid var(--rule-hair)}
.rule-row:last-child{border-bottom:0}
.rule-input{border:var(--rule-input-w) solid var(--rule-plum-soft);border-radius:.5rem;box-sizing:border-box}
.rule-tab{border-bottom:var(--rule-tab-w) solid var(--rule-gold)}
.rule-tag{border:var(--rule-tag-w) solid var(--gold);border-radius:.875rem}
.rule-tag.is-teal{border-color:var(--teal)}
.rule-tag.is-revoked{border-color:var(--coral)}

/* ---- sealed cell (45deg hatch, DESIGN.md sec 3/10) ---- */
.sealed{position:relative;color:transparent;background:repeating-linear-gradient(45deg,var(--rule-plum-soft) 0 .5rem,var(--rule-hair) .5rem 1rem);border-radius:.25rem;overflow:hidden;transition:clip-path .32s var(--ease)}
.sealed[data-seal-open]{color:var(--ink);background:none}

/* ---- N11 nav (verbatim measured markup, sized per LUAT 56) ---- */
[data-chrome="nav"]{height:7rem;background:var(--bg);color:#fff7ef;font-family:var(--font-body);border-bottom:1px solid var(--gold);box-sizing:border-box;position:sticky;top:0;z-index:40}
.vk-tier1,.vk-tier2{height:3.5rem;display:flex;align-items:center;padding:0 3.25rem;box-sizing:border-box}
.vk-tier1{justify-content:space-between;border-bottom:1px solid rgba(226,181,100,.42)}
.vk-brand{display:flex;align-items:center;gap:.8125rem;font-family:var(--font-mono);letter-spacing:.28em;font-size:1.1875rem}
.vk-brand img{width:2.75rem;height:2.75rem;object-fit:contain}
.vk-social{display:flex;gap:1.5rem;font-size:.9375rem}
.vk-social a{color:inherit;transition:opacity .2s var(--ease)}
.vk-social a:hover{opacity:.7}
.vk-tier2{justify-content:center;gap:4.625rem;position:relative}
.vk-tier2 a{height:3.5rem;display:flex;align-items:center;color:var(--mute);font-size:.9375rem;position:relative}
.vk-tier2 a.is-active{color:#fff}
.vk-tier2 a.is-active:after{content:"";position:absolute;height:.1875rem;left:0;right:0;bottom:0;background:linear-gradient(90deg,var(--gold),var(--teal));transition:transform .2s var(--ease)}
.nav-mobile-btn{display:none}
.nav-drawer{display:none}
@media (max-width:1023px){
  .vk-tier2{display:none}
  .vk-tier1{padding:0 1.25rem}
  [data-chrome="nav"]{height:auto}
  .vk-tier1{height:64px}
  .vk-brand img{width:36px;height:36px}
  .vk-brand span{font-size:15px}
  .nav-mobile-btn{display:flex;align-items:center;gap:6px;font-size:13px;background:none}
  .vk-social{display:none}
  .nav-drawer{display:none;flex-direction:column;background:var(--bg-deep);border-top:1px solid var(--gold)}
  .nav-drawer.is-open{display:flex}
  .nav-drawer a{padding:14px 20px;color:var(--mute);font-size:14px;border-bottom:1px solid var(--rule-hair)}
  .nav-drawer a.is-active{color:#fff}
  .nav-drawer .vk-social{display:flex;padding:14px 20px;gap:20px}
}

/* ---- F7 footer (verbatim measured markup) ---- */
[data-chrome="footer"]{background:var(--bg);color:#fff7ef;font-family:var(--font-body);border-top:3px double var(--gold);box-sizing:border-box;padding:.9375rem 3.25rem;display:grid;grid-template-columns:1.25fr 2fr auto;gap:1.75rem;align-items:center}
.vk-sheet{font-family:var(--font-mono);font-size:.875rem;letter-spacing:.06em}
.vk-index{font-size:.8125rem;color:var(--mute)}
.vk-links{display:flex;gap:1.25rem;font-size:.875rem}
.vk-links a{color:inherit}
.vk-links a:hover{opacity:.7}
@media (max-width:1023px){
  [data-chrome="footer"]{grid-template-columns:1fr;gap:8px;padding:14px 20px;text-align:left}
  .vk-index{display:none}
}

/* ---- shared components ---- */
.btn-brass{background:var(--gold);color:var(--ink-dark);font-family:var(--font-body);font-weight:600;padding:.875rem 1.5rem;border-radius:.5rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .18s var(--ease),filter .18s var(--ease)}
.btn-brass:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--ink);border:var(--rule-input-w) solid var(--gold);font-family:var(--font-body);font-weight:500;padding:.8125rem 1.4375rem;border-radius:.5rem;transition:background .18s var(--ease)}
.btn-outline:hover{background:rgba(226,181,100,.1)}
.label{font-family:var(--font-body);font-size:.8125rem;color:var(--mute);letter-spacing:.03em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:999px;font-size:.8125rem}
.chip.active{background:rgba(35,181,177,.16);color:var(--teal)}
.chip.expiring{background:rgba(226,181,100,.16);color:var(--gold)}
.chip.revoked{background:rgba(255,83,100,.16);color:var(--coral)}
.state-dot{width:.5rem;height:.5rem;border-radius:50%;display:inline-block}
.state-dot.active{background:var(--teal)}
.state-dot.expiring{background:var(--gold)}
.state-dot.revoked{background:var(--coral)}

/* ---- motion helpers (DESIGN.md sec 10) ---- */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .26s var(--ease),transform .26s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-tag-swing]{transform-origin:top center;animation:tagSwing .42s var(--ease) both}
@keyframes tagSwing{0%{transform:scale(.92) rotate(-3deg);opacity:0}60%{transform:scale(1.01) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
[data-hook]:hover, .rule-tag:hover{transform:translateY(-1px)}
.rule-tag{transition:transform .18s var(--ease)}
[data-revoke-drop]{transition:transform .4s var(--ease),opacity .4s var(--ease)}

/* ---- misc layout helpers used by routes ---- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.stack{display:flex;flex-direction:column}
figure.art{background:none}