/* profile-sections.css - the profile in four sections (his order, 2026-10-13).
   A LAYER: js/ui/sections.js tags each box with its section and sets which one
   is on screen; this file hides the tagged boxes that are not in it. With the
   layer switched off there are no tags, so nothing here applies and the profile
   is the one long page it was. Colours are the theme's own tokens. */

/* ---- the four buttons ----------------------------------------------------- */
.psec-tabs{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin:4px 0 18px; }
.psec-tab{ display:flex; align-items:center; gap:12px; min-width:0; text-align:left; cursor:pointer;
  background:var(--dk-panel); color:var(--dk-text); border:0; border-radius:8px;
  box-shadow:var(--dk-shadow); padding:13px 16px; font:14px Inter, system-ui, sans-serif; }
.psec-tab:hover{ background:var(--dk-hover); }
.psec-tab.on{ background:var(--dk-text); color:var(--dk-page); box-shadow:none; }
.psec-tab:focus-visible{ outline:2px solid var(--dk-line-strong); outline-offset:2px; }
.psec-tab::before{ content:''; flex:none; width:20px; height:20px; background-color:currentColor;
  -webkit-mask:center / contain no-repeat; mask:center / contain no-repeat; }
.psec-tab[data-ico="chart"]::before{ -webkit-mask-image:var(--ico-chart); mask-image:var(--ico-chart); }
.psec-tab[data-ico="candles"]::before{ -webkit-mask-image:var(--ico-candles); mask-image:var(--ico-candles); }
.psec-tab[data-ico="coins"]::before{ -webkit-mask-image:var(--ico-coins); mask-image:var(--ico-coins); }
.psec-tab[data-ico="key"]::before{ -webkit-mask-image:var(--ico-key); mask-image:var(--ico-key); }
.psec-tab[data-ico="rewind"]::before{ -webkit-mask-image:var(--ico-rewind); mask-image:var(--ico-rewind); }
.psec-text{ display:flex; flex-direction:column; min-width:0; }
.psec-tag{ font-size:11.5px; color:var(--dk-muted); line-height:1.2; }
.psec-tab.on .psec-tag{ color:inherit; opacity:.7; }
.psec-name{ font-weight:600; font-size:15px; line-height:1.25; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }

/* ---- one section on screen at a time --------------------------------------
   Only boxes that carry a tag are ever hidden, and only by this rule. A box's
   own "not now" (no open positions, not the owner) still hides it inside its
   own section, because nothing here ever forces a box to SHOW. */
#screen-profile[data-psec="overview"] [data-psec-box]:not([data-psec-box="overview"]),
#screen-profile[data-psec="system1"] [data-psec-box]:not([data-psec-box="system1"]),
#screen-profile[data-psec="backtest"] [data-psec-box]:not([data-psec-box="backtest"]),
#screen-profile[data-psec="system2"] [data-psec-box]:not([data-psec-box="system2"]),
#screen-profile[data-psec="account"] [data-psec-box]:not([data-psec-box="account"]){
  display:none !important; }

/* ---- the buttons stay where they are ---------------------------------------
   A screen centres its contents when they are shorter than the window. The old
   long page never was; a short section (Account, an empty Meme coins) is, and
   the four buttons then dropped down the page under his hand each time he
   pressed one. With the sections on, the profile starts at the top, always. */
#screen-profile[data-psec]{ justify-content:flex-start; }

/* ---- the Overview reads in the order he judges by --------------------------
   The numbers first, then the curve with every trade, then the map. In the
   page itself the map comes first; this only changes the order it is DRAWN in,
   and only while the sections are on - nothing in the page is moved. */
#screen-profile[data-psec] .profile-wrap{ display:flex; flex-direction:column; }
#screen-profile[data-psec] .profile-wrap > *{ flex:none; }
#screen-profile[data-psec] .psec-tabs{ margin-top:0; }
#screen-profile[data-psec="overview"] .pcard.globe-card{ order:1; }

@media (max-width:1100px){
  .psec-tab{ padding:12px 12px; gap:10px; }
}
@media (max-width:760px){
  .psec-tabs{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  /* five buttons in two columns: the last one takes the whole row */
  .psec-tab:last-child{ grid-column:1 / -1; }
  .psec-tab{ padding:11px 12px; gap:10px; }
}