/* RootsFree site styles. Values come from tokens.css (design/DESIGN.md). Components are design/mockups/mock.css,
   carried over unchanged, then the production additions at the end (empty state, forms, prose, print). */

/* ---------- self-hosted fonts (OFL, latin subset; see static/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("/static/fonts/newsreader-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Recursive"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/static/fonts/recursive-latin-var.woff2") format("woff2");
}
/* metric-matched fallbacks so the swap does not move layout (measured with fontTools against Georgia and Arial) */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); font-display: swap; size-adjust: 96.1%; ascent-override: 76.5%; descent-override: 27.6%; line-gap-override: 0%; }
@font-face { font-family: "Recursive Fallback"; src: local("Arial"); font-display: swap; size-adjust: 111.1%; ascent-override: 85.5%; descent-override: 22.5%; line-gap-override: 0%; }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: var(--wght-text) var(--fs-body)/var(--lh-body) var(--font-text);
  font-variation-settings: var(--mono-off);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--accent);
    text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--wght-display); margin: 0;
             letter-spacing: var(--track-head); line-height: var(--lh-head); font-optical-sizing: auto; }
p { margin: 0; }
.num, time, .mono { font-family: var(--font-mono); font-variation-settings: var(--mono-on);
                    font-variant-numeric: tabular-nums; letter-spacing: 0; }
.skip { position: absolute; left: -9999px; display: inline-flex; align-items: center; min-height: 44px; }
.skip:focus { left: var(--s-4); top: var(--s-3); background: var(--paper-3); padding: var(--s-2) var(--s-3); z-index: 10; }
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.hdr { background: var(--paper-3); border-bottom: var(--border); }
.hdr .wrap { height: var(--header-h); display: flex; align-items: center; gap: var(--s-7); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none;
         font: 600 1.375rem/1 var(--font-display); letter-spacing: -0.01em; }
.brand svg { width: 22px; height: 22px; color: var(--accent); }
.nav { display: flex; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.nav a { text-decoration: none; font-size: var(--fs-ui); color: var(--ink-muted); padding: var(--s-2) 0;
         border-bottom: 2px solid transparent; transition: color var(--dur-1), border-color var(--dur-1); }
.nav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.hdr-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
       min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-2); border: var(--border-strong);
       background: var(--paper-3); color: var(--ink); font: var(--wght-strong) var(--fs-ui)/1 var(--font-text);
       text-decoration: none; cursor: pointer; white-space: nowrap;
       transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.btn:hover { border-color: var(--ink-muted); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-press); border-color: var(--accent-press); }
.btn-lg { min-height: 52px; padding: 0 var(--s-6); font-size: 1rem; }
.btn-sm { min-height: 36px; padding: 0 var(--s-4); }
.link-quiet { color: var(--ink-muted); font-size: var(--fs-ui); }

/* ---------- grade chip ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px;
        border-radius: var(--r-1); font: 600 var(--fs-micro)/1 var(--font-mono);
        font-variation-settings: var(--mono-on); letter-spacing: var(--track-chip); white-space: nowrap;
        color: var(--g); border: var(--bw) solid color-mix(in srgb, var(--g) 35%, transparent);
        background: color-mix(in srgb, var(--g) var(--grade-wash), var(--paper-3)); }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 1px; border: 1.5px solid currentColor; }
.g-proven { --g: var(--grade-proven); }
.g-proven::before { background: currentColor; }
.g-likely { --g: var(--grade-likely); }
.g-likely::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.g-guess { --g: var(--grade-guess); }
.g-unsourced { --g: var(--grade-unsourced); background: transparent; border-style: dashed; }
.g-unsourced::before { border-style: dotted; }

/* ---------- home: hero ---------- */
.hero { padding: var(--s-9) 0 var(--s-9); border-bottom: var(--border); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display);
           font-weight: var(--wght-display); max-width: 11ch; }
.hero .lead { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--ink-muted); max-width: 30ch; line-height: 1.45; }
.hero .cta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.hero .facts { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
               font-size: var(--fs-small); color: var(--ink-muted); padding: 0; list-style: none; }
.hero .facts li { display: flex; gap: var(--s-2); align-items: baseline; }
.hero .facts .num { color: var(--ink); }
.hero-art { margin: 0; }
.hero-art figcaption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-muted); }

/* the drawn pedigree (home hero, SVG) */
.ped-svg { width: 100%; height: auto; overflow: visible; }
.ped-svg .ln { fill: none; stroke: var(--line-strong); stroke-width: 1.25; }
.ped-svg .nd rect { fill: var(--paper-3); stroke: var(--line-strong); stroke-width: 1; }
.ped-svg .nd.unsrc rect { stroke-dasharray: 3 3; fill: transparent; }
.ped-svg .nm { font: 600 15px var(--font-text); fill: var(--ink); }
.ped-svg .yr { font: 400 12.5px var(--font-mono); font-variation-settings: var(--mono-on); fill: var(--ink-muted); }
.ped-svg .dot { fill: var(--ink-muted); stroke: var(--ink-muted); }
.ped-svg .dot.unsrc { stroke: var(--grade-unsourced); stroke-dasharray: 2 2; fill: var(--paper); }

/* ---------- section scaffolding ---------- */
.sec { padding: var(--s-9) 0; border-bottom: var(--border); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: end; margin-bottom: var(--s-7); }
.sec-head h2 { font-size: var(--fs-h1); max-width: 16ch; }
.sec-head p { color: var(--ink-muted); max-width: 46ch; }

/* quotes: what people hate */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--border-strong); }
.quote { padding: var(--s-6) var(--s-6) 0 0; }
.quote + .quote { padding-left: var(--s-6); border-left: var(--border); }
.quote .tag { font: 600 var(--fs-micro)/1 var(--font-mono); font-variation-settings: var(--mono-on);
              letter-spacing: var(--track-chip); color: var(--ink-muted); text-transform: uppercase; }
.quote blockquote { margin: var(--s-4) 0 0; font: 400 1.625rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
.quote .src { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-faint); }
.quote .ours { margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--border); font-size: var(--fs-body); }
.quote .ours strong { font-weight: var(--wght-strong); }

/* ---------- promise block ---------- */
.promise { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); }
.promise h2 { font-size: var(--fs-h1); max-width: 12ch; }
.promise ol { list-style: none; margin: 0; padding: 0; border-top: var(--border-strong); counter-reset: p; }
.promise li { counter-increment: p; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4);
              padding: var(--s-5) 0; border-bottom: var(--border); }
.promise li::before { content: counter(p, decimal-leading-zero); font: 400 var(--fs-small)/1.9 var(--font-mono);
                      font-variation-settings: var(--mono-on); color: var(--ink-faint); }
.promise li b { display: block; font: var(--wght-display) var(--fs-h3)/1.3 var(--font-display); }
.promise li span { color: var(--ink-muted); font-size: var(--fs-ui); }

/* ---------- support block ---------- */
.support { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center;
           padding: var(--s-7); border: var(--border); border-radius: var(--r-3); background: var(--paper-3); }
.support h2 { font-size: var(--fs-h2); }
.support p { margin-top: var(--s-3); color: var(--ink-muted); max-width: 52ch; }

/* ---------- footer ---------- */
.ftr { padding: var(--s-8) 0 var(--s-7); font-size: var(--fs-small); color: var(--ink-muted); }
.ftr .wrap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.ftr h3 { font: 600 var(--fs-micro)/1 var(--font-mono); font-variation-settings: var(--mono-on); letter-spacing: var(--track-chip);
          text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-4); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.ftr .brand { font-size: 1.125rem; color: var(--ink); }
.ftr .fine { margin-top: var(--s-4); max-width: 36ch; }

/* ---------- content page (guide) ---------- */
.crumbs { font-size: var(--fs-small); color: var(--ink-muted); padding-top: var(--s-6); }
.crumbs a { text-decoration: none; }
.crumbs span { margin: 0 var(--s-2); color: var(--ink-faint); }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-8); padding-top: var(--s-5); padding-bottom: var(--s-9); }
.sec > .doc { padding-top: 0; padding-bottom: 0; }
.doc > .box { align-self: start; }
.doc + .sec { padding-top: 0; }
.doc h1 { font-size: var(--fs-h1); max-width: 20ch; }
.doc .meta { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.answer { margin-top: var(--s-6); padding: var(--s-5) var(--s-6); border: var(--border); border-left: 3px solid var(--accent);
          border-radius: 0 var(--r-3) var(--r-3) 0; background: var(--paper-3); max-width: var(--measure); }
.answer p { font-size: var(--fs-lead); line-height: 1.45; }
.answer p + p { margin-top: var(--s-3); font-size: var(--fs-body); color: var(--ink-muted); }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--fs-h2); margin: var(--s-8) 0 var(--s-4); }
.prose p { margin-top: var(--s-4); }
.steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-top: var(--border); }
.steps li::before { content: counter(s); font: 600 var(--fs-small)/1.9 var(--font-mono); font-variation-settings: var(--mono-on); color: var(--ink-muted); }
.facts-table { width: 100%; border-collapse: collapse; margin-top: var(--s-5); font-size: var(--fs-ui); }
.facts-table th, .facts-table td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--border); vertical-align: top; }
.facts-table th { font-weight: var(--wght-strong); width: 38%; }
.out { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: var(--border); }
.out li { border-bottom: var(--border); }
.out a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); padding: var(--s-4) 0; text-decoration: none; }
.out a:hover b { text-decoration: underline; text-decoration-color: var(--accent); }
.out b { font-weight: var(--wght-strong); }
.out span { display: block; color: var(--ink-muted); font-size: var(--fs-small); }
.out i { font-style: normal; font-size: var(--fs-micro); color: var(--ink-faint); align-self: center; }
.aside { align-self: start; position: sticky; top: var(--s-5); display: grid; gap: var(--s-5); }
.box { border: var(--border); border-radius: var(--r-3); padding: var(--s-5); background: var(--paper-3); }
.box h2 { font-size: var(--fs-h3); }
.box p { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-muted); }
.box .btn { margin-top: var(--s-4); width: 100%; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.related a { display: block; padding: var(--s-5); border: var(--border); border-radius: var(--r-3); text-decoration: none;
             background: var(--paper-3); transition: border-color var(--dur-1); }
.related a:hover { border-color: var(--ink-muted); }
.related b { display: block; font: var(--wght-display) var(--fs-h3)/1.25 var(--font-display); }
.related span { display: block; margin-top: var(--s-2); font-size: var(--fs-small); color: var(--ink-muted); }

/* search box + result row */
.search { display: flex; border: var(--border-strong); border-radius: var(--r-2); background: var(--paper-3); overflow: hidden; }
.search:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--s-4); height: 44px;
                font: var(--fs-ui) var(--font-text); color: var(--ink); outline: none; }
.search input::placeholder { color: var(--ink-faint); }
.search button { border: 0; border-left: var(--border); background: transparent; padding: 0 var(--s-4); cursor: pointer; color: var(--ink-muted); }
.search button:hover { color: var(--ink); }
.result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); padding: var(--s-4) 0; border-bottom: var(--border); }
.result b { font-weight: var(--wght-strong); }
.result .where { grid-column: 1; font-size: var(--fs-small); color: var(--ink-muted); }
.result .act { grid-row: 1 / span 2; grid-column: 2; align-self: center; }

/* ---------- support page ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.way { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border: var(--border); border-radius: var(--r-3); background: var(--paper-3); }
.way h3 { font-size: var(--fs-h3); }
.way p { color: var(--ink-muted); font-size: var(--fs-ui); }
.way .fee { font-size: var(--fs-small); color: var(--ink-muted); margin-top: auto; padding-top: var(--s-4); border-top: var(--border); }
.way .btn { align-self: flex-start; }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.ledger td, .ledger th { padding: var(--s-4) 0; border-bottom: var(--border); text-align: left; }
.ledger td:last-child, .ledger th:last-child { text-align: right; white-space: nowrap; padding-left: var(--s-4); }
.ledger tfoot td { border-bottom: 0; border-top: var(--border-strong); font-weight: var(--wght-strong); }
.page-head { padding-top: var(--s-9); padding-bottom: var(--s-8); border-bottom: var(--border); }
.page-head h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); max-width: 14ch; }
.page-head p { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--ink-muted); max-width: 44ch; line-height: 1.45; }

/* ---------- tree app ---------- */
.wrap-app { padding: 0 var(--s-5); }
.hdr-app .wrap { max-width: none; padding: 0 var(--s-5); }
.app-bar { border-bottom: var(--border); }
.app-bar .wrap-app { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); padding-top: var(--s-4); padding-bottom: var(--s-4); }
.app-title h1 { font-size: var(--fs-h3); letter-spacing: -0.005em; }
.app-title p { font-size: var(--fs-small); color: var(--ink-muted); }
.seg { display: inline-flex; border: var(--border-strong); border-radius: var(--r-2); overflow: hidden; background: var(--paper-3); }
.seg a { display: flex; align-items: center; height: 34px; padding: 0 var(--s-4); font-size: var(--fs-small); color: var(--ink-muted); text-decoration: none; }
.seg a + a { border-left: var(--border); }
.seg a:hover { color: var(--ink); }
.seg a[aria-current="page"] { color: var(--ink); background: var(--paper-2); font-weight: var(--wght-strong); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 0 auto; padding: 0; list-style: none; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
.chart { overflow: auto; padding: var(--s-6) var(--s-5) var(--s-7); }
.chart-note { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--ink-muted); }
.panel { border-left: var(--border); background: var(--paper-3); min-height: 100%; }
.pp-head { padding: var(--s-5); border-bottom: var(--border); }
.pp-kicker { font-size: var(--fs-micro); color: var(--ink-faint); letter-spacing: var(--track-chip); text-transform: uppercase; }
.pp-head h2 { margin-top: var(--s-2); font-size: 1.75rem; }
.pp-dates { margin-top: var(--s-1); color: var(--ink-muted); font-size: var(--fs-ui); }
.pp-stats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.pp-actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.pp-sec { padding: var(--s-5); border-bottom: var(--border); }
.pp-sec h3 { font: 600 var(--fs-micro)/1 var(--font-mono); font-variation-settings: var(--mono-on); letter-spacing: var(--track-chip);
             text-transform: uppercase; color: var(--ink-muted); display: flex; justify-content: space-between; margin-bottom: var(--s-2); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: 10px 0; border-top: var(--border); }
.rows li:first-child { border-top: 0; }
.rows time { font-size: var(--fs-small); color: var(--ink-muted); }
.rows b { display: block; font-size: var(--fs-ui); font-weight: var(--wght-strong); line-height: var(--lh-ui); }
.rows span.sub { display: block; font-size: var(--fs-small); color: var(--ink-muted); line-height: var(--lh-ui); }
.rows .mono.sub { font-size: var(--fs-micro); }
.rows.src li { grid-template-columns: minmax(0, 1fr) auto; }
.rows .tag-hint { font-size: var(--fs-micro); color: var(--ink); text-decoration-color: var(--accent); }
.rows li.is-hint { background: var(--accent-wash); margin: 0 calc(-1 * var(--s-5)); padding-left: var(--s-5); padding-right: var(--s-5); }
.hint { background: var(--paper); }
.hint .why { font-size: var(--fs-small); color: var(--ink-muted); }
.hint-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); }
.ph { margin: 0; }
.ph .img { aspect-ratio: 3 / 4; border: var(--border); border-radius: var(--r-2);
           background: var(--paper-2); display: grid; place-items: center; color: var(--ink-faint); }
.ph .img svg { width: 28px; height: 28px; }
.ph figcaption { margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--ink-muted); line-height: 1.35; }
.tx { margin: 0; display: grid; gap: 0; border-top: var(--border); }
.tx div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-2); padding: 6px 0; border-bottom: var(--border); font-size: var(--fs-small); }
.tx dt { color: var(--ink-muted); }
.tx dd { margin: 0; }
.hint-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }

/* ---------- signature: the pedigree that breathes ---------- */
.ped { position: relative; flex: none; }
.ped-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.ped-lines path, .ped-svg .ln {
  fill: none; stroke: var(--line-strong); stroke-width: 1.25; stroke-dasharray: 1;
  animation: rf-draw var(--dur-3) var(--ease-out) backwards;
  animation-delay: calc(var(--g) * var(--stagger) + 240ms);
  transition: opacity var(--dur-2), stroke var(--dur-2);
}
.pc {
  position: absolute; width: 160px; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--paper-3); border: var(--border-strong); border-radius: var(--r-2);
  animation: rf-rise var(--dur-4) var(--ease-out) backwards;
  animation-delay: calc((var(--g) - 1) * 120ms);
  transition: opacity var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.pc b { font: 600 var(--fs-small)/1.2 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .num { font-size: var(--fs-micro); line-height: 1.2; color: var(--ink-muted); }
.pc .pl { font-size: var(--fs-micro); line-height: 1.2; color: var(--ink-muted); }
.pc[data-g="5"] { padding: 3px 10px; gap: 1px; }
.pc[data-g="5"] b { font-size: 13px; }
.pc:hover { border-color: var(--ink-muted); }
.pc.unsrc { border-style: dashed; background: var(--paper); }
.pc.is-sel { border-color: var(--accent); border-left-width: 3px; padding-left: 10px; }
.ped-svg .nd { animation: rf-rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc((var(--g) - 1) * 120ms);
               transition: opacity var(--dur-2); cursor: default; }
.ped-svg .nd rect, .ped-svg .dot { transition: stroke var(--dur-2), fill var(--dur-2); }
/* trace: the hovered or focused person's line back to the root */
.is-tracing .pc, .is-tracing .ped-lines path, .is-tracing .nd, .is-tracing .ln { opacity: .45; }
.is-tracing .is-line { opacity: 1; }
.is-tracing .pc.is-line { border-color: var(--accent); background: var(--accent-wash); }
.is-tracing .nd.is-line rect { stroke: var(--accent); fill: var(--accent-wash); }
.is-tracing .nd.is-line .dot { stroke: var(--accent); fill: var(--accent); }
.is-tracing path.is-line { stroke: var(--accent); stroke-width: 2;
  animation: rf-trace var(--dur-3) var(--ease-out) backwards; animation-delay: calc((var(--g) - 2) * 60ms); }
.is-ready path { animation: none; }
.is-ready.is-tracing path.is-line { animation: rf-trace var(--dur-3) var(--ease-out) backwards; animation-delay: calc((var(--g) - 2) * 60ms); }
@keyframes rf-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- motion: deal-in for content (one stagger, no blur) ---------- */
@keyframes rf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap, .sec-head, .promise, .doc { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .quote, .quote + .quote { padding: var(--s-5) 0 var(--s-6); border-left: 0; }
  .quote + .quote { border-top: var(--border); }
  .ways, .related { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
  .ftr .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr .wrap > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .panel { border-left: 0; border-top: var(--border); }
  .legend { margin-left: 0; }
}
@media (max-width: 720px) {
  .hdr-app .wrap { padding-left: var(--s-4); padding-right: var(--s-4); }
  .hdr-app .hdr-end { gap: var(--s-1); margin-left: auto; }
  .hdr-app .hdr-end .btn-sm { width: var(--s-7); min-height: var(--s-7); padding: 0; }
  .hdr-app .lbl { position: absolute; width: var(--bw); height: var(--bw); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-bar .wrap-app { gap: var(--s-3); }
  .seg { width: 100%; }
  .seg a { flex: 1; justify-content: center; padding: 0 var(--s-2); }
  .chart { padding: var(--s-5) var(--s-4); }
  .pp-head, .pp-sec { padding: var(--s-5) var(--s-4); }
  .rows li.is-hint { margin: 0 calc(-1 * var(--s-4)); padding-left: var(--s-4); padding-right: var(--s-4); }
  .hint-row { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-3); }
  .tx div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hdr .wrap { height: auto; min-height: var(--header-h); flex-wrap: wrap; gap: 0 var(--s-4); padding-top: var(--s-2); }
  .hdr .brand, .hdr-end { min-height: 48px; }
  .brand, .ftr a, .crumbs a, .link-quiet { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr ul { gap: 0; }
  .hdr .wrap > nav { order: 3; width: 100%; overflow-x: auto; }
  .nav { gap: var(--s-5); }
  .nav a { display: inline-block; padding: var(--s-2) 0 10px; }
  .hero { padding: var(--s-7) 0 var(--s-8); }
  .hero .cta .btn { width: 100%; }
  .sec { padding: var(--s-8) 0; }
  .support { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
  .support .btn { width: 100%; }
  .page-head { padding-top: var(--s-7); padding-bottom: var(--s-6); }
  .answer { padding: var(--s-4) var(--s-5); }
  .result { grid-template-columns: minmax(0, 1fr); }
  .result .act { grid-row: auto; grid-column: 1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.m-only { display: none; }
@media (max-width: 960px) { .m-only { display: inline; } }

/* ==================== production additions (P1) ==================== */

/* hide the hero dot animation until the trace script is present; script lives in /static/js/trace.js */
[hidden] { display: none !important; }

/* tree app: empty state (Import, Start a tree, Open sample) */
/* grades mean nothing before there is a person to grade */
#tree-root:has(#empty:not([hidden])) .legend { display: none; }
.empty { max-width: 880px; margin: 0 auto; padding: var(--s-9) var(--s-5) var(--s-9); }
.empty h2 { font-size: var(--fs-h1); max-width: 18ch; }
.empty > p { margin-top: var(--s-4); color: var(--ink-muted); max-width: 52ch; }
.empty-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); padding: 0; list-style: none; }
.empty-acts li { border: var(--border); border-radius: var(--r-3); background: var(--paper-3); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.empty-acts h3 { font-size: var(--fs-h3); }
.empty-acts p { font-size: var(--fs-small); color: var(--ink-muted); flex: 1; }
.empty-acts .btn { margin-top: var(--s-3); width: 100%; }
.empty .fine { margin-top: var(--s-6); font-size: var(--fs-small); color: var(--ink-faint); }
.app-status { min-height: 1.35em; font-size: var(--fs-small); color: var(--ink-muted); }
.drop.is-over { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
button.btn { font: inherit; }

/* forms (research intake) */
.form { display: grid; gap: var(--s-5); max-width: var(--measure); margin-top: var(--s-6); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-ui); font-weight: var(--wght-strong); }
.field .hint-text { font-size: var(--fs-small); color: var(--ink-muted); }
.field input, .field textarea {
  font: inherit; font-size: var(--fs-ui); color: var(--ink); background: var(--paper-3);
  border: var(--border-strong); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); min-height: 44px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.form-note { font-size: var(--fs-small); color: var(--ink-muted); }
.form-status { font-size: var(--fs-ui); min-height: 1.35em; }

/* plain content pages (promise, about, privacy, guides index, 404) */
.page-head h1 { font-size: var(--fs-h1); max-width: 22ch; }
.page-head p { margin-top: var(--s-4); color: var(--ink-muted); max-width: 60ch; font-size: var(--fs-lead); line-height: var(--lh-body); }
.prose ul, .prose ol { margin: var(--s-4) 0 0; padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.doc-solo { padding-top: var(--s-7); padding-bottom: var(--s-9); }

/* ---------- print: tree reports ---------- */
@media print {
  :root { --paper: #fff; --paper-2: #fff; --paper-3: #fff; --ink: #000; --ink-muted: #333; --ink-faint: #444; --line: #999; --line-strong: #666; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body { font-size: 11pt; background: #fff; }
  .hdr, .ftr, .skip, .app-bar .seg, .hdr-end, .empty-acts .btn, .pp-actions, .chart-note, .no-print { display: none !important; }
  .app { display: block; }
  .panel { border: 0; }
  .chart { overflow: visible; padding: 0; }
  .pc, .box, .chip { break-inside: avoid; }
  a { text-decoration: none; }
  @page { margin: 14mm; }
}
@media (max-width: 720px) {
  .empty { padding: var(--s-7) var(--s-4) var(--s-8); }
  .empty-acts { grid-template-columns: minmax(0, 1fr); }
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--line-strong); }

/* ---------- P2: chart stage, editor, dialogs, import bar ---------- */
.chart { overflow: hidden; position: relative; }
.ped-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.ped-stage { position: relative; overflow: hidden; touch-action: none; height: min(760px, 75vh); border: var(--border); border-radius: var(--r-2); background: var(--paper); cursor: grab; }
.ped-stage:active { cursor: grabbing; }
.ped-move { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.pc.add { border-style: dashed; background: transparent; color: var(--ink-muted); }
.pc.add b { font-weight: 500; }
.pc.add:hover, .pc.add:focus-visible { color: var(--ink); border-color: var(--accent); }
.ped-lines path.ln-add { stroke-dasharray: 4 4; opacity: .6; animation: none; }
.link-btn { font: inherit; font-size: var(--fs-ui); padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { text-decoration-color: var(--accent); }
.danger { color: var(--grade-guess); }
.pp-actions { flex-wrap: wrap; }
.pp-quiet { gap: var(--s-4); align-items: center; }
.living { color: var(--ink); background: var(--accent-wash); padding: 0 4px; border-radius: var(--r-1); }
.pp-note { white-space: normal; font-size: var(--fs-ui); line-height: var(--lh-body); }
.rows.fam li { grid-template-columns: minmax(0, 1fr); gap: 2px; justify-items: start; text-align: left; }
.media-strip { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); }
.ph { margin: 0; flex: none; width: 112px; }
.ph .img { width: 112px; height: 112px; border: var(--border); border-radius: var(--r-1); background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph figcaption { margin-top: var(--s-1); font-size: var(--fs-micro); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-none { font-size: var(--fs-micro); color: var(--ink-faint); }

.btn-hist { min-width: 0; }
.imp-bar { border-top: var(--border); background: var(--paper-2); }
.imp-bar .wrap-app { display: flex; align-items: center; gap: var(--s-4); padding-top: var(--s-2); padding-bottom: var(--s-2); }
.imp-bar progress { flex: 1 1 auto; max-width: 420px; height: 8px; accent-color: var(--accent); }
.imp-bar span { font-size: var(--fs-small); color: var(--ink-muted); }

dialog.dlg, dialog.ed { border: var(--border-strong); border-radius: var(--r-3); background: var(--paper-3); color: var(--ink); padding: 0; max-width: min(640px, calc(100vw - 24px)); width: 100%; max-height: calc(100vh - 24px); }
dialog.ed { max-width: min(760px, calc(100vw - 24px)); }
dialog::backdrop { background: rgb(20 18 14 / .45); }
.dlg-form, .ed-form { padding: var(--s-6); display: grid; gap: var(--s-4); }
.dlg-form h2, .ed-top h2 { font-size: var(--fs-h3); }
.dlg-form p { color: var(--ink-muted); font-size: var(--fs-ui); line-height: var(--lh-body); }
.dlg-warn { color: var(--ink) !important; background: var(--accent-wash); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); }
.dlg-acts, .ed-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.dlg-choices { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.dlg-choices legend, .ed-evs legend { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: var(--track-chip); text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-2); padding: 0; }
.dlg-choices label, .dlg-check { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border: var(--border); border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-ui); }
.dlg-choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.dlg-choices .sub, .dlg-check .sub { display: block; color: var(--ink-muted); font-size: var(--fs-small); }
.dlg-choices input, .dlg-check input { margin-top: 3px; accent-color: var(--accent); }

.ed-top .sub { margin-top: var(--s-1); color: var(--ink-muted); font-size: var(--fs-small); }
.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.ed-form label { display: grid; gap: var(--s-1); font-size: var(--fs-small); color: var(--ink-muted); }
.ed-form input, .ed-form select, .ed-form textarea { font: inherit; font-size: var(--fs-ui); color: var(--ink); background: var(--paper); border: var(--border-strong); border-radius: var(--r-1); padding: 7px 10px; min-width: 0; width: 100%; }
.ed-form textarea { resize: vertical; }
.ed-evs { border: 0; margin: 0; padding: 0; }
.ed-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-3); }
.ed-ev { display: grid; grid-template-columns: 150px 1.2fr 1.4fr 1fr auto; gap: var(--s-2); align-items: start; padding-top: var(--s-3); border-top: var(--border); }
.ed-ev .link-btn { margin-top: 28px; font-size: var(--fs-small); }
.ed-read { font-size: var(--fs-micro); color: var(--ink-faint); min-height: 1.2em; }
.ed-err { color: var(--grade-guess); font-size: var(--fs-small); min-height: 1.2em; }
.ed-err:empty { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .panel { border-left: 0; border-top: var(--border); }
  .ped-stage { height: 60vh; }
}
@media (max-width: 720px) {
  .hdr-end { gap: var(--s-1); }
  .hdr-end .btn-sm { padding-left: 8px; padding-right: 8px; }
  .chart { padding: var(--s-4) var(--s-3) var(--s-5); }
  .ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-ev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ed-ev .link-btn { margin-top: 0; justify-self: start; }
  .dlg-form, .ed-form { padding: var(--s-5) var(--s-4); }
}
.pc .num, .pc .pl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-btn { text-align: left; }

/* ---- P3: views over the tree (charts, places, map, timeline, relationship, checks, reports) ---- */
.main-col { min-width: 0; display: flex; flex-direction: column; }
.views { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-2) var(--s-4); border-bottom: var(--border); background: var(--paper-2); scrollbar-width: thin; }
.views button { flex: none; font: 500 var(--fs-small)/1 var(--font-ui, inherit); color: var(--ink-muted); background: transparent; border: 1px solid transparent; border-radius: var(--r-1); padding: 7px 10px; cursor: pointer; }
.views button:hover { color: var(--ink); }
.views button[aria-pressed="true"] { color: var(--ink); background: var(--paper); border-color: var(--accent); }
.vw { padding: var(--s-4); min-width: 0; }
.vw-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.vw-head h2 { font-size: var(--fs-h3); }
.vw-head .sub, .vw .sub { color: var(--ink-muted); font-size: var(--fs-small); display: block; }
.vw h3 { font-size: var(--fs-ui); margin: var(--s-4) 0 var(--s-2); }
.vw-opts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: var(--s-3); }
.vw-opts label { display: inline-flex; gap: var(--s-2); align-items: center; }
.vw-opts select, .vw-opts input[type="search"], .vw-opts input[name="reason"] { font: inherit; color: var(--ink); background: var(--paper); border: var(--border-strong); border-radius: var(--r-1); padding: 5px 8px; min-width: 0; max-width: 100%; }
.vw-opts input[type="range"] { accent-color: var(--accent); width: min(320px, 60vw); }
.vw .rows { list-style: none; margin: 0; padding: 0; display: grid; }
.vw .rows li { padding: var(--s-2) 0; border-top: var(--border); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); }
.vw .rows li > div:only-child, .vw .rows li > span:only-child { grid-column: 1 / -1; }
.vw .rows time { font-variant-numeric: tabular-nums; color: var(--ink-muted); min-width: 3.5em; }
.kin-out { font-size: var(--fs-h3); margin: var(--s-3) 0; }
.kin-path { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); padding-left: 1.2em; }
.map-box { height: 60vh; min-height: 280px; border: var(--border); border-radius: var(--r-2); }
#vw-charts .rfc-stage { height: clamp(360px, calc(100vh - 372px), 760px); }
/* Topola: the madder line from a hovered ancestor to the root */
/* cards are paper, not Topola's per-generation tints: the only color is the madder line */
.rfc-svg g.indi rect.background { fill: var(--paper-3) !important; stroke: var(--line-strong); stroke-width: 1px; }
.rfc-stage.is-tracing g.indi[data-n]:not(.is-line) { opacity: .35; }
.rfc-stage.is-tracing g.indi.is-line rect.background { fill: var(--accent-wash) !important; }
.rfc-stage.is-tracing g.indi.is-line rect { stroke: var(--accent); stroke-width: 2.5px; }
.rfc-stage g.indi.is-sel rect { stroke: var(--accent); stroke-width: 2px; }
.print-ped { display: none; }
@media (max-width: 720px) {
  .views { flex-wrap: nowrap; overflow-x: auto; padding: var(--s-1) var(--s-3); }
  .vw { padding: var(--s-3); }
  /* the three-generation view must sit on the first screen after an import: tighten what stacks above it */
  .app-bar .wrap-app { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .legend { flex-wrap: nowrap; gap: var(--s-1); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .imp-bar .wrap-app { gap: var(--s-3); padding-top: var(--s-1); padding-bottom: var(--s-1); }
  .imp-bar progress { flex: 0 0 56px; }
  .imp-bar span { font-size: 13px; line-height: 1.3; }
  #vw-phone .rfp { gap: 8px; }
  #vw-phone .rfp-grid { gap: 10px 10px; }
  #vw-phone .rfp-card { min-height: 0; padding: 6px 10px; }
}
@media print {
  html.print-ped-on #tree-root > :not(.print-ped), html.print-ped-on .hdr, html.print-ped-on .ftr, html.print-ped-on .skip { display: none !important; }
  html.print-ped-on .print-ped { display: block; }
  .views, .vw-opts, .rfc-tools { display: none !important; }
  .print-ped { color: #000; font-size: 9pt; }
  .print-ped h1 { font-size: 15pt; margin: 0 0 2mm; }
  .print-ped > .sub { font-size: 8pt; color: #333; margin: 0 0 4mm; }
  .pp-gen { margin-bottom: 4mm; }
  .pp-gen h2 { font-size: 10pt; margin: 0 0 1.5mm; break-after: avoid; }
  .pp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5mm; }
  .pp-card { break-inside: avoid; border: 0.3mm solid #666; border-radius: 1mm; padding: 1.2mm 1.6mm; display: grid; gap: 0.4mm; line-height: 1.2; }
  .pp-card .num { font-size: 7pt; color: #A3391D; }
  .pp-card b { font-size: 8.5pt; overflow-wrap: anywhere; }
  .pp-card span:last-child { font-size: 7.5pt; color: #333; }
  @page { size: A4; margin: 12mm; }
}
@media (min-width: 1400px) {
  /* generations and print sit on the chart's tool row, so the chart gets the height */
  #vw-chart { position: relative; }
  #vw-chart > .vw-opts { position: absolute; top: var(--s-4); right: var(--s-4); margin: 0; z-index: 2; }
}

/* ---------- records search form: first-paint layout (records.js repeats these at runtime) ---------- */
.rec-form { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--s-3); align-items: end; margin-top: var(--s-6); }
.rec-form input { width: 100%; }
.rec-go .btn { min-height: 2.75rem; }
#rec-status { margin-top: var(--s-3); }
#rec-results:empty { display: none; }
@media (max-width: 960px) {
  .rec-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rec-name, .rec-place, .rec-go { grid-column: 1 / -1; }
  .rec-go .btn { width: 100%; }
}

/* ---------- P7b: a helper's shared-tree screen keeps the family, the person and three ways to help ---------- */
/* app.py puts the role class on <body> before the first paint, so nothing flashes and nothing shifts. */
.role-contributor .hdr .wrap > nav, .role-contributor .hdr-end, .role-contributor .legend, .role-contributor .views,
.role-contributor .rfp-bar, .role-contributor .rfp-hint, .role-contributor .pp-stats,
.role-contributor .panel .chip:not(.ghost-chip), .role-contributor .pc.add, .role-contributor .ped-lines .ln-add { display: none !important; }
.role-contributor .app-bar .wrap-app { flex-wrap: nowrap; align-items: flex-end; }
.role-contributor .app-title { flex: 1 1 auto; min-width: 0; }
.role-contributor #app-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-contributor .sh-bar { flex: 0 0 auto; margin-left: auto; min-height: 0 !important; }
.role-contributor .app-title .sh-msg { margin-top: var(--s-1); }
.sh-share { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); color: var(--ink-muted); }
.role-contributor .panel ol.rows li { grid-template-columns: 44px minmax(0, 1fr); }
.role-contributor .panel .rows.src li { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  .role-contributor .pp-help { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
  .role-contributor .pp-help .btn { min-height: 44px; }
  .role-contributor .pp-head h2 { margin-top: var(--s-1); font-size: 1.5rem; }
  .role-contributor #vw-phone .chart-note { display: none; }
  /* the custodian keeps every tool; the three buttons and the badge share one row, and "saved" is a dot */
  .role-custodian .sh-bar { flex-wrap: nowrap; gap: var(--s-2); }
  .role-custodian .sh-bar .btn { flex: 0 1 auto; padding: 0 var(--s-3); }
  .role-custodian .sh-save { flex: 0 0 auto; width: 10px; height: 10px; margin-left: var(--s-1); border-radius: 50%; overflow: hidden;
    font-size: 0; background: var(--ink-muted); }
  .role-custodian .sh-save.is-busy { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-muted); }
  .role-custodian .sh-save.is-off { background: var(--accent); }
}