/* Transplant Benefit Score calculator — web version styles */
:root {
  --ink: #1f2937; --muted: #6b7280; --need: #b45309; --utility: #0e7490; --surface: #f8fafc; --border: #e5e7eb;
  --primary: #0e7490; --radius: .6rem; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 6px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: #fff; font: 16px/1.5 Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3 { line-height: 1.25; }
a { color: var(--primary); }
code { font-size: .85em; color: #9d174d; word-break: break-word; }
[hidden] { display: none !important; }

/* Top bar and page */
.topbar { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; padding: .9rem 16px .6rem; border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand-sub { font-weight: 400; color: var(--muted); margin-left: .4rem; font-size: .85em; }
.nav-note { color: var(--muted); font-size: .85rem; }
.page { padding: 0 16px 2rem; max-width: 1600px; margin: 0 auto; }
.intro { max-width: 62rem; margin: 1rem 0 1.25rem; }
.intro h1 { font-size: 1.9rem; margin: 0 0 .6rem; letter-spacing: -0.01em; }
.intro p { font-size: 1.05rem; margin: 0 0 .5rem; }
.intro p.top-notice { background: #fef3c7; border: 1px solid #f59e0b; border-left-width: 4px; border-radius: var(--radius); padding: .6rem .9rem; margin: 0 0 1rem; font-size: .95rem; }
.warning { background: #fef3c7; border: 1px solid #f59e0b; border-radius: var(--radius); padding: .75rem 1rem; }
.footer { color: var(--muted); font-size: .8rem; border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: .75rem; }

/* Two-column layout; the results column stays in view and scrolls within itself on wide screens */
.layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; align-items: start; }
.inputs-col, .results-col { min-width: 0; }
@media (min-width: 992px) {
  .results-col { position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
}
@media (max-width: 991.98px) { .layout { grid-template-columns: minmax(0, 1fr); } }

/* Cards and panels */
.card { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); margin-bottom: 1rem; overflow: hidden; }
.card-header { margin: 0; padding: .7rem 1rem; font-size: 1rem; font-weight: 600; background: var(--surface); border-bottom: 1px solid var(--border); }
.card-body { padding: 1rem; }
.card-body > :last-child { margin-bottom: 0; }
.panel { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .6rem; background: #fff; }
.panel > summary { cursor: pointer; padding: .8rem 1rem; font-weight: 600; list-style-position: inside; }
.panel[open] > summary { border-bottom: 1px solid var(--border); }
.panel-body { padding: 1rem; }

/* Form fields */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 575.98px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.field { margin: 0 0 1rem; min-width: 0; border: 0; padding: 0; }
.field > label, .field > legend { display: block; margin-bottom: .3rem; font-size: .95rem; padding: 0; }
label.inline { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1.1rem; font-size: .95rem; cursor: pointer; }
label.check { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .6rem; font-size: .95rem; cursor: pointer; }
label.check input { margin-top: .3rem; }
input[type=number], select { width: 100%; max-width: 22rem; font: inherit; color: inherit; padding: .45rem .6rem; border: 1px solid #cbd5e1; border-radius: .4rem; background: #fff; }
select { appearance: auto; }
input[type=number]:focus, select:focus { outline: 2px solid rgba(14,116,144,.35); outline-offset: 1px; border-color: var(--primary); }
input[type=radio], input[type=checkbox] { accent-color: var(--primary); width: 1.05rem; height: 1.05rem; }
.form-help { color: var(--muted); font-size: .85rem; line-height: 1.4; margin: .2rem 0 .75rem; }
.footnote { font-style: italic; margin-top: .25rem; }

/* Slider with a box for an exact value */
.slider-box .sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; gap: .6rem; align-items: center; }
.slider-box .form-help { margin-top: .25rem; margin-bottom: 0; }
.slider-box input[type=number] { max-width: none; padding-left: .4rem; padding-right: .3rem; }
input[type=range] { width: 100%; accent-color: var(--primary); height: 1.6rem; margin: 0; }

/* Buttons */
.btn { font: inherit; font-size: .9rem; padding: .4rem .8rem; border: 1px solid #94a3b8; border-radius: .4rem; background: #fff; color: var(--ink); cursor: pointer; }
.btn:hover { background: var(--surface); }
.btn-primary { border-color: var(--primary); color: var(--primary); }
.btn.wide { width: 100%; margin-bottom: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.btn-stack { display: grid; gap: .4rem; }

/* Section chooser */
.show-card .card-body { padding: .75rem 1rem; }
.show-card fieldset { border: 0; margin: 0; padding: 0; }
.show-legend { font-weight: 600; margin-bottom: .3rem; padding: 0; }
.show-list { display: flex; flex-wrap: wrap; gap: .15rem 0; }
.show-list label.check { display: inline-flex; margin: 0 1rem .2rem 0; font-size: .9rem; align-items: center; }
.show-list label.check input { margin-top: 0; }

/* Headline */
.headline-card { border-left: 6px solid var(--utility); }
.headline-label { color: var(--muted); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.headline-value { font-size: 3.4rem; font-weight: 700; line-height: 1.1; color: var(--utility); font-variant-numeric: tabular-nums; margin: .25rem 0; }
.headline-text { font-size: 1.08rem; line-height: 1.55; margin: .4rem 0 0; }

/* Stat boxes */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.stat-box { border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .85rem; min-width: 0; }
.stat-label { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--muted); font-size: .75rem; margin-top: .15rem; }
.stat-primary { border-left: 5px solid var(--utility); } .stat-primary .stat-value { color: var(--utility); }
.stat-need { border-left: 5px solid var(--need); } .stat-need .stat-value { color: var(--need); }
.stat-utility { border-left: 5px solid var(--utility); } .stat-utility .stat-value { color: var(--utility); }
.stat-muted .stat-value { color: var(--muted); }
@media (max-width: 575.98px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cohort-line { color: var(--muted); font-size: .9rem; }

/* Time alive bars */
.days-row { margin-bottom: .9rem; }
.days-label { font-size: .95rem; margin-bottom: .25rem; }
.days-track { height: 1.6rem; background: #f3f4f6; border-radius: .3rem; overflow: hidden; }
.days-bar { height: 100%; border-radius: .3rem; transition: width .2s ease; }
.days-row.need .days-bar { background: var(--need); } .days-row.util .days-bar { background: var(--utility); }
.days-row.need strong { color: var(--need); } .days-row.util strong { color: var(--utility); }
.days-axis { position: relative; height: 1.2rem; margin: -.35rem .9rem .4rem 0; color: var(--muted); font-size: .78rem; }
.days-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.days-axis span:first-child { transform: none; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { border-bottom: 2px solid #cbd5e1; white-space: nowrap; }
.table tbody tr:nth-child(odd) { background: var(--surface); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-sm { font-size: .82rem; }
.table-sm th, .table-sm td { padding: .3rem .4rem; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.model-table th { white-space: normal; }

/* Charts */
.chart { width: 100%; overflow: hidden; }
.chart svg { display: block; font-family: inherit; }
.chart-title { font-weight: 600; margin: .25rem 0 .2rem; }
.legend { font-size: .85rem; color: var(--ink); margin: 0 0 .5rem; }
.chip { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin: 0 .3rem 0 .6rem; vertical-align: -1px; }
.legend .chip:first-child { margin-left: 0; }
.caveats li { margin-bottom: .5rem; line-height: 1.5; }
.disclaimer { color: #991b1b; font-size: .9rem; margin-top: 1rem; }
pre#summary { white-space: pre-wrap; word-break: break-word; background: var(--surface); border: 1px solid var(--border); border-radius: .4rem; padding: .75rem; font-size: .82rem; }

/* What drives the score */
.drivers-grid > div { min-width: 0; margin-bottom: 1rem; }
.drv-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.2rem; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.drv-label { font-size: .82rem; text-align: right; line-height: 1.2; }
.drv-track { position: relative; height: 1.1rem; }
.drv-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ink); }
.drv-bar { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.drv-val { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.drv-axis { text-align: center; }

/* About */
.about h2 { font-size: 1.3rem; margin: .5rem 0 .75rem; }
.about .card-header { font-size: .98rem; }
details > summary { cursor: pointer; font-weight: 600; margin-top: .5rem; }

/* Compact results strip, phones and tablets only: stays at the top while the inputs are edited */
.mobile-strip { display: none; }
@media (max-width: 991.98px) {
  .mobile-strip { display: flex; position: sticky; top: 0; z-index: 50; gap: .5rem; margin: 0 -16px .75rem; padding: .5rem .75rem;
                  background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
  .ms-item { flex: 1 1 0; min-width: 0; border-left: 4px solid var(--border); padding-left: .45rem; display: flex; flex-direction: column; justify-content: flex-end; }
  .ms-primary { flex: 0 0 4.2rem; border-color: var(--utility); }
  .ms-need { border-color: var(--need); } .ms-utility { border-color: var(--utility); }
  .ms-label { display: block; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; }
  .ms-need .ms-label, .ms-utility .ms-label { min-height: 1.5rem; display: flex; align-items: flex-end; }
  .ms-value { display: block; font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--utility); font-variant-numeric: tabular-nums; }
}
.ms-bar-wrap { position: relative; height: 1.45rem; border-radius: .3rem; background: #f3f4f6; overflow: hidden; margin-top: .15rem; }
.ms-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .3rem; transition: width .25s ease; }
.ms-need .ms-bar { background: var(--need); } .ms-utility .ms-bar { background: var(--utility); }
.ms-text { position: absolute; left: 0; right: 0; width: 100%; padding-left: .45rem; top: 0; line-height: 1.45rem; font-weight: 700; font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-need .ms-text-ink { color: var(--need); } .ms-utility .ms-text-ink { color: var(--utility); }
.ms-text-white { color: #fff; }
.ms-days { color: var(--muted); font-size: .66rem; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 575.98px) {
  .intro h1 { font-size: 1.5rem; }
  .headline-value { font-size: 2.8rem; }
  .drv-row { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) 2.8rem; }
}
@media print {
  .mobile-strip, .show-card, .inputs-col details, .btn { display: none !important; }
  .layout { grid-template-columns: 1fr; }
  .results-col { position: static; max-height: none; overflow: visible; }
}