/* =========================================================================
   styles.css — LAWVERSE "Ficha do Escritório" — ALL visual styling.
   This is Roberta's main file. Design tokens (colors, fonts, spacing) live
   in the :root block right below — change the look-and-feel by editing
   those variables first, before touching individual component rules.
   Sections are ordered to match the screens in public/index.html top to
   bottom: shell -> progress -> layout -> question card -> profile panel ->
   start screen -> result/report -> tree nav -> util cluster/sheet -> footer.
   ========================================================================= */

/* ---- design tokens ---- */
:root{
  --void:#0B1626; --void-soft:#101F35;
  --gold:#C9A227; --gold-dim:rgba(201,162,39,.55);
  --paper:#ECE7DA; --ink:var(--paper); --ink-soft:rgba(236,231,218,.72); --ink-faint:rgba(236,231,218,.42);
  --line:rgba(201,162,39,.35); --line-soft:rgba(201,162,39,.18);
  --warn:#D97757; --warn-bg:rgba(217,119,87,.12);
  --font-body:'Public Sans','Work Sans',system-ui,sans-serif;
  --font-head:'Lora','Georgia',serif;
  --font-tech:'Public Sans',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/Feedback) 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 (see mobile override further down),
     so no clearance var is needed there. */
  --util-cluster-clearance-tablet: 120px;
}
*{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(201,162,39,.07) 0%, rgba(201,162,39,.02) 34%, transparent 62%);
}
.u{ font-family:var(--font-tech); text-transform:uppercase; letter-spacing:.2em; }
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:.18em; color:var(--gold); text-transform:uppercase; }
.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(--gold); border-color:var(--gold); }

/* ---- progress ---- */
.progress-wrap{ margin-bottom:var(--s4); }
.progress-label{ font-size:11px; color:var(--gold); 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(201,162,39,.14); }
.progress-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--gold); 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(--gold); 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:600; 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(201,162,39,.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(--gold); outline:none; }
.opt.is-armed{ background:rgba(201,162,39,.10); border-color:var(--gold); }
.opt.is-selected{ background:var(--gold); color:var(--void); border-color:var(--gold); }
.opt__dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; border:1.4px solid var(--gold); 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(11,22,38,.6); }

.scale-row{ display:flex; align-items:center; gap:0; margin-bottom:var(--s3); position:relative; }
.scale-row::before{
  content:""; position:absolute; left:18px; right:18px; top:18px; height:1px; background:rgba(201,162,39,.35);
}
.scale-node{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; align-items:center; gap:8px; background:transparent; border:none; cursor:pointer; color:var(--ink-soft); }
.scale-node__ring{ width:36px; height:36px; border-radius:50%; border:1px solid var(--gold); background:var(--void); display:flex; align-items:center; justify-content:center; font-family:var(--font-tech); font-size:14px; transition:background .2s var(--ease), color .2s var(--ease); }
.scale-node.is-selected .scale-node__ring{ background:var(--gold); color:var(--void); }
.scale-node:focus-visible .scale-node__ring{ outline:2px solid var(--gold); outline-offset:3px; }
.scale-caps{ display:flex; justify-content:space-between; font-size:10px; color:var(--ink-faint); margin:-6px 0 var(--s3); letter-spacing:.06em; }

.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, .field textarea, .field select{
  width:100%; padding:var(--s1) var(--s2); background:var(--void-soft); border:1px solid rgba(201,162,39,.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(--gold); box-shadow:0 0 0 1px var(--gold); }
.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; }
.field label.check input{ width:16px; height:16px; margin-top:2px; flex:0 0 auto; }
.sigilo-note{ font-size:11px; color:var(--warn); margin:-10px 0 var(--s3); line-height:1.5; }

.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(--gold); color:var(--gold);
  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(--gold); 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(--gold); }
.btn--block{ display:block; width:100%; text-align:center; }
.btn--lg{ padding:16px 32px; font-size:13px; }

/* ---- profile panel ---- */
.panel{ border:1px solid rgba(201,162,39,.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(--gold); 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(201,162,39,.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(--gold); }
.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; }
.mod-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-soft); }
.mod-list li::before{ content:"— "; color:var(--gold); }
.remaining{ font-size:12px; color:var(--ink-soft); }
.remaining b{ color:var(--gold); 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:600; color:#fff; margin:0 0 var(--s2); max-width:22ch; }
.hero p{ color:var(--ink-soft); max-width:62ch; margin:0 0 var(--s2); }
.warn-box{ border:1px solid var(--warn); background:var(--warn-bg); padding:var(--s3); margin:var(--s3) 0; font-size:14px; color:var(--ink); line-height:1.6; }
.warn-box strong{ color:var(--warn); }

/* ---- result / report screens ---- */
.result{ max-width:64ch; }
.result h2{ font-family:var(--font-head); font-size:clamp(20px,3.2vmin,27px); font-weight:600; color:#fff; margin:0 0 var(--s3); }
.result p{ color:var(--ink-soft); margin:0 0 var(--s2); }
.result .lead-line{ font-size:17px; color:var(--paper); margin-bottom:var(--s3); }
.section-label{ font-family:var(--font-tech); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:var(--s4) 0 var(--s2); }
.insight{ border-left:2px solid var(--gold); 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 (findings #2+ borrados + bloco "relatório completo") ---- */
.insight--blurred{ position:relative; }
.insight__blur-wrap{ position:relative; margin-top:6px; overflow:hidden; border-radius:2px; }
.insight__blur-fill{ filter:blur(5px); user-select:none; -webkit-user-select:none; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.insight__lock{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 10px; background:rgba(11,22,38,.35); font-family:var(--font-tech); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.paywall-box{ border:1px solid var(--gold); background:rgba(201,162,39,.06); padding:var(--s3); margin:var(--s2) 0 var(--s3); }
.paywall-list{ list-style:none; margin:0 0 var(--s3); 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(--gold); }
.stat-box{ border:1px solid rgba(201,162,39,.35); padding:var(--s3); margin:var(--s3) 0; }
.stat-box .num{ font-family:var(--font-tech); font-size:26px; color:var(--gold); }
.stat-box .cap{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; }
.path-list{ list-style:none; margin:0; padding:0; font-size:12px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:6px; }
.path-list li{ border:1px solid rgba(201,162,39,.22); padding:3px 7px; font-family:var(--font-tech); }
.rule-note{ font-size:11px; color:var(--ink-faint); margin-top:6px; }
.accordion{ border:1px solid rgba(201,162,39,.28); margin-bottom:10px; }
.accordion__head{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px var(--s3); background:transparent; border:none; color:var(--ink); cursor:pointer; font-family:var(--font-tech); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.accordion__head:hover{ color:var(--gold); }
.accordion__body{ padding:0 var(--s3) var(--s3); display:none; }
.accordion.is-open .accordion__body{ display:block; }
.submit-status{ border:1px solid var(--line); padding:var(--s3); margin:var(--s3) 0; font-size:14px; }
.submit-status.is-ok{ border-color:var(--gold); color:var(--paper); }
.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(--gold); 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(201,162,39,.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(--gold); 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(201,162,39,.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(--gold); outline:none; }
.tree-row--answered .tree-row__meta{ color:var(--gold); }
.tree-row--current{ color:#fff; font-weight:400; }
.tree-row--current .tree-row__label::before{ content:"› "; color:var(--gold); }
.tree-row--pending{ color:var(--ink-faint); }
.tree-dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold); 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(201,162,39,.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 / Feedback ---- */
.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(201,162,39,.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(--gold); color:var(--gold); outline:none; }

/* ---- fixed UI clearance (mobile visual-bug fix) ----
   Original bug: the util-cluster (Ajuda/Complementar/Feedback) 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 — first spotted on the start screen
   (hero/CTA hidden behind the stacked buttons), then again on the report screen (findings
   covered while scrolling, 2026-09-18). 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 (2026-09-18): below 640px the cluster is no longer `position:fixed` at all —
   see the mobile override below, which renders it INLINE at the true end of the page
   content, so it can never overlap anything regardless of scroll position or content
   length. Tablet widths (640-899px) keep the fixed cluster + a bottom clearance reserve
   (smaller footprint there, stacks horizontally, not a reported problem). */
@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(201,162,39,.16);
  }
}

/* ---- sheet (Ajuda/Complementar/Feedback) ---- */
.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(--gold); 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(201,162,39,.22); }
.sheet__title{ font-family:var(--font-tech); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); 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(--gold); }
.sheet__body{ padding:var(--s3); }
.sheet__body textarea{ width:100%; padding:var(--s1) var(--s2); background:var(--void-soft); border:1px solid rgba(201,162,39,.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(201,162,39,.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(--gold); }

/* ---- toast ---- */
.toast{ position:fixed; bottom:var(--s3); left:50%; transform:translateX(-50%); background:var(--gold); 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; }
}