/* The app frame. The design drew its two screens as fixed frames (desktop 1280x800, phone 390x844);
   the app fills the viewport instead. The class of #app comes from the shell (/app/main.mjs): "mk desk"
   from min-width: 900px, "mk phone" below it. The design's own .mk.desk and .mk.phone rules in
   royal/*.css stay as they are and key off that class; only the two frames are re-sized here. */

/* The page behind the frame: the design's --m-bg (royal/base.css), which lives on .mk and so is not
   visible to the body. The default 8px body margin would push the frame off the edge. */
html,body{margin:0;background:#080c18}

.mk{box-sizing:border-box}

/* The static line inside #app (index.html, W1 close F-6): /app/main.mjs replaces it at boot, so only a page whose modules never ran
   keeps it. It waits 3 s before it shows, so a page that boots never flashes it; with reduced motion (no animation) it shows at once. */
.mk .app-empty{margin:0;padding:24px 16px;color:var(--m-muted);font-size:14px;animation:appEmptyIn 0s 3s both}
@keyframes appEmptyIn{from{visibility:hidden}to{visibility:visible}}

/* Desktop: the design's grid (side rail + main column), filling the viewport. .r-main drops the design's fixed
   800px height and fills the row instead. The row is pinned with grid-template-rows because that is what makes
   .r-main{height:auto} scroll: without it the implicit row is auto-sized and grows to the content, so .r-main and
   its .scroll body would grow taller than the viewport (the frame clips it) instead of scrolling inside .scroll. */
.mk.desk{width:100%;height:100dvh;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.mk.desk .r-main{height:auto}

/* Phone: the design's column, filling the viewport. The frame pads the sides only (landscape notch). The top and
   bottom insets go into the two bars, so their backgrounds reach the screen edges: the top bar sits under the
   black-translucent status bar and the tab bar under the home indicator. The design's 22px under the tab icons
   stands in for the home indicator, so the bar takes the larger of the two, not the sum. The sheet's 30px does the
   same job, but its formula differs: the larger of 30px and the inset plus 12px, so its content keeps 12px
   above the home indicator. */
.mk.phone{width:100%;height:100dvh;display:flex;flex-direction:column;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.mk.phone .p-bar{padding-top:calc(8px + env(safe-area-inset-top,0px));min-height:calc(48px + env(safe-area-inset-top,0px))}
.mk.phone .tb{padding-bottom:max(22px,env(safe-area-inset-bottom))}
.mk.phone .ov-card{padding-bottom:max(30px,calc(env(safe-area-inset-bottom,0px) + 12px))}

/* Toasts, comets and rings. The design drew them outside .mk (round 2); the shell mounts them inside #app, so
   .mk is their containing block (it is position:relative in royal/base.css) and the round 1 .mk .toast rules
   (royal/states.css) now match too, and outrank round 2's .toast (royal/viewer.css). So round 2's approved values
   are restated here (docs/design/round-2-src/royal-2.css): above the comets (60) and the rings (59), bottom 26px,
   padding 18px, the 16px slide with its spring, the deeper shadow, and no text-align of its own (round 1 centred
   it). On the phone the toast sits 24px under the top bar (48px bar + the inset), where round 2 had 104px under a
   drawn status bar, and slides the same 16px. */
.mk .toast{z-index:70;bottom:26px;transform:translate(-50%,16px) scale(.96);padding:11px 18px;transition:opacity .25s,transform .5s cubic-bezier(.2,1.25,.35,1);box-shadow:0 14px 34px rgba(0,0,0,.45);text-align:inherit}
.mk.phone .toast{top:calc(env(safe-area-inset-top,0px) + 72px);transform:translate(-50%,-16px) scale(.96)}

/* The review page gave every field the font of its surroundings (button, input, select, textarea: font inherit). */
.mk input,.mk select{font:inherit}
/* Fields are 16px on the phone, and on any touch screen (the desk shell on a tablet), so the iPhone does not zoom in on them (screens spec 9). A desk with a
   mouse keeps the design's sizes. The sign-in code field draws its own 24px. This block is last so it outranks the screens' own field sizes. */
.mk.phone input:not(.si-code),.mk.phone select,.mk.phone textarea{font-size:16px}
@media (pointer:coarse){.mk input:not(.si-code),.mk select,.mk textarea,.mk .srch input,.mk .sel{font-size:16px}}

/* A merchant with no business name shows the approved placeholder (mockup d): italic and muted, so it reads as a
   missing name and never as a real one. */
.mk .noname{font-style:italic;color:var(--m-muted);font-weight:400}

/* While a refetch of the screen fails (W1 close F-2), the top bar's offline tag carries the last good update after its words, in the
   muted colour of the Live tag, so the red stays on the words that say the server cannot be reached. */
.mk .r-live.off small{color:var(--m-muted);font-size:11px}

/* The shell (/app/main.mjs) draws into two boxes inside #app: .app-root holds the shell, .app-layer holds what floats over it
   (the splash, the sheet, the toast), so a redraw of the shell leaves them be. Both are display:contents, so the design's
   grid (desktop) and column (phone) see the shell's parts as their own children. The screen's body sits in .app-body inside
   the design's scroller, also display:contents, so the scroller's flex column and gap reach the screen's sections. */
#app > .app-root,#app > .app-layer,.mk .app-body{display:contents}
.mk .app-body > *{flex-shrink:0}

/* The rail items, the tabs, the back link and the crumb are links (the design drew buttons), so they open in a new tab on a
   modified click. They keep the design's look: no underline, and the crumb's link has the crumb's color. */
.mk a.r-nav-i,.mk a.tb-i,.mk a.p-back,.mk .r-crumb a{text-decoration:none}
.mk .r-crumb a{color:inherit}
.mk .r-crumb a:hover{color:var(--m-fg)}

/* A value that a live update changed glows once (design §6), wherever it is; the design drew it on the Lists counters only.
   The keyframe is the design's (royal/lists.css). */
.mk .flash{animation:flash .6s ease-out}

/* The sign-in screens have no rail and no tabs: their box spans the whole frame. */
.mk .app-bare{grid-column:1/-1;flex:1;min-height:0;padding:26px 28px;overflow:auto}
/* On the phone the bare box (the boot skeleton, the boot error, the sign-in screens) has no bars to carry the top and
   bottom insets, so it clears them itself, with the phone body's 14px; the frame already pads the two sides by theirs. */
.mk.phone .app-bare{padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px))}

/* The splash fades for 0.8 s (royal/motion.css); visibility only turns hidden at the end, so taps go through it at once. */
.mk .r-splash.out{pointer-events:none}

/* Lists and Merchants. The approved mockup's own rules (docs/web/2026-10-16-w1-states-mockup.html, its style block): the foot
   of a list with more to show (Show older), the dashes of a list with no merchants yet, and a link drawn as a button. */
.mk .more-f{display:flex;justify-content:center;padding-top:12px}
.mk .lc-c.none .num{color:var(--m-faint)}
.mk a.btn,.mk a.mc{text-decoration:none}
/* The design drew the strip's figures, a list's counts and the merchant rows as boxes with click handlers; here they are links,
   so a modified click opens a new tab. They keep the design's look: no underline, and the color of the box they sit in. A
   strip figure's link lays out its three lines as the design's cell does (royal/lists.css .strip > div). */
.mk .strip a,.mk a.cnt,.mk a.tr{color:inherit;text-decoration:none}
.mk .strip a{display:grid;gap:2px}
/* The design's style="min-width:0" on the row's name and decision cells; the CSP takes no inline style, so it is a class. */
.mk .min0{min-width:0}
/* A filter chip (one list, or the undersold preset): the design's gold tag, with its clear button in the tag's own color. */
.mk .fchip .icon-btn{padding:0;color:inherit}
.mk .fchip .icon-btn .ic{width:12px;height:12px}
/* The eyebrow's All lists link: the design drew a button, which does not take the eyebrow's capitals and spacing (the browser's
   own button style); a link inherits them, so they are taken off. */
.mk .sh-eye a.lnk{text-transform:none;letter-spacing:normal}
/* The phone's pager (plan A.5) sits under "Showing n of total", centred like it. */
.mk .m-foot .pager{justify-content:center;margin-top:8px}

/* The merchant card. Its root (.card-root) is display:contents, like .app-body, so the scroller's column and gap reach the
   certificate and the sections; it is the element the owner's revealed details belong to while this view is on show. */
.mk .card-root{display:contents}
.mk .card-root > *{flex-shrink:0}
/* The status chip and the flag tags, under the meta line: the design's card has no row for them. A tag that links to its place
   on the card keeps the tag's look. */
.mk .r-tags{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mk a.tag{text-decoration:none}
/* The design's style="color:var(--m-muted)" on a best number not found yet, and style="font-size:8.5px" on a month still reading. */
.mk .r-figs b.r-best.muted,.mk .r-pbest b.r-best.muted{color:var(--m-muted)}
/* A best number that is not verified: plain, in the neutral colour, with no crown (W1 close D-3). */
.mk .r-figs b.r-best.plain,.mk .r-pbest b.r-best.plain{color:var(--m-fg)}
.mk .dec.dec-xs{font-size:8.5px}
/* An account's heading when the statements come from more than one, those with no account last (contract 6.3, months[] edges). */
.mk .dep-acct{padding:12px 0 4px;border-top:1px solid var(--m-line);font-family:var(--m-caps);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted)}
/* The unsure folder's lines (A.3), under the Bank deposits text. */
.mk .match-l{display:grid;gap:4px;margin-top:10px;font-size:12px;color:var(--m-muted)}
/* The design's style="color:var(--m-amber)" on a file that cannot be read. */
.mk .doc-t span.doc-warn{color:var(--m-amber)}
/* The lead's ruling (16/10): the deposits tag ("Read from page …", PAPER.readFrom) keeps its look and its place against the deposits line, and the line
   gets its own clear space above it, so the tag covers no figure and no label. */
.mk .pp-sum .pp-f.hit{margin-top:20px}

/* Spam and Needs review (Task 21). The merchant's name is the row's link to its card (the design drew a button, lnk-plain), so W2's
   Return to work and Decide can sit beside it in the row; it keeps the button's look. */
.mk a.lnk-plain{text-decoration:none}
/* The design's inline styles, as classes: style="font-size:18px" on the Spam card's bank figure, style="font-size:12px;padding:4px
   10px" on the waiting tag with style="font-weight:700" on its count, and style="font-weight:600" on the vendor's figure in a row. */
.mk .qcard .mc-amt{font-size:18px}
.mk .tag.q-wait{font-size:12px;padding:4px 10px}
.mk .q-wait b{font-weight:700}
.mk .q-vendor{font-weight:600}
/* The Spam phone cards sit in div.spam-list, not straight in the phone body as Needs review's do: the same column and 12px gap (the
   lead, final pass B15). */
.mk.phone .spam-list{display:flex;flex-direction:column;gap:12px}

/* More (Task 21). The role line in capitals, as the design writes it ("OWNER · ROYAL EQUITY PARTNERS"), from the labels' words. */
.mk .who small{text-transform:uppercase}
/* The install sheet's app icon: the frame the design gives it with style="--s:72px;--r:16px" (royal-2.css, class "ai"), under its
   own name, since the icon board that class belongs to is not ported. */
.mk .inst-ai{width:72px;height:72px;border-radius:16px;overflow:hidden;display:block;box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06);flex:none}
.mk .inst-ai svg{width:100%;height:100%;display:block}

/* The sign-in screens (Task 23; royal/signin.css). A sign-in screen fills the bare box and pads itself as the mockup does, so the box
   drops its own padding (on the phone it keeps the insets, where the mockup draws the status bar). The screen is laid in the box
   rather than over it (the mockup's computer frame places it absolutely), so a step taller than the window scrolls instead of
   losing its top. */
.mk .app-bare:has(> .r-splash.si){padding:0}
.mk.phone .app-bare:has(> .r-splash.si){padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.mk .app-bare > .r-splash.si{position:relative;inset:auto;min-height:100%}
/* The name in the top bar is the button of its menu (frame 6): the button keeps the chip's look. */
.mk button.r-user{background:none;border:0;padding:0;text-align:left;cursor:pointer}