/* LegacyRx · The Intake · students, residents, and the first years in practice
   Loads after site.css and rx.css. The theme (paper sheet on the navy desk,
   ink text, bronze for gold-as-text, real gold for fills) comes from rx.css,
   whose container selectors cover #inApp and #inResults as well. Everything
   below is specific to this product.

   The Prescription is measured in money. This one is measured in time, so the
   hero number is an hourly wage rather than a portfolio, and the charts carry
   the comparisons a student has never been shown. */

:root{
  /* chart marks. Brand-family but lifted into a range that actually works as
     data ink on the ivory sheet: every one of the six checks in the dataviz
     validator passes on surface #F4F0E6, contrast included. Do not swap these
     for the brand text golds, which fail the lightness and chroma floors. */
  --in-you:#A87C1E;        /* the reader */
  --in-them:#39619F;       /* everyone else, the comparison */
  --in-cost:#A34A3A;       /* what a delay costs */
  --in-grid:rgba(16,32,74,.14);
}

/* ---------- the interstitial between screens ---------- */
.in-beat{
  margin-top:22px;padding:16px 20px;border-radius:var(--r-inner);
  background:rgba(217,179,108,.10);border:1px solid rgba(140,106,47,.3);
  display:flex;gap:14px;align-items:flex-start;max-width:640px}
.in-beat .tag{
  flex:none;font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(140,106,47,.45);border-radius:999px;padding:5px 9px;margin-top:1px}
.in-beat p{margin:0;font-size:13.5px;line-height:1.7;color:var(--dim)}

/* ---------- 01 · the hero finding ---------- */
.in-heroblock{
  display:grid;grid-template-columns:minmax(260px,.9fr) 1.5fr;gap:clamp(20px,3vw,34px);align-items:stretch;
  border-radius:var(--r-card);padding:clamp(22px,3vw,30px);
  background:var(--glass-bg);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px rgba(3,6,16,.45)}
.in-hero{
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  background:var(--rx-flat);border:1px solid var(--rx-flat-line);border-radius:var(--r-inner);padding:30px 22px}
.in-hero .hv{font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,64px);color:var(--gold-hi);line-height:1}
.in-hero .hl{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:2px;
  font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory)}
.in-hero .hn{margin:10px 0 0;font-size:13px;color:var(--dim);line-height:1.6}

/* the honest qualifier under the headline number: what you earn is not what
   you keep. Kyle asked for tax, interest, living costs and opportunity cost to
   be named rather than left implied. */
.in-band{
  margin-top:16px;border-radius:var(--r-card);padding:clamp(22px,3vw,30px);
  background:var(--glass-bg);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 24px 50px rgba(3,6,16,.4)}
.in-band h4{display:flex;align-items:center;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);margin:0 0 14px}
.in-band .in-legend b{font-family:var(--mono);font-weight:400;color:var(--ivory);margin-left:2px}
.in-band svg{display:block;width:100%;height:auto}
.in-band .note{margin:14px 0 0;font-size:13.5px;color:var(--dim);line-height:1.75;max-width:82ch}
.in-band .note b{font-family:var(--mono);font-weight:400;color:var(--gold-hi)}
:is(#rxResults,#inResults).paper .in-band{-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* ---------- 03 · the comparisons ---------- */
.in-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.in-chart{
  border-radius:var(--r-card);padding:clamp(22px,3vw,30px);
  background:var(--glass-bg);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 24px 50px rgba(3,6,16,.4)}
.in-chart h4{display:flex;align-items:center;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);margin:0 0 6px}
.in-chart .sub{margin:0 0 18px;font-size:13.5px;color:var(--dim);line-height:1.6;max-width:52ch}
.in-chart .src{margin:16px 0 0;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--sub);line-height:1.7}
.in-chart figure{margin:0}
.in-chart svg{display:block;width:100%;height:auto;overflow:visible}
.in-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px}
.in-legend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim)}
.in-legend i{width:11px;height:11px;border-radius:3px;flex:none;display:block}
/* the reader's own marker, so identity is never carried by color alone */
.in-youtag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--in-you)}

/* a plain table under every chart, so the numbers are readable without color */
.in-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
.in-table th,.in-table td{text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--in-grid);color:var(--dim)}
.in-table th{font-family:var(--display);font-weight:400;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sub)}
.in-table td:last-child,.in-table th:last-child{text-align:right;font-family:var(--mono);color:var(--ivory)}
.in-table tr.you td{color:var(--ivory);font-weight:600}
.in-table tr.you td:first-child::after{content:" · you";font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--in-you)}
.in-tabletoggle{background:none;border:none;padding:6px 0 0;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.in-tabletoggle:hover{color:var(--ivory)}

/* ---------- 05 · the promise, handed back ---------- */
.in-promise{
  display:grid;grid-template-columns:minmax(200px,.85fr) 1.6fr;gap:clamp(24px,4vw,54px);
  border-radius:var(--r-card);padding:clamp(26px,3.6vw,38px);
  background:linear-gradient(135deg,rgba(217,179,108,.14),rgba(16,32,74,.4) 60%);
  border:1px solid rgba(217,179,108,.34);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 55px rgba(3,6,16,.42)}
.in-promise .pr-head h3{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ivory);
  font-size:clamp(18px,2.4vw,28px);line-height:1.25;letter-spacing:.05em;margin:0}
.in-promise .pr-list{margin:0 0 16px;font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.8vw,20px);line-height:1.5;letter-spacing:.02em;color:var(--gold-hi)}
.in-promise .lede{margin:0;font-size:15.5px;color:var(--dim);line-height:1.8;max-width:66ch}

/* ---------- 06 · the letter ---------- */
.in-letter-label{display:block;margin:22px 0 8px;
  font-family:var(--display);font-size:9px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.in-letter{
  width:100%;min-height:130px;padding:16px 18px;border-radius:14px;resize:vertical;
  background:var(--rx-flat);border:1px solid var(--rx-flat-line);color:var(--ivory);
  font-family:var(--text);font-size:15px;line-height:1.7;transition:border-color .4s var(--ease)}
.in-letter:focus{outline:none;border-color:rgba(217,179,108,.55)}
.in-letter::placeholder{color:var(--sub)}
.in-letter-note{margin:8px 0 0;font-size:12.5px;color:var(--sub)}

/* the next-steps list moved to rx.css as .rx-onward, shared with the
   Prescription, so its hairlines flip with the paper theme */

/* ---------- paper mode, the pieces rx.css does not already cover ---------- */
:is(#rxResults,#inResults).paper .in-heroblock,
:is(#rxResults,#inResults).paper .in-chart{
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
:is(#rxResults,#inResults).paper .in-hero{background:linear-gradient(180deg,#FFFEFB,#FFFDF9 40%,#FBF8F1);
  border-color:rgba(16,32,74,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px rgba(16,32,74,.12)}
:is(#rxResults,#inResults).paper .in-promise{
  background:linear-gradient(135deg,rgba(217,179,108,.22),rgba(255,253,249,.92) 60%);
  border-color:rgba(140,106,47,.45);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 14px 34px rgba(16,32,74,.1)}
:is(#rxResults,#inResults).paper .in-letter{background:#fff;border-color:rgba(16,32,74,.25);color:#0A1128}
:is(#rxResults,#inResults).paper .in-letter::placeholder{color:#8A93AD}
:is(#rxApp,#inApp).paper .in-beat{background:rgba(217,179,108,.16);border-color:rgba(140,106,47,.4)}

/* ---------- mobile ---------- */
@media (max-width:1080px){
  .in-charts{grid-template-columns:1fr}
}
@media (max-width:940px){
  .in-heroblock,.in-promise{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .in-hero{padding:24px 16px}
  .in-beat{flex-direction:column;gap:10px}
}

/* ---------- the one page (print) ----------
   Print-only classes must not reuse a site.css class name: .hero and .col in
   site.css blew an earlier one-pager to two pages. These are all in- prefixed. */
#inPrint{display:none}
@media print{
  #bg,#page,#toast{display:none !important}
  body{background:#fff !important}
  #inPrint{display:block;color:#10204A;font-family:'Manrope',Helvetica,Arial,sans-serif;font-size:11px;line-height:1.55}
  #inPrint .in-mast{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #10204A;padding-bottom:9px;margin-bottom:12px}
  #inPrint .in-mast h1{font-family:'Syncopate',sans-serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0;color:#0A1128}
  #inPrint .in-mast .mk{font-family:'Syncopate',sans-serif;font-size:10px;letter-spacing:.1em;color:#8C6A2F}
  #inPrint .in-meta{display:flex;gap:22px;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:#5A6785;margin-bottom:12px}
  #inPrint .in-top{display:flex;gap:14px;align-items:stretch;margin-bottom:12px}
  #inPrint .in-top .bx{flex:none;width:120px;border:2px solid #D9B36C;border-radius:8px;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 6px}
  #inPrint .in-top .bx b{font-family:'Syncopate',sans-serif;font-size:22px;color:#8C6A2F;line-height:1}
  #inPrint .in-top .bx span{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#5A6785;margin-top:5px;line-height:1.4}
  #inPrint .in-top .dg{flex:1}
  #inPrint .in-top .dg h2{font-family:'Syncopate',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#0A1128;margin:0 0 5px;line-height:1.25}
  #inPrint .in-top .dg p{margin:0;font-size:10.5px;color:#3D4A6B;line-height:1.5}
  #inPrint .in-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}
  #inPrint .in-cl h2{font-family:'Syncopate',sans-serif;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#8C6A2F;margin:0 0 6px;border-bottom:1px solid #D8DCE8;padding-bottom:4px}
  #inPrint .in-cl div{display:flex;justify-content:space-between;gap:8px;padding:2px 0;font-size:10px}
  #inPrint .in-cl div b{font-weight:600;color:#0A1128}
  #inPrint .in-moves{margin-bottom:12px}
  #inPrint .in-moves h2,#inPrint .in-note h2,#inPrint .in-ask h2{font-family:'Syncopate',sans-serif;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#8C6A2F;margin:0 0 6px}
  #inPrint .in-moves article{margin-bottom:8px;padding-left:11px;border-left:2px solid #D9B36C}
  #inPrint .in-moves h3{font-size:11px;margin:0 0 2px;color:#0A1128}
  #inPrint .in-moves p{margin:0;font-size:10px;color:#3D4A6B}
  #inPrint .in-note{margin-bottom:10px;padding:9px 12px;border:1px solid #D9B36C;border-radius:6px}
  #inPrint .in-note p{margin:0;font-size:10.5px;color:#0A1128;font-style:italic}
  #inPrint .in-ask{margin-bottom:10px}
  #inPrint .in-ask ol{margin:0;padding-left:15px}
  #inPrint .in-ask li{font-size:10px;color:#3D4A6B;margin-bottom:2px}
  #inPrint .in-close{border-top:1px solid #D8DCE8;padding-top:10px;display:flex;justify-content:space-between;
    align-items:baseline;gap:14px;font-size:11px;color:#0A1128;font-weight:600}
  #inPrint .in-close span{font-family:'Syncopate',sans-serif;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#8C6A2F;font-weight:400}
  #inPrint .in-legal{margin-top:10px;font-size:8px;color:#7C87A8;line-height:1.5}
  .rx-pop{display:none !important}
}