/* The Sales app (sales.js). It stands under .ro as well, so the Roster's warning line, tiles and group heads
   (roster.css) carry over; only what the leaderboard, its tables and the projections add is here, prefixed sa-.
   Every colour is one of app.css's variables, so the page follows the frame's theme; the three medals are its own. */
[data-page="sales"] > .ro { container-type: inline-size; }  /* the tables follow the room they have */
.sa .ph p { max-width: 78ch; }  /* the head is the frame's (head() in core.js) */
.sa .ph-act .btn svg.i { width: 15px; height: 15px; }
#sa-act { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }  /* its buttons keep the head's gap */
/* the head's line before the data: its words over the hidden loaded line, which holds the line's final height */
.sa-wait { display: grid; } .sa-wait > * { grid-area: 1 / 1; } .sa-wait > [aria-hidden] { visibility: hidden; }
.sa .empty p { margin: 14px 0 0; }

/* the period and the view: one row of segmented picks */
.sa-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 20px; }
.sa-grow { flex: 1; }
.sa-seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; background: var(--raise); padding: 2px; gap: 2px; max-width: 100%; overflow-x: auto; }
.sa-seg button { height: 28px; padding: 0 12px; border-radius: 999px; font: 600 12.5px var(--sans); color: var(--text2); white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.sa-seg button:hover { background: var(--hover); color: var(--text); }
.sa-seg button[aria-pressed="true"] { background: var(--red); color: #fff; }
.sa-custom { display: inline-flex; align-items: center; gap: 8px; color: var(--text3); font-size: 13px; }
.sa-custom input { height: 32px; border: 1px solid var(--line2); border-radius: 999px; background: var(--raise); color: var(--text); font: 13px var(--sans); padding: 0 10px; }

.sa-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sa .stat small { display: block; margin-top: 2px; color: var(--text3); font-size: 12px; } .sa .stat small.up { color: var(--ok); } .sa .stat small.down { color: var(--bad); }
.sa-ads { margin: 10px 2px 0; color: var(--text2); font-size: 13px; }
.sa-ads svg.i { width: 15px; height: 15px; color: var(--text3); vertical-align: -3px; margin-right: 8px; } .sa-ads b { color: var(--text); font-variant-numeric: tabular-nums; }
.sa-ads small { color: var(--text3); font-size: 12px; margin-left: 6px; } .sa-ads .sa-meta { margin-left: 8px; vertical-align: 1px; }
.sa-ads .pill { max-width: calc(100% - 8px); overflow: hidden; }  /* a state's words stay inside the line */
.sa-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 28px 2px 10px; } .sa-hd .sa-h { margin: 0 auto 0 0; min-width: 0; }
.sa-byl { font-size: 12px; color: var(--text3); }
.sa-h { margin: 28px 2px 10px; font: 600 16px var(--head-font, var(--sans)); color: var(--head); overflow-wrap: anywhere; } .sa-h small { font: 400 13px var(--sans); color: var(--text3); margin-left: 6px; }
.sa-h small a { color: var(--blue); }

/* every table: the panel's rows, its columns set per table */
.sa-t .tr { display: grid; align-items: center; gap: 12px; padding: 9px 14px; text-decoration: none; color: inherit; font-variant-numeric: tabular-nums; }
.sa-t .tr.head { font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text3); padding-block: 8px; }
.sa-t small { color: var(--text3); font-size: 12px; }
/* "Rev / live call", the longest head, holds one line: its column's floor is that head's width */
.sa-rank .tr { grid-template-columns: 34px minmax(170px, 1.5fr) minmax(110px, 1fr) repeat(4, minmax(64px, .6fr)) minmax(96px, .6fr) minmax(150px, 1.1fr); }
.sa-rank .tr.head span { white-space: nowrap; }
.sa-rank a.tr { transition: background var(--t-fast) var(--ease); } .sa-rank a.tr:hover { background: var(--hover); } .sa-rank a.tr[aria-current] { background: var(--sel); }
.sa-rank .tr.out { color: var(--text3); }
.sa-rank .by { color: var(--text); font-weight: 700; }
.sa-rank .rk { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--chip); font: 700 12px var(--sans); color: var(--text2); }
.sa-rank .rk.r1 { background: #f4c542; color: #3d2c00; } .sa-rank .rk.r2 { background: #cfd6e5; color: #26324f; } .sa-rank .rk.r3 { background: #e0a878; color: #3c1f06; }
.sa-t .nm { display: flex; align-items: center; gap: 10px; min-width: 0; } .sa-t .nm > span:not(.av) { display: grid; gap: 3px; min-width: 0; } .sa-t .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-bdg { display: inline-block; margin: 0 4px 0 0; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font: 600 11px var(--sans); white-space: nowrap; }
.sa-rank .nm > span:not(.av) { display: block; } .sa-rank .nm b { display: block; margin-bottom: 2px; }
.sa-rank .cash { display: grid; gap: 4px; } .sa-rank .cash i { display: block; height: 5px; width: var(--w); min-width: 2px; border-radius: 3px; background: var(--ok); }
/* the commission: what the period's cash pays, and how far the next tier is */
.sa-pay { display: grid; gap: 4px; min-width: 0; }
.sa-track { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--chip); }
.sa-track i { position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 2px; border-radius: 3px; background: var(--red); }
.sa-track u { position: absolute; top: -2px; bottom: -2px; left: min(var(--x), calc(100% - 2px)); width: 2px; background: var(--line2); }

.sa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.sa-li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.sa-li > span { display: grid; min-width: 0; flex: 1; } .sa-li > .av { flex: none; } .sa-li small { color: var(--text3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a name nobody here wrote (a rep, a customer) is cut with an ellipsis, and the figure keeps its side of the row */
.sa-li > span > b, .sa-li .x { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-li .x { font-variant-numeric: tabular-nums; max-width: 60%; }
.sa-setters .tr { grid-template-columns: minmax(120px, 1.6fr) repeat(4, minmax(48px, .7fr)); }
.sa-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); border: 1px solid var(--line); border-radius: 12px; }
.sa-tiers div { padding: 12px 8px; text-align: center; } .sa-tiers div + div { border-left: 1px solid var(--line); }
.sa-tiers b { display: block; font-size: 18px; } .sa-tiers small { color: var(--text3); font-size: 12px; }

.sa-find { display: flex; max-width: 320px; margin: 32px 0 4px; }
.sa-calls .tr { grid-template-columns: 130px minmax(140px, 1.2fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(120px, 1.4fr); }
.sa-closes .tr { grid-template-columns: 130px minmax(140px, 1.2fr) minmax(150px, 1fr) minmax(140px, .9fr) minmax(120px, 1.4fr); }
.sa-drift .tr { grid-template-columns: minmax(140px, 1.3fr) minmax(110px, .8fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(170px, auto); }
.sa-drift .btn { height: 28px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
.sa-t .when { display: grid; } .sa-t .when b { font-weight: 600; font-size: 13px; }
.sa-t .who, .sa-t .camp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sa-t .camp { color: var(--text2); font-size: 12.5px; }
.sa-t .cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sa-t select, .sa-val { height: 28px; border: 1px solid var(--line2); border-radius: 999px; background: var(--raise); color: var(--text); font: 13px var(--sans); padding: 0 10px; min-width: 0; max-width: 100%; cursor: pointer; }
.sa-t select:hover, .sa-val:hover { border-color: var(--text3); }
.sa-val { display: inline-flex; align-items: center; gap: 2px; cursor: text; } .sa-val input { width: 7ch; border: 0; background: transparent; font: inherit; color: inherit; }
.sa-st select, .sa-st b { font-weight: 600; } .sa-st.ok :is(select, b) { color: var(--ok); } .sa-st.bad :is(select, b) { color: var(--bad); } .sa-st.wait :is(select, b) { color: var(--wait); }
/* a corrected row and its cell's undo: amber, the colour of a value that is not GoHighLevel's */
.sa-t .tr.fixed { box-shadow: inset 3px 0 var(--amber); }
.sa-undo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--warn); background: var(--warn-bg); flex: none; }
button.sa-undo:hover { filter: brightness(.95); } .sa-undo svg.i { width: 13px; height: 13px; }
.sa .gh .sa-fx { font-size: 12px; color: var(--warn); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-none { color: var(--text3); font-size: 13px; margin: 2px 4px 8px; max-width: 78ch; }

/* the team's links and the settings: one section a setting, its rows of inputs, its own Save */
.sa-sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 28px; padding: 4px 4px 12px; }
.sa-sets h3 { margin: 14px 0 2px; font: 600 14px var(--sans); color: var(--head); } .sa-sets p { margin: 0 0 8px; color: var(--text3); font-size: 12.5px; }
.sa-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 6px; }
.sa-row.head { font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.sa-row > span { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.sa-row input { height: 32px; min-width: 0; border: 1px solid var(--line2); border-radius: 8px; background: var(--raise); color: var(--text); font: 13px var(--sans); padding: 0 10px; }
.sa-row.acts { grid-auto-columns: max-content; justify-content: end; margin-top: 8px; } .sa-row.acts .btn { height: 30px; padding: 0 14px; font-size: 13px; }

/* the projections: the pace on the left, the month it gives on the right */
.sa-proj { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 8px 36px; align-items: start; }
.sa-proj .sa-in .sa-h { margin-top: 0; }
.sa-fun { margin: 0 2px 14px; color: var(--text2); font-size: 13.5px; max-width: 86ch; } .sa-fun b { color: var(--text); font-variant-numeric: tabular-nums; }
.sa-fld { display: grid; gap: 6px; margin: 0 2px 16px; font-size: 13.5px; } .sa-fld > span { display: flex; justify-content: space-between; align-items: baseline; color: var(--text2); }
.sa-fld b { color: var(--text); font-variant-numeric: tabular-nums; } .sa-fld input[type="range"] { width: 100%; accent-color: var(--red); }
.sa-ladder .tr, .sa-scen .tr { grid-template-columns: minmax(120px, 1.3fr) repeat(6, minmax(70px, 1fr)); } .sa-ladder .tr.on { background: var(--sel); box-shadow: inset 3px 0 var(--red); }
.sa-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 220px; padding: 0 2px; }
.sa-six > div { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; height: 100%; text-align: center; min-width: 0; }
.sa-six b { font-size: 13px; font-variant-numeric: tabular-nums; } .sa-six small { color: var(--text3); font-size: 11.5px; }
.sa-six .bar { align-self: end; display: flex; align-items: flex-end; height: var(--h); min-height: 8px; border-radius: 6px 6px 0 0; background: var(--red); overflow: hidden; }
.sa-six .bar i { display: block; width: 100%; height: var(--h); background: var(--line2); }

.sa-scen button.tr { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; transition: background var(--t-fast) var(--ease); }
.sa-scen button.tr:hover { background: var(--hover); } .sa-scen .tr.on { background: var(--sel); box-shadow: inset 3px 0 var(--red); }
.sa-tiles .stat.lead { box-shadow: inset 3px 0 var(--red); border-radius: 12px 0 0 12px; }

/* the funnel and the commission tier gauge: one hue, the red, deeper as a tier pays more; the reached tiers lit */
.sa-card { margin: 16px 0 0; padding: 2px 18px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.sa-card .sa-h { margin-top: 14px; }
.sa-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; text-align: center; margin: 6px 0 10px; }
.sa-flow > div { display: grid; gap: 2px; } .sa-flow > i { font-style: normal; color: var(--faint); font-size: 20px; }
.sa-flow b { font: 800 34px/1.05 var(--display); font-variant-numeric: tabular-nums; color: var(--head); } .sa-flow > div:last-child b { color: var(--red2); }
.sa-flow span { font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); } .sa-flow small { color: var(--text3); font-size: 12px; }
.sa-card .sa-fun { text-align: center; margin: 0 auto 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sa-dialrow { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 8px 24px; align-items: center; padding-top: 8px; }
.sa-dial { width: 100%; height: auto; overflow: visible; }
.sa-dial path { fill: none; stroke: var(--red); stroke-width: 15; stroke-opacity: calc(var(--o) * .32); } .sa-dial path.lit { stroke-opacity: var(--o); }
.sa-dial text { font: 600 8.5px var(--sans); fill: var(--text3); }
.sa-dial line { stroke: var(--head); stroke-width: 3.5; stroke-linecap: round; } .sa-dial circle { fill: var(--head); }
.sa-dialtx .v { display: block; font: 800 32px/1.1 var(--display); color: var(--head); font-variant-numeric: tabular-nums; }
.sa-dialtx .tier { display: inline-block; margin-top: 6px; background: var(--sel); color: var(--red2); font-weight: 700; }
.sa-dialtx .to { margin: 10px 0 0; color: var(--text2); font-size: 13.5px; max-width: 46ch; } .sa-dialtx .to b { color: var(--head); }

/* the hero: the period, its days left and the podium, the owner's leaderboard look in the frame's tokens. Faint
   diagonal bands and a red wash stand in for his confetti, which would never stop moving. */
.sa-hero { position: relative; margin: 0 0 16px; padding: 22px 26px 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: repeating-linear-gradient(115deg, transparent 0 70px, color-mix(in oklab, var(--text) 3%, transparent) 70px 140px),
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--red) 13%, transparent), transparent 70%), var(--panel); }
.sa-hero-hd { display: flex; align-items: flex-start; gap: 16px; }
.sa-hero-hd > div:first-child { flex: 1; min-width: 0; }
.sa-hero h2 { margin: 0; font: 800 28px/1.1 var(--display); color: var(--head); letter-spacing: -.01em; } .sa-hero h2 em { font-style: normal; color: var(--red2); }
.sa-hero-hd p { margin: 4px 0 0; color: var(--text2); font-size: 13.5px; }
.sa-left { display: grid; gap: 2px; padding: 8px 16px; border: 1px solid var(--line2); border-radius: 12px; background: color-mix(in oklab, var(--raise) 85%, transparent); text-align: center; }
.sa-left span { font: 800 22px/1.15 var(--display); color: var(--head); white-space: nowrap; } .sa-left span b { font-variant-numeric: tabular-nums; } .sa-left small { color: var(--text3); font-size: 12px; }
.sa-hero > .sa-none { padding: 30px 0 34px; text-align: center; }
.sa-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 18px; max-width: 900px; margin: 0 auto; }
.sa-step { display: grid; justify-items: center; color: inherit; text-decoration: none; min-width: 0; }
.sa-step .who { display: grid; justify-items: center; gap: 3px; padding: 0 4px 14px; text-align: center; min-width: 0; max-width: 100%; }
.sa .sa-step .av { width: 64px; height: 64px; font-size: 21px; margin-bottom: 6px; box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px var(--medal); }
.sa .sa-step.p1 .av { width: 84px; height: 84px; font-size: 27px; }
.sa-step .nm { font: 700 17px var(--sans); color: var(--head); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-step .fig { font: 800 30px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--head); } .sa-step.p1 .fig { font-size: 36px; }
.sa-step small { color: var(--text3); font-size: 12.5px; }
.sa-step .ped { display: grid; place-items: start center; width: 100%; padding-top: 10px; border-radius: 12px 12px 0 0; font: 800 44px/1 var(--display); color: var(--medal-ink);
  background: linear-gradient(180deg, var(--medal), color-mix(in oklab, var(--medal) 72%, #000)); transition: filter var(--t-fast) var(--ease); }
a.sa-step:hover .ped { filter: brightness(1.06); }
.sa-step.p1 { --medal: #f4c542; --medal-ink: #3d2c00; } .sa-step.p1 .ped { height: 124px; }
.sa-step.p2 { --medal: #cfd6e5; --medal-ink: #26324f; } .sa-step.p2 .ped { height: 88px; }
.sa-step.p3 { --medal: #e0a878; --medal-ink: #3c1f06; } .sa-step.p3 .ped { height: 64px; }
.sa-step.open { --medal: var(--chip); --medal-ink: var(--faint); } .sa-step.open .who .nm { color: var(--text3); font-size: 15px; }
:root[data-theme="dark"] .sa-step .fig { color: var(--medal); } :root[data-theme="dark"] .sa-step.open .fig { color: var(--text3); }

/* TV mode: the whole screen, no frame, type that reads across a room */
#sa-tv { position: fixed; inset: 0; z-index: 200; overflow: auto; background: var(--bg); }
.sa-tvin { padding: 1.6vw 2.6vw 2.6vw; font-size: clamp(15px, 1.15vw, 30px); }
.sa-tvbar { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.sa-tvbar > b { font: 800 1.35em var(--display); color: var(--head); } .sa-tvbar em { font-style: normal; color: var(--red2); } .sa-tvbar small { color: var(--text3); font-size: .85em; }
.sa-tvbar .btn { margin-left: auto; } .sa-tvbar .btn svg.i { width: 15px; height: 15px; }
.sa-tvbar kbd { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--line2); border-radius: 5px; font: 600 11px var(--mono); color: var(--text3); }
.sa-tvin .sa-hero { padding: 1.4em 1.8em 0; }
.sa-tvin .sa-hero h2 { font-size: clamp(30px, 2.8vw, 72px); } .sa-tvin .sa-hero-hd p { font-size: .95em; }
.sa-tvin .sa-left span { font-size: clamp(22px, 2vw, 52px); } .sa-tvin .sa-left small { font-size: .8em; }
.sa-tvin .sa-podium { max-width: 72vw; gap: 2vw; }
.sa-tvin .sa-step .nm { font-size: clamp(18px, 1.6vw, 40px); } .sa-tvin .sa-step .fig { font-size: clamp(30px, 3vw, 76px); } .sa-tvin .sa-step.p1 .fig { font-size: clamp(36px, 3.6vw, 92px); }
.sa-tvin .sa-step small { font-size: 1em; }
.sa.sa-tvin .sa-step .av { width: clamp(64px, 5.4vw, 140px); height: clamp(64px, 5.4vw, 140px); font-size: clamp(21px, 1.8vw, 46px); }
.sa.sa-tvin .sa-step.p1 .av { width: clamp(84px, 7vw, 180px); height: clamp(84px, 7vw, 180px); font-size: clamp(27px, 2.3vw, 60px); }
.sa-tvin .sa-step.p1 .ped { height: clamp(110px, 15vh, 260px); } .sa-tvin .sa-step.p2 .ped { height: clamp(80px, 10.5vh, 180px); } .sa-tvin .sa-step.p3 .ped { height: clamp(58px, 7.5vh, 130px); }
.sa-tvin .sa-step .ped { font-size: clamp(44px, 4vw, 100px); }
.sa-tvstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; }
.sa-tvstats > div { display: grid; gap: .2em; padding: .8em 1.1em; } .sa-tvstats > div + div { border-left: 1px solid var(--line); }
.sa-tvstats small { font: 700 .7em var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.sa-tvstats b { font: 800 clamp(26px, 2.3vw, 60px)/1.1 var(--display); color: var(--head); font-variant-numeric: tabular-nums; }
.sa-tvrank { margin-top: 1em; }
.sa-tvr { display: grid; grid-template-columns: 2.2em 2.4em minmax(0, 1fr) 7em 7em 9em; align-items: center; gap: 1em; padding: .6em 1em; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sa-tvr .rk { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--chip); font-weight: 800; color: var(--text2); }
.sa-tvr .rk.r1 { background: #f4c542; color: #3d2c00; } .sa-tvr .rk.r2 { background: #cfd6e5; color: #26324f; } .sa-tvr .rk.r3 { background: #e0a878; color: #3c1f06; }
.sa.sa-tvin .sa-tvr .av { width: 2.2em; height: 2.2em; font-size: .8em; }
.sa-tvr .nm { font-size: 1.3em; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-tvr > span { display: grid; text-align: right; font-size: 1.25em; font-weight: 700; } .sa-tvr small { font: 700 .5em var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.sa-tvr .fig { color: var(--head); font-size: 1.5em; }

@container (max-width: 980px) {
  .sa-dialrow { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sa-dial { max-width: 300px; }
  .sa-ladder .tr > :nth-child(3), .sa-ladder .tr > :nth-child(4), .sa-scen .tr > :nth-child(2) { display: none; }
  .sa-ladder .tr, .sa-scen .tr { grid-template-columns: minmax(110px, 1.3fr) repeat(4, minmax(64px, 1fr)); }
  .sa-rank .tr { grid-template-columns: 30px minmax(130px, 1.3fr) minmax(90px, 1fr) minmax(130px, 1.1fr); } .sa-rank .tr > :nth-child(n+4):not(:last-child) { display: none; }
  .sa-proj { grid-template-columns: 1fr; }
}
@container (max-width: 700px) {
  .sa .ph-act .btn { padding: 0 9px; }  /* the head's three buttons, each with its word, hold one row of a 390 px phone */
  .sa-cols { grid-template-columns: minmax(0, 1fr); } .sa-setters .tr { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(40px, .7fr)); gap: 8px; }
  .sa-rank .tr { grid-template-columns: 30px minmax(0, 1fr) auto auto; } .sa-rank .tr > :last-child { display: none; } .sa-rank .tr > .by:not(.cash) { display: block; }
  .sa-calls .tr, .sa-closes .tr, .sa-drift .tr { grid-template-columns: 1fr 1fr; } .sa-t .tr.head { display: none; } .sa-t .camp { display: none; }
  .sa-ladder .tr, .sa-scen .tr { grid-template-columns: 1.2fr 1fr 1fr; } .sa-ladder .tr > :nth-child(-n+5):not(:first-child), .sa-scen .tr > :nth-child(-n+5):not(:first-child) { display: none; }
  /* the podium stacked: first on top, each step a row with its place, the ranked figure at the right */
  .sa-hero { padding: 16px 14px 8px; } .sa-hero-hd { flex-direction: column; gap: 10px; } .sa-hero h2 { font-size: 23px; } .sa-left { text-align: left; }
  .sa-podium { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; } .sa-step.p1 { order: -1; }
  .sa-step { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: color-mix(in oklab, var(--raise) 70%, transparent); }
  .sa-step .who { flex: 1; grid-template: "av nm fig" auto "av sub fig" auto / auto minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 0 12px; padding: 0; text-align: left; }
  .sa .sa-step .av, .sa .sa-step.p1 .av { grid-area: av; width: 42px; height: 42px; font-size: 15px; margin: 0; }
  .sa-step .nm { grid-area: nm; font-size: 15px; } .sa-step small { grid-area: sub; } .sa-step .fig, .sa-step.p1 .fig { grid-area: fig; font-size: 22px; }
  .sa-step .ped, .sa-step.p1 .ped, .sa-step.p2 .ped, .sa-step.p3 .ped { width: 40px; height: 40px; flex: none; place-items: center; padding: 0; border-radius: 10px; font-size: 20px; }
  .sa-flow b { font-size: 26px; }
  .sa-six { gap: 4px; } .sa-six small { font-size: 10px; }
  .sa-seg button { padding: 0 9px; }
}