/* ============================================================================
   exotic — css/app/shell.css · shared additions for the logged-in app pages
   (Asset, Thesis, Explore, Activity). Requires tokens.css + ../base.css +
   lobby.css first — this only adds what those don't have.
   ========================================================================== */

/* ---- plain-language explainers ----
   Any element with [data-explain] gets a calm hover/tap definition. Labels
   that carry one advertise it with a dotted underline. */
[data-explain]{cursor:help}
.klabel[data-explain],.met .k[data-explain],.kv span[data-explain],.ord .num[data-explain]{
  text-decoration:underline dotted color-mix(in oklab,var(--muted) 55%,transparent);
  text-underline-offset:3px;text-decoration-thickness:1px}
.xp-tip{position:fixed;z-index:1200;opacity:0;pointer-events:none;transform:translateY(3px);
  background:var(--ink);color:var(--bg);border-radius:var(--rad-2);padding:10px 13px;
  font-family:var(--font-display);font-size:12.5px;line-height:1.5;box-shadow:var(--elev-3);
  transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease);text-wrap:pretty}
.xp-tip.on{opacity:1;transform:none}
body.theme-dark .xp-tip{background:var(--surface-2);color:var(--ink);border:1px solid var(--hairline)}

/* ---- page header (shared by Asset / Thesis / Explore / Activity) ---- */
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-top:6px}
.pg-head h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-0.02em}
.pg-head .sub{margin-top:5px;font-family:var(--font-num);font-size:12px;color:var(--muted)}

/* ---- generic section head reuse tweak: links inherit lobby styles ---- */

/* ---- open orders · one table, shared by Home and the asset pages ----
   Rows reuse the holdings vocabulary (logo, .tag, .num, .hx-btn); modify
   expands inline with the standard .tin fields. ---- */
.ord-tbl{overflow:hidden}
.ord{border-bottom:1px solid var(--hairline-2)}
.ord:last-child{border-bottom:0}
.ord-t{display:grid;grid-template-columns:minmax(0,1.6fr) .9fr .8fr .9fr minmax(0,1.6fr) auto;gap:12px;align-items:center;padding:12px 16px}
.ord .asset{display:flex;align-items:center;gap:11px;min-width:0}
.ord .asset .logo{width:28px;height:28px;flex:0 0 auto}
.ord .asset .nm{min-width:0}
.ord .asset .sym{font-weight:600;font-size:13.5px;letter-spacing:-0.01em;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
.ord .asset .sym a{color:inherit;text-decoration:none}
.ord .asset .sym a:hover{text-decoration:underline;text-underline-offset:3px}
.ord .asset .fn{font-family:var(--font-num);font-size:10.5px;color:var(--muted);display:block}
.ord .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink);white-space:nowrap}
.ord .st{font-family:var(--font-num);font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord .acts{display:flex;gap:7px;justify-content:flex-end}
.ord-x{display:flex;padding:2px 18px 15px 57px;gap:14px;align-items:flex-end;flex-wrap:wrap}
.ord.edit .ord-t .acts{visibility:hidden}
.ord-x .fld{display:flex;flex-direction:column;gap:5px}
.ord-x .fld .k{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ord-x .tin{width:150px}
.ord-x .tin input{min-width:0;font-size:12.5px}   /* flex:1 without min-width lets the input overflow its 150px pill */
/* invalid input speaks the ticket's voice: reason + calm coral block, never a
   silent success (D28) */
.ord-warn{flex-basis:100%;font-size:12px;line-height:1.5;color:var(--down);
  background:var(--down-bg);border-radius:var(--rad-2);padding:8px 12px;text-wrap:pretty}
@media (max-width:860px){
  .ord-t{grid-template-columns:1.6fr auto auto auto}
  .ord .st,.ord .num+.num{display:none}
  .ord-x{padding-left:18px}
}
/* phones: order rows restack — name + kind, then price + actions */
@media (max-width:640px){
  .ord-t{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:6px;padding:11px 14px}
  .ord-t .asset{grid-column:1;grid-row:1;min-width:0}
  .ord-t .tag{grid-column:2;grid-row:1;justify-self:end;align-self:center}
  .ord-t .num{grid-column:1;grid-row:2;align-self:center}
  .ord-t .acts{grid-column:2;grid-row:2;justify-self:end}
  .ord-x{padding:2px 14px 14px;flex-wrap:wrap}
  .ord-x .tin{width:124px}
}

/* ---- sticky mini head — the page's headline number follows you to the
   action. Appears when the hero number scrolls away; built by js/app/shell.js
   (Asset/Thesis) and js/app/lobby.js (Lobby). ---- */
.mini-head{position:fixed;top:0;left:var(--side-w,66px);right:0;z-index:80;display:flex;align-items:center;gap:11px;
  padding:9px 44px;transform:translateY(-100%);transition:transform .28s var(--ease-emph);
  /* 92%: at 78% the deposit rows read sharply through the docked head,
     double-exposing under the live balance (QA 2026-07-16) */
  background:var(--glass-1);backdrop-filter:var(--mat-thin);
  -webkit-backdrop-filter:var(--mat-thin);border-bottom:1px solid var(--hairline-2)}
.mini-head.on{transform:none}
.mini-head .logo,.mini-head .tile{width:26px;height:26px;font-size:12px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px}
.mini-head .tile{background:var(--grad);color:var(--ink-on-grad)}
.mini-head .mh-nm{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-head .mh-px{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:15px;font-weight:500;margin-left:auto}
.mini-head .mh-px small{font-size:12px;color:var(--ink-2)}
.mini-head .chip{font-family:var(--font-num);font-size:11px;font-weight:600;border-radius:var(--rad-1);padding:2px 7px}
@media (prefers-reduced-motion:reduce){.mini-head{transition:none}}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){.xp-tip{transition:none}}

/* ---- notch / home-screen app: the sticky mini head pads below the status bar ---- */
.mini-head{ padding-top:calc(9px + env(safe-area-inset-top, 0px)); }

/* ============================================================================
   page-to-page continuity · cross-document view transitions
   ----------------------------------------------------------------------------
   Navigating between app surfaces morphs instead of cutting. Elements that
   mean the same thing on both sides carry the same view-transition-name —
   the Explore sheet's head/chart/CTA land on the Asset page's head/chart/
   trade widget (and morph back through the ⌄ Explore crumb). Everything
   else cross-fades under them. No-op on browsers without the API.
   ========================================================================== */
@view-transition{ navigation:auto; }
::view-transition-group(*){ animation-duration:.34s; animation-timing-function:var(--ease-emph); }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.22s; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-image-pair(*),
  ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

@media (prefers-reduced-transparency:reduce){
  .mini-head{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}