/* The same coin, ink and gold, with room for hands, keyboards and short screens. */
#pinScreen { --login-line: color-mix(in srgb, var(--accent, #c9a96e) 36%, transparent); overflow-y:auto; overscroll-behavior:contain; min-height:100dvh; padding:clamp(16px,4vh,42px) 16px max(20px,env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 12%,color-mix(in srgb,var(--accent,#c9a96e) 7%,transparent),transparent 62%),var(--bg,#101114); }
#pinScreen .pin-box { width:100%; max-width:360px; margin:auto; padding:12px 24px 20px; }
#pinScreen .pin-title { letter-spacing:.2em; margin:12px 0 4px; user-select:none; }
#pinScreen .pin-date { margin-bottom:16px; line-height:1.6; }
#pinScreen .pin-entry { position:relative; display:block; margin:0 auto 14px; width:100%; }
/* opacity:.01 rather than 0 so iOS still treats it as a real, focusable field
   (keyboard, autofill, password managers). But the UA gives a text input a
   white background and a border, and at 1% over the dark ground that painted a
   faint panel in exactly the place the frame used to be — the box removed
   above, wearing a disguise. Paint nothing. */
#pinScreen #pinInput { position:absolute; inset:0; width:100%; height:100%; opacity:.01; cursor:text; font-size:16px; background:transparent; border:0; border-radius:0; color:transparent; -webkit-appearance:none; appearance:none; }
/* The dots stand on their own — no frame. (Alfredo, 2026-09-08, screenshot with
   the box circled: "I'm not liking this radius around the login pin.") The
   frame was aria-hidden and pointer-events:none, so it read as a text field
   that could not be typed into, and it wore the same 14px radius as the keys
   right beneath it — two stacked rounded rectangles. The focus indicator moves
   onto the dots, where the eye already is: every dot brightens, and the next
   one to fill takes a ring. Do not restore an outline on #pinDisplay — with no
   box to draw around, it comes back as the same rectangle he asked to remove. */
/* 32px, not the old 48px: that height existed to give the frame a body, and
   with the frame gone it was just a void the dots floated in. */
#pinScreen #pinDisplay { min-height:32px; margin:0; pointer-events:none; align-items:center; }
/* The dot's outline runs through one custom property so the three states
   resolve by the cascade rather than by specificity — a plain border-color on
   the focus rule outranks the light-theme rule and would have made the cream
   dots DIMMER on focus. */
#pinScreen .pin-circle { --dot-line:var(--nx-gold-line); border-color:var(--dot-line); }
/* With no frame, the dots are the only thing marking where the PIN goes, so
   they have to carry on their own. On cream they were gold at 25% — 1.37:1
   against the ground, a hint rather than a mark. Solid deep gold measures
   4.4:1 at the bottom of the gradient and 4.9:1 at the top. */
[data-theme="light"] #pinScreen .pin-circle { --dot-line:var(--nx-gold-deep,#8f5f1f); }
/* A filled dot keeps its accent ring: the rule above outranks nexus.css's
   .pin-circle.filled, so it has to say so here or the ring goes dim under the
   accent fill. Must stay after the light-theme rule — same specificity. */
#pinScreen .pin-circle.filled { --dot-line:var(--accent,#c9a96e); }
#pinScreen .pin-entry:focus-within .pin-circle { --dot-line:var(--accent,#c9a96e); }
#pinScreen .pin-entry:focus-within :is(.pin-circle:not(.filled):first-child,.pin-circle.filled + .pin-circle:not(.filled)) {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#c9a96e) 20%,transparent);
}
#pinScreen .pin-pad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; width:100%; max-width:none; }
#pinScreen .pin-key { width:100%; height:60px; min-height:48px; border:1px solid var(--login-line); border-radius:14px; font-size:25px; font-variant-numeric:tabular-nums; background:color-mix(in srgb,var(--accent,#c9a96e) 4%,var(--bg,#101114)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent,#c9a96e) 7%,transparent); transition:background .15s,transform .15s; }
#pinScreen .pin-key:hover { background:color-mix(in srgb,var(--accent,#c9a96e) 12%,var(--bg,#101114)); }
#pinScreen .pin-key:active { transform:scale(.96); }
#pinScreen #pinClear { font-size:12px; letter-spacing:.04em; }
#pinScreen button:focus-visible { outline:2px solid var(--accent,#c9a96e); outline-offset:3px; }
#pinScreen button:disabled { opacity:.5; cursor:wait; }
#pinScreen .pin-options { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
#pinScreen .pin-option { min-height:44px; padding:8px 10px; border:0; background:transparent; color:var(--text-secondary,#b8b1a3); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
#pinScreen #pinGo { width:100%; min-height:48px; margin-top:10px; border:1px solid var(--accent,#c9a96e); border-radius:12px; background:var(--accent,#c9a96e); color:var(--bg,#101114); font:inherit; font-weight:700; }
#pinScreen [hidden] { display:none!important; }
#pinScreen .pin-sub { margin:14px 0 0; font-size:12px; }
#pinScreen .pin-status,#pinScreen .pin-connection { font-size:12px; line-height:1.5; color:var(--text-secondary,#b8b1a3); margin:4px 0; }
#pinScreen .pin-status:empty { display:none; }
#pinScreen .pin-connection { margin-top:10px; font-size:11px; }
#pinScreen .pin-connection[data-offline=true] { color:var(--accent,#c9a96e); }
#pinScreen .pin-error { line-height:1.5; margin:8px 0; padding:10px; border:1px solid currentColor; border-radius:10px; }
#pinScreen .pin-lang-row { margin-top:12px; gap:8px; }
#pinScreen .pin-lang-btn { min-height:44px; padding:8px 18px; opacity:1; color:var(--text-secondary,#b8b1a3); border-radius:10px; border:1px solid transparent; }
#pinScreen .pin-lang-btn.active { color:var(--accent,#c9a96e); border-color:var(--login-line); background:color-mix(in srgb,var(--accent,#c9a96e) 6%,transparent); }
#pinScreen .pin-bio-btn { grid-column:1/-1; min-height:48px; }
@media(min-width:700px) { #pinScreen .pin-box { border:1px solid var(--login-line); border-radius:28px; padding:32px; box-shadow:0 24px 80px #0002; } }
@media(max-height:740px) { #pinScreen { padding-top:12px; } #pinScreen .pin-box { padding-top:0; padding-bottom:8px; } #pinScreen .pin-mast { margin-bottom:4px; } #pinScreen .nx-coin { width:116px; height:116px; } #pinScreen .pin-title { font-size:25px; margin-top:6px; } #pinScreen .pin-date { margin-bottom:8px; } #pinScreen .pin-key { height:48px; } #pinScreen .pin-lang-row { margin-top:4px; } }
@media(prefers-reduced-motion:reduce) { #pinScreen,#pinScreen * { animation:none!important; transition:none!important; } }

@media(max-width:600px) and (min-height:741px) { #pinScreen .nx-coin {width:150px;height:150px;} #pinScreen .pin-mast {margin-bottom:4px;} #pinScreen .pin-key {height:56px;} #pinScreen .pin-box {padding-top:0;} }

/* Crisp full coin, restrained light, readable supporting copy. */
#pinScreen .pin-brand-description { margin: 4px 0 12px; color: var(--nx-muted); font: 12px/1.5 var(--nx-font-body); }
#pinScreen :is(.pin-option,.pin-status,.pin-connection,.pin-lang-btn,.pin-sub) { color: var(--nx-muted); }
#pinScreen .pin-lang-btn.active { color: var(--nx-gold-ink); }
#pinScreen .pin-title { color: var(--nx-gold-ink) !important; }
#pinScreen .pin-sub { color: var(--nx-muted) !important; }
#pinScreen .pin-error { color: var(--nx-red-ink) !important; }
#pinScreen .nx-coin-info { color: var(--nx-text); }
#pinScreen .nx-coin:focus-visible { outline: 2px solid var(--nx-gold-ink); outline-offset: 8px; border-radius: 50%; }
#pinScreen .nx-coin-face { filter: drop-shadow(0 5px 8px #0002); }
#pinScreen .nx-coin-face img { image-rendering: auto; }

/* The generated production art has a parchment canvas. Clip it in the UI;
   the opaque launcher artwork keeps the platform's own mask clean. */
:is(.nx-coin-face img,.nxboot-coin,.nx-mast-coin-face)[src*="coin-providentia-v2"] { clip-path: circle(46.2% at 50% 50%); }
#pinScreen .nx-coin-front img { transform: scale(1.075); }
/* The stage tracks the coin size, so small screens never keep an empty 240px stage. */
#pinScreen .nx-coin-stage { --login-coin-size:160px; width:calc(var(--login-coin-size) + 48px); height:calc(var(--login-coin-size) + 22px); margin:0 auto 8px; }
#pinScreen .nx-coin { width:var(--login-coin-size); height:var(--login-coin-size); top:0; left:24px; }
#pinScreen .nx-coin-info { width:36px; height:36px; min-width:36px; min-height:36px; top:auto; right:0; bottom:0; }
@media(max-height:740px) { #pinScreen .nx-coin-stage { --login-coin-size:120px; } }
@media(min-width:700px) and (min-height:800px) { #pinScreen .nx-coin-stage { --login-coin-size:180px; } }