/* Rule of 40 Calculator: board-report scorecard with a growth vs margin chart. */
.r4-sub{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.r4-sub em{font-style:normal;font-size:10px;letter-spacing:.06em;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:1px 6px}
.r4-lh{display:flex;justify-content:space-between;align-items:center;gap:8px 10px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--rule)}
.app.r4 .r4-basis{width:auto;order:0}
.r4-basis button{padding:4px 10px;font-size:12.5px;white-space:nowrap}
.r4 .r4-pct span{left:auto;right:14px}
.r4 .r4-pct .inp{padding-left:14px;padding-right:34px}
.r4 .fld[hidden]{display:none}

/* scorecard panel */
.r4-board{border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.r4-bh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 16px 4px}
.r4-bh b{font-weight:600;font-size:15px}
.r4-bh small{font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.r4-bb{display:grid;grid-template-columns:minmax(0,1fr)}
.r4-plot{min-width:0;padding:6px 16px 14px 12px}
.r4-svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
.r4-svg .pass{fill:rgba(200,242,90,.2)}
.r4-svg .grid{stroke:#EEEEE8;stroke-width:1}
.r4-svg .axis{stroke:#CFCFC6;stroke-width:1.2}
.r4-svg .tick{font-size:11px;fill:var(--slate);font-family:var(--mono)}
.r4-svg .axt{font-size:12px;font-weight:500;fill:var(--slate)}
.r4-svg .r40{stroke:var(--ink);stroke-width:1.8;stroke-dasharray:6 5}
.r4-svg .r40-l{font-size:11.5px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.r4-svg .zone{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;fill:#3F5A06}
.r4-svg .zone.off{fill:#9A3412}
.r4-svg .room{fill:rgba(47,122,11,.16);stroke:#2F7A0B;stroke-width:1.2;stroke-linejoin:round;transition:d .5s cubic-bezier(.3,.7,.3,1),fill .3s}
.r4-svg .room.fail{fill:rgba(194,65,12,.12);stroke:#C2410C}
.r4-svg .cross{fill:none;stroke:#9AA0A6;stroke-width:1;stroke-dasharray:2 3;transition:d .5s cubic-bezier(.3,.7,.3,1)}
.r4-svg .tgt{fill:#fff;stroke:#2F7A0B;stroke-width:1.8;transition:cx .5s cubic-bezier(.3,.7,.3,1),cy .5s cubic-bezier(.3,.7,.3,1),opacity .3s}
.r4-svg .tgt.fail{stroke:#C2410C}
.r4-svg .gap-l{font-family:var(--mono);font-size:11px;font-weight:600;fill:#2F7A0B;transition:opacity .3s}
.r4-svg .gap-l.fail{fill:#C2410C}
.r4-svg .pill{transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.r4-svg .pill rect{fill:#2F7A0B}
.r4-svg .pill.fail rect{fill:#C2410C}
.r4-svg .pill text{font-family:var(--mono);font-size:11px;font-weight:600;fill:#fff}
.r4-svg .me{transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.r4-svg .me circle{fill:#2F7A0B;stroke:#fff;stroke-width:3;filter:drop-shadow(0 2px 3px rgba(14,17,22,.3));transition:fill .3s}
.r4-svg .me.fail circle{fill:#C2410C}
.r4-svg .me.off circle{fill:#fff;stroke:currentColor;stroke-width:2.5}
.r4-svg .me.off{color:#2F7A0B}.r4-svg .me.off.fail{color:#C2410C}
.r4-svg .me-l{font-size:13px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.r4-key{list-style:none;margin:8px 0 0;padding:0;justify-content:center;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--slate)}
.r4-key li{display:flex;align-items:center;gap:6px}
.r4-key i{display:inline-block;flex:none}
.r4-key .k-me{width:10px;height:10px;border-radius:50%;background:#2F7A0B}
.r4-key .k-me.fail{background:#C2410C}
.r4-svg .tick{transition:opacity .2s}
.r4-key .k-line{width:18px;border-top:2px dashed var(--ink)}
.r4-key .k-room{width:14px;height:10px;background:rgba(47,122,11,.16);border:1px solid #2F7A0B;clip-path:polygon(0 0,100% 0,0 100%)}
.r4-key .k-room.fail{background:rgba(194,65,12,.12);border-color:#C2410C}
.r4-rows{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.r4-rows > div{padding:12px 16px 14px;border-left:1px solid var(--rule)}
.r4-rows > div:first-child{border-left:0}
.r4-rows dt{font-size:13px;color:var(--slate)}
.r4-rows dd{margin:2px 0 0;font-size:22px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;transition:color .3s}
.r4-rows small{display:block;font-size:12.5px;color:var(--slate);margin-top:1px}
@media(prefers-reduced-motion:reduce){.r4-svg .me,.r4-svg .room,.r4-svg .cross,.r4-svg .pill,.r4-svg .tgt{transition:none}}
@media(max-width:600px){
  .r4-bb{grid-template-columns:minmax(0,1fr);gap:0}
  .r4-plot{padding:4px 12px 12px 6px}
  .r4-svg .tick,.r4-svg .pill text,.r4-svg .gap-l{font-size:17px}.r4-svg .axt,.r4-svg .r40-l,.r4-svg .zone{font-size:17px}.r4-svg .me-l{font-size:19px}
  .r4-key{justify-content:flex-start}
  .r4-rows{grid-template-columns:minmax(0,1fr);margin:0 16px}
  .r4-rows > div{padding:12px 0;border-left:0;border-bottom:1px solid #F1F1EC}
  .r4-rows > div:last-child{border-bottom:0}
  .r4-rows > div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline}
  .r4-rows dd{grid-row:1;grid-column:2;font-size:19px}
  .r4-rows small{grid-column:1/-1}
}