/* css/token.css, the token page: header toggles, chart, stats, contract checks and
   pool depth. Loaded under new-shell like the other page styles, and token-driven so
   both themes resolve as a set. */

body.new-shell .tk-wrap{max-width:1180px;}
body.new-shell .tk-id{min-width:0;}
body.new-shell .tk-name{margin:0;font-size:clamp(20px,2.4vw,26px);}
body.new-shell .tk-sym{color:var(--ink-3);}

/* ---- Header toggles ---- */
body.new-shell .tk-toggles{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.new-shell .tk-seg{display:inline-flex;gap:2px;padding:2px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-pill);}
body.new-shell .tk-seg__btn{appearance:none;border:0;background:transparent;cursor:pointer;
  font:600 var(--t-xs)/1 var(--font);color:var(--ink-4);padding:6px 12px;border-radius:var(--r-pill);}
body.new-shell .tk-seg__btn:hover{color:var(--ink);}
body.new-shell .tk-seg__btn[aria-pressed="true"]{background:var(--card);color:var(--ink);}
body.new-shell .tk-denom{cursor:pointer;}

/* ---- Layout ---- */
/* The shell does not move. The token page is what sits between the rails, and inside
   that space the panel is fixed width and sticky so it never scrolls away. */
body.new-shell .tk-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:14px;align-items:start;}
body.new-shell .tk-panel{position:sticky;top:12px;}

@media (max-width:1400px){body.new-shell .tk-grid{grid-template-columns:minmax(0,1fr);}}

body.new-shell .tk-main{display:flex;flex-direction:column;gap:14px;min-width:0;}
body.new-shell .tk-panel .tk-actions{flex-direction:column;}
body.new-shell .tk-panel .tk-actions .c-btn{width:100%;min-width:0;}
body.new-shell .tk-bar:empty{display:none;}

/* ---- Chart ---- */
body.new-shell .tk-chartcard{display:flex;flex-direction:column;gap:10px;}
body.new-shell .tk-tfs{display:inline-flex;gap:2px;padding:2px;align-self:flex-start;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill);}
body.new-shell .tk-chart{height:280px;}
body.new-shell .tk-chart canvas{display:block;width:100%;height:100%;}

/* ---- Change windows ---- */
body.new-shell .tk-wins{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 2px;}
body.new-shell .tk-win{display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;}
body.new-shell .tk-win__k{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);}
body.new-shell .tk-win .c-delta{font-variant-numeric:tabular-nums;}

/* ---- Stats ---- */
body.new-shell .tk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
body.new-shell .tk-stat{display:flex;flex-direction:column;gap:4px;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);min-width:0;}
body.new-shell .tk-stat__label{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);}
body.new-shell .tk-stat__value{font:700 var(--t-md)/1.1 var(--font);color:var(--ink);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;}
body.new-shell .tk-stat__note{font:500 var(--t-xs)/1 var(--font);color:var(--ink-4);}

/* ---- Amount presets ---- */
/* Four equal shares of the balance. Disabled is a real state here, not a dimmed one:
   without a balance there is nothing honest for them to compute, and the line beneath
   says which of the two reasons applies. */
body.new-shell .tk-pcts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 0;}
body.new-shell .tk-pct{min-height:34px;display:inline-flex;align-items:center;justify-content:center;
  font:600 var(--t-sm)/1 var(--mono);letter-spacing:.02em;cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,transform .16s ease;}
body.new-shell .tk-pct:hover:not([disabled]){border-color:var(--brand-line);color:var(--brand);transform:translateY(-1px);}
body.new-shell .tk-pct:active:not([disabled]){transform:translateY(0) scale(.97);}
body.new-shell .tk-pct[disabled]{opacity:.42;cursor:not-allowed;}
body.new-shell .tk-bal{margin:8px 0 0;font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  body.new-shell .tk-pct{transition:none;}
  body.new-shell .tk-pct:hover:not([disabled]),
  body.new-shell .tk-pct:active:not([disabled]){transform:none;}
}

/* ---- Contract checks ---- */
body.new-shell .tk-safety__age{font:500 var(--t-xs)/1 var(--mono);color:var(--ink-4);}
body.new-shell .tk-flag{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);}
body.new-shell .tk-flag:last-of-type{border-bottom:0;}
body.new-shell .tk-flag__dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-4);}
body.new-shell .tk-flag--pass .tk-flag__dot{background:var(--up);}
body.new-shell .tk-flag--fail .tk-flag__dot{background:var(--down);}
body.new-shell .tk-flag--unchecked .tk-flag__dot{background:transparent;border:1px solid var(--ink-4);}
body.new-shell .tk-flag__label{font:500 var(--t-sm)/1.3 var(--font);color:var(--ink);min-width:0;}
body.new-shell .tk-flag--unchecked .tk-flag__label{color:var(--ink-3);}
body.new-shell .tk-flag__value{font:600 var(--t-xs)/1 var(--mono);color:var(--ink-3);}
body.new-shell .tk-flag__src{margin-left:auto;font:500 var(--t-xs)/1 var(--mono);color:var(--ink-4);
  white-space:nowrap;}

/* ---- Depth ---- */
body.new-shell .tk-tablewrap{overflow-x:auto;}
body.new-shell .tk-table{width:100%;border-collapse:collapse;}
body.new-shell .tk-table th{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--line);white-space:nowrap;}
body.new-shell .tk-table td{font:500 var(--t-sm)/1.2 var(--font);color:var(--ink);
  padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap;}
body.new-shell .tk-table tr:last-child td{border-bottom:0;}
body.new-shell .tk-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
body.new-shell .tk-right{text-align:right;}

@media (max-width:760px){
  body.new-shell .tk-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.new-shell .tk-chart{height:220px;}
  body.new-shell .tk-price{margin-left:0;align-items:flex-start;}
}

/* ---- The phone bar ---- */
/* The composer and the bottom tab bar own the bottom of the viewport, so the bar is
   anchored to the bottom of the content scroller instead. The composer grows with what
   it is holding, so that offset is measured in the page and published as
   --tk-bar-bottom rather than hardcoded here. The wrap reserves the bar's height so
   nothing is left underneath it. The docked panel stands down on a phone, because the
   sheet is the same form. */
body.new-shell .tk-bar{display:none;}

@media (max-width:900px){
  body.new-shell .tk-panel{display:none;}
  body.new-shell .tk-wrap{padding-bottom:84px;}
  body.new-shell .tk-bar{display:flex;position:fixed;left:12px;right:12px;z-index:90;
    bottom:max(env(safe-area-inset-bottom),var(--tk-bar-bottom,0px));
    align-items:center;gap:12px;padding:10px 12px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
    box-shadow:0 -8px 24px rgba(0,0,0,.30);}
  /* The floating help control is anchored to the viewport bottom, which is where the
     bar now lands, so it is lifted by the bar's own measured height. */
  body.new-shell:has(.tk-bar__cta) .cs-fab{
    bottom:calc(env(safe-area-inset-bottom,0px) + var(--tk-bar-lift,164px))!important;}
  body.new-shell .tk-bar__id{display:flex;flex-direction:column;gap:3px;min-width:0;}
  body.new-shell .tk-bar__sym{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-4);}
  body.new-shell .tk-bar__px{font:700 var(--t-md)/1.1 var(--font);color:var(--ink);
    font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;}
  body.new-shell .tk-bar__cta{margin-left:auto;flex:none;}
}

/* ---- The sheet ---- */
/* svh, never dvh. A dvh sheet resizes as the Safari toolbar collapses and the panel
   crawls while it is being read. The stacking sits above the floating help control so a
   modal is never partly covered. */
body.new-shell .tk-sheet{position:fixed;inset:0;height:100svh;z-index:9500;
  display:flex;align-items:flex-end;}
body.new-shell .tk-sheet__back{position:absolute;inset:0;background:rgba(0,0,0,.58);}
body.new-shell .tk-sheet__card{position:relative;display:flex;flex-direction:column;
  width:100%;max-height:92svh;background:var(--card);border:1px solid var(--line);
  border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;
  animation:tkRise .28s cubic-bezier(.32,.72,0,1);}
@keyframes tkRise{from{transform:translateY(12%);}to{transform:none;}}
@media (prefers-reduced-motion:reduce){body.new-shell .tk-sheet__card{animation:none;}}
body.new-shell .tk-sheet__head{position:relative;display:flex;align-items:center;gap:8px;
  padding:14px 12px 10px;border-bottom:1px solid var(--line);}
body.new-shell .tk-sheet__grab{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:34px;height:4px;border-radius:var(--r-pill);background:var(--line);}
body.new-shell .tk-sheet__title{font:700 var(--t-sm)/1 var(--font);color:var(--ink);}
body.new-shell .tk-sheet__x{margin-left:auto;appearance:none;border:0;background:transparent;
  color:var(--ink-4);font-size:15px;line-height:1;padding:9px 11px;cursor:pointer;
  border-radius:var(--r-sm);}
body.new-shell .tk-sheet__x:hover{color:var(--ink);}
/* The inset reads zero unless the document declares viewport-fit=cover, and Safari
   returns zero again while the toolbar is hidden, so every use is guarded. */
body.new-shell .tk-sheet__body{flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 12px max(12px,env(safe-area-inset-bottom));}
body.new-shell .tk-sheet__ask{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px max(12px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--panel-2);}
body.new-shell .tk-sheet__askq{flex:1;min-width:140px;
  font:500 var(--t-sm)/1.35 var(--font);color:var(--ink);}
body.new-shell .tk-sheet__note{position:absolute;left:12px;right:12px;
  bottom:calc(12px + max(12px,env(safe-area-inset-bottom)));margin:0;
  padding:10px 12px;border-radius:var(--r-md);background:var(--panel-2);
  border:1px solid var(--line);font:500 var(--t-sm)/1.35 var(--font);color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.35);}
/* An amount input under 16px makes iOS zoom the page the moment it takes focus. */
body.new-shell .tk-sheet .tk-amt{font-size:16px;}
/* The sheet already names the token, so the panel's own heading and card surface are
   dropped inside it rather than repeated as a card within a card. */
body.new-shell .tk-sheet .tk-trade{border:0;background:transparent;padding:0;box-shadow:none;}
body.new-shell .tk-sheet .tk-trade > .c-card__title{display:none;}

/* ---- Orders ---- */
/* The panel column now holds two cards, the trade box and the orders card. The column
   stretches to the row so the trade box keeps sticking exactly as it did when it was
   the grid item itself. On a phone the trade box stands down for the bar and the
   orders card stays, because the sheet does not carry it. */
body.new-shell .tk-side{display:flex;flex-direction:column;gap:14px;min-width:0;align-self:stretch;}
body.new-shell .tk-otabs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;}
body.new-shell .tk-otab{min-height:30px;display:inline-flex;align-items:center;cursor:pointer;
  font:600 var(--t-xs)/1 var(--mono);letter-spacing:.02em;}
body.new-shell .tk-otab[aria-pressed="true"]{border-color:var(--brand-line);color:var(--brand);}
/* Disabled is a real state, not a dimmed one: the reason line under the strip says what
   is holding the whole rail back, and the title repeats it per tab. */
body.new-shell .tk-otab[disabled]{opacity:.42;cursor:not-allowed;}
body.new-shell .tk-oreason{margin:9px 0 0;}
body.new-shell .tk-oform{display:flex;flex-direction:column;gap:10px;margin:12px 0 0;}
body.new-shell .tk-oside{align-self:flex-start;}
body.new-shell .tk-ofield{display:flex;flex-direction:column;gap:5px;min-width:0;}
body.new-shell .tk-ofield__k{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);}
/* An amount input under 16px makes iOS zoom the page the moment it takes focus. */
body.new-shell .tk-oform .tk-amt{font-size:16px;width:100%;}
body.new-shell .tk-quoterows{display:flex;flex-direction:column;gap:8px;}
body.new-shell .tk-orders [data-role="note"]{margin:0;}
body.new-shell .tk-orders [data-role="note"][data-kind="stop"]{color:var(--down);}