/* cascade.css: Cascaded Receiver Calculator, layout Option B2 (cascade-mockups/handoff-B2.md). Uses tokens.css only. */
.csc[data-mode="beginner"] .xonly,.csc[data-mode="expert"] .bonly{display:none}
.csc .box{background:var(--color-surface-sunk);border:var(--border-w) solid var(--color-rule);border-radius:var(--radius);padding:var(--s2);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-ink);min-width:0;width:100%;box-sizing:border-box}
.csc-ex .box{width:auto;max-width:100%}
.csc-actions{display:flex;align-items:center;gap:var(--s3);margin:var(--s3) 0}.csc-actions .btn{margin:0}
.csc-in{display:flex;gap:var(--s2);align-items:center;max-width:240px}.csc-in .u{color:var(--color-muted);font-family:var(--font-mono)}
.csc-h3{font-size:var(--fs-md);margin:var(--s4) 0 var(--s2)}
.csc-tw{overflow-x:auto}.csc-st{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.csc-st th,.csc-st td{padding:var(--s1) var(--s2);border-bottom:1px solid var(--color-rule);text-align:right;white-space:nowrap}.csc-st th:nth-child(2),.csc-st td:nth-child(2){text-align:left}
.csc-st th{color:var(--color-muted);font-weight:500}.csc-st td{font-family:var(--font-mono)}
body{padding-bottom:88px} /* room for the Feedback button; no fixed or sticky elements on this page */
.csc-top{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end}.csc-ex{display:flex;flex-direction:column;gap:var(--s1);margin:0 0 16px}.csc-ex label,.csc-bw label{font-size:var(--fs-sm);color:var(--color-muted)}
.csc-bw{margin:0 0 16px}.csc-bw label{display:block;margin:0 0 var(--s1)}.csc-bw .ferr{margin:var(--s1) 0 0}
.csc-strip{display:flex;align-items:stretch;gap:6px;margin-top:8px;overflow-x:auto;padding-bottom:2px}
.csc-ant{writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--fs-xs);color:var(--color-muted);text-align:center;border:1px dashed var(--color-rule);padding:4px}
.csc-cards{list-style:none;margin:0;padding:0 0 0 1px;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr)) 72px;gap:14px;flex:1;position:relative}
.csc-cards[data-many]{grid-template-columns:repeat(var(--n),minmax(120px,1fr)) 72px}
.csc-card{position:relative;background:var(--color-surface-sunk);border:var(--border-w) solid var(--color-edge);border-radius:var(--radius);padding:10px 8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.csc-card+.csc-card::before{content:"";position:absolute;left:-15px;top:50%;width:14px;border-top:2px solid var(--color-edge)}
.csc-card.is-sel{outline:3px solid var(--color-accent);outline-offset:1px}.csc-card.is-bad{border-color:var(--color-danger,#b00020)}.csc-card.is-bad .hint{color:var(--color-danger,#b00020);font-weight:700}
.csc-hit{position:absolute;inset:0;width:100%;background:none;border:0;padding:0;margin:0;cursor:pointer;z-index:1;border-radius:var(--radius)}.csc-hit:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.csc-card b{font-size:var(--fs-sm);line-height:1.15;min-height:2.3em;padding-right:18px}.csc-card .num{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-muted)}
.csc-card .sym{position:absolute;right:8px;top:6px;font-size:20px;color:var(--color-accent)}
.csc-card dl{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;margin:4px 0;font-size:var(--fs-xs)}.csc-card dt{color:var(--color-muted)}.csc-card dd{margin:0;font-family:var(--font-mono);font-weight:700;overflow-wrap:anywhere}
.csc-card .hint{font-size:var(--fs-xs);margin:0}
.csc-card .bar{height:6px;background:var(--color-surface);border:1px solid var(--color-rule)}.csc-card .bar i{display:block;height:100%;background:var(--color-signal)}
.csc-add{display:flex}.csc-add .btn{flex:1;margin:0;border:var(--border-w) dashed var(--color-edge);font-size:var(--fs-sm);color:var(--color-muted);white-space:normal;padding:var(--s2)}
.csc-ed{margin:var(--s3) 0 0;padding:var(--s3);border:var(--border-w) solid var(--color-edge);border-radius:var(--radius);background:var(--color-surface)}.csc-ed .csc-h3{margin-top:0}
.csc-edf{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s2)}.csc-edf label{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--fs-xs);color:var(--color-muted)}
.csc-actions{justify-content:flex-end}
.stack{display:flex;flex-direction:column}.stack>.fcard{margin-bottom:0}
.csc-band{display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));margin:16px 0 var(--s4);background:var(--color-surface);border:2px solid var(--color-edge);border-radius:var(--radius);box-shadow:var(--card-shadow)}
.csc-bt{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:18px 20px;border-left:1px solid var(--color-rule);min-width:0}.csc-bt:first-child{border-left:0}
.csc-bl{font-size:var(--fs-xs);color:var(--color-muted);text-transform:uppercase;letter-spacing:.06em}.csc-bl i{font-style:normal;text-transform:none;letter-spacing:0}
.csc-bv{font-family:var(--font-display);font-weight:var(--weight-display);font-size:48px;line-height:1;color:var(--color-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.csc-bv small{font-family:var(--font-body);font-weight:400;font-size:var(--fs-sm);color:var(--color-muted);margin-left:6px}.csc-bs{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-ink)}
.csc-na{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-muted);white-space:normal}
.csc-hero{background:var(--color-accent)}.csc-hero .csc-bl,.csc-hero .csc-bv,.csc-hero .csc-bv small,.csc-hero .csc-na{color:var(--color-on-accent)}.csc-hero .csc-bv{font-size:var(--fs-readout)}
.csc-plain{font-size:var(--fs-md);line-height:1.5}.csc-plain [data-v]{font-weight:700;color:var(--color-accent)}
.csc-graph{width:100%;min-height:354px}.csc-gsvg{display:block}.csc-gsvg .gl{font-size:15px;font-weight:700;font-family:var(--font-body)}
.csc-gsvg .gu,.csc-gsvg .gx{font-size:13px;fill:var(--color-muted);font-family:var(--font-mono)}.csc-gsvg .gv{font-size:13px;fill:var(--color-ink);font-family:var(--font-mono)}.csc-gsvg .ga{stroke:var(--color-rule)}
@media(max-width:1100px){.csc-bv{font-size:40px}.csc-hero .csc-bv{font-size:52px}}
@media(max-width:900px){
  .csc-band{order:-1;grid-template-columns:1fr 1fr;margin:0 0 var(--s4)}.csc-hero{grid-column:1/-1}
  .csc-bt{border-left:0;border-top:1px solid var(--color-rule);padding:14px}.csc-bt:nth-child(odd):not(.csc-hero){border-left:1px solid var(--color-rule)}.csc-bt:nth-child(2){border-top:0}.csc-bt:nth-child(3){border-top:0;border-left:1px solid var(--color-rule)}
  .csc-bv{font-size:34px}.csc-hero .csc-bv{font-size:52px}
  .csc-strip{flex-direction:column;overflow:visible}.csc-ant{writing-mode:horizontal-tb;transform:none}
  .csc-cards,.csc-cards[data-many]{grid-template-columns:1fr;gap:14px}
  .csc-card{display:grid;grid-template-columns:auto 1fr;column-gap:10px}.csc-card .num{grid-row:1}.csc-card b{min-height:0}
  .csc-card dl,.csc-card .bar,.csc-card .hint{grid-column:1/-1}.csc-card dl{grid-template-columns:auto 1fr auto 1fr auto 1fr}
  .csc-card+.csc-card::before{left:24px;top:-15px;width:0;height:14px;border-top:0;border-left:2px solid var(--color-edge)}
  .csc-add .btn{padding:12px}
}
@media(max-width:600px){main.wrap{padding-bottom:calc(44px + 16px + env(safe-area-inset-bottom))}} /* Feedback pill height + 16px + safe area; the pill never fades on phones (#69) */
@media (max-width: 600px) {
  #band { --fab-w: 123px; /* Feedback pill measured width at 390px (122.36px); no width token exists */ padding-right: calc(var(--fab-w) + 12px + env(safe-area-inset-right)); }
  #band .csc-bt, #band .plain { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 600px) { #band { grid-template-columns: 1fr; gap: 8px; } #band .csc-bt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } #band .csc-bt .csc-bv { font-variant-numeric: tabular-nums; white-space: nowrap; } }