/* A quieter, editorial product layer inspired by Flavors' Swiss Editorial rhythm.
   Presentation only: market data, wallet state and transaction behavior are untouched. */

body.app-mode { font-feature-settings:"tnum" 1; }
body.app-mode :is(h1,h2,h3) { text-wrap:balance; }
body.app-mode :is(.home-shell,.app-shell,.dashboard-shell,.learn-shell) { min-width:0; }

/* The opening reads as a product proposition, with the live tape as evidence. */
html[data-site-route="home"] body.app-mode .home-lead {
  align-items:start;
  grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);
  padding-top:clamp(62px,8vw,112px);
}
html[data-site-route="home"] body.app-mode .home-lead-copy { padding-right:clamp(0px,3vw,38px); }
html[data-site-route="home"] body.app-mode .home-lead h1 {
  max-width:770px;
  margin:18px 0 19px;
  font-size:clamp(42px,4.65vw,70px);
  font-weight:620;
  line-height:1.03;
  letter-spacing:-.049em;
}
html[data-site-route="home"] body.app-mode .home-intro { max-width:470px; line-height:1.62; }
html[data-site-route="home"] body.app-mode .home-market-tape {
  max-width:none;
  margin-top:9px;
  border-top:2px solid var(--sc-text);
}
html[data-site-route="home"] body.app-mode .home-market-tape-heading { padding:15px 0 18px; }
html[data-site-route="home"] body.app-mode .home-market-tape-heading strong { font-size:16px; }
html[data-site-route="home"] body.app-mode .home-market-tape-row { min-height:75px; }
html[data-site-route="home"] body.app-mode .home-stat-strip {
  grid-template-columns:1.45fr 1.15fr .7fr 1fr;
  gap:0;
  margin-top:clamp(42px,5vw,70px);
  padding:24px 0 26px;
  border-top:1px solid var(--sc-border);
  border-bottom:1px solid var(--sc-border);
}
html[data-site-route="home"] body.app-mode .home-stat-strip > div { padding:0 20px; }
html[data-site-route="home"] body.app-mode .home-stat-strip > div:first-child { padding-left:0; }
html[data-site-route="home"] body.app-mode .home-stat-strip > div + div { border-left:1px solid var(--sc-border); }
html[data-site-route="home"] body.app-mode .home-stat-strip > div:first-child strong { font-size:clamp(26px,2.7vw,36px); }
html[data-site-route="home"] body.app-mode .home-calculator h2 {
  font:620 22px/1.2 Inter,Geist,"Segoe UI",Arial,sans-serif !important;
  letter-spacing:-.025em;
  color:var(--sc-text);
}

/* The market summary has one headline number and three compact ledger entries. */
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics {
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) !important;
  grid-template-rows:repeat(3,minmax(0,1fr));
  column-gap:clamp(28px,5vw,88px);
  align-items:stretch;
  margin:0 0 33px;
  padding:24px 0 26px !important;
  border-top:0 !important;
}
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .market-metric,
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > #totalStockTvl {
  min-height:0;
  padding:10px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .liquidity-hero {
  grid-column:1 !important;
  grid-row:1 / 4 !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .liquidity-hero strong {
  margin:8px 0 6px;
  font-size:clamp(43px,5vw,68px) !important;
  font-weight:610;
  line-height:1;
  letter-spacing:-.05em;
}
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .market-metric:not(.liquidity-hero) {
  grid-column:2 !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:2px 18px;
  border-left:0 !important;
}
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .market-metric:not(.liquidity-hero) + .market-metric { border-top:1px solid var(--sc-border) !important; }
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .market-metric:not(.liquidity-hero) strong {
  grid-column:2;
  grid-row:1 / 3;
  margin:0;
  font-size:clamp(19px,1.9vw,25px) !important;
  text-align:right;
}
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .market-metric:not(.liquidity-hero) small { grid-column:1; margin:0; }

/* Rates are a reading order, not another collection of identical cards. */
body.app-mode.stock-detail-mode .overview-stats { margin-top:25px; }
body.app-mode.stock-detail-mode .overview-stats > div { min-height:106px; }
body.app-mode.stock-detail-mode .rate-pair {
  border-bottom:1px solid var(--sc-border);
  margin-bottom:30px;
}
body.app-mode.stock-detail-mode .rate-pair > div { padding-top:20px !important; padding-bottom:22px !important; }
body.app-mode.stock-detail-mode .layout > aside > .panel {
  border-radius:6px;
  padding:24px clamp(18px,2vw,28px);
}
body.app-mode.stock-detail-mode #details .tabs { margin:5px 0 22px; }
body.app-mode.stock-detail-mode #details .tabs button { font-size:13px; }
body.app-mode.stock-detail-mode #details .field,
html[data-theme="dark"] body.app-mode.stock-detail-mode #details .field {
  margin:0;
  padding:16px 0 12px;
  border:0 !important;
  border-bottom:1px solid var(--sc-border) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.app-mode.stock-detail-mode #details .field:focus-within {
  border-bottom-color:var(--sc-accent) !important;
  box-shadow:none !important;
}
body.app-mode.stock-detail-mode #details .field .amount { min-height:61px; }
body.app-mode.stock-detail-mode #details .field .amount input {
  font-size:clamp(29px,2.5vw,38px);
  font-weight:550;
  letter-spacing:-.03em;
}
body.app-mode.stock-detail-mode #details .field .amount input:focus { outline:0; }
body.app-mode.stock-detail-mode #details .field .max-btn {
  border-radius:3px;
  text-transform:none;
}

/* Risk is an editorial hierarchy: liquidation leads, the other risks follow. */
body.app-mode .risk-topics {
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  grid-template-rows:repeat(3,auto);
  column-gap:clamp(32px,6vw,100px);
  margin:40px 0 49px;
}
body.app-mode .risk-topics article,
body.app-mode .risk-topics article:first-child {
  min-height:0;
  padding:17px 0 !important;
  border:0 !important;
  border-radius:0;
}
body.app-mode .risk-topics article:first-child { grid-column:1; grid-row:1 / 4; padding:27px 20px 0 0 !important; }
body.app-mode .risk-topics article:not(:first-child) { grid-column:2; border-top:1px solid var(--sc-border) !important; }
body.app-mode .risk-topics article:first-child h2 { max-width:360px; font-size:clamp(25px,2.6vw,35px); line-height:1.1; }
body.app-mode .risk-topics article:first-child p { max-width:400px; font-size:16px; line-height:1.6; }
body.app-mode .risk-topics article:not(:first-child) h2 { font-size:16px; }
body.app-mode .risk-topics article:not(:first-child) p { max-width:480px; }

/* A disconnected dashboard is a real state, not a lonely center card. */
html[data-site-route="dashboard"] body.app-mode .dashboard-connect {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:40px;
  max-width:none;
  padding:33px 0 42px;
}
html[data-site-route="dashboard"] body.app-mode .dashboard-connect h2 { grid-column:1; margin:0 0 10px; font-size:26px; }
html[data-site-route="dashboard"] body.app-mode .dashboard-connect p { grid-column:1; grid-row:2; max-width:560px; margin:0; }
html[data-site-route="dashboard"] body.app-mode .dashboard-connect button { grid-column:2; grid-row:1; margin:0; }
html[data-site-route="dashboard"] body.app-mode .dashboard-connect-markets { grid-column:2; grid-row:2; justify-self:start; margin:0; }

@media(max-width:900px) {
  html[data-site-route="home"] body.app-mode .home-lead { grid-template-columns:minmax(0,1fr); }
  html[data-site-route="home"] body.app-mode .home-market-tape { max-width:650px; justify-self:start; margin-top:38px; }
}
@media(max-width:760px) {
  html[data-site-route="home"] body.app-mode .home-stat-strip { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:0; }
  html[data-site-route="home"] body.app-mode .home-stat-strip > div { min-height:91px; padding:17px 14px !important; border-left:0 !important; }
  html[data-site-route="home"] body.app-mode .home-stat-strip > div:nth-child(odd) { padding-left:0 !important; }
  html[data-site-route="home"] body.app-mode .home-stat-strip > div:nth-child(even) { border-left:1px solid var(--sc-border) !important; }
  html[data-site-route="home"] body.app-mode .home-stat-strip > div:nth-child(n+3) { border-top:1px solid var(--sc-border); }
  html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics { column-gap:18px; }
  html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .liquidity-hero strong { font-size:clamp(35px,7vw,54px) !important; }
  body.app-mode .risk-topics { grid-template-columns:1fr; grid-template-rows:none; }
  body.app-mode .risk-topics article:first-child,
  body.app-mode .risk-topics article:not(:first-child) { grid-column:1; grid-row:auto; padding:20px 0 !important; border-top:1px solid var(--sc-border) !important; }
  html[data-site-route="dashboard"] body.app-mode .dashboard-connect { grid-template-columns:1fr; gap:10px; }
  html[data-site-route="dashboard"] body.app-mode .dashboard-connect :is(h2,p,button,.dashboard-connect-markets) { grid-column:1; grid-row:auto; }
  html[data-site-route="dashboard"] body.app-mode .dashboard-connect button { justify-self:start; margin-top:15px; }
}
@media(max-width:520px) {
  html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics {
    grid-template-columns:1fr !important;
    grid-template-rows:auto;
    padding:17px 0 !important;
  }
  html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .liquidity-hero { grid-column:1 !important; grid-row:auto !important; padding:8px 0 17px !important; }
  html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .market-metric:not(.liquidity-hero) { grid-column:1 !important; padding:12px 0 !important; border-top:1px solid var(--sc-border) !important; }
  html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > #totalStockTvl { border-top:1px solid var(--sc-border) !important; padding:12px 0 !important; }
  body.app-mode.stock-detail-mode .layout > aside > .panel { padding:18px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-site-route="home"] body.app-mode :is(.home-market-tape,.home-market-tape-row,.home-stat-strip) { animation:none !important; }
}