/* F.A.I.T.H. Team Chat */
/*
 * ⭐⭐⭐ THE THEME (v1.26.0). Matt: *"Can we offer a dark mode?"*
 *
 * ⚠️⚠️ EVERY COLOUR IN THIS STYLESHEET IS A TOKEN, AND THE BUILD ASSERTS IT. There is
 *    no hex below this block at all, so a colour cannot fail to flip by being
 *    forgotten — which is the only way dark mode ever actually breaks.
 * ⚠️⚠️ THE DARK VALUES ARE DERIVED, NOT TASTE. For anything drawn on a card the dark
 *    value keeps the hue and solves the lightness until its CONTRAST AGAINST THE DARK
 *    CARD matches what it had against the white one. Hairlines get 1.55x on top,
 *    because the eye separates light-on-light far better than dark-on-dark and a
 *    faithfully-preserved 1.03 hairline is an invisible one. Ink is floored at 3.5:1
 *    and capped at 14:1 — the floor because two of these are already under AA on white
 *    and copying that would preserve a defect, the cap because matching 16.4:1 on
 *    near-black means pure #fff, which haloes.
 * ⚠️ LIGHT MODE IS UNCHANGED. Near-identical literals were collapsed onto one token
 *    only where CIEDE2000 put the cost under 3; the worst single merge is 2.95.
 * ⚠️ `--on-solid` IS WHITE IN BOTH THEMES. It is the text on navy, on a red badge, on
 *    the scoreboard strip — surfaces that are dark whatever the theme. Folding it in
 *    with the white CARD background is the one mistake here that turns every button
 *    into unreadable white-on-white, so they are split by property and a control checks
 *    the split holds.
 * 📌 The dark block is written TWICE — once for the phone's own setting, once for an
 *    explicit choice — because a media query cannot be factored out of a selector list.
 *    The build asserts the two bodies are byte-identical.
 */
:root{
	color-scheme:light;
	--bad-txt:#b32d20;
	--brand-txt:#05116b;
	--chrome:#1d252d;
	--link:#0a1d8f;
	--ok-txt:#1f7a4d;
	--toast:#1e2333;
	--warn-txt:#8a5a12;
	--accent:#d50a0a;
	--bad-1:#d92d20;
	--bad-2:#b32d20;
	--bad-3:#8f2419;
	--bad-bg-1:#fdf3f3;
	--bad-bg-2:#fdecea;
	--bad-bg-3:#f5c6c2;
	--bad-bg-4:#e3c3c5;
	--bad-bg-5:#e3b5b0;
	--bad-ink-1:#a4262c;
	--bad-ink-2:#8a1c13;
	--bg:#f5f6fa;
	--fill-1:#f7f8fd;
	--fill-2:#eef2ff;
	--fill-3:#eef0f8;
	--fill-4:#e2e6f3;
	--gold:#f2b705;
	--dim:#6a7080;
	--ink:#16181d;
	--ink-3:#99a1ae;
	--ink-4:#8b93a3;
	--ink-5:#7b8098;
	--ink-6:#6b7189;
	--ink-7:#5a6078;
	--ink-8:#4a5068;
	--ink-9:#444a63;
	--ink-10:#40465a;
	--ink-11:#39415c;
	--ink-12:#3a4055;
	--ink-13:#34395c;
	--ink-14:#2b3350;
	--ink-15:#1d252d;
	--ink-16:#1a1f3d;
	--line:#e3e6ee;
	--line-2:#f1f2f8;
	--line-3:#dde1ee;
	--line-4:#cdd8ff;
	--line-5:#ccd6f2;
	--line-6:#ccd1e0;
	--line-7:#c6cee6;
	--line-8:#c3c8d6;
	--line-9:#9fb4ff;
	--line-10:#98a0bd;
	--mine:#e7edff;
	--mine-2:#dbe4ff;
	--mine-3:#d0dbff;
	--navy-2:#0a1d8f;
	--navy:#05116b;
	--ok:#1f7a4d;
	--ok-bg-1:#f2f8f3;
	--ok-bg-2:#eaf7ee;
	--ok-bg-3:#bfe3ca;
	--ok-bg-4:#bfdcc7;
	--ok-ink:#14532d;
	--title:#c9ced9;
	--onsolid-2:#d8dde4;
	--onsolid-3:#cfd6ff;
	--onsolid-4:#cfd4e4;
	--onsolid-5:#a9b2bf;
	--onsolid-6:#9aa4b2;
	--onsolid-7:#69727e;
	--surface:#ffffff;
	--warn:#8a5a12;
	--warn-bg-1:#fdf7e6;
	--warn-bg-2:#fbf0d2;
	--warn-bg-3:#e8cf8e;
	--warn-ink:#3d3624;
	--on-solid:#ffffff;
	--shade-1:rgba(10,20,60,.10);
	--shade-2:rgba(10,20,60,.12);
	--shade-3:rgba(10,20,60,.22);
	--shade-4:rgba(10,20,60,.28);
	--shade-5:rgba(0,0,0,.3);
	--shade-6:rgba(16,24,64,.05);
	--shade-7:rgba(16,24,64,.06);
	--focus:rgba(10,29,143,.12);
	--mark-main-rgb:245,246,250;
	--mark-side-rgb:255,255,255;
	--shadow:0 1px 3px var(--shade-1);
}

/* The phone's own setting — unless the person has explicitly chosen light. */
@media (prefers-color-scheme:dark){
	html:not([data-ftc-theme="light"]){
		color-scheme:dark;
		--bad-txt:#ff9389;
		--brand-txt:#9db4ff;
		--chrome:#262d38;
		--link:#9db4ff;
		--ok-txt:#6fd79d;
		--toast:#2b323f;
		--warn-txt:#e2ad4e;
		--bad-bg-1:#3a1713;
		--bad-bg-2:#481c18;
		--bad-bg-3:#57221c;
		--bad-bg-4:#662720;
		--bad-bg-5:#742c25;
		--bad-ink-1:#f49188;
		--bad-ink-2:#ffaf9a;
		--bg:#13161c;
		--fill-1:#20252f;
		--fill-2:#242934;
		--fill-3:#272d38;
		--fill-4:#2b313d;
		--dim:#888d99;
		--ink:#ebecf2;
		--ink-3:#80868f;
		--ink-4:#808691;
		--ink-5:#818596;
		--ink-6:#878a9c;
		--ink-7:#9a9eb1;
		--ink-8:#b0b3c7;
		--ink-9:#b8bbd1;
		--ink-10:#bec3d4;
		--ink-11:#c5c9e1;
		--ink-12:#c8cbde;
		--ink-13:#d1d2f1;
		--ink-14:#dadef8;
		--ink-15:#e6edf5;
		--ink-16:#ebebff;
		--line:#4b4c51;
		--line-2:#454549;
		--line-3:#4d4f57;
		--line-4:#4c546b;
		--line-5:#4f5667;
		--line-6:#565963;
		--line-7:#565b6a;
		--line-8:#5c5f68;
		--line-9:#5b6a9b;
		--line-10:#777d90;
		--mine:#1e2846;
		--mine-2:#283458;
		--mine-3:#33406a;
		--navy-2:#2a3cb4;
		--navy:#1b2a86;
		--ok-bg-1:#14301e;
		--ok-bg-2:#1c412a;
		--ok-bg-3:#255236;
		--ok-bg-4:#2d6342;
		--ok-ink:#9fcba9;
		--surface:#1b1f27;
		--warn-bg-1:#322a14;
		--warn-bg-2:#4b3e1f;
		--warn-bg-3:#64532a;
		--warn-ink:#e3dbca;
		--shade-1:rgba(0,0,0,.5);
		--shade-2:rgba(0,0,0,.55);
		--shade-3:rgba(0,0,0,.62);
		--shade-4:rgba(0,0,0,.7);
		--shade-5:rgba(0,0,0,.75);
		--shade-6:rgba(0,0,0,.45);
		--shade-7:rgba(0,0,0,.5);
		--focus:rgba(122,150,255,.3);
		--mark-main-rgb:19,22,28;
		--mark-side-rgb:27,31,39;
	}
}

/* An explicit choice, which beats the phone either way. */
html[data-ftc-theme="dark"]{
	color-scheme:dark;
	--bad-txt:#ff9389;
	--brand-txt:#9db4ff;
	--chrome:#262d38;
	--link:#9db4ff;
	--ok-txt:#6fd79d;
	--toast:#2b323f;
	--warn-txt:#e2ad4e;
	--bad-bg-1:#3a1713;
	--bad-bg-2:#481c18;
	--bad-bg-3:#57221c;
	--bad-bg-4:#662720;
	--bad-bg-5:#742c25;
	--bad-ink-1:#f49188;
	--bad-ink-2:#ffaf9a;
	--bg:#13161c;
	--fill-1:#20252f;
	--fill-2:#242934;
	--fill-3:#272d38;
	--fill-4:#2b313d;
	--dim:#888d99;
	--ink:#ebecf2;
	--ink-3:#80868f;
	--ink-4:#808691;
	--ink-5:#818596;
	--ink-6:#878a9c;
	--ink-7:#9a9eb1;
	--ink-8:#b0b3c7;
	--ink-9:#b8bbd1;
	--ink-10:#bec3d4;
	--ink-11:#c5c9e1;
	--ink-12:#c8cbde;
	--ink-13:#d1d2f1;
	--ink-14:#dadef8;
	--ink-15:#e6edf5;
	--ink-16:#ebebff;
	--line:#4b4c51;
	--line-2:#454549;
	--line-3:#4d4f57;
	--line-4:#4c546b;
	--line-5:#4f5667;
	--line-6:#565963;
	--line-7:#565b6a;
	--line-8:#5c5f68;
	--line-9:#5b6a9b;
	--line-10:#777d90;
	--mine:#1e2846;
	--mine-2:#283458;
	--mine-3:#33406a;
	--navy-2:#2a3cb4;
	--navy:#1b2a86;
	--ok-bg-1:#14301e;
	--ok-bg-2:#1c412a;
	--ok-bg-3:#255236;
	--ok-bg-4:#2d6342;
	--ok-ink:#9fcba9;
	--surface:#1b1f27;
	--warn-bg-1:#322a14;
	--warn-bg-2:#4b3e1f;
	--warn-bg-3:#64532a;
	--warn-ink:#e3dbca;
	--shade-1:rgba(0,0,0,.5);
	--shade-2:rgba(0,0,0,.55);
	--shade-3:rgba(0,0,0,.62);
	--shade-4:rgba(0,0,0,.7);
	--shade-5:rgba(0,0,0,.75);
	--shade-6:rgba(0,0,0,.45);
	--shade-7:rgba(0,0,0,.5);
	--focus:rgba(122,150,255,.3);
	--mark-main-rgb:19,22,28;
	--mark-side-rgb:27,31,39;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body.ftc-body,body.ftc-lockbody{
	font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;
}
a{color:var(--link)}
button{font:inherit}

/* boot spinner */
.ftc-boot{display:flex;align-items:center;justify-content:center;height:100vh}
.ftc-spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--navy);border-radius:50%;animation:ftcspin .8s linear infinite}
@keyframes ftcspin{to{transform:rotate(360deg)}}

/* ---------- auth ---------- */
.ftc-auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 16px}
.ftc-card{width:100%;max-width:420px;background:var(--surface);border-radius:14px;box-shadow:0 8px 30px var(--shade-2);overflow:hidden}
.ftc-card-head{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:var(--on-solid);padding:22px 22px 18px}
.ftc-card-head h1{margin:6px 0 0;font-size:22px;font-weight:700}
.ftc-logo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--title);font-weight:700}
.ftc-sub{margin:8px 0 0;font-size:14px;color:var(--onsolid-3)}
.ftc-form{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.ftc-form-pad{padding:20px 18px;border-bottom:1px solid var(--line)}
.ftc-form h3{margin:0;font-size:16px}
.ftc-field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--ink-10)}
.ftc-field input,.ftc-field textarea{
	font-size:16px;line-height:1.4;font-family:inherit;font-weight:400;padding:11px 12px;border:1px solid var(--line-6);border-radius:9px;background:var(--surface);color:var(--ink);width:100%;
}
.ftc-field input:focus,.ftc-field textarea:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px var(--focus)}
.ftc-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-10)}
/* Sign-up team picker */
.ftc-pick{display:flex;flex-direction:column;gap:2px}
.ftc-pick-lab{font-size:13px;font-weight:600;color:var(--ink-10)}
.ftc-pick-hint{font-size:12.5px;font-weight:400;color:var(--dim);line-height:1.4;margin-bottom:6px}
.ftc-pick-box{border:1px solid var(--line-6);border-radius:9px;padding:4px 11px 8px;max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ftc-pick-grp{display:flex;flex-direction:column}
.ftc-pick-cat{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700;margin:9px 0 2px}
.ftc-pick-row{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:400;color:var(--ink);padding:5px 2px;cursor:pointer}
.ftc-pick-row input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--navy)}
.ftc-pick-box .ftc-pick-grp:first-child .ftc-pick-cat{margin-top:4px}
.ftc-btn{
	display:inline-block;background:var(--navy);color:var(--on-solid);border:0;border-radius:9px;padding:12px 18px;
	font-size:16px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;
}
.ftc-btn:hover{background:var(--navy-2)}
.ftc-btn:disabled{opacity:.6;cursor:default}
.ftc-btn-wide{width:100%}
.ftc-card-foot{padding:0 22px 20px;font-size:14px;color:var(--dim)}
.ftc-link{color:var(--link);text-decoration:none;font-weight:600}
.ftc-link:hover{text-decoration:underline}
.ftc-tinyfoot{margin:16px 0 0;font-size:13px}
.ftc-tinyfoot a{color:var(--dim);text-decoration:none}
.ftc-msgbox{padding:10px 12px;border-radius:9px;font-size:14px;background:var(--bad-bg-2);color:var(--bad-ink-2);border:1px solid var(--bad-bg-3)}
.ftc-msgbox.good{background:var(--ok-bg-2);color:var(--ok-ink);border-color:var(--ok-bg-3)}
.ftc-good{color:var(--ok-ink);font-weight:600;margin:0}

/* ---------- app shell ---------- */
.ftc-shell{display:flex;height:100vh;height:100dvh;overflow:hidden}
.ftc-side{
	width:300px;flex:0 0 300px;background:var(--surface);border-right:1px solid var(--line);
	display:flex;flex-direction:column;min-height:0;
}
/* ⚠️ position:relative is load-bearing — .ftc-memenu-pop hangs off this box. */
.ftc-side-head{position:relative;background:linear-gradient(160deg,var(--navy),var(--navy-2));color:var(--on-solid);padding:14px 14px 12px}
.ftc-side-titlerow{display:flex;align-items:center;gap:10px}
.ftc-side-title{flex:1;min-width:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--title);font-weight:700}
/* The way out of the full-screen room list. ⚠️ display:none by default and turned on
   only inside the one-screen-at-a-time block — above it the sidebar is a permanent
   column that cannot be closed, and a ✕ there would be a button that does nothing. */
.ftc-side-x{
	display:none;flex:0 0 auto;align-items:center;justify-content:center;
	width:32px;height:32px;margin:-5px -4px -5px 0;padding:0;
	background:rgba(255,255,255,.14);border:0;border-radius:50%;
	color:var(--on-solid);font-size:14px;line-height:1;cursor:pointer;
}
.ftc-side-x:hover{background:rgba(255,255,255,.26)}
/* ⭐ Matt, 6 Sep 2026: *"Put the menu that is at the bottom as a drop down on the top
   to the right of where the user's name is — will give more space for the chats."*
   The account row and the ▾ that replaced the sidebar footer, side by side. */
.ftc-me-row{display:flex;align-items:center;gap:6px;margin-top:10px}
.ftc-me{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:rgba(255,255,255,.12);border:0;border-radius:10px;padding:8px;color:var(--on-solid);cursor:pointer;text-align:left}
.ftc-me:hover{background:rgba(255,255,255,.2)}
.ftc-memenu{
	position:relative;flex:0 0 38px;height:50px;
	display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.12);border:0;border-radius:10px;
	color:var(--on-solid);font:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0;
}
.ftc-memenu:hover{background:rgba(255,255,255,.2)}
.ftc-memenu.on{background:rgba(255,255,255,.3)}
/* ⚠️ The notifications nudge used to be a visible line in the footer whose whole job
   was to catch the eye. Filed behind a ▾ it would have quietly retired, so the button
   wears a dot for as long as the nudge is in there. */
.ftc-memenu.nudge::after{
	content:"";position:absolute;top:9px;right:8px;width:8px;height:8px;
	border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(5,17,107,.55);
}
.ftc-memenu-pop{
	position:absolute;z-index:60;top:calc(100% - 6px);right:14px;min-width:214px;
	display:flex;flex-direction:column;padding:6px;
	background:var(--surface);border:1px solid var(--line);border-radius:12px;
	box-shadow:0 10px 34px var(--shade-4);
}
.ftc-mm-item{
	display:block;width:100%;text-align:left;white-space:nowrap;
	background:none;border:0;border-radius:8px;padding:9px 11px;
	font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;
}
.ftc-mm-item:hover{background:var(--fill-1)}
.ftc-mm-item.out{color:var(--bad-txt)}
/* ⭐ "3 people are waiting for you to approve them" (v1.20.7). The same red as the
   room-list unread badge on purpose — one colour means one thing in this app, and a
   coach should not have to learn a second vocabulary for a second kind of "you have
   something to deal with". */
.ftc-mm-n{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:22px;height:20px;margin-left:8px;padding:0 7px;
	background:var(--bad-1);color:var(--on-solid);border-radius:10px;
	font-size:12px;font-weight:700;line-height:1;vertical-align:middle;
}
/* ⚠️ On the ▾ ITSELF, because a notification that only exists inside a closed menu is
   a notification nobody sees — the same argument that put the gold nudge dot here, and
   a stronger one. `.ftc-memenu` is position:relative already (see .ftc-memenu.nudge).
   📌 The ring is the sidebar-header navy, so the badge reads as sitting ON the button
   rather than floating over the room list behind it. */
.ftc-memenu-n{
	position:absolute;top:-5px;right:-5px;
	display:flex;align-items:center;justify-content:center;
	min-width:20px;height:20px;padding:0 6px;
	background:var(--bad-1);color:var(--on-solid);border-radius:10px;
	font-size:11.5px;font-weight:700;line-height:1;
	box-shadow:0 0 0 2px rgba(5,17,107,.85);
}
/* ⭐ The YouTube and Facebook marks (v1.21.3). ⚠️ `.ftc-mm-item` is deliberately NOT
   turned into a flex row to hold these: it is `display:block` and every other item in
   the menu — including the one carrying the red approval count — depends on that. An
   inline-block with a baseline nudge changes nothing except the two rows that have a
   mark. 📌 19px, sitting where the emoji on the other rows sit. */
.ftc-mm-brand{display:inline-block;width:19px;height:19px;margin-right:7px;vertical-align:-4px}
.ftc-mm-sep{height:1px;background:var(--line);margin:5px 6px}
.ftc-me-txt{display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
.ftc-me-txt strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftc-me-role{font-size:12px;color:var(--onsolid-3)}
.ftc-av{
	width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--navy);color:var(--on-solid);
	display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.02em;
}
/* ⚠️ Two of the three 40px slots — see the note on .ftc-teamcaret. */
.ftc-av.sm{width:40px;height:40px;flex-basis:40px;font-size:14px}
.ftc-av-spacer{width:40px;flex:0 0 40px}
.ftc-chanlist{flex:1;overflow-y:auto;padding:6px 0 12px;min-height:0}

/* ⭐⭐ Matt, 14 Sep 2026: *"On the main screen of the chat make the teams icons and
   names bigger and easier to see."* Since 1.18.14 this list IS the main screen — the app
   opens on it and on a phone it is the whole screen — so it was being read as a sidebar
   and sized like one.
   ⭐ The room to do it was measured first: **50 of 75 accounts are on ONE team** and 18
   on two, so a typical family's list is five or six rows. Only the two administrators,
   who see all 127 rooms, scroll further for this.

   📌 Three passes, because "bigger" is not a number and he was right both times he said
   it again: 1.19.4 → 1.19.5 → 1.19.6. Names 15 → 17 → 19 → 20.5px, icons 16 → 20 → 24 →
   27px. ⚠️ The second ask was not really about size at all — see row() in app.js: every
   team had silently lost its ICON, and the third was the child rooms carrying a line of
   boilerplate the sample did not. **"Make it bigger" twice in a row is a hint that
   something other than the size is wrong.** */
/* ⭐ Matt, 16 Sep 2026: *"Let's shrink the text down slightly on the main chat screen."*
   A fourth size pass, and the first one DOWNWARD: names 20.5 → 18.5px, rooms inside a
   team 18 → 16.5, the grey preview line 14.5 → 13.5, headings 15 → 14. About 10% off
   everything, so the proportions between them are untouched.
   ⚠️⚠️ THE ICONS AND THE 40px COLUMN DELIBERATELY DID NOT MOVE. He asked for the TEXT,
   and `.ftc-chanico` / `.ftc-av.sm` / `.ftc-av-spacer` are 40px FOR EACH OTHER — see the
   note on .ftc-teamcaret. Shrinking type without touching them makes the icons read
   slightly larger, which is the opposite of 1.19.4's complaint and is the point.
   📌 Sizes now: 1.19.4 → .5 → .6 took names 15 → 17 → 19 → 20.5; this is 18.5, i.e.
   between the 1.19.5 and 1.19.6 passes. */
.ftc-group{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-9);font-weight:700;padding:18px 14px 7px}
.ftc-cat{
	display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;
	padding:18px 14px 7px;text-align:left;color:var(--ink-9);
	font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
}
.ftc-cat:hover{color:var(--link)}
/* ⭐ Matt, 14 Sep 2026: *"Make the carets easier to see."* Both of them were a small pale
   glyph with no edges — findable on a laptop where hovering reveals something, invisible
   on a phone where nothing hovers. This one goes up a size and out of the heading's grey
   into the app's navy. The team caret below became a chip. */
.ftc-cat-caret{font-size:17px;width:17px;color:var(--link)}
.ftc-cat-ico{font-size:21px;line-height:1}
.ftc-cat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftc-chan{
	display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;padding:13px 12px;
	cursor:pointer;text-align:left;color:var(--ink);text-decoration:none;
}
/* A team, with the caret that folds its own rooms away — the same affordance the
   sport headings have. ⚠️ The caret is a sibling button, not a child of the row: a
   <button> inside a <button> is invalid.
   ⚠️⚠️ IT SAT ON THE LEFT, IN THE ICON'S SLOT, FROM 1.18.11 TO 1.19.4 — and that meant
   a team with sub-rooms had no icon. Harmless while only some teams had children;
   then 1.19.1 gave EVERY team an announcements room and no team in the league had an
   icon any more. The caret is on the RIGHT now and the icon column is untouched. */
.ftc-chanrow{display:flex;align-items:center;padding:0 8px 0 0}
.ftc-chanrow > .ftc-chan{flex:1 1 auto;min-width:0;width:auto}
/* ⚠️⚠️ THREE BOXES ARE 40px AND THEY ARE 40px FOR EACH OTHER: .ftc-chanico, .ftc-av.sm
   and .ftc-av-spacer. A DM's avatar and its spacer stand in the room icon's column, so
   every room name in the list starts at the same x. Change one of the three and the
   list goes ragged in a way that is obvious on a screenshot and invisible in a diff.
   📌 It was FOUR boxes at 32px until 1.19.5, when the caret left this column for the
   right-hand end of the row — which is why the caret's own size is now free. The three
   went 36 → 40px at 1.19.6. */
/* ⭐⭐ A CONTROL WITH NO EDGES IS NOT A CONTROL ON A PHONE. (v1.19.7)
   Matt: *"Make the carets easier to see."* It was a 16px ▾ in `--dim` on white with no
   background — and the only thing that had ever made it look like a button was
   `:hover`, which does not exist on the device nearly everyone reads this on. It now
   wears its fill and its border all the time, and the glyph is 20px in near-black.
   ⚠️ 42px WIDE, DELIBERATELY NOT 40. The shared alignment column three rules down is
   40px, and a caret of exactly that width would read like a fourth member of it — which
   is the mistake that cost every team its icon between 1.18.11 and 1.19.4. It is also
   ≥ 42px tall so it stays a real tap target.
   ⚠️ align-self:center, not stretch: a full-height fill next to a two-line row draws a
   tall bar down the edge of the list. */
.ftc-teamcaret{
	flex:0 0 42px;align-self:center;min-height:42px;margin-left:4px;
	display:flex;align-items:center;justify-content:center;
	background:var(--fill-3);border:1px solid var(--line-3);padding:0;border-radius:12px;
	font:inherit;font-size:20px;line-height:1;color:var(--ink-14);cursor:pointer;
}
.ftc-teamcaret:hover{background:var(--fill-4);border-color:var(--line-7);color:var(--link)}
.ftc-chan.sub{padding-left:34px}
.ftc-chan.sub .ftc-chan-name{font-size:16.5px;color:var(--ink-11)}
.ftc-chan:hover{background:var(--fill-1)}
.ftc-chan.on{background:var(--mine)}
.ftc-chanico{width:40px;flex:0 0 40px;text-align:center;font-size:27px}
.ftc-chan-txt{display:flex;flex-direction:column;overflow:hidden;flex:1}
.ftc-chan-name{font-size:18.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftc-chan-prev{font-size:13.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftc-badge{background:var(--bad-1);color:var(--on-solid);border-radius:14px;font-size:14px;font-weight:700;padding:3px 10px;min-width:28px;text-align:center}
.ftc-newdm .ftc-chan-txt{color:var(--link);font-weight:600}
/* ⚠️ The sidebar footer (.ftc-side-foot) is gone — everything in it moved into
   .ftc-memenu-pop above. .ftc-linkbtn STAYS: it is a plain text button used all over
   the profile screen, the coach screen and the admin console, and is nothing to do
   with the sidebar. */
.ftc-linkbtn{background:none;border:0;color:var(--link);font-size:14px;font-weight:600;cursor:pointer;padding:4px 0}
.ftc-linkbtn:hover{text-decoration:underline}
.ftc-form-pad .ftc-btn{align-self:flex-start}
.ftc-form-pad .ftc-linkbtn{align-self:flex-start}

.ftc-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}

/* ---- ⭐⭐ the falcon behind the app (v1.20.0) ----
   Matt: *"Use a photo of the FAITH Falcon head from the website as the background of the
   chat app. Make the opacity so it does not make it hard to read the text."*

   ⚠️⚠️ A BACKGROUND IMAGE HAS NO OPACITY. The two obvious ways to fake one are both
   wrong here: `opacity` on the pane fades its children as well, and an absolutely
   positioned ::before paints ON TOP of non-positioned in-flow content — it would put the
   falcon over the room names and need a z-index fight with every child to get back down.
   So the picture is stacked UNDER a flat scrim of the pane's own colour, in one
   `background` shorthand. Exact, cheap, and nothing to stack.

   ⚠️ THE SCRIM COLOURS ARE --bg AND #fff SPELLED OUT. A gradient cannot take a variable
   and an alpha separately, so 245,246,250 has to stay in step with --bg by hand. If
   --bg ever changes, these change with it or a pale rectangle appears behind the app.

   ⚠️ Painted on .ftc-main and .ftc-side, which do NOT scroll — their children do. On the
   scrollers (.ftc-scroll, .ftc-chanlist) the mark would slide up the screen with the
   messages, and both are transparent, so it shows through from here anyway.

   ⭐ The room list gets a weaker mark than the conversation: a message sits in an opaque
   bubble, but a room name sits straight on the background. On a phone the room list IS
   the screen the app opens on, so leaving it out altogether would have meant opening the
   app and seeing no falcon at all.

   📌 Everything hangs off .ftc-marked, which ftc_serve_app() only adds once the image
   has actually resolved — and the --ftc-mark-* fallbacks below are what the app draws if
   the custom properties are ever missing. */
.ftc-marked .ftc-main{
	background:
		linear-gradient(rgba(var(--mark-main-rgb),var(--ftc-mark-main,.925)), rgba(var(--mark-main-rgb),var(--ftc-mark-main,.925))),
		var(--ftc-mark) center 46% / min(72%, 460px) no-repeat,
		var(--bg);
}
.ftc-marked .ftc-side{
	background:
		linear-gradient(rgba(var(--mark-side-rgb),var(--ftc-mark-side,.945)), rgba(var(--mark-side-rgb),var(--ftc-mark-side,.945))),
		var(--ftc-mark) center 62% / min(74%, 300px) no-repeat,
		var(--surface);
}
.ftc-top{display:flex;align-items:center;gap:10px;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 14px;box-shadow:var(--shadow)}
.ftc-burger{display:none;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--brand-txt);padding:2px 4px}
.ftc-top-txt{min-width:0}
.ftc-top-title{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftc-top-sub{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftc-scroll{flex:1;overflow-y:auto;padding:14px 12px 18px;min-height:0;-webkit-overflow-scrolling:touch}

/* ---------- schedule strip + overlay ---------- */
.ftc-sched{background:var(--surface);border-bottom:1px solid var(--line)}
.ftc-sched-strip{
	display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
	padding:9px 14px;cursor:pointer;text-align:left;color:var(--ink);
}
.ftc-sched-strip:hover{background:var(--fill-1)}
.ftc-sched-ico{width:22px;flex:0 0 22px;text-align:center;font-size:15px}
.ftc-sched-txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.ftc-sched-when{font-size:13.5px;font-weight:700;color:var(--link)}
/* ⚠️ Was nowrap + ellipsis, which was the OTHER half of "the full title not showing"
   (v1.19.3): a tournament's name would be cut off mid-word on a phone even once the
   server started sending it. Two lines, then clamp — the whole thing is one tap away
   in the schedule overlay, which does not clamp at all. */
.ftc-sched-what{
	font-size:12.5px;color:var(--dim);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ftc-sched-more{font-size:12px;font-weight:600;color:var(--link);white-space:nowrap}
.ftc-sched-strip.cx .ftc-sched-when{color:var(--bad-txt);text-decoration:line-through}
.ftc-ov{position:fixed;inset:0;background:rgba(8,12,30,.5);z-index:70;display:flex;align-items:flex-end;justify-content:center}
.ftc-ov-card{
	background:var(--bg);width:100%;max-width:520px;max-height:82vh;border-radius:14px 14px 0 0;
	display:flex;flex-direction:column;box-shadow:0 -8px 40px var(--shade-5);
}
.ftc-ov-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--line);border-radius:14px 14px 0 0}
.ftc-ov-title{flex:1;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftc-ov-x{background:none;border:0;font-size:17px;color:var(--dim);cursor:pointer;padding:2px 4px}
.ftc-ov-body{flex:1;overflow-y:auto;padding:6px 16px 20px;-webkit-overflow-scrolling:touch}
.ftc-sched-day{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700;margin:14px 0 4px}
.ftc-sched-row{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:6px}
.ftc-sched-rtxt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ftc-sched-rmain{font-size:14.5px;font-weight:600}
.ftc-sched-rloc{font-size:12.5px;color:var(--dim)}

/* ---- the address opens the device's own map app (v1.20.11) ----
   Matt: *"In the schedule allow a user to click on the address and open their current
   map app for directions."*
   ⚠️⚠️ `.ftc-sched-rloc` ABOVE IS DELIBERATELY NOT RESTYLED. The RSVP sheet and
   the note sheet both reuse that class for their "Sat, Sep 19 · 7:00pm" heading, so a
   link colour or an underline on it would turn two headings into things that look
   tappable and are not. Everything here hangs off `.ftc-maplink`, which only
   schedLoc() ever makes, and only when the text really is an address.
   ⚠️ A 44px row is not on offer — this line sits under the fixture name inside a
   list row — so the target is widened with padding and the UNDERLINE is what says it
   is a control. (1.19.7: an affordance that lives only in :hover does not exist for
   this audience, and nobody in this league is reading the app with a mouse.) */
.ftc-maplink{display:inline-block;max-width:100%;padding:3px 0;color:var(--link);text-decoration:none}
.ftc-maplink .ftc-maptext{text-decoration:underline;text-underline-offset:2px}
.ftc-mappin{margin-right:4px;text-decoration:none}
.ftc-maplink:hover .ftc-maptext,.ftc-maplink:focus .ftc-maptext{color:var(--brand-txt)}
/* A cancelled fixture keeps its directions — somebody is already on the way there —
   but it should not be the brightest thing in a struck-through row. */
.ftc-sched-row.cx .ftc-maplink{color:var(--dim)}

/* ---- what the event itself says (v1.19.2) ----
   Matt: *"When event shows up on the schedule can you also show the description that
   is on the event."* Empty for all but a handful of events — the server strips the
   calendar system's boilerplate footer before it ever reaches here. */

/* On the fixture strip: a teaser, clamped to two lines, because the strip is a single
   row and one of these is 479 characters of driving directions. The whole thing is one
   tap away in the overlay. */
.ftc-sched-note{
	font-size:12.5px;color:var(--dim);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* In either schedule list: all of it. ⚠️ pre-wrap because a coach who typed three
   lines of directions meant three lines — the same reasoning as .ftc-note-body. The
   left rule is what stops a paragraph of prose reading as part of the fixture above it. */
.ftc-sched-rdesc{
	white-space:pre-wrap;overflow-wrap:anywhere;
	margin-top:5px;padding-left:9px;border-left:2px solid var(--line);
	font-size:13px;line-height:1.45;color:var(--ink-12);
}
.ftc-sched-rdesc a{word-break:break-all}
.ftc-sched-row.cx .ftc-sched-rmain{color:var(--bad-txt);text-decoration:line-through}
.ftc-sched-foot{margin:16px 0 0;font-size:12.5px;color:var(--dim);text-align:center}
/* ⚠️ Moved 821 → 1025 with the layout breakpoint above. This is the schedule / notes
   overlay: a bottom sheet where the app is one-screen-at-a-time, a centred modal where
   it is not. Left at 821 it would have drawn a centred desktop modal over a portrait
   iPad that is otherwise behaving exactly like a phone. 📌 A layout breakpoint is never
   alone in a stylesheet — grep for its twin before changing it. */
@media (min-width:1025px){
	.ftc-ov{align-items:center}
	.ftc-ov-card{border-radius:14px;max-height:76vh}
	.ftc-ov-head{border-radius:14px 14px 0 0}
}
.ftc-daysep{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim);font-weight:600;margin:16px 0 10px}
.ftc-daysep::before,.ftc-daysep::after{content:"";flex:1;height:1px;background:var(--line)}
.ftc-msg{display:flex;gap:9px;margin:2px 0;align-items:flex-end}
.ftc-msg.grouped{margin-top:1px}
.ftc-bub{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 12px;max-width:min(660px,78%);box-shadow:var(--shadow)}
.ftc-msg.mine{flex-direction:row-reverse}
.ftc-msg.mine .ftc-bub{background:var(--mine);border-color:var(--line-4)}
.ftc-meta{display:flex;align-items:baseline;gap:7px;margin-bottom:2px}
.ftc-who{font-size:13px;font-weight:700;color:var(--ink-14)}
.ftc-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--navy);color:var(--on-solid);border-radius:4px;padding:1px 5px}
.ftc-time{font-size:11px;color:var(--dim)}
.ftc-text{font-size:15.5px;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
.ftc-text a{word-break:break-all}
.ftc-del{
	position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
	background:var(--surface);color:var(--dim);font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s;
}
.ftc-bub:hover .ftc-del{opacity:1}
.ftc-del:hover{color:var(--bad-txt)}
.ftc-older{display:block;margin:0 auto 12px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:7px 16px;font-size:13px;color:var(--link);cursor:pointer}
.ftc-empty{text-align:center;color:var(--ink-12);padding:40px 20px}
.ftc-empty p{margin:6px 0}
/* "Show my rooms", on the landing screen. ⚠️ Hidden on a laptop, where the room list
   is already on screen and a button to reveal it would do nothing visible. It is
   turned back on inside the one-screen-at-a-time block, where the list is a drawer. */
.ftc-pickroom{display:none;margin-top:14px}
.ftc-dim{color:var(--dim);font-size:14px}
.ftc-loading{text-align:center;color:var(--dim);padding:30px}
.ftc-readonly{background:var(--surface);border-top:1px solid var(--line);padding:14px;text-align:center;color:var(--dim);font-size:14px}

.ftc-composer{display:flex;gap:8px;align-items:flex-end;background:var(--surface);border-top:1px solid var(--line);padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.ftc-composer textarea{
	flex:1;font-size:16px;line-height:1.4;font-family:inherit;resize:none;border:1px solid var(--line-6);border-radius:20px;padding:10px 14px;max-height:160px;color:var(--ink);
}
.ftc-composer textarea:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px var(--focus)}
.ftc-send{background:var(--navy);color:var(--on-solid);border:0;border-radius:20px;padding:11px 18px;font-weight:600;cursor:pointer}
.ftc-send:hover{background:var(--navy-2)}
.ftc-send:disabled{opacity:.6}

.ftc-person{display:flex;align-items:center;gap:11px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:8px;cursor:pointer;text-align:left}
.ftc-person:hover{background:var(--fill-1)}
.ftc-person-txt{display:flex;flex-direction:column;line-height:1.3}

.ftc-toast{
	position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:84px;background:var(--toast);color:var(--on-solid);
	padding:11px 16px;border-radius:10px;font-size:14px;max-width:88%;opacity:0;pointer-events:none;transition:all .2s;z-index:60;
}
.ftc-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- admin console ---------- */
.ftc-ad-tabs{display:flex;gap:2px;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--line);padding:0 8px}
.ftc-ad-tab{
	background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;
	padding:11px 12px;font-size:14px;font-weight:600;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:6px;
}
.ftc-ad-tab:hover{color:var(--link)}
.ftc-ad-tab.on{color:var(--brand-txt);border-bottom-color:var(--gold)}
.ftc-ad-body{padding:16px 14px 40px;max-width:820px}
.ftc-ad-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.ftc-ad-card h3{margin:0;font-size:16px}
.ftc-ad-card p{margin:0}
.ftc-ad-sub{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:700;margin-top:4px}
.ftc-ad-picker{border:1px solid var(--line);border-radius:9px;padding:9px 11px;max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.ftc-ad-picker-head{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700;margin:6px 0 2px}
.ftc-ad-picker .ftc-check{font-size:14.5px}
.ftc-ad-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.ftc-btn-danger{background:var(--bad-2)}
.ftc-btn-danger:hover{background:var(--bad-3)}
.ftc-ad-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ftc-ad-stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:96px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.ftc-ad-stat strong{font-size:20px;color:var(--brand-txt)}
.ftc-ad-stat span{font-size:12px;color:var(--dim)}
.ftc-ad-zero{font-size:13px;font-weight:700;color:var(--bad-txt);white-space:nowrap}
.ftc-ad-row{
	display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
	background:none;border:0;border-top:1px solid var(--line);padding:10px 2px;cursor:pointer;text-align:left;font-size:15px;color:var(--ink);
}
.ftc-ad-row:hover{background:var(--fill-1)}
.ftc-ad-row-main{display:flex;flex-direction:column;min-width:0}
.ftc-ad-row-main .ftc-dim{font-size:12.5px}
.ftc-ad-roomrow{border-top:1px solid var(--line)}
.ftc-ad-roomrow .ftc-ad-row{border-top:0}
.ftc-ad-roomrow.sub .ftc-ad-row{padding-left:20px}
.ftc-ad-roomrow.sub .ftc-ad-row-main strong{font-weight:600;font-size:14px;color:var(--ink-8)}
.ftc-ad-asked{margin:0;font-size:14px;color:var(--ink);background:var(--fill-1);border:1px solid var(--line);border-radius:8px;padding:8px 11px;line-height:1.45}
.ftc-ad-panel{padding:4px 2px 14px;display:flex;flex-direction:column;gap:10px}
.ftc-ad-inline{display:flex;gap:9px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:9px 0}
.ftc-ad-inline input[type=text],.ftc-ad-inline input[type=number]{
	font-size:15px;padding:7px 9px;border:1px solid var(--line-6);border-radius:8px;font-family:inherit;
}
.ftc-ad-inline .ftc-btn{padding:7px 13px;font-size:14px}
.ftc-ad-msg{border-top:1px solid var(--line);padding:9px 0;display:flex;flex-direction:column;gap:3px}
.ftc-ad-msg-body{white-space:pre-wrap;font-size:15px;overflow-wrap:anywhere}
.ftc-ad-msg-body.gone{color:var(--dim);font-style:italic}

/* ---------- mobile, and every tablet ---------- */

/* ⭐⭐⭐ Matt, 16 Sep 2026: *"On an iPad Pro there is a blank side of the screen — make
   it the whole screen like on phone."*

   ⚠️⚠️ AN 11" iPad PRO IS 834 CSS px AND THIS SAID 820. It missed by FOURTEEN PIXELS,
   so the biggest touch screen in the league got the laptop layout: a 300px room list
   and 534px of "Pick a room to start reading." — and since 1.18.14 the app lands with
   no room chosen, so that half was blank EVERY time it opened. 📌 A breakpoint chosen
   as "300px list + a usable chat pane" is a fine number and was still wrong about a
   real device. **Check the widths of the devices people actually hold.**

   ⚠️⚠️⚠️ TWO HALVES, AND THE SECOND ONE IS NOT ABOUT WIDTH. Covering a 12.9" iPad in
   landscape by width alone means `max-width:1366px`, which also catches a 1366×768
   Windows laptop — a machine that is all over church offices — and hands it the phone
   layout. So:
     • `(max-width:1024px)` is pure width and covers BOTH iPad Pro portrait sizes.
       No laptop is this narrow, so this half is safe on its own.
     • `(max-width:1400px) and (hover:none) and (pointer:coarse)` adds iPads in
       LANDSCAPE by asking *is this a touch screen*, not *is this narrow*.
   ⭐ If iPadOS ever reports a fine pointer — a Magic Keyboard is the plausible way —
   the second half simply does not match and landscape keeps the old two-pane layout.
   **The failure mode is "no change", never "a laptop broke."** Verified at ten
   width/pointer combinations, including all four common laptop widths.

   ⚠️ Anything added in here now runs on a screen up to 1400px wide. Check it there —
   `.ftc-bub` below is the one that was already wrong. */
@media (max-width:1024px), (max-width:1400px) and (hover:none) and (pointer:coarse){
	.ftc-burger{display:block}
	/* ⭐ Matt, 6 Sep 2026: *"I want the hamburger menu to be full screen and the
	   default that opens."* So on a phone the room list IS the screen — edge to edge,
	   no 86% drawer and no sliver of chat showing down the side.
	   ⚠️ With nothing visible behind it there is nothing to dim and nothing to tap
	   through to, so the scrim is gone entirely (element and all) and the way back is
	   the ✕ in the sidebar's own header. A full-screen panel with no close control is
	   a trap, and that is the whole reason .ftc-side-x exists. */
	.ftc-side{
		position:fixed;z-index:50;top:0;bottom:0;left:0;right:0;width:100%;max-width:none;
		border-right:0;transform:translateX(-102%);transition:transform .22s ease;
	}
	.ftc-sideopen .ftc-side{transform:translateX(0)}
	.ftc-side-x{display:inline-flex}
	/* ⚠️ The shell is served with viewport-fit=cover, so on a notched phone installed
	   to the Home Screen the page starts UNDERNEATH the status bar. Both headers take
	   the inset, because the sidebar is now the landing screen and the main header is
	   what replaces it — if only one of them moved, closing the menu would jump.
	   📌 env() is exactly 0 in a browser tab, on Android and on every desktop, so this
	   is provably a no-op everywhere except the case it is for. */
	.ftc-side-head{padding-top:calc(14px + env(safe-area-inset-top))}
	.ftc-top{padding-top:calc(10px + env(safe-area-inset-top))}
	/* ⚠️ The inset used to sit on the sidebar footer, which no longer exists. The room
	   list is now the thing that runs to the bottom edge, so it takes it — otherwise
	   the last team would sit under the home indicator. */
	.ftc-chanlist{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
	.ftc-pickroom{display:inline-block}
	/* ⚠️⚠️ CAPPED, because this block is no longer phones-only. A bare 82% is right on a
	   390px phone (320px) and absurd on a 1194px iPad — a 979px message bubble, WIDER
	   than the desktop layout it just replaced, which would have made the fix look like
	   a regression. min() keeps the phone exactly as it was and holds a tablet at the
	   same 660px the two-pane layout uses. */
	.ftc-bub{max-width:min(660px,82%)}
}

/* ---------- locked page ---------- */
.ftc-lock{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.ftc-lock-card{background:var(--surface);border-radius:14px;box-shadow:0 8px 30px var(--shade-2);padding:30px 26px;max-width:440px;text-align:center}
.ftc-lock-ico{font-size:34px}
.ftc-lock-card h1{font-size:21px;margin:10px 0 8px}
.ftc-lock-card p{color:var(--ink-10);font-size:15px}
.ftc-lock-foot{margin-top:18px;font-size:13px}
.ftc-lock-foot a{color:var(--dim);text-decoration:none}

/* ---- RSVPs on the calendar ---- */
.ftc-rsvp{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:7px 11px 8px}
.ftc-sched-rtxt .ftc-rsvp{padding:7px 0 0}
.ftc-rsvp-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.ftc-rsvp-b{appearance:none;border:0;background:var(--surface);color:var(--dim);font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;cursor:pointer;border-right:1px solid var(--line)}
.ftc-rsvp-b:last-child{border-right:0}
.ftc-rsvp-b:hover{background:var(--fill-1)}
.ftc-rsvp-b.on{color:var(--on-solid)}
.ftc-rsvp-b.on.yes{background:var(--ok)}
.ftc-rsvp-b.on.no{background:var(--bad-2)}
.ftc-rsvp-b.on.maybe{background:var(--warn)}
.ftc-rsvp-count{appearance:none;border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--dim);cursor:pointer;padding:0;text-align:left}
.ftc-rsvp-count:hover{text-decoration:underline}
.ftc-rsvp-names{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ftc-rsvp-name{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px}
.ftc-rsvp-name.ath{border-color:var(--navy-2);font-weight:600}

/* ---- answering for your children ---- */
.ftc-rsvp-rows{display:flex;flex-direction:column;gap:6px}
.ftc-rsvp-rows.many{width:100%}
.ftc-rsvp-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ftc-rsvp-for{
	font-size:12.5px;font-weight:700;color:var(--ink-8);min-width:74px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ftc-kidlist{display:flex;flex-direction:column;gap:8px}
.ftc-kid{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:9px 0}
.ftc-kid:first-child{border-top:0}
.ftc-kid-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.ftc-kid-txt strong{font-size:15px}
.ftc-kid-txt .ftc-dim{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftc-kid-x{color:var(--bad-txt)}
.ftc-kid-form{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.ftc-kid-name{
	font-size:16px;line-height:1.4;font-family:inherit;padding:11px 12px;
	border:1px solid var(--line-6);border-radius:9px;background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box;
}
.ftc-kid-name:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px var(--focus)}
.ftc-kid-btns{display:flex;gap:8px;margin-top:6px}
@media (max-width:560px){
	.ftc-rsvp-for{min-width:100%}
}

/* ---- the team's stats, read-only (v1.18.18) ---- */

/* The way in, under the fixture strip. ⚠️ Its own row rather than inside the strip
   button: nested buttons are not legal HTML, and the strip is already a button. */
.ftc-statbar{display:flex;gap:8px;align-items:center;padding:0 11px 9px}
.ftc-sched .ftc-statbar:first-child{padding-top:9px}
.ftc-statbtn{
	display:inline-flex;align-items:center;
	padding:6px 13px;font:inherit;font-size:13px;font-weight:600;
	color:var(--link);background:var(--surface);border:1px solid var(--line);border-radius:999px;cursor:pointer;
}
.ftc-statbtn:hover{background:var(--fill-1)}

.ftc-st-team{font-size:17px;font-weight:700;color:var(--brand-txt);margin:6px 0 2px}

/* One finished game. */
.ftc-st-game{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 0 4px;margin-bottom:10px;box-shadow:var(--shadow)}
.ftc-st-ghead{display:flex;align-items:center;gap:10px;padding:0 12px 8px}
.ftc-st-gtxt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ftc-st-gscore{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ftc-st-gopp{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* W / L / T, in the same three colours the ticker uses for a result so the two screens
   agree at a glance. */
.ftc-st-res{
	flex:0 0 26px;width:26px;height:26px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	font-size:12px;font-weight:700;color:var(--on-solid);
}
.ftc-st-res.w{background:var(--ok)}
.ftc-st-res.l{background:var(--bad-2)}
.ftc-st-res.t{background:var(--warn)}

.ftc-st-wrap{margin-top:2px}
.ftc-st-tt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700;padding:6px 12px 3px}

/* ⚠️⚠️ The table scrolls, NOT the page. A box score is a dozen columns wide and a phone
   is not; without a scroller of its own the whole page slides sideways and the "Back to
   chat" button wanders off the left edge. */
.ftc-st-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ⚠️ border-collapse:SEPARATE with zero spacing, not `collapse`. It looks like the
   fussier way round and it is load-bearing: position:sticky on a table cell is
   unreliable under `collapse` (the collapsed border model has no box to stick), so the
   name column below would come unglued. The borders are put back per-cell instead. */
.ftc-st-table{
	border-collapse:separate;border-spacing:0;width:100%;
	font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.ftc-st-table th{
	font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);font-weight:700;
	text-align:right;padding:5px 9px;border-bottom:1px solid var(--line);background:var(--surface);
}
.ftc-st-table td{text-align:right;padding:5px 9px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.ftc-st-table tr:last-child td{border-bottom:0}

/* ⭐ The name column stays put while the numbers scroll under it. Without this you lose
   track of whose row you are reading two columns in, which is the whole difficulty of a
   box score on a small screen. The opaque background is what the numbers pass behind. */
.ftc-st-table th.nm,.ftc-st-table td.nm{
	position:sticky;left:0;z-index:1;
	text-align:left;background:var(--surface);padding-left:12px;
	max-width:150px;overflow:hidden;text-overflow:ellipsis;
	box-shadow:1px 0 0 var(--line);
}
.ftc-st-table td.nm{font-weight:600}

/* TEAM, and the opponent under it. */
.ftc-st-tot td{border-top:2px solid var(--line);border-bottom:0;font-weight:700;background:var(--fill-1)}
.ftc-st-tot td.nm{background:var(--fill-1);font-weight:700;letter-spacing:.03em}

/* ---- a coach's note on one fixture (v1.18.17) ---- */

/* The chip beside Going / Can't / Maybe. Sized and shaped like .ftc-rsvp-b so it reads
   as one of the controls on that row rather than something bolted on after. */
.ftc-note-b{
	flex:0 0 auto;display:inline-flex;align-items:center;
	padding:5px 11px;font:inherit;font-size:12.5px;font-weight:600;
	color:var(--dim);background:var(--surface);border:1px solid var(--line);border-radius:9px;cursor:pointer;
}
.ftc-note-b:hover{background:var(--fill-1);color:var(--link)}
/* ⭐ A fixture that HAS instructions has to look different from one that merely could
   have them — the whole value of the marker is being spottable while scrolling a
   season. Amber rather than the navy the app uses everywhere else, and deliberately
   NOT the green/red of an answered RSVP: those say what YOU did, this says what the
   coach did, and the two must not be mistaken for each other. */
.ftc-note-b.has{color:var(--warn-txt);background:var(--warn-bg-1);border-color:var(--warn-bg-3);font-weight:700}
.ftc-note-b.has:hover{background:var(--warn-bg-2);color:var(--warn-txt)}

/* ⭐ "🔔 Remind" — a coach asking their own team to RSVP (v1.20.8). Shaped exactly like
   .ftc-note-b so the two read as one row of coach controls rather than two designs.
   ⚠️ NAVY, not the note's amber and not the RSVP row's green/red. Amber already means
   "the coach left instructions here"; green and red already mean "this is what YOU
   answered". A third meaning needs a third colour, and navy is the app's own "this is a
   thing you can do". */
.ftc-remind-b{
	flex:0 0 auto;display:inline-flex;align-items:center;
	padding:5px 11px;font:inherit;font-size:12.5px;font-weight:600;
	color:var(--link);background:var(--surface);border:1px solid var(--line-5);border-radius:9px;cursor:pointer;
}
.ftc-remind-b:hover{background:var(--fill-2)}
/* Sent. ⚠️ Stays on screen rather than disappearing: a button that vanishes after one
   press reads as a mis-tap, and the coach needs to see that it went. */
.ftc-remind-b.done{
	color:var(--ok-txt);background:var(--ok-bg-1);border-color:var(--ok-bg-4);font-weight:700;cursor:default;
}
.ftc-remind-b:disabled{opacity:.7}
.ftc-remind-b.done:disabled{opacity:1}

/* The note as a family reads it. white-space:pre-wrap because a coach typing kit, time
   and directions will put them on three lines and means it. */
.ftc-note-body{
	white-space:pre-wrap;overflow-wrap:anywhere;
	margin-top:9px;padding:11px 13px;
	background:var(--warn-bg-1);border:1px solid var(--warn-bg-3);border-left-width:3px;border-radius:0 10px 10px 0;
	font-size:15.5px;line-height:1.5;color:var(--warn-ink);
}
.ftc-note-by{margin:7px 0 0;font-size:12.5px;color:var(--dim)}

/* ⚠️ font-size 16px is load-bearing, not taste: iOS zooms the whole page in when a
   text field under 16px takes focus, and the coach is typing this on a phone at a
   touchline. Every other input in this app is 16px for the same reason. */
.ftc-note-ta{
	width:100%;box-sizing:border-box;margin-top:10px;min-height:120px;resize:vertical;
	font:inherit;font-size:16px;line-height:1.45;
	padding:11px 12px;border:1px solid var(--line-6);border-radius:10px;background:var(--surface);color:var(--ink);
}
.ftc-note-ta:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px var(--focus)}
/* min-height holds the line's space while it is empty, so the buttons below do not
   jump the moment the counter appears. */
.ftc-note-count{margin:5px 0 0;min-height:1.2em;font-size:12px;color:var(--dim);text-align:right}
.ftc-note-hint{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--dim)}
.ftc-note-btns{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}

/* ---- photos in chat ---- */
.ftc-composer{flex-direction:column;align-items:stretch;gap:8px}
.ftc-composer-row{display:flex;gap:8px;align-items:flex-end}
.ftc-composer-row textarea{flex:1}
.ftc-pickhide{display:none}
.ftc-attach{
	flex:0 0 auto;background:var(--surface);border:1px solid var(--line-6);border-radius:50%;width:42px;height:42px;
	font-size:19px;line-height:1;cursor:pointer;color:var(--link);padding:0;
}
.ftc-attach:hover{background:var(--fill-1)}
.ftc-picstrip{display:flex;gap:8px;flex-wrap:wrap;padding:2px 2px 0}
.ftc-pic{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--fill-1)}
.ftc-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ftc-pic.busy img{opacity:.45}
.ftc-pic.busy::after{
	content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
	border:2px solid rgba(255,255,255,.7);border-top-color:var(--navy);border-radius:50%;
	animation:ftcspin .8s linear infinite;
}
.ftc-pic.failed{border-color:var(--bad-bg-5);background:var(--bad-bg-2)}
.ftc-pic.failed img{opacity:.3}
.ftc-pic-x{
	position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;
	background:rgba(12,16,32,.72);color:var(--on-solid);font-size:14px;line-height:1;cursor:pointer;padding:0;
}
.ftc-photos{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;max-width:420px}
.ftc-photos.one{max-width:320px}
.ftc-photo{
	flex:0 0 auto;width:104px;aspect-ratio:1/1;padding:0;border:1px solid var(--line);border-radius:10px;
	overflow:hidden;background:var(--fill-1);cursor:zoom-in;display:block;
}
.ftc-photos.one .ftc-photo{width:100%;max-width:320px}
.ftc-photo img{width:100%;height:100%;object-fit:cover;display:block;background:var(--fill-1)}
.ftc-photos.one .ftc-photo img{object-fit:contain}
.ftc-photo img.loading{min-height:70px}
.ftc-photo img.failed{min-height:70px;background:var(--bad-bg-2)}
.ftc-lightbox{align-items:center;flex-direction:column;justify-content:center;gap:10px;padding:20px;background:rgba(6,8,18,.94)}
.ftc-lightbox-img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:8px}
.ftc-lightbox-cap{color:var(--onsolid-4);font-size:13px}
.ftc-lightbox-x{
	position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;border:0;
	background:rgba(255,255,255,.14);color:var(--on-solid);font-size:22px;line-height:1;cursor:pointer;padding:0;
}
.ftc-lightbox-nav{
	position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;
	background:rgba(255,255,255,.14);color:var(--on-solid);font-size:26px;line-height:1;cursor:pointer;padding:0;
}
.ftc-lightbox-nav.prev{left:12px}
.ftc-lightbox-nav.next{right:12px}

/* ---- replying to a message ---- */

/* The quoted original, inside the reply's own bubble. A button, because tapping it
   jumps to what is being answered — and because being a button is what keeps the
   bubble's tap-to-react off it. */
.ftc-quote{
	display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;cursor:pointer;
	background:var(--fill-1);border:0;border-left:3px solid var(--navy-2);border-radius:0 8px 8px 0;
	padding:5px 9px;margin:1px 0 6px;font:inherit;line-height:1.35;
}
.ftc-quote:hover{background:var(--fill-2)}
.ftc-quote.gone{border-left-color:var(--line-8);cursor:default}
.ftc-msg.mine .ftc-quote{background:var(--mine-2)}
.ftc-msg.mine .ftc-quote:hover{background:var(--mine-3)}
.ftc-quote-who{font-size:12px;font-weight:700;color:var(--link)}
.ftc-quote.gone .ftc-quote-who{color:var(--dim);font-weight:600;font-style:italic}
.ftc-quote-txt{
	font-size:12.5px;color:var(--ink-8);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ⚠️ Two seconds of "here it is", after jumping back to the original. Without it the
   view moves and nothing tells you which message it moved to. */
.ftc-flash .ftc-bub{animation:ftcflash 1.6s ease-out}
@keyframes ftcflash{
	0%{box-shadow:0 0 0 3px rgba(242,183,5,.85)}
	60%{box-shadow:0 0 0 3px rgba(242,183,5,.55)}
	100%{box-shadow:var(--shadow)}
}

/* "Replying to Sarah", above the composer. */
.ftc-replybar{
	display:flex;align-items:center;gap:10px;
	background:var(--fill-1);border-left:3px solid var(--navy-2);border-radius:0 8px 8px 0;
	padding:7px 10px;margin:0 2px 2px;
}
.ftc-replybar-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ftc-replybar-who{font-size:12px;font-weight:700;color:var(--link)}
.ftc-replybar-say{
	font-size:13px;color:var(--ink-8);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ftc-replybar-x{
	flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:0;background:transparent;
	color:var(--dim);font-size:19px;line-height:1;cursor:pointer;padding:0;
}
.ftc-replybar-x:hover{background:var(--fill-4);color:var(--ink)}

/* ---- the whole league's schedule ---- */

.ftc-fs-back{margin-bottom:8px}
.ftc-fs-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ftc-fs-chip{
	padding:6px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-13);
	background:var(--surface);border:1px solid var(--line);border-radius:999px;cursor:pointer;
}
.ftc-fs-chip:hover{background:var(--fill-1)}
.ftc-fs-chip.on{background:var(--navy);border-color:var(--navy);color:var(--on-solid)}
.ftc-fs-count{margin:2px 0 0;font-size:12.5px;color:var(--dim)}
.ftc-fs-what{font-size:13.5px;color:var(--ink-12)}
.ftc-sched-row.cx .ftc-fs-what{color:var(--bad-txt)}

/* ---- reactions on a message ---- */
.ftc-re{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:5px}
.ftc-msg.mine .ftc-re{justify-content:flex-end}
/* ⚠️⚠️ Both the tap AND the press-and-hold on a message are OURS (messageGestures in
   app.js — tap reacts, hold replies), so the phone's own long press has to be off:
   the iOS copy / look-up callout and the Android selection handles would otherwise
   come up on top of ours and the two would fight over the same gesture. Coarse
   pointers ONLY — a mouse never long presses, right-click starts a reply there
   instead, and a laptop keeps ordinary text selection over the whole conversation
   (messageGestures refuses a tap that leaves text selected, so the two do not clash).
   📌 The cost is that a message cannot be selected and copied ON A PHONE. */
@media (hover:none) and (pointer:coarse){
	.ftc-bub{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}
.ftc-re-chip{
	display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);
	border-radius:999px;padding:1px 8px 1px 6px;font:inherit;font-size:13px;line-height:1.7;cursor:pointer;color:var(--ink-12);
}
.ftc-re-chip:hover{background:var(--fill-1)}
.ftc-re-chip.mine{background:var(--mine);border-color:var(--line-9);color:var(--link);font-weight:700}
.ftc-msg.mine .ftc-re-chip{background:var(--surface)}
.ftc-msg.mine .ftc-re-chip.mine{background:var(--mine-2)}
.ftc-re-emo{font-size:13px;line-height:1}
.ftc-re-n{font-size:12px;font-variant-numeric:tabular-nums}
.ftc-re-pick{
	position:fixed;z-index:80;display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);
	border-radius:999px;padding:4px 6px;box-shadow:0 6px 24px var(--shade-3);
}
.ftc-re-opt{background:none;border:0;font-size:22px;line-height:1;padding:5px 7px;border-radius:50%;cursor:pointer;transition:transform .1s}
.ftc-re-opt:hover{background:var(--fill-1);transform:scale(1.18)}
/* ---- the Giphy picker (v1.24.0) ----
   Matt: *"can you allow to choose from gifs from giphy"*.
   ⚠️ A two-column masonry-ish grid rather than squares: a GIF's shape is part of what
   it is, and cropping every one to a square makes a wall of them unreadable. */
.ftc-gif-card{max-width:520px}
.ftc-gif-bar{padding:10px 16px 6px;background:var(--surface);border-bottom:1px solid var(--line)}
/* ⚠️ 16px, or iOS zooms the page the moment the search box is focused. */
.ftc-gif-q{
	width:100%;font:inherit;font-size:16px;padding:9px 12px;
	border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);
}
.ftc-gif-body{min-height:220px}
.ftc-gif-grid{column-count:2;column-gap:8px}
@media (min-width:520px){ .ftc-gif-grid{column-count:3} }
.ftc-gif-cell{
	display:block;width:100%;margin:0 0 8px;padding:0;break-inside:avoid;
	background:var(--fill-1);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;
}
.ftc-gif-cell img{display:block;width:100%;height:auto}
.ftc-gif-cell:hover{border-color:var(--navy-2)}
/* 📌 Giphy's terms ask for attribution wherever their results are shown. */
.ftc-gif-foot{
	padding:7px 16px 10px;background:var(--surface);border-top:1px solid var(--line);
	border-radius:0 0 14px 14px;
	font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:center;
}
/* The GIF button beside 📷. Letters, not an emoji — "GIF" is the word every chat app
   uses and no font vendor can redraw it (1.20.10). */
.ftc-gifbtn{font-size:12.5px;font-weight:800;letter-spacing:.03em}

/* ---- any emoji at all (v1.23.0) ----
   Matt: *"can we allow … more emoji's in chat"*, and he chose any emoji rather than a
   longer fixed list. ⚠️ The pill row above was built for FIVE; thirty-two of them have
   to wrap, so this is a width and a wrap rather than a new component — the chips, the
   hover and the shadow are all still the ones above. */
.ftc-re-pick.wide{flex-wrap:wrap;justify-content:center;width:292px;max-width:calc(100vw - 24px);border-radius:16px;padding:6px 6px 4px}
.ftc-re-any{display:flex;gap:6px;width:100%;padding:5px 3px 2px;border-top:1px solid var(--line);margin-top:4px}
/* ⚠️⚠️ 16px, like every other input in this app: anything smaller and iOS zooms the
   whole page the moment it is focused, which on a floating picker means the picker
   walks off the screen. */
.ftc-re-anyin{
	flex:1;min-width:0;font:inherit;font-size:16px;padding:6px 9px;
	border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);
}
.ftc-re-anygo{
	flex:0 0 auto;font:inherit;font-size:14px;font-weight:700;padding:6px 12px;
	border:0;border-radius:9px;background:var(--navy);color:var(--on-solid);cursor:pointer;
}
.ftc-re-anygo:hover{background:var(--navy-2)}

/* ---- the Scores page, as a scoreboard (v1.21.0, rebuilt ESPN-style in v1.25.0) ----
   Matt: *"In the scores page can you make it look more like an ESPN type score page."*
   📌 This block REPLACED the one-line row. The ticker's 50 lines went at 1.21.0; the
   public website strip is scoreboard.php's own markup and its own CSS and shares no
   class name with any of it — checked against that file, not assumed.
   ⚠️⚠️ NOTHING HERE DEPENDS ON A FONT HAVING A GLYPH. The winner's marker is a border
   triangle drawn by the browser, not ▶, and the box-score control is the words "Box
   Score", not 📊. 1.20.10 and 1.21.3 are the two releases that paid for that rule. */

/* The sport tabs.
   ⚠️⚠️ THE PADDING AND THE LETTER-SPACING HERE ARE MEASURED, NOT CHOSEN. The first cut
   used 11px of side padding and .07em, and the four tabs came to **411px inside a 366px
   bar** — "BASEBALL" was cut off mid-word at the rounded corner, which reads as a broken
   component rather than a scrollable one. At 6px and .05em they measure 361px and fit,
   with the overflow kept as the fallback for a 320px phone, where a half-visible fourth
   tab is the normal affordance. 📌 A fifth sport would overflow again by design; it must
   never wrap into a second row.
   ⚠️ Baseball and Basketball have played nothing and still get a tab. 1.21.0 named the
   empty sports in a footer because basketball is the biggest sport in this league by
   rooms; a tab that opens on "no finished games yet" says it where somebody would tap. */
.ftc-sc-tabs{
	display:flex;background:var(--chrome);border-radius:7px;margin:2px 0 10px;
	overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.ftc-sc-tabs::-webkit-scrollbar{display:none}
.ftc-sc-tab{
	flex:1 0 auto;display:flex;align-items:baseline;justify-content:center;gap:4px;
	background:none;border:0;border-bottom:3px solid transparent;color:var(--onsolid-6);
	font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
	padding:11px 6px 8px;cursor:pointer;white-space:nowrap;font-family:inherit;
}
.ftc-sc-tab.on{color:var(--on-solid);border-bottom-color:var(--accent)}
.ftc-sc-tab:hover{color:var(--onsolid-2)}
.ftc-sc-tabn{font-size:10px;font-weight:700;color:var(--onsolid-7);letter-spacing:0}
.ftc-sc-tab.on .ftc-sc-tabn{color:var(--title)}

/* One game. */
.ftc-sc-card{background:var(--surface);border:1px solid var(--line);border-radius:7px;margin-bottom:8px;overflow:hidden}
.ftc-sc-head{
	display:flex;align-items:center;justify-content:space-between;gap:8px;
	background:var(--chrome);color:var(--on-solid);padding:6px 11px;
	font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
}
.ftc-sc-date{color:var(--onsolid-5);font-weight:700}
.ftc-sc-body{padding:3px 0}

.ftc-sc-trow{display:flex;align-items:center;gap:8px;padding:7px 11px}
/* The winner's marker: a triangle the browser draws. See the header note. */
.ftc-sc-mk{flex:0 0 6px;width:0;height:0}
.ftc-sc-trow.win .ftc-sc-mk{
	border-left:6px solid var(--ink-15);border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.ftc-sc-mono{
	flex:0 0 26px;height:26px;border-radius:6px;background:var(--navy);color:var(--on-solid);
	display:flex;align-items:center;justify-content:center;
	font-size:9.5px;font-weight:800;letter-spacing:.02em;
}
/* ⚠️⚠️ `flex:1;min-width:0` ON THE NAME AND `flex:0 0 auto` ON EVERYTHING TO ITS RIGHT.
   This is 1.21.1's bug, which cost a release: a flex item shrinks to fit, so without
   this "Oxford United (formerly Kingsbury Country Day School)" squeezes the score until
   it wraps. The club name is the one thing on this row that may be clipped. */
.ftc-sc-nm{display:flex;align-items:baseline;gap:6px;flex:1;min-width:0}
.ftc-sc-club{
	flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	font-size:14px;font-weight:600;color:var(--ink-15);
}
.ftc-sc-rec{flex:0 0 auto;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.ftc-sc-set{
	flex:0 0 21px;text-align:center;font-size:12.5px;color:var(--dim);
	font-variant-numeric:tabular-nums;
}
.ftc-sc-pts{
	flex:0 0 28px;text-align:right;font-size:17px;font-weight:700;color:var(--ink-15);
	font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* ⭐ The loser is dimmed rather than the winner being coloured: a green win on one row
   and a red loss on the other turns a scoreboard into a traffic light, and every card
   here has exactly one of each. */
.ftc-sc-trow.lost .ftc-sc-club,
.ftc-sc-trow.lost .ftc-sc-pts{color:var(--ink-3);font-weight:600}
.ftc-sc-trow.win .ftc-sc-club{font-weight:800}
.ftc-sc-trow.win .ftc-sc-pts{font-weight:800}
/* The set-number header, which is a row with no team in it. */
.ftc-sc-colhead{padding-top:4px;padding-bottom:2px}
.ftc-sc-colhead .ftc-sc-set,
.ftc-sc-colhead .ftc-sc-pts{
	font-size:9.5px;font-weight:800;color:var(--onsolid-6);text-transform:uppercase;letter-spacing:.06em;
}
.ftc-sc-colhead .ftc-sc-mono{background:none}

.ftc-sc-foot{
	display:flex;align-items:center;gap:10px;
	border-top:1px solid var(--line-2);background:var(--fill-1);padding:0 11px;min-height:38px;
}
/* ⚠️ 38px of row and 34px of button. A scoreboard footer link wants to be small and a
   thumb does not — the app's own touch size is 40px and this is as close as the ESPN
   shape allows. */
.ftc-sc-box{
	background:none;border:0;padding:9px 0;min-height:34px;cursor:pointer;font-family:inherit;
	font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-15);
}
.ftc-sc-box:hover{color:var(--accent);text-decoration:underline}
.ftc-sc-note{
	flex:1;min-width:0;text-align:right;font-size:11px;color:var(--ink-4);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ⚠️⚠️ ON A NARROW PHONE THE LEAGUE'S OWN NAME IS THE FIRST THING TO GO, NOT THE
   DIVISION. Measured at a real 320px viewport: a three-set volleyball row spends ~185px
   on the marker, the badge, three set columns, the total and the gaps, leaving 111px for
   a name that wants 145 — so "F.A.I.T.H. 16U Girl's" rendered as "F.A.I.T.H. …", which
   is the one word every card on this page already shares, and the division, which is the
   half that identifies the team, was the half that disappeared. Hiding `.ftc-sc-pre`
   gives back ~72px on EVERY card and leaves "16U Girl's" whole, with the navy badge
   still saying which side is ours.
   ⚠️ `.sets` is put on the card by scoreCard() rather than found with :has(), so the
   set-column rules below work in every browser the league actually uses.
   📌 Only ever tested in a FULL-VIEWPORT preview page — a three-panel preview pins each
   phone at 390px inside a 1250px window, where a max-width media query can never fire. */
@media (max-width:379px){
	.ftc-sc-pre{display:none}
	.ftc-sc-card.sets .ftc-sc-set{flex-basis:19px}
	.ftc-sc-card.sets .ftc-sc-trow{gap:6px}
}

/* ---- Appearance, at the foot of the ▾ menu (v1.26.0) ---- */
.ftc-th{padding:8px 10px 10px;border-top:1px solid var(--line)}
.ftc-th-lab{
	display:block;margin:0 2px 6px;font-size:11px;font-weight:800;
	text-transform:uppercase;letter-spacing:.07em;color:var(--dim);
}
.ftc-th-seg{display:flex;gap:4px}
/* ⚠️ 34px, not the app's usual 40: this sits inside a popover whose other rows are
   36px, and a 40px control would be the tallest thing in a menu of navigation items
   while being the least important one in it. */
.ftc-th-b{
	flex:1 1 0;min-height:34px;padding:7px 4px;font:inherit;font-size:12.5px;
	font-weight:700;color:var(--ink-12);background:var(--fill-1);
	border:1px solid var(--line-2);border-radius:8px;cursor:pointer;
}
.ftc-th-b:hover{background:var(--fill-3)}
.ftc-th-b.on{background:var(--navy);border-color:var(--navy);color:var(--on-solid)}