/* Tools page clarity pass (2026-10-10, js/tools-ux.js). Loaded after nav-clusters.css, before ui-polish.css. */

/* "Pro" mark on the strip: a small GOLD dot after the label (owner 2026-10-10: the cyan-violet dot read as "something
   new"); the tooltip says "... (Pro)". A pill did not fit. */
html body.site-v2.page-tools .top-chrome #nav button[data-badge]::after{
  content:""!important;display:inline-block!important;position:static!important;width:7px!important;height:7px!important;
  margin:-8px 0 0 3px;padding:0;border:0!important;border-radius:50%;transform:none!important;opacity:1!important;
  background:radial-gradient(circle at 35% 30%,#fff3c4 0,#ffd166 38%,#e0a21a 100%)!important;
  box-shadow:0 0 0 1px rgba(120,80,0,.35),0 0 7px rgba(255,196,64,.65)}

/* Design (the Builder) has its own icon in the strip: a brush. */
.page-tools .top-chrome .nav button[data-tab="builder"],.top-chrome .nav button[data-tab="builder"]{--tool-icon:url('/static/img/tool-icons/design.svg?v=1')}

/* When the labels of a language do not fit one row (js adds the classes): first tighter, then two rows.
   Every tool stays visible (owner rule). */
@media (min-width:761px){
  html body.site-v2.page-tools .top-chrome #nav.tux-tight>button,
  html body.site-v2.page-tools .top-chrome #nav.tux-tight .nav-group__trigger{padding:0 5px!important}
  html body.site-v2.page-tools .top-chrome #nav.tux-tight>button::before,
  html body.site-v2.page-tools .top-chrome #nav.tux-tight .nav-group__trigger::before{display:none!important}
  html body.site-v2.page-tools .top-chrome #nav.tux-wrap{flex-wrap:wrap!important;justify-content:center!important;row-gap:2px!important;overflow:visible!important}
  html body.site-v2.page-tools .top-chrome #nav.tux-wrap>button,
  html body.site-v2.page-tools .top-chrome #nav.tux-wrap .nav-group__trigger{min-height:36px!important}
}

/* A card heading that repeats the page title (js marks it). A help "?" next to it stays, moved to the corner. */
.page-tools .tab h2.tux-dup{display:none!important}
.page-tools .tab .sm-help-heading.tux-dup-row{justify-content:flex-end;min-height:0;margin-bottom:-6px}

/* Decorative uppercase kickers that only repeat or label the layout ("AI / PROFILE RATING", "MOTION / EDIT",
   "EXPERIMENT / PROFILE SIGNAL", "STEAM · WORKSHOP", "ABOUT"): the heading under them says the same. */
.page-tools [data-insight-ui="doctor-kicker"],
.page-tools [data-insight-ui="design-kicker"],
.page-tools #tab-loop .loop-kicker,
.page-tools #tab-loop [data-loop="emptyKicker"],
.page-tools #tab-workshop .wsx-head__kicker,
.page-tools #tab-dna .dna-kicker,
.page-tools #tab-about .tu-kicker{display:none!important}

/* The "Prepare a file / Create a design" switch belongs to the showcase workspace, not to Steam DNA. */
body.page-tools[data-workspace-tool="dna"] .workspace-switch{display:none!important}

/* Real Steam showcase names in "Which one do I have?" (local name + the English one for English Steam clients). */
#processModeHelp li b{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
#processModeHelp li b .tux-en{color:rgba(214,229,250,.55);font-size:.86em;font-weight:600}

/* Empty result panels of Rating / Design selection now say what will appear and what to do (profile-insights.js). */
.page-tools .insight-empty{min-height:320px!important;max-width:420px;margin:0 auto;padding:24px;
  color:rgba(214,229,250,.64)!important;font:500 13.5px/1.6 Montserrat,system-ui,sans-serif!important;letter-spacing:0!important}
.page-tools .insight-empty b{display:block;margin:0 0 8px!important;color:#eef6ff!important;font:700 16px/1.35 Montserrat,system-ui,sans-serif!important}

/* Phones: the Process cards are re-ordered (workspace-editor.css: files 1, showcase 2, preview 3, style 4 ...) but the
   "Depth (3D)" card had no order and jumped ABOVE step 1. It belongs right before "Style it" (same order, earlier in DOM). */
@media (max-width:760px){
  .page-tools #tab-process #processDepthCard{order:4}
}

/* "My projects" belongs to Design: the strip shows where you are. */
html body.site-v2.page-tools[data-workspace-tool="projects"] .top-chrome #nav>button[data-tab="builder"]{
  color:#fff!important;background:linear-gradient(135deg,rgba(31,201,241,.14),rgba(138,125,255,.12))!important;
  box-shadow:inset 0 0 0 1px rgba(111,227,255,.28)!important}

/* Sign-in button in the guest "My projects" message (tools-ux.js). */
.page-tools #builderProjectGrid .builder-empty-layers{display:grid;justify-items:center;gap:12px}
.page-tools #builderProjectGrid .tux-signin{min-height:40px;padding:0 22px;border-radius:12px!important;border:0;cursor:pointer;
  background:linear-gradient(135deg,#1fc9f1,#8a7dff);color:#041019;font:800 13.5px Montserrat,system-ui,sans-serif}