/* Small integration fixes; the reference design lives in style.css. */
html{color-scheme:dark}
button:focus-visible,a:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.pf-leader{overflow:hidden}
.lb-item .lg-kv{padding-top:.5rem;padding-bottom:.75rem}
.mc-go{cursor:pointer}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Data views use the existing ruler, line weights, typography and panel structure. */
.hx-x[hidden],.hx-menu-x[hidden],[hidden]{display:none!important}
.pf-page [id]{scroll-margin-top:1.2rem}
.hx-context,.hx-inline-state{font-family:var(--mono);font-size:var(--t-label);color:var(--fg2)}
.hx-inline-state{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .8rem;border-left:2px solid var(--l6);background:var(--panel2);line-height:1.5}
.hx-inline-state[data-error="true"]{border-color:var(--status-error-border)}
.hx-inline-state p{margin:0}
.hx-inline-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;margin:.6rem 0;min-width:0}
.hx-link{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--l6)}
.hx-copy-action.pf-btn{min-height:1.8rem;padding:.22rem .5rem;white-space:nowrap;font-size:var(--t-label)}
.hx-full-address,.hx-terms dd{overflow-wrap:anywhere}
.hx-full-address,.hx-terms dt,.hx-terms code{font-family:var(--mono)}
.hx-inline-form,.hx-ledger-search{display:flex;flex-wrap:wrap;align-items:end;gap:.55rem;margin:.8rem 0 0;min-width:0}
.hx-inline-form input{flex:1 1 17rem;min-width:0}
.hx-ledger-search label{display:grid;flex:1 1 8rem;min-width:0;gap:.3rem;color:var(--fg2);font-size:var(--t-label);font-family:var(--mono)}
.hx-ledger-search label:first-child{flex-basis:13rem}
.hx-ledger-search label:nth-child(3){flex-basis:12rem}
.hx-ledger-filters>div{display:flex;flex-wrap:wrap}
.hx-ledger-filters button{flex:1 1 auto;min-width:max-content}
.hx-read-stack{display:grid;gap:1.1rem}
.hx-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.hx-progress-panel{display:grid;grid-template-columns:auto minmax(7rem,1fr);align-items:center;gap:.35rem 1rem;padding:.7rem 0;border-bottom:1px solid var(--l2);color:var(--fg2);font-size:var(--t-small)}
.hx-progress-panel progress{width:100%;height:.55rem;accent-color:var(--accent)}
.hx-progress-panel p{grid-column:1/-1;margin:.3rem 0 0}
.hx-terms{display:grid;gap:0;margin:.25rem 0}
.hx-terms>div{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(0,2fr);gap:.7rem;padding:.38rem 0;border-bottom:1px solid var(--l1);font-size:var(--t-small);line-height:1.5}
.hx-terms dt{color:var(--fg2);font-size:var(--t-label)}
.hx-terms dd{margin:0;min-width:0}
.hx-row-details summary,.hx-disclosure summary{list-style:none;cursor:pointer}
.hx-row-details summary::-webkit-details-marker,.hx-disclosure summary::-webkit-details-marker{display:none}
.hx-row-details[open]>summary{background:var(--hover);color:var(--fg)}
.hx-row-details[open] .lg-kv{animation:hexx-in .18s ease-out}
.hx-row-details .lg-kv{padding:.5rem .65rem .75rem;min-width:0}
.hx-record-head{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(0,1.1fr) auto;align-items:center;gap:.7rem;border-bottom:1px solid var(--l1);padding:.55rem .55rem;font-family:var(--mono);font-size:var(--t-label);min-height:2.5rem;width:100%;text-align:left}
.hx-record-head>span:last-child{text-align:right}
.hx-record-head small{display:block;color:var(--fg3)}
.hx-rank-grid{grid-template-columns:1.6rem minmax(3.9rem,1fr) minmax(4.5rem,.9fr) minmax(3.5rem,.7fr) minmax(3.4rem,.7fr) minmax(4.2rem,.8fr);gap:.4rem}
.hx-rank-grid>span:nth-child(n+3){text-align:right;overflow-wrap:anywhere}
.hx-rank-grid>span{min-width:0}
.hx-row-details .lb-r{min-height:2.2rem}
.hx-metric{grid-template-columns:minmax(0,1fr) minmax(0,auto) auto;min-height:2.35rem}
.hx-metric>span:first-child,.hx-metric .val{white-space:normal;overflow-wrap:anywhere}
.hx-metric .val{max-width:min(40vw,26rem)}
.hx-disclosure{border-top:1px solid var(--l2);padding:.7rem 0;margin-top:.7rem}
.hx-disclosure summary{color:var(--accent);font-family:var(--mono);font-size:var(--t-label)}
.hx-window-detail{padding:.7rem 0}
.hx-allocation-row{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--l1);font-family:var(--mono);font-size:var(--t-label)}
.hx-allocation-row>span:first-child{width:5rem}
.hx-map-toggle{display:none}
.pf-key a:focus-visible{position:relative;z-index:1;outline-offset:-2px}
@keyframes hexx-in{from{opacity:.65;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1199px){.hx-five{grid-template-columns:repeat(3,minmax(0,1fr))}.hx-rank-grid{font-size:.65rem}}
@media(max-width:899px){.hx-map-toggle{display:inline-flex;color:var(--fg2);background:transparent;border:1px solid var(--l4);padding:.32rem .5rem;align-items:center;border-radius:3px;font:inherit}.pf[data-map-collapsed] .pf-viz{display:none}.hx-five{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-record-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.hx-terms>div{grid-template-columns:minmax(6.5rem, .9fr) minmax(0,1.3fr)}.hx-inline-form input{flex-basis:100%}}
@media(max-width:520px){.hx-rank-grid{grid-template-columns:1rem minmax(3.6rem,1fr) minmax(4rem,.9fr) 3rem;gap:.3rem}.hx-rank-grid>span:nth-child(n+5){display:none}.hx-record-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.3rem}.hx-record-head>span{overflow-wrap:anywhere}.hx-metric .val{max-width:44vw}.hx-inline-state{gap:.5rem}.hx-ledger-search label{flex-basis:45%}.hx-ledger-search label:first-child,.hx-ledger-search label:nth-child(3){flex-basis:45%}}
@media(prefers-reduced-motion:reduce){.hx-row-details[open] .lg-kv{animation:none}}

/* Shared shell, controls, and account links. */
.hx input, .hx select, .hx summary, dialog button { font-variant-numeric: tabular-nums; }
.hx :is(input,select,summary):focus-visible, dialog :is(a,button):focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}
.hx button:not(:disabled), .hx summary { cursor: pointer; }
.live-chip { min-width: 0; white-space: normal; line-height: 1.35; }
.live-chip[data-state="error"] { color: var(--status-error); }
.hx-inline-state[data-error="true"] { border-color: var(--status-error-border); }
.hx-announcement {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hx-contract { position: relative; }
.hx-contract summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  list-style: none;
  padding: .25rem .5rem;
  border: 1px solid var(--l4);
  border-radius: 5px;
  color: var(--fg2);
  white-space: nowrap;
  font: var(--t-label) var(--mono);
}
.hx-contract summary::-webkit-details-marker { display: none; }
.hx-contract summary b { font-weight: 500; color: var(--fg); }
.hx-contract[open] summary, .hx-contract summary:hover { color: var(--accent); border-color: var(--l6); }
.hx-contract-panel {
  position: absolute;
  z-index: 4;
  top: calc(100% + .55rem);
  right: 0;
  width: min(19rem, calc(100vw - 2rem));
  padding: .8rem;
  border: 1px solid var(--l4);
  border-radius: 8px;
  background: var(--pop);
  box-shadow: 0 10px 28px #000b;
  font-size: var(--t-small);
}
.hx-contract-panel small { display: block; margin-top: .2rem; color: var(--fg2); }
.hx-contract-panel code { display: block; margin-top: .55rem; color: var(--fg2); overflow-wrap: anywhere; }
.hx-contract-panel .hx-inline-actions { margin-bottom: 0; }
@media (min-width: 900px) {
  /* Full-width desktop frame; the map and page own their scroll independently. */
  .hx[data-page] { grid-template-columns: 16px minmax(0, 1fr) 16px; }
  .hx[data-page] .pf { --pf-side: 30%; }
  .hx[data-page] .pf-map {
    --map-min-block: clamp(12rem, 28dvh, 16.5rem);
    grid-template-rows: auto minmax(var(--map-min-block), 1fr) auto auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--l5) transparent;
  }
  .hx[data-page] .pf-map-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 4;
    background-color: var(--panel);
  }
  .hx[data-page] .pf-map .pf-key { display: block; }
  .hx[data-page] .pf-main-head { flex-shrink: 0; }
  .hx[data-page] .pf-page { min-block-size: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  .hx[data-page] .pf-page :is(.pn-copy,.pn-note) { max-inline-size: min(100%, 72ch); }
}
@media (min-width: 1200px) {
  .hx[data-page] .pf { --pf-side: 32%; }
}
@media (min-width: 1700px) {
  .hx[data-page] .pf { --pf-side: 34%; }
}

/* Work with the usable right pane, which is narrower than the viewport. */
.hx[data-page="net"] .pf-page { container: network-page / inline-size; }
.hx[data-page="net"] .pf-row.lead { grid-template-columns: minmax(0, 1fr); }
.hx[data-page="net"] #net-live .heroes :is(dt,dd) { white-space: normal; overflow-wrap: anywhere; }
@container network-page (min-width: 49rem) {
  .hx[data-page="net"] .pf-row.lead { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
}
@media (min-width: 900px) {
  @container network-page (max-width: 40rem) {
    .hx[data-page="net"] #net-live .heroes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx[data-page="net"] #net-live .heroes > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
    .hx[data-page="net"] #net-live .heroes > div:nth-child(n+3) { border-block-start: 1px solid var(--l2); }
  }
}
@media (max-width: 899px) {
  .pf:not([data-map-expanded]) .pf-viz { display: none; }
  .hx-map-toggle { min-height: 2.25rem; flex: 0 0 auto; white-space: nowrap; }
  .pf-main-head { flex-wrap: wrap; gap: .4rem .65rem; }
  .pf-page [id] { scroll-margin-top: 5rem; }
}
@media (max-width: 600px) {
  .hx-contract summary { min-height: 2.5rem; padding-inline: .45rem; }
  .hx-contract summary b { display: none; }
  .hx-contract-panel { right: max(-4.5rem, calc(9.5rem - 48vw)); }
  .hx-inline-actions :is(button,a.pf-btn), .hx-inline-state button { min-height: 2.5rem; }
}

.hx[data-page="core"] .pf-dock .mc-go { display: none; }

@media (max-width: 600px) {
  .hx-bar:has(.hx-contract) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hx-bar:has(.hx-contract) .hx-brand { min-width: 0; padding-inline: 0; gap: .35rem; }
  .hx-bar:has(.hx-contract) .hx-brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hx-bar:has(.hx-contract) .hx-bar-end { gap: .35rem; }
  .hx-bar:has(.hx-contract) .hx-wallet-btn { padding-inline: .65rem; }
}

/* Primary actions and selection use the same palette across panes and dialogs. */
:is(.pf-btn:not(.ghost), .mc-go, .wallet-picker .btn:not(.ghost)):not([data-v="ghost"], :disabled):hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  color: var(--button-fg);
}
:is(.pf-btn:not(.ghost), .mc-go, .wallet-picker .btn:not(.ghost)):not([data-v="ghost"], :disabled):active {
  background: var(--button-pressed);
  border-color: var(--button-pressed);
}
:is(.pf-btn.ghost, .pf-btn[data-v="ghost"], .mc-go[data-v="ghost"], .wallet-picker .btn.ghost) {
  background: var(--well);
  border-color: var(--l4);
  color: var(--fg2);
}
:is(.pf-btn.ghost, .pf-btn[data-v="ghost"], .mc-go[data-v="ghost"], .wallet-picker .btn.ghost):hover:not(:disabled) {
  background: var(--hover);
  border-color: var(--l6);
  color: var(--fg);
}
.seg button[aria-pressed="true"], .mc .seg button[aria-pressed="true"] {
  background: var(--hover2);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 66%, var(--l4));
}