/* Support desk adopts a correspondence-card language. */
.support-launcher {
  color: var(--paper);
  background: var(--violet);
  border-color: var(--violet-2);
  border-radius: 2px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .08em;
}
.support-launcher:hover { box-shadow: 5px 5px 0 var(--ink); }
.support-launcher-dot { background: #d2aa65; border-color: var(--paper); border-radius: 50%; }
.support-launcher[aria-expanded='true'] { color: var(--ink); background: #dfcba9; }
.support-launcher[aria-expanded='true'] .support-launcher-dot { background: var(--violet); }
.support-panel {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--ink);
  border-radius: 3px;
  box-shadow: 8px 8px 0 rgba(39,28,24,.35);
}
.support-head { color: var(--paper); background: var(--violet); border-color: var(--ink); }
.support-head .label { color: #d8c4ba; }
.support-head h2 { font-family: var(--display); font-size: 24px; font-weight: 550; }
.support-close { color: var(--paper); border-color: rgba(244,237,223,.45); border-radius: 50%; }
.support-close:hover, .support-close:focus-visible { color: var(--violet); background: var(--paper); border-color: var(--paper); }
.support-messages { background-color: #f8f1e5; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px); }
.support-message { border-color: var(--line); border-radius: 2px; }
.support-message.is-assistant { background: var(--paper); border-radius: 2px; }
.support-message.is-user { color: var(--paper); background: var(--violet-2); border-radius: 2px; }
.support-message a { color: var(--violet); font-family: var(--sans); }
.support-topics { border-color: var(--line); }
.support-topics button { color: var(--ink); background: var(--paper); border-color: var(--line); font-family: var(--sans); }
.support-topics button:hover, .support-topics button:focus-visible { color: var(--paper); background: var(--violet); }
.support-form { background: var(--paper); }
.support-form input { color: var(--ink); background: #fffaf0; border-color: var(--line); font-family: var(--sans); }
.support-form input:focus { outline-color: var(--violet); }
.support-form button { color: var(--paper); background: var(--violet); border-color: var(--violet); font-family: var(--sans); }
.support-form button:hover, .support-form button:focus-visible { color: var(--paper); background: var(--ink); }
.support-foot { color: var(--muted); }

@media (max-width: 1120px) {
  .grid.credit { grid-template-columns: minmax(0,1fr); }
}

/* Below 980px the bound spine becomes a compact folio masthead. */
@media (max-width: 980px) {
  body { padding-left: 0; }
  .folio-atmosphere { inset: 0; opacity: .7; }
  .site-header {
    position: sticky;
    inset: auto;
    top: 0;
    display: grid;
    width: 100%;
    min-height: 72px;
    padding: 11px var(--gutter);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    box-shadow: none;
    border-right: 0;
    border-bottom: 1px solid #2f0b13;
  }
  .site-header::after { display: none; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: 0;
    padding: 8px var(--gutter) 18px;
    background: var(--violet-2);
    border-top: 1px solid rgba(244,237,223,.18);
    border-bottom: 1px solid #2f0b13;
  }
  .main-nav.is-open { display: grid; animation: folio-menu .25s var(--ease) both; }
  @keyframes folio-menu { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:none; } }
  .nav-link { padding: 14px 5px; }
  .header-actions { display: flex; margin-top: 0; grid-column: 3; }
  .chain-chip { display: inline-flex; }
  .connect-button { min-height: 42px; padding: 9px 15px; }
  .menu-button { display: inline-flex; min-height: 42px; padding: 9px 13px; }
  .support-dock { left: 18px; }
  .view-head { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .view-head-copy { min-height: 400px; }
  .route-field { width: min(100%, 620px); min-height: 350px; justify-self: center; margin-bottom: 34px; }
}

@media (max-width: 620px) {
  body::before { background-size: 6px 6px,100% 100%; }
  .folio-atmosphere { opacity: .54; }
  .folio-orbit-a { top: 19%; right: -54px; width: 156px; }
  .folio-orbit-b,.folio-register { display: none; }
  .folio-atmosphere::after { inset: 3% 9px; opacity: .7; }
  .site-header { min-height: 64px; padding: 9px 12px; gap: 8px; }
  .brand { gap: 8px; }
  .brand img { width: 38px; height: 38px; }
  .brand-word { font-size: 19px; }
  .brand-sub { display: none; }
  .chain-chip { padding: 7px; font-size: 9px; }
  .chain-chip span:not(.live-pulse) { display: none; }
  .connect-button, .menu-button { min-height: 39px; padding: 8px 10px; font-size: 11px; }
  .network-strip { display: flex; overflow-x: auto; scrollbar-width: none; }
  .network-strip::-webkit-scrollbar { display: none; }
  .network-strip > div { flex: 0 0 154px; min-height: 47px; padding: 9px 12px; }
  .network-strip > .strip-note { flex-basis: 250px; }
  main { padding-top: 24px; }
  .view-head { gap: 8px; margin-bottom: 30px; }
  .view-head-copy { min-height: 350px; padding: 58px 0 42px; }
  .view-head-copy::before { top: 16px; font-size: 7.5px; }
  .view-head h1 { max-width: 10.4ch; font-size: clamp(46px,14vw,66px); line-height: .93; }
  .view-head .lede { font-size: 14.5px; }
  .route-field {
    min-height: 285px;
    margin-bottom: 25px;
    padding: 22px 17px;
    border-radius: 48% 48% 3px 3px / 14% 14% 3px 3px;
    box-shadow: 0 10px 20px rgba(75,53,45,.08), inset 0 0 0 5px rgba(244,237,223,.7);
  }
  .route-field::before { bottom: 50%; font-size: 150px; }
  .route-field::after { right: 18px; bottom: 15px; }
  .route-track { padding-right: 0; }
  .route-node i { width: 39px; height: 39px; }
  .route-node small { display: none; }
  .route-link { margin-top: 20px; }
  .grid.four { grid-template-columns: minmax(0,1fr); }
  .register-tools { grid-template-columns: minmax(0,1fr); }
  .card { border-radius: 2px; }
  .card:hover { transform: none; }
  .card-head { min-height: 60px; }
  .metric .value { font-size: 29px; }
  .metric .value.is-long { font-size: 24px; }
  .metric .value.is-very-long { font-size: 20px; }
  main[data-view='reserves'] > .grid.four .card,
  main[data-view='chain'] > .grid.four .card,
  main[data-view='portfolio'] .portfolio-score .card { min-height: 155px; }
  .borrowing-receipt { transform: none; }
  @keyframes receipt-update { 0%{transform:translateY(7px)} 55%{transform:translateY(-2px)} 100%{transform:none} }
  .portfolio-identity { align-items:flex-start; flex-direction:column; }
  .asset-detail-lead { align-items:flex-start; flex-direction:column; }
  .asset-detail-score { grid-template-columns:minmax(0,1fr); }
  .asset-detail-score .metric { min-height:110px; }
  .modal { border-radius: 18px 18px 0 0; }
  .support-dock { right:12px; bottom:12px; left:auto; justify-items:end; }
  .support-launcher { width:44px; min-height:44px; padding:0; justify-content:center; gap:0; border-radius:50%; box-shadow:2px 2px 0 var(--ink); }
  .support-launcher-dot { display:none; }
  .support-launcher span:last-child { font-size:0; }
  .support-launcher span:last-child::after { content:'?'; font:650 19px/1 var(--display); }
  .support-panel { position:fixed; right:12px; bottom:68px; left:12px; width:auto; max-height:calc(100vh - 86px); }
  .support-panel { border-radius:3px; }
  .footer-giant { font-size:22vw; }
}

@media (max-width: 430px) {
  .chain-chip { display:none; }
  .brand { flex:1 1 auto; }
  .connect-button { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .connect-button i { display:none; }
  .view-head-copy { min-height:320px; }
  .view-head h1 { font-size:clamp(43px,13.7vw,58px); }
  .route-field { min-height:260px; }
}

@media (max-width: 350px) {
  .brand-word { font-size:16px; }
  .connect-button,.menu-button { padding-inline:7px; font-size:9.5px; }
  .view-head h1 { font-size:42px; }
  .route-field { padding-inline:12px; }
  .route-field::after { display:none; }
  .route-node i { width:34px; height:34px; }
  .route-link { margin-top:17px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .folio-atmosphere-canvas { display: none!important; }
  .folio-orbit { animation: none!important; transform: none!important; }
  .folio-atmosphere::before { background: radial-gradient(circle at 78% 13%, rgba(180,134,59,.09), transparent 26rem); }
}