/* De pas: inloggen, welkom en korte meldingen. Eén verticale meridiaan met graadstreepjes loopt door de pagina; de pas ligt erop. */
body.sheet { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.stage { position: relative; flex: 1; display: grid; place-items: center; padding: 56px 16px 40px; overflow: hidden; isolation: isolate; }
.stage::before { content: ''; position: absolute; inset: 0 auto 0 50%; width: 1px; background: var(--meridian); opacity: .5; z-index: -1; }
.stage::after {
  content: ''; position: absolute; inset: 0 auto 0 calc(50% - 8px); width: 17px; z-index: -1; opacity: .45;
  background:
    repeating-linear-gradient(to bottom, transparent 0 59px, var(--meridian) 59px 60px) center / 17px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 11px, var(--meridian) 11px 12px) center / 7px 100% no-repeat;
}
.card { position: relative; width: min(100%, 432px); background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 0 28px 24px; }
.card-head { position: relative; display: flex; align-items: center; gap: .6rem; margin: 0 -28px 22px; padding: 16px 28px; border-bottom: 1px solid var(--line-2); border-radius: 14px 14px 0 0; background: var(--sheet-2); overflow: hidden; }
.card-head .globe { position: absolute; right: -36px; top: -42px; width: 190px; height: 190px; color: var(--meridian); opacity: .38; pointer-events: none; }
.card-head .globe * { fill: none; stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; }
.mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--meridian); position: relative; }
.mark::before { content: ''; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1.5px; margin-left: -.75px; background: var(--meridian); }
.mark::after { content: ''; position: absolute; inset: 3px 6px; border: 1.5px solid var(--meridian); border-radius: 50%; }
.brand { position: relative; font-family: var(--serif); font-size: 1.125rem; letter-spacing: .01em; }
.brand-sub { position: relative; margin-left: auto; font-size: .8125rem; color: var(--muted); }
.card h1 { font-size: 1.75rem; margin-bottom: .25rem; }
.card .lead { color: var(--ink-2); margin-bottom: 1.4rem; }
.card .holder { font-family: var(--serif); font-size: 1.25rem; }
.agebox { display: grid; grid-template-columns: 92px 1fr; gap: .75rem; align-items: start; }
.agebox input { text-align: center; }
.agebox .hint { padding-top: .15rem; }
.card .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.card .actions form.inline { display: contents; }
.legal-line { margin: 1rem 0 0; font-size: .8125rem; color: var(--muted); }
.card-foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-2); font-size: .875rem; color: var(--muted); }
.codebox input { font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.notice.is-error h1, .notice.is-denied h1 { color: var(--ink); }
.notice.is-error .card-head { border-bottom-color: color-mix(in srgb, var(--danger) 30%, var(--line-2)); }
.sheet-foot { text-align: center; padding: 0 16px 20px; font-size: .8125rem; color: var(--muted); }
.sheet-foot a { color: var(--muted); }
.meter { height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; margin: .1rem 0 .3rem; }
.meter > i { display: block; height: 100%; width: 0; background: var(--danger); transition: width .2s; }
.meter[data-s='2'] > i { background: var(--warn); } .meter[data-s='3'] > i, .meter[data-s='4'] > i { background: var(--meridian); }
@media (max-width: 480px) { .card { padding: 0 18px 20px; } .card-head { margin: 0 -18px 18px; padding: 14px 18px; } .card h1 { font-size: 1.5rem; } .stage { padding-top: 24px; } }
@media (prefers-reduced-motion: no-preference) { .card { animation: settle .35s cubic-bezier(.2, .7, .2, 1); } @keyframes settle { from { transform: translateY(6px); opacity: 0; } } }