/* GenoTree shared stylesheet — used by every page */

/* Dana — one dual-script (Farsi + Latin) typeface for the whole site,
   English and Farsi alike, so nothing shifts style when the language
   toggle is used. font-display:swap avoids invisible text while the
   file loads; browsers only fetch the specific weights actually used
   on a given page, so declaring all nine here costs nothing extra. */
@font-face{font-family:'Dana';src:url('assets/fonts/dana-thin.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:'Dana';src:url('assets/fonts/dana-extralight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:'Dana';src:url('assets/fonts/dana-light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Dana';src:url('assets/fonts/dana-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Dana';src:url('assets/fonts/dana-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Dana';src:url('assets/fonts/dana-demibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Dana';src:url('assets/fonts/dana-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Dana';src:url('assets/fonts/dana-extrabold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Dana';src:url('assets/fonts/dana-black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;}

:root{
  --bg:#f4f5f7; --panel:#ffffff; --border:#d7dbe0; --text:#1f2430; --muted:#6b7280;
  --accent:#2563eb; --accent-dim:#dbeafe; --danger:#dc2626; --line:#222;
  --grad1:#0d9488; --grad2:#2563eb; --grad3:#4f46e5;
  --brand-gradient: linear-gradient(135deg, var(--grad1), var(--grad2) 55%, var(--grad3));
  --font-main: 'Dana', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
/* Form controls don't inherit font-family from the page by default (every
   browser's UA stylesheet gives button/input/select/textarea their own
   system font) -- without this, Dana silently drops out on every button
   and text field even though html,body below sets it correctly. */
button,input,select,textarea{font-family:inherit;}
html,body{margin:0;font-family:var(--font-main);color:var(--text);background:var(--bg);}
body{min-height:100vh;display:flex;flex-direction:column;}
/* Used on pages that should behave like a fixed-height app screen (the
   builder canvas) instead of a normal scrolling page. */
body.fixedApp{height:100vh;min-height:0;overflow:hidden;}
.langBlock{display:none;}

/* ---------- top nav (shared header, duplicated per page) ---------- */
#topNav{display:flex;align-items:center;gap:10px;padding:9px 18px;background:var(--brand-gradient);color:#fff;flex:0 0 auto;flex-wrap:wrap;}
#topNav .brand{display:flex;align-items:center;gap:9px;text-decoration:none;}
#topNav .brand img{height:28px;display:block;}
#topNav .brand span{font-weight:700;font-size:15.5px;letter-spacing:.02em;color:#fff;}
#topNav nav{display:flex;gap:5px;margin-left:10px;flex-wrap:wrap;}
#topNav nav a, #topNav nav button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff;padding:6px 15px;border-radius:999px;font-size:13px;cursor:pointer;text-decoration:none;font-family:inherit;}
#topNav nav a:hover, #topNav nav button:hover{background:rgba(255,255,255,.26);}
#topNav nav a.active{background:#fff;color:#1c2333;font-weight:600;}
#topNav .navSpacer{flex:1;}
#topNav .ctaBtn{background:#fff;color:var(--grad3);font-weight:700;border:none;padding:7px 16px;border-radius:6px;font-size:13px;cursor:pointer;white-space:nowrap;text-decoration:none;}
#topNav .langToggle, #topNav .userChip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);color:#fff;padding:6px 13px;border-radius:999px;font-size:12.5px;cursor:pointer;font-weight:600;white-space:nowrap;text-decoration:none;}
#topNav .langToggle:hover, #topNav .userChip:hover{background:rgba(255,255,255,.26);}

main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}

/* ---------- builder ---------- */
#app{display:flex;flex-direction:column;flex:1;min-height:0;}
header.toolbar{display:flex;flex-direction:column;gap:6px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border);border-top:3px solid;border-image:var(--brand-gradient) 1;}
header.toolbar h1{font-size:15px;margin:0 12px 0 0;font-weight:600;white-space:nowrap;color:var(--text);}
/* Each row scrolls independently rather than wrapping -- the two rows are a
   deliberate, roughly-equal split of the toolbar buttons (see builder.html),
   not a responsive reflow, so a real overflow (a very narrow window) should
   scroll that one row instead of silently reshuffling the split. */
.toolbarRow{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;}
.toolbarRow>*{flex-shrink:0;}
.btn{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px;cursor:pointer;color:var(--text);white-space:nowrap;}
.btn:hover{background:#eef1f5;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn.primary{background:var(--brand-gradient);border-color:transparent;color:#fff;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.toggle-on{background:var(--accent-dim);border-color:var(--accent);}
/* Font Awesome icons: always a dedicated <i class="fas fa-*"> sibling next
   to a <span> label, never applied directly to the button/link itself --
   .fas sets a fixed icon width (1.25em) that would crush a text-bearing
   element's layout. Keeping icon and label as separate nodes also means
   i18n.js's textContent-based language swap only touches the label span,
   never wiping the icon. margin-inline-end is direction-aware so the gap
   flips to the correct side under RTL automatically. */
.fas{margin-inline-end:6px;}
.btn.iconOnly .fas, .featureCard .icon .fas, .capIcon .fas{margin-inline-end:0;}
.sep{width:1px;align-self:stretch;background:var(--border);margin:0 4px;}
.spacer{flex:1;}
select.btn{padding:6px 6px;}
.builderMain{flex:1;display:flex;min-height:0;}
#canvasWrap{flex:1;position:relative;overflow:hidden;background:
    linear-gradient(#e9ebef 1px,transparent 1px),
    linear-gradient(90deg,#e9ebef 1px,transparent 1px);
  background-size:24px 24px;background-color:#fbfcfd;}
svg#pedigree{width:100%;height:100%;display:block;cursor:grab;}
svg#pedigree.dragging{cursor:grabbing;}
#sidebar{width:290px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);padding:14px;overflow-y:auto;font-size:13px;}
#sidebar h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px;}
#sidebar h2:first-child{margin-top:0;}
.field{margin-bottom:8px;}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:2px;}
.field input[type=text], .field input[type=number], .field select, .field textarea{
  width:100%;padding:5px 6px;border:1px solid var(--border);border-radius:4px;font-size:13px;background:#fff;color:var(--text);
}
.field textarea{resize:vertical;min-height:44px;font-family:inherit;}
.checkrow{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
/* .condSwatch is the small square shown next to each condition's label, in
   both the builder's legend panel and the report page's legend. A
   multi-condition pedigree (2-4 conditions) colors this swatch inline from
   the condition's own `color` field (see builder.js/report.js) -- matching
   the actual quadrant fill on the pedigree symbols (engine.js's
   conditionFillFor). Only the legacy single-condition case (no colors, no
   quadrants -- just a plain solid-black "affected" fill) still uses the
   static .cond-pattern-0 class below; .cond-pattern-1/2/3 are unused
   leftovers from before conditions had colors, kept only so an unusually
   old cached stylesheet reference doesn't break. */
.condSwatch{display:inline-block;width:16px;height:16px;flex:0 0 auto;border:1px solid var(--text);border-radius:2px;background:#fff;}
.cond-pattern-0{background:#2f2f41;}
.cond-pattern-1{background-image:repeating-linear-gradient(45deg, #2f2f41 0 1.2px, transparent 1.2px 5px);}
.cond-pattern-2{background-image:repeating-linear-gradient(90deg, #2f2f41 0 1.2px, transparent 1.2px 4.5px);}
.cond-pattern-3{background-image:radial-gradient(#2f2f41 1.1px, transparent 1.2px);background-size:6px 6px;}
/* Native color input used to pick each condition's fill color in the
   builder's legend panel -- shrunk and destyled to sit inline like the
   .condSwatch it replaces for multi-condition rows. */
.condColorInput{width:24px;height:24px;padding:0;border:1px solid var(--border);border-radius:4px;background:none;cursor:pointer;flex:0 0 auto;}
.condColorInput::-webkit-color-swatch-wrapper{padding:2px;}
.condColorInput::-webkit-color-swatch{border:none;border-radius:2px;}
.condColorInput::-moz-color-swatch{border:none;border-radius:2px;}
.checkrow label{font-size:12.5px;color:var(--text);}
.empty-hint{color:var(--muted);font-size:12.5px;line-height:1.5;}
footer.builderFooter{padding:6px 12px;font-size:11px;color:var(--muted);background:var(--panel);border-top:1px solid var(--border);display:flex;gap:16px;align-items:center;}
#statusMsg{margin-left:auto;color:var(--accent);}
dialog{border:none;border-radius:10px;padding:0;box-shadow:0 10px 40px rgba(0,0,0,.2);max-width:480px;width:92%;}
dialog::backdrop{background:rgba(0,0,0,.35);}
.dlg-body{padding:18px 20px;}
.dlg-body h3{margin:0 0 10px;font-size:15px;}
.dlg-body p{font-size:13px;color:var(--muted);line-height:1.5;}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border);}
.tmpl-choice{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.tmpl-choice button{text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;}
.tmpl-choice button:hover{background:#eef1f5;border-color:var(--accent);}
.tmpl-choice strong{display:block;font-size:13px;}
.tmpl-choice span{font-size:12px;color:var(--muted);}
input[type=checkbox]{accent-color:var(--accent);}

/* ---------- landing ---------- */
.hero{position:relative;background:linear-gradient(100deg,var(--grad1) 0%,var(--grad2) 65%,var(--grad3) 100%);color:#fff;padding:72px 24px 132px;text-align:center;overflow:hidden;}
.hero img.logo{height:104px;margin-bottom:20px;position:relative;z-index:2;}
.hero h1{font-size:38px;margin:0 0 14px;font-weight:800;position:relative;z-index:2;letter-spacing:-.01em;}
.hero p.tagline{font-size:17px;max-width:660px;margin:0 auto 32px;opacity:.96;line-height:1.65;position:relative;z-index:2;}
.hero .cta{background:#fff;color:var(--grad3);font-weight:700;font-size:16px;padding:15px 36px;border-radius:999px;border:none;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.2);text-decoration:none;display:inline-block;position:relative;z-index:2;}
.hero .cta:hover{filter:brightness(0.98);transform:translateY(-1px);}
.heroWave{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:auto;display:block;z-index:1;line-height:0;}

/* alternating text/illustration sections, reused for "why it matters" + "see it in action" */
.altSection{max-width:1000px;margin:0 auto;padding:64px 24px;}
.altSection h2{font-size:24px;margin:0 0 12px;text-align:center;}
.altSection > .langBlock > p.lead{font-size:14.5px;color:var(--muted);text-align:center;max-width:640px;margin:0 auto 30px;line-height:1.7;}
.altGrid{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:30px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:0 6px 24px rgba(20,30,60,.08);}
.altGrid.reverse{grid-template-columns:1fr minmax(0,340px);}
.altGrid.reverse .diagram{order:2;}
.altGrid .diagram{display:flex;justify-content:center;}
.altGrid .diagram svg{max-width:100%;height:auto;}
.altGrid .callouts{margin:0;padding:0;list-style:none;}
.altGrid .callouts li{font-size:13.5px;line-height:1.55;color:#333;margin-bottom:12px;padding-left:14px;border-left:3px solid var(--grad2);}
.altGrid[dir=rtl] .callouts li{padding-left:0;padding-right:14px;border-left:none;border-right:3px solid var(--grad2);}
.altGrid .callouts li strong{display:block;color:var(--text);font-size:13.5px;}
@media (max-width:720px){ .altGrid, .altGrid.reverse{grid-template-columns:1fr;} .altGrid.reverse .diagram{order:0;} }

/* capability strip — tinted band with icon+label pairs, no invented stats */
.capStrip{background:rgba(37,99,235,.08);padding:26px 24px;}
.capStrip .capRow{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:28px 42px;}
.capStrip .capItem{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;}
.capStrip .capItem .capIcon{font-size:19px;}

/* numbered step list ("how it works") */
.stepsSection{max-width:760px;margin:0 auto;padding:64px 24px;}
.stepsSection h2{font-size:24px;text-align:center;margin:0 0 34px;}
.stepList{list-style:none;margin:0;padding:0;counter-reset:step;}
.stepList li{display:flex;gap:16px;align-items:flex-start;padding-bottom:26px;position:relative;}
.stepList li:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:0;width:2px;background:var(--border);}
.stepList[dir=rtl] li:not(:last-child)::before{left:auto;right:19px;}
.stepList .stepNum{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--brand-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;}
.stepList .stepText{font-size:14.5px;line-height:1.65;color:#333;padding-top:8px;}

/* feature icon cards */
.featuresWrap{max-width:1180px;margin:0 auto;padding:8px 24px 64px;}
.featuresWrap > .langBlock > h2{font-size:24px;text-align:center;margin:0 0 30px;}
/* minmax lowered from 230px so all 5 cards fit on one row at the container's
   own width instead of wrapping 4+1 -- still auto-fit, so narrower viewports
   drop to fewer columns exactly as before. */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.featureCard{background:#fff;border-radius:14px;padding:24px 20px;box-shadow:0 4px 18px rgba(20,30,60,.08);border:1px solid var(--border);text-align:center;transition:transform .15s ease,box-shadow .15s ease;}
.featureCard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(20,30,60,.13);}
.featureCard .icon{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:rgba(37,99,235,.1);display:flex;align-items:center;justify-content:center;font-size:24px;}
.featureCard h3{margin:0 0 8px;font-size:15px;}
.featureCard p{margin:0;font-size:13px;color:var(--muted);line-height:1.55;}

.whoWrap{padding:64px 0;}
.whoWrap > .langBlock > h2{max-width:1000px;margin:0 auto 24px;padding:0 24px;text-align:center;font-size:24px;}
.whoGrid{max-width:1000px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;}
.whoCard{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;}
.whoCard strong{display:block;font-size:14px;margin-bottom:6px;}
.whoCard p{margin:0;font-size:13px;color:var(--muted);line-height:1.55;}

/* final call-to-action band */
.ctaBand{background:linear-gradient(100deg,var(--grad1) 0%,var(--grad2) 65%,var(--grad3) 100%);color:#fff;text-align:center;padding:64px 24px;}
.ctaBand p.statement{font-size:22px;font-weight:600;max-width:720px;margin:0 auto 26px;line-height:1.5;}
.ctaBand .cta2{background:#fff;color:var(--grad3);font-weight:700;font-size:15px;padding:14px 34px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 10px 26px rgba(0,0,0,.18);}

/* rich landing footer (index.html only) — sits above the mandatory credit bar */
.landingFooterRich{background:#161c2c;color:#c7ccd8;padding:48px 24px 28px;}
.landingFooterRich .lfGrid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;}
.landingFooterRich h5{color:#fff;font-size:14px;margin:0 0 12px;}
.landingFooterRich p{font-size:13px;line-height:1.65;margin:0;color:#a7adba;}
.landingFooterRich ul{list-style:none;margin:0;padding:0;}
.landingFooterRich ul li{margin-bottom:8px;}
.landingFooterRich a{color:#c7ccd8;text-decoration:none;font-size:13px;}
.landingFooterRich a:hover{color:#fff;}
.landingFooterRich .lfBrand{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.landingFooterRich .lfBrand img{height:24px;}
.landingFooterRich .lfBrand span{color:#fff;font-weight:700;font-size:15px;}
@media (max-width:720px){ .landingFooterRich .lfGrid{grid-template-columns:1fr;} }

/* ---------- manual ---------- */
.manualWrap{max-width:820px;margin:0 auto;padding:36px 24px 70px;}
.manualWrap h1{font-size:26px;margin-bottom:4px;}
.manualWrap .sub{color:var(--muted);font-size:14px;margin-bottom:10px;}
.manualWrap h2{font-size:18px;margin-top:32px;border-bottom:2px solid var(--border);padding-bottom:6px;}
.manualWrap p, .manualWrap li{font-size:14px;line-height:1.75;color:#2a2f3a;}
.manualWrap ul, .manualWrap ol{padding-left:22px;}
.manualWrap[dir=rtl] ul, .manualWrap[dir=rtl] ol{padding-left:0;padding-right:22px;}
.manualWrap code{background:#eef1f5;padding:1px 5px;border-radius:4px;font-size:12.5px;}
/* Plain <details>/<summary> accordion -- no JS framework needed, matches
   the rest of the site's "static page, vanilla script only" approach. */
.manualAccordion details{background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-top:12px;padding:4px 16px;}
.manualAccordion summary{font-size:16px;font-weight:600;padding:12px 0;cursor:pointer;list-style:none;}
.manualAccordion summary::-webkit-details-marker{display:none;}
.manualAccordion summary::before{content:'+';display:inline-block;width:1.2em;color:var(--accent);font-weight:700;}
.manualAccordion details[open] summary::before{content:'−';}
.manualAccordion details[open]{padding-bottom:16px;}
.manualDiagram{background:#fff;border:1px solid var(--border);border-radius:8px;margin:10px 0;padding:6px;text-align:center;overflow-x:auto;}
.manualDiagram svg{max-width:100%;max-height:220px;}

/* ---------- login ---------- */
.authWrap{max-width:380px;margin:60px auto;padding:0 24px;}
.authCard{background:#fff;border:1px solid var(--border);border-radius:12px;padding:28px;box-shadow:0 4px 18px rgba(20,30,60,.08);}
.authCard h1{font-size:20px;margin:0 0 4px;text-align:center;}
.authCard .sub{color:var(--muted);font-size:13px;text-align:center;margin-bottom:20px;}
.authTabs{display:flex;gap:6px;margin-bottom:18px;background:var(--bg);border-radius:8px;padding:3px;}
.authTabs button{flex:1;padding:8px;border:none;background:none;border-radius:6px;font-size:13px;cursor:pointer;color:var(--muted);}
.authTabs button.active{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08);}
.authField{margin-bottom:12px;}
.authField label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;}
.authField input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;}
.authError{color:var(--danger);font-size:12.5px;margin-bottom:10px;min-height:16px;}
.authSubmit{width:100%;padding:10px;border:none;border-radius:6px;background:var(--brand-gradient);color:#fff;font-weight:700;font-size:14px;cursor:pointer;}
.captchaRow{display:flex;gap:8px;align-items:center;margin-bottom:6px;}
.captchaImg{flex:0 0 auto;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#eef1f5;line-height:0;}
.captchaImg svg{display:block;}
.captchaRow input{flex:1;padding:9px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;}
.captchaRefreshBtn{background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;padding:0;text-decoration:underline;}

/* ---------- my cases ---------- */
.casesWrap{max-width:860px;margin:0 auto;padding:30px 24px 70px;}
.casesWrap h1{font-size:22px;margin-bottom:4px;}
.casesHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.caseList{display:flex;flex-direction:column;gap:10px;}
.caseRow{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.caseRow .meta{flex:1;min-width:180px;}
.caseRow .meta strong{display:block;font-size:14px;}
.caseRow .meta span{font-size:12px;color:var(--muted);}
.caseRow .actions{display:flex;gap:6px;flex-wrap:wrap;}
.emptyCases{text-align:center;color:var(--muted);padding:50px 20px;font-size:14px;}
.sharedBadge{display:inline-block;background:var(--accent-dim);color:var(--accent);font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;margin-inline-start:6px;vertical-align:middle;}
.addByCodeRow{display:flex;gap:8px;margin-bottom:16px;}
.addByCodeRow input{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;}

/* ---------- share panel + comments (dialog, used from cases-page.js and shared.js) ---------- */
.shareLinkRow{display:flex;gap:8px;margin:10px 0;}
.shareLinkRow input{flex:1;padding:7px 9px;border:1px solid var(--border);border-radius:6px;font-size:12.5px;background:var(--bg);}
.shareQrWrap{text-align:center;margin:14px 0;}
.shareQrWrap svg{max-width:180px;height:auto;}
.commentsBox{margin-top:16px;border-top:1px solid var(--border);padding-top:12px;}
.commentsBox h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 8px;}
.commentRow{padding:8px 0;border-bottom:1px solid var(--border);}
.commentRow:last-child{border-bottom:none;}
.commentRow .commentMeta{font-size:11.5px;color:var(--muted);margin-bottom:2px;}
.commentRow .commentMeta strong{color:var(--text);}
.commentRow .commentBody{font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.commentForm{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.commentForm input, .commentForm textarea{width:100%;padding:8px 9px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit;}
.commentForm textarea{min-height:70px;resize:vertical;}
.commentForm .commentFormRow{display:flex;gap:8px;flex-wrap:wrap;}
.commentForm .commentFormRow input{flex:1;min-width:140px;}

/* ---------- report ---------- */
.reportWrap{max-width:820px;margin:0 auto;padding:20px 24px 50px;}
.reportToolbar{display:flex;justify-content:flex-end;gap:10px;margin-bottom:14px;}
/* Sized to exactly one A4 page (210mm) with the 1cm margin baked in as
   padding, rather than left to the browser's print-dialog margin setting --
   @page{margin} depends on that dialog being left on "Default", which isn't
   reliable (some browsers/users have it saved as "None"). box-sizing:
   border-box keeps the total width at 210mm either way, so print gets a true
   edge-to-edge 210x297mm page with a guaranteed 10mm inset on every side.
   This also makes the on-screen preview reflow exactly like print, which is
   what makes the beforeprint auto-fit in report.js (which measures this
   element's height) an accurate prediction rather than a guess. */
.reportSheet{background:#fff;border:1px solid var(--border);border-radius:10px;box-sizing:border-box;width:210mm;max-width:100%;padding:10mm;margin:0 auto;}
.reportLetterhead{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--grad2);padding-bottom:10px;margin-bottom:14px;}
.reportLetterhead .lhLeft{display:flex;align-items:center;gap:10px;}
.reportLetterhead .lhLeft img{height:30px;}
.reportLetterhead .lhLeft strong{font-size:15px;}
/* Cimorgh's side is sized independently from the GenoTree icon on the left --
   the source PNG is a decent 200x139, so this can go noticeably bigger than
   the old shared 30px rule without pixelating, and pairs the logo with the
   company name the same way the left side pairs its icon with the report title. */
.reportLetterhead .lhRight{display:flex;align-items:center;gap:8px;}
.reportLetterhead .lhRight img{height:46px;}
.reportLetterhead .lhRight strong{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.25;max-width:150px;}
.reportFooter{margin-top:14px;padding-top:10px;border-top:1px solid var(--border);text-align:center;font-size:10px;color:var(--muted);}
.reportMeta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;font-size:12px;}
.reportMeta label{display:block;color:var(--muted);font-size:10.5px;margin-bottom:2px;}
.reportMeta input{width:100%;border:none;border-bottom:1px solid var(--border);padding:2px 0;font-size:12.5px;background:transparent;}
.reportProbandLine{margin:-2px 0 12px;font-size:11px;}
.reportTextSections{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.reportTextSections .full{grid-column:1/-1;}
.reportTextSections label{display:block;color:var(--muted);font-size:10.5px;margin-bottom:2px;}
.reportTextSections textarea{width:100%;border:1px solid var(--border);border-radius:5px;padding:5px 6px;font-size:11.5px;font-family:inherit;resize:vertical;min-height:58px;}
.reportDiagramBox{border:1px solid var(--border);border-radius:8px;padding:8px;text-align:center;}
.reportDiagramBox svg{max-width:100%;max-height:340px;}
.reportDiagramBox h2{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 6px;text-align:left;}
.reportLegendBox{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;justify-content:center;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);}
.reportLegendTitle{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);flex-basis:100%;text-align:center;}
.reportLegendRow{display:flex;align-items:center;gap:5px;font-size:10.5px;}

/* ---------- brand footer ---------- */
#brandFooter{flex:0 0 auto;padding:8px 18px;background:#fff;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--muted);flex-wrap:wrap;}
#brandFooter img{height:29px;display:block;}
#brandFooter .creditFa{direction:rtl;text-align:right;unicode-bidi:isolate;}
#brandFooter .creditFa a{color:var(--accent);text-decoration:none;font-weight:600;}
#brandFooter .creditFa a:hover{text-decoration:underline;}
#brandFooter .creditEn{color:var(--muted);font-size:11px;}

@media (max-width:760px){
  #sidebar{width:230px;}
  .reportTextSections{grid-template-columns:1fr;}
  .reportMeta{grid-template-columns:1fr 1fr;}
}

@media print{
  #topNav, #brandFooter, .no-print{display:none !important;}
  html,body{background:#fff;height:auto;}
  /* margin:0 here on purpose -- the 1cm margin is .reportSheet's own
     padding above, not this @page rule (see the comment on .reportSheet). */
  @page{ size:A4; margin:0; }
  .reportWrap{max-width:100%;padding:0;margin:0;}
  .reportSheet{border:none;border-radius:0;width:210mm;max-width:none;margin:0;page-break-inside:avoid;}
  .reportMeta input{border-bottom:1px solid #999;}
  .reportTextSections textarea{border:1px solid #bbb;resize:none;}
  .reportDiagramBox{border:1px solid #ccc;}
}

/* ---------- pedigree canvas right-click context menu (builder.js) ---------- */
.ctxmenu{
  position:fixed; z-index:1000; min-width:200px; max-width:320px;
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18); padding:4px; font-family:var(--font-main);
}
.ctxmenu-item{
  display:block; width:100%; box-sizing:border-box; text-align:start;
  padding:8px 12px; border:none; background:none; border-radius:5px;
  font-family:inherit; font-size:13px; color:var(--text); cursor:pointer;
}
.ctxmenu-item:hover, .ctxmenu-item:focus{ background:var(--accent-dim); outline:none; }
.ctxmenu-sep{ height:1px; margin:4px 6px; background:var(--border); }