/* Health tools (base.css loads first) */

/* cards (catalogue, other tools) */
.bp-tool-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bp-tool-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bp .bp-tool-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none}
.bp .bp-tool-card:hover{border-color:var(--seal);color:var(--ink)}
.bp-tool-card .bp-ico{grid-row:span 2;width:44px;height:44px;padding:10px;border-radius:12px;background:var(--mist);color:var(--seal)}
.bp .bp-tool-card h3{font-size:20px;line-height:1.3;align-self:center}
.bp-tool-card:hover h3{color:var(--seal);text-decoration:underline;text-underline-offset:3px}
.bp-tool-card p{font-size:16px;line-height:1.45;color:var(--ink2)}

/* catalogue */
.bp-tool-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px 48px;padding:40px 0;border-top:1px solid var(--line)}
.bp-tool-group:first-child{border-top:0;padding-top:0}
.bp .bp-tool-group h2,.bp .bp-tool-block h2,.bp .bp-tool-otherhead h2{font-size:clamp(26px,2.4vw,32px);line-height:1.15}

/* tool: form and result */
.bp-tool-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 64px;align-items:start}
.bp-tool-form{display:grid;gap:24px;min-width:0}
.bp-tool-row,.bp-tool-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* keep the boxes level */
.bp-tool-row--sub{row-gap:0}
.bp-tool-row--sub>.bp-field{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.bp-tool-row--sub label{align-self:end}
.bp-tool-lrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin-bottom:8px}
.bp .bp-tool-lrow label,.bp-tool-lab{margin:0;font-weight:700;font-size:15px}
.bp-tool-hint{margin:-2px 0 10px!important;font-size:15px;line-height:1.45;color:var(--ink2)}
.bp-tool-unit{flex:none;color:var(--ink2);font-size:16px;white-space:nowrap}
.bp .bp-tool-form .bp-input :focus-visible{outline:0}
.bp-tool-form .bp-input:has(:focus-visible){outline:3px solid #E7A600;outline-offset:2px}
.bp .bp-input input[type=date]{min-height:100%;text-align:left}
.bp-input input::-webkit-date-and-time-value{text-align:left}
.bp-tool-err{margin-top:8px!important;font-size:15px;line-height:1.4;font-weight:700;color:#8E141B}
.bp-tool-fit,.bp-tool-noscript{font-size:15px;line-height:1.5;color:var(--ink2)}
.bp-tool-noscript{margin-top:16px!important;text-align:center}
.bp-tool-form .bp-btn{min-width:240px}
.bp-tool-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;border:1px solid var(--line);font-size:16px;line-height:1.45}
.bp-tool-alert .bp-ico{color:var(--pulse);margin-top:1px}
.bp-tool-alert a{color:var(--pulse);font-weight:700;white-space:nowrap}

/* choice buttons */
.bp-seg{display:inline-flex;border:1.5px solid #C5C8E2;border-radius:12px;background:#fff;overflow:hidden;max-width:100%}
.bp-seg--full{display:flex}
.bp .bp-field .bp-seg label,.bp-seg label{position:relative;display:flex;flex:1 1 0;margin:0;font-size:16px;min-width:0}
.bp-seg label+label{border-left:1.5px solid #C5C8E2}
.bp-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bp-seg span{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0 14px;font-weight:700;line-height:1.2;text-align:center;color:var(--ink)}
.bp-seg--full span{min-height:51px}
.bp-seg label:hover span{background:var(--mist)}
.bp .bp-seg input:checked+span{background:var(--seal);color:#fff}
.bp-seg input:focus-visible+span{outline:3px solid #E7A600;outline-offset:-3px;border-radius:9px}
.bp-seg--yn span{min-width:76px}
.bp .bp-field .bp-seg--units label{flex:none}
.bp-seg--units span{white-space:nowrap}
.bp-tool-opts{display:grid;gap:8px}
.bp .bp-tool-opt{display:flex;align-items:center;gap:14px;min-height:56px;margin:0;padding:10px 16px;border:1.5px solid #C5C8E2;border-radius:12px;font-weight:400;font-size:17px;cursor:pointer}
.bp-tool-opt:hover,.bp-tool-opt:has(input:checked){border-color:var(--seal)}
.bp-tool-opt:has(input:checked){background:var(--mist)}
.bp-tool-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--seal)}
.bp-tool-opt b{display:block;line-height:1.3}
.bp-tool-opt small{display:block;font-size:15px;line-height:1.35;color:var(--ink2)}

/* heart checklist */
.bp .bp-tool-qs legend{padding:0;font-weight:700;font-size:18px;margin-bottom:6px}
.bp-tool-qlist{border-top:1px solid var(--line)}
.bp-tool-q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.bp-tool-q>p:first-child{font-size:17px;line-height:1.45}
.bp-tool-q .bp-tool-err{grid-column:1/-1;margin:0!important}
.bp-tool-q .bp-tool-now{grid-column:1/-1;margin:0}
.is-bad .bp-seg,.is-bad .bp-tool-opt{border-color:var(--pulse)}

/* result panel, the one raised object */
.bp-tool-out{position:sticky;top:24px;min-height:300px;padding:32px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 30px 60px -38px rgba(28,31,74,.45)}
.bp-tool-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:234px;text-align:center;color:var(--ink2)}
.bp-tool-empty .bp-ico{width:60px;height:60px;padding:16px;border-radius:50%;background:var(--mist);color:var(--seal)}
.bp .bp-res__h{font-size:20px;line-height:1.3}
.bp-res__fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:12px!important}
.bp-res__fig b{font-size:clamp(44px,4.6vw,60px);line-height:1.05;font-weight:700;letter-spacing:-.015em}
.bp-res__fig--date b{font-size:clamp(30px,3vw,38px);line-height:1.15;letter-spacing:-.005em}
.bp-res__fig span{font-size:17px;font-weight:700;color:var(--ink2)}
.bp-res__alt{margin-top:6px!important;font-size:16px;color:var(--ink2)}
.bp-res__badge{display:inline-flex;margin-top:14px!important;padding:6px 14px;border-radius:999px;font-weight:700;font-size:16px;line-height:1.35;background:var(--mist);color:var(--ink)}
[data-state=ok] .bp-res__badge{background:#E5F3EC;color:var(--ok)}
[data-state=watch] .bp-res__badge{background:#FFF4DB;color:#8A5A00}
[data-state=high] .bp-res__badge,[data-state=low] .bp-res__badge{background:#FDECEC;color:#8E141B}
[data-state=urgent] .bp-res__badge{background:var(--pulse);color:#fff}
.bp-res__emg{margin-top:16px;padding:16px;border-radius:16px;background:#FDECEC;color:#8E141B;font-weight:700;font-size:16px;line-height:1.45}
.bp .bp-res__call{width:100%;margin-top:12px;background:var(--pulse);color:#fff;white-space:normal}
.bp .bp-res__call:hover{background:var(--pulse6);color:#fff}
.bp-res__what{margin-top:16px!important;font-size:17px;line-height:1.55}
.bp-res__facts{display:grid;gap:8px;margin-top:14px!important}
.bp-res__facts li{position:relative;padding-left:20px;font-size:16px;line-height:1.5;color:var(--ink2)}
.bp-res__facts li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--seal)}
.bp-res__facts .is-ok::before,.bp-tool-key--ok{background:var(--ok)}
.bp-res__facts .is-watch::before,.bp-tool-key--watch{background:#8A5A00}
.bp-res__facts .is-high::before,.bp-tool-key--high,.bp-tool-key--low{background:#8E141B}
.bp-res__dates{margin-top:18px!important;border-top:1px solid var(--line)}
.bp-res__dates li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4}
.bp-res__dates span{grid-column:1;color:var(--ink2)}
.bp-res__dates em{grid-column:2;grid-row:1/3;padding:4px 10px;border-radius:999px;background:var(--mist);color:var(--ink2);font-style:normal;font-weight:700;font-size:14px;white-space:nowrap}
.bp-res__dates em.is-now{background:#E5F3EC;color:var(--ok)}
.bp .bp-res__nh{margin-top:22px;font-size:20px}
.bp-res__next{margin-top:6px!important;font-size:17px;line-height:1.55}
.bp-res__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.bp-res__acts .bp-link{display:inline-flex;align-items:center;min-height:44px}
.bp-res--in{animation:bp-res-in .25s ease-out}
@keyframes bp-res-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* what the numbers mean, when to see a doctor */
.bp-tool-info{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 64px;margin-top:80px;padding-top:56px;border-top:1px solid var(--line)}
.bp-tool-side{display:grid;gap:48px;align-content:start}
.bp .bp-tool-block h2{margin-bottom:18px}
.bp .bp-tool-cap{margin:28px 0 8px;font-size:20px}
.bp .bp-tool-block h2+.bp-tool-cap{margin-top:0}
.bp-tool-tablewrap{overflow-x:auto}
.bp-tool-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.bp-tool-table th,.bp-tool-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bp-tool-table thead th{padding-top:0;font-size:15px;color:var(--ink2)}
.bp-tool-table tbody th{font-weight:700}
.bp-tool-table tr.is-on th,.bp-tool-table tr.is-on td{background:var(--mist)}
.bp-tool-table tr.is-on th{box-shadow:inset 3px 0 0 var(--seal)}
.bp-tool-kk{display:flex;gap:10px;align-items:flex-start}
.bp-tool-key{flex:none;width:10px;height:10px;margin-top:calc(.725em - 5px);border-radius:50%}
.bp-tool-key--urgent{background:var(--pulse)}
.bp-tool-small{margin-top:14px!important;font-size:15px;line-height:1.55;color:var(--ink2)}
.bp-tool-list{display:grid;gap:12px}
.bp-tool-list li{position:relative;padding-left:22px;line-height:1.55}
.bp-tool-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--seal)}
.bp-tool-list a{font-weight:700;white-space:nowrap}

/* talk to a doctor, the note, other tools */
.bp-tool-care{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 48px;margin-top:64px;padding:32px;border-radius:24px;background:var(--mist)}
.bp .bp-tool-care h2{font-size:clamp(24px,2.2vw,28px)}
.bp-tool-care p{max-width:52ch;margin-top:6px!important;color:var(--ink2)}
.bp-tool-care__acts{display:flex;flex-wrap:wrap;gap:12px}
.bp-tool-note{display:flex;gap:12px;align-items:flex-start;margin-top:28px!important;font-size:15px;line-height:1.55;color:var(--ink2)}
.bp-tool-note .bp-ico{width:20px;height:20px;margin-top:2px}
.bp-tool-groups+.bp-tool-note{margin-top:8px!important}
.bp-tool-otherhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-bottom:20px}
.bp-tool-otherhead .bp-link{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:1180px){
  .bp-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .bp-tool-out{padding:28px 24px}
  .bp-tool-info{grid-template-columns:minmax(0,1fr)}
  .bp-tool-group{grid-template-columns:minmax(0,1fr)}
  .bp-tool-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  html{scroll-padding:16px 0 96px} /* clear of the phone bar */
  .bp-tool-grid{grid-template-columns:minmax(0,1fr)}
  .bp-tool-out{position:static;min-height:0;padding:24px 20px}
  .bp-tool-empty{min-height:150px}
  .bp-tool-cards{grid-template-columns:minmax(0,1fr)}
  .bp-tool-form .bp-btn{width:100%;min-width:0}
  .bp-tool-q{grid-template-columns:minmax(0,1fr)}
  .bp-seg--yn{justify-self:start}
  .bp-tool-info{margin-top:56px;padding-top:40px}
  .bp-tool-care{margin-top:48px;padding:24px 20px}
  .bp-tool-care__acts,.bp-tool-care__acts .bp-btn{width:100%}
  .bp-tool-table{font-size:15px}
  .bp-tool-table th,.bp-tool-table td{padding:10px 8px}
  .bp-tool-group{padding:32px 0}
}
@media print{
  .bp-tool-form .bp-btn,.bp-tool-care,.bp-tool-other{display:none}
  .bp-tool-out{position:static;box-shadow:none}
}
