/* =========================================================================
   styles.css — KEMER "Diagnóstico de IA" — ALL visual styling.
   Tokens match kemer.dev (site-matheuskemer/css/style.css): near-black void,
   teal accent, mint ink — "circuit astrolabe" aesthetic, hairline traces,
   45deg chamfers, zero glow. Forked from the LawVerse ficha-split styles.css
   (gold/paper swapped for teal/mint) — see that file's header comment for
   the section order this mirrors: shell -> progress -> layout -> question
   card -> profile panel -> start screen -> result/report -> tree nav ->
   util cluster/sheet -> footer.
   ========================================================================= */

/* ---- design tokens (match site-matheuskemer/css/style.css) ---- */
:root{
  --void:#0F0F0F; --void-soft:#1A1A1A;
  --teal:#01A189; --teal-dim:rgba(1,161,137,.55);
  --mint:#C2F8DA; --ink:var(--mint); --ink-soft:rgba(194,248,218,.72); --ink-faint:rgba(194,248,218,.40);
  --line:rgba(1,161,137,.35); --line-soft:rgba(1,161,137,.18);
  --warn:#D97757; --warn-bg:rgba(217,119,87,.12);
  --font-body:'Ubuntu','Ubuntu Sans','DejaVu Sans',system-ui,sans-serif;
  --font-head:'Ubuntu','Ubuntu Sans',var(--font-body);
  --font-tech:'Ubuntu Condensed','Ubuntu Sans Condensed','Roboto Condensed','Arial Narrow',var(--font-body);
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* reserved clearance for the fixed util-cluster (Ajuda/Complementar) on TABLET
     widths (640-899px), where it stays position:fixed — see "fixed UI clearance"
     below. Below 640px the cluster is no longer fixed at all. */
  --util-cluster-clearance-tablet: 96px;
}
*{box-sizing:border-box;}
html,body{margin:0; min-height:100%;}
body{
  background:var(--void); color:var(--ink); font-family:var(--font-body); font-weight:300;
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(circle at 50% 15%, rgba(1,161,137,.07) 0%, rgba(1,161,137,.02) 34%, transparent 62%);
}
a{ color:inherit; }
button{ font-family:inherit; }

/* ---- shell ---- */
#app{ max-width:1180px; margin:0 auto; padding:var(--s3) var(--s3) var(--s8); min-height:100vh; }
@media (min-width:760px){ #app{ padding:var(--s6) var(--s4) var(--s8); } }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s4); flex-wrap:wrap; }
.brand{ font-family:var(--font-tech); font-size:12px; letter-spacing:.14em; color:var(--teal); text-transform:uppercase; text-decoration:none; }
.brand:hover{ color:#fff; }
.brand span{ color:var(--ink-faint); text-transform:none; letter-spacing:normal; }
.topbar-links{ display:flex; gap:var(--s3); font-size:11px; }
.topbar-links a{ text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent; cursor:pointer; font-family:var(--font-tech); letter-spacing:.08em; text-transform:uppercase; }
.topbar-links a:hover, .topbar-links a:focus-visible{ color:var(--teal); border-color:var(--teal); }

/* ---- progress ---- */
.progress-wrap{ margin-bottom:var(--s4); }
.progress-label{ font-size:11px; color:var(--teal); margin-bottom:6px; display:flex; justify-content:space-between; gap:var(--s2); font-family:var(--font-tech); letter-spacing:.06em; }
.progress-track{ position:relative; height:3px; background:rgba(1,161,137,.14); }
.progress-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--teal); transition:width .4s var(--ease); }
.progress-track::before, .progress-track::after{
  content:""; position:absolute; top:50%; width:6px; height:6px; border-radius:50%;
  border:1px solid var(--teal); background:var(--void); transform:translateY(-50%);
}
.progress-track::before{ left:-3px; }
.progress-track::after{ right:-3px; }

/* ---- layout ---- */
.layout{ display:flex; flex-direction:column; gap:var(--s4); }
@media (min-width:900px){
  .layout{ flex-direction:row; align-items:flex-start; }
  .layout__main{ flex:1 1 auto; min-width:0; }
  .layout__side{ flex:0 0 280px; }
}

/* ---- question card ---- */
.qtitle{ font-family:var(--font-head); font-size:clamp(20px,3.2vmin,29px); font-weight:500; color:#fff; margin:0 0 var(--s3); max-width:44ch; }
.qhint{ font-size:12px; color:var(--ink-soft); margin:-14px 0 var(--s3); }
.opts{ display:flex; flex-direction:column; gap:10px; margin-bottom:var(--s3); }
.opt{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:14px var(--s3); background:transparent; border:1px solid rgba(1,161,137,.35);
  color:var(--ink); font-family:var(--font-body); font-size:15px; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.opt:hover, .opt:focus-visible{ border-color:var(--teal); outline:none; }
.opt.is-armed{ background:rgba(1,161,137,.10); border-color:var(--teal); }
.opt.is-selected{ background:var(--teal); color:var(--void); border-color:var(--teal); }
.opt__dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; border:1.4px solid var(--teal); background:var(--void); }
.opt.is-selected .opt__dot{ background:var(--void); border-color:var(--void); }
.opt__label{ flex:1 1 auto; }
.opt__key{ font-family:var(--font-tech); font-size:11px; color:var(--ink-faint); }
.opt.is-selected .opt__key{ color:rgba(15,15,15,.6); }

.field{ margin-bottom:var(--s3); }
.field span{ display:block; font-family:var(--font-tech); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.field input:not([type="checkbox"]), .field textarea, .field select{
  width:100%; padding:var(--s1) var(--s2); background:var(--void-soft); border:1px solid rgba(1,161,137,.35);
  border-radius:0; color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5; appearance:none;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 1px var(--teal); }
.field label.check{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-soft); text-transform:none; letter-spacing:normal; font-family:var(--font-body); cursor:pointer; }
/* checkbox: keep native rendering (don't appearance:none it) — `appearance:none` on
   Android/mobile Chrome forces a min touch-target box (~34x18) that CSS width/height
   cannot override, and with no native check mark left, checked vs unchecked became
   visually indistinguishable (found during mobile QA screenshot pass, 2026-09-18) —
   critical since this is a required consent checkbox gating submission. `accent-color`
   themes the native control (checkmark, focus ring, tap target) without that trap. */
.field label.check input{ width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--teal); cursor:pointer; }
.field label.check a{ color:var(--ink); border-bottom:1px solid var(--teal); text-decoration:none; }

/* honeypot: visually hidden but present in the DOM/tab order-excluded, so a bot
   that autofills every field still fills it while a human never sees it. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; margin:0; }

.privacy-detail{ margin:-10px 0 var(--s3); font-size:12px; color:var(--ink-soft); }
.privacy-detail summary{ cursor:pointer; font-family:var(--font-tech); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); }
.privacy-detail p{ margin:8px 0 0; line-height:1.6; max-width:56ch; }
.privacy-detail a{ color:var(--ink); border-bottom:1px solid var(--teal); text-decoration:none; }

.qnav{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.btn{
  display:inline-block; padding:12px 28px; background:transparent; border:1px solid var(--teal); color:var(--teal);
  font-family:var(--font-tech); font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  text-decoration:none; transition:background .25s var(--ease), color .25s var(--ease);
}
.btn:hover, .btn:focus-visible{ background:var(--teal); color:var(--void); outline:none; }
.btn[disabled]{ opacity:.35; cursor:not-allowed; }
.btn--ghost{ border-color:transparent; color:var(--ink-soft); padding-left:0; padding-right:0; }
.btn--ghost:hover{ background:transparent; color:var(--teal); }
.btn--block{ display:block; width:100%; text-align:center; }
.btn--lg{ padding:16px 32px; font-size:13px; }

/* ---- profile panel ---- */
.panel{ border:1px solid rgba(1,161,137,.28); padding:var(--s3); position:relative; }
.panel__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s2); }
.panel__title{ font-family:var(--font-tech); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin:0; }
.panel__toggle{ background:none; border:none; color:var(--ink-soft); font-size:11px; cursor:pointer; font-family:var(--font-tech); text-transform:uppercase; letter-spacing:.08em; }
.panel__body{ display:flex; flex-direction:column; gap:var(--s3); }
.panel.is-collapsed .panel__body{ display:none; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(1,161,137,.42); padding:4px 8px; font-family:var(--font-tech); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--teal); }
.tag.tag--risco{ border-color:var(--warn); color:var(--warn); }
.tag.tag--risco::before{ background:var(--warn); }
.panel small.label{ display:block; font-family:var(--font-tech); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.remaining{ font-size:12px; color:var(--ink-soft); }
.remaining b{ color:var(--teal); font-weight:400; }

/* ---- start screen ---- */
.hero{ margin-bottom:var(--s4); }
.hero h1{ font-family:var(--font-head); font-size:clamp(24px,3.8vmin,38px); font-weight:500; color:#fff; margin:0 0 var(--s2); max-width:22ch; }
.hero p{ color:var(--ink-soft); max-width:62ch; margin:0 0 var(--s2); }

/* ---- result / report screens ---- */
.result{ max-width:64ch; }
.result h2{ font-family:var(--font-head); font-size:clamp(20px,3.2vmin,27px); font-weight:500; color:#fff; margin:0 0 var(--s3); }
.result p{ color:var(--ink-soft); margin:0 0 var(--s2); }
.section-label{ font-family:var(--font-tech); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin:var(--s4) 0 var(--s2); }
.insight{ border-left:2px solid var(--teal); padding:8px 0 8px var(--s2); margin-bottom:var(--s2); font-size:14px; color:var(--ink); }
.insight.insight--risco{ border-left-color:var(--warn); }
.insight small{ display:block; color:var(--ink-faint); font-size:12px; margin-top:4px; }
.paywall-box{ border:1px solid var(--teal); background:rgba(1,161,137,.06); padding:var(--s3); margin:var(--s2) 0 var(--s3); }
.paywall-list{ list-style:none; margin:0; padding:0; font-size:13px; color:var(--ink); }
.paywall-list li{ padding:4px 0 4px 18px; position:relative; }
.paywall-list li::before{ content:"✓"; position:absolute; left:0; color:var(--teal); }
.stat-box{ border:1px solid rgba(1,161,137,.35); padding:var(--s3); margin:var(--s3) 0; }
.stat-box .num{ font-family:var(--font-tech); font-size:26px; color:var(--teal); }
.stat-box .cap{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; }
.submit-status{ border:1px solid var(--line); padding:var(--s3); margin:var(--s3) 0; font-size:14px; }
.submit-status.is-ok{ border-color:var(--teal); color:var(--mint); }
.submit-status.is-error{ border-color:var(--warn); color:var(--ink); }
.submit-status.is-sending{ color:var(--ink-soft); }
.dot-pulse{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--teal); margin-right:8px; animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ---- tree / árvore ---- */
.tree-panel{ border:1px solid rgba(1,161,137,.28); margin-top:var(--s3); }
.tree-panel__handle{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px var(--s3); background:transparent; border:none; color:var(--teal); cursor:pointer; font-family:var(--font-tech); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.tree-panel__chev{ color:var(--ink-faint); }
.tree-panel__body{ padding:0 var(--s3) var(--s3); max-height:46vh; overflow-y:auto; }
.tree-group{ margin-top:var(--s2); }
.tree-group__label{ font-family:var(--font-tech); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.tree-rows{ list-style:none; margin:0; padding:0; }
.tree-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:6px 4px; font-size:12px; border-bottom:1px solid rgba(1,161,137,.10); color:var(--ink-soft); }
.tree-row__label{ flex:1 1 auto; min-width:0; }
.tree-row__meta{ flex:0 0 auto; color:var(--ink-faint); font-size:11px; max-width:40%; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-row--answered{ cursor:pointer; color:var(--ink); }
.tree-row--answered:hover, .tree-row--answered:focus-visible{ color:var(--teal); outline:none; }
.tree-row--answered .tree-row__meta{ color:var(--teal); }
.tree-row--current{ color:#fff; font-weight:400; }
.tree-row--current .tree-row__label::before{ content:"› "; color:var(--teal); }
.tree-row--pending{ color:var(--ink-faint); }
.tree-dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--teal); margin-left:6px; vertical-align:middle; }
@media (max-width:899px){
  .tree-panel{
    position:fixed; left:0; right:0; bottom:0; z-index:55; margin-top:0;
    background:var(--void); border:1px solid rgba(1,161,137,.32); border-bottom:none;
    transform:translateY(calc(100% - 46px)); transition:transform .28s var(--ease);
  }
  .tree-panel.is-open{ transform:translateY(0); }
  .tree-panel__body{ max-height:60vh; }
}

/* ---- cluster fixo Ajuda / Complementar ---- */
.util-cluster{ position:fixed; right:var(--s2); bottom:var(--s2); display:flex; flex-direction:column; gap:6px; z-index:70; }
@media (min-width:640px){ .util-cluster{ flex-direction:row; right:var(--s3); bottom:var(--s3); } }
@media (max-width:899px){ .util-cluster{ bottom:56px; } }
.util-btn{ background:var(--void); border:1px solid rgba(1,161,137,.42); color:var(--ink-soft); font-family:var(--font-tech); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; cursor:pointer; }
.util-btn:hover, .util-btn:focus-visible{ border-color:var(--teal); color:var(--teal); outline:none; }

/* ---- fixed UI clearance (mobile visual-bug fix, ported from the LawVerse
   fork this engine came from) ----
   Original bug: the util-cluster (Ajuda/Complementar) was `position:fixed`
   everywhere, so on short/narrow viewports (e.g. 375px) it floated on TOP of
   whatever page content was scrolled to that screen position — the question
   title and the report findings both got covered mid-scroll. A bottom
   `padding-bottom` reserve only fixes the very end of a page — a
   `position:fixed` element still floats over content mid-scroll. Real fix:
   below 640px the cluster is no longer `position:fixed` at all — it renders
   INLINE at the true end of the page content (after the footer), so it can
   never overlap the question card or report content regardless of scroll
   position or content length. Tablet widths (640-899px) keep the fixed
   cluster + a bottom clearance reserve (smaller footprint, stacks
   horizontally, not a reported problem there). */
@media (min-width:640px) and (max-width:899px){
  #app{ padding-bottom: calc(var(--s8) + var(--util-cluster-clearance-tablet)); }
}
@media (max-width:639px){
  .util-cluster{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin:var(--s4) 0 0;
    padding-top:var(--s3);
    border-top:1px solid rgba(1,161,137,.16);
  }
}

/* ---- sheet (Ajuda/Complementar) ---- */
.sheet-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; display:flex; align-items:flex-end; justify-content:center; }
@media (min-width:640px){ .sheet-overlay{ align-items:center; } }
.sheet{ background:var(--void); border:1px solid var(--teal); width:100%; max-width:480px; max-height:80vh; overflow-y:auto; }
.sheet__head{ display:flex; justify-content:space-between; align-items:center; padding:var(--s2) var(--s3); border-bottom:1px solid rgba(1,161,137,.22); }
.sheet__title{ font-family:var(--font-tech); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:0; }
.sheet__close{ background:none; border:none; color:var(--ink-soft); font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }
.sheet__close:hover{ color:var(--teal); }
.sheet__body{ padding:var(--s3); }
.sheet__body textarea{ width:100%; padding:var(--s1) var(--s2); background:var(--void-soft); border:1px solid rgba(1,161,137,.35); color:var(--ink); font-family:var(--font-body); font-size:14px; resize:vertical; }

/* ---- footer ---- */
footer.foot{ margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid rgba(1,161,137,.16); font-size:11px; color:var(--ink-faint); display:flex; gap:var(--s3); flex-wrap:wrap; }
footer.foot a{ text-decoration:none; color:var(--ink-soft); cursor:pointer; }
footer.foot a:hover{ color:var(--teal); }

/* ---- toast ---- */
.toast{ position:fixed; bottom:var(--s3); left:50%; transform:translateX(-50%); background:var(--teal); color:var(--void); padding:10px 18px; font-family:var(--font-tech); font-size:12px; letter-spacing:.08em; text-transform:uppercase; z-index:99; max-width:calc(100vw - 32px); text-align:center; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}