/* :root{
    --navy:#0b2e59;
    --navy-deep:#071d3a;
    --saffron:#e07a1f;
    --green:#0a6e4c;
    --paper:#eef1f4;
    --panel:#ffffff;
    --line:#c9d2dc;
    --ink:#182634;
    --muted:#5b6b7a;
    --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
    --serif:'Source Serif 4',Georgia,serif;
    --sans:'Inter',-apple-system,sans-serif;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;overflow:hidden;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    display:flex;
    flex-direction:column;
    height:100vh;
  }
    */

   :root {

     --heading: 'Merriweather', Georgia, serif;

     --body: 'Inter', sans-serif;

     --mono: 'JetBrains Mono', monospace;

   }

   #dosemate-app,
   #dosemate-app * {
     box-sizing: border-box;
   }

   #dosemate-app {
     background: var(--paper);
     color: var(--ink);
     font-family: var(--sans);

     width: 100%;
     max-width: 1400px;
     margin: 30px auto;
     padding: 0 20px;
   }



   /* ---- Government-style header band ---- */
   .tricolor {
     height: 4px;
     background: linear-gradient(90deg, var(--saffron) 0 33.33%, #ffffff 33.33% 66.66%, var(--green) 66.66% 100%);
   }

   .masthead {
     background: var(--navy);
     color: #eef1f4;
     padding: 7px 18px;
     display: flex;
     align-items: center;
     gap: 14px;
     border-bottom: 2px solid var(--navy-deep);
     flex-shrink: 0;
   }

   .emblem {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
   }

   .emblem svg {
     width: 20px;
     height: 20px;
   }

   .masthead-text .inst {
     font-family: var(--serif);
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 0.01em;
     line-height: 1.2;
   }

   .masthead-text .sub {
     font-family: var(--sans);
     font-size: 11.5px;
     color: #c3d0de;
     letter-spacing: 0.03em;
     margin-top: 1px;
   }

   .masthead-right {
     margin-left: auto;
     text-align: right;
     font-family: var(--mono);
     font-size: 12px;
     color: #9fb3c8;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     display: none;
   }

   @media(min-width:640px) {
     .masthead-right {
       display: block;
     }
   }



   .subbar {
     background: var(--navy-deep);
     color: #cfe0ef;
     font-family: var(--mono);
     font-size: 11.5px;
     letter-spacing: 0.04em;
     padding: 3px 18px;
     display: flex;
     gap: 16px;
     overflow-x: auto;
     white-space: nowrap;
     flex-shrink: 0;
   }

   .subbar span {
     opacity: 0.85;
   }

   .subbar span::before {
     content: "›";
     margin-right: 6px;
     color: var(--saffron);
   }

   /*
  .wrap{
    max-width:1400px;
    width:100%;
    margin:0 auto;
    padding:8px 18px 0;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
    */

   .wrap {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 18px;
   }


   .titleblock {
     text-align: center;
     margin-bottom: 6px;
     padding-bottom: 5px;
     border-bottom: 2px solid var(--navy);
     flex-shrink: 0;
   }

   /*
  .titleblock h1{
    font-family:var(--serif);
    font-size:clamp(17px,2.3vw,22px);
    color:var(--navy);
    margin:0 0 2px;
    font-weight:700;
  } */


   .titleblock .tag {
     font-family: var(--mono);
     font-size: 11.5px;
     color: var(--muted);
     letter-spacing: 0.03em;
   }

   */ .titleblock h1 {
     font-family: "Merriweather", Georgia, serif;
     font-size: clamp(2.5rem, 3.5vw, 3.2rem);
     /* 40px–51px */
     font-weight: 900;
     color: #0b2e59;
     line-height: 1.1;
     letter-spacing: 0.6px;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
   }



   .ref-code {
     display: inline-block;
     margin-top: 4px;
     font-family: var(--mono);
     font-size: 11px;
     color: var(--green);
     border: 1px dashed var(--green);
     padding: 1px 8px;
     border-radius: 3px;
     text-decoration: none;
     cursor: pointer;
   }

   .ref-code:hover {
     background: rgba(10, 110, 76, 0.08);
   }

   /* ---- Side-by-side main layout ---- 

  .main-grid{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    overflow:hidden;
    padding-bottom:6px;
  }


  .main-grid{

    display:grid;

    grid-template-columns:

        minmax(0,1fr)

        minmax(360px,460px);

    gap:24px;

    align-items:start;

}   */


   .main-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 20px;
     align-items: start;
   }


   /*
  @media(max-width:820px){ .main-grid{ grid-template-columns:1fr; overflow-y:auto; } }
  .main-col{
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }  */

   @media(max-width:1100px) {

     .main-grid {

       grid-template-columns: 1fr;

     }

   }



   /*

  .main-col .card{
    display:flex;
    flex-direction:column;
    min-height:0;
    flex:1;
  }
  .main-col .card-body{
    overflow-y:auto;
    min-height:0;
    flex:1;
  }

  */

   .main-col {
     display: flex;
     flex-direction: column;
   }

   .main-col .card {
     flex: 1;
   }

   /* ---- Bottom notes strip ---- */

   .bottom-notes {
     flex-shrink: 0;
     background: #fff;
     border-top: 2px solid var(--navy);
     padding: 14px 18px;
     font-size: 16px;
     /* Increased */
     line-height: 1.8;
     color: #495057;
   }

   .bottom-notes .cite {
     font-size: 16px;
     font-weight: 600;
     color: var(--navy);
     margin-bottom: 10px;
   }

   .bottom-notes .disclaimer {
     font-size: 15px;
     line-height: 1.8;
     color: #495057;
   }

   .bottom-notes b {
     color: var(--navy);
     font-weight: 700;
   }

   /*  .bottom-notes{
    flex-shrink:0;
    max-height:76px;
    overflow-y:auto;
    background:#fff;
    border-top:2px solid var(--navy);
    padding:4px 18px;
    font-size:11px;
    line-height:1.35;
    color:var(--muted);
  }
  .bottom-notes b{ color:var(--navy); }
  .bottom-notes .disclaimer{
    margin:0;
    padding:0;
    border:none;
    background:none;
    font-size:11px;
  }
  .bottom-notes .cite{
    margin:0 0 2px;
    font-size:11.5px;
    text-align:left;
  }

  */


   /* ---- Form card ---- */

   /*  
  .card{
    background:var(--panel);
    border:1px solid var(--line);
    box-shadow:0 1px 3px rgba(11,46,89,0.08);
  }
*/

   .card {

     background: #fff;

     border: 1px solid var(--line);

     border-radius: 8px;

     overflow: hidden;

     box-shadow: 0 2px 8px rgba(0, 0, 0, .08);

   }

   /* .card-head{
    background:var(--navy);
    color:#fff;
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:7px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
*/

   .card-head {
     font-family: "Inter", sans-serif;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 0.8px;
     text-transform: uppercase;
   }



   .card-head .no {
     color: var(--saffron);
     margin-right: 8px;
   }

   /* .card-body{ padding:10px 12px 12px; } */
   .card-body {

     padding: 16px;

     overflow: visible;

   }

   /*
  .formula-box{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--navy-deep);
    background:#f4f7fa;
    border:1px solid var(--line);
    border-left:4px solid var(--saffron);
    padding:6px 10px;
    margin-bottom:8px;
    overflow-x:auto;
    white-space:nowrap;
  } */
   .formula-box {

     font-family: var(--mono);

     font-size: 15px;

   }


   .formula-box .frac {
     display: inline-flex;
     flex-direction: column;
     vertical-align: middle;
     text-align: center;
     margin: 0 5px;
     line-height: 1.1;
   }

   .formula-box .frac .top {
     border-bottom: 1px solid var(--navy-deep);
     padding: 0 3px;
   }

   .formula-box .frac span {
     padding: 0 3px;
   }

   /*
  .row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:16px;
    align-items:end;
  }
    */
   @media(max-width:680px) {
     .row {
       grid-template-columns: 1fr;
     }
   }

   /*
  .field label{
    display:block;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:4px;
  } */

   .field label {

     font-family: var(--body);

     font-weight: 600;

     font-size: 12px;

     letter-spacing: 1px;

   }




   select,
   input[type=number] {
     width: 100%;
     font-family: var(--sans);
     font-size: 15.5px;
     padding: 7px 9px;
     border: 1px solid #aebccb;
     border-radius: 3px;
     background: #fff;
     color: var(--ink);
     outline: none;
   }

   select:focus,
   input[type=number]:focus {
     border-color: var(--navy);
     box-shadow: 0 0 0 3px rgba(11, 46, 89, 0.12);
   }

   .km-chip {
     display: inline-block;
     margin-top: 5px;
     font-family: var(--mono);
     font-size: 12.5px;
     color: #fff;
     background: var(--green);
     padding: 2px 8px;
     border-radius: 10px;
   }

   .swap-btn {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 1px solid var(--navy);
     background: #fff;
     color: var(--navy);
     cursor: pointer;
     font-size: 18.5px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     transition: background .15s ease, color .15s ease, transform .2s ease;
   }

   .swap-btn:hover {
     background: var(--navy);
     color: #fff;
     transform: rotate(180deg);
   }

   .arrow-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     margin: 14px 0 16px;
     color: var(--muted);
     font-family: var(--mono);
     font-size: 13px;
   }

   .arrow-row .line {
     flex: 1;
     height: 1px;
     background: var(--line);
     max-width: 200px;
   }

   .dose-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     margin-top: 4px;
   }

   @media(max-width:680px) {
     .dose-row {
       grid-template-columns: 1fr;
     }
   }

   .result-panel {
     margin-top: 8px;
     border: 1px solid var(--green);
     background: #f2f9f5;
     border-radius: 4px;
     overflow: hidden;
   }


   .result-panel .rp-head {
     background: var(--green);
     color: #1f2937;
     font-weight: 700;
     font-family: var(--mono);
     font-size: 15px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     padding: 6px 14px;
   }


   .result-panel .rp-body {
     padding: 10px 12px 12px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
   }

   @media(max-width:560px) {
     .result-panel .rp-body {
       grid-template-columns: 1fr;
     }
   }

   .rp-item .l {
     font-family: var(--mono);
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--muted);
     margin-bottom: 4px;
   }

   /*
  .rp-item .v{
    font-family:var(--mono); font-size:27.5px; font-weight:700; color:var(--navy-deep);
  }

  */
   .rp-item .v {
     font-family: "Inter", sans-serif;
     font-size: 34px;
     font-weight: 800;
     color: #0b2e59;
   }

   .rp-item .v .u {
     font-size: 15px;
     color: var(--muted);
     font-weight: 400;
     margin-left: 4px;
   }

   /* ---- Km table section ---- */
   .km-section {
     margin-top: 34px;
   }

   .km-section .card-head {
     background: var(--navy-deep);
   }

   table {

     font-family: var(--body);

   }

   th {

     font-family: var(--body);

     font-weight: 700;

   }

   td {

     font-size: 15px;

   }

   /* table{ width:100%; border-collapse:collapse; font-size:14px; }
  
  th, td{ text-align:left; padding:5px 10px; border-bottom:1px solid var(--line); }
  th{
    font-family:var(--mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--muted); background:#f4f7fa; font-weight:600;
  }
  td.km{ font-family:var(--mono); color:var(--navy); font-weight:700; }
  td.dose-highlight{
    font-family:var(--mono);
    font-weight:700;
    color:var(--navy-deep);
    background:#fdecd6;
    border-left:2px solid var(--saffron);
    border-right:2px solid var(--saffron);
  }
*/

   thead th.dose-highlight-head {
     background: #fbdbb3;
     color: #ffffff;
   }

   /*
   thead th.dose-highlight-head {
     background: #fbdbb3;
     color: var(--navy-deep);
   } */

   tr.highlight td {
     background: #fff6ea;
   }

   tr.highlight td.dose-highlight {
     background: #fbdbb3;
   }

   tr:hover td {
     background: #eef4fa;
   }

   tr:hover td.dose-highlight {
     background: #f8d9ad;
   }

   .download-row {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     padding: 8px 12px 10px;
     border-top: 1px solid var(--line);
     background: #fbfcfd;
   }

   .download-label {
     font-family: var(--mono);
     font-size: 12.5px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: var(--muted);
     margin-right: 4px;
   }

   .dl-btn {
     font-family: var(--mono);
     font-size: 12.5px;
     letter-spacing: 0.03em;
     padding: 5px 13px;
     border: 1px solid var(--navy);
     background: #fff;
     color: var(--navy);
     border-radius: 3px;
     cursor: pointer;
     transition: background .15s ease, color .15s ease;
   }

   .dl-btn:hover {
     background: var(--navy);
     color: #fff;
   }

   .disclaimer {
     margin-top: 30px;
     font-size: 14px;
     color: var(--muted);
     line-height: 1.7;
     background: #fff;
     border: 1px solid var(--line);
     border-left: 4px solid var(--navy);
     padding: 14px 18px;
   }

   .disclaimer b {
     color: var(--navy);
   }

   /*
  .usage-note{
    margin-bottom:6px;
    font-size:12px;
    color:var(--navy-deep);
    line-height:1.3;
    background:#eaf3f0;
    border:1px solid #bfdccf;
    border-left:4px solid var(--green);
    padding:4px 12px;
    border-radius:3px;
    flex-shrink:0;
  }
  .usage-note b{ color:var(--green); }

  */
   .usage-note {
     margin-bottom: 6px;
     font-size: 16px;
     /* Increased from 12px */
     color: var(--navy-deep);
     line-height: 1.6;
     /* Increased for readability */
     background: #eaf3f0;
     border: 1px solid #bfdccf;
     border-left: 4px solid var(--green);
     padding: 10px 14px;
     /* Increased padding */
     border-radius: 3px;
     flex-shrink: 0;
   }

   .usage-note b {
     color: var(--green);
     font-size: 17px;
   }

   .diagram-card img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: contain;
   }

   @media (max-width:991px) {

     .main-grid {
       grid-template-columns: 1fr;
     }

   }

   .cite {
     margin-top: 4px;
     font-size: 11.5px;
     color: var(--muted);
     font-style: italic;
     text-align: left;
   }

   .footer-band {
     margin-top: 0;
     background: var(--navy-deep);
     color: #9fb3c8;
     font-family: var(--mono);
     font-size: 10px;
     text-align: center;
     padding: 3px;
     letter-spacing: 0.03em;
     flex-shrink: 0;
   }