/* Borro's polish layer (2026-10-21, Roy: "optimize for mobile and go through every inch to make sure it's premium
   feeling and production polished"). Loaded last on every page, over pro.css, the page's own sheets, dark.css and
   i18n-next.css. Mobile first in what it fixes: a thumb-sized target for everything you can press, fields that never
   make iOS zoom, the phone's notch and home bar kept clear, the order card as a sheet that rises from the bottom, wide
   tables as stacked rows, charts you can scrub with a finger, and nothing that only shows on hover. Tokens only, so
   dark.css's palette applies as it is. */

:root {
  /* One spacing scale (4px steps), one type scale (whole pixels), radii in five steps. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-base: 15px; --t-lg: 16px; --t-xl: 18px; --t-2xl: 20px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-pill: 999px;
  --tap: 44px;
  --ease-sheet: cubic-bezier(.22, .84, .24, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ------------------------------------------------------------------ the notch, the rounded corners, the home bar
   Every page sets viewport-fit=cover: the bars reach the screen's edges and their contents stay inside the safe area. */
.head, .rh-bar { padding-top: var(--safe-t); }
.wrap { width: calc(100% - 2 * max(var(--gutter), var(--safe-l), var(--safe-r))); }
.rh-bar .wrap { width: calc(100% - 2 * max(clamp(20px, 2.4vw, 48px), var(--safe-l), var(--safe-r))); }
.rh-main.wrap { width: calc(100% - 2 * max(clamp(20px, 4vw, 72px), var(--safe-l), var(--safe-r))); }
.foot-in { padding-bottom: calc(40px + var(--safe-b)); }
.toast { bottom: calc(28px + var(--safe-b)); }

/* ------------------------------------------------------------------ numbers line up
   Every figure on the site sets in tabular lining numerals (pro.css turns tnum on for the body; these keep it where a
   part sets its own font). */
.big, .title, .delta, .pcard strong, .card strong, .apr-pill, .orow b, .ofield input, .holdings .v, .px-num, .mk td, .dk-table td, .stat b, .out strong { font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------------------------ charts you can scrub with a finger
   rh.js and rh-prices.js start the scrub on the press itself; a long press never selects text or opens the callout. */
.bk-chart { touch-action: pan-y; }
.chart, .px-plot, .bk-chart { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------------------ nothing only on hover
   On a touch screen a hover state sticks after the tap and a hover lift jumps: neither shows there. */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .wrow:hover:not(.on), .rh-results button:hover:not(.on), .asset-items button:hover:not(.kb):not([aria-selected="true"]), .pick:hover:not([aria-pressed="true"]), .mk tbody tr:hover { background: transparent; }
  .holdings a:hover b, .news:hover b, .act:hover b, .rh-links a:hover:not([aria-current]), .ranges button:hover:not([aria-pressed="true"]) { color: inherit; }
  a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
}
/* A press reads as a press: rows and cards dim for the moment the finger is down. */
@media (hover: none) {
  .wrow:active, .holdings a:active, .news:active, .act:active, .card:active, .chip2:active, .asset-items button:active, .px-row:active, .dk-item:active, .mk.mk-stack tr:active, .tk-opt:active { background: var(--sunk); }
  .pill-btn:active, .btn:active, .mtrade:active, .dk-jump:active { transform: scale(.985); }
}

/* ------------------------------------------------------------------ a thumb-sized target for everything you press
   44px, the size a fingertip covers (Apple's guideline, WCAG 2.5.5). Where a control looks smaller, it keeps its look
   and an invisible ring around it takes the press. */
@media (max-width: 980px), (pointer: coarse) {
  .theme-toggle, .lang-btn, .rh-search, .menu > summary, .omax, .dk-max, .wallets .w-x, .wallets .w-get, .pbtn, .btn.sm, #connect, .ag-copy, .px-size button, .dk-x { position: relative; }
  .theme-toggle::before, .lang-btn::before, .rh-search::before, .menu > summary::before, .btn.sm::before, #connect::before, .pbtn::before, .ag-copy::before { content: ""; position: absolute; inset: -3px; }
  .omax::before, .dk-max::before, .wallets .w-get::before, .dk-x::before { content: ""; position: absolute; inset: -10px -6px; }
  /* The order card's (i) buttons are 22px: an 11px ring makes them 44 to the touch. */
  .otip { position: relative; }
  .otip::before { content: ""; position: absolute; inset: -11px; }

  /* The ranges under a chart, the order card's tabs and modes, the chips. */
  .ranges { padding-bottom: 0; }
  .ranges button { min-height: var(--tap); padding: 0 14px; }
  .ranges button[aria-pressed="true"]::after { bottom: -1px; }
  .order-tabs button { min-height: var(--tap); padding-top: 10px; }
  .omode button { min-height: var(--tap); }
  .chip2 { height: var(--tap); }
  .pbtn { height: 38px; padding: 0 15px; }
  .btn.sm { height: 40px; }
  .head .logo { display: flex; align-items: center; min-height: var(--tap); }
  .menu > summary { width: 40px; height: 40px; }
  .head .theme-toggle, .head .lang-btn { width: 40px; height: 40px; }
  .wallets .w-x { width: var(--tap); height: var(--tap); }
  .wallets .w-row { min-height: 56px; }
  .acct-menu .acct-row, .lang-menu a { min-height: var(--tap); }
  .acct-menu .acct-row { display: flex; align-items: center; }
  .rh-results button { min-height: 52px; }
  .asset-items button { min-height: 52px; }
  .dk-seg button { min-height: 40px; }
  .dk-in { height: var(--tap); }
  .orow .dk-in input { height: 42px; }
  .px-size button { min-height: 36px; }
  .px-size button::before { content: ""; position: absolute; inset: -4px 0; }
  .seg button { height: var(--tap); }
  .foot-cols a[href^="https://x.com"], .foot-cols a[href^="https://twitter.com"] { min-width: var(--tap); }
  .mk.onchain a, .contracts a { display: inline-flex; align-items: center; min-height: 36px; }
  /* Text links that stand alone (a section's "All notes", a card's "Connect a wallet", the footer's map). */
  .sec2-head a, .pc-connect, .olink, .order .foot-note a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -12px; }
  .pc-connect { margin-block: -14px; }
  .foot-cols a { display: flex; align-items: center; min-height: 40px; padding: 0; }
  .menu-in a:not(.btn) { min-height: var(--tap); display: flex; align-items: center; padding-block: 0; }
  input[type="range"] { min-height: 32px; }
}

/* ------------------------------------------------------------------ fields never make iOS zoom
   Safari zooms the page into any field set smaller than 16px; every field on a phone is at least that. */
@media (max-width: 980px), (pointer: coarse) {
  .rh-search input, .asset-menu input, .search input, .olong, .dk-credit input:not([type="checkbox"]), .dk-in input, .dk-form input, .dk-form select, .dk-form textarea, .px-menu input, .tk-menu input, .bk-field input, .ag-field input, .pask input, dialog input:not([type="checkbox"]):not([type="radio"]), .order input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .dk-order input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .dk-order select, #view input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), #view select, #rail input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), #rail select { font-size: 16px; }
  .olong { height: 36px; }
}

/* ------------------------------------------------------------------ the app's bar on a phone
   The bar is 56px, every round button 40px (44 to the touch), the wordmark a touch smaller; the tab strip under it
   spreads its five tabs across the width and scrolls only when a language's words do not fit. */
@media (max-width: 640px) {
  .rh-bar-in { height: 56px; gap: 8px; }
  .rh-bar .logo { display: flex; align-items: center; min-height: var(--tap); }
  .rh-bar .logo img { height: 18px; }
  .rh-search { width: 40px; }
  .rh-search input { height: 40px; padding: 0 0 0 40px; }
  .rh-search svg { left: 12px; top: 12px; }
  .rh-search:focus-within input { padding: 0 14px 0 40px; }
  .rh-bar .theme-toggle { width: 40px; height: 40px; }
  .rh-bar .lang-btn { width: 40px; height: 40px; }
  .rh-links .pill-btn { height: 40px; padding: 0 16px; font-size: 15px; }
  .rh-sub-in { justify-content: space-between; gap: 6px; height: 44px; -webkit-mask-image: none; mask-image: none; }
  .rh-sub-in.over:not(.end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .rh-sub a { padding: 0 4px; font-size: 14px; }
  .rh-sub a:first-child { margin-left: -4px; }
  .rh-sub a[aria-current]::after { left: 4px; right: 4px; }
  .rh-main { padding-top: 20px; }
  /* Below the bar, the address pill keeps to its own width so the bar never overflows at 360. */
  body.connected #connect { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 40px; }
}
@media (max-width: 420px) {
  .rh-bar .lang-next { top: calc(100% + 2px); }
  .rh-bar .rh-sub-in { width: calc(100% - 2 * max(clamp(20px, 2.4vw, 48px), var(--safe-l), var(--safe-r)) - 48px); margin-left: max(clamp(20px, 2.4vw, 48px), var(--safe-l)); }
}
@media (max-width: 380px) {
  .rh-bar .logo img { height: 16px; }
  .rh-links .pill-btn { padding: 0 14px; font-size: 14px; }
  body.connected #connect { max-width: 132px; padding: 0 12px; font-size: 14px; }
}

/* ------------------------------------------------------------------ the order card as a sheet (phones and tablets)
   Wide, the card sits in the column beside the chart. Narrower than 980px the page is one column, and the card rises
   from the bottom of the screen when the pinned Trade button is pressed, over a dimmed page, the way a trading app
   opens its order ticket: drag the handle down, tap outside or press Escape to put it away. rh.js opens and closes it;
   on a desk the desk's own card (#rail) rises the same way. Wide, the wrapper is display: contents and lays out as
   before. */
.osheet { display: contents; }
.osheet:focus { outline: none; }
.osheet-bar, .osheet-scrim { display: none; }
@media (max-width: 980px) {
  body.rh.sheetable .osheet {
    display: block; position: fixed; z-index: 46; left: 0; right: 0; bottom: 0; margin-inline: auto;
    width: min(100%, 560px); max-height: calc(100dvh - 40px - var(--safe-t));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 var(--safe-r) calc(12px + var(--safe-b)) var(--safe-l);
    border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface);
    box-shadow: 0 0 0 1px var(--line), 0 -30px 80px -30px rgba(13, 13, 15, .5);
    transform: translateY(calc(100% + 40px)); visibility: hidden;
    transition: transform .44s var(--ease-sheet), visibility 0s linear .44s;
  }
  html.sheet-open body.rh.sheetable .osheet { transform: none; visibility: visible; transition: transform .44s var(--ease-sheet), visibility 0s; }
  body.rh.sheetable .osheet.dragging { transition: none; }
  body.rh.sheetable .osheet-bar { display: block; position: sticky; top: 0; z-index: 4; height: 40px; background: var(--surface); touch-action: none; cursor: grab; }
  body.rh.sheetable .osheet-bar::before { content: ""; position: absolute; left: 50%; top: 10px; width: 40px; height: 5px; margin-left: -20px; border-radius: var(--r-pill); background: var(--line-2); }
  .osheet-x { position: absolute; right: 8px; top: 2px; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); cursor: pointer; }
  .osheet-x svg { width: 30px; height: 30px; padding: 7px; border-radius: var(--r-pill); background: var(--sunk); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .osheet-x:active svg { background: var(--line); }
  /* Inside the sheet the card is the sheet: no second border, shadow or corner. */
  body.rh.sheetable .osheet > .order, body.rh.sheetable .osheet > #rail { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  body.rh.sheetable .osheet > .order:empty { min-height: 480px; }
  body.rh.sheetable .osheet .order-head { padding-top: 0; }
  body.rh.sheetable .osheet .asset-menu { position: relative; top: auto; margin-top: 8px; }
  body.rh.sheetable .osheet-scrim {
    display: block; position: fixed; inset: 0; z-index: 45; background: rgba(8, 8, 10, .46);
    -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1);
    opacity: 0; pointer-events: none; transition: opacity .32s ease;
  }
  html.sheet-open body.rh.sheetable .osheet-scrim { opacity: 1; pointer-events: auto; }
  html.sheet-open, html.sheet-open body { overflow: hidden; }
  html.sheet-open .mtrade, html.sheet-open .dk-jump { opacity: 0; pointer-events: none; }

  /* The pinned Trade button: every one-column width, clear of the home bar, never wider than a thumb's reach. */
  body.rh .mtrade { display: flex; left: max(16px, var(--safe-l)); right: max(16px, var(--safe-r)); bottom: calc(16px + var(--safe-b)); margin-inline: auto; max-width: 520px; transition: opacity .2s, transform .2s; }
  body.rh { padding-bottom: calc(84px + var(--safe-b)); }
  body.rh.tabview .mtrade { display: none; }
  body.rh.tabview { padding-bottom: 0; }
  .dk-jump { left: max(16px, var(--safe-l)); right: max(16px, var(--safe-r)); bottom: calc(16px + var(--safe-b)); margin-inline: auto; max-width: 520px; }
  body.rh.tabview .dk-main { padding-bottom: calc(72px + var(--safe-b)); }
  /* The view holds the first screen while it loads, so nothing under it moves into view as it paints. */
  body.rh #view { min-height: calc(100svh - 120px); }
}
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  body.rh.sheetable .osheet, html.sheet-open body.rh.sheetable .osheet, body.rh.sheetable .osheet-scrim { transition: none; }
}
:root[data-theme="dark"] body.rh.sheetable .osheet { box-shadow: 0 0 0 1px var(--line-2), 0 -30px 80px -20px rgba(0, 0, 0, .9); }
:root[data-theme="dark"] body.rh.sheetable .osheet-scrim { background: rgba(0, 0, 0, .6); }

/* The column beside the view holds its parts back until the view is known (the first screen never shows an empty
   order card's room and then a jump), and a tab's watchlist waits until that tab's card has drawn (rh.js settleWatch). */
body.rh:not(.routed) .watch, body.rh:not(.routed) #side-prices, body.rh:not(.routed) .mtrade { display: none !important; }
/* A desk's line under its big number fills in once the desk is read: its line is held from the first paint. */
.dk-main #dk-delta:empty { min-height: 1.55em; }
.watch.settling { display: none; }

/* ------------------------------------------------------------------ the wallet picker and the terms step on a phone
   Both rise from the bottom as sheets, in reach of the thumb, instead of floating mid-screen. */
@media (max-width: 640px) {
  dialog.wallets, dialog.consent { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100dvh - 32px - var(--safe-t)); border-width: 1px 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: var(--safe-b); }
  dialog.wallets[open], dialog.consent[open] { animation: sheet-up .42s var(--ease-sheet); }
  .wallets .w-head { padding-top: 22px; }
  .consent .cs-btns { flex-direction: column-reverse; }
  .consent .cs-btns .btn { width: 100%; height: 48px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { dialog.wallets[open], dialog.consent[open] { animation: none; } }

/* ------------------------------------------------------------------ wide tables as stacked rows on a phone
   rh.js and theme.js label each cell with its column's heading (data-label) and mark the table .mk-stack (not .stack:
   flair.css's .stack is the landing ticket's panes, a grid at every width). The first cell is
   the row's title; the rest sit under it as small labelled figures, as many to a line as fit. */
@media (max-width: 640px) {
  table.mk-stack, table.mk-stack tbody, table.mk-stack tr { display: block; width: 100%; }
  table.mk-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.mk-stack tr { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  table.mk-stack tbody tr:last-child { border-bottom: 0; }
  table.mk-stack td { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
  table.mk-stack td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.mk-stack td:first-child { grid-column: 1 / -1; font-size: 15px; }
  table.mk-stack td:first-child::before, table.mk-stack td[data-label=""]::before { content: none; }
  .dk-table:has(> table.mk-stack) { overflow: visible; }
  .table-scroll:has(> table.mk-stack) { overflow: visible; }
  .table-card:has(table.mk-stack) { padding: 0 16px; }

  /* The landing's markets: the market and its APR on the first line; its price and the borrow side under it as one
     small run of labelled figures; the whole row opens the market in the app (its Lend link, stretched over it). */
  table.mk.mk-stack:not(.onchain) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 14px 0 12px; }
  table.mk.mk-stack:not(.onchain) td { flex: none; }
  table.mk.mk-stack:not(.onchain) td:nth-child(1) { order: 1; flex: 1 1 auto; font-size: 15px; }
  table.mk.mk-stack:not(.onchain) td:nth-child(3) { order: 2; align-items: flex-end; font-size: 15px; }
  table.mk.mk-stack:not(.onchain) td:nth-child(3)::before { content: none; }
  table.mk.mk-stack:not(.onchain) td:nth-child(2), table.mk.mk-stack:not(.onchain) td:nth-child(4), table.mk.mk-stack:not(.onchain) td:nth-child(5), table.mk.mk-stack:not(.onchain) td:nth-child(6) { order: 4; display: flex; flex-direction: row; align-items: baseline; gap: 5px; font-size: 13px; color: var(--ink); }
  table.mk.mk-stack:not(.onchain) td:nth-child(2)::before, table.mk.mk-stack:not(.onchain) td:nth-child(4)::before, table.mk.mk-stack:not(.onchain) td:nth-child(5)::before, table.mk.mk-stack:not(.onchain) td:nth-child(6)::before { font-size: 12px; font-weight: 500; overflow: visible; }
  table.mk.mk-stack:not(.onchain) td.na { display: none; }
  table.mk.mk-stack td:last-child:has(> a.btn) { order: 3; display: block; flex: 0 0 100%; height: 0; padding: 0; overflow: visible; }
  table.mk.mk-stack td:last-child:has(> a.btn)::before { content: none; }
  table.mk.mk-stack td:last-child > a.btn { position: absolute; inset: 0; z-index: 1; height: auto; padding: 0; border: 0; border-radius: var(--r-m); background: transparent; color: transparent; font-size: 0; }
  table.mk.mk-stack td:last-child > a.btn::after { display: none; }
  table.mk.mk-stack td:last-child > a.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  table.mk.mk-stack .apr { min-width: 0; justify-items: end; }
  table.mk.mk-stack .bar { width: 64px; }
  /* The security page's addresses: three to a row. */
  table.mk.onchain.mk-stack tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.mk.onchain.mk-stack td { display: flex !important; grid-row: auto !important; grid-column: auto !important; }
  table.mk.onchain.mk-stack td:first-child { grid-column: 1 / -1 !important; }
  table.mk.onchain.mk-stack td a { font-size: 13px; }
}

/* The landing's "Short" card: its three steps stack on a phone, and the card grows to hold them over their caption. */
@media (max-width: 760px) { .product .viz:has(.flow) { height: auto; min-height: 220px; padding: 24px 0 52px; } }

/* ------------------------------------------------------------------ a phone loads fast
   Images under the first screen wait until they are near (loading="lazy" in the templates); their boxes are held. */
.news img, .card img, .chip2 img, .holdings img, .act img { aspect-ratio: auto; }

/* ------------------------------------------------------------------ dark parity
   The few fixed light shades in the app's sheets, given their dark equivalents. */
:root[data-theme="dark"] .news img { border-color: var(--line); background: var(--sunk); }
:root[data-theme="dark"] .asset-btn:hover, :root[data-theme="dark"] .asset-btn[aria-expanded="true"] { border-color: var(--text-3); }

/* A desk's list rows that are links (the coins launched) read as rows, not underlined text. */
a.dk-trow { color: inherit; text-decoration: none; }
a.dk-trow:hover b { color: var(--act-ink); }

/* ------------------------------------------------------------------ loading and a feed that is down
   While the first numbers load, the order card's held room shimmers like the rest of the skeleton; if the markets feed
   is down, the view says so with a way to try again, and the empty card, the watchlist and the Trade button step away. */
body.rh:not(.routed) .order:empty { border-color: transparent; box-shadow: none; background: linear-gradient(90deg, #F1F1EF 25%, #F9F9F7 37%, #F1F1EF 63%); background-size: 400% 100%; animation: sk 1.3s ease-in-out infinite; }
:root[data-theme="dark"] body.rh:not(.routed) .order:empty { background: linear-gradient(90deg, #17171B 25%, #212126 37%, #17171B 63%); background-size: 400% 100%; }
body.rh.feed-down .order, body.rh.feed-down .watch, body.rh.feed-down #side-prices, body.rh.feed-down .mtrade { display: none !important; }
.rh-down { display: grid; justify-items: start; gap: 14px; max-width: 30em; padding: 48px 0; }
.rh-down p { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.rh-down-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--down); box-shadow: 0 0 0 6px color-mix(in srgb, var(--down) 16%, transparent); }
.rh-down .pill-btn { min-width: 140px; }
@media (prefers-reduced-motion: reduce) { body.rh:not(.routed) .order:empty { animation: none; } }

/* ------------------------------------------------------------------ the walk's fixes (2026-10-21)
   A chart with no history: a short, calm panel that says so, not a tall blank box (rh.js drawChart, rh-prices.js). */
.chart.nodata { height: auto; min-height: 120px; cursor: default; border: 1px dashed var(--line-2); border-radius: 16px; }
.chart.nodata .empty { position: static; min-height: 118px; padding: 0 16px; text-align: center; }
.px-plot.nodata { cursor: default; }
.px-plot.nodata .px-empty { height: 120px; padding: 0 16px; text-align: center; border: 1px dashed var(--line-2); border-radius: 16px; }
/* The app on the chain alone (the markets feed down): one line at the top of the view, and the page still works. */
.rh-degraded { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rh-degraded .rh-down-dot { flex: none; margin-top: 6px; background: var(--gold); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent); }
.rh-degraded p { font-size: 14px; line-height: 1.5; color: var(--text-2); }
/* A desk review's box to tick (the $BORRO lock's no-early-exit rule) before its button turns on. */
.dk-ack { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.dk-ack[hidden] { display: none; }
.dk-ack input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
@media (pointer: coarse) { .dk-ack { min-height: 44px; align-items: center; } }
/* The landing's markets before the first live read (pro.js): placeholder rows; one line if the feed does not answer. */
table.mk tr.mk-wait td { padding-top: 16px; padding-bottom: 16px; }
table.mk td.mk-none { padding: 22px 16px; text-align: left; color: var(--text-2); white-space: normal; }
@media (max-width: 640px) { table.mk.mk-stack tr.mk-wait { display: none; } table.mk.mk-stack tr.mk-wait:first-child { display: flex; } table.mk.mk-stack td.mk-none::before { content: none; } }
.sk-num { display: inline-block; min-width: 3.4ch; height: .78em; border-radius: 10px; background: var(--sunk); vertical-align: -.04em; }
/* The $BORRO lock's four lengths on one line (desk-lock.js). */
.dk-order[data-desk="lock"] .dk-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-order[data-desk="lock"] .dk-seg button { padding: 7px 4px; font-size: 13px; }
/* The watchlist on the chain alone shows each market's price, not a rate: a plain pill. */
.apr-pill.px { background: var(--sunk); color: var(--ink); }
/* The landing ticket's rate box before the first read: its placeholder shows on the box's own tint. */
.out .sk-num { min-width: 5ch; background: var(--line-2); }
/* A Portfolio row's warning (a leveraged long sharing one position with a borrow, panels/trade.js noteWarn). */
.pnote.warn { color: var(--down); font-weight: 550; }