/* bears.mtc.llc Palette is NOT decorative — Missouri State's brand standards are a LICENCE CONDITION (Exhibit A: marks may be used "following all brand guidelines"). Maroon #5E0009 (PMS 505) must be present; secondary colours may never be used alone or more prominently than the primary palette. ⛔⛔ NO PURPLE ANYWHERE IN THE APP (Jeremy, 2026-09-11: "make sure the maroons all match … there is no more purple in the app"). The MTC logo keeps its own colours; the UI does not borrow them. */ :root{ --maroon:#5E0009; --maroon-lift:#7d1017; /* ⭐ FOCUS RINGS ARE MAROON, OFFSET FROM THE CONTROL. The 2026-08-26 rule kept them purple because "a maroon ring on a maroon button cannot be seen" — true of a ring drawn ON the button, false of one drawn 2px OUTSIDE it: the offset leaves a gap of page colour between the two, so the ring reads against the page, not the button. Every button-like focus rule below carries outline-offset >= 2px for exactly that reason; inputs are white, so 1px is enough there. REVERSED on Jeremy's instruction 2026-09-11 — do not restore the purple. ⭐ The view-as banner is CHARCOAL, not maroon: it must read as a STATE ("you are looking through someone else's eyes"), distinct from the maroon header it sits under. */ --focus:#5E0009; --viewas:#2b2425; --ink:#181515; --body:#423b3b; --line:#e6e2e2; --bg:#f7f5f5; --card:#fff; --ok:#1c7a4a; --warn:#8a5a00; --danger:#a11122; --shadow:0 1px 2px rgba(24,21,21,.06),0 8px 24px -12px rgba(24,21,21,.18); --radius:14px; } *,*::before,*::after{box-sizing:border-box} /* ⛔⛔ THE HIDDEN ATTRIBUTE MUST ACTUALLY HIDE THINGS. The browser's own rule is [hidden]{display:none} at USER-AGENT specificity, so ANY author rule that sets `display` beats it — and `.occ{display:grid}` did exactly that. Every schedule filter was setting row.hidden = true correctly and every row stayed on screen. Jeremy reported it as "the filters do not work"; the JavaScript had been right the whole time. ⚠️ AND IT IS WHY MY OWN EARLIER CHECK PASSED: I asserted `r.hidden === true` in the DOM instead of looking at the rendered page. The attribute was set. The pixels never changed. ⛔ Applies to every element this app hides — .occ, .monthhead, .acrow, .filterbar, dialogs' hint rows — so it belongs here once, not on each class. */ [hidden]{display:none !important} body{margin:0;background:var(--bg);color:var(--body); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased} h1,h2,h3{color:var(--ink);line-height:1.2;margin:0 0 .4em} h1{font-size:1.6rem;letter-spacing:-.02em} /* ⛔ MAROON, NOT MTC PURPLE (2026-08-26). Every link on the site rendered #5f4d73 — 35 of them on the Engagement page alone — so a maroon-branded product read as a purple one. MO State's brand standards are a LICENCE CONDITION: maroon must be present and secondary colours may never dominate, and the most repeated colour on a page is the dominant one. */ a{color:var(--maroon)} /* ---- chrome ---- */ .topbar{display:flex;align-items:center;gap:1.5rem;padding:.85rem max(1.5rem,env(safe-area-inset-right)) .85rem max(1.5rem,env(safe-area-inset-left)); background:var(--maroon);color:#fff;box-shadow:var(--shadow);flex-wrap:wrap} .topbar .brand{display:flex;align-items:center} .topbar img{display:block;border-radius:6px;background:#fff;padding:3px} .nav{display:flex;gap:1.25rem;margin-right:auto;flex-wrap:wrap} .navtoggle{display:none} .nav a{color:#f3e6e7;text-decoration:none;font-weight:550;padding:.25rem 0; border-bottom:2px solid transparent} .nav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)} .who{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:#f0dfe0} .who .name{font-weight:600;color:#fff} .who .out{color:#f0dfe0;text-decoration:underline} /* ⛔⛔ .pill WAS ONLY EVER STYLED FOR THE HEADER BAR — white translucent on maroon — and then got used on eight light-background places across five pages (setup, users, partners, partner, library), where a white fill and a white border on a white card is very nearly invisible. Measured 2026-08-26 by rendering, not by reading. ⭐ The LIGHT style is now the default, because that is where most of them live, and the translucent one is scoped to the bar it was written for. */ .pill{background:#f5f3f3;border:1px solid var(--line);color:var(--body); border-radius:999px;padding:.1rem .55rem;font-size:.75rem;letter-spacing:.02em; display:inline-block;vertical-align:1px} .topbar .pill,.who .pill{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3); color:#f0dfe0} /* an outlined variant, for "this is a different KIND of thing" without inventing a colour */ .pill.out{background:transparent;border-style:dashed;border-color:#d6c3c6;color:var(--maroon)} /* ⛔ 244 — max(), not a bare env(): on every phone without a notch the inset is 0, so a raw env() would DELETE the gutter rather than protect it. The pair with viewport-fit=cover in views/header.php is what makes these mean anything; neither half works alone. */ .wrap{max-width:1080px;margin:0 auto; padding:2rem max(1.25rem,env(safe-area-inset-right)) 4rem max(1.25rem,env(safe-area-inset-left))} .foot{max-width:1080px;margin:0 auto;padding:0 1.25rem 3rem;color:#6d6566;font-size:.83rem} /* ⭐ ITEM 130 — A TABLE PAGE MAY USE THE WIDTH THAT IS ALREADY THERE. Measured 2026-09-03 on the live site: `main` capped at 1080px inside a 1718px window, so 638px of screen sat EMPTY while the People table crushed a two-word name onto two lines and a phone number onto two. ⛔ NOT RAISED GLOBALLY: 1080px is a deliberate reading measure for prose, and widening every page would make the long copy blocks on Setup and the guest pages worse. This is opt-in, per page, on the pages that hold a wide table. */ .wrap.wide{max-width:1400px} /* ---- cards ---- */ .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:1.5rem;box-shadow:var(--shadow)} .panel.narrow{max-width:34rem} .sport-head{display:flex;align-items:baseline;gap:.75rem;margin:2.2rem 0 .9rem} .sport-head:first-of-type{margin-top:.5rem} .sport-head h2{font-size:1.15rem;margin:0} .sport-head .meta{color:#6d6566;font-size:.87rem} .games{display:grid;gap:.7rem} .game{display:grid;grid-template-columns:auto 3rem 1fr auto;align-items:center;gap:1rem; background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line); border-radius:var(--radius);padding:.9rem 1.15rem;text-decoration:none;color:inherit; box-shadow:var(--shadow);transition:transform .12s ease,border-color .12s ease} .game:hover{transform:translateY(-1px);border-left-color:var(--maroon)} .game.away{opacity:.62} .game.away:hover{transform:none;border-left-color:var(--line)} .date{text-align:center;min-width:3.4rem} .date .d{font-size:1.35rem;font-weight:700;color:var(--ink);line-height:1} .date .m{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:#6d6566} .logo{width:3rem;height:3rem;object-fit:contain} .opp{min-width:0} .opp .name{font-weight:650;color:var(--ink);font-size:1.02rem} .opp .sub{font-size:.85rem;color:#6d6566;display:flex;gap:.5rem;flex-wrap:wrap} .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700; padding:.1rem .45rem;border-radius:4px;border:1px solid} .tag.home{color:var(--maroon);border-color:#e6c9cc;background:#fbf1f2} .tag.away{color:#73696a;border-color:var(--line);background:#f5f3f3} .tag.tv{color:var(--maroon);border-color:#e9dde0;background:#fbf6f7} /* Counts carry a LABEL as well as a colour — MO State's guidelines ask that colour never be the sole carrier of meaning. */ .count{text-align:right;min-width:6.5rem} .count .n{font-size:1.05rem;font-weight:700;color:var(--ink)} .count .l{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:#6d6566} .count.full .n{color:var(--danger)} .count.none .n{color:#aca1a2} /* ───────────────────────────────────── OCCASIONS: one list, games and events ── ⛔ Sport is NEVER colour-coded. At eight sports the colours turn to mud, and MO State's brand standards are a licence condition — maroon must be present and secondary colours may never dominate. Sport is a small text tag; ONE accent for everything. ⛔ An event is set apart by an OUTLINE, not a hue, for the same reason. */ .sub{margin-top:-.3rem;color:#6d6566} .filterbar{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center; margin:.2rem 0 1.3rem;padding:.55rem;background:var(--card); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .filterbar .fspacer{flex:1 1 auto} .chip{font:inherit;font-size:.86rem;font-weight:600;cursor:pointer; padding:.34rem .78rem;border-radius:999px;border:1px solid var(--line); background:#f5f3f3;color:var(--body);display:inline-flex;align-items:center;gap:.4rem} .chip:hover{border-color:#d3cccd} .chip.on{background:var(--maroon);border-color:var(--maroon);color:#fff} /* the Events chip: outlined rather than filled, so it reads as a different KIND of thing without being a different colour */ .chip.out{background:transparent;border-style:dashed;border-color:#cec7c7} /* ⚠️ MAROON-LIFT, NOT PURPLE (2026-08-26). An ACTIVE Events chip was the last large block of purple on the site and it sat right beside four maroon sport chips. It still needs to differ from them — the lifted maroon does that, and the chip also says "Events" on it, so the colour was never carrying the meaning alone. */ .chip.out.on{background:var(--maroon-lift);border-color:var(--maroon-lift);border-style:solid;color:#fff} .chip.sm{font-size:.78rem;padding:.28rem .62rem} .chip .cn{font-size:.74rem;opacity:.72;font-variant-numeric:tabular-nums} .chip.on .cn{opacity:.85} .monthhead{font-size:.76rem;font-weight:700;letter-spacing:.13em;color:#908687; margin:1.6rem 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--line)} .monthhead:first-child{margin-top:.2rem} .occasions{display:grid;gap:.7rem} /* the row skeleton is the SAME for both kinds — only the tag and the pill differ */ .occ{display:grid;grid-template-columns:auto 3rem 1fr auto;align-items:center;gap:1rem; background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line); border-radius:var(--radius);padding:.9rem 1.15rem;text-decoration:none;color:inherit; box-shadow:var(--shadow);transition:transform .12s ease,border-color .12s ease} a.occ:hover{transform:translateY(-1px);border-left-color:var(--maroon)} .occ.is-event{border-left-style:dashed;border-left-color:#cec7c7} a.occ.is-event:hover{border-left-color:var(--maroon-lift)} .occ.is-away{opacity:.62} /* ⭐ THE EVENT TAG STAYS DISTINCT WITHOUT BEING PURPLE (2026-08-26). ⛔ The distinction itself is not optional — the occasion model puts events and games in ONE list, and the tag is the only thing telling them apart. But it does not have to be a second HUE: this is the device the schedule chips already use and already argue for ("set apart by outline rather than by colour"), so an EVENT now reads as a DASHED MAROON outline against a solid one. Same family, still unmistakable, and MO State's palette is not diluted. */ .tag.evt{color:var(--maroon);border-color:var(--maroon);border-style:dashed;background:transparent} .count.away .l{color:#aca1a2} .btn{display:inline-block;background:var(--maroon);color:#fff;text-decoration:none; padding:.6rem 1.1rem;border-radius:9px;font-weight:600;border:0;cursor:pointer} .btn:hover{background:var(--maroon-lift)} .btn.ghost{background:transparent;color:var(--maroon);border:1px solid #e0c4c7} .notice{border-left:4px solid var(--warn);background:#fff9ec;border-radius:8px; padding:.9rem 1.1rem;margin-bottom:1.5rem;color:#5c4a1f;font-size:.92rem} .notice strong{color:#4a3a14} /* ⛔ THIS RULE WAS MISSING AND game.php HAS BEEN ASKING FOR IT SINCE IT SHIPPED. The hard-cap notice — "no more passes can be issued for this game" — rendered in the same amber as an informational note, so the one state that STOPS a staffer looked exactly like the one that does not. A class that matches nothing fails silently; that is the whole trap. */ .notice.bad{border-left-color:var(--danger);background:#fdf3f4;color:#5c1f27} .notice.bad strong{color:var(--danger)} .ghtags{margin:0 0 .45rem;display:flex;gap:.4rem;flex-wrap:wrap} @media (max-width:640px){ .game,.occ{grid-template-columns:auto 2.4rem 1fr;row-gap:.5rem} .count{grid-column:1/-1;text-align:left} .logo{width:2.4rem;height:2.4rem} /* ⚠️ chips WRAP rather than scroll — a horizontal scroller hides which filters exist, which is the one thing chips are for. */ .filterbar{padding:.5rem} .filterbar .fspacer{flex-basis:100%} } /* ---- game detail ---- */ .crumb{margin:0 0 1rem}.crumb a{text-decoration:none;color:#6d6566;font-size:.9rem} .crumb a:hover{color:var(--maroon)} .gamehead{display:flex;align-items:center;gap:1.25rem;background:var(--card); border:1px solid var(--line);border-left:4px solid var(--maroon);border-radius:var(--radius); padding:1.25rem 1.5rem;box-shadow:var(--shadow);margin-bottom:1.5rem;flex-wrap:wrap} .ghlogo{width:4.5rem;height:4.5rem;object-fit:contain} .ghmeta{flex:1;min-width:14rem}.ghmeta h1{margin:0 0 .2rem} .ghsub{margin:0;color:#6d6566;font-size:.92rem} .ghcount{text-align:right;min-width:8rem} .ghcount .n{font-size:2rem;font-weight:700;color:var(--ink);line-height:1} .ghcount .n span{font-size:1.1rem;font-weight:600;color:#aca1a2} .ghcount .l{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#6d6566;margin-top:.2rem} .ghcount.full .n,.ghcount.over .n{color:var(--danger)} /* An away game has no allotment to be full or over — it is simply not ours. Muted, not alarming: nothing is wrong, there is just nothing here. PLAN.md D55b. */ .ghcount.away .n{color:#aca1a2;font-weight:600} .ghcount.away .l{color:#6d6566} .ghcount.over .l{color:var(--danger);font-weight:600} .panelhead{display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-bottom:1rem;flex-wrap:wrap} .panelhead h2{margin:0;font-size:1.1rem} .empty{color:#6d6566;margin:.5rem 0 0} /* ⭐ 251b — THE ROSTER'S SCROLL FRAME. The largest roster in the system is 126 rows (event 464, measured 2026-09-12), which pushes everything below Attending off the bottom of a very long page. A frame keeps the page navigable and the list complete. ⛔⛔ THE CAP IS LIFTED IN PRINT, AND THAT IS THE LOAD-BEARING HALF. This table IS the will-call sheet MTC owes Learfield — §5 rule 1: "the will-call sheet prints every guest in full, the gate needs the real name or that person is turned away." A max-height that survived into print would truncate the sheet SILENTLY, which is the exact class of failure this repo keeps recording. So the print rule is written in the same change, not left to be noticed. ⛔ ON THE WRAPPER, NOT ON .roster — :965 already gives .roster display:block;overflow-x:auto at narrow widths, and a vertical cap on that element would fight the mobile rule. ⭐ The header stays put: position:sticky on th, so scrolling 126 rows never loses the columns. */ .rosterframe{max-height:min(62svh,44rem);overflow-y:auto;overflow-x:auto; -webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px; background:var(--card)} /* ⛔⛔ TWO NESTED HORIZONTAL SCROLLERS — I WROTE THE WARNING AND THEN SHIPPED THE BUG. My own comment above says "it is a wrapper, NOT overflow on .roster itself — :965 already sets .roster{display:block;overflow-x:auto} at narrow widths". Then I gave the wrapper overflow-x:auto too, so at phone width the TABLE scrolls sideways INSIDE a frame that also scrolls sideways. MEASURED in the page: .rosterframe overflowX auto, .roster display block / overflowX auto, and tableScrollsItself = true — two scrollbars fighting over one gesture, which is what Jeremy would have found the moment he opened the invite list on a phone. ⭐ THE FRAME OWNS BOTH AXES; THE TABLE OWNS NEITHER. One scroller, both directions, and the sticky header keeps working because the frame is the scroll container. */ @media (max-width:640px){ .rosterframe .roster{display:table;overflow-x:visible;min-width:38rem} /* min-width is what makes the FRAME scroll horizontally instead of the table: the table is wider than the phone, the frame clips it, and one gesture moves it. */ } .rosterframe .roster th{position:sticky;top:0;z-index:1;background:#faf8f8} .rosterframe .roster{font-size:.92rem} @media print{ /* ⛔ NEVER CAP THE WILL-CALL SHEET */ .rosterframe{max-height:none;overflow:visible;border:0;border-radius:0;background:none} .rosterframe .roster th{position:static} } .roster{width:100%;border-collapse:collapse;font-size:.94rem} .roster th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em; color:#6d6566;font-weight:700;padding:.5rem .6rem;border-bottom:1px solid var(--line)} .roster td{padding:.75rem .6rem;border-bottom:1px solid var(--line);vertical-align:top} .roster tr:last-child td{border-bottom:0} .roster .num{text-align:right} .gname{font-weight:600;color:var(--ink)} .gsub{font-size:.83rem;color:#6d6566;margin-top:.1rem} .muted{color:#7a7172} .is-private{background:#fafafa} .pill.dark{background:var(--focus);color:#fff;border:0;margin-left:.4rem;vertical-align:1px} .actions{text-align:right;white-space:nowrap} .lnk{background:none;border:0;color:var(--maroon);cursor:pointer;font:inherit; font-size:.87rem;padding:.2rem .4rem;border-radius:5px} /* Confirmation ON THE ROW after a sign-in link is sent — a toast at the top of a long People table is read by nobody. Reverts after a few seconds so it cannot be mistaken for a permanent state. PLAN.md item 124. */ .lnk.ok{color:#1f7a3d;font-weight:600} .lnk:hover{background:#f3f2f2} .lnk.danger{color:var(--danger)}.lnk.danger:hover{background:#fdf0f1} .lnk:disabled{opacity:.5;cursor:default} /* ---- dialog ---- */ /* ⚠️ margin:auto and max-height ADDED 2026-08-26 and they belong on the BASE rule, not on one dialog. Without margin:auto a modal is not reliably centred; without max-height a tall one (the Access modal, the add-guest dialog with its consent text) runs off the bottom of the viewport with no way to reach its buttons — measured 565px tall in an 824px window sitting at y=394. The dialog scrolls inside itself instead. */ dialog{border:0;border-radius:var(--radius);padding:0;max-width:32rem;width:calc(100% - 2rem); margin:auto;max-height:calc(100vh - 3rem);max-height:calc(100svh - 3rem);overflow:auto; box-shadow:0 24px 64px -16px rgba(24,21,21,.45)} dialog::backdrop{background:rgba(24,21,21,.45)} dialog form{padding:1.5rem} dialog h2{margin:0 0 1rem;font-size:1.15rem} dialog label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.85rem} dialog input{display:block;width:100%;margin-top:.25rem;padding:.55rem .7rem;font:inherit; border:1px solid #dbd5d6;border-radius:8px;background:#fff;color:var(--ink)} dialog input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} dialog menu{display:flex;gap:.6rem;justify-content:flex-end;margin:1.25rem 0 0;padding:0} .hint{font-size:.83rem;color:#6d6566;margin:.1rem 0 0} .hint.warn{color:var(--warn);font-weight:600} .err{color:var(--danger);font-size:.88rem;margin:.6rem 0 0;font-weight:600} .sugg{border:1px solid var(--line);border-radius:9px;max-height:15rem;overflow:auto; margin:-.6rem 0 .85rem;background:#fff;box-shadow:var(--shadow)} .suggrow{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:.55rem .75rem;font:inherit;border-bottom:1px solid var(--line)} .suggrow:last-child{border-bottom:0} .suggrow:hover,.suggrow:focus{background:#f8f7f7;outline:none} .sname{display:block;font-weight:600;color:var(--ink);font-size:.92rem} .smeta{display:block;font-size:.79rem;color:#6d6566;margin-top:.05rem} @media (max-width:640px){.row2{grid-template-columns:1fr}} /* ---- blast ---- */ .headbtns{display:flex;gap:.6rem;flex-wrap:wrap} dialog select{display:block;width:100%;margin-top:.25rem;padding:.55rem .7rem;font:inherit; border:1px solid #dbd5d6;border-radius:8px;background:#fff;color:var(--ink)} dialog textarea{display:block;width:100%;margin-top:.25rem;padding:.55rem .7rem;font:inherit; border:1px solid #dbd5d6;border-radius:8px;background:#fff;color:var(--ink);resize:vertical} dialog textarea:focus,dialog select:focus{outline:2px solid var(--focus);outline-offset:1px} #confirmDlg{max-width:44rem} .recips{max-height:8rem;overflow:auto;border:1px solid var(--line);border-radius:9px; padding:.5rem .7rem;margin:.5rem 0 .9rem;background:#fafafa} .recip{font-size:.86rem;color:#423b3b;padding:.15rem 0} .subjline{font-size:.9rem;margin:.2rem 0 .6rem;color:#423b3b} #cPreview{width:100%;height:22rem;border:1px solid var(--line);border-radius:10px;background:#fff} /* ---- suite & prime ---- */ .entitle{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem;margin:1.2rem 0 1.6rem} /* ⚠️ The event cards' top rule was MTC purple; maroon-lift keeps them distinct from the plain panels around them without introducing a second hue. */ .ecard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--maroon-lift); border-radius:var(--radius);padding:.95rem 1.1rem;box-shadow:var(--shadow)} .ecard .ek{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:#6d6566;font-weight:700} .ecard .ev{font-size:1.5rem;font-weight:700;color:var(--ink);margin:.15rem 0} .ecard .ev span{font-size:.85rem;font-weight:600;color:#aca1a2} .ecard .ee{font-size:.79rem;color:#6d6566;line-height:1.4} /* ---- gameday settings ---- */ .gsettings{margin-top:1.25rem} .gsettings label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.9rem} .gsettings textarea,.gsettings input,.gsettings select{display:block;width:100%;margin-top:.25rem; padding:.55rem .7rem;font:inherit;border:1px solid #dbd5d6;border-radius:8px;background:#fff; color:var(--ink);resize:vertical} .gsettings textarea:focus,.gsettings input:focus,.gsettings select:focus{ outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)} .hint.ok{color:var(--ok);font-weight:600} /* ================= dashboard ================= */ .hero{position:relative;overflow:hidden;border-radius:var(--radius);margin-bottom:1.25rem; background:linear-gradient(135deg,#5E0009 0%,#7d1017 55%,#2a0004 160%); color:#fff;padding:2.1rem 2rem;box-shadow:var(--shadow)} .heroInner{position:relative;z-index:2;max-width:38rem} .hero .eyebrow{margin:0 0 .35rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.72);font-weight:700} .hero h1{margin:0 0 .4rem;font-size:2rem;color:#fff;letter-spacing:-.02em} .hero .lede{margin:0;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.5;max-width:34rem} .heroMark{position:absolute;right:-1.5rem;top:50%;transform:translateY(-50%); height:150%;opacity:.10;z-index:1;pointer-events:none} .nextgame{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.25rem} .ngLabel{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;background:#fbf1f2; border-bottom:1px solid #f0dfe1;font-size:.76rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--maroon)} .ngLabel .dot{width:7px;height:7px;border-radius:50%;background:var(--maroon); box-shadow:0 0 0 3px rgba(94,0,9,.16)} .ngBody{display:flex;align-items:center;gap:1.4rem;padding:1.4rem;flex-wrap:wrap} .ngLogo{width:5rem;height:5rem;object-fit:contain;flex:none} .ngMeta{flex:1;min-width:15rem} .ngMeta h2{margin:0 0 .25rem;font-size:1.45rem;letter-spacing:-.01em} .ngMeta p{margin:0;color:#6d6566;font-size:.92rem} .ngVenue{margin-top:.15rem !important;font-size:.86rem !important} .ngNums{text-align:right;min-width:9rem} .ngBig{font-size:2.3rem;font-weight:700;color:var(--ink);line-height:1} .ngBig span{font-size:1.1rem;color:#aca1a2;font-weight:600} .ngSub{font-size:.8rem;color:#6d6566;margin:.15rem 0 .7rem} .bar{height:5px;background:#f2eff0} .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--maroon),#7d1017)} .statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem;margin-bottom:1.5rem} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:1rem 1.15rem;box-shadow:var(--shadow)} .stat .sk{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#6d6566;font-weight:700} .stat .sv{font-size:1.7rem;font-weight:700;color:var(--ink);line-height:1.15;margin:.1rem 0} .stat .sv span{font-size:.9rem;color:#aca1a2;font-weight:600} .stat .se{font-size:.79rem;color:#6d6566} .cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start} .uplist,.actlist{list-style:none;margin:0;padding:0} .uplist li{border-bottom:1px solid var(--line)} .uplist li:last-child{border-bottom:0} .uplist a{display:flex;align-items:center;gap:.8rem;padding:.65rem .1rem;text-decoration:none;color:inherit} .uplist a:hover .un{color:var(--maroon)} .uplist .ud{font-size:.78rem;font-weight:700;color:#6d6566;min-width:3.2rem;letter-spacing:.02em} .uplist img{width:1.9rem;height:1.9rem;object-fit:contain} .uplist .un{flex:1;font-weight:600;color:var(--ink);font-size:.95rem} .uplist .uc{font-size:.85rem;font-weight:700;color:var(--ink)} .uplist .uc.zero{color:#cac2c3} /* ⚠️ .uplist a was the ONLY styled child; the away rows are a because they have nowhere to go, and without this they would collapse to unaligned text. */ .uplist .nolink{display:flex;align-items:center;gap:.8rem;padding:.65rem .1rem; color:inherit;opacity:.6} /* a small dot stands in for the opponent crest an event does not have, so every row's columns line up whether or not there is a logo */ .uplist .udot{width:1.9rem;height:1.9rem;display:inline-flex;flex:0 0 1.9rem} .uplist .udot::after{content:"";margin:auto;width:.5rem;height:.5rem;border-radius:50%; background:#dad5d5} .uplist .udot.evt::after{background:transparent;border:2px solid var(--maroon-lift); width:.62rem;height:.62rem} /* THE PARTNER FILTER (82, made a dropdown 2026-08-26). ⛔⛔ IT USED TO BE A ROW OF CHIPS AND THAT DID NOT SCALE. Jeremy: "if we end up with 50 partners that is not manageable." The chips on the SCHEDULE stay chips — that is a closed set of four. An organisation list grows forever, so it gets a dropdown with a search. */ .orgbar{margin-bottom:.9rem;position:relative;z-index:30} .orgbar .orglabel{font-size:.82rem;color:#6d6566;font-weight:600;margin-right:.2rem} .orgnote{margin:-.4rem 0 1.1rem;font-size:.86rem;color:#6d6566} .orgnote strong{color:var(--maroon)} .orgnote a{color:#6d6566;text-decoration:underline;text-underline-offset:2px} .orgnote a:hover{color:var(--maroon)} .orgpick{position:relative} /* ⛔ list-style:none AND ::-webkit-details-marker — Safari uses the pseudo-element and ignores the property, so dropping either leaves a stray disclosure triangle on one browser only. */ .orgpick > summary{list-style:none;cursor:pointer} .orgpick > summary::-webkit-details-marker{display:none} .orgpick-btn{display:inline-flex;align-items:center;gap:.5rem; font:inherit;font-size:.86rem;font-weight:600;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:999px; padding:.34rem .75rem .34rem .85rem;min-width:12rem;justify-content:space-between} .orgpick-btn:hover{border-color:#d3cccd} .orgpick-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .orgpick[open] > .orgpick-btn{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(94,0,9,.09)} .orgpick-caret{flex:none;color:#6d6566;transition:transform .12s ease} .orgpick[open] .orgpick-caret{transform:rotate(180deg)} .orgpick-panel{position:absolute;top:calc(100% + .4rem);left:0;z-index:40; min-width:17rem;max-width:min(24rem,92vw); background:var(--card);border:1px solid var(--line);border-radius:.7rem; box-shadow:var(--shadow);padding:.35rem} .orgpick-search{width:100%;font:inherit;font-size:.86rem; padding:.42rem .6rem;margin-bottom:.3rem; border:1px solid var(--line);border-radius:.45rem;background:#fbfbfb} .orgpick-search:focus{outline:none;border-color:var(--focus);background:#fff} /* ⚠️ The list SCROLLS. At 50 partners an unbounded panel runs off the bottom of the screen and the last partners are unreachable — which is the same failure the chips had, moved. */ .orgpick-list{list-style:none;margin:0;padding:0;max-height:17rem;overflow-y:auto} .orgpick-opt{display:flex;align-items:center;gap:.5rem; padding:.42rem .5rem;border-radius:.45rem;text-decoration:none; color:var(--body);font-size:.88rem} .orgpick-opt:hover,.orgpick-opt:focus-visible{background:#f5f3f3;color:var(--ink);outline:none} .orgpick-opt.on{background:var(--maroon);color:#fff;font-weight:600} .orgpick-opt.on .orgpick-kind{color:rgba(255,255,255,.8)} .orgpick-tick{flex:none;width:1rem;text-align:center;font-weight:700} .orgpick-name{flex:1 1 auto} .orgpick-off{color:#a19798;font-weight:400} .orgpick-kind{flex:none;font-size:.72rem;color:#958a8b;font-variant-numeric:tabular-nums} .orgpick-none{margin:.3rem .5rem .45rem;font-size:.84rem;color:#6d6566} @media (max-width:560px){ .orgpick,.orgpick-btn{width:100%} .orgpick-panel{left:0;right:0;max-width:none} } /* UNDO AT THE GATE (item 94). ⚠️ The button has to be reachable with a thumb, in the dark, with a queue behind you — and it must not be so prominent that it gets pressed by accident while somebody is aiming a camera. */ /* ⚠️ .scanrow IS A BLOCK ON WHITE, NOT A FLEX ROW ON MAROON. I wrote this rule for a dark flex row first — `margin-left:auto` does nothing in a block, and a white-on-transparent button is invisible on a white card. Positioned instead, so the existing stacked name/detail layout is left exactly as it was. */ .scanrow{position:relative} /* ⛔⛔ 192b — TWO CONTROLS CANNOT SHARE ONE ABSOLUTE CORNER. `.scanundo` was position:absolute at top/right, and a wrong-day row that is ALSO checked in carries TWO of them (Undo, and Admit anyway) — so the second painted exactly on top of the first and the Undo was invisible while sitting in the DOM. Jeremy photographed it twice; my assertions checked the source and the API JSON and were green through both. ⭐ THE ACTIONS NOW LIVE IN A FLEX CONTAINER BELOW THE TEXT, which is also the right shape for a phone at a gate: two pills side by side at the top-right would squeeze the guest's name into a column on a 390px screen. */ /* ⭐⭐ 192c — THE DOOR PICKER IS A GATE CONTROL AND HAD NO STYLING AT ALL. Measured on the live page: a bare 19px-tall native select — and it is REQUIRED, so a person at a door must hit it before they can admit anybody. It is now a full-width 44px control at EVERY size, not just on phones: nobody works a gate on a mouse, and a bigger target costs a desktop nothing. ⛔ Its own block, below the question, so the label never squeezes it. */ .gate-door{display:block;margin:.8rem 0 .2rem;font-weight:600} .gate-door select{display:block;width:100%;margin-top:.35rem;font:inherit;font-size:1rem; min-height:44px;padding:.5rem .6rem;border:1px solid var(--line);border-radius:.5rem; background:#fff;color:inherit} /* ⭐ And every control inside the gate panel is thumb-sized — UNCONDITIONALLY, not behind a media query. The gate is the one screen in this product used one-handed, outdoors, with a queue waiting, and it is ALWAYS a phone. ⛔ It was written as `@media (pointer:coarse)` first, and that is exactly the kind of rule I cannot verify from this desktop browser: it measured 36px here and I would have been guessing that it became 44px on his handset. A size I can measure beats a size I have to reason about. */ .gate .btn{min-height:44px} .scanacts{display:flex;gap:.4rem;justify-content:flex-end;flex-wrap:wrap;margin-top:.5rem} .scanacts:empty{display:none;margin:0} /* ⭐⭐ 192c — A GATE IS WORKED ON A PHONE, WITH ONE THUMB, IN A QUEUE. Jeremy, 2026-09-09: "this need to be completely reactive and work with all phone sizes." ⛔ The desktop pill is ~24px tall. Apple's own guidance is a 44px minimum target and this is the control that admits somebody or undoes admitting them — a mis-tap here is a person wrongly let in or wrongly turned away. ⭐ On a COARSE POINTER or a narrow screen the actions become full-height, share the row two-up and WRAP rather than overflow, so there is no width at which they collide or leave the card. ⚠️ `pointer:coarse` catches a big phone in landscape that is wider than the breakpoint; the max-width catches a narrow desktop window. Either alone misses a real case. */ @media (pointer: coarse), (max-width: 30rem){ .scanacts{gap:.5rem} .scanundo{min-height:44px;padding:.6rem 1rem;font-size:.9rem;flex:1 1 8rem} } .scanundo{font:inherit;font-size:.78rem; font-weight:600;padding:.24rem .7rem;border-radius:999px;cursor:pointer; border:1px solid var(--line);background:#fff;color:#6e6e73} .scanundo:hover{border-color:var(--maroon);color:var(--maroon)} .scanundo:disabled{opacity:.5;cursor:default} /* ⛔ STRUCK THROUGH, NOT DELETED. The row stays so the log still shows what happened. */ .scanrow.undone{border-left-color:#ccc} .scanrow.undone strong,.scanrow.undone span:not(.scanundone){text-decoration:line-through;opacity:.55} .scanundone{position:absolute;top:.7rem;right:.7rem;font-size:.72rem;text-transform:uppercase; letter-spacing:.06em;color:#958a8b} /* the name must not run under the button */ /* ⭐ 192b — no reserved gutter needed now the actions are not overlaying the text. */ .scanrow strong,.scanrow span{padding-right:0} /* the branding library, split by brand owner (item 90). The category is a SUB-head inside a brand section, so it must read as smaller than the brand without disappearing. */ .libcat{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em; color:#6d6566;margin:1rem 0 .3rem;font-weight:700} .libcat:first-of-type{margin-top:.3rem} /* the Access modal (81) — role and override must READ differently, not just compute differently, or a deliberate exception looks like a normal setting */ .acperms{display:grid;gap:.15rem;margin:.6rem 0 .9rem} .acrow{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.55rem .6rem;border-radius:9px} .acrow.is-override{background:#fbf1f2;box-shadow:inset 3px 0 0 var(--maroon)} .aclabel{font-weight:600;color:var(--ink);font-size:.94rem} .acsub{font-weight:500;font-size:.76rem;color:#908687;margin-top:.1rem} .acrow.is-override .acsub{color:var(--maroon)} .acseg{display:flex;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;overflow:hidden} .acseg button{font:inherit;font-size:.8rem;padding:.3rem .6rem;border:0;cursor:pointer; background:#fff;color:var(--body);border-left:1px solid var(--line)} .acseg button:first-child{border-left:0} .acseg button.on{background:var(--maroon);color:#fff} @media (max-width:640px){ .acrow{flex-wrap:wrap;gap:.4rem} } /* two wallet buttons side by side — they wrap on a phone rather than overflow, and a single button is unaffected (a one-item flex row lays out as it always did) */ .walletbtns{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;align-items:center} /* month bands inside the Engagement table — the same grouping the schedule uses, so the two screens read the same way. ⛔ A month band with nothing under it is hidden by schedule.js, exactly as on the schedule. */ .occtable .monthrow td{background:#f5f3f3;font-size:.72rem;font-weight:700;letter-spacing:.13em; color:#908687;padding:.4rem .6rem} .occtable .occ .tag{margin-right:.35rem} /* ⛔⛔ A TABLE ROW IS NOT A CARD. `.occ` is the SCHEDULE's card skeleton — `display:grid` with four columns — and the Engagement "By occasion" table reuses that class on its so both screens can share ONE filter (`.chip[data-f]` + rows carrying `data-f`). Sharing the class dragged the card layout in with it: seven s poured into a four-column grid, wrapping onto a second line, each cell an arbitrary width, none of them lining up with the above. Measured 2026-08-28: the row computed `display:grid`, width 524px inside a 990px table, cells 179/48/172/35/179/48/172 against headers 524/71/60/97/70/93/75. Jeremy: "this is not diplaying right presently 'By occasion' it in the engagement". ⭐ THE CLASS IS KEPT ON PURPOSE — it is what makes the shared filter work, and renaming it would fork the one filter into two. ⛔ AND THIS IS ONLY SAFE BECAUSE OF D23: `[hidden]{display:none !important}` now sits above every author rule, so re-declaring `display` here can no longer stop a filter from hiding a row. Before that fix this exact shape of rule was the bug. */ .occtable tr.occ{display:table-row;background:none;border:0;border-radius:0;padding:0; box-shadow:none;transform:none} .occtable tr.occ>td{display:table-cell;vertical-align:middle} .occtable tr.occ:hover{transform:none} /* ───────────────────────────────── YOUR BENEFITS — a list, never a tile grid ── ⛔ One row per benefit HELD. A grid built for eight sports shows a partner who holds one thing a single tile and seven blanks; a list of one row looks intentional. */ .benefits{margin-bottom:1.5rem} .benefits .meta{color:#6d6566;font-size:.87rem} .benlist{list-style:none;margin:0;padding:0} .benlist li{padding:.55rem 0;border-bottom:1px solid var(--line)} .benlist li:last-child{border-bottom:0} .benlist a{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit} .benlist a:hover .bl{color:var(--maroon)} .benlist .bl{flex:0 0 auto;min-width:11rem;font-weight:650;color:var(--ink);font-size:.95rem} .benlist .bbar{flex:1;height:.5rem;border-radius:999px;background:#eeebeb;overflow:hidden; min-width:4rem} .benlist .bbar>span{display:block;height:100%;background:var(--maroon);border-radius:999px} .benlist .bn{font-weight:700;color:var(--ink);font-size:.95rem;font-variant-numeric:tabular-nums} .benlist .bn span{font-weight:600;color:#aca1a2} .benlist .bsub{font-size:.78rem;color:#908687;margin-top:.1rem} @media (max-width:640px){ .benlist a{flex-wrap:wrap;gap:.5rem} .benlist .bl{flex:1 1 100%;min-width:0} } .actlist li{padding:.6rem 0;border-bottom:1px solid var(--line)} .actlist li:last-child{border-bottom:0} .actlist .an{font-weight:600;color:var(--ink);font-size:.95rem;display:flex; justify-content:space-between;gap:.75rem} .actlist .ap{font-weight:700;color:#6d6566;font-size:.82rem;white-space:nowrap} .actlist .am{font-size:.82rem;color:#6d6566;margin-top:.1rem} @media (max-width:820px){ .cols{grid-template-columns:1fr} .hero{padding:1.6rem 1.35rem} .hero h1{font-size:1.6rem} .ngNums{text-align:left;min-width:0} } /* ================= MO State watermark ================= The "Mo State" script sitting faintly behind every page. ⚠️ NOT a CSS mask. The first attempt masked on the PNG's alpha channel — but this artwork is a script with a HEAVY OUTLINE, so its alpha is one solid blob and the silhouette swallowed the letterforms completely. It rendered as an amorphous smudge, not a wordmark. The asset is now the artwork with its WHITE FILL REMOVED (fuzz 28%), so the maroon outline carries the shape, and it is drawn as a normal background image at low opacity. Outline art needs more opacity than a solid would. ⛔ It must never compete with text: fixed, non-interactive, behind everything, and excluded from print (see print.css). */ body::before{ content:""; position:fixed; right:3vw; bottom:4vh; width:min(40vw, 26rem); aspect-ratio:1200 / 935; /* must match the artwork or `contain` letterboxes it */ background:url(/assets/mostate-script.png) no-repeat center/contain; opacity:.11; pointer-events:none; z-index:0; } /* Content must sit above the watermark. The topbar paints its own ground. */ /* ⛔⛔ THE CLASSIC z-index TRAP, and it is why the mobile menu rendered BEHIND the page. .topbar and .wrap both sat at z-index:1 and .wrap comes LATER in the DOM, so at equal z-index the content won. Worse: giving .topbar a z-index makes it a STACKING CONTEXT, so the menu's own z-index:40 was sealed inside it and only ever competed with its siblings in the header — a child can never escape its parent's stacking context, however large its number. The header has to outrank the content, and the fix belongs HERE, not on .nav. ⚠️ 70 puts it above the Terra launcher (60) and its panel (59) too, so an open menu covers them instead of being punched through by a floating circle. */ .wrap,.foot{position:relative;z-index:1} .topbar{position:relative;z-index:70} .hero{z-index:1} @media (max-width:640px){ body::before{width:70vw;right:2vw;bottom:2vh;opacity:.09} } /* ⛔ A STRAY `}` SAT HERE. CSS parsing made it swallow the NEXT rule, so .gsettings .lblhint never applied at any width — a rule that was simply never in effect and could not be seen to fail. Removed 2026-08-25. */ /* ⛔ F2 — SCOPED TO .gsettings, SO EVERY OTHER .lblhint RENDERED INLINE. partner.php's add-person dialog reads "Email They sign in with a link sent here." as one unbroken string, inconsistent with its own Name/Mobile/Role siblings, on the FIRST screen an admin uses to onboard a partner. MEASURED in the browser, not read off the source. ⭐ The class was always generic; only the selector was not. Unscoped now, with .gsettings kept as a no-op ancestor for anything relying on specificity. */ .lblhint{display:block;font-weight:400;color:#6d6566;font-size:.82rem;margin:.15rem 0 .1rem} dialog menu.split{justify-content:space-between;align-items:center} dialog menu.split span{display:flex;gap:.6rem} .ck{display:flex;gap:.55rem;align-items:flex-start;padding:.4rem 0;font-weight:400; font-size:.9rem;color:var(--ink);cursor:pointer;margin:0} .ck input{margin-top:.25rem;flex:none} /* ⚠️ The generic `dialog input {display:block; width:100%}` rule above is meant for text fields, but it also caught these CHECKBOXES — rendering each one as a full-width block on its own line, floating above the name it belongs to. Reset them explicitly rather than loosening the generic rule, which text inputs rely on. */ .ck input[type="checkbox"]{display:inline-block;width:auto;padding:0;margin:.3rem 0 0; flex:none;accent-color:var(--maroon)} .ck{align-items:flex-start} .ck:hover{background:#f5f3f3;border-radius:6px} .ck span{flex:1;min-width:0} /* ── Terra ───────────────────────────────────────────────────────────────── A circular launcher in the lower right that opens a chat window. It replaced an inline panel that lived on two screens only; a launcher that follows you is reachable from wherever you actually got stuck. ⛔ The ICON came from Disbursal Flow. The UI did not — this is Bears' own. */ .terra-launch{ position:fixed;right:1.25rem;bottom:1.25rem;z-index:60; width:3.5rem;height:3.5rem;border-radius:50%; display:flex;align-items:center;justify-content:center; background:#fffdfa;border:2px solid #5E0009;cursor:pointer;padding:0; /* Maroon must appear — it is a licence condition, not a preference. It is the ring. ⚠️ Bears is LIGHT-THEME ONLY (no data-theme, no prefers-color-scheme), so the light-background artwork terra-d.png is the only variant that ships. terra-n.png (the dark-background one) stays in assets/ as source and is deliberately NOT deployed — shipping an asset nothing references is weight on every page load for nobody. */ box-shadow:0 6px 18px rgba(0,0,0,.22); transition:transform .15s ease, box-shadow .15s ease; } .terra-launch:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(0,0,0,.28)} /* ⚠️ .wrap's bottom padding clears the launcher only at the END of the document. Mid-scroll the circle still covers the right ~76px, which is exactly where .actions is right-aligned in every table. Tucked in and made slightly smaller on a phone. */ @media (max-width:40rem){ .terra-launch{right:.6rem;bottom:.6rem;width:3rem;height:3rem} .terra-launch img{width:2.1rem;height:2.1rem} } .terra-launch:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .terra-launch img{display:block;width:2.5rem;height:2.5rem;object-fit:contain} /* ⚠️ The eye is MAROON as of 2026-08-25 (Jeremy asked; it was grey). Recolouring it was not a hue swap: the artwork's ALPHA is solid across the whole eye and its detail lives in the LUMINANCE — dark ink on light fill. Flooding RGB while keeping alpha produced a solid maroon blob, the same failure the MO State watermark hit here. The mask is alpha × (1 − luminance)^0.5, so a dark line becomes opaque maroon and the light fill becomes transparent. Source of truth: assets/terra-maroon.png. */ .terra-launch.is-open{transform:scale(.92);opacity:.9} .terra-panel{ position:fixed;right:1.25rem;bottom:5.4rem;z-index:59; width:23rem;max-width:calc(100vw - 2.5rem); height:29rem;max-height:calc(100vh - 8rem);max-height:calc(100svh - 8rem); background:#fff;border-radius:.9rem;overflow:hidden; box-shadow:0 16px 44px rgba(0,0,0,.26); display:none;flex-direction:column; } .terra-panel.is-open{display:flex} .terra-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem; background:#5E0009;color:#fff;flex:0 0 auto} .terra-head-mark{background:#fffdfa;border-radius:50%;padding:.18rem;flex:0 0 auto} .terra-head-txt{display:flex;flex-direction:column;line-height:1.2;flex:1 1 auto;min-width:0} .terra-head-txt strong{font-size:.98rem} .terra-head-txt span{font-size:.72rem;opacity:.82} /* ⚠️ The attribution sits UNDER the capability line and must not compete with it — quieter and smaller, so "gameday, parking, rosters" is still the first thing read. */ .terra-head-txt .terra-powered{font-size:.64rem;opacity:.62;letter-spacing:.01em} .terra-x{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer; padding:0 .2rem;opacity:.85} .terra-x:hover{opacity:1} .terra-log{flex:1 1 auto;overflow-y:auto;padding:.8rem;background:#faf9f9} .terra-msg{padding:.5rem .7rem;border-radius:.75rem;margin-bottom:.5rem;line-height:1.45; font-size:.92rem;max-width:88%} .terra-msg .who{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase; opacity:.7;margin-bottom:.15rem} .terra-msg.you{background:rgba(94,0,9,.09);margin-left:auto;border-bottom-right-radius:.2rem} .terra-msg.terra{background:#fff;border:1px solid rgba(0,0,0,.07);border-bottom-left-radius:.2rem} .terra-msg.pending{opacity:.6;font-style:italic} .terra-msg.err{background:rgba(180,40,40,.10);border-color:rgba(180,40,40,.2)} .terra-ask{display:flex;gap:.4rem;padding:.6rem;background:#fff;border-top:1px solid rgba(0,0,0,.08); flex:0 0 auto} .terra-ask input{flex:1;min-width:0;padding:.5rem .65rem;border:1px solid rgba(0,0,0,.18); border-radius:1.2rem;font:inherit;font-size:.92rem} .terra-ask input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:transparent} .terra-send{background:#5E0009;color:#fff;border:0;border-radius:1.2rem;padding:.5rem .95rem; font:inherit;font-size:.9rem;font-weight:600;cursor:pointer} .terra-send:disabled{opacity:.55;cursor:default} /* On a phone the panel is the screen, not a floating card. */ @media (max-width:34rem){ .terra-panel{right:.6rem;left:.6rem;bottom:4.8rem;width:auto;height:auto;top:3.5rem} } /* The will-call sheet is a printed document handed to a gate. Terra is not part of it. */ @media print{ .terra-launch,.terra-panel{display:none !important} } /* ── The gate ────────────────────────────────────────────────────────────── Read at arm's length, outdoors, in a queue, probably in the dark. Big type, one decision per screen, and colour that survives glare. */ .gate .gate-banner{padding:.9rem 1rem;border-radius:.6rem;margin:0 0 1rem;font-size:1.15rem} .gate .gate-banner strong{display:block;font-size:1.5rem;line-height:1.2} .gate .gate-banner span{display:block;font-size:.9rem;opacity:.9;margin-top:.2rem} .gate .gate-banner .gate-note{font-weight:600;opacity:1;margin-top:.45rem} .gate-banner.good{background:#1f6b3a;color:#fff} .gate-banner.warn{background:#8a5a00;color:#fff} .gate-banner.bad {background:#8a1f1f;color:#fff} .gate-guest{padding:.4rem 0 1rem} .gate-name{font-size:1.7rem;font-weight:700;line-height:1.15} .gate-party{font-size:1.15rem;font-weight:600;color:#5E0009;margin:.2rem 0 .5rem} .gate-sub{font-size:.92rem;opacity:.75;margin-top:.15rem} .gate-admit{font-size:1.15rem;padding:.85rem 1.6rem;width:100%} /* ── 264 · THE BIG MARK AFTER A SCAN ──────────────────────────────────────── Jeremy: "a transparent model basically to show for a few seconds and then auto dismiss or could be quickly dismissed by touching the screen." ⭐ Sized off the SHORTER side of the screen so a phone held either way and a tablet all get a mark most of the screen wide. The scan page shows through. ⛔ Fixed colours, not theme tokens: this is read at arm's length outdoors, in both themes alike. */ .gatemark{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:clamp(.6rem,2.5vmin,1.4rem);padding:max(16px,4vmin); background:rgba(24,18,18,.30);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); text-align:center;cursor:pointer;touch-action:none;animation:gm-in .14s ease-out} .gatemark .gm-img{display:block;width:min(72vw,58vh,620px);height:auto;max-height:58vh;object-fit:contain; filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))} .gatemark .gm-card{position:relative;overflow:hidden;background:rgba(255,255,255,.95);color:#1d1515; border-radius:1rem;padding:.75rem 1.2rem .9rem;max-width:min(92vw,40rem);box-shadow:0 10px 30px rgba(0,0,0,.25)} .gatemark .gm-title{font-size:clamp(1.45rem,6vw,2.3rem);font-weight:800;line-height:1.1} .gatemark .gm-text{font-size:clamp(1rem,4.2vw,1.35rem);line-height:1.3;margin-top:.3rem} .gatemark .gm-tap{font-size:.8rem;opacity:.6;margin-top:.45rem} .gatemark .gm-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;transform-origin:left; background:#5E0009;animation:gm-bar var(--gm-ms,2500ms) linear forwards} .gatemark.gm-check .gm-title{color:#1f7a2e} .gatemark.gm-x .gm-title{color:#b3121b} .gatemark.gm-caution .gm-title{color:#8a5a00} @media (orientation:landscape) and (max-height:520px){ .gatemark{flex-direction:row} .gatemark .gm-img{width:min(44vw,78vh);max-height:78vh} .gatemark .gm-card{max-width:48vw;text-align:left} } /* 264 · the "At the gate" rule panel */ .grule{border:1px solid rgba(0,0,0,.1);border-radius:.8rem;padding:1rem;margin:.8rem 0} .grule.is-off{opacity:.6} .grule-when{margin:.9rem 0 .6rem;font-size:1.02rem} .grule-row{display:flex;gap:1rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid rgba(0,0,0,.07)} .grule-thumb{flex:0 0 auto;width:6.5rem;height:6.5rem;border:1px dashed rgba(0,0,0,.25);border-radius:.6rem; background:repeating-conic-gradient(#f1eded 0 25%,#fff 0 50%) 50%/16px 16px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.2rem;cursor:pointer;padding:.35rem;font:inherit} .grule-thumb img{max-width:100%;max-height:4.6rem;object-fit:contain} .grule-thumb span{font-size:.75rem;color:#5E0009;font-weight:600} .grule-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.45rem} .grule-body input[type=text]{width:100%} .grule-lbl{font-weight:700} .grule-stats,.grule-foot,.grule-in{font-size:.9rem;margin:.6rem 0 0} .grule-cands{margin-top:.7rem} /* ⭐ a picker and its button on ONE baseline — the label's own bottom margin had lifted the button (Jeremy, pixels) */ .grule-add{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;margin:.4rem 0 .2rem} .gsettings .grule-add label{flex:1 1 18rem;margin:0} .grule-add select,.grule-add .btn{height:2.75rem;box-sizing:border-box} .grule-add .btn{flex:0 0 auto;display:inline-flex;align-items:center} .gsettings .grule-add select:disabled{opacity:1;color:var(--ink);background:#f7f4f4;cursor:default} .grule-in-marks{display:flex;align-items:center;gap:.75rem;margin-top:.6rem;font-size:.9rem} .grule-mini{flex:0 0 auto;width:3.6rem;height:3.6rem;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;display:flex; align-items:center;justify-content:center;background:repeating-conic-gradient(#f1eded 0 25%,#fff 0 50%) 50%/12px 12px} .grule-mini img{max-width:88%;max-height:88%;object-fit:contain} /* ⭐ "Issued together" used a bare native select — 19px tall, no border (Jeremy, pixels) */ #sec-dual .js-dual-pick{height:2.6rem;min-width:16rem;max-width:100%;padding:0 .7rem;font:inherit; border:1px solid #dbd5d6;border-radius:8px;background:#fff;color:var(--ink)} .grule-dlg{max-width:min(40rem,94vw);padding:1.2rem 1.4rem;border:0;border-radius:1rem;box-shadow:0 18px 50px rgba(0,0,0,.3)} .grule-dlg h3{margin:0 0 .3rem} .grule-dlg .dlgfoot{margin-top:.8rem;display:flex;justify-content:flex-end} .grule-opts{list-style:none;padding:0;margin:.6rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.6rem} .grule-opt{width:100%;border:1px solid rgba(0,0,0,.15);border-radius:.6rem;padding:.5rem;cursor:pointer;font:inherit; background:repeating-conic-gradient(#f1eded 0 25%,#fff 0 50%) 50%/16px 16px;display:flex;flex-direction:column;align-items:center;gap:.3rem} .grule-opt img{height:4.5rem;max-width:100%;object-fit:contain} .grule-opt span{font-size:.8rem;background:#fff;padding:0 .3rem;border-radius:.3rem} .grule-up{display:block;margin:.4rem 0} @media (max-width:520px){.grule-row{flex-direction:column}.grule-thumb{width:100%;height:7rem}} /* ⛔ NO OPACITY IN THE ENTRANCE — measured 2026-09-13: screenshots caught the mark half-faded; a phone that throttles animation would show a see-through check in sunlight. It pops at full strength; only its size eases. */ @keyframes gm-in{from{transform:scale(.94)}to{transform:none}} @keyframes gm-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}} @media (prefers-reduced-motion:reduce){.gatemark{animation:none}.gatemark .gm-bar{animation:none;display:none}} .ticket-card{text-align:center} .ticket-qr{margin:1rem auto;max-width:260px} .ticket-qr svg{width:100%;height:auto;display:block} @media print{ .ticket-card .muted:last-of-type,.nav,.who,.foot{display:none} } .ticket-one{margin:1.25rem 0;padding-bottom:1rem;border-bottom:1px solid rgba(0,0,0,.08)} .ticket-one:last-of-type{border-bottom:0} .ticket-seat{font-weight:600;font-size:.9rem;color:#5E0009;letter-spacing:.03em} @media print{ .ticket-one{page-break-inside:avoid} } /* ── The ticket ──────────────────────────────────────────────────────────── A guest prints this or shows it on a phone, so it has to survive both. ⛔ EVERY SPONSOR MARK HERE IS DARK INK ON TRANSPARENT — measured, not assumed (lockup rgb(120,45,52), Bud Light rgb(4,49,106), Endzone rgb(11,19,73)). They MUST sit on a light background. The first cut put Bud Light on a navy footer and it came out invisible — a logo that renders is not a logo that reads, and this is the second time that lesson has been paid for here. ⛔ Maroon #5E0009 is a LICENCE CONDITION, so it leads as the matchup band and the seat pill rather than as a backdrop that swallows the artwork. */ .tk-wrap{max-width:23rem;margin:0 auto} .tk{background:#fff;border-radius:.85rem;overflow:hidden;margin:0 0 1.5rem; box-shadow:0 6px 20px rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.08)} .tk-top{background:#fffdfa;padding:.8rem 1rem;display:flex;align-items:center; justify-content:space-between;gap:.6rem;border-bottom:1px solid rgba(0,0,0,.06)} .tk-lockup{height:52px;width:auto;display:block} .tk-seat{color:#fff;background:#5E0009;font-size:.74rem;font-weight:700;letter-spacing:.06em; border-radius:1rem;padding:.22rem .7rem;white-space:nowrap} .tk-band{background:#5E0009;color:#fff;text-align:center;padding:.5rem 1rem; font-size:1.05rem;font-weight:700;letter-spacing:.02em} .tk-body{padding:1rem 1rem .9rem;text-align:center} .tk-name{font-size:1.35rem;font-weight:700;line-height:1.2} .tk-when{font-size:.88rem;opacity:.78;margin-top:.25rem} .tk-where{font-size:.82rem;opacity:.6} /* Directions on the pass itself — this is the screen a guest has open in the car. Item 128. */ .tk-map{margin-top:.35rem;font-size:.82rem} .tk-map a{color:inherit;opacity:.75;text-decoration:underline} .tk-qr{margin:.9rem auto .35rem;max-width:230px} .tk-qr svg{width:100%;height:auto;display:block} /* ⛔ "Admits one" was 11.8px at opacity .55 — 3.10:1 on white, failing AA. It is also the line that stops a door waving a whole party through on ONE code, which makes it the worst possible place to save a few pixels of contrast. */ .tk-admits{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8} .tk-in{margin-top:.5rem;font-size:.8rem;font-weight:600;color:#1f6b3a} .tk-foot{background:#f4f1ec;padding:.7rem 1rem .6rem;display:flex;align-items:center; justify-content:center;gap:.7rem;flex-wrap:wrap;border-top:1px solid rgba(0,0,0,.06)} .tk-bud{height:26px;width:auto} .tk-endzone{height:13px;width:auto} .tk-presents{color:rgba(0,0,0,.55);font-size:.64rem;letter-spacing:.04em; flex-basis:100%;text-align:center;margin-top:.15rem} .tk-note{font-size:.8rem;text-align:center} @media print{ .nav,.who,.foot,.noprint,.terra-launch,.terra-panel{display:none !important} .tk{page-break-inside:avoid;box-shadow:none;border:1px solid #ccc} .tk-wrap{max-width:none} } .tk-holder{margin-top:.55rem;font-size:.85rem;background:rgba(94,0,9,.06);border-radius:.4rem; padding:.35rem .55rem} .tk-holder span{display:block;font-size:.75rem;opacity:.65} .tk-hist{margin-top:.5rem;font-size:.76rem;opacity:.7;text-align:left} .tk-hist span{opacity:.7} .tk-transfer{margin-top:.85rem;width:100%;background:#fff;color:#5E0009; border:2px solid #5E0009;font-weight:600;padding:.6rem 1rem;border-radius:.5rem; cursor:pointer;font-size:.95rem} .tk-transfer:hover{background:#5E0009;color:#fff} .tk-transfer:focus-visible{outline:3px solid var(--focus);outline-offset:2px} #tfDlg{border:0;border-radius:.7rem;padding:1.2rem;max-width:22rem;width:92vw; box-shadow:0 14px 40px rgba(0,0,0,.3)} #tfDlg::backdrop{background:rgba(0,0,0,.35)} #tfDlg label{font-size:.82rem;font-weight:600;display:block;margin-bottom:.25rem} .tf-err{color:#8a1f1f;font-size:.84rem;margin:.5rem 0 0;min-height:1rem} .bn-panel{max-width:23rem;margin:0 auto 1.5rem} .bn-qr{width:110px} .bn-qr svg{width:100%;height:auto;display:block} #bnDlg{border:0;border-radius:.7rem;padding:1.2rem;max-width:22rem;width:92vw; box-shadow:0 14px 40px rgba(0,0,0,.3)} #bnDlg::backdrop{background:rgba(0,0,0,.35)} #bnDlg label{font-size:.82rem;font-weight:600;display:block;margin-bottom:.25rem} @media print{ .bn-panel .actions,#bnDlg{display:none} } .lib-ext{font-size:.7rem;opacity:.6;font-weight:400;letter-spacing:.03em} #libLinkDlg{border:0;border-radius:.7rem;padding:1.2rem;max-width:24rem;width:92vw; box-shadow:0 14px 40px rgba(0,0,0,.3)} #libLinkDlg::backdrop{background:rgba(0,0,0,.35)} #libLinkDlg label{font-size:.82rem;font-weight:600;display:block;margin-bottom:.25rem} /* ── Messages ────────────────────────────────────────────────────────────── Same visual language as Terra's window (Jeremy: "the chat will look the same basically") — but people talking to people. */ .ch-wrap{display:grid;grid-template-columns:16rem 1fr;gap:1rem;align-items:start} .ch-list{background:#fff;border-radius:.7rem;overflow:hidden;max-height:32rem;overflow-y:auto; border:1px solid rgba(0,0,0,.07)} .ch-item{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:.65rem .8rem;border-bottom:1px solid rgba(0,0,0,.06);font:inherit} .ch-item:hover{background:rgba(94,0,9,.04)} .ch-item.is-on{background:rgba(94,0,9,.09)} .ch-item-name{font-weight:600;font-size:.92rem;display:flex;justify-content:space-between;gap:.4rem} .ch-item-prev{font-size:.78rem;opacity:.6;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .ch-badge{background:#5E0009;color:#fff;border-radius:1rem;font-size:.68rem;padding:.05rem .42rem; font-weight:700;flex:0 0 auto} .ch-main{background:#fff;border-radius:.7rem;overflow:hidden;display:flex;flex-direction:column; height:32rem;border:1px solid rgba(0,0,0,.07)} .ch-empty{margin:auto;opacity:.55;font-size:.92rem} .ch-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem; padding:.7rem .9rem;background:#5E0009;color:#fff;flex:0 0 auto} .ch-head .ch-sub{display:block;font-size:.72rem;opacity:.8} .ch-head .lnk{color:#fff;opacity:.85} .ch-log{flex:1 1 auto;overflow-y:auto;padding:.8rem;background:#faf9f9} .ch-msg{position:relative;padding:.5rem .7rem;border-radius:.75rem;margin-bottom:.5rem; line-height:1.45;font-size:.92rem;max-width:76%;white-space:pre-wrap;word-break:break-word} .ch-msg .who{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase; opacity:.6;margin-bottom:.15rem} .ch-msg.mine{background:rgba(94,0,9,.09);margin-left:auto;border-bottom-right-radius:.2rem} .ch-msg.theirs{background:#fff;border:1px solid rgba(0,0,0,.07);border-bottom-left-radius:.2rem} .ch-msg.gone{opacity:.45;font-style:italic} .ch-del{position:absolute;top:.2rem;right:.3rem;background:none;border:0;cursor:pointer; font-size:1rem;line-height:1;opacity:0;color:#8a1f1f} .ch-msg:hover .ch-del{opacity:.7} .ch-send{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid rgba(0,0,0,.08);flex:0 0 auto} .ch-send input{flex:1;min-width:0;padding:.5rem .7rem;border:1px solid rgba(0,0,0,.18); border-radius:1.2rem;font:inherit;font-size:.92rem} #chDirectDlg,#chGroupDlg{border:0;border-radius:.7rem;padding:1.2rem;max-width:24rem;width:92vw; box-shadow:0 14px 40px rgba(0,0,0,.3)} #chDirectDlg::backdrop,#chGroupDlg::backdrop{background:rgba(0,0,0,.35)} #chDirectDlg label,#chGroupDlg label{font-size:.82rem;font-weight:600;display:block;margin-bottom:.25rem} @media (max-width:44rem){ .ch-wrap{grid-template-columns:1fr} .ch-main{height:26rem} /* ⚠️ .ch-list kept max-height:32rem through this query — only .ch-main was shrunk — so on a phone a 512px thread list stacked ABOVE the messages and pushed the conversation off screen. The list is a chooser; the conversation is the point. */ .ch-list{max-height:14rem} } /* Library thumbnails. ⛔ A checkerboard behind them on purpose — most of these marks have transparent backgrounds, and on plain white a white logo is indistinguishable from a missing one. That exact confusion has already cost time on this project twice. */ .lib-thumb{width:58px;height:58px;padding:3px;border:1px solid rgba(0,0,0,.12);border-radius:.4rem; cursor:pointer;display:block; background-color:#fff; background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%), linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%); background-size:12px 12px;background-position:0 0,6px 6px} .lib-thumb:hover{border-color:#5E0009} .lib-thumb img{width:100%;height:100%;object-fit:contain;display:block} .lib-noimg{display:flex;align-items:center;justify-content:center;width:58px;height:58px; border:1px dashed rgba(0,0,0,.18);border-radius:.4rem;font-size:.7rem;font-weight:700; opacity:.5;letter-spacing:.03em} .lib-prev{border:0;border-radius:.7rem;padding:0;max-width:min(90vw,44rem); box-shadow:0 18px 50px rgba(0,0,0,.35)} .lib-prev::backdrop{background:rgba(0,0,0,.55)} .lib-prev-head{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:.7rem 1rem;background:#5E0009;color:#fff} .lib-prev-x{background:none;border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer; padding:0 .2rem} .lib-prev-body{padding:1.2rem;min-height:14rem;display:flex;align-items:center;justify-content:center; background-color:#fff; background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%), linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%); background-size:20px 20px;background-position:0 0,10px 10px} .lib-prev-body img{max-width:100%;max-height:64vh;display:block} /* ── Section jump bar ────────────────────────────────────────────────────── Sticks under the header so it is reachable from anywhere down a long page. ⛔ scroll-margin-top on the targets is not optional: without it an anchor jump parks the heading UNDERNEATH the sticky bar and the section looks like it starts halfway down. */ .secnav{position:sticky;top:0;z-index:20;display:flex;gap:.35rem;flex-wrap:wrap; padding:.55rem 0 .6rem;margin:0 0 .9rem;background:var(--bg,#f7f5f5); border-bottom:1px solid rgba(0,0,0,.08)} .secnav a{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none; font-size:.85rem;font-weight:600;color:#5E0009;background:#fff; border:1px solid rgba(94,0,9,.22);border-radius:1.2rem;padding:.28rem .75rem; white-space:nowrap} .secnav a:hover{background:rgba(94,0,9,.07)} .secnav a.is-here{background:#5E0009;color:#fff;border-color:#5E0009} .secnav-n{font-size:.72rem;opacity:.65;font-weight:700} .secnav a.is-here .secnav-n{opacity:.85} [id].panel,[id].sport-block,section[id]{scroll-margin-top:4.2rem} @media print{ .secnav{display:none} } /* ── Charts ──────────────────────────────────────────────────────────────── ⛔ Text wears TEXT tokens, never the series colour — a maroon bar carries the identity, the numbers beside it stay in ordinary ink. Grid and axis stay recessive so they never out-weigh the data they support. */ /* ⛔ minmax(26rem,1fr) SETS A HARD FLOOR OF 416px — measured on the live page, it was one of two things forcing horizontal scroll at 390px. min() lets the track shrink below its preferred size on a phone instead of pushing the page sideways. */ .bcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr)); gap:1rem;margin:0 0 1rem} .bcard-wide{margin:0 0 1.2rem} .bcard{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:.7rem;padding:1rem 1.1rem} .bcard h2{margin:0;font-size:1rem} .bcard-sub{margin:.15rem 0 .7rem;font-size:.82rem;opacity:.62} .bcard-note{margin:.6rem 0 0;font-size:.74rem;opacity:.6;line-height:1.4} .bchart{display:block;overflow:visible} .bchart .bc-label{font:600 12px/1 -apple-system,Segoe UI,Roboto,Arial,sans-serif;fill:#1d1d1f} .bchart .bc-sub{font:400 11px/1 -apple-system,Segoe UI,Roboto,Arial,sans-serif;fill:#8f8a8a} .bchart .bc-val{font:600 12px/1 -apple-system,Segoe UI,Roboto,Arial,sans-serif;fill:#3a3a3c} .bchart .bc-over{font:600 11px/1 -apple-system,Segoe UI,Roboto,Arial,sans-serif;fill:#5E0009} .bchart .bc-peak{font:700 11px/1 -apple-system,Segoe UI,Roboto,Arial,sans-serif;fill:#5E0009} .bchart .bc-axis{stroke:rgba(0,0,0,.14);stroke-width:1} @media print{ .bcards{grid-template-columns:1fr 1fr} .bcard{break-inside:avoid} } /* ── Small screens ───────────────────────────────────────────────────────── ⛔⛔ THE MEASUREMENT THAT DROVE THIS: at a simulated 390px the Engagement page overflowed by 217px and the offender was table.roster at 562px. A wide table does not shrink — it pushes the whole PAGE sideways, and then every other element on it is off-screen too. This app is used on a phone at a stadium. ⭐ The table scrolls INSIDE ITS OWN BOX rather than the page scrolling. */ /* ⚠️ SCOPED TO 40rem, NOT 48rem. At 641-768px the roster already fits; display:block drops width:100% so the table shrink-wrapped and gained a scrollbar on a tablet with room to spare. A fix that fires where there was no problem creates one. */ @media (max-width: 40rem) { .roster{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch; /* a hint that there is more to the right, rather than a silent cut */ background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)), linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0, radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.14),transparent), radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.14),transparent) 100% 0; background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%; background-attachment:local,local,scroll,scroll} .roster th,.roster td{white-space:nowrap} /* ⛔⛔ REGRESSION I INTRODUCED WITH THE LINE ABOVE, caught in review the same hour. nowrap INHERITS into child elements, and .gsub carries free text — a library description is maxlength 500, so one long one became a single unbreakable ~3000px line and the Branding table scrolled sideways almost without end. The nowrap is meant to stop CELLS wrapping into a tower; it was never meant to reach prose. */ .roster .gsub{white-space:normal} /* ⛔ ~28px tap targets on an app used ONE-HANDED AT A STADIUM. .lnk is every action in every table — Edit, Remove access, Ticket, Make private, Preview, Download. 44px is the iOS/WCAG 2.5.5 minimum and this was well under it. */ .lnk{min-height:44px;padding:.55rem .5rem;display:inline-flex;align-items:center} /* In-table dropdowns render at the UA default ~13.3px beside 15px cells; font:inherit elsewhere is scoped to dialogs only. */ .roster select{font:inherit;font-size:.85rem} /* The header nav is seven items; let it scroll sideways rather than wrap into three ragged lines that push the content down the screen. */ /* ⛔⛔ THIS RULE WAS INERT UNTIL flex-wrap WAS ADDED. .nav is display:flex with flex-wrap:wrap set at the top of this file, and white-space cannot override that — the seven links kept wrapping to three rows and the topbar took 281px, 42% of a 390px screen. ⚠️ AND NO OVERFLOW MEASUREMENT CAN CATCH IT: a nav that WRAPS overflows by zero, so the page measured clean while the bug was fully present. Two independent reviewers found this; the measurement found nothing. */ /* ⛔ SCROLLING THE NAV WAS THE WRONG FIX. It truncated the list mid-word with no hint that more existed — it read as a broken header rather than a scrollable one. Seven items need a menu, not a treadmill. */ .navtoggle{display:flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer; margin-left:auto;order:3} .navtoggle span{display:block;height:2px;background:#f3e6e7;border-radius:2px} .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .navtoggle span{transition:transform .16s ease,opacity .16s ease} .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:1; flex-direction:column;gap:0;background:#4a0007;padding:.35rem 0; box-shadow:0 10px 26px rgba(0,0,0,.35)} .nav.is-open{display:flex} .nav a{display:flex;align-items:center;min-height:48px;padding:.2rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08)} .nav a:last-child{border-bottom:0} /* ⛔⛔ ITEM 194 — EVERY PAGE OVERFLOWED BY 48px AT 390px, AND THE GATE IS USED ON A PHONE. Measured 2026-09-09 while shooting the help guide: document.scrollWidth 438 against a 390 viewport on /t.php, /scan.php, /, /schedule.php and /event.php — the whole site. ⭐ THE MECHANISM: .topbar is flex-wrap:nowrap here with gap 1.5rem and 1.5rem side padding, and NONE of its children could shrink. A flex item's default min-width is `auto`, which means "never smaller than my content" — so a long organisation name and "Dana Whitfield · Admin · Sign out" simply pushed the hamburger 48px off-screen. ⚠️ AND THE COMMENT DIRECTLY ABOVE THIS ONE ALREADY WARNED WHY IT WAS MISSED: "a nav that WRAPS overflows by zero, so the page measured clean while the bug was fully present." This is the mirror of that. When flex-wrap:nowrap was introduced to fix the wrapping nav, the overflow became REAL and measurable — and nobody re-measured after the fix. ⛔ min-width:0 IS THE FIX, NOT A SMALLER FONT. Shrinking type to make things fit hides the constraint instead of resolving it, and the next longer name brings it straight back. */ .topbar{position:relative;flex-wrap:nowrap;gap:.6rem;padding-left:1rem;padding-right:1rem} .topbar .brand{min-width:0;flex:0 1 auto} .brandname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .who{margin-left:0;min-width:0;gap:.45rem;flex:0 1 auto} /* The person's name yields first — it is the one thing on this bar the reader already knows. */ .who .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* ⛔ Sign out and the hamburger NEVER shrink: one is the way out and the other is the way to everything else. A header that fits by hiding its own exits is not fixed. */ .who .out{flex:none;white-space:nowrap} .navtoggle{flex:none} .secnav a{min-height:44px} .nav::-webkit-scrollbar{display:none} /* ⚠️ The fixed Terra launcher sits over the bottom-right of the page. On a phone that is exactly where the last row of a table ends up, so the page gets room to clear it. */ .wrap{padding-bottom:5rem} /* Charts: a 980-wide viewBox on a 350px screen renders 11px labels at 4px. Let the wide season chart scroll inside its card at its real size instead of dissolving. */ /* ⚠️ 620px against a 980 viewBox is still scale 0.63 — the season chart's date labels landed at 7px. At natural size they are legible and the card already scrolls. */ .bcard-wide .bchart{min-width:980px} .bcard-wide{overflow-x:auto} /* The two half-width charts were scaling a 460 viewBox into a 313px box: 0.68, so 12px labels rendered at 8.2px. A partner reads these. Same treatment. */ .bcards .bcard{overflow-x:auto} .bcards .bchart{min-width:520px} /* The sticky jump bar is ~127px tall once it wraps, but the anchor offset was 67px, so a jump left the heading behind the bar. */ [id].panel,[id].sport-block,section[id]{scroll-margin-top:9rem} /* The footer sits AFTER .wrap, so its padding did not clear the fixed launcher. */ .foot{padding-bottom:4.5rem} .panelhead{flex-wrap:wrap;gap:.5rem} h1{font-size:1.4rem} } /* ⚠️ The SVG height attribute capped the scale at 1, so on a tablet the half-width charts sat at natural size inside 115px of dead gutter each side. Let the aspect ratio drive it. */ .bchart{height:auto} /* The gate's "next" control — the most-pressed thing on the page once a queue forms. */ .gate-next{display:block;width:100%;text-align:center;font-size:1.05rem;padding:.8rem 1rem; text-decoration:none} /* Call / Text actions. ⚠️ Kept off the printed will-call sheet — a link is not a link on paper. */ .contact-acts{display:inline-flex;gap:.15rem;margin-left:.15rem;vertical-align:middle} .contact-acts .lnk{font-size:.8rem;padding:.15rem .35rem} /* ⭐ ITEM 130 — the icon buttons carry their own size; do not let the old text padding squash them back into a 16px target. */ .contact-acts .ico-btn{padding:0} .numline{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap} @media (max-width:40rem){ .contact-acts .lnk{min-height:44px;padding:.5rem .45rem} .contact-acts .ico-btn{min-height:44px;min-width:44px} } @media print{ .contact-acts{display:none} } /* ── SMS consent, on the add/edit dialogs ───────────────────────────────── ⛔ The disclosure is LEGIBLE, not fine print. A staff member reads it aloud to a guest, so 11px grey would defeat the whole purpose — and a carrier reviewer sees this exact block as the opt-in evidence in our registration. */ .consent{margin:.9rem 0 .2rem;padding:.75rem .85rem;border:1px solid rgba(94,0,9,.25); border-left:3px solid #5E0009;border-radius:.45rem;background:rgba(94,0,9,.035)} .consent-tick{display:flex;gap:.55rem;align-items:flex-start;font-weight:600;cursor:pointer; font-size:.92rem;line-height:1.35} .consent-tick input{margin:.15rem 0 0;flex:0 0 auto;width:1rem;height:1rem;cursor:pointer} .consent-text{margin:.55rem 0 0;font-size:.8rem;line-height:1.5;color:#423b3b} .consent-note{margin:.4rem 0 0;font-size:.78rem;color:#6e6e73;font-style:italic} @media (max-width:40rem){ .consent-text{font-size:.78rem} } /* Engagement org filter */ .orgfilter{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-size:.9rem} .orgfilter label{color:#6e6e73} .orgfilter select{padding:.4rem .5rem;border:1px solid rgba(0,0,0,.2);border-radius:.4rem;font:inherit} /* ── VIP wordmark on the pass ───────────────────────────────────────────── ⛔ On the WHITE band between the lockup and the maroon matchup bar. The mark is dark maroon ink, so it needs a light ground — the same rule that made Bud Light invisible on navy. Never move it onto the maroon band. */ /* ⭐ VIP is CENTRED IN the lockup row, not stacked under it. Absolute-centred so the seat pill on the right cannot shove it off-centre — a flex `justify-content` would centre it between its siblings, which is a different (and visibly wrong) position. */ .tk-top{position:relative} .tk-top .tk-vip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:26%;max-width:112px;height:auto} @media print{ .tk-top .tk-vip{width:24%} } /* ── Organisations screen ───────────────────────────────────────────────── ⛔ The bulk row is the PRIMARY control: an allotment is almost always "N per game", and the per-game grid (30 games x every org) is the exception, so it lives behind a disclosure. */ .subhead{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73; margin:1.3rem 0 .5rem;font-weight:700} .sportrow{display:flex;align-items:flex-end;gap:.9rem;flex-wrap:wrap;padding:.6rem 0; border-bottom:1px solid rgba(0,0,0,.07)} .sportrow .sportname{flex:1 1 12rem;font-weight:600} .sportrow .sportname .muted{display:block;font-weight:400;font-size:.8rem} .sportrow label{display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;color:#6e6e73} .sportrow input{padding:.35rem .45rem;border:1px solid rgba(0,0,0,.2);border-radius:.35rem;font:inherit} .pergame{margin:.4rem 0 1rem} .pergame summary{cursor:pointer;font-size:.85rem;color:#5E0009;padding:.35rem 0} .pergame table{margin-top:.4rem} @media (max-width:40rem){ .sportrow{gap:.6rem} .sportrow .sportname{flex-basis:100%} } /* ── Organisation finder ────────────────────────────────────────────────── ⭐ A search over the real rows, not a , which also sized itself from its content and overflowed a phone on this exact screen. */ .scanstage{position:relative;background:#181515;border-radius:.7rem;overflow:hidden; aspect-ratio:4/3;display:none;max-width:100%} .scanstage.is-on{display:block} .scanwrap .btn{min-height:44px} .scanstage video{width:100%;height:100%;object-fit:cover;display:block} /* a target, so the person knows where to point rather than guessing */ .scanframe{position:absolute;inset:18% 22%;border:3px solid rgba(255,255,255,.85); border-radius:.5rem;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)} .scanhint{text-align:center;color:#6e6e73;font-size:.9rem;margin:.7rem 0} .gatefind{margin:1rem 0 .2rem} /* 268 · Find by name — every control ≥44px, like the rest of the gate (192c) */ .gatefind-pill{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.55rem 1.1rem;border-radius:999px; border:1.5px solid #5E0009;background:#fff;color:#5E0009;font:inherit;font-weight:700;cursor:pointer} .gatefind-pill[aria-expanded="true"]{background:#5E0009;color:#fff} .gatefind-panel{margin-top:.6rem} .gatefind-panel input{width:100%;min-height:48px;padding:.6rem .8rem;font:inherit;font-size:1.05rem;border:1px solid rgba(0,0,0,.25); border-radius:.55rem;box-sizing:border-box} .gatefind-hint{font-size:.8rem;color:#6e6e73;margin:.35rem 0 .5rem} .gatefind-list{list-style:none;margin:0;padding:0} .gatefind-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .8rem;background:#fff; border-radius:.55rem;padding:.65rem .8rem;margin:0 0 .45rem;box-shadow:0 1px 2px rgba(19,16,16,.06)} .gatefind-who{display:flex;flex-direction:column;min-width:0;flex:1 1 12rem} .gatefind-who strong{font-size:1.08rem;color:#181515} .gatefind-who span{font-size:.82rem;color:#6e6e73} .gatefind-who .gatefind-count{color:#181515;font-weight:600} .gatefind-acts{display:flex;gap:.45rem;flex-wrap:wrap} .gatefind-admit{min-height:44px;padding:.5rem 1rem} .gatefind-full{font-weight:700;color:#2e7d32;min-height:44px;display:inline-flex;align-items:center} .gatefind-empty{font-size:.9rem;color:#6e6e73;padding:.4rem 0} .scanmanual{margin:1rem 0} /* ⛔ 244 — 192c's rule reached the door picker and the undo button and MISSED these two. Gloved or cold hands at a dark gate: every control, unconditionally. ⛔⛔ REACH 44px WITH PADDING, NEVER `display:flex`. A is `display:list-item`, and ANY other display value silently removes the disclosure triangle — so the control stops looking like it opens. Caught by screenshotting the fix and comparing it with the shot taken before it: the numbers were right (44px) and the affordance was gone. */ .scanmanual summary{cursor:pointer;color:#5E0009;font-size:.9rem;padding:.75rem 0;min-height:44px} .scanmanual input{width:100%;padding:.6rem;margin:.5rem 0;font:inherit;min-height:44px; border:1px solid rgba(0,0,0,.2);border-radius:.45rem} .scanlog{list-style:none;margin:.4rem 0 2rem;padding:0} .scanrow{background:#fff;border-radius:.5rem;padding:.7rem .8rem;margin:0 0 .45rem; border-left:5px solid #ccc;box-shadow:0 1px 2px rgba(19,16,16,.05)} .scanrow strong{display:block;font-size:1.05rem;color:#181515} .scanrow span{font-size:.85rem;color:#6e6e73} .scanrow.good{border-left-color:#2e7d32} .scanrow.warn{border-left-color:#b26a00} .scanrow.bad {border-left-color:#b3261e} /* ═══ ITEM 130 · DENSITY ═══════════════════════════════════════════════════════════════════ Jeremy, 2026-09-03: "things are crowded again in the UI … maybe the call text and edit words are icons in those screens, also instead of displaying it all in the grid some basic info is in the grid and you click the name to expand a people modal." Measured before: People row 9 controls / 91-114px tall; game roster row 8 controls with the action strip taking 405px of 1080 — 37.5% of the page. */ /* An icon control: a real hit target, not a 16px glyph you have to aim at. ⛔ 2.1rem is above the ~44px-at-default-zoom finger target these screens are used with at a gate. */ .ico-btn{display:inline-flex;align-items:center;justify-content:center; width:2.1rem;height:2.1rem;padding:0;border-radius:6px;vertical-align:middle} .ico-btn .ico{display:block} .ico-btn:hover{background:#f3f2f2} /* ⚠️ The icons are the ONLY label these controls have, so the focus ring must stay obvious. Focus rings are purple here DELIBERATELY (the site is maroon) — do not "fix" the colour. */ .ico-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* The name is a button that opens the person dialog. It must still READ as the name — the affordance is the hover, not a permanent link colour shouting on every row. */ button.gname{background:none;border:0;padding:.1rem .25rem;margin-left:-.25rem; font:inherit;font-weight:600;color:var(--ink);cursor:pointer;border-radius:5px;text-align:left} button.gname:hover{background:#f3f2f2;text-decoration:underline} button.gname:focus-visible{outline:2px solid var(--focus);outline-offset:1px} /* ⭐ ITEM 133 — an override is visible ON THE ROW. `+gate` is granted, `−gate` is taken away; the direction matters because bears_user_perms works in both directions. */ .pill.perm{margin-left:.3rem;font-variant-numeric:tabular-nums} .pill.perm.on{background:#eef6f0;border-color:#bfe0cb;color:#1f7a3d} .pill.perm.off{background:#fdf0f1;border-color:#f0c9cd;color:var(--danger)} .urole{font-size:.87rem} /* Give the columns that wrapped enough room to stop wrapping. */ .roster .umail{font-size:.87rem;word-break:break-word} .roster .umob{white-space:nowrap} /* The person dialog. ⚠️ Wider than the base dialog because it holds two selects side by side; the base max-width of 32rem put Type and Role on top of each other. */ #personDlg{max-width:34rem} #personDlg .pbody{padding:0} #personDlg h2{margin-bottom:.15rem} .pacts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .pacts .btn{flex:0 0 auto} @media (max-width:34rem){ .pacts{flex-direction:column} .pacts .btn{width:100%} } /* ⭐ ITEM 130 · THE ROSTER ROW MENU. ⛔⛔ THE EXPLICIT [hidden] RULE IS LOAD-BEARING, NOT BELT-AND-BRACES. On 2026-08-26 `hidden` was set on all 35 away rows of the schedule and every one STAYED ON SCREEN, because `.occ{display:grid}` beat the user-agent's `[hidden]{display:none}`. The attribute was set; the pixels never changed, and it was reported as working. Never trust the UA default on an element this file also gives a display to. */ .rowmenu{position:absolute;right:0;top:calc(100% - .2rem);z-index:20; background:var(--card);border:1px solid var(--line);border-radius:8px; box-shadow:0 8px 24px rgba(28,24,24,.16);padding:.3rem;min-width:11rem;text-align:left} .rowmenu[hidden]{display:none} .rowmenu .lnk{display:block;width:100%;text-align:left;padding:.4rem .55rem} /* ⛔ The cell must be a positioning context or the menu anchors to the page and lands somewhere else entirely on a scrolled table. */ .roster td.actions{position:relative} .js-more{font-size:1rem;line-height:1;letter-spacing:.06em} /* ⭐ ITEM 131 · THE DISTRIBUTION DIALOG */ /* The allotment headline is a button when it can be acted on. It must still READ as the number — the affordance is the hover and the "Distribute to staff" line beneath it. */ .ghcount .n.as-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer} .ghcount .n.as-link:hover{text-decoration:underline} .ghcount .n.as-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px} #allotDlg{max-width:32rem} .alsum{display:flex;gap:1.2rem;flex-wrap:wrap;padding:.6rem .7rem;margin:.2rem 0 .8rem; background:#f8f7f7;border:1px solid var(--line);border-radius:8px;font-size:.9rem} .alsum strong{font-size:1.05rem} /* ⛔ NEGATIVE IS A REAL STATE, NOT AN ERROR — an org may distribute more than it holds, exactly as it may invite more guests than its allotment. It is coloured because it is worth noticing, never because it is forbidden. */ .alsum .over{color:var(--danger);font-weight:600} .alrows{display:flex;flex-direction:column;gap:.1rem;max-height:22rem;overflow-y:auto} .alrow{display:flex;align-items:center;gap:.8rem;padding:.45rem .1rem; border-bottom:1px solid var(--line)} .alrow:last-child{border-bottom:0} .alwho{flex:1 1 auto;font-weight:600;min-width:0} .alwho .gsub{font-weight:400} .alwho .gsub.over{color:var(--danger)} .alnum{width:5rem;flex:0 0 auto;text-align:right} /* ⭐ the organisation chooser — the first step when the page is not already filtered */ .alorg{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%; padding:.7rem .6rem;background:none;border:0;border-bottom:1px solid var(--line); font:inherit;text-align:left;cursor:pointer;border-radius:6px} .alorg:last-child{border-bottom:0} .alorg:hover{background:#f3f2f2} .alorg:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .alorg .alwho{display:block;font-weight:600} /* ⚠️ .gsub is a inside a here, so it does NOT inherit the block display it gets in a table cell — without this the row reads "Meridian Title Company50 held" with no break. */ .alorg .gsub{display:block;font-weight:400} .alpick{color:var(--maroon);font-size:.87rem;white-space:nowrap} /* ⭐ ITEM 140 · the distribution switch, the spread button and the shortfall warning */ /* ⚠️ GRID, NOT FLEX. As a flex row with space-between, inside a 512px dialog, the label's inner span collapsed to 61px — "Cap each person at their number" wrapped ONE WORD PER LINE and stood 237px tall — and the Spread button rendered ON TOP of the hint. Two cells on row one, the hint spanning both on row two: nothing negotiates for space. */ .alswitch{display:grid;grid-template-columns:1fr auto;align-items:center; column-gap:.75rem;row-gap:.3rem; padding:.6rem .7rem;margin:0 0 .6rem;background:#f8f7f7;border:1px solid var(--line); border-radius:8px} .alflag{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;min-width:0} .alflag input{flex:0 0 auto;width:1rem;height:1rem;margin:0} .alflag strong{min-width:0} /* ⛔ SPANS BOTH COLUMNS. As a third flex child it was squeezed into the leftover width and collided with the button. */ .alhint{grid-column:1 / -1;margin:0} @media (max-width:26rem){ .alswitch{grid-template-columns:1fr} #alSpread{width:100%} } /* ⛔ A WARNING, NOT AN ERROR — an under-allocation is a state to notice, never a refusal. */ .alwarn{margin:0 0 .7rem;padding:.5rem .7rem;border-radius:8px;font-size:.87rem; background:#fff8e6;border:1px solid #f0dfae;color:#6b5313} .alovr{display:inline-block;margin-top:.15rem;font-size:.78rem;padding:.1rem .4rem} .alovr.on{color:#1f7a3d;font-weight:600;background:#eef6f0} /* ⭐ ITEM 132 · the schedule's own-event control and dialog */ .pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap} .pagehead h1{margin-bottom:.2rem} .pagehead .btn{flex:0 0 auto;margin-top:.35rem} /* ⚠️ Same grid lesson as the cap switch: a checkbox beside a two-line label is a flex row that loses, so the label gets its own column and is allowed to wrap normally. */ .evflag{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:start; padding:.6rem .7rem;margin:.6rem 0 0;background:#f8f7f7;border:1px solid var(--line); border-radius:8px} .evflag input{margin:.2rem 0 0} .evflag .hint{display:block;margin:.15rem 0 0} /* ⭐ ITEM 137 · a partner-owned occasion wears its own marks (Q25: never Missouri State's) */ /* ⛔ A partner mark is an arbitrary upload, not one of our four measured lockups, so it is CONSTRAINED rather than trusted — a 4000px logo would otherwise blow the card apart. */ .tk-lockup{max-height:34px;width:auto;object-fit:contain} /* When there is no mark, the organisation's NAME carries the identity. */ .tk-lockup-text{font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:.01em} .tk-foot-strip{padding:0;background:none;border:0} /* ⛔⛔ `object-fit: cover` GUILLOTINED THE PARTNER'S LOGO. Measured 2026-09-10 on Wil Fischer's Bud Light strip: the asset is 384x215 (aspect 1.79 — a MARK), the box is 350x74 (aspect 4.73). `cover` scales to FILL, so it rendered the image at 350x196 and cropped the middle 74px, taking the top and bottom off the wordmark. Jeremy spotted it on his own phone: "look at the budlight logo on the screen." ⭐ `cover` is for a photographic banner. A BRAND MARK must never be cropped — a partner's logo is a licence condition, not decoration. `contain` fits the whole mark inside the box and letterboxes, which is correct for both a mark AND a true wide strip (that fills exactly). ⚠️ Found by LOOKING. The markup was byte-identical to what shipped before, the CSS was present and "working", and no assertion on text could ever see it. */ .tk-strip{display:block;width:100%;max-height:74px;object-fit:contain; padding:.45rem 1rem;box-sizing:border-box;background:#f4f1ec} /* ⭐ 252e — a BAND-shaped image (4:1 or wider) is already a finished strip, so it fills the foot edge to edge at its own height; padding and the 74px cap are for a MARK sitting inside a strip. */ .tk-strip.is-fill{padding:0;max-height:none;height:auto;object-fit:fill} /* ⚠️ .gsettings makes every input full width — right for a textarea, absurd for a colour swatch, which rendered as a 700px bar. */ /* ⛔ THE SWATCH IS THE ONLY CLICK TARGET. It used to sit inside a