/* ─────────────────────────────────────────────────────────────────────
   Operforma — content-area chooser + remembered-area filter (shared).

   One stylesheet + one script (area-select.js) drive BOTH the Panorama hub
   and the Biblioteca index. The reader picks their profession ("área"); the
   choice is remembered in localStorage (key `operforma:area`) and, on return,
   the surface collapses to just that area — with a persistent "ver todas /
   trocar" bar. Areas are grouped under the 4 ICP clusters; professions with
   no content yet render "em breve".

   SEO/AEO safety model (mirrors motion.css — do not weaken):
   • ALL content stays in the static HTML. The hide is purely client-side.
   • The hidden state lives ONLY under `.area-hidden`, applied by JS (or by the
     inline pre-paint guard's <style>). Crawlers / no-JS never add the class →
     everything stays visible. AI answer-engines (no JS) see the full page.
   • The guard's 3s fail-open + the script's empty-result self-heal mean a
     reader is never trapped behind a filter with no way out.
   ───────────────────────────────────────────────────────────────────── */

/* The single hide mechanism — shared by the pre-paint guard's injected <style>
   and area-select.js (which applies the class, then removes the guard <style>). */
[data-area-managed].area-hidden { display: none !important; }

/* ── Chooser shell (self-contained; works inside either surface's wrap) ── */
.area-chooser {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 4px;
}
.area-chooser-head { margin-bottom: 4px; }
.area-chooser-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.area-chooser-title {
  margin: 8px 0 0; font-family: var(--font-display); font-weight: 300;
  font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink);
}
.area-chooser-sub {
  margin: 7px 0 0; font-family: var(--font-body); font-size: 13.5px;
  line-height: 1.5; color: var(--soft); max-width: 56ch;
}

/* ── Cluster group ── */
.area-cluster { margin-top: 20px; }
.area-cluster-head {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.area-cluster-dot {
  width: 8px; height: 8px; flex: none; display: inline-block;
  background: var(--cluster-accent, var(--accent));
}
.area-cluster-name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}

/* ── Card grid ── */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px; margin-top: 12px;
}
.area-card {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 86px; padding: 14px 15px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 60%, #fff 40%);
  text-decoration: none; color: inherit; position: relative;
}
.area-card-para {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  line-height: 1.24; letter-spacing: -0.005em; color: var(--ink);
  padding-right: 16px; /* room for the arrow */
}
.area-card-count {
  margin-top: auto; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft);
}
.area-card-go {
  position: absolute; top: 13px; right: 13px;
  font-family: var(--font-mono); font-size: 13px; color: var(--mid);
  line-height: 1;
}
.area-card:hover { border-color: var(--accent); }
.area-card:hover .area-card-para { color: var(--accent); }
.area-card:hover .area-card-go { color: var(--accent); }

/* Active (the area currently being shown) */
.area-card[aria-current="true"] {
  border-color: var(--accent); border-width: 1.5px;
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}
.area-card[aria-current="true"] .area-card-go { color: var(--accent); }

/* "Em breve" — a profession on the ICP map with no content yet (no link). */
.area-card.is-soon {
  background: transparent; border-style: dashed;
  border-color: var(--line); cursor: default;
}
.area-card.is-soon .area-card-para { color: var(--mid); font-weight: 500; }
.area-card.is-soon:hover { border-color: var(--line); }
.area-card.is-soon:hover .area-card-para { color: var(--mid); }
.area-card-soon {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mid);
  border: 1px solid var(--line); padding: 2px 6px;
}
/* Honest "em breve" cards still capture intent — the diagnosis works for any
   specialist, so an empty area earns a request instead of dead-ending. */
.area-card-capture {
  margin-top: 9px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.03em; color: var(--accent); text-decoration: none;
}
.area-card.is-soon { cursor: default; pointer-events: none; }
.area-card-capture { pointer-events: auto; } /* the link is the one live target */
.area-card-capture:hover { text-decoration: underline; }

/* ── "Você está vendo …" bar (shown by JS only while a filter is active) ── */
.area-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1200px; margin: 14px auto 0; padding: 11px 20px;
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
  border-top: 1px solid var(--accent); border-bottom: 1px solid var(--line);
}
.area-bar[hidden] { display: none; }
.area-bar-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--soft);
}
.area-bar-label strong { color: var(--ink); font-weight: 600; }
.area-bar-actions { display: flex; gap: 14px; margin-left: auto; }
.area-bar-btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: none;
}
.area-bar-btn:hover { opacity: 0.65; }

/* ── Motion: opt-in transitions only when motion is allowed ── */
@media (prefers-reduced-motion: no-preference) {
  .area-card { transition: border-color 0.15s ease, transform 0.15s ease; }
  .area-card:not(.is-soon):hover { transform: translateY(-1px); }
}

/* ── Desktop: align padding with the Panorama .pano-wrap (40px gutters) ── */
@media (min-width: 860px) {
  .area-chooser { padding: 26px 40px 6px; }
  .area-chooser-title { font-size: 26px; }
  .area-bar { padding: 12px 40px; }
  .area-grid { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px; }
}

/* ═════════════════════════════════════════════════════════════════════
   Cluster-first profession selector — the marketing-page affordance
   (landing + como-funciona). Quiet & secondary, JUST BELOW the hero
   (the hero stays minimal/aniconic — locked). PRIMARY choice = the 4
   clusters (Hick-safe); picking one REVEALS that cluster's ofícios
   (accordion — area-select.js `[data-cluster-toggle]`). Default shows
   only the label + 4 cluster buttons — no 15-chip dump (progressive
   disclosure; NN/g audience-self-selection guidance). Engine contract
   reused for the revealed chips: [data-area-pick] / [data-area-disabled]
   / [data-area-all]. Two themes: default = light (como-funciona);
   .area-picker--dark = the near-black landing surface.
   ═════════════════════════════════════════════════════════════════════ */
.area-picker {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 20px 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.area-picker-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}

/* ── Primary: the 4 cluster buttons ── */
.area-picker-clusters { display: flex; flex-wrap: wrap; gap: 8px; }
.area-cluster-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 60%, #fff 40%);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em;
}
.area-cluster-btn::after {
  content: "\203A"; /* › — rotates to point down when expanded (aniconic accordion mark) */
  font-size: 14px; line-height: 1; color: var(--mid);
}
.area-cluster-btn:hover { border-color: var(--accent); color: var(--accent); }
.area-cluster-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}
.area-cluster-btn[aria-expanded="true"]::after { color: var(--accent); }

/* ── Revealed ofício panel (one open at a time; hidden until expanded) ── */
.area-picker-ofs {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 2px 0 2px 2px;
}
.area-picker-ofs[hidden] { display: none; } /* beats the .area-picker-ofs display:flex */
.area-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; white-space: nowrap;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 60%, #fff 40%);
  color: var(--ink); text-decoration: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
}
.area-chip:hover { border-color: var(--accent); color: var(--accent); }
.area-chip[aria-current="true"] {
  border-color: var(--accent); border-width: 1.5px;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--ink); font-weight: 500;
}
.area-chip.is-soon {
  background: transparent; border-style: dashed; color: var(--mid);
  cursor: default;
}
.area-chip.is-soon::after {
  content: "em breve"; font-size: 8.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mid);
  border: 1px solid var(--line); padding: 1px 4px;
}
.area-chip.is-soon:hover { border-color: var(--line); color: var(--mid); }

/* ── Contextual reset — shown ONLY while a filter is active (the engine sets
      html[data-area]); replaces the redundant always-on "Todos". ── */
.area-picker-reset {
  display: none; align-self: flex-start;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  background: none; border: none; padding: 0; cursor: pointer;
}
html[data-area] .area-picker-reset { display: inline-block; }
.area-picker-reset:hover { text-decoration: underline; }

.area-picker-note {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  color: var(--soft); max-width: 60ch; margin: 0;
}
.area-picker-note a { color: var(--accent); text-decoration: none; }
.area-picker-note a:hover { text-decoration: underline; }

/* ── Dark variant (the near-black landing surface) ── */
.area-picker--dark .area-cluster-btn,
.area-picker--dark .area-chip {
  border-color: var(--line-dark);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--grey);
}
.area-picker--dark .area-cluster-btn:hover,
.area-picker--dark .area-chip:hover { border-color: var(--accent); color: var(--white); }
.area-picker--dark .area-cluster-btn[aria-expanded="true"] {
  border-color: var(--accent); color: var(--white);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.area-picker--dark .area-cluster-btn::after { color: var(--grey-mid); }
.area-picker--dark .area-chip[aria-current="true"] {
  border-color: var(--accent); color: var(--white);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.area-picker--dark .area-chip.is-soon { color: var(--grey-mid); border-color: var(--line-dark); }
.area-picker--dark .area-chip.is-soon::after { color: var(--grey-mid); border-color: var(--line-dark); }
.area-picker--dark .area-picker-note { color: var(--grey-mid); }
/* On the near-black landing --accent (#3B3868) is the LIGHT-surface ink-blue → 1.55:1
   (illegible). The landing doesn't apply .op-dark (which would auto-swap it), so point
   these at the dark-surface accent --indigo-soft (#A29CDB → 7.56:1), as marketing.css does. */
.area-picker--dark .area-picker-label,
.area-picker--dark .area-picker-reset { color: var(--indigo-soft); }
.area-picker--dark .area-picker-note a { color: var(--indigo-soft); }
.mk-preview .area-variant-btn:hover { color: var(--indigo-soft); }

/* ── Motion: gentle reveal only when motion is allowed ── */
@media (prefers-reduced-motion: no-preference) {
  .area-cluster-btn::after { transition: transform 0.15s ease, color 0.15s ease; }
  .area-cluster-btn[aria-expanded="true"]::after { transform: rotate(90deg); }
}

/* ── Solo / owner sub-toggle (barbell segments only; rendered inside each
      variant block by the injector, so the visible block bakes its own
      aria-current — the engine just flips currentVariant + re-resolves). ── */
.area-variant {
  display: inline-flex; gap: 0; margin: 0 0 14px;
  border: 1px solid var(--line);
}
.area-variant-btn {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--soft);
  background: none; border: none; padding: 6px 12px; cursor: pointer;
}
.area-variant-btn + .area-variant-btn { border-left: 1px solid var(--line); }
.area-variant-btn[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink);
}
.area-variant-btn:hover { color: var(--accent); }
/* dark surface (landing) */
.mk-preview .area-variant { border-color: var(--line-dark); }
.mk-preview .area-variant-btn { color: var(--grey-mid); }
.mk-preview .area-variant-btn + .area-variant-btn { border-left-color: var(--line-dark); }
.mk-preview .area-variant-btn[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--white);
}

@media (min-width: 860px) {
  .area-picker { padding: 22px 40px 8px; }
}