/* OphthoHub shared styles — navy / gold */
@font-face{font-family:'Playfair Display';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/playfair-700.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/montserrat-400.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/montserrat-600.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/montserrat-700.woff2) format('woff2');}

:root{
  --navy:#0D2240; --navy-2:#162F55; --gold:#D4A017; --gold-dk:#8A6A0C; --gold-soft:#FBF4DE;
  --teal:#2F7F7A; --ink:#1F2733; --muted:#56606E; --line:#E3E6EC; --bg:#F7F8FA; --paper:#FFFFFF;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:'Montserrat', Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; -webkit-text-size-adjust:100%; }

/* ---------- Top bar ---------- */
.hub-top{ background:var(--navy); color:#fff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hub-top .practice{ font-family:'Playfair Display', Georgia, serif; font-size:19px; line-height:1.2; }
.hub-top .doc-label{ font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#C9D2E0; margin-top:3px; }
.hub-brand{ display:flex; align-items:center; gap:10px; text-align:right; flex-shrink:0; }
.hub-brand img{ width:44px; height:auto; background:#fff; border-radius:6px; padding:3px 4px; }
.hub-brand .by{ font-size:10px; letter-spacing:.08em; color:#C9D2E0; line-height:1.3; }
.hub-brand .by b{ display:block; font-family:'Playfair Display', Georgia, serif; font-size:14px; letter-spacing:0; }
.hub-brand .by b .l{ color:var(--gold); }
.hub-top .signout{ color:#C9D2E0; font-size:11px; text-decoration:underline; margin-left:6px; }

/* ---------- Layout ---------- */
.hub-layout{ display:flex; min-height:calc(100vh - 66px); }
.hub-nav{ width:260px; flex-shrink:0; background:var(--paper); border-right:1px solid var(--line); padding:18px 0; }
.hub-nav .nav-label{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dk); padding:0 22px 10px; }
.tab-btn{ display:block; width:100%; text-align:left; background:none; border:none; border-left:4px solid transparent;
  padding:12px 22px; font-family:inherit; font-size:14px; font-weight:600; color:var(--navy); cursor:pointer; }
.tab-btn:hover{ background:var(--bg); }
.tab-btn.active{ background:var(--gold-soft); border-left-color:var(--gold); }
.tab-btn .tab-sub{ display:block; font-weight:400; font-size:11.5px; color:var(--muted); margin-top:1px; }
.tab-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; }

.hub-main{ flex:1; padding:34px 44px 60px; max-width:860px; }
.panel{ display:none; } .panel.active{ display:block; }
.panel h2{ font-family:'Playfair Display', Georgia, serif; font-size:28px; color:var(--navy); margin:0 0 4px; }
.panel .when{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dk); margin:0 0 22px; padding-bottom:12px; border-bottom:2px solid var(--gold); }

.block{ margin-bottom:22px; }
.block-label{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); margin:0 0 10px; }
.block.conditional{ border-left:4px solid var(--teal); padding-left:14px; }
.block.conditional .block-label{ color:var(--teal); }

ul.checklist{ list-style:none; margin:0; padding:0; }
ul.checklist li{ position:relative; padding:9px 0 9px 22px; border-bottom:1px solid var(--line); font-size:15px; }
ul.checklist li:last-child{ border-bottom:none; }
ul.checklist li::before{ content:""; position:absolute; left:2px; top:18px; width:7px; height:7px; border-radius:50%; background:var(--navy); }
ul.checklist li.cond::before{ background:var(--teal); }
ul.checklist .crit{ color:var(--teal); font-weight:600; }
ul.checklist .sub{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }

.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.col-card{ background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:10px; padding:16px 16px 6px; }
.col-card h3{ font-size:13.5px; font-weight:700; color:var(--navy); margin:0 0 6px; }
.col-card ul.checklist li{ font-size:13.5px; }

.placeholder{ border:1.5px dashed #C7CDD8; border-radius:10px; padding:26px; color:var(--muted); font-style:italic; text-align:center; background:var(--paper); }

.hub-foot{ text-align:center; font-size:11px; color:var(--muted); padding:24px 16px 30px; }

/* ---------- Phone ---------- */
@media (max-width: 820px){
  .hub-top{ padding:12px 16px; }
  .hub-top .practice{ font-size:16px; }
  .hub-brand .by{ display:none; }
  .hub-layout{ display:block; }
  .hub-nav{ width:auto; border-right:none; border-bottom:1px solid var(--line); padding:10px 0; position:sticky; top:0; z-index:5;
    display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hub-nav .nav-label{ display:none; }
  .tab-btn{ width:auto; white-space:nowrap; border-left:none; border-bottom:3px solid transparent; padding:10px 14px; font-size:13.5px; }
  .tab-btn.active{ border-bottom-color:var(--gold); }
  .tab-btn .tab-sub{ display:none; }
  .hub-main{ padding:22px 16px 40px; }
  .panel h2{ font-size:24px; }
  .cols{ grid-template-columns:1fr; }
}

/* ---------- Print (one visit type per page) ---------- */
@media print{
  .hub-nav, .signout{ display:none; }
  .hub-top{ background:#fff; color:var(--navy); border-bottom:2px solid var(--gold); }
  .hub-top .doc-label, .hub-brand .by{ color:var(--muted); }
  .panel{ display:block !important; page-break-after:always; }
  .hub-main{ padding:20px 0; max-width:none; }
}

/* ---------- Login / status pages ---------- */
.gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:var(--bg); }
.gate-card{ width:100%; max-width:400px; background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--gold); border-radius:14px; padding:34px 30px 28px; text-align:center; }
.gate-card img{ width:110px; height:auto; margin:0 auto 6px; display:block; }
.gate-card .word{ font-family:'Playfair Display', Georgia, serif; font-size:28px; color:var(--navy); }
.gate-card .word .l{ color:var(--gold); }
.gate-card .hubname{ font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dk); margin:4px 0 22px; }
.gate-card h1{ font-family:'Playfair Display', Georgia, serif; font-size:20px; color:var(--navy); margin:0 0 6px; }
.gate-card p{ font-size:14px; color:var(--muted); margin:0 0 18px; }
.gate-card label{ display:block; text-align:left; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin-bottom:6px; }
.gate-card input[type=password]{ width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1.5px solid #C7CDD8; border-radius:8px; margin-bottom:14px; }
.gate-card input[type=password]:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(212,160,23,.35); }
.gate-card button{ width:100%; font:inherit; font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; padding:13px; border:none; border-radius:8px; background:var(--navy); color:#fff; cursor:pointer; }
.gate-card button:hover{ background:var(--navy-2); }
.gate-card .err{ background:#FDECEC; color:#8A1C1C; border-radius:8px; padding:10px 12px; font-size:13.5px; margin:0 0 14px; }
.gate-card .help{ font-size:12px; margin:18px 0 0; }
.gate-card .help a{ color:var(--navy); font-weight:600; }