/* Baviera Formula v6.9 — calculator styles. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F4F6F9;
  --white:#FFFFFF;
  --surface:#F8FAFC;
  --accent:#1B4F8A;
  --accent-light:#E8F0FB;
  --accent2:#2DD4BF;
  --text:#0F1923;
  --text2:#4B5B6D;
  --text3:#8FA3B1;
  --border:#D4DCE8;
  --border2:#E8EEF4;
  --ok:#10B981;
  --warn:#F59E0B;
  --error:#EF4444;
  --mono:'JetBrains Mono',monospace;
  --sans:'Inter',sans-serif;
  --r:6px;
}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}

/* HEADER */
header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:2px solid var(--border);padding:0;display:flex;align-items:center;height:82px;}
.header-inner{display:flex;align-items:center;gap:1.5rem;width:100%;max-width:1280px;margin:0 auto;padding:0 2.5rem;}
.logo{font-size:34px;font-weight:800;letter-spacing:-0.5px;color:var(--text)}
.logo em{color:var(--accent);font-style:normal}
.logo-sub{font-size:11px;color:var(--text3);font-family:var(--mono);margin-top:2px;margin-bottom:8px;letter-spacing:9px;text-transform:uppercase;display:block;width:100%}
.header-nav{margin-left:auto;display:flex;gap:2rem}
.header-nav a{font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text2);text-decoration:none;transition:color .15s}
.header-nav a:hover{color:var(--accent)}

/* PATIENT ROW */
.patient-bar{background:var(--white);border:1px solid #000;border-radius:10px;padding:.75rem 1.5rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.pfield{display:flex;align-items:center;gap:.5rem}
.pfield label{font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap}
.pfield input,.pfield select{border:1px solid var(--border);border-radius:var(--r);padding:5px 10px;font-family:var(--sans);font-size:13px;color:var(--text);background:var(--white);outline:none;transition:border-color .15s;min-width:140px}
.pfield input:focus,.pfield select:focus{border-color:var(--accent)}
.pfield input::placeholder{color:var(--text3)}
.sex-toggle{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.sex-btn{padding:5px 16px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:var(--white);color:var(--text2);transition:background .15s,color .15s}
.sex-btn.active{background:var(--accent);color:#fff}

/* MAIN GRID */
main{flex:1;padding:1.5rem 2.5rem;display:flex;flex-direction:column;gap:1rem;max-width:1280px;margin:0 auto;width:100%}

/* EYE PANELS */
.eyes-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}

.eye-panel{background:var(--white);border:1px solid #000;border-radius:10px;overflow:hidden}
.eye-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border2);background:var(--surface)}
.eye-label{font-size:42px;font-weight:800;letter-spacing:-1px;color:var(--text);line-height:1}
.eye-sub{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3)}
.eye-body{padding:1.25rem}

/* FORM FIELDS */
.frow{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:.5rem;margin-bottom:.65rem}
.frow:last-child{margin-bottom:0}
.flabel{font-size:13px;font-weight:700;color:var(--text)}
.flabel .opt{font-size:10px;color:var(--text3);font-weight:400}
.finput-wrap{position:relative;display:flex;align-items:center}
.finput{width:100%;border:1.5px solid #B0BEC8;border-radius:var(--r);padding:8px 40px 8px 10px;font-family:var(--mono);font-size:13px;color:var(--text);background:#F8FAFC;outline:none;transition:border-color .15s,box-shadow .15s}
.finput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,79,138,0.12)}
.finput.err{border-color:var(--error);background:#FFF5F5}
.funit{position:absolute;right:10px;font-family:var(--mono);font-size:11px;color:var(--text3);pointer-events:none}
.frange{font-size:10px;color:var(--text3);white-space:nowrap}
.fdiv{height:1px;background:var(--border2);margin:.75rem 0}
.foptlabel{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);margin-bottom:.5rem}

/* TARGET */
.target-row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:.5rem;margin-bottom:.65rem}
.target-input-wrap{display:flex;align-items:center;gap:6px}

/* ACTION BAR */
.action-bar{display:flex;gap:1rem;justify-content:center;padding:1rem 0;background:transparent;border:none}
.btn-calc{padding:11px 2.5rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:opacity .15s,transform .1s;text-transform:uppercase}
.btn-calc:hover{opacity:.9}.btn-calc:active{transform:scale(.98)}
.btn-reset{padding:11px 2rem;background:var(--white);color:var(--text2);border:1.5px solid var(--border);border-radius:var(--r);font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s;text-transform:uppercase}
.btn-reset:hover{border-color:var(--text2);color:var(--text)}

/* RESULTS */
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
/* each result stays in its own eye's column, even if the other one has not been calculated:
   a hidden panel frees its slot and the other panel would otherwise shift into the first one */
#od_result{grid-column:1}
#os_result{grid-column:2}
.result-panel{background:var(--white);border:1px solid #000;border-radius:10px;display:none}
.result-panel.visible{display:block}
.result-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--border2);background:var(--surface);border-radius:10px 10px 0 0}
.result-eye{font-size:13px;font-weight:700;color:var(--accent)}
.result-sg{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:2px 8px;border-radius:20px}
.sg-C{background:rgba(245,158,11,.12);color:#B45309}
.sg-N{background:rgba(16,185,129,.12);color:#065F46}
.sg-L{background:rgba(27,79,138,.12);color:var(--accent)}
.result-ic{font-size:11px;color:var(--text3);font-family:var(--mono)}

/* TABLE */
.iol-table{width:100%;border-collapse:collapse;border-radius:0 0 10px 10px;overflow:hidden}
.iol-table th{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);padding:.5rem 1.25rem;text-align:right;border-bottom:1px solid var(--border2)}
.iol-table th:first-child{text-align:left}
.iol-table td{padding:.55rem 1.25rem;font-family:var(--mono);font-size:13px;color:var(--text2);text-align:right;border-bottom:1px solid var(--border2)}
.iol-table td:first-child{text-align:left;color:var(--text);font-weight:500}
.iol-table tr:last-child td{border-bottom:none}
.iol-table tr.best td{background:var(--accent-light)}
.iol-table tr.best td:first-child{color:var(--accent);font-weight:700}
.iol-table tr.best td.se-val{color:var(--accent)}
.se-pos{color:#2563EB}.se-neg{color:#7C3AED}.se-zero{color:var(--ok)}

/* INTERPRET */
.interpret{display:flex;align-items:center;gap:8px;padding:.65rem 1.25rem;font-size:12px;border-top:1px solid var(--border2)}
.int-em{color:var(--ok)}.int-hp{color:#2563EB}.int-mp{color:#7C3AED}.int-mo{color:var(--warn)}

/* EMPTY STATE */
.empty-panel{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:2.5rem;text-align:center;color:var(--text3);font-size:13px;display:none}
.empty-panel.visible{display:block}

footer{padding:1rem 2.5rem;font-size:11px;color:var(--text3);display:flex;flex-direction:column;align-items:center;gap:.25rem;border-top:1px solid var(--border);background:var(--white)}
.fmono{font-family:var(--mono)}

@media(max-width:900px){.eyes-grid,.results-grid{grid-template-columns:1fr}#od_result,#os_result{grid-column:auto}.patient-bar{gap:1rem}}
@page{size:A4 portrait;margin:11mm}

@media print{
  /* 1. Nothing sticky or floating: there is no scrolling on paper, and a
        sticky header gets printed wherever the scroll position happened to be. */
  header{position:static!important;height:auto!important;z-index:auto!important;
         padding:0 0 6pt!important;border-bottom:1.2pt solid #000;
         break-inside:avoid;break-after:avoid}
  body{min-height:0!important;display:block!important;background:#fff;
       font-size:8.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  main{display:block!important;flex:none!important;max-width:none!important;
       width:auto!important;margin:0!important;padding:8pt 0 0!important}
  .header-inner{padding:0!important;max-width:none!important;gap:0!important}

  /* 2. Hide everything interactive and anything that is not part of the report */
  .disclaimer-overlay,.valerr-overlay,.about-overlay,.action-bar,header nav,
  .bl-pdf-bar,.bl-drop,.bl-pdf-status,.bl-btn-pdf,.bl-hint{display:none!important}
  .range-warn::after,.range-warn::before{display:none!important}
  .range-warn{background:#fff!important;color:#000!important;border:0.8pt solid #000;
              width:12pt;height:12pt;font-size:8pt}

  /* 3. Compact header */
  .logo{font-size:19pt;letter-spacing:-0.3px}
  .logo-sub{margin:1pt 0 0!important;letter-spacing:5px;font-size:7pt}

  /* 4. Panels: do not split across pages */
  .patient-bar,.eye-panel,.result-panel{break-inside:avoid;page-break-inside:avoid;
       box-shadow:none!important;border:0.6pt solid #666!important;border-radius:4pt}
  .eyes-grid,.results-grid{gap:8pt!important}
  main>*{margin-bottom:8pt}
  .result-header{background:#f2f2f2!important}

  /* 5. Fields: readable and without a form-like look */
  input,select{border-color:#bbb!important;background:#fff!important;
               -webkit-appearance:none;appearance:none}
  input.bl-from-pdf,input.bl-warn,input.err{background:#fff!important}
  select{padding-right:.4rem!important}

  /* 6. Footer at the end, not repeated */
  footer{border-top:0.6pt solid #999;padding:6pt 0 0;break-inside:avoid}
  footer img{height:26px!important}
}

.range-warn{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-left:.4rem;border-radius:50%;
  background:#F2B138;color:#fff;font-size:11px;font-weight:800;
  cursor:help;vertical-align:middle;position:relative;flex:none;z-index:1}
/* on hover the icon is raised, so the tooltip sits above the adjacent
   panel and any other element on the page, except the modals */
.range-warn:hover{z-index:900}
/* The tooltip opens DOWNWARDS: the header sits at the top edge of the panel
   and .result-panel uses overflow:hidden, which would clip an upward tooltip. */
.range-warn::after{content:attr(data-tip);position:absolute;top:150%;left:0;
  background:#1c1c1c;color:#fff;font-weight:500;
  font-size:11px;line-height:1.5;letter-spacing:0;text-transform:none;
  padding:.55rem .7rem;border-radius:6px;white-space:normal;width:250px;
  opacity:0;visibility:hidden;transition:opacity .12s;z-index:300;
  box-shadow:0 6px 18px rgba(0,0,0,.28);pointer-events:none}
/* tooltip arrow */
.range-warn::before{content:'';position:absolute;top:118%;left:5px;
  border:5px solid transparent;border-bottom-color:#1c1c1c;
  opacity:0;visibility:hidden;transition:opacity .12s;z-index:301}
.range-warn:hover::after,.range-warn:hover::before{opacity:1;visibility:visible}


/* CONTACT MODAL — reuses .about-overlay / .about-box */
.contact-box{max-width:420px}
.contact-card{display:flex;flex-direction:column;gap:.3rem;padding:.25rem 0 .5rem}
.contact-name{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.2px}
.contact-msg{font-size:13px;color:var(--text2);margin-top:.5rem}
.contact-email{margin-top:.15rem;font-size:14px;font-weight:600;color:var(--accent);
  text-decoration:none;font-family:var(--mono);word-break:break-all}
.contact-email:hover{text-decoration:underline}
.contact-copied{display:block;font-size:12px;font-weight:600;color:var(--ok);margin-top:.35rem}

/* DISCLAIMER MODAL */
.disclaimer-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(15,25,35,0.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.disclaimer-box{
  background:var(--white);
  border-radius:12px;border:1px solid #000;
  max-width:520px;width:100%;
  padding:2.5rem 2.5rem 2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:1.25rem;
}
.disclaimer-box h2{
  font-size:16px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--accent);
}
.disclaimer-box p{
  font-size:13px;line-height:1.7;color:var(--text2);text-align:justify;
}
.disclaimer-box p strong{color:var(--text);}
.disclaimer-accept{
  align-self:flex-end;
  padding:10px 2rem;
  background:var(--accent);color:#fff;
  border:none;border-radius:var(--r);
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.3px;text-transform:uppercase;
  cursor:pointer;transition:opacity .15s;
}
.disclaimer-accept:hover{opacity:.88}

/* ABOUT MODAL */
.about-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(15,25,35,0.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.about-overlay.visible{display:flex;}
.about-box{
  background:var(--white);border-radius:12px;border:1px solid #000;
  max-width:600px;width:100%;
  padding:2.5rem 2.5rem 2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:1.25rem;
  max-height:85vh;overflow-y:auto;
}
.about-box h2{font-size:16px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);}
.about-box h3{font-size:13px;font-weight:700;color:var(--text);margin-top:.5rem;}
.about-box p{font-size:13px;line-height:1.75;color:var(--text2);text-align:justify;}
.about-box table{width:100%;border-collapse:collapse;font-size:12px;}
.about-box th{text-align:left;font-weight:700;color:var(--text2);border-bottom:1px solid var(--border);padding:.4rem .6rem;text-transform:uppercase;letter-spacing:.5px;font-size:11px;}
.about-box td{padding:.4rem .6rem;color:var(--text2);border-bottom:1px solid var(--border2);}
.about-box td:first-child{font-weight:600;color:var(--text);}
.about-close{align-self:flex-end;padding:9px 1.75rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s;}
.about-close:hover{opacity:.88}
.valerr-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(15,25,35,0.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.valerr-overlay.visible{display:flex;}
.valerr-box{
  background:var(--white);border-radius:12px;
  max-width:420px;width:100%;
  padding:2rem 2.5rem 1.75rem;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:1rem;
}
.valerr-box h2{font-size:15px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--error);}
.valerr-box ul{font-size:13px;line-height:1.8;color:var(--text2);padding-left:1.2rem;}
.valerr-box ul li{margin-bottom:.2rem;}
.valerr-close{
  align-self:flex-end;padding:9px 1.75rem;
  background:var(--error);color:#fff;border:none;border-radius:var(--r);
  font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s;
}
.valerr-close:hover{opacity:.88}

/* ════════ Printed report: only exists when printing ════════ */
#print-report{display:none}
@media print{
  body>*:not(#print-report){display:none!important}
  #print-report{display:block!important;font-family:var(--sans,system-ui,sans-serif);
    color:#111;font-size:8.6pt;line-height:1.35}
  .pr-head{display:flex;justify-content:space-between;align-items:flex-end;
    border-bottom:1.4pt solid #000;padding-bottom:4pt;margin-bottom:6pt}
  .pr-logo{font-size:18pt;font-weight:800;letter-spacing:-.4px;line-height:1}
  .pr-logo em{font-style:normal;color:#1f4e8c}
  .pr-sub{font-size:7pt;letter-spacing:3.5px;text-transform:uppercase;color:#555;
    font-family:var(--mono,monospace)}
  .pr-pat{display:flex;flex-wrap:wrap;gap:4pt 16pt;font-size:8.4pt;
    padding:4pt 0 7pt;border-bottom:.5pt solid #bbb;margin-bottom:9pt}
  .pr-pat b{font-weight:600;color:#555;margin-right:3pt;text-transform:uppercase;
    font-size:6.8pt;letter-spacing:.6px}
  .pr-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16pt}
  .pr-cols.una{grid-template-columns:1fr;max-width:60%;margin:0 auto}
  .pr-eye{break-inside:avoid}
  .pr-cols>.pr-eye:nth-child(2){border-left:.5pt solid #ccc;padding-left:16pt}
  .pr-eyetit{font-size:10.5pt;font-weight:800;margin-bottom:4pt;
    display:flex;align-items:center;gap:6pt}
  .pr-eyetit span{font-size:7pt;font-weight:600;color:#666;letter-spacing:1px}
  .pr-bio{width:100%;border-collapse:collapse;margin-bottom:7pt}
  .pr-bio td{padding:1.6pt 0;border-bottom:.4pt solid #e3e3e3;vertical-align:baseline}
  .pr-bio td.k{color:#555;width:23%}
  .pr-bio td.v{font-family:var(--mono,monospace);font-weight:600;width:27%}
  .pr-rec{border:1.1pt solid #000;border-radius:3pt;padding:5pt 7pt;margin-bottom:6pt;
    display:flex;justify-content:space-between;align-items:center}
  .pr-rec .l{font-size:6.8pt;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
  .pr-rec .n{font-size:15pt;font-weight:800;font-family:var(--mono,monospace)}
  .pr-rec .t{font-size:7pt;color:#444;display:block;margin-top:1pt}
  .pr-ci{font-size:7pt;color:#555;margin:-2pt 0 6pt}
  .pr-tab{width:100%;border-collapse:collapse}
  .pr-tab th{font-size:6.6pt;letter-spacing:.7px;text-transform:uppercase;color:#555;
    text-align:left;border-bottom:.8pt solid #000;padding:2pt 0}
  .pr-tab th:last-child,.pr-tab td:last-child{text-align:right}
  .pr-tab td{padding:2pt 0;border-bottom:.4pt solid #e5e5e5;font-family:var(--mono,monospace)}
  .pr-tab tr.best td{font-weight:800;background:#eef3fa}
  .pr-tab tr.best td:first-child::after{content:"  \25C0";font-size:6.5pt}
  .pr-warn{font-size:6.8pt;border:.6pt solid #000;padding:3pt 5pt;margin-top:5pt;border-radius:2pt}
  .pr-est{font-family:var(--sans,system-ui,sans-serif);font-weight:500;color:#777;font-size:6.4pt;margin-left:3pt;letter-spacing:.3px}.pr-estnota{font-size:6.8pt;color:#555;margin:7pt 0 0}
  .pr-foot{margin-top:12pt;border-top:.6pt solid #999;padding-top:6pt;
    display:flex;align-items:center;gap:10pt;font-size:6.6pt;color:#555}
  .pr-foot img{height:22px}
  .pr-foot p{margin:0;flex:1;line-height:1.4}
}


/* ─── PDF report reader ─── */
/* Baviera Formula — PDF loading. Uses the variables from the original stylesheet (--accent, --r, --warn...).
   All classes use the bl- prefix to avoid clashing with the existing ones. */

.bl-pdf-bar{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.bl-btn-pdf{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;transition:opacity .15s}
.bl-btn-pdf:hover{opacity:.9}
.bl-btn-pdf:disabled{opacity:.5;cursor:default}
.bl-pdf-status{display:none;align-items:center;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:20px;cursor:pointer;border:none;font-family:var(--sans)}
.bl-pdf-status.visible{display:inline-flex}
.bl-st-ok{background:rgba(16,185,129,.12);color:#065F46}
.bl-st-warn{background:rgba(245,158,11,.14);color:#B45309}
.bl-st-error{background:rgba(239,68,68,.12);color:#B91C1C}
.bl-st-busy{background:var(--accent-light);color:var(--accent);cursor:default}

/* auto-filled / to-review fields ("err" already exists in the original stylesheet) */
.finput.bl-from-pdf,.pfield input.bl-from-pdf{background:#EEF6FF;border-color:#7AA7DA}
.finput.bl-warn{border-color:var(--warn);background:#FFFBEB}
.frange.bl-hint{font-family:var(--mono);font-size:10px}
.frange.bl-hint-axis{color:var(--accent);font-weight:600}
.frange.bl-hint-warn{color:#B45309;font-weight:600}
.frange.bl-hint-ref{color:var(--text3);cursor:help}
.frange a.bl-use-est{color:var(--accent);font-weight:600;text-decoration:underline dotted}


/* drag and drop */
.bl-drop{position:fixed;inset:0;z-index:900;background:rgba(27,79,138,.12);border:3px dashed var(--accent);display:none;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--accent);pointer-events:none;text-align:center;padding:1rem}
.bl-drop.visible{display:flex}

/* warning list inside the original modal */
#valerr-list li.bl-lv-error{color:#B91C1C}
#valerr-list li.bl-lv-warn{color:#B45309}
#valerr-list li.bl-lv-info{color:var(--text3)}
#valerr-list li.bl-lv-src{list-style:none;margin-left:-1.2rem;font-family:var(--mono);font-size:11px;color:var(--text3)}

@media(max-width:640px){
  .bl-pdf-bar{margin-left:0;width:100%;flex-wrap:wrap}
  
  
}
@media print{.bl-pdf-bar,.bl-drop{display:none!important}}