/* UI system v1, Phases 3–4 (app/ui1.php): the shells and the pages outside the
   account area, moved onto assets/css/tokens.css. Loaded only while
   ui_system_v1 is on; every rule is scoped under .ui1 (a class on <body>). */

/* =====================================================================
   Phase 3 · shells
   ===================================================================== */

/* 5.1 The header pill stays the liquid glass pill exactly as before, on desktop and
   phones, scrolled or with the drawer open (owner's decision, 5 Oct): no UI v1
   background, blur, size or position rules here. */
.ui1 .bf-nav-logo svg{margin-left:-6px}
/* On the home hero the logo is pure white (no opacity or blend). */
.ui1 .bf-nav-shell.header--on-field:not(.bf-nav-scrolled):not(.bf-drawer-open) .bf-nav-logo,
.ui1 .bf-nav-shell.is-over-hero:not(.bf-nav-scrolled):not(.bf-drawer-open) .bf-nav-logo{color:#fff;opacity:1;filter:none;mix-blend-mode:normal}
.ui1 .bf-nav-primary>a{font-size:var(--t-small-size);font-weight:600}
.ui1 .bf-nav-cta,.ui1 .bf-nav-menu>button.bf-nav-cta{font-weight:600;font-size:var(--t-small-size);box-shadow:none}
.ui1 .bf-nav-login{font-size:var(--t-small-size);font-weight:600}

/* 6.13 Menus: the white bf-menu, no × button, no dark glass. */
.ui1 .bf-nav-popover{border:0;border-radius:var(--r-inner);background:#fff;box-shadow:var(--shadow-float),0 0 0 1px rgba(14,20,23,.04);padding:8px}
.ui1 .bf-nav-popover a,.ui1 .bf-nav-popover button{font-size:var(--t-small-size);font-weight:600;border-radius:calc(var(--r-inner) - 4px);min-height:44px;padding:11px 12px}
.ui1 .bf-nav-popover a>span{font-size:var(--t-caption-size);font-weight:400}
.ui1 .bf-nav-popover .bf-nav-popover-close{display:none!important}
.ui1 .bf-language-popover button b{font-size:var(--t-caption-size)}

/* 5.2 The mobile drawer stays as it is: its glass panel and the grainy "I'm selling /
   I'm buying" tiles are kept (owner's decision, 5 Oct: grainy images stay). */

/* 5.3 Footer: assets/fix6/footer.css (fix 6 Part 1; the ink card footer_v2 is gone). */

/* The shared page header (page_header()) on the tokens, for pages that use it. */
.ui1 .page-head{margin:0 0 var(--s-6)}
.ui1 .page-head h1{font-family:var(--font-display);font-weight:400;font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);margin:0;text-wrap:balance}
.ui1 .page-head-eyebrow{display:block;margin-bottom:var(--s-2);font-size:var(--t-eyebrow-size);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--sub)}
.ui1 .page-head-desc{margin:var(--s-2) 0 0;font-size:var(--t-lead-size);line-height:var(--t-lead-lh);color:var(--ink-2);max-width:60ch}

/* Text never breaks mid-word (section 8.3). */
.ui1 h1,.ui1 h2,.ui1 h3{overflow-wrap:normal;word-break:normal;text-wrap:balance}
.ui1 p{text-wrap:pretty}

/* =====================================================================
   Phase 4 · 6.1 Home (public)
   ===================================================================== */
body.ui1-home{--sec-pad:var(--s-9)}
@media (max-width:760px){body.ui1-home{--sec-pad:var(--s-8)}}
body.ui1-home .sect-h h2,body.ui1-home #partners-pitch h2,body.ui1-home .he-head h2{font-family:var(--font-display);font-weight:400;font-size:var(--t-h2-size);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls)}
body.ui1-home .sect-h p{font-size:var(--t-lead-size);line-height:var(--t-lead-lh);color:var(--ink-2)}

/* Home field cards (owner's revision of 6.1, 5 Oct): the home page keeps its fields.
   Every one: --r-field + clip-path + isolation, the colour-only field (object-fit
   cover, -sm at 1x), the one universal .bh-grain on top, the middle colour while loading. */
body.ui1-home .plate{border-radius:var(--r-field);-webkit-clip-path:inset(0 round var(--r-field));clip-path:inset(0 round var(--r-field));isolation:isolate}
body.ui1-home .plate>.ui1-fpic{position:absolute;inset:0;z-index:0;display:block}
body.ui1-home .plate>.ui1-fpic>img{display:block;width:100%;height:100%;object-fit:cover}

/* What moves: one family of four fields (ember-teal, petrol-saffron, northern, pine-amber,
   repeating), 4x5 cards in a scroll row with snap: 4 visible on desktop, ~80% on phones.
   No autoplay, no edge fades; arrows, keyboard (focus the row, arrow keys) and swipe. */
body.ui1-home .ui1-moves-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);max-width:none}
body.ui1-home .ui1-moves-head>div:first-child{max-width:640px}
body.ui1-home .ui1-moves-nav{display:flex;gap:var(--s-2);flex:none}
body.ui1-home .ui1-moves-nav .bf-btn{width:48px;padding:0}
body.ui1-home .ui1-moves{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--s-5)) / 4);gap:var(--s-5);
  margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r-field)}
body.ui1-home .ui1-moves::-webkit-scrollbar{display:none}
body.ui1-home .ui1-moves:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
body.ui1-home .ui1-move{aspect-ratio:4/5;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end}
/* bottom scrim 0 -> .45, held at .45 across the text zone */
body.ui1-home .ui1-move::after{background:linear-gradient(to top,rgba(14,20,23,.45),rgba(14,20,23,.45) 30%,rgba(14,20,23,0) 62%)}
body.ui1-home .ui1-move .plate-body{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5)}
body.ui1-home .ui1-move-name{font-family:var(--font-display);font-weight:400;font-size:var(--t-h3-size);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);color:#fff}
body.ui1-home .ui1-move-range{font-size:var(--t-small-size);line-height:var(--t-small-lh);font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  body.ui1-home .ui1-moves{grid-auto-columns:80%;gap:var(--s-4)}
  body.ui1-home .ui1-moves-nav{display:none}
}

/* What it costs: the saffron-night field stays behind the calculator, and the calculator keeps
   its liquid-glass sheet exactly as before (owner's decision, 5 Oct), only a little smaller so
   it sits inside the field with room above and below. The "~$0.00 (Estimate…)" line goes. */
body.ui1-home .price-fee-estimate{display:none}
/* Set exactly like the partners earnings sheet (.pit-sheet): same glass, 26px padding,
   11px/600 uppercase labels at .56, 13px rows at .72 with .16 dividers, white 600 values. */
body.ui1-home .price-sheet{max-width:440px;padding:26px}
body.ui1-home .price-in label,body.ui1-home .price-fee-lab,body.ui1-home .pit-earn-head{font-size:var(--t-eyebrow-size);font-weight:600;letter-spacing:var(--t-eyebrow-ls);color:rgba(255,255,255,.56)}
body.ui1-home .price-amount span{color:rgba(255,255,255,.56)}
body.ui1-home .price-amount input{height:52px;font-family:inherit;border-color:rgba(255,255,255,.16)}
/* No up/down spinner on the price box (owner, 6 Oct): typing is the way in. */
body.ui1-home .price-amount input[type=number]{-moz-appearance:textfield;appearance:textfield}
body.ui1-home .price-amount input[type=number]::-webkit-outer-spin-button,
body.ui1-home .price-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
body.ui1-home .price-split{margin:14px 0 18px}
body.ui1-home .price-pill{min-height:44px;font-family:inherit;font-size:var(--t-caption-size);font-weight:600;white-space:nowrap;padding:0 var(--s-2);
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
body.ui1-home .price-pill.on{color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32)}
body.ui1-home .price-fee-hero{font-family:var(--font-display);font-size:var(--t-money-xl-size);font-weight:400;line-height:var(--t-money-xl-lh);letter-spacing:var(--t-money-xl-ls);margin:4px 0 6px}
body.ui1-home .price-fee-split{font-size:var(--t-caption-size);color:rgba(255,255,255,.72);margin:6px 0 16px}
body.ui1-home .price-band-row,body.ui1-home .pit-earn-row{padding:11px 0;font-size:var(--t-caption-size);color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.16)}
body.ui1-home .price-band-row b{color:#fff;font-weight:600}
body.ui1-home .price-bands{border-top-color:rgba(255,255,255,.16)}
body.ui1-home .price-fine{color:rgba(255,255,255,.56);margin-top:14px}
@media (max-width:400px){body.ui1-home .price-pill{padding:0 var(--s-1)}}

/* FAQ: grouped accordions in the --w-text container */
body.ui1-home .ui1-faq{max-width:var(--w-text);margin:var(--s-8) auto 0}
body.ui1-home .ui1-faq-h{margin:var(--s-6) 0 var(--s-2);font-family:var(--font-display);font-weight:400;font-size:var(--t-h3-size);letter-spacing:var(--t-h3-ls)}
body.ui1-home .ui1-faq-h:first-child{margin-top:0}
body.ui1-home .ui1-faq summary{font-size:var(--t-body-size)}
body.ui1-home .ui1-faq details p{margin:0;font-size:var(--t-small-size);line-height:1.6;color:var(--ink-2)}

/* Partners: the grainy field stays */
body.ui1-home .pit-figure{font-family:var(--font-display);font-weight:400;font-size:var(--t-money-xl-size);letter-spacing:var(--t-money-xl-ls)}
body.ui1-home .pit-lab{font-size:var(--t-eyebrow-size);font-weight:600;color:var(--sub)}
body.ui1-home .pit-copy p{font-size:var(--t-body-size);color:var(--ink-2)}

/* Before you start: on the tokens */
body.ui1-home .trust-item b{font-size:var(--t-body-size);font-weight:600;letter-spacing:0}
body.ui1-home .trust-item span{font-size:var(--t-small-size);color:var(--ink-2)}
body.ui1-home .trust-ic{width:44px;height:44px}

/* Already talking to someone? (home-entry): two plain white cards on the tokens */
body.ui1-home .he-card{border-radius:var(--r-card);border-color:var(--line);box-shadow:none}
body.ui1-home .he-card h3{font-family:var(--font-display);font-weight:400;font-size:var(--t-h3-size);letter-spacing:var(--t-h3-ls)}
body.ui1-home .he-card p{font-size:var(--t-small-size)}
body.ui1-home .he-btn{min-height:48px;border-radius:var(--r-pill);font-weight:600}

/* =====================================================================
   6.6 Trade rules
   ===================================================================== */
body.ui1-rules-page main{width:100%;max-width:none;margin:var(--s-7) 0 0}
body.ui1-rules-page .rules{max-width:calc(var(--w-text) + 2 * var(--gutter-page))}
body.ui1-rules-page .rules .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-5);box-shadow:none;margin:0}
body.ui1-rules-page .rules .card+.card{margin-top:var(--s-4)}
body.ui1-rules-page .rules h2{font-family:var(--font-display);font-weight:400;font-size:var(--t-h3-size);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);margin:0 0 var(--s-3)}
body.ui1-rules-page .rules-h3{font-size:var(--t-body-size);font-weight:600}
body.ui1-rules-page .rl li,body.ui1-rules-page .rl-plain li,body.ui1-rules-page .rules .sub{font-size:var(--t-small-size);line-height:1.6;color:var(--ink-2)}
body.ui1-rules-page .rules-table{margin-top:var(--s-4);font-size:var(--t-small-size)}
body.ui1-rules-page .rules-table th{font-size:var(--t-eyebrow-size);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--sub);background:none}
body.ui1-rules-page .rules-tip{border-radius:var(--r-inner);background:var(--paper-3);border:0;font-size:var(--t-small-size)}
@media (max-width:760px){body.ui1-rules-page main{margin-top:var(--s-6)}body.ui1-rules-page .rules .card{padding:20px}
  body.ui1-rules-page .bf-table--stack td{text-align:right}body.ui1-rules-page .bf-table--stack td b{font-weight:600}}

/* =====================================================================
   6.9 New trade · tokens only; and the phone gutter for every app page
   ===================================================================== */
@media (max-width:760px){.ui1 main{width:calc(100% - 2 * var(--gutter-page))}}
body.ui1-new [data-nt-h1]{font-family:var(--font-display);font-weight:400;font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls)}
body.ui1-new .nt-add{font-size:var(--t-small-size);font-weight:600;color:var(--ink)}
body.ui1-new .nt-add:hover{text-decoration:underline;text-underline-offset:3px}

/* =====================================================================
   6.10 Trade created · tokens (the code is already the largest element)
   ===================================================================== */
body.ui1-trade-created .lr-card{border-radius:var(--r-card);border-color:var(--line)}
body.ui1-trade-created .lr-eyebrow{font-size:var(--t-eyebrow-size);letter-spacing:var(--t-eyebrow-ls)}
body.ui1-trade-created .lr-head h1{font-family:var(--font-display);font-weight:400;font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls)}
body.ui1-trade-created .lr-links a,body.ui1-trade-created .lr-links button{font-size:var(--t-small-size);font-weight:600}

/* =====================================================================
   6.11 Ask the seller · two selectable cards with a radio in the corner
   ===================================================================== */
body.ui1-ask .ask-msg{border-radius:var(--r-card);padding-right:52px}
body.ui1-ask .ask-msg:has(input:checked){padding-right:51px}
body.ui1-ask .ask-msg::after{content:"";position:absolute;top:18px;right:18px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);background:#fff}
body.ui1-ask .ask-msg:has(input:checked)::after{box-shadow:inset 0 0 0 6px var(--ink)}
body.ui1-ask .ask-fee input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;border:1px solid var(--line-2);border-radius:var(--r-xs);background:#fff;cursor:pointer}
body.ui1-ask .ask-fee input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--ink)}
body.ui1-ask .ask-fee{display:flex;align-items:flex-start;gap:var(--s-3);min-height:44px;font-size:var(--t-small-size)}
body.ui1-ask .pf-card,body.ui1-ask .ask-field{border-radius:var(--r-card)}

/* =====================================================================
   6.17 The not-found and error pages · page header, two pills, the footer card
   ===================================================================== */
body.ui1 .bf-errpage h1{font-family:var(--font-display);font-weight:400;font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls)}
body.ui1 .bf-errpage p{font-size:var(--t-lead-size);color:var(--ink-2)}
body.ui1 .bf-errpage .btn{min-height:48px;border-radius:var(--r-pill);font-weight:600}

/* =====================================================================
   6.18 Auth pages · tokens only (layout from the mobile-fixes job)
   ===================================================================== */
body.ui1 .auth-split-visual{border-radius:var(--r-field)}
body.ui1 .auth-split-form-in h1{font-family:var(--font-display);font-weight:400;letter-spacing:var(--t-h1-ls)}
body.ui1 .auth-split-form-in .btn{min-height:48px;border-radius:var(--r-pill);font-weight:600}
@media (max-width:760px){body.ui1 .auth-split-form-in .btn{min-height:52px}}

/* =====================================================================
   6.15 Legal pages · the site header and footer card; --w-text; tokens
   ===================================================================== */
body.ui1-privacy main,body.ui1-terms main{width:100%;max-width:none;margin:var(--s-7) 0 0}
.ui1-legal{font-size:var(--t-body-size);line-height:1.65;color:var(--ink)}
.ui1-legal .back{display:none}
.ui1-legal .langbar{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-6)}
.ui1-legal .langbar a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:var(--t-caption-size);font-weight:600;color:var(--ink);text-decoration:none;background:#fff}
.ui1-legal .langbar a.cur{background:var(--ink);border-color:var(--ink);color:#fff}
.ui1-legal h1{font-family:var(--font-display);font-weight:400;font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);margin:0 0 var(--s-2)}
.ui1-legal h2{font-family:var(--font-display);font-weight:400;font-size:var(--t-h2-size);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);margin:var(--s-7) 0 var(--s-3)}
.ui1-legal h3{font-family:var(--font-display);font-weight:400;font-size:var(--t-h3-size);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);margin:var(--s-5) 0 var(--s-2)}
.ui1-legal p,.ui1-legal li{color:var(--ink-2)}
.ui1-legal small{font-size:var(--t-caption-size);color:var(--sub)}
.ui1-legal a{color:var(--ink)}
.ui1-legal .box{display:block;margin:var(--s-4) 0;padding:14px 16px;border:0;border-radius:var(--r-inner);background:var(--paper-3);font-size:var(--t-small-size)}
.ui1-legal table{width:100%;border-collapse:collapse;margin:var(--s-4) 0;font-size:var(--t-small-size)}
.ui1-legal th{text-align:left;font-size:var(--t-eyebrow-size);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--sub);padding:0 16px 10px 0;border-bottom:1px solid var(--line)}
.ui1-legal td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.ui1-legal tr:last-child td{border-bottom:0}
@media (max-width:760px){
  body.ui1-privacy main,body.ui1-terms main{margin-top:var(--s-6)}
  .ui1-legal table,.ui1-legal tbody,.ui1-legal tr,.ui1-legal td{display:block;width:100%}
  .ui1-legal tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .ui1-legal tr:first-child{display:none}
  .ui1-legal td{border:0;padding:3px 0}
  .ui1-legal td:first-child{font-weight:600;color:var(--ink)}
}

/* =====================================================================
   Status pills everywhere (badge(), admin): the bf-status recipe.
   done = teal · waiting = amber · neutral = grey · needs action = white + coral-ink
   ===================================================================== */
.ui1 .status{height:26px;padding:0 10px;gap:6px;border:0;border-radius:var(--r-pill);font-size:var(--t-caption-size);font-weight:600;line-height:1;white-space:nowrap}
.ui1 .status i{width:6px;height:6px;background:currentColor}
.ui1 .status.ok{background:var(--teal-soft);color:var(--teal-ink)}
.ui1 .status.hot{background:var(--amber-soft);color:var(--amber-ink)}
.ui1 .status.neutral{background:var(--paper-3);color:var(--ink-2)}
.ui1 .status.bad{background:#fff;color:var(--coral-ink);box-shadow:inset 0 0 0 1px var(--coral-ink)}

/* =====================================================================
   6.14 Admin pages · tokens and the page header only
   ===================================================================== */
/* Admin tables: trade-code links in ink, never the browser's default blue. */
.ui1 table.adm a{color:var(--ink);font-weight:600;text-underline-offset:3px}
body.ui1-insights .ins-head h1,body.ui1-status .stat-head h1{font-family:var(--font-display);font-weight:400;font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls)}
body.ui1-insights .ins-head .sub,body.ui1-status .stat-head .sub{font-size:var(--t-lead-size);color:var(--ink-2)}
body.ui1-status .stat-pills .sp{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:0;border-radius:var(--r-pill);font-size:var(--t-caption-size);font-weight:600}
body.ui1-status .stat-pills .sp::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
body.ui1-status .stat-pills .sp.ok{background:var(--teal-soft);color:var(--teal-ink)}
body.ui1-status .stat-pills .sp.off{background:var(--paper-3);color:var(--ink-2)}
body.ui1-status .stat-pills .sp.warn{background:var(--amber-soft);color:var(--amber-ink)}
body.ui1-status .stat-pills .sp.bad,body.ui1-status .stat-pills .sp.err{background:#fff;color:var(--coral-ink);box-shadow:inset 0 0 0 1px var(--coral-ink)}
.ui1 .card{border-radius:var(--r-card)}
.ui1 .ins-card,.ui1 .stat-card{border-radius:var(--r-card)}

/* Section 7 copy-level fixes that are styling: the dashboard greeting in sentence
   case, and "Identity not checked" as a neutral pill, never rose. */
.ui1 .dash-greet{text-transform:none;letter-spacing:0;font-size:var(--t-small-size);font-weight:400}
.ui1 .prof-warn{color:var(--ink-2);background:var(--paper-3);border-radius:var(--r-pill);padding:2px 10px}