:root{
    --navy:#0B1F3A; --navy-2:#132a4d; --gold:#9C7A3C; --gold-light:#c9a96a;
    --slate:#3A3F47; --paper:#FBFAF8; --line:#E4E0D8; --card:#FFFFFF;
    --green:#3f7a52; --amber:#b8863b; --orange:#c1622e; --red:#a83232;
  }
  *{box-sizing:border-box;}
  #app{font-family: Georgia, 'Times New Roman', serif; background:var(--paper); color:var(--slate); min-height:100vh;}
  .topbar{background:var(--navy); color:#fff; padding:18px 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
  .topbar h1{font-size:19px; margin:0; letter-spacing:0.5px; font-weight:600;}
  .topbar .tag{font-size:11px; letter-spacing:1.5px; color:var(--gold-light); text-transform:uppercase; margin-top:2px;}
  .topbar-right{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
  .navbtn{background:transparent; border:1px solid rgba(255,255,255,0.35); color:#fff; padding:7px 14px; font-size:12.5px; border-radius:3px; cursor:pointer; font-family: Georgia, serif;}
  .navbtn.active{background:var(--gold); border-color:var(--gold); color:#1a1a1a;}
  .layout{display:flex; min-height:calc(100vh - 62px);}
  .sidebar{width:270px; background:#fff; border-right:1px solid var(--line); padding:16px; flex-shrink:0;}
  .sidebar h3{font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--gold); margin:4px 0 12px;}
  .client-item{padding:10px 10px; border-radius:4px; cursor:pointer; margin-bottom:6px; border:1px solid transparent; font-size:14px;}
  .client-item:hover{background:#f4f1ea;}
  .client-item.sel{background:var(--navy); color:#fff;}
  .client-item .sub{font-size:11px; opacity:0.7; margin-top:2px;}
  .addbtn{width:100%; padding:9px; background:var(--navy); color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:13px; margin-bottom:14px; font-family:Georgia,serif;}
  .addbtn:hover{background:var(--navy-2);}
  .main{flex:1; padding:24px 30px; overflow-x:auto;}
  .card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:20px 22px; margin-bottom:20px;}
  .card h2{font-size:17px; color:var(--navy); margin:0 0 4px; border-bottom:2px solid var(--gold); padding-bottom:8px;}
  .arc-card{overflow:hidden;}
  .arc-title{display:flex; align-items:baseline; flex-wrap:wrap; column-gap:10px; margin:0 0 4px; border-bottom:2px solid var(--gold); padding-bottom:10px;}
  .arc-title-lead{font-size:13px; color:var(--navy); opacity:0.6; font-style:italic;}
  .card h2.arc-title-highlight{
    font-family:Georgia,serif; font-size:27px; font-weight:800; letter-spacing:0.6px;
    color:var(--navy); position:relative; padding:0 3px; margin:0; line-height:1.2;
    border-bottom:none;
  }
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .card h2.arc-title-highlight{
      background-image:linear-gradient(90deg, #3f7a52 0%, #b8863b 45%, #7a1f30 100%);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
  }
  .card h2.arc-title-highlight::after{
    content:""; position:absolute; left:1px; right:1px; bottom:3px; height:9px; z-index:-1; border-radius:3px;
    background-image:linear-gradient(90deg, rgba(63,122,82,0.20), rgba(184,134,59,0.28), rgba(122,31,48,0.20));
  }
  .arc-title-trademark{font-size:11px; color:var(--gold); font-weight:700; align-self:flex-start; margin-top:3px;}
  .row{display:flex; gap:20px; flex-wrap:wrap;}
  .col{flex:1; min-width:260px;}
  label{display:block; font-size:12px; color:#555; margin-bottom:3px; margin-top:10px;}
  input, select, textarea{width:100%; padding:7px 9px; border:1px solid #ccc; border-radius:3px; font-size:13.5px; font-family: Georgia, serif;}
  .btn{padding:8px 16px; background:var(--navy); color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:13px; font-family:Georgia,serif;}
  .btn:hover{background:var(--navy-2);}
  .btn.secondary{background:#fff; color:var(--navy); border:1px solid var(--navy);}
  .btn.danger{background:#fff; color:var(--red); border:1px solid var(--red);}
  .score-wrap{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
  .score-circle{width:130px; height:130px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; border:6px solid var(--line); flex-shrink:0;}
  .score-circle .num{font-size:34px; font-weight:700; color:var(--navy);}
  .score-circle .lbl{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#777;}
  .stage-badge{display:inline-block; padding:5px 14px; border-radius:20px; font-size:12.5px; font-weight:600; color:#fff;}
  .risk-score-tile{border:1px solid #e2ddd0; border-left-width:4px; border-radius:6px; margin-bottom:10px; overflow:hidden; transition:background 0.15s;}
  .risk-score-tile:hover{background:#faf8f3;}
  .risk-score-header{display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; flex-wrap:wrap;}
  .risk-score-caret{font-size:11px; color:var(--gold); width:10px; flex-shrink:0;}
  .risk-score-name{font-weight:bold; color:var(--navy); flex:1 1 auto; min-width:160px;}
  .risk-score-value{font-size:13px; color:#666; margin-left:auto;}
  .risk-score-detail{padding:10px 14px 14px 34px; font-size:12.5px; color:#666; border-top:1px solid var(--line);}
  .sysbar-row{margin-bottom:12px;}
  .sysbar-row .lbl{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px;}
  .sysbar-track{background:#eee; border-radius:6px; height:12px; overflow:hidden;}
  .sysbar-fill{height:100%; border-radius:6px;}
  table{width:100%; border-collapse:collapse; font-size:12.8px;}
  th{text-align:left; background:#f4f1ea; padding:8px 9px; font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--navy); border-bottom:2px solid var(--line);}
  td{padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:top;}
  tr.clickable{cursor:pointer;}
  tr.clickable:hover{background:#faf8f3;}
  .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}
  .empty{color:#888; font-style:italic; padding:20px 0;}
  .modal-overlay{position:fixed; inset:0; background:rgba(11,31,58,0.55); display:flex; align-items:center; justify-content:center; z-index:100;}
  .modal{background:#fff; border-radius:6px; padding:26px 28px; width:94%; max-width:640px; max-height:88vh; overflow-y:auto;}
  .modal h3{color:var(--navy); margin-top:0; border-bottom:2px solid var(--gold); padding-bottom:8px;}
  .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px; position:sticky; bottom:0; background:#fff; padding-top:10px;}
  .accordion-title{background:var(--navy); color:#fff; padding:9px 14px; border-radius:4px; font-size:13px; margin:16px 0 10px; letter-spacing:0.3px;}
  .field-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
  .small-note{font-size:11.5px; color:#888; margin-top:4px;}
  .field-caveat{font-size:10.5px; color:#a07a3a; margin-top:2px;}
  .flagline{display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 0;}
  .toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
  .refrange-table input{width:64px; padding:4px 6px; font-size:12px;}
  .refrange-table select{padding:4px 6px; font-size:12px;}
  .refrange-table textarea{width:150px; font-size:11.5px; padding:4px 6px; resize:vertical;}
  .banner{background:#f4efe4; border:1px solid var(--gold); border-radius:5px; padding:12px 16px; font-size:12.5px; color:#5a4a2a; margin-bottom:18px;}
  .trend-svg text{font-family: Georgia, serif;}
  .system-tag{display:inline-block; font-size:10px; padding:2px 8px; border-radius:10px; color:#fff; margin-left:6px;}
  .computed-tag{font-size:10px; color:#9C7A3C; font-style:italic;}
/* ---------------- Login screen ---------------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--paper);}
.login-card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:36px 34px; width:92%; max-width:380px; text-align:center;}
.login-card h1{color:var(--navy); font-size:20px; margin:6px 0 2px;}
.login-card .tag{font-size:11px; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; margin-bottom:22px;}
.login-card label{text-align:left;}
.login-card .btn{width:100%; margin-top:14px;}
.login-error{color:var(--red); font-size:12.5px; margin-top:10px; min-height:16px;}
.topbar-right .signout{margin-left:6px;}

/* ---------------- Responsive: tablet/phone ---------------- */
/* The sidebar was a fixed 270px with flex-shrink:0 — on anything narrower than
   ~860px that left .main a near-unusable sliver. Stack instead of side-by-side. */
@media (max-width: 860px){
  .layout{flex-direction:column;}
  .sidebar{width:100%; border-right:none; border-bottom:1px solid var(--line);}
  .main{padding:18px 16px;}
  .field-grid{grid-template-columns:1fr;}
}

/* ---------------- Print / PDF export ---------------- */
@media print{
  .topbar, .sidebar, .navbtn, .btn, .modal-overlay, .no-print{display:none !important;}
  .layout{display:block;}
  .main{padding:0; overflow:visible;}
  .card{border:1px solid #ccc; box-shadow:none; page-break-inside:avoid; margin-bottom:14px;}
  body, #app{background:#fff;}
  .print-only{display:block !important;}
  /* Every risk score's full detail prints regardless of whether it's collapsed on screen —
     the accordion is a screen-only convenience, never a way to omit content from the PDF. */
  .risk-score-detail{display:block !important;}
  .risk-score-tile{page-break-inside:avoid;}
}
/* Full biomarker panel table: moved off the live screen into an on-demand modal (button
   on Current Trajectory) to shorten the page, but it still belongs in the printed PDF —
   this keeps it in the DOM, invisible on screen, and revealed by the @media print rule
   above. */
.print-only{display:none;}