/* The sign-in screens, the signed-out notice and the menu under the name (Task 23). The approved states mockup's own rules
   (docs/web/2026-10-16-w1-states-mockup.html, its style block, Part A frames 1-6), copied as they are. How the bare box holds
   a sign-in screen in the real page is app.css's. */
.mk .r-splash.si{position:relative;inset:auto;z-index:auto;flex:1;min-height:0;justify-content:center;gap:18px;padding:24px 28px 40px}
.mk.desk .r-splash.si{position:absolute;inset:0}
.mk .si-card{display:grid;justify-items:center;gap:14px;width:100%;max-width:470px;padding:32px 32px 28px;text-align:center}
.mk .si-card > :not(.orn){position:relative}
.mk .si-h{font-family:var(--m-disp);font-size:30px;font-weight:600;line-height:1.1}
.mk.phone .si-h{font-size:28px}
.mk .si-sub{color:var(--m-muted);font-size:13.5px;max-width:34ch}
.mk .si-col{display:grid;justify-items:center;gap:14px;width:100%;max-width:330px;text-align:center}
.mk .si-btn{width:100%;padding:13px 16px;font-size:14px}
.mk .si-btn .ic{width:18px;height:18px}
.mk .si-fine{color:var(--m-faint);font-size:12px}
.mk .si-err{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;color:var(--m-red);font-size:12.5px;border:1px solid rgba(227,104,122,.4);background:rgba(227,104,122,.08);padding:9px 11px}
.mk .si-err .ic{margin-top:1px}
.mk .si-steps{justify-self:stretch;text-align:left;font-size:13.5px}
.mk .si-secret{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:6px 14px;width:100%;padding:12px 10px;border:1px dashed var(--m-gl);background:#0a0f1e;font-size:15px;letter-spacing:.12em;color:var(--m-fg)}
.mk .si-lbl{justify-self:stretch;text-align:left}
.mk .si-code{width:100%;font:inherit;font-size:24px;letter-spacing:.42em;text-align:center;color:var(--m-fg);background:#0a0f1e;border:1px solid var(--m-gl);border-radius:1px;padding:10px 0 10px .42em}
.mk .si-code::placeholder{color:var(--m-faint)}
.mk .ov-card.so .ov-f{justify-content:stretch}
.mk .ov-card.so .ov-f .btn{flex:1;padding:11px 14px}
.mk .r-user.open{cursor:pointer}
.mk .r-user .ic{color:var(--m-gold)}
.mk .u-menu{position:absolute;top:62px;right:26px;z-index:25;width:330px;background:var(--m-panel);border:1px solid var(--m-gl);box-shadow:0 24px 60px rgba(0,0,0,.45);padding:2px 14px}
.mk .u-menu .menu-h{padding:12px 2px 4px}
.mk .u-menu .menu-i{padding:12px 2px;font-size:13.5px;gap:12px}
.mk .u-menu .menu-i .ic{width:18px;height:18px}
.mk .menu-i.out span{color:var(--m-red)}
.mk .menu-i.out .ic{color:var(--m-red)}
/* ---- W2 Task P: the enrollee's portrait on Set up. The rules of the enroll-photo mockups (docs/design/enroll-photo-variants.css, no image data in
   it), variant A; the design stop holds until Yanky picks a variant. screens/auth/two-step.mjs frame draws <img class="si-ph" alt=""> as the splash's
   first child and gives the splash .v-a, only when a portrait arrived: with none, no rule here applies and the screen is as before. The photo is out of
   flow, under the crest and the card, and never takes a tap. The mockup's .mk.desk and .mk.phone frames are the app's own layouts (#app's class). */
.mk .r-splash.si:has(> .si-ph){overflow:clip}
.mk .r-splash.si:has(> .si-ph) > :not(.si-ph):not(.credit){position:relative;z-index:1}
.mk .si-ph{position:absolute;z-index:0;pointer-events:none;user-select:none;max-width:none}
/* A: the side, fading into the navy before the card; on the phone at the top, behind the crest */
.mk.desk .v-a .si-ph{left:-70px;bottom:0;height:720px;opacity:.4;
  -webkit-mask-image:linear-gradient(to right,#000 38%,transparent 82%);mask-image:linear-gradient(to right,#000 38%,transparent 82%)}
.mk.phone .v-a .si-ph{left:50%;top:-10px;width:430px;transform:translateX(-50%);opacity:.3;
  -webkit-mask-image:linear-gradient(#000 35%,transparent 78%);mask-image:linear-gradient(#000 35%,transparent 78%)}
/* B, kept for a CSS-only swap (the splash's class v-b in two-step.mjs): behind the card, larger and fainter; the card lets a little of it through.
.mk.desk .v-b .si-ph{left:50%;top:-30px;height:900px;transform:translateX(-50%);opacity:.16;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.mk.desk .v-b .r-cert{background:linear-gradient(180deg,rgba(16,22,43,.84),rgba(11,16,32,.9))}
.mk.phone .v-b .si-ph{left:50%;top:40px;width:560px;transform:translateX(-50%);opacity:.12;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
   C, kept likewise: beside the card, smaller and clear, in the dashboard splash's round frame. Its HTML differs: the card is wrapped as
   <div class="si-pair"><div class="r-port-fr si-port"><img alt=""></div><div class="r-cert si-card">...</div></div>.
.mk .si-pair{display:flex;align-items:center;gap:56px}
.mk .si-pair .si-card{width:470px}
.mk.desk .si-port{width:260px;height:278px}
.mk.desk .si-port::before{width:440px;height:440px;margin:-220px 0 0 -220px;opacity:.28}
.mk.desk .si-port img{width:260px;height:278px;opacity:.85}
.mk.phone .si-port{width:150px;height:160px}
.mk.phone .si-port::before{width:260px;height:260px;margin:-130px 0 0 -130px;opacity:.26}
.mk.phone .si-port img{width:150px;height:160px;opacity:.85}
.mk.phone .v-c{gap:14px}
*/
/* ---- W2 Task P part 2a: the credit at the foot of every sign-in screen (docs/design/enroll-words-and-credit.css, approved 19/10): the last child
   of the splash, out of flow, one line. Its generic .credit rules are shell.css's. */
.mk .r-splash.si > .credit.row{position:absolute;z-index:1;left:0;right:0;bottom:16px;margin:0;display:flex;justify-content:center;align-items:baseline;gap:7px;direction:ltr;line-height:1.3}
/* Task P fix M1: the row clears the column and the main button. Its bottom has no env(): on the phone the bare box already pads by the safe area
   (app.css). The phone gives its link a 44px target (shell.css) reaching 15px past the 15px line each way, so 16 + 15 + 15 = 46px of the foot is the
   row's, and the splash keeps 56px clear for it. */
.mk.phone .r-splash.si:has(> .credit.row){padding-bottom:56px}
.mk .credit.row span{font-family:var(--m-disp);font-style:italic;font-size:11.5px;color:var(--m-muted)}
.mk .credit.row i{color:var(--m-gold);font-style:normal;opacity:.6}
.mk .credit.row a{font-size:10.5px;letter-spacing:.02em;color:var(--m-faint);text-decoration:none}