/* FormCheckRx — Optimized CSS
   © 2026 David B Knight. All Rights Reserved.
   Proprietary. Copyright Registration Case #1-15132775161
   System fonts only. Zero external requests. Renders in <1ms. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  --bg:#08111f;--bg2:#0d1b2e;--bg3:#112240;
  --blue:#2563eb;--blue2:#1d4ed8;--cyan:#06b6d4;
  --green:#2ed98a;--yellow:#f5bc42;--red:#f05a5a;--purple:#a78bfa;--teal:#0d9488;
  --bdr:rgba(90,140,220,.18);--bdr2:rgba(90,140,220,.09);
  --t:#dce9f8;--t2:#7a9fc8;--t3:#3a5878;
  /* System font stack — renders instantly, zero network */
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif;
  --mono:'SF Mono','Cascadia Code','Consolas','Liberation Mono',monospace;
}

html,body{
  background:var(--bg);color:var(--t);
  font-family:var(--font);min-height:100vh;
  line-height:1.5;overflow-x:hidden;
  /* Prevent layout shift from scrollbar appearance */
  overflow-y:scroll;
}

/* === HEADER === */
#hdr{
  position:sticky;top:0;z-index:99;
  background:rgba(8,17,31,.97);border-bottom:1px solid var(--bdr);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:11px 14px 0;
  /* GPU-accelerated compositing — no repaints on scroll */
  will-change:transform;transform:translateZ(0);
}
#hdr-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#logo{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-size:18px;box-shadow:0 0 14px rgba(37,99,235,.4);
}
#brand{flex:1;min-width:0}
#brand-name{font-size:16px;font-weight:700;letter-spacing:.02em;color:#7db5f5;white-space:nowrap}
#brand-name span{color:var(--cyan)}
#brand-sub{font-size:9px;color:var(--t3);letter-spacing:.06em;margin-top:1px}
#live-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--green);box-shadow:0 0 8px var(--green);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* === SEARCH ROW === */
#search-row{display:flex;gap:8px;margin-bottom:10px}
#si{
  flex:1;background:var(--bg3);
  border:1.5px solid var(--bdr);border-radius:11px;
  padding:11px 14px;color:var(--t);font-size:16px;
  font-family:var(--font);outline:none;
  transition:border-color .15s;
  /* Prevent iOS zoom on focus */
  -webkit-appearance:none;
}
#si:focus{border-color:var(--blue)}
#si::placeholder{color:var(--t3)}
/* Remove browser search input decorations */
#si::-webkit-search-decoration,
#si::-webkit-search-cancel-button{display:none}
#sb{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  border:none;border-radius:11px;padding:11px 20px;
  color:#fff;font-weight:700;font-size:14px;
  cursor:pointer;font-family:var(--font);
  white-space:nowrap;min-width:76px;
  transition:opacity .15s;
  box-shadow:0 2px 12px rgba(37,99,235,.35);
  /* Touch-friendly tap target */
  min-height:44px;
}
#sb:disabled{opacity:.45;cursor:not-allowed}
#sb:active:not(:disabled){opacity:.75}

/* === TABS === */
#tabs{display:flex;border-bottom:1px solid var(--bdr2)}
.tab{
  background:none;border:none;font-family:var(--font);
  font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--t3);
  padding:7px 16px 5px;border-bottom:2px solid transparent;
  cursor:pointer;margin-bottom:-1px;
  transition:color .15s;min-height:36px;
}
.tab.on{color:#7db5f5;border-bottom-color:var(--blue)}

/* === MAIN CONTENT === */
main{padding:14px 13px 80px;max-width:820px;margin:0 auto}

/* === WELCOME === */
#welcome-inner{text-align:center;padding:18px 0 14px}
#welcome-ico{font-size:38px;margin-bottom:10px}
#welcome-inner h2{font-size:17px;font-weight:700;color:var(--t2);margin-bottom:4px}
#welcome-inner p{font-size:12px;color:var(--t3)}
.section-lbl{font-size:10px;color:var(--t3);font-weight:700;letter-spacing:.09em;margin-bottom:8px}

/* === CHIPS === */
#chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip{
  background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.22);
  border-radius:18px;padding:5px 13px;color:#7db5f5;
  font-size:12px;font-family:var(--font);cursor:pointer;
  transition:background .12s;
  /* Touch-friendly */
  min-height:32px;display:flex;align-items:center;
}
.chip:active{background:rgba(37,99,235,.25)}

/* === PLAN LIST === */
.plan-item{
  display:flex;align-items:flex-start;gap:8px;
  padding:8px 12px;margin-bottom:5px;
  background:rgba(255,255,255,.02);border:1px solid var(--bdr2);
  border-radius:8px;
}
.plan-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:5px}
.plan-dot.adding{background:var(--yellow)}
.plan-dot.dual{background:var(--purple)}
.plan-info{flex:1;min-width:0}
.plan-name{font-size:12px;color:var(--t2);font-weight:600}
.plan-meta{font-size:10px;color:var(--t3);margin-top:1px}

#update-notice{
  background:rgba(245,188,66,.06);border:1px solid rgba(245,188,66,.18);
  border-radius:8px;padding:8px 12px;margin-top:10px;
  font-size:11px;color:#c49520;line-height:1.55;
}

/* === SKELETON LOADING (appears in <16ms) === */
.skel-hero,.skel-card{
  background:linear-gradient(90deg,var(--bg3) 25%,rgba(255,255,255,.04) 50%,var(--bg3) 75%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;
  border-radius:13px;margin-bottom:12px;
}
.skel-hero{height:120px}
.skel-card{height:60px}
.skel-card.short{height:44px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* === ERROR === */
#err-box{
  background:rgba(240,90,90,.08);border:1px solid rgba(240,90,90,.28);
  border-radius:10px;padding:12px 14px;color:#f07070;
  font-size:13px;margin-bottom:12px;line-height:1.55;
}

/* === RESULT CARDS === */
.card{
  background:rgba(255,255,255,.025);border:1px solid var(--bdr);
  border-radius:13px;margin-bottom:12px;overflow:hidden;
}
.card-hdr{
  padding:9px 14px;border-bottom:1px solid var(--bdr2);
  background:rgba(255,255,255,.02);font-size:10px;
  color:#7db5f5;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;
}
.card-body{padding:14px}
.hero-card{
  background:linear-gradient(135deg,rgba(25,60,160,.2),rgba(8,17,31,.5));
  border:1px solid rgba(37,99,235,.3);
}
.drug-name{font-size:21px;font-weight:700;color:var(--t);margin-bottom:2px}
.drug-sub{font-size:12px;color:var(--t3);margin-bottom:2px}

/* === BADGES === */
.badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 10px;border-radius:20px;font-size:11px;
  font-weight:700;white-space:nowrap;border:1px solid transparent;
}
.b-pref{background:rgba(46,217,138,.12);color:#2ed98a;border-color:rgba(46,217,138,.28)}
.b-nonp{background:rgba(245,188,66,.12);color:#f5bc42;border-color:rgba(245,188,66,.28)}
.b-carve{background:rgba(6,182,212,.12);color:#06b6d4;border-color:rgba(6,182,212,.28)}
.b-no{background:rgba(240,90,90,.12);color:#f05a5a;border-color:rgba(240,90,90,.28)}
.b-unk{background:rgba(100,116,139,.1);color:#64748b;border-color:rgba(100,116,139,.2)}

/* === RESTRICTION TAGS === */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tag{
  background:rgba(245,188,66,.09);color:#c49520;
  border:1px solid rgba(245,188,66,.2);border-radius:5px;
  padding:2px 7px;font-size:10px;font-weight:700;
  font-family:var(--mono);
}

/* === ALERT BOXES === */
.alert{border-radius:8px;padding:9px 12px;font-size:12px;line-height:1.55;margin-bottom:10px}
.alert-carve{background:rgba(6,182,212,.07);border:1px solid rgba(6,182,212,.2);color:#22d3ee}
.alert-change{background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.2);color:#6ee7b7}
.alert-cross{background:rgba(13,148,136,.08);border:1px solid rgba(13,148,136,.25);color:#5eead4}
.alert-dual{background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.22);color:#c4b5fd}
.alert-med{background:rgba(245,188,66,.06);border:1px solid rgba(245,188,66,.2);color:#c49520}
.alert-warn{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);color:#d97706}

/* === DETAIL ROWS === */
.drow{padding:9px 0;border-bottom:1px solid var(--bdr2);display:flex;gap:10px}
.drow:last-child{border-bottom:none}
.dlbl{
  font-size:10px;color:var(--t3);font-weight:700;
  letter-spacing:.06em;font-family:var(--mono);
  min-width:82px;padding-top:1px;flex-shrink:0;text-transform:uppercase;
}
.dval{font-size:12px;color:var(--t2);line-height:1.5}

/* === PLAN ROWS === */
.plan-row{
  padding:10px 14px;border-bottom:1px solid var(--bdr2);
  display:flex;align-items:flex-start;gap:10px;
}
.plan-row:last-child{border-bottom:none}
.pr-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.pr-name{font-size:13px;font-weight:600;color:#c4d8ef;margin-bottom:4px}
.pr-pbm{font-size:10px;color:var(--t3);margin-bottom:3px;font-style:italic}
.pr-note{font-size:11px;color:var(--t3);margin-top:3px}

/* === ALT / SIM ROWS === */
.alt-row,.sim-row{
  padding:10px 14px;border-bottom:1px solid var(--bdr2);
  display:flex;align-items:flex-start;gap:10px;
}
.alt-row:last-child,.sim-row:last-child{border-bottom:none}
.alt-name{font-size:13px;font-weight:600;color:#7db5f5;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(37,99,235,.35)}
.sim-name{font-size:13px;font-weight:600;color:var(--purple);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(167,139,250,.35)}
.sub-note{font-size:11px;color:var(--t3);margin-top:2px}
.sub-cls{font-size:11px;color:var(--teal);margin-top:1px}
.sub-gen{font-size:11px;color:var(--t3);font-style:italic}

/* === PA RESOURCES === */
.pa-res{
  background:rgba(255,255,255,.02);border:1px solid var(--bdr2);
  border-radius:8px;padding:9px 12px;margin-bottom:12px;
  font-size:11px;color:var(--t3);line-height:1.6;
}
.pa-res strong{color:var(--t2)}

/* === NOTES + DISCLAIMER === */
.note-box{
  background:rgba(46,217,138,.04);border:1px solid rgba(46,217,138,.15);
  border-radius:10px;padding:11px 13px;font-size:12px;color:#46b87a;
  line-height:1.6;margin-bottom:12px;
}
.disc{
  background:rgba(255,255,255,.01);border:1px solid var(--bdr2);
  border-radius:9px;padding:10px 13px;font-size:10px;
  color:#253a52;line-height:1.6;margin-bottom:12px;
}

/* === EXPORT BUTTON === */
.export-btn{
  background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.28);
  border-radius:8px;padding:6px 12px;color:#7db5f5;
  font-size:11px;font-weight:700;cursor:pointer;
  font-family:var(--font);display:inline-flex;align-items:center;gap:5px;
  transition:background .12s;
}
.export-btn:active{background:rgba(37,99,235,.22)}

/* === COMPARISON CARD === */
.cmp-row{display:flex;gap:10px;padding:8px 14px;border-bottom:1px solid var(--bdr2)}
.cmp-row:last-child{border-bottom:none}
.cmp-lbl{font-size:10px;font-weight:700;color:var(--t3);min-width:90px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono);padding-top:2px}

/* === HISTORY === */
.hist-item{
  background:rgba(255,255,255,.025);border:1px solid var(--bdr2);
  border-radius:10px;padding:11px 13px;margin-bottom:8px;
  cursor:pointer;display:flex;align-items:center;gap:10px;
  transition:background .12s;
}
.hist-item:active{background:var(--bg3)}
.hist-name{font-size:13px;font-weight:600;color:var(--t)}
.hist-time{font-size:10px;color:var(--t3);margin-top:1px}
#hist-empty{text-align:center;padding:50px 20px;color:var(--t3);font-size:14px}

/* === PRINT STYLES FOR PDF EXPORT === */
@media print{
  #hdr,#tabs,.export-btn,.chip,#chips,.section-lbl,#plan-list,#update-notice,.disc{display:none}
  body{background:#fff;color:#1e293b;font-family:Arial,sans-serif}
  .card{border:1px solid #e2e8f0;border-radius:4px;page-break-inside:avoid}
  .hero-card{background:#eff6ff}
  .badge{border:1px solid #94a3b8}
  .b-pref{background:#d1fae5;color:#065f46}
  .b-nonp{background:#fef3c7;color:#92400e}
  .b-carve{background:#ecfeff;color:#0e7490}
  .b-no{background:#fee2e2;color:#991b1b}
}

/* === RESPONSIVE === */
@media(max-width:480px){
  main{padding:12px 11px 70px}
  #sb{padding:11px 14px;min-width:64px;font-size:13px}
}