/* owner: SHELL | contract: DIVISIONS.md section 1 (gate screens), DESIGN_BRIEF.md section 10 (public skin) */
.kw-gate{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--kw-s-4);padding:calc(var(--kw-s-6) + env(safe-area-inset-top)) var(--kw-gutter) calc(var(--kw-s-6) + env(safe-area-inset-bottom));overflow-y:auto;animation:kw-fade var(--kw-t-slow) var(--kw-ease)}
.kw-gate.is-over-world{background:radial-gradient(80% 60% at 50% 40%,rgb(var(--kw-bg-0-rgb) / .62),rgb(var(--kw-bg-0-rgb) / .88))}      /* the scrim is the page colour: a white-pink veil in Light, a soft plum one in Evening (never black) */
.kw-gate__ribbon{position:fixed;top:0;left:0;right:0}
.kw-gate__card{
  position:relative;width:min(460px,100%);margin:auto 0;padding:var(--kw-s-6) var(--kw-s-5) var(--kw-s-5);border-radius:var(--kw-r-l);
  background:
    radial-gradient(120% 70% at 12% 0%,rgba(248,246,242,.06),transparent 60%),
    linear-gradient(115deg,transparent 40%,rgb(var(--kw-rose-rgb) / .08) 41%,transparent 43%),
    var(--kw-panel-bg);
  border:1px solid var(--kw-line-2);box-shadow:var(--kw-shadow),var(--kw-glow-gold);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:kw-rise var(--kw-t-slow) var(--kw-ease);
}
.kw-gate__card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:var(--kw-foil);opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.kw-gate__card--wide{width:min(560px,100%)}
.kw-gate__brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:var(--kw-s-3);font:500 11px/1 var(--kw-font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--kw-ink-3)}
.kw-gate__k{font:400 44px/1 var(--kw-font-script);background:var(--kw-foil);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 2px}
.kw-gate__avatar{width:132px;height:132px;margin:0 auto var(--kw-s-3);border-radius:50%;overflow:hidden;display:grid;place-items:end center;background:radial-gradient(circle at 50% 38%,rgb(var(--kw-rose-gold-rgb) / .35),rgb(var(--kw-rose-gold-rgb) / .05) 70%);box-shadow:0 0 0 1px var(--kw-line-2),0 0 36px rgb(var(--kw-rose-gold-rgb) / .25)}
.kw-gate__avatar svg{width:100%;height:auto}
/* "Preview likeness": a small tag under the portrait until she approves it (CHARACTER.md section 8; the Hall asks "Is this you?") */
.kw-gate__likeness{width:max-content;margin:calc(var(--kw-s-1) * -1) auto var(--kw-s-3);padding:3px 12px;border-radius:var(--kw-r-pill);border:1px dashed var(--kw-line-2);font:500 11px/1.2 var(--kw-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--kw-ink-3)}
.kw-gate__avatar--mono{font:400 64px/1 var(--kw-font-script);color:var(--kw-gold-hi);align-items:center}
.kw-gate__title{font:600 36px/1.12 var(--kw-font-display);text-align:center;font-feature-settings:"lnum";margin-bottom:6px}
.kw-gate__sub{text-align:center;color:var(--kw-ink-2);margin-bottom:var(--kw-s-5);font-size:15px}
.kw-gate__form{display:flex;flex-direction:column}
.kw-gate__foot{margin-top:var(--kw-s-4);text-align:center;color:var(--kw-ink-3);font-size:13px;line-height:1.5}
.kw-gate__links{display:flex;justify-content:center;gap:var(--kw-s-4);flex-wrap:wrap;margin-top:var(--kw-s-3);font-size:14px}
.kw-gate__err{margin:0 0 var(--kw-s-3);padding:10px 14px;border-radius:12px;border:1px solid rgb(var(--kw-loss-rgb) / .5);background:rgb(var(--kw-loss-rgb) / .08);color:var(--kw-t-loss);font-size:14px}
.kw-gate__err:empty{display:none}
.kw-gate__note{margin:0 0 var(--kw-s-3);padding:10px 14px;border-radius:12px;border:1px solid var(--kw-line-2);background:rgb(var(--kw-gold-rgb) / .07);color:var(--kw-ink-2);font-size:14px}
.kw-gate__note:empty{display:none}
.kw-gate__row{display:flex;gap:8px;align-items:flex-end}
.kw-gate__row .kw-field{flex:1;margin-bottom:var(--kw-s-4)}
.kw-eye{flex:none;width:var(--kw-tap);height:var(--kw-tap);margin-bottom:var(--kw-s-4);border-radius:12px;border:1px solid var(--kw-line-2);background:var(--kw-bg-3);display:grid;place-items:center;color:var(--kw-ink-2)}
.kw-eye[aria-pressed="true"]{color:var(--kw-gold-hi);border-color:var(--kw-gold)}
.kw-pw{position:relative}
.kw-meter{display:flex;gap:4px;margin-top:6px}
.kw-meter i{flex:1;height:5px;border-radius:3px;background:var(--kw-bg-3)}
.kw-meter[data-level="1"] i:nth-child(-n+1){background:var(--kw-loss)}
.kw-meter[data-level="2"] i:nth-child(-n+2){background:var(--kw-warn)}
.kw-meter[data-level="3"] i:nth-child(-n+3){background:var(--kw-mint)}
.kw-meter[data-level="4"] i:nth-child(-n+4){background:var(--kw-mint)}
.kw-meter__word{font-size:13px;color:var(--kw-ink-3);margin-top:4px}

/* six code boxes over one real input */
.kw-code{position:relative;display:flex;justify-content:center;gap:8px;margin:var(--kw-s-3) 0 var(--kw-s-2)}
.kw-code__box{width:48px;height:60px;border-radius:12px;border:1px solid var(--kw-line-2);background:var(--kw-bg-3);display:grid;place-items:center;font:500 28px/1 var(--kw-font-mono);color:var(--kw-ink);transition:border-color var(--kw-t-fast),box-shadow var(--kw-t-fast)}
.kw-code__box.is-cur{border-color:var(--kw-gold);box-shadow:var(--kw-glow-gold)}
.kw-code__box.is-err{border-color:var(--kw-loss)}
.kw-code__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:text;border:0;background:transparent;color:transparent;caret-color:transparent}
.kw-code__meta{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--kw-ink-3);font-size:13px;margin-bottom:var(--kw-s-3)}
.kw-ring30{width:34px;height:34px}
.kw-ring30 circle{fill:none;stroke-width:4}
.kw-ring30 .kw-ring30__track{stroke:var(--kw-bg-3)}
.kw-ring30 .kw-ring30__arc{stroke:var(--kw-gold);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}

/* setup */
.kw-steps{display:flex;justify-content:center;gap:8px;margin-bottom:var(--kw-s-4)}
.kw-steps i{width:28px;height:4px;border-radius:2px;background:var(--kw-bg-3)}
.kw-steps i.is-done,.kw-steps i.is-cur{background:var(--kw-gold)}
.kw-steps i.is-cur{box-shadow:0 0 12px rgb(var(--kw-gold-rgb) / .6)}
.kw-qr{display:flex;flex-direction:column;align-items:center;gap:10px;margin:var(--kw-s-3) 0}
.kw-qr__frame{padding:14px;background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--kw-line-2),var(--kw-glow-gold);line-height:0}
.kw-qr__frame canvas{width:240px;height:240px;image-rendering:pixelated}
.kw-key{font:500 15px/1.5 var(--kw-font-mono);letter-spacing:.06em;word-break:break-all;text-align:center;padding:12px;border-radius:12px;border:1px dashed var(--kw-line-2);background:var(--kw-bg-3);user-select:all}
.kw-steplist{margin:0 0 var(--kw-s-4);padding:0;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.kw-steplist li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;color:var(--kw-ink-2);font-size:15px}
.kw-steplist li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--kw-foil);color:var(--kw-on-gold);font:700 13px var(--kw-font-ui)}
.kw-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:var(--kw-s-3) 0;padding:14px;border-radius:14px;border:1px solid var(--kw-line-2);background:var(--kw-bg-3);list-style:none}
.kw-codes li{font:500 17px/1.4 var(--kw-font-mono);letter-spacing:.08em;text-align:center;user-select:all}
.kw-passkey{display:flex;gap:12px;align-items:center;margin-top:var(--kw-s-4);padding:12px 14px;border-radius:var(--kw-r-m);border:1px dashed var(--kw-line-2);color:var(--kw-ink-2);font-size:14px;background:rgba(165,151,255,.05)}
.kw-passkey strong{color:var(--kw-ink)}
.kw-opt{display:flex;flex-direction:column;gap:10px}
.kw-opt .kw-btn{justify-content:flex-start;text-align:left;white-space:normal;padding-top:12px;padding-bottom:12px}
.kw-status-card{padding:14px;border-radius:var(--kw-r-m);border:1px solid var(--kw-line-2);background:rgba(165,151,255,.07);color:var(--kw-ink-2);margin-bottom:var(--kw-s-4);font-size:15px}
.kw-print h2{font:600 22px var(--kw-font-display);margin-bottom:8px}
.kw-print p{margin:6px 0}
.kw-print ul{list-style:none;columns:2;padding:0;font:500 18px/1.8 var(--kw-font-mono)}
@media (max-width:420px){.kw-code__box{width:42px;height:54px;font-size:24px}.kw-gate__title{font-size:32px}.kw-qr__frame canvas{width:216px;height:216px}}
/* a card taller than the window starts at the top (the card's own auto margins centre it when there is room), and the square shrinks on short windows */
@media (max-height:960px){.kw-qr__frame canvas{width:196px;height:196px}.kw-gate__avatar{width:104px;height:104px}}