/* tab-board.css - the centre tab row as a strip of the exchange board
   (1.11.9.30). Picked from mockups: C, "board strip".

   The same glass as .fmb-scr in terminal-skin.css: dark screen, amber dot
   grid, dot-matrix face. Unselected tabs are dim phosphor; the selected one is
   lit, with a green LED. Group names are stamped into the top of each group.

   STYLE ONLY. Every .tab node, id, data-tab and data-i18n is unchanged, so
   core.js, mobile.js and the tutorial bind exactly as before. Icons are CSS
   masks on ::before rather than markup, because applyI18n overwrites each
   tab's textContent and would delete a child icon. .tab stays inline-block:
   core.js and funds.js reveal Capital Houses with an inline
   display:inline-block, which would beat a display set here.

   FOLDING. The row needed 1,147 px against 918 px on a 1920 screen and 641 on
   a 1366 one. tab-board.js measures the row and, when it does not fit, folds
   groups (body.fmt-f1..f3): their tabs, except the selected one, shrink to
   glyphs (text kept for tooltips, screen readers and i18n). Phones never see any of this:
   mobile.css hides the row and every rule is scoped off .fm-mobile. */
body:not(.fm-mobile) #fmTabs{gap:0;align-items:stretch;padding:0 4px;border-radius:4px;
  background-color:color-mix(in srgb,var(--bg) 60%,#000);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--amber) 7%,transparent) .7px,transparent 1.1px);background-size:3px 3px;
  box-shadow:inset 0 0 10px #000,0 0 0 1px #000,0 0 0 3px color-mix(in srgb,var(--panel-edge) 16%,#080a08);margin:3px 3px 9px}
body:not(.fm-mobile) #fmTabs .tabgroup{gap:1px;padding:15px 4px 4px}
body:not(.fm-mobile) #fmTabs .tabgroup-label{position:absolute;top:3px;left:8px;padding:0;
  font-family:'Doto','Share Tech Mono',ui-monospace,monospace;font-weight:700;font-size:9px;line-height:1;letter-spacing:.24em;color:var(--muted);opacity:.6}
body:not(.fm-mobile) #fmTabs .tabgroup-sep{margin:4px 0;background:color-mix(in srgb,var(--amber) 16%,transparent);opacity:1}
body:not(.fm-mobile) #fmTabs .tab{position:relative;box-sizing:border-box;height:28px;padding:3px 8px 3px 18px;border:0;border-radius:2px;background:none;box-shadow:none;
  font-family:'Doto','Share Tech Mono',ui-monospace,monospace;font-weight:700;font-size:15px;line-height:22px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--amber);opacity:.7;transition:opacity .15s,background .15s}
body:not(.fm-mobile) #fmTabs .tab::before{content:'';display:inline-block;vertical-align:-3px;width:17px;height:17px;margin-right:6px;background:currentColor;
  -webkit-mask:var(--tb-ic) center/17px 17px no-repeat;mask:var(--tb-ic) center/17px 17px no-repeat}
body:not(.fm-mobile) #fmTabs .tab::after{content:'';position:absolute;left:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:color-mix(in srgb,var(--amber) 22%,transparent)}
body:not(.fm-mobile) #fmTabs .tab:hover{opacity:.92;background:none}
body:not(.fm-mobile) #fmTabs .tab:focus-visible{outline:1px solid var(--gold);outline-offset:1px}
body:not(.fm-mobile) #fmTabs .tab.active{opacity:1;color:var(--gold);background:color-mix(in srgb,var(--amber) 11%,transparent);
  text-shadow:0 0 7px var(--amber);border-bottom-color:transparent}
body:not(.fm-mobile) #fmTabs .tab.active::before{filter:drop-shadow(0 0 4px var(--amber))}
body:not(.fm-mobile) #fmTabs .tab.active::after{background:var(--green);box-shadow:0 0 6px var(--green)}
/* Unread Fleshbook posts light its LED as well as the count. */
body:not(.fm-mobile) #fmTabs .tab:not(.active):has(#unread-fleshbook:not([style*="none"]))::after{background:#a78bfa;box-shadow:0 0 6px #a78bfa}
body:not(.fm-mobile) #unread-fleshbook{font-family:'Share Tech Mono',ui-monospace,monospace;text-shadow:none;vertical-align:1px}
/* Folded: glyph only, except the selected tab, one group at a time until the
   row fits: Community first, then Ventures, then Trade (the tabs used most
   keep their names longest). The count badge keeps its own rem size, so it
   still shows on a folded Fleshbook. */
body.fmt-f1:not(.fm-mobile) #fmTabs [data-grp="community"] .tab:not(.active),
body.fmt-f2:not(.fm-mobile) #fmTabs [data-grp="ventures"] .tab:not(.active),
body.fmt-f3:not(.fm-mobile) #fmTabs [data-grp="trade"] .tab:not(.active){font-size:0;padding-right:6px}
body.fmt-f1:not(.fm-mobile) #fmTabs [data-grp="community"] .tab:not(.active)::before,
body.fmt-f2:not(.fm-mobile) #fmTabs [data-grp="ventures"] .tab:not(.active)::before,
body.fmt-f3:not(.fm-mobile) #fmTabs [data-grp="trade"] .tab:not(.active)::before{margin-right:0}
@media(prefers-reduced-motion:reduce){body:not(.fm-mobile) #fmTabs .tab{transition:none}}

/* Glyphs, one-colour, drawn at 16 px. */
#fmTabs .tab[data-tab="market"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v12M12 3v10M8 5v8'/%3E%3Crect x='2.8' y='5' width='2.4' height='5'/%3E%3Crect x='6.8' y='7' width='2.4' height='4'/%3E%3Crect x='10.8' y='4' width='2.4' height='5'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="pnl"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13h12M2 13V3'/%3E%3Cpath d='M4 10l3-3 2 2 4-5'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="heat"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14c-2.8 0-4.5-1.9-4.5-4.3C3.5 6.6 6.5 5 6.5 2c2 1 3.2 3 3 5 .8-.4 1.3-1.2 1.4-2 1.3 1.2 1.6 2.9 1.6 4.4C12.5 12 10.8 14 8 14z'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="guild"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l6-3.5L14 6M3 13.5h10M4 7v5M7 7v5M9 7v5M12 7v5'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="galactic"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.8l5.4 3.1v6.2L8 14.2l-5.4-3.1V4.9z'/%3E%3Ccircle cx='8' cy='8' r='1.6'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="mining"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5C5.5 3 10.5 3 13 5.5M8 4.2l-5.5 9.5'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="recovery"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 2h11M8 2v7M8 9a2.6 2.6 0 1 1-2.6 2.6'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="fleshbook"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5v3h2l5 3v-9l-5 3z'/%3E%3Cpath d='M11.5 5.5c1 .8 1 4.2 0 5M13.2 4c1.9 1.6 1.9 6.4 0 8'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="arena"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='2.5' width='8' height='11' rx='1'/%3E%3Cpath d='M3.5 4.5v8.2c0 .8.5 1.3 1.3 1.3'/%3E%3Cpath d='M8.5 6l1.5 2-1.5 2L7 8z'/%3E%3C/svg%3E")}
#fmTabs .tab[data-tab="devlogs"]{--tb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='3' width='12.4' height='8.5' rx='1'/%3E%3Cpath d='M6.5 5.4v3.8l3.2-1.9zM5 13.5h6'/%3E%3C/svg%3E")}