/* ==========================================================================
   MAGU · tool.css — identidade nova nas ferramentas vindas do Hub gustavOS
   Carregado DEPOIS do <style> inline de cada ferramenta, com <body class="tool-page">.
   1. Ponte de tokens: as variáveis --gs-* antigas passam a apontar para os tokens
      do site (tema claro e escuro saem de graça). A lógica JS de cada ferramenta não muda.
   2. Layout: barra lateral antiga escondida (fica no DOM só para o JS não quebrar),
      conteúdo centralizado sob o menu do site.
   3. Componentes: cards de vidro, botões, campos, interruptores, faixa de cabeçalho,
      "Como funciona" e "Outras ferramentas".
   ========================================================================== */

/* 1 · ponte de tokens (seletor com peso maior que o :root e o [data-theme] inline) */
:root:root, :root[data-theme] {
  --gs-brand-300: var(--core-hi); --gs-brand-400: var(--core); --gs-brand-500: var(--core); --gs-brand-600: var(--core);
  --gs-bg-primary: var(--bg);
  --gs-bg-secondary: color-mix(in srgb, var(--text) 5%, transparent);
  --gs-bg-tertiary: color-mix(in srgb, var(--text) 9%, transparent);
  --gs-bg-glass: var(--glass); --gs-bg-glass-hover: var(--glass-strong);
  --gs-text-primary: var(--text); --gs-text-secondary: var(--text-2); --gs-text-disabled: var(--text-3);
  --gs-border-subtle: var(--line); --gs-border-default: color-mix(in srgb, var(--text) 14%, transparent);
  --gs-shadow-brand: 0 8px 24px -8px var(--core-glow);
  --gs-shadow-glass: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  --gs-gradient-brand: linear-gradient(135deg, var(--core) 0%, var(--core-hi) 100%);
  --gs-gradient-glow: none;
  --mono: var(--f-mono);
}

/* 2 · layout */
body.tool-page { background: transparent !important; background-image: none !important; color: var(--text); font-family: var(--f-text); }
.tool-page .sidebar, .tool-page .sidebar-overlay, .tool-page .mobile-toggle, .tool-page .gsf-footer,
.tool-page #sidebar, .tool-page #overlay, .tool-page #sidebarOverlay, .tool-page #mobBtn, .tool-page #mobileToggle, .tool-page #menuBtn { display: none !important; }
.tool-page .main-content.tool-main { margin: 0 auto !important; padding: calc(var(--bar-h) + 40px) var(--gut) 24px !important; max-width: 1100px; width: 100%; box-sizing: border-box; }
.tool-main svg, .tool-main img { display: revert; max-width: 100%; }
.tool-main .app-ic { display: block; }

/* faixa do topo: caminho, ícone, nome, frase e selos */
.t-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--text-3); }
.t-crumbs a { color: var(--text-2); display: inline-block; padding: 12px 0; margin: -12px 0; }
.t-crumbs li + li::before { content: '›'; margin-right: 8px; color: var(--text-3); }
.t-hero { display: flex; align-items: center; gap: 24px; margin: 0 0 32px; }
.t-hero .app-ic { width: 88px; height: 88px; border-radius: 23%; flex: none; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.t-hero h1 { margin: 0; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.25rem); line-height: 1; letter-spacing: -.035em; font-weight: 700; color: var(--text); background: none; -webkit-text-fill-color: currentColor; }
.t-hero p { margin: 10px 0 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--text-2); }
.t-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.t-pills li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--text-2);
  background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--line); }
.t-pills li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3fd68a; }
@media (max-width: 640px) { .t-hero { flex-direction: column; align-items: flex-start; gap: 16px; } .t-hero .app-ic { width: 72px; height: 72px; } }

/* 3 · componentes da ferramenta */
.tool-page .card {
  display: block; position: relative; border-radius: 22px; padding: clamp(18px, 3vw, 24px);
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.tool-page .card-title { font-family: var(--f-text); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); background: none; -webkit-text-fill-color: currentColor; }
.tool-page .btn-primary { background: var(--core) !important; color: var(--core-ink) !important; border: 0; border-radius: var(--r);
  box-shadow: 0 8px 24px -8px var(--core-glow), inset 0 1px 0 rgba(255,255,255,.35) !important; font-weight: 600; min-height: 48px; }
.tool-page .btn-primary:hover { filter: brightness(1.08); transform: none; }
.tool-page .btn-secondary { background: color-mix(in srgb, var(--text) 6%, transparent) !important; color: var(--text) !important; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent) !important; border-radius: var(--r); min-height: 44px; }
.tool-page .btn-secondary:hover { background: color-mix(in srgb, var(--text) 10%, transparent) !important; transform: none; }
.tool-page input[type="text"], .tool-page input[type="number"], .tool-page input[type="search"], .tool-page input[type="email"], .tool-page input[type="password"], .tool-page input[type="url"], .tool-page select, .tool-page textarea {
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); border-radius: 12px; }
.tool-page input:focus-visible, .tool-page select:focus-visible, .tool-page textarea:focus-visible, .tool-page button:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.tool-page input[type="range"] { accent-color: var(--core); }
.tool-page input[type="checkbox"], .tool-page input[type="radio"] { accent-color: var(--core); }
.tool-page .toggle-switch input:checked + .toggle-track, .tool-page .toggle input:checked + .slider { background: var(--core) !important; }
.tool-page .check-item.active, .tool-page .tab.active, .tool-page .tab-btn.active, .tool-page .mode-btn.active, .tool-page .seg-btn.active {
  border-color: color-mix(in srgb, var(--core) 60%, transparent) !important; background: color-mix(in srgb, var(--core) 16%, transparent) !important; color: var(--text) !important; }
.tool-page code, .tool-page .mono, .tool-page [class*="mono"] { font-family: var(--f-mono); }

/* "Como o <produto> funciona" */
.t-how { margin-top: clamp(48px, 7vw, 72px); }
.t-how h2, .t-more h2 { margin: 0 0 18px; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); letter-spacing: -.02em; font-weight: 700; color: var(--text); }
.t-infos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.t-infos li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow); }
.t-infos b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.t-infos span { font-size: 14px; line-height: 1.5; color: var(--text-2); }
@media (min-width: 761px) { .t-infos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* "Outras ferramentas grátis" (mesmo dock da home) */
.t-more { margin-top: clamp(48px, 7vw, 72px); }
.t-dock { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 16px 10px; border-radius: 24px; }
.t-dock a { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 72px; padding: 6px 2px; color: var(--text-2); font-size: 12.5px; text-decoration: none; }
.t-dock a:hover { color: var(--text); text-decoration: none; }
.t-dock .app-ic { width: 48px; height: 48px; border-radius: 23%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
:root[data-theme="light"] .t-dock .app-ic, :root[data-theme="light"] .t-hero .app-ic { filter: drop-shadow(0 6px 12px rgba(0,0,0,.16)); }

/* ícones de traço que substituem os emojis antigos (gerados na conversão) */
.tool-page .ei { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tool-page button .ei:only-child { width: 1.25em; height: 1.25em; }
/* rótulos em caixa-alta do Hub → frase normal, como no resto do site */
.tool-page .nav-label, .tool-page .slider-label, .tool-page .section-label, .tool-page .field-label, .tool-page label.label { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px; color: var(--text-2); }

/* promptOS: modelos e histórico (antes na barra lateral) */
.pt-extra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 761px) { .pt-extra { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.pt-tpls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tool-page .pt-tpls .template-item { width: auto; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); font-size: 14px; cursor: pointer; text-align: center; }
.tool-page .pt-tpls .template-item[aria-pressed="true"], .tool-page .pt-tpls .template-item.active { border-color: color-mix(in srgb, var(--core) 60%, transparent); background: color-mix(in srgb, var(--core) 16%, transparent); }
.pt-extra .history-section { margin-top: 12px; }
.pt-cur { margin-top: 6px; font-size: 13.5px; color: var(--text-2); } .pt-cur b { color: var(--text); }

/* fase 2 · acabamento: hover muda só cor ou brilho; nada de levantar, escalar ou deslizar */
.tool-page .main-content *:hover { transform: none; }
.tool-page .main-content :is(.toggle-track, .switch, .slider)::after, .tool-page .main-content :is(.toggle-track, .switch, .slider)::before { transition: transform .2s var(--ease); }

/* fase 4 · alvos de toque: todo botão e aba dentro da ferramenta tem pelo menos 44 px de altura */
.tool-page .main-content button, .tool-page .main-content [role="button"], .tool-page .main-content label.btn, .tool-page .main-content .tab, .tool-page .main-content .tab-btn { min-height: 44px; }
.tool-page .main-content button:has(> .ei:only-child), .tool-page .main-content button:has(> svg:only-child), .tool-page .main-content button.copy-btn, .tool-page .main-content button.icon-btn { min-width: 44px; }
.tool-page .main-content button:empty { min-width: 44px; }
.tool-page .menubar .icon-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; flex: none; }