/* Folha de estilo do JurisMap (advogaia-ceia/JurisMap, frontend/index.html).
   Copiada sem alteracao para que esta tela use os mesmos componentes do
   produto -- topbar, search-card, scope-card, decision-list -- em vez de
   um visual paralelo. O que e especifico desta tela fica em busca.html. */
:root {
      --ink: #172d38;
      --ink-soft: #405863;
      --muted: #687982;
      --paper: #eef3f4;
      --white: #ffffff;
      --line: #d6e0e2;
      --line-dark: #b8c7ca;
      --teal: #086a6d;
      --teal-dark: #07575a;
      --teal-pale: #e4f2f0;
      --amber: #9a5818;
      --amber-pale: #fbf1e3;
      --serif: Georgia, "Times New Roman", serif;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --shadow: 0 22px 70px rgba(23, 45, 56, 0.08);
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      line-height: 1.5;
    }
    button, textarea, input, select { font: inherit; }
    a { color: inherit; }
    :focus-visible { outline: 3px solid #0b8588; outline-offset: 3px; }

    .topbar {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 14px clamp(20px, 5vw, 76px);
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.72);
    }
    .brand { display: flex; align-items: center; gap: 13px; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center;
      background: var(--ink); color: #e5f5f1; font: 20px var(--serif);
      border-radius: 2px 12px 2px 2px;
    }
    .brand-name { display: grid; line-height: 1.15; gap: 4px; }
    .brand-name strong { font: 18px var(--serif); letter-spacing: -.02em; }
    .brand-name span, .top-meta, .eyebrow, .field-label, .scope-label,
    .result-kicker, .mini-label {
      font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase;
    }
    .brand-name span { color: var(--muted); }
    .top-meta { color: var(--muted); text-align: right; }

    main { max-width: 1240px; margin: auto; padding: 0 clamp(20px, 5vw, 76px) 90px; }
    .hero {
      padding: clamp(42px, 7vw, 88px) 0 38px;
      display: grid; grid-template-columns: minmax(0, 1fr) 230px;
      align-items: end; gap: 45px;
    }
    .eyebrow { color: var(--teal); margin: 0 0 18px; }
    h1 {
      margin: 0; max-width: 780px; font: 500 clamp(42px, 6vw, 76px)/.98 var(--serif);
      letter-spacing: -.055em;
    }
    h1 em { color: var(--teal); font-weight: 400; }
    .hero-copy {
      max-width: 620px; color: var(--ink-soft); margin: 22px 0 0; font-size: 15px;
    }
    .folio {
      border-left: 1px solid var(--line-dark);
      padding: 3px 0 4px 18px; color: var(--muted);
    }
    .folio strong {
      display: block; color: var(--ink); font: 41px/.95 var(--serif);
      letter-spacing: -.05em; margin-bottom: 8px;
    }
    .folio span { display: block; font-size: 12px; }
    .folio small { display: block; margin-top: 9px; color: var(--teal); font: 10px var(--mono); }

    .workspace {
      display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(245px, .8fr);
      align-items: stretch; gap: 16px;
    }
    .search-card, .scope-card {
      background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);
    }
    .search-card { padding: clamp(20px, 3vw, 34px); }
    .field { display: grid; gap: 9px; }
    .field-label { color: var(--ink-soft); }
    .field-help { margin: 0; color: var(--muted); font-size: 12px; }
    textarea, input, select {
      width: 100%; border: 1px solid var(--line-dark); border-radius: 3px;
      color: var(--ink); background: #fbfdfd; transition: border-color .16s, box-shadow .16s;
    }
    textarea:focus, input:focus, select:focus {
      border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,106,109,.1); outline: none;
    }
    textarea {
      min-height: 178px; padding: 17px 18px; resize: vertical;
      font-size: 15px; line-height: 1.65;
    }
    textarea::placeholder, input::placeholder { color: #89969b; }
    .controls {
      display: grid; grid-template-columns: 1.2fr .8fr auto; gap: 12px;
      align-items: end; margin-top: 20px;
    }
    input, select { height: 46px; padding: 0 12px; font-size: 13px; }
    .field.compact { gap: 8px; }
    .field.compact label { font-size: 10px; }
    .primary-button {
      min-height: 46px; border: 0; border-radius: 3px; padding: 0 18px;
      background: var(--teal); color: white; font-size: 13px; font-weight: 700;
      cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s;
    }
    .primary-button:hover { background: var(--teal-dark); transform: translateY(-1px); }
    .primary-button:disabled { opacity: .65; cursor: wait; transform: none; }
    .privacy-note { margin: 18px 0 0; color: var(--muted); font-size: 11px; }

    .scope-card { padding: 25px 25px 22px; position: relative; overflow: hidden; }
    .scope-card::after {
      content: "§"; position: absolute; right: 10px; bottom: -62px;
      color: #eef4f3; font: 190px/.9 var(--serif); pointer-events: none;
    }
    .scope-label { color: var(--teal); margin: 0 0 12px; }
    .scope-card h2 { margin: 0 0 8px; font: 24px/1.05 var(--serif); letter-spacing: -.025em; }
    .scope-card > p { margin: 0; color: var(--ink-soft); font-size: 12px; }
    .scope-stats {
      position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr;
      gap: 17px 14px; padding-top: 22px; margin-top: 21px; border-top: 1px solid var(--line);
    }
    .scope-stat dt { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
    .scope-stat dd { margin: 3px 0 0; font: 20px/1.1 var(--serif); }
    .scope-foot { position: relative; z-index: 1; margin: 18px 0 0; color: var(--muted); font-size: 11px; }

    .results { margin-top: 58px; }
    .results[hidden] { display: none; }
    .results-head {
      padding-bottom: 19px; margin-bottom: 17px; border-bottom: 1px solid var(--line-dark);
      display: flex; align-items: end; justify-content: space-between; gap: 18px;
    }
    .result-kicker { margin: 0 0 7px; color: var(--teal); }
    .results-head h2 { margin: 0; font: 31px/1 var(--serif); letter-spacing: -.03em; }
    .method-tag {
      padding: 7px 10px; border: 1px solid var(--line-dark); color: var(--ink-soft);
      font: 10px var(--mono); text-transform: uppercase;
    }
    .notice {
      padding: 14px 16px; border-left: 3px solid var(--amber);
      background: var(--amber-pale); color: #704311; font-size: 13px; margin: 0 0 18px;
    }
    .recommendations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .device-card {
      background: var(--white); border: 1px solid var(--line); padding: 20px;
      box-shadow: 0 6px 24px rgba(23,45,56,.04);
    }
    .device-card:first-child { grid-column: 1 / -1; border-top: 3px solid var(--teal); }
    .device-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .device-card h3 { margin: 0; font: 23px/1.12 var(--serif); letter-spacing: -.02em; }
    .count-chip { white-space: nowrap; padding: 5px 8px; background: var(--teal-pale); color: var(--teal-dark); font-size: 10px; font-weight: 700; }
    .device-status { margin: 10px 0 15px; display: inline-flex; color: var(--amber); font-size: 10px; font-weight: 700; }
    .evidence-list { display: grid; gap: 10px; }
    .evidence {
      margin: 0; padding: 12px 14px 12px 16px; border-left: 2px solid var(--teal);
      background: #f5f8f8; color: var(--ink-soft); font: 13px/1.55 var(--serif);
    }
    .evidence-meta { display: block; margin-top: 8px; color: var(--muted); font: 10px/1.4 var(--mono); }
    .device-reason { margin: 14px 0 0; color: var(--muted); font-size: 11px; }
    .decision-section, .authority-section { margin-top: 36px; }
    .section-title {
      margin: 0 0 11px; font: 23px var(--serif); letter-spacing: -.02em;
    }
    .section-caption { margin: -5px 0 13px; color: var(--muted); font-size: 12px; }
    .decision-list { display: grid; gap: 8px; }
    details.decision { background: rgba(255,255,255,.74); border: 1px solid var(--line); }
    details.decision summary { cursor: pointer; padding: 13px 15px; color: var(--ink); font-size: 12px; }
    details.decision summary:hover { color: var(--teal-dark); }
    .decision-body { padding: 0 15px 15px; }
    .decision-body p { margin: 0; color: var(--ink-soft); font: 13px/1.6 var(--serif); }
    .decision-body small { display: block; margin-top: 9px; color: var(--muted); font: 10px var(--mono); }
    .authority-list { display: flex; flex-wrap: wrap; gap: 7px; }
    .authority-pill { border: 1px solid var(--line-dark); padding: 5px 8px; color: var(--ink-soft); font: 10px var(--mono); }

    footer {
      max-width: 1240px; margin: 0 auto; padding: 20px clamp(20px, 5vw, 76px) 32px;
      color: var(--muted); border-top: 1px solid var(--line); font-size: 11px;
    }
    .error { padding: 13px 15px; margin: 14px 0 0; background: #fff0ed; color: #852e21; font-size: 13px; }
    .error[hidden] { display: none; }
    .loading-mark {
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: var(--teal); margin-right: 7px; animation: pulse 1.2s ease-in-out infinite;
    }
    @keyframes pulse { 50% { opacity: .25; transform: scale(.78); } }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    }
    @media (max-width: 820px) {
      .hero { grid-template-columns: 1fr; gap: 22px; }
      .folio { max-width: 300px; }
      .workspace { grid-template-columns: 1fr; }
      .controls { grid-template-columns: 1fr 1fr; }
      .primary-button { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) {
      .topbar { min-height: 64px; padding-inline: 18px; }
      .top-meta { max-width: 125px; font-size: 8px; }
      main { padding-inline: 18px; }
      .hero { padding-top: 45px; }
      h1 { font-size: 46px; }
      .controls, .recommendations { grid-template-columns: 1fr; }
      .device-card:first-child { grid-column: auto; }
      .results-head { align-items: flex-start; flex-direction: column; }
      .scope-stats { grid-template-columns: 1fr 1fr; }
      footer { padding-inline: 18px; }
    }

    /* Interface compacta, com tipografia de sistema e hierarquia direta. */
    :root {
      --ink: #202b38;
      --ink-soft: #475467;
      --muted: #667085;
      --paper: #f5f7f8;
      --white: #ffffff;
      --line: #e4e7ec;
      --line-dark: #d0d5dd;
      --teal: #167d78;
      --teal-dark: #11645f;
      --teal-pale: #e7f4f2;
      --amber: #8a571a;
      --amber-pale: #fff7e8;
      --serif: var(--sans);
      --mono: var(--sans);
      --sans: Inter, "Segoe UI", Arial, sans-serif;
      --shadow: 0 1px 3px rgba(16, 24, 40, .06);
    }

    body { background: var(--paper); font-family: var(--sans); line-height: 1.5; }
    .topbar {
      min-height: 64px; padding: 12px clamp(20px, 5vw, 64px);
      background: #fff; border-bottom-color: var(--line);
    }
    .brand { gap: 10px; }
    .brand-mark {
      width: 34px; height: 34px; border-radius: 8px;
      font: 700 16px/1 var(--sans); color: #fff; background: var(--teal);
    }
    .brand-name { gap: 2px; }
    .brand-name strong { font: 700 16px/1.2 var(--sans); letter-spacing: 0; }
    .brand-name span { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 400; }
    .top-meta {
      color: var(--muted); font-size: 12px; font-weight: 500;
      letter-spacing: 0; line-height: 1.45; text-transform: none;
    }

    main { max-width: 1160px; padding: 30px clamp(20px, 5vw, 64px) 64px; }
    .page-summary {
      display: flex; justify-content: space-between; align-items: end; gap: 20px;
      margin: 0 0 20px;
    }
    .eyebrow {
      margin: 0 0 5px; color: var(--muted);
      font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none;
    }
    .page-summary h1 {
      margin: 0; color: var(--ink); font: 600 24px/1.3 var(--sans);
      letter-spacing: 0;
    }
    .corpus-count {
      display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px;
      color: var(--muted); font-size: 12px;
    }
    .corpus-count strong { color: var(--ink); font-size: 19px; font-weight: 650; }
    .corpus-separator { color: #98a2b3; padding: 0 2px; }
    .corpus-count time { font-size: 12px; }

    .workspace {
      grid-template-columns: minmax(0, 1.65fr) minmax(250px, .8fr);
      align-items: start; gap: 16px;
    }
    .search-card, .scope-card {
      border: 1px solid var(--line); border-radius: 10px;
      box-shadow: var(--shadow); background: #fff;
    }
    .search-card { padding: clamp(20px, 2.5vw, 28px); }
    .field { gap: 8px; }
    .field-label {
      color: var(--ink-soft); font-size: 13px; font-weight: 600;
      letter-spacing: 0; text-transform: none;
    }
    .field-help { font-size: 12px; line-height: 1.5; }
    textarea, input, select {
      background: #fff; border-color: var(--line-dark); border-radius: 7px;
    }
    textarea { min-height: 156px; padding: 13px 14px; font-size: 14px; line-height: 1.6; }
    input, select { height: 44px; padding: 0 11px; font-size: 13px; }
    .controls { gap: 11px; margin-top: 18px; }
    .field.compact { gap: 7px; }
    .field.compact label { font-size: 12px; }
    .primary-button {
      min-height: 44px; border-radius: 7px; padding: 0 15px;
      font-size: 13px; font-weight: 600;
    }
    .privacy-note { margin-top: 14px; font-size: 12px; }

    .scope-card { padding: 22px; }
    .scope-card::after { display: none; }
    .scope-label {
      margin: 0 0 8px; color: var(--muted); font-size: 11px;
      font-weight: 600; letter-spacing: .02em; text-transform: none;
    }
    .scope-card h2 {
      margin: 0 0 8px; color: var(--ink); font: 600 18px/1.35 var(--sans);
      letter-spacing: 0;
    }
    .scope-card > p { font-size: 13px; line-height: 1.5; }
    .scope-stats { gap: 16px 12px; padding-top: 18px; margin-top: 18px; }
    .scope-stat dt {
      color: var(--muted); font-size: 11px; font-weight: 500;
      letter-spacing: .01em; text-transform: none;
    }
    .scope-stat dd { margin-top: 3px; color: var(--ink); font: 600 20px/1.25 var(--sans); }
    .scope-foot { margin-top: 16px; font-size: 12px; line-height: 1.5; }

    .results { margin-top: 38px; }
    .results-head { padding-bottom: 14px; margin-bottom: 16px; }
    .result-kicker {
      margin-bottom: 5px; color: var(--muted); font-size: 11px;
      font-weight: 600; letter-spacing: .02em; text-transform: none;
    }
    .results-head h2 { font: 600 22px/1.3 var(--sans); letter-spacing: 0; }
    .method-tag {
      padding: 6px 9px; border-radius: 6px; font: 12px var(--sans);
      text-transform: none;
    }
    .notice { border-radius: 0 7px 7px 0; font-size: 13px; }
    .recommendations { gap: 12px; }
    .device-card {
      padding: 18px; border: 1px solid var(--line); border-radius: 9px;
      box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    }
    .device-card:first-child { border-top: 1px solid var(--line); border-left: 3px solid var(--teal); }
    .device-card h3 { font: 600 17px/1.4 var(--sans); letter-spacing: 0; }
    .count-chip { border-radius: 5px; font-size: 11px; }
    .device-status { font-size: 11px; font-weight: 600; }
    .evidence { border-radius: 0 6px 6px 0; font: 14px/1.6 var(--sans); }
    .evidence-meta { font: 12px/1.5 var(--sans); }
    .device-reason { font-size: 12px; line-height: 1.5; }
    .decision-section, .authority-section { margin-top: 30px; }
    .section-title { font: 600 18px/1.35 var(--sans); letter-spacing: 0; }
    .section-caption { font-size: 13px; }
    details.decision { border-radius: 7px; background: #fff; }
    details.decision summary { padding: 12px 14px; font-size: 13px; }
    .decision-body { padding: 0 14px 14px; }
    .decision-body p { font: 14px/1.6 var(--sans); }
    .decision-body small { font: 12px/1.5 var(--sans); }
    .authority-pill { border-radius: 5px; font: 12px var(--sans); }
    footer { max-width: 1160px; padding: 18px clamp(20px, 5vw, 64px) 28px; font-size: 12px; }
    .error { border-radius: 7px; }

    @media (max-width: 820px) {
      .workspace { grid-template-columns: 1fr; }
      .scope-card { order: 2; }
      .page-summary { align-items: flex-start; }
    }
    @media (max-width: 560px) {
      main { padding-top: 24px; }
      .page-summary { flex-direction: column; gap: 10px; }
      .page-summary h1 { font-size: 22px; }
      .corpus-count { gap: 6px; }
      .topbar { padding-inline: 18px; }
      .top-meta { max-width: 145px; font-size: 11px; }
      .controls { grid-template-columns: 1fr; }
      .primary-button { grid-column: auto; }
      .recommendations { grid-template-columns: 1fr; }
      .device-card:first-child { grid-column: auto; }
      .results-head { align-items: flex-start; flex-direction: column; }
      footer { padding-inline: 18px; }
    }

    .mode-field { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
    .mode-field select { max-width: 360px; }
    .review-link { display: inline-block; margin-top: 5px; color: var(--teal-dark); font-size: 12px; }
    .result-scope { margin: -8px 0 18px; font-size: 12px; color: var(--muted); }
    .decision-body .limitation { margin: 12px 0; padding: 10px; background: var(--amber-pale); font-size: 12px; }
    /* Resultados: posição, trecho de comparação e fonte no primeiro nível. */
    .results { scroll-margin-top: 24px; }
    .results-head { border-bottom: 0; margin-bottom: 12px; padding-bottom: 0; align-items: center; }
    .result-overview { margin: 18px 0 24px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
    .result-overview-label { color: var(--muted); font-size: 12px; font-weight: 600; }
    .result-overview p { margin: 7px 0 0; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
    .ranking-caption { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
    .decision-list { gap: 16px; }
    .ranked-decision { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 22px; }
    .ranked-decision--first { border-color: #92c3bd; box-shadow: inset 3px 0 0 var(--teal); }
    .ranked-header { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 15px; align-items: start; }
    .rank-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; background: #f1f4f6; color: var(--ink-soft); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
    .ranked-decision--first .rank-badge { color: var(--teal-dark); background: var(--teal-pale); }
    .ranked-classification { margin: 5px 0 6px; color: var(--ink); font-size: 16px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
    .ranked-process { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
    .rank-first-label { display: inline-block; color: var(--teal-dark); font-size: 11px; font-weight: 600; margin-bottom: 2px; }
    .match-panel { margin: 18px 0 0 61px; padding: 15px 17px; border: 1px solid #e0e9e8; border-left: 3px solid #8bb9b4; border-radius: 0 7px 7px 0; background: #fafcfb; }
    .match-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 9px; font-size: 12px; font-weight: 600; color: var(--teal-dark); }
    .match-count { font-size: 11px; font-weight: 400; color: var(--muted); }
    .match-quote { margin: 0; white-space: pre-wrap; color: var(--ink); font: 15px/1.8 var(--sans); overflow-wrap: anywhere; }
    mark.query-match { background: #fff0b8; color: #29333d; border-radius: 2px; padding: 1px 0; }
    .matched-terms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
    .matched-term { border: 1px solid #dce5e3; background: #fff; color: var(--ink-soft); border-radius: 5px; padding: 2px 7px; font-size: 11px; }
    .match-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
    .decision-disclosure { margin: 14px 0 0 61px; border-top: 1px solid var(--line); }
    .decision-disclosure > summary { padding: 12px 0 0; font-size: 12px; color: var(--teal-dark); font-weight: 600; cursor: pointer; }
    .full-ementa { margin: 14px 0; font: 14px/1.8 var(--sans); color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
    .rank-score-info { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 13px 15px; background: #f6f8f9; border-radius: 7px; }
    .rank-score-info dt { font-size: 11px; color: var(--muted); }
    .rank-score-info dd { margin: 4px 0 0; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
    .rank-score-note, .source-limit { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
    .devices-section { margin-top: 28px; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 0 18px; }
    .devices-section > summary { padding: 16px 0; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-soft); }
    .devices-section .recommendations { margin-bottom: 18px; }
    .devices-section .device-card { box-shadow: none; }
    #policy-notice { margin: 0 0 16px; }
    @media (max-width: 560px) {
      .ranked-decision { padding: 16px; }
      .ranked-header { grid-template-columns: 36px minmax(0,1fr); gap: 11px; }
      .rank-badge { width: 34px; height: 34px; font-size: 17px; }
      .ranked-classification { font-size: 15px; margin-top: 2px; }
      .match-panel { margin-left: 0; padding: 12px; }
      .decision-disclosure { margin-left: 0; }
      .rank-score-info { grid-template-columns: 1fr 1fr; }
    }