/* Fortress Charts on a phone (the chart app, /app). Loaded after the shared chart CSS; only acts below 860 px.
   Top bar: mark · search icon · coin + price · timeframe menu · layers · "⋯" (everything else in a sheet).
   The drawing toolbar is hidden until "Drawing tools" is switched on in the sheet, so the chart gets the full width. */
#tfSel, #moreBtn, #moreSheet { display: none; }

@media (max-width: 860px) {
  .top { overflow: visible !important; gap: 4px; padding: 0 6px; }
  .brand.v2 span, .brand.v2 em { display: none !important; }
  .brand.v2 { margin-right: 2px; padding: 6px 4px; }

  /* the coin and its price are the most important thing on the bar */
  .sym { display: flex !important; gap: 5px; margin: 0 2px; min-width: 0; overflow: hidden; }
  .sym b { font-size: 13px; }
  .sym .px { font-size: 12px; }
  .sym .chg { display: none; }
  .sym .coinlogo { width: 18px; height: 18px; }
  #live { display: none !important; }

  /* timeframes: one small menu instead of six buttons */
  #tfs { display: none !important; }
  #tfSel { display: block; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text);
           font: 600 12px "Geist Mono", ui-monospace, monospace; flex: none; }

  /* everything else moves into the "⋯" sheet */
  #logBtn, #fitBtn, #snapBtn, #setBtn, #themeBtn, #panelBtn, .tt-help, .sitelink { display: none !important; }
  #moreBtn { display: flex; }
  .menu { margin-left: auto; }

  /* search: an icon until tapped, then a full-width bar */
  .search { width: 34px; flex: none; padding: 0 9px; cursor: pointer; }
  .search input { width: 0; min-width: 0; opacity: 0; }
  .search.open { position: fixed; left: 8px; right: 8px; top: 8px; width: auto; z-index: 60; height: 40px; box-shadow: var(--shadow); }
  .search.open input { width: auto; opacity: 1; }
  .search.open .drop { top: 46px; width: 100%; max-height: 60vh; }

  /* drawing tools only when asked for */
  .dbar { display: none !important; }
  body.mdraw .dbar { display: flex !important; position: fixed; left: 0; top: 50px; bottom: 0; z-index: 25; background: var(--bg); border-right: 1px solid var(--line2);
                     overflow-y: auto; }

  /* the "⋯" sheet */
  #moreSheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--panel); border-top: 1px solid var(--line2);
               border-radius: 16px 16px 0 0; box-shadow: var(--shadow); padding: 8px 8px calc(14px + env(safe-area-inset-bottom)); }
  #moreSheet.open { display: block; }
  #moreSheet .grab { width: 38px; height: 4px; border-radius: 2px; background: var(--line2); margin: 4px auto 10px; }
  #moreSheet button, #moreSheet a { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 10px;
                                    font: 500 14px Geist, system-ui, sans-serif; color: var(--text); cursor: pointer; }
  #moreSheet button:active, #moreSheet a:active { background: var(--hover); }
  #moreSheet .on::after { content: "on"; margin-left: auto; font: 600 11px "Geist Mono", monospace; color: var(--accent); }
  #moreSheet svg { width: 18px; height: 18px; color: var(--dim); }
  .sheetveil { position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .4); }

  /* bigger touch targets in the remaining bar */
  .top .tool.icon, #moreBtn { min-width: 34px; height: 34px; justify-content: center; }
}

/* "Install the app" instructions (iPhone / browsers without an install prompt) */
.installnote { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 80; background: var(--panel); color: var(--text);
               border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 40px 14px 16px; font: 13px/1.5 Geist, system-ui, sans-serif; }
.installnote button { all: unset; position: absolute; top: 8px; right: 12px; font-size: 18px; color: var(--dim); cursor: pointer; }
/* installed on the home screen: room for the phone's status bar */
@media (display-mode: standalone) { .top { padding-top: env(safe-area-inset-top); height: calc(50px + env(safe-area-inset-top)); } }