/* tournament_flow.css -- the practice tournament line inside the parent wizard, and the dashboard's All practice tournaments table. Markup: templates/parent_wizard/_screen_configure_tournament.html, _tab_tournaments.html. Behaviour: the "practice tournament lines" block of static/js/pack_cart.js. Why a sheet of its own: every polish pass on the pack screen is scoped to #screen-packs (pack_select.css), so #screen-tournament was left with the first-draft base rules: action-blue buttons, a violet pressed border with no tick, a default-styled "Change practice tournament". This restates the pack screen's treatment for the tournament screen, from the same tokens: pill chips with a leading ring that fills slate and ticks, slate primary button, coral focus ring. Colours come from tokens.css through the .qv-tokens containers. The five values the standard has no name for are declared once, below, exactly as pack_select.css spells them for #screen-packs. Hover effects are gated on real pointers, :focus-visible never shares a selector list, and every transition stands down for prefers-reduced-motion. */ #screen-tournament, #catalog-tournaments, #packsTournamentsLine{ --tf-slate:var(--nav); --tf-slate-deep:#22303f; --tf-ring:#df5a55; --tf-fill:#eef1f5; --tf-fill-hover:#f0f2f6; --tf-off:#c3cbd7; --tf-sh:0 2px 4px rgba(16,35,64,.05), 0 8px 22px rgba(16,35,64,.10); /* W5. The card's navy rule and the shading an ACTIVE filter carries. */ --tf-navy:#14264a; --tf-setbg:#e8edf6; --tf-setbd:#27447c; --tf-band:#f6f7fa; --tf-cardbd:#e3e7ef; /* The subject palette: step 2's cards and the practice tournaments page (the tab and the public page alike, which loads this sheet). tokens.css is at its ratchet ceiling, so it lives here. */ --tf-sci-bg:#d8efe9; --tf-sci-fg:#0f5f58; --tf-his-bg:#fbe8d2; --tf-his-fg:#8a3f06; --tf-geo-bg:#dfe8fb; --tf-geo-fg:#1a3f9e; } /* ---------- head ---------- */ #screen-tournament .pk-head{ margin-bottom:22px; } #screen-tournament .pk-title, #catalog-tournaments .pk-title{ font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.25; margin:0 0 7px; } #screen-tournament .pk-substudent, #catalog-tournaments .pk-substudent{ font-size:14.5px; line-height:1.55; color:var(--ink2); max-width:62ch; } #screen-tournament .pk-cartbtn:focus{ outline:none; } #screen-tournament .pk-cartbtn:focus-visible{ outline:2px solid var(--tf-ring); outline-offset:2px; } #screen-tournament .pk-cartbtn:not(.empty){ background:var(--tf-fill); border-color:var(--tf-slate); color:var(--tf-slate); } #screen-tournament .pk-cartbtn:not(.empty) .pk-cartcount{ background:var(--tf-slate); } /* ---------- type: one quiet scale for the whole screen ---------- The wizard shell tracks its text out (letter-spacing on .wizard-container), which is what made this screen's small text look loose and hard to read. Inside the card: no tracking, --ink for what is read first, --ink2 for what supports it, nothing under 14px except the column heads. */ #screen-tournament, #screen-tournament button{ letter-spacing:normal; } #screen-tournament .pk-tourcard{ font-size:15px; line-height:1.5; color:var(--ink); } /* Case 1's way out from under the one card the family chose (#tourBrowseAll, 2026-09-30) */ #screen-tournament .pk-tourback{ margin:16px 0 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14.5px; line-height:1.5; color:var(--ink2); } #screen-tournament .pk-tourback .pk-changepack{ margin-left:0; } /* ---------- Change practice tournament / Choose a different student: the wizard's quiet button ---------- */ #screen-tournament .pk-changepack, #catalog-tournaments .pk-changepack, #packsTournamentsLine .pk-changepack{ -webkit-appearance:none; appearance:none; margin-left:auto; flex:0 0 auto; /* 40px, this screen's floor for a target: it was the one control under it */ background:var(--paper); border:1.5px solid var(--rule2); border-radius:9px; padding:7px 13px; min-height:40px; font:inherit; font-size:14.5px; font-weight:600; letter-spacing:normal; color:var(--tf-slate); cursor:pointer; white-space:nowrap; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease; } #screen-tournament .pk-changepack:active, #catalog-tournaments .pk-changepack:active, #packsTournamentsLine .pk-changepack:active{ transform:scale(.98); } #screen-tournament .pk-changepack:focus, #catalog-tournaments .pk-changepack:focus, #packsTournamentsLine .pk-changepack:focus{ outline:none; } #screen-tournament .pk-changepack:focus-visible{ outline:2px solid var(--tf-ring); outline-offset:2px; } #catalog-tournaments .pk-changepack:focus-visible{ outline:2px solid var(--tf-ring); outline-offset:2px; } #packsTournamentsLine .pk-changepack:focus-visible{ outline:2px solid var(--tf-ring); outline-offset:2px; } /* the Select Pack screen's way to the tournaments list (2026-10-11): it had no rule of its own and rendered as the browser's default button. Inline after its sentence, not pushed right. */ #packsTournamentsLine .pk-changepack{ margin-left:8px; } /* ---------- the shell: a wide canvas for the 3-up subject grid ---------- Mirrors pack_select.css's "packs step needs a wide canvas" rule. wizard_polish.css pins #wizard-mode to 860px with !important, so this matches its specificity and beats it with :has() (the single-column steps -- add a student, review, all set -- keep the narrow shell). tournament_flow.css loads last, so no !important war with pack_select.css's own copy. */ @media (min-width:1000px){ .container:has(#screen-tournament.active){ max-width:1320px !important; } #wizard-mode:has(#screen-tournament.active){ max-width:1240px !important; width:100% !important; } #wizard-mode:has(#screen-tournament.active) .wizard-content{ padding:36px 40px 30px !important; } } /* ---------- the card ---------- */ /* was 780px when the body was a single column of rows; the subject cards are a 3-up grid now, so the card takes the same width the pack grid takes (.container caps it at 1320px) */ #screen-tournament .pk-tourwrap{ max-width:1160px; } #screen-tournament .pk-tourcard{ padding:0; border-radius:12px; box-shadow:var(--tf-sh); transform:none; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; } #screen-tournament .pk-tourcard:hover{ transform:none; box-shadow:var(--tf-sh); } #screen-tournament .pk-tourcard:has(.pk-level[aria-pressed="true"]):not(.pk-card--incart){ border-color:var(--tf-slate); } #screen-tournament .pk-tourcard.pk-card--incart{ border-color:var(--go); box-shadow:0 10px 24px rgba(30,138,90,.12); } #screen-tournament .pk-tourcard > *{ padding-left:26px; padding-right:26px; } /* head: "Your pick" and the way out on one row, then the name, then Starts and Ends on a row each */ #screen-tournament .pk-tourcard-head{ padding-top:24px; padding-bottom:24px; background:var(--page); border-bottom:1px solid var(--rule); } #screen-tournament .pk-picklinerow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:0; background:none; border:0; } #screen-tournament .pk-picklinerow:empty{ display:none; } #screen-tournament .pk-pickline-text{ font-size:14.5px; font-weight:600; color:var(--ink2); } #screen-tournament .pk-name{ font-size:1.32rem; font-weight:700; line-height:1.28; letter-spacing:-.012em; color:var(--ink); margin:0 0 14px; overflow-wrap:anywhere; } #screen-tournament .pk-expiry{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:0; font-size:15px; font-weight:400; color:var(--ink); } #screen-tournament .pk-tourwhen{ display:grid; grid-template-columns:64px minmax(0,1fr); align-items:baseline; gap:12px; } #screen-tournament .pk-tourwhen-k{ font-size:14.5px; font-weight:500; color:var(--ink2); } #screen-tournament .pk-tourwhen-v{ font-weight:600; font-variant-numeric:tabular-nums; } #screen-tournament .pk-tourwhen-time{ margin-left:10px; font-weight:400; color:var(--ink2); white-space:nowrap; } #screen-tournament .pk-choices{ margin-top:0; padding-top:26px; } #screen-tournament .pk-choices-label{ display:block; margin:0 0 14px; font-size:16px; font-weight:600; color:var(--ink); } #screen-tournament .pk-choices-label > span:first-child{ display:block; } #screen-tournament .pk-choices-hint{ display:block; margin-top:5px; font-size:14.5px; font-weight:400; color:var(--ink2); max-width:60ch; } /* the pricing rule as figures: "Price per topic 1 level $30 2 levels $40 3 levels $50" */ #screen-tournament .pk-choices-label{ margin-bottom:16px; } /* the last thing before the cards: the widest gap on the screen, because it is the boundary between the rules of the thing and the thing itself */ #screen-tournament .pk-tierline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 26px; } #screen-tournament .pk-tierline[hidden]{ display:none; } #screen-tournament .pk-tierline-k{ margin-right:4px; font-size:14.5px; font-weight:500; color:var(--ink2); } #screen-tournament .pk-tier{ display:inline-flex; align-items:baseline; gap:7px; padding:5px 11px; border:1px solid var(--rule2); border-radius:999px; background:var(--page); font-size:14.5px; line-height:1.3; white-space:nowrap; } #screen-tournament .pk-tier-n{ color:var(--ink2); } #screen-tournament .pk-tier-p{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; } /* ---- the grid: a row per topic, a column per level ---- */ #screen-tournament .pk-tg{ --tg-cols:3; border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--paper); } #screen-tournament .pk-tg-row{ display:grid; grid-template-columns:minmax(0,1.25fr) repeat(var(--tg-cols),minmax(0,1fr)) 84px; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--rule); transition:background-color .18s ease; } #screen-tournament .pk-tg-row:first-child{ border-top:0; } #screen-tournament .pk-tg-head{ padding-top:10px; padding-bottom:10px; background:var(--page); align-items:end; } #screen-tournament .pk-tg-corner, #screen-tournament .pk-tg-pricehead{ font-size:14.5px; font-weight:600; color:var(--ink2); } #screen-tournament .pk-tg-pricehead{ text-align:right; } #screen-tournament .pk-tg-colhead{ display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.25; min-width:0; } #screen-tournament .pk-tg-colhead .pk-level-n{ font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; } #screen-tournament .pk-tg-colhead .pk-level-d{ font-size:14.5px; font-weight:400; color:var(--ink2); } #screen-tournament .pk-tg-row--on{ background-color:var(--tf-fill-hover); } #screen-tournament .pk-tg-topic{ display:flex; flex-direction:column; gap:3px; min-width:0; } #screen-tournament .pk-tg-name{ font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; } #screen-tournament .pk-tg-state{ align-self:flex-start; font-size:14.5px; font-weight:600; color:var(--ink2); line-height:1.4; } #screen-tournament .pk-tg-state--in{ display:inline-flex; align-items:center; gap:5px; color:var(--ink); } #screen-tournament .pk-tg-state--in::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--go); } #screen-tournament .pk-tg-state--edit{ color:var(--warn); } #screen-tournament .pk-tg-cell{ display:block; min-width:0; } #screen-tournament .pk-tg-price{ text-align:right; font-variant-numeric:tabular-nums; } #screen-tournament .pk-tg-amount{ font-size:16px; font-weight:700; color:var(--ink); } #screen-tournament .pk-tg-amount--none{ font-weight:400; color:var(--ink3); } /* a level this topic does not offer: a quiet hatch, never a button */ #screen-tournament .pk-tg-na{ display:block; height:48px; border-radius:10px; border:1px dashed var(--rule2); opacity:.7; background:repeating-linear-gradient(135deg, transparent 0 6px, var(--page) 6px 12px); } /* ---- the tick tile ---- */ #screen-tournament .pk-level{ -webkit-appearance:none; appearance:none; position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin:0; height:48px; padding:0 10px; border-radius:10px; background:var(--paper); border:1.5px solid var(--rule2); font:inherit; font-size:14.5px; font-weight:500; line-height:1; color:var(--ink); cursor:pointer; box-shadow:none; transition:border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease; } #screen-tournament .pk-level[aria-pressed="true"]{ border-color:var(--tf-slate); background-color:var(--tf-slate); color:var(--paper); font-weight:600; box-shadow:0 2px 6px rgba(20,32,48,.18); } #screen-tournament .pk-level:not(.owned):active{ transform:scale(.96); } #screen-tournament .pk-level:focus{ outline:none; } #screen-tournament .pk-level:focus-visible{ outline:2px solid var(--tf-ring); outline-offset:2px; } #screen-tournament .pk-level-txt{ white-space:nowrap; } #screen-tournament .pk-tick{ flex:0 0 auto; width:18px; height:18px; border-radius:6px; border:2px solid var(--rule2); background:var(--paper); box-sizing:border-box; background-repeat:no-repeat; background-position:center; background-size:0 0; transition:border-color .16s ease, background-color .16s ease, background-size .2s cubic-bezier(.2,.9,.3,1.4); } #screen-tournament .pk-tick::after{ content:none !important; } #screen-tournament .pk-level[aria-pressed="true"] .pk-tick{ border-color:var(--paper); background-color:var(--paper); background-size:12px 12px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* the tile that was just ticked answers the tap: one short settle, not a loop */ @keyframes pkLevelPop{ 0%{ transform:scale(.94); } 60%{ transform:scale(1.03); } 100%{ transform:scale(1); } } #screen-tournament .pk-level--pop{ animation:pkLevelPop .24s cubic-bezier(.2,.8,.2,1); } /* a level the student already holds: ticked in grey, not interactive */ #screen-tournament .pk-level.owned{ background:var(--page); border-color:var(--rule); color:var(--ink2); cursor:not-allowed; opacity:1; box-shadow:none; } #screen-tournament .pk-level.owned .pk-tick{ border-color:var(--ink3); background-color:var(--ink3); background-size:12px 12px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } #screen-tournament .pk-held-note{ margin:18px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink2); } /* the card's last row now that the foot is hidden, so it carries the bottom padding too */ #screen-tournament .pk-desc{ margin:30px 0 0; padding-top:20px; padding-bottom:26px; border-top:1px solid var(--rule); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 34px; } #screen-tournament .pk-desc li{ margin:0; padding-left:26px; font-size:15px; line-height:1.6; color:var(--ink2); } #screen-tournament .pk-desc li::before{ left:3px; top:.42em; } /* ---- foot: the pack card's pair ---- */ #screen-tournament .pk-foot{ margin-top:22px; padding-top:18px; padding-bottom:20px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; } #screen-tournament .pk-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; } #screen-tournament .pk-action, #catalog-tournaments .pk-action{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 20px; border-radius:10px; background:var(--tf-slate); border:1px solid var(--tf-slate); color:var(--paper) !important; font-size:15px; font-weight:600; letter-spacing:.01em; white-space:nowrap; text-decoration:none; box-shadow:0 2px 5px rgba(20,32,48,.16); transition:background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .12s ease; } #screen-tournament .pk-action:active:not([disabled]), #catalog-tournaments .pk-action:active{ transform:translateY(0) scale(.985); box-shadow:0 2px 6px rgba(20,32,48,.20); } #screen-tournament .pk-action[disabled]{ background:var(--tf-off); border-color:transparent; color:var(--paper) !important; box-shadow:none; transform:none; cursor:not-allowed; } #screen-tournament .pk-action:focus, #catalog-tournaments .pk-action:focus{ outline:none; } #screen-tournament .pk-action:focus-visible{ outline:2px solid var(--tf-ring); outline-offset:2px; } #catalog-tournaments .pk-action:focus-visible{ outline:2px solid var(--tf-ring); outline-offset:2px; } #screen-tournament .pk-action[hidden], #screen-tournament .pk-remove[hidden]{ display:none !important; } #screen-tournament .pk-foot[hidden]{ display:none !important; } /* In cart: a state, not a button. --go is 3.86:1 on its tint, so the words stay --ink and the tick carries the green */ #screen-tournament .pk-action.in-cart{ background:var(--go-tint); border-color:var(--go); color:var(--ink) !important; box-shadow:none; cursor:default; gap:8px; } #screen-tournament .pk-action.in-cart::before{ content:""; width:16px; height:16px; border-radius:50%; background:var(--go) center/10px 10px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } #screen-tournament .pk-action.owned-lbl{ background:none; border-color:transparent; box-shadow:none; color:var(--ink2) !important; padding-left:0; cursor:default; } #screen-tournament .pk-remove, #catalog-tournaments .pk-action--quiet{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 16px; border-radius:10px; background:var(--paper); border:1.5px solid var(--rule2); color:var(--tf-slate) !important; font-size:15px; font-weight:600; box-shadow:none; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease; } #screen-tournament .pk-remove:focus{ outline:none; box-shadow:none; } #screen-tournament .pk-remove:focus-visible{ outline:2px solid var(--tf-ring); outline-offset:2px; } #screen-tournament .pk-price{ margin-left:auto; text-align:right; font-variant-numeric:tabular-nums; line-height:1.1; } #screen-tournament .pk-price-amount{ display:block; font-size:1.6rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; } #screen-tournament .pk-price-unit{ display:block; margin-top:3px; font-size:14.5px; font-weight:500; color:var(--ink2); white-space:nowrap; } #screen-tournament .pk-price-hint{ margin-top:0; font-weight:400; } /* ---------- pointer-only hover ---------- */ @media (hover:hover) and (pointer:fine){ #screen-tournament .pk-level:not(.owned):hover:not([aria-pressed="true"]){ border-color:var(--tf-slate); background-color:var(--tf-fill-hover); transform:translateY(-1px); box-shadow:0 3px 8px rgba(31,52,80,.10); } #screen-tournament .pk-level:not(.owned):hover:not([aria-pressed="true"]) .pk-tick{ border-color:var(--tf-slate); } #screen-tournament .pk-level[aria-pressed="true"]:hover{ background-color:var(--tf-slate-deep); border-color:var(--tf-slate-deep); } #screen-tournament .pk-tg-row:not(.pk-tg-head):not(.pk-tg-row--on):hover{ background-color:var(--page); } #screen-tournament .pk-action:hover:not([disabled]):not(.in-cart):not(.owned-lbl), #catalog-tournaments .pk-action:hover:not(.pk-action--quiet){ background:var(--tf-slate-deep); border-color:var(--tf-slate-deep); transform:translateY(-2px); box-shadow:0 9px 20px rgba(20,32,48,.26); } #screen-tournament .pk-remove:hover, #screen-tournament .pk-changepack:hover, #catalog-tournaments .pk-changepack:hover, #packsTournamentsLine .pk-changepack:hover, #catalog-tournaments .pk-action--quiet:hover{ background:var(--page); border-color:var(--tf-slate); transform:translateY(-1px); box-shadow:0 3px 10px rgba(20,32,48,.10); } } /* ---------- narrower screens ---------- */ @media (max-width:700px){ #screen-tournament .pk-tourcard > *{ padding-left:16px; padding-right:16px; } #screen-tournament .pk-desc{ grid-template-columns:minmax(0,1fr); gap:12px; } } @media (max-width:560px){ #screen-tournament .pk-head{ flex-wrap:wrap; gap:12px; } #screen-tournament .pk-title{ font-size:20px; } #screen-tournament .pk-changepack, #catalog-tournaments .pk-changepack{ margin-left:0; min-height:40px; } /* on a phone a topic is two lines: its name, state and price, then its level tiles across the full width, each still carrying its own label, so nothing is squeezed into a 70px name column (where "Science" broke mid-word) and the head row is not needed */ /* the price tiers: label on its own line, then three equal chips, figure under its label */ #screen-tournament .pk-tierline{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } #screen-tournament .pk-tierline-k{ grid-column:1 / -1; margin:0; } #screen-tournament .pk-tier{ flex-direction:column; align-items:center; gap:1px; padding:7px 4px; border-radius:12px; } #screen-tournament .pk-tg-head{ display:none; } #screen-tournament .pk-tg-row{ position:relative; grid-template-columns:repeat(var(--tg-cols),minmax(0,1fr)); gap:10px 8px; padding:14px 12px; } #screen-tournament .pk-tg-row:nth-child(2){ border-top:0; } #screen-tournament .pk-tg-topic{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding-right:64px; } #screen-tournament .pk-tg-name{ overflow-wrap:normal; } #screen-tournament .pk-tg-price{ position:absolute; top:13px; right:12px; } #screen-tournament .pk-tg-amount--none{ display:none; } #screen-tournament .pk-level{ padding:0 4px; gap:6px; font-size:14.5px; } #screen-tournament .pk-tourwhen{ grid-template-columns:52px minmax(0,1fr); gap:10px; } #screen-tournament .pk-tourwhen-time{ display:block; margin-left:0; } #screen-tournament .pk-picklinerow{ flex-wrap:wrap; } #screen-tournament .pk-foot{ flex-direction:column-reverse; align-items:stretch; gap:14px; } #screen-tournament .pk-price{ margin-left:0; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; text-align:left; } #screen-tournament .pk-price-unit{ margin-top:0; white-space:normal; } #screen-tournament .pk-actions{ display:grid; grid-template-columns:minmax(0,1fr); } #screen-tournament .pk-actions:has(.pk-remove:not([hidden])){ grid-template-columns:minmax(0,1fr) auto; } #screen-tournament .pk-action{ width:100%; } } /* 320px is the only width where the window wraps whichever way it is set (measured), so it is the only width where the label takes its own line -- and the range stays whole under it */ @media (max-width:340px){ #screen-tournament .pk-subjcard-when .pk-subjcard-k{ display:block; margin:0 0 1px; } } @media (max-width:400px){ /* three tiles share about 250px: the tick sits above its label instead of beside it, so the label never touches the tile's edge */ #screen-tournament .pk-level{ flex-direction:column; height:60px; gap:5px; padding:0 2px; } #screen-tournament .pk-tg-na{ height:60px; } /* the wizard's bottom bar, both kinds of line: at 320px "1 item · $40" broke over three lines and Continue ran 4px past the screen's edge */ #wizardBar.pk-bar{ padding-left:12px; padding-right:12px; gap:8px; } #wizardBar .pk-bar-sum{ flex:1 1 0; min-width:0; font-size:14px; line-height:1.3; } #wizardBar .pk-bar-actions{ flex:0 0 auto; gap:6px; } #wizardBar .pk-bar-actions .btn{ min-width:0; padding-left:14px; padding-right:14px; } #wizardBar .pk-bar-actions .pk-bar-continue{ padding-left:20px; padding-right:20px; } } /* 320px (E2E 2026-10-05): "1 item · $30" still took two lines and the bar a third of the screen */ @media (max-width:360px){ #wizardBar .pk-bar-sum{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13.5px; } #wizardBar .pk-bar-actions .btn{ padding-left:11px; padding-right:11px; } #wizardBar .pk-bar-actions .pk-bar-continue{ padding-left:14px; padding-right:14px; } } @media (prefers-reduced-motion:reduce){ #screen-tournament *, #catalog-tournaments *{ transition:none !important; animation:none !important; } #screen-tournament .pk-level:hover, #screen-tournament .pk-action:hover, #catalog-tournaments .pk-action:hover{ transform:none !important; } } /* ========================================================================== The wizard on a phone (owner 2026-09-21, measured at 375x667 and 320x568) ========================================================================== */ /* The "Best Experience ... laptop" notice was position:fixed under the navbar. On a phone that is 60 to 85px of every screen for the whole visit, content slid underneath it while scrolling, and at 320px (three lines) it covered the top of the stepper. It is in the page's flow now, so it scrolls away, and the body reserves room for the navbar only. Inside the wizard it is not shown: it is a note about the study tool, not about registering. */ @media (max-width:991.98px){ body{ padding-top:59px; } body.qv-in-wizard .qv-phone-notice{ display:none; } } /* Student step: the avatar cards and their status pills are gone (W2), and with them the rules that kept a long name or a long "Registered" pill from widening a column. The radio cards that replaced them are one full-width column that can shrink, with a name that wraps -- see .pk-radio-card in pack_select.css. These rules were scoped to #screen-choose, which out-specified that one and held the list at two columns, so they are deleted rather than out-specified in turn. */ /* Add-student form heading: 1.8rem inline wrapped to two heavy lines on a phone */ .wz-formtitle{ margin:0 0 20px; text-align:center; font-size:1.8rem; line-height:1.2; } @media (max-width:560px){ .wz-formtitle{ font-size:1.35rem; line-height:1.25; margin-bottom:16px; text-align:left; } } /* W15: the "Registering for ..." note's rules were scoped to #screen2, the separate add-student screen W3 folded into the choose-student card. .pk-changepack itself is still live elsewhere. */ /* Review: a student's name, grade and total were three columns; at 320px the name broke over two lines around the grade. Name over grade, total beside them. */ @media (max-width:480px){ #screen-review .pk-review-groupwho{ flex-direction:column; align-items:flex-start; gap:1px; } #screen-review .pk-review-line{ flex-wrap:wrap; } } /* The step bar on "You're all set", on a phone. Under 640px the bar keeps one step open (the ACTIVE one grows to fill the pill, with its label) and folds the rest to their number. On the completion screen nothing is active, every step is done, so all three folded and sat in the left 110px of a 300px pill that looked empty and broken. With no active step there is nothing to give the room to: share it, number over label, all three done. Same rule for both kinds of order. */ @media (max-width:640px){ #wizard-mode .pk-stepper:not(:has(.step.active)){ justify-content:space-between; } #wizard-mode .pk-stepper:not(:has(.step.active)) .step{ flex:1 1 0 !important; min-width:0; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px !important; padding:8px 4px !important; text-align:center; } #wizard-mode .pk-stepper:not(:has(.step.active)) .step .step-label{ display:block; font-size:12px !important; line-height:1.2; font-weight:600; white-space:normal; text-align:center; overflow-wrap:anywhere; } #wizard-mode .pk-stepper:not(:has(.step.active)) .pk-stepper-pill{ display:none; } } /* ========================================================================== Study pack cards: a choice the student already holds (owner 2026-09-21) ========================================================================== */ /* "Has it" / "In Pro" was a 10.5px pale green (or blue) label on a chip that otherwise looked exactly like a buyable one: white, with an empty ring. On an iPhone SE the chip is about 120px wide, so the label wrapped to "Has / it" beside the name and was, in practice, not there. A held choice now LOOKS held: a quiet ground, a grey tick where the ring was, and the label at a readable size in --ink2 (--go and --action are 3.9:1 and lower on this ground; tokens.css keeps them for ticks and borders). The label takes its own line inside the chip when the two do not fit. */ #screen-packs .pk-choice[data-owned], #screen-packs .pk-set[data-owned], #screen-packs .pk-choice[data-covered], #screen-packs .pk-set[data-covered]{ flex-wrap:wrap; row-gap:2px; background:var(--page); border-color:var(--rule); color:var(--ink2); font-weight:500; cursor:not-allowed; opacity:1; transform:none; box-shadow:none; } #screen-packs .pk-choice[data-owned]::before, #screen-packs .pk-set[data-owned]::before, #screen-packs .pk-choice[data-covered]::before, #screen-packs .pk-set[data-covered]::before{ border-color:var(--ink3); background-color:var(--ink3); background-repeat:no-repeat; background-position:center; background-size:11px 11px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } #screen-packs .pk-choice[data-owned]::after, #screen-packs .pk-set[data-owned]::after, #screen-packs .pk-choice[data-covered]::after, #screen-packs .pk-set[data-covered]::after{ margin-left:auto; padding-left:6px; font-size:12px; line-height:1.3; font-weight:600; letter-spacing:0; color:var(--ink2); white-space:nowrap; } @media (max-width:640px){ /* two lines inside one chip: a full pill radius would pinch the second line */ #screen-packs .pk-choice[data-owned], #screen-packs .pk-set[data-owned], #screen-packs .pk-choice[data-covered], #screen-packs .pk-set[data-covered]{ border-radius:14px; } } /* a card with nothing left to choose says so where the button was */ #screen-packs .pk-action.owned-lbl{ background:none; border-color:transparent; box-shadow:none; color:var(--ink2) !important; padding-left:0; cursor:default; } /* ========================================================================== Parent dashboard: the student card (owner 2026-09-30, Parent Dashboard Rework) Markup: templates/parent_wizard/_dashboard.html; words: app.student_card. ONE complete card per student: who they are and how they sign in, every pack, every practice tournament level, then four equal actions. Each card keeps its OWN height; nothing is folded away behind a second view. One type scale, the --sc-fs-* properties on #panel-students below: the name, what is read, a line's facts, then the section labels and badges. ========================================================================== */ #panel-students{ --sc-slate:var(--nav); --sc-slate-deep:#22303f; --sc-ring:#df5a55; --sc-sh:0 1px 2px rgba(16,35,64,.06), 0 6px 18px rgba(16,35,64,.09); --sc-sh-hover:0 2px 4px rgba(16,35,64,.08), 0 14px 30px rgba(16,35,64,.14); /* the card grid, from the space it has (owner 2026-10-01: 320px tracks left one or two students in a third of the row each). At most --sc-cols across; a card never narrower than --sc-min (or the whole row, on a phone). No breakpoints: the container decides. */ --sc-gap:clamp(14px, 2vw, 22px); --sc-min:22rem; --sc-cols:2; /* the action buttons' outline: visible on white (--rule2 was a 1.5px line no one could see) */ --sc-act-line:var(--ink3); /* one type scale for the cards, in rem so the browser's own text size applies (owner 2026-10-01: 12-14.5px read as too small). Name, then what is read, then a line's facts, then the section labels and badges. */ --sc-fs-name:1.3rem; --sc-fs-avatar:1.25rem; --sc-fs-read:1rem; --sc-fs-fact:.9375rem; --sc-fs-label:.875rem; --sc-fs-badge:.8125rem; --sc-fs-code:.875rem; --sc-fs-act:.9375rem; --sc-fs-act-sm:.875rem; } #panel-students .children-grid{ align-items:start; gap:var(--sc-gap); grid-template-columns:repeat(auto-fill, minmax(min(100%, max(var(--sc-min), (100% - (var(--sc-cols) - 1) * var(--sc-gap)) / var(--sc-cols))), 1fr)); } /* a card may shrink to its column; nothing inside it is wider than the words it wraps */ #panel-students .children-grid > *{ min-width:0; } #panel-students .child-card{ display:flex; flex-direction:column; gap:0; padding:22px 22px 20px; background:var(--paper); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--sc-sh); transform:none; transition:box-shadow .22s ease, border-color .22s ease; } #panel-students .child-card:hover{ transform:none; border-color:var(--rule2); box-shadow:var(--sc-sh-hover); } /* ---- header: who, and how they sign in ---- */ #panel-students .student-header{ display:flex; align-items:center; gap:14px; margin:0; padding:0 0 16px; cursor:default; transform:none; } #panel-students .child-avatar{ flex:0 0 auto; width:46px; height:46px; margin:0; border-radius:50%; display:grid; place-items:center; background:var(--sc-slate); color:var(--paper); font-size:var(--sc-fs-avatar); font-weight:600; box-shadow:none; } #panel-students .student-id{ flex:1 1 12rem; min-width:0; } #panel-students .student-id h3{ margin:0; font-size:var(--sc-fs-name); font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--ink); overflow-wrap:anywhere; } #panel-students .student-meta{ margin:2px 0 0; font-size:var(--sc-fs-fact); line-height:1.5; color:var(--ink2); } /* the school line (owner 2026-10-20): School · City, State; empty and hidden until Student details has one */ #panel-students .sc-school{ margin:2px 0 0; font-size:var(--sc-fs-fact); line-height:1.5; color:var(--ink2); overflow-wrap:anywhere; } #panel-students .sc-school[hidden]{ display:none; } #panel-students .sc-uname-wrap{ white-space:nowrap; } #panel-students .sc-uname{ margin:0 2px 0 3px; padding:1px 7px; border-radius:6px; background:var(--tint); color:var(--action-deep); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--sc-fs-code); } #panel-students .sc-copy{ display:inline-grid; place-items:center; width:24px; height:24px; margin:0; padding:0; vertical-align:middle; font-size:var(--sc-fs-fact); border:0; border-radius:8px; background:transparent; color:var(--ink3); cursor:pointer; transition:background-color .15s ease, color .15s ease; } #panel-students .sc-copy{ position:relative; } #panel-students .sc-copy::after{ content:""; position:absolute; inset:-10px; } /* a 44px target around a 24px icon */ #panel-students .sc-copy.is-done{ color:var(--go); } /* the word is for a screen reader until it says something: "Copied", or how to copy by hand */ #panel-students .sc-copy-t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #panel-students .sc-copy.is-done, #panel-students .sc-copy.is-failed{ width:auto; padding:0 6px; gap:4px; display:inline-flex; align-items:center; } #panel-students .sc-copy.is-done .sc-copy-t, #panel-students .sc-copy.is-failed .sc-copy-t{ position:static; width:auto; height:auto; overflow:visible; clip:auto; font:600 var(--sc-fs-badge)/1 var(--sans); } #panel-students .sc-copy.is-failed{ color:var(--warn); } #panel-students .sc-copy:focus{ outline:none; } #panel-students .sc-copy:focus-visible{ outline:2px solid var(--sc-ring); outline-offset:1px; } /* ---- a section: its label, then its items ---- */ #panel-students .sc-sec{ margin:0; padding:14px 0 16px; border-top:1px solid var(--rule); } #panel-students .sc-k{ margin:0 0 10px; font-size:var(--sc-fs-label); font-weight:600; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); } #panel-students .sc-n{ font-weight:600; } #panel-students .sc-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } #panel-students .sc-item{ margin:0; padding:11px 13px; border:1px solid var(--rule); border-radius:12px; background:var(--paper); min-width:0; } #panel-students .sc-item-top{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-width:0; } #panel-students .sc-item-t{ min-width:0; font-size:var(--sc-fs-read); font-weight:600; line-height:1.35; color:var(--ink); overflow-wrap:anywhere; } #panel-students .sc-item-l{ margin:3px 0 0; font-size:var(--sc-fs-fact); line-height:1.45; color:var(--ink2); overflow-wrap:anywhere; } #panel-students .sc-item-l--when{ color:var(--ink); } /* a pack row's foot: its date line, then its one action at the line's end */ #panel-students .sc-item-foot{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px; min-width:0; } #panel-students .sc-item-foot .sc-item-l{ flex:1 1 auto; min-width:0; } #panel-students .sc-item-foot .sc-link{ min-height:28px; } #panel-students .sc-empty{ margin:0; padding:11px 13px; border:1px dashed var(--rule2); border-radius:12px; background:var(--page); font-size:var(--sc-fs-read); line-height:1.45; color:var(--ink2); } /* badges: one word each; coral is kept for Live, the one thing happening now */ #panel-students .sc-badge{ flex:0 0 auto; padding:2px 9px; border-radius:999px; font-size:var(--sc-fs-badge); font-weight:600; line-height:1.45; white-space:nowrap; background:var(--page); color:var(--ink2); border:1px solid var(--rule); } #panel-students .sc-badge--live{ background:#fdeceb; color:#b3372f; border-color:transparent; } #panel-students .sc-badge--finished{ background:var(--go-tint); color:var(--go); border-color:transparent; } #panel-students .sc-badge--upcoming{ background:var(--tint); color:var(--action-deep); border-color:transparent; } #panel-students .sc-badge--trial, #panel-students .sc-badge--soon{ background:var(--warn-tint); color:var(--warn); border-color:transparent; } /* the row's one link sits at the row's end */ #panel-students .sc-link{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0 2px; border:0; background:none; font:600 var(--sc-fs-fact)/1.3 var(--sans); color:var(--action-deep); text-decoration:none; white-space:nowrap; cursor:pointer; } /* a 44px tap area around the link, without moving the row (E2E 2026-10-05: 32px, "Get this pack" 28px) */ #panel-students .sc-link{ position:relative; } #panel-students .sc-link::after{ content:""; position:absolute; left:-6px; right:-6px; top:50%; height:44px; transform:translateY(-50%); } #panel-students .sc-link:focus{ outline:none; } #panel-students .sc-link:focus-visible{ outline:2px solid var(--sc-ring); outline-offset:2px; border-radius:6px; } /* rounds done, one segment per round */ #panel-students .sc-bar{ display:flex; gap:4px; max-width:160px; margin:8px 0 2px; } #panel-students .sc-seg{ flex:1 1 0; height:5px; border-radius:3px; background:var(--rule); } #panel-students .sc-seg.is-done{ background:var(--sc-slate); } /* ---- actions: each section's buttons right under its list, two equal across (owner 2026-10-01: a parent never scrolls to find the button for what they are looking at); a lone one spans ---- */ #panel-students .sc-actions{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:minmax(48px, auto); gap:8px; margin:12px 0 0; padding:0; } #panel-students .sc-actions > .sc-act:only-child{ grid-column:1 / -1; } #panel-students .sc-act{ display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin:0; padding:8px 10px; border-radius:12px; background:var(--paper); border:1.5px solid var(--sc-act-line); color:var(--sc-slate); font:600 var(--sc-fs-act)/1.3 var(--sans); letter-spacing:0; text-align:center; text-decoration:none; white-space:normal; box-shadow:none; cursor:pointer; transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .12s ease; } #panel-students .sc-act--primary{ background:var(--sc-slate); border-color:var(--sc-slate); color:var(--paper); box-shadow:0 2px 5px rgba(20,32,48,.16); } #panel-students .sc-soon{ cursor:default; border-style:dashed; font-weight:500; color:var(--ink2); } /* Manage login: the header's end, beside how the student signs in; under it when there is no room */ #panel-students .student-header{ flex-wrap:wrap; } #panel-students .sc-act--login{ flex:0 0 auto; width:auto; min-height:40px; padding:6px 14px; } #panel-students .sc-act:active{ transform:scale(.98); } #panel-students .sc-act:focus{ outline:none; box-shadow:none; } #panel-students .sc-act:focus-visible{ outline:2px solid var(--sc-ring); outline-offset:2px; } /* ---- add a student: the same lift, dashed so it reads as an empty slot ---- */ #panel-students .add-child-card{ min-height:150px; border:1.5px dashed var(--rule2); border-radius:16px; background:var(--page); color:var(--sc-slate); box-shadow:none; transition:border-color .18s ease, background-color .18s ease, box-shadow .2s ease, transform .15s ease; } #panel-students .add-child-card i, #panel-students .add-child-card p{ color:var(--sc-slate); } #panel-students .add-child-card p{ font-size:var(--sc-fs-read); font-weight:600; margin:8px 0 0; } @media (hover:hover) and (pointer:fine){ #panel-students .sc-copy:hover{ background:var(--page); color:var(--ink); } #panel-students .sc-link:hover{ color:var(--sc-slate); text-decoration:underline; text-underline-offset:3px; } #panel-students .sc-act:hover{ background:var(--page); border-color:var(--sc-slate); color:var(--sc-slate); box-shadow:0 3px 10px rgba(20,32,48,.10); transform:translateY(-1px); } #panel-students .sc-act--primary:hover{ background:var(--sc-slate-deep); border-color:var(--sc-slate-deep); color:var(--paper); box-shadow:0 8px 18px rgba(20,32,48,.24); } #panel-students .sc-soon:hover{ background:var(--paper); border-color:var(--rule2); color:var(--ink2); box-shadow:none; transform:none; } #panel-students .add-child-card:hover{ border-color:var(--sc-slate); background:var(--paper); box-shadow:var(--sc-sh); transform:translateY(-2px); } } @media (prefers-reduced-motion:reduce){ #panel-students .child-card, #panel-students .sc-act, #panel-students .sc-copy, #panel-students .add-child-card{ transition:none; } #panel-students .sc-act:hover, #panel-students .add-child-card:hover{ transform:none; } } /* (a tablet's two-across rule is gone: the grid above sizes itself from its container) */ /* a phone: one column; the actions stay an even two by two, 44px tall (the mock's phone 2) */ @media (max-width:420px){ #panel-students .child-card{ padding:16px 14px 14px; } #panel-students .sc-actions{ grid-auto-rows:minmax(44px, auto); } #panel-students .sc-act{ font-size:var(--sc-fs-act-sm); padding:8px 6px; } } /* ---------- the All practice tournaments tab (owner 2026-09-24 polish; still a table) ---------- Palette: slate (--tf-slate / --ink) for text and the primary, coral only as the live marker, green for an open registration; hairline rules; no blue. Three layouts by width: >= 1200px six columns (they need ~970px; the 960px container under xl cannot hold them); 700-1199 two columns: the name block with its window / levels / price lines, the action at the right; < 700 one stacked block per row, the action full width under it (iPhone SE included). */ /* the self-managed student's way back: a crumb line above the title, not a box of its own */ #catalog-tournaments .pk-tourback{ margin:0 0 14px; } #catalog-tournaments .pk-tourback .pk-changepack{ margin-left:0; } #catalog-tournaments .pk-tourback .pk-changepack::before{ content:"\2190"; margin-right:7px; } /* ---- the data table (owner 2026-10-01): the mock's filters and sortable columns, set like the IAC registration app's one table (apps/web/src/ui/table.tsx + globals.css .table-toolbar / .table-wrap): a toolbar card, a count line, then the table in its own card. Behaviour: static/js/qv_table.js. Sizes come from the page's tokens and rem; nothing assumes a screen. ---- */ #catalog-tournaments .qv-dt{ --dt-pad-y:.9rem; --dt-pad-x:1rem; --dt-radius:12px; display:flex; flex-direction:column; gap:12px; } #catalog-tournaments .qv-dt-toolbar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; padding:12px 14px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--dt-radius); } /* IAC's toolbar-filter: the caption ABOVE its control, every control the same height */ #catalog-tournaments .qv-dt-f{ display:flex; flex-direction:column; gap:4px; min-width:0; max-width:100%; margin:0; } #catalog-tournaments .qv-dt-cap{ font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink2); } #catalog-tournaments .qv-dt-input, #catalog-tournaments .qv-dt-select{ box-sizing:border-box; min-height:40px; max-width:100%; padding:8px 12px; border:1px solid var(--rule2); border-radius:10px; background-color:var(--paper); font:500 .92rem var(--sans); color:var(--ink); } /* search leads the bar and is sized for a word or two, not the whole row (IAC: 240px) */ #catalog-tournaments .qv-dt-f--search .qv-dt-input{ width:15rem; } #catalog-tournaments .qv-dt-select{ width:auto; min-width:11rem; -webkit-appearance:none; appearance:none; padding-right:32px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a889c'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; } #catalog-tournaments .qv-dt-input:focus, #catalog-tournaments .qv-dt-select:focus, #catalog-tournaments .qv-msel summary:focus-visible{ outline:none; border-color:var(--nav); box-shadow:0 0 0 3px rgba(44,62,80,.15); } /* a control holding rows back wears the "on" face (IAC .select.filter-on) */ #catalog-tournaments .qv-dt-select.is-on{ border-color:var(--nav); background-color:var(--page); font-weight:600; } /* the Month multi-select (IAC MselFilter): a select-looking face over a checkbox panel */ #catalog-tournaments .qv-msel{ position:relative; } #catalog-tournaments .qv-msel summary{ display:flex; align-items:center; list-style:none; white-space:nowrap; } #catalog-tournaments .qv-msel summary::-webkit-details-marker{ display:none; } #catalog-tournaments .qv-msel summary b{ overflow:hidden; text-overflow:ellipsis; font-weight:inherit; } #catalog-tournaments .qv-msel-panel{ position:absolute; z-index:20; top:calc(100% + 4px); left:0; min-width:100%; max-height:16rem; overflow-y:auto; padding:8px 12px; background:var(--paper); border:1px solid var(--rule2); border-radius:10px; box-shadow:var(--tf-sh); } #catalog-tournaments .qv-msel-bulk{ display:flex; flex-wrap:wrap; gap:8px; padding-bottom:6px; margin-bottom:4px; border-bottom:1px solid var(--rule); } #catalog-tournaments .qv-msel-btn{ min-height:32px; padding:0 10px; border:1px solid var(--rule2); border-radius:8px; background:var(--paper); font:600 .90625rem var(--sans); color:var(--nav); cursor:pointer; } #catalog-tournaments .qv-msel-opt{ display:flex; align-items:center; gap:8px; min-height:36px; white-space:nowrap; font-size:.90625rem; color:var(--ink); cursor:pointer; } #catalog-tournaments .qv-msel-opt input{ width:16px; height:16px; margin:0; accent-color:var(--nav); } #catalog-tournaments .qv-msel-btn:focus-visible, #catalog-tournaments .qv-msel-opt input:focus-visible{ outline:2px solid var(--nav); outline-offset:2px; } /* ---- the title band (templates/_pt_page.html, the tab and the public page alike). Owner 2026-10-01: a proper title, colour, and the table in view without a scroll. So the page's title, the intro, "How it works" and the three levels are ONE slate block: the points run two across as a checklist (heading run into its detail), the levels card sits at the band's right, and the filters follow. ---- */ #catalog-tournaments .pt-hero{ --hero-fg:var(--paper); --hero-dim:rgba(255,255,255,.80); --hero-py:clamp(18px, 2vw, 24px); --hero-px:clamp(18px, 2.4vw, 30px); position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr); gap:20px 32px; margin:0 0 14px; padding:var(--hero-py) var(--hero-px); /* the home page's hero (iac-home.css .hero): its blue-slate gradient and its top-right coral corner (the bottom-left one would sit under the checklist's words) */ background:linear-gradient(160deg, #48628c 0%, #425b7e 52%, #3a5170 100%); color:var(--hero-fg); /* the border frames the white levels panel too: from 1000px it fills the band's right edge, and without a line around it its top and right ran into the light page (owner 2026-10-20) */ border:1px solid #3a5170; border-radius:12px; box-shadow:var(--tf-sh); } #catalog-tournaments .pt-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cpath d='M1200 0 L930 0 C1040 60 1120 110 1200 170 Z' fill='%23e86e6c'/%3E%3Cpath d='M1200 0 L1060 0 C1120 40 1160 70 1200 100 Z' fill='%23f0837e' opacity='.45'/%3E%3C/svg%3E") center/100% 100% no-repeat; } #catalog-tournaments .pt-hero[hidden]{ display:none; } @media (min-width:1000px){ #catalog-tournaments .pt-hero{ grid-template-columns:minmax(0, 1fr) minmax(19rem, 24rem); align-items:start; } } #catalog-tournaments .pt-hero-main{ position:relative; z-index:1; min-width:0; } #catalog-tournaments .pt-hero-title{ margin:0 0 6px; font-family:var(--brand); font-weight:400 !important; font-size:clamp(1.6rem, 1.25rem + 1vw, 2.1rem); font-weight:700; letter-spacing:0; line-height:1.15; color:var(--hero-fg); text-align:left; text-wrap:balance; } #catalog-tournaments .pt-about{ margin:0; } #catalog-tournaments .pt-hero .pt-about-intro{ margin:0 0 14px; font-size:1rem; line-height:1.55; color:var(--hero-dim); max-width:none; } #catalog-tournaments .pt-hero .pt-about-h{ margin:0 0 8px; font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; text-align:left; color:var(--hero-dim); } #catalog-tournaments .pt-about-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px 32px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } #catalog-tournaments .pt-about-list li{ position:relative; margin:0; padding:0 0 0 30px; font-size:.9375rem; line-height:1.45; color:var(--hero-dim); } /* a coral disc with a white tick */ #catalog-tournaments .pt-about-list li::before{ content:""; position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:50%; background:var(--vidya) center/12px 12px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } #catalog-tournaments .pt-about-list b{ font-weight:700; color:var(--hero-fg); } /* owner 2026-10-20: the one way to the FAQs, under How it works -- body size, dimmed, the link itself in full white */ #catalog-tournaments .pt-hero .pt-about-faq{ margin:18px 0 0; font-size:.9375rem; color:var(--hero-dim); } #catalog-tournaments .pt-hero .pt-about-faq a{ color:var(--hero-fg); font-weight:600; text-decoration:underline; text-underline-offset:3px; } #catalog-tournaments .pt-hero .pt-about-faq a:hover{ text-decoration-thickness:2px; } #catalog-tournaments .pt-hero .pt-about-faq a:focus-visible{ outline:2px solid var(--hero-fg); outline-offset:3px; border-radius:2px; } /* the levels: a white card at the band's right. From 1000px it is the band's whole right side (owner 2026-10-20: flush with the band's corner and edges, no slate margin around it); the band's own radius and overflow round its outer corners. Below 1000px it is a card under the checklist. */ #catalog-tournaments .pt-hero-levels{ position:relative; z-index:1; padding:16px 18px; background:var(--paper); color:var(--ink); border-radius:12px; box-shadow:0 8px 24px rgba(10,20,35,.22); } @media (min-width:1000px){ #catalog-tournaments .pt-hero-levels{ align-self:stretch; margin:calc(-1 * var(--hero-py)) calc(-1 * var(--hero-px)) calc(-1 * var(--hero-py)) 0; padding:var(--hero-py) 24px; border-radius:0; box-shadow:-10px 0 28px rgba(10,20,35,.18); } } #catalog-tournaments .pt-hero-levels .pt-about-h{ margin:0 0 4px; font-family:var(--brand); font-size:1.25rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); } #catalog-tournaments .ptp-levels-note{ margin:0 0 8px; font-size:.90625rem; line-height:1.45; color:var(--ink2); } /* owner 2026-10-20: one block per level -- the badge, then who it is for, one group per line, a rule between levels -- so a level's groups never run into the next level's */ #catalog-tournaments .ptp-levels{ list-style:none; margin:4px 0 0; padding:0; } #catalog-tournaments .ptp-level{ margin:0; padding:12px 0; border-top:1px solid var(--rule); } #catalog-tournaments .ptp-level:last-child{ padding-bottom:6px; } /* each level a coral-tinted badge, as the home page's icon tiles */ #catalog-tournaments .ptp-lvl{ display:inline-block; padding:3px 11px; border-radius:999px; background:rgba(232,110,108,.13); color:#b2403e; font-size:.90625rem; font-weight:700; } #catalog-tournaments .ptp-lvl-for{ list-style:none; margin:8px 0 0; padding:0; } #catalog-tournaments .ptp-lvl-for li{ position:relative; margin:0; padding-left:16px; font-size:.9375rem; line-height:1.4; color:var(--ink2); } #catalog-tournaments .ptp-lvl-for li + li{ margin-top:4px; } #catalog-tournaments .ptp-lvl-for li::before{ content:""; position:absolute; left:3px; top:.58em; width:6px; height:6px; border-radius:50%; background:var(--vidya); } /* the price line closes the card, ruled off from the last level like the levels from each other */ #catalog-tournaments .ptp-levels-note.ptp-price{ margin:0; padding-top:12px; border-top:1px solid var(--rule); } /* a phone: one column, the same checklist (a swipe row was as tall as its longest point) */ @media (max-width:640px){ #catalog-tournaments .pt-hero{ border-radius:12px; gap:16px; } #catalog-tournaments .pt-hero .pt-about-intro{ font-size:.9375rem; } #catalog-tournaments .pt-about-list li{ font-size:.90625rem; } } /* a phone: How it works and the levels fold behind one button (the script in _pt_page.html adds is-folded only at this width, so nothing folds without scripting) */ #catalog-tournaments .pt-more{ position:relative; z-index:1; justify-self:start; min-height:44px; padding:0 16px; border:1px solid rgba(255,255,255,.7); border-radius:10px; background:transparent; color:var(--hero-fg); font:600 .9375rem var(--sans); cursor:pointer; } #catalog-tournaments .pt-more[hidden]{ display:none; } #catalog-tournaments .pt-hero.is-folded .pt-about-h, #catalog-tournaments .pt-hero.is-folded .pt-about-list, #catalog-tournaments .pt-hero.is-folded .pt-hero-levels{ display:none; } #catalog-tournaments .qv-dt-count{ margin:0; padding-left:2px; font-size:.90625rem; color:var(--ink2); } #catalog-tournaments .qv-dt-count [data-qv-count]{ font-weight:600; color:var(--ink); } #catalog-tournaments .qv-dt-wrap{ overflow-x:auto; overflow-y:hidden; /* sideways only: a 1px rounding overflow drew a vertical scrollbar */ background:var(--paper); border:1px solid var(--rule); border-radius:var(--dt-radius); box-shadow:var(--tf-sh); } #catalog-tournaments .qv-dt-wrap[hidden]{ display:none; } #catalog-tournaments .pk-tourtable{ width:100%; border-collapse:collapse; font-size:1rem; } #catalog-tournaments .pk-tourtable thead th{ padding:0; background:#f3f5f9; border-bottom:2px solid var(--rule); text-align:left; vertical-align:bottom; white-space:nowrap; } #catalog-tournaments .qv-dt-sort{ display:flex; align-items:center; gap:6px; width:100%; min-height:48px; padding:12px var(--dt-pad-x); border:0; background:none; font:700 .75rem var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--ink2); text-align:left; cursor:pointer; } #catalog-tournaments .qv-dt-sort.is-on{ color:var(--ink); } #catalog-tournaments .qv-dt-sort::after{ content:"\2195"; font-size:.85em; color:var(--ink3); letter-spacing:0; } #catalog-tournaments th[aria-sort="ascending"] .qv-dt-sort::after{ content:"\25B2"; color:var(--vidya); } #catalog-tournaments th[aria-sort="descending"] .qv-dt-sort::after{ content:"\25BC"; color:var(--vidya); } #catalog-tournaments .pk-tourtable tbody td{ padding:var(--dt-pad-y) var(--dt-pad-x); border-top:1px solid var(--rule); vertical-align:top; line-height:1.5; color:var(--ink); } #catalog-tournaments .pk-tourtable th:not(:last-child), #catalog-tournaments .pk-tourtable td:not(:last-child){ border-right:1px solid var(--rule); } #catalog-tournaments .pk-tourtable tbody tr:first-child td{ border-top:0; } #catalog-tournaments .pk-tourtable tbody tr.qv-dt-alt{ background:#f8fafd; } #catalog-tournaments .pk-tourtable tbody tr.qv-dt-newgroup td{ border-top:2px solid var(--rule2); } #catalog-tournaments .pk-tourtable tbody tr:hover{ background:#f3f6fb; } #catalog-tournaments .pk-tourtable td[data-label="Start"], #catalog-tournaments .pk-tourtable td[data-label="End"]{ white-space:nowrap; font-variant-numeric:tabular-nums; } #catalog-tournaments .pk-tourtable td[data-label="Topics"]{ min-width:16rem; } #catalog-tournaments .pk-tourtable td[data-label="Levels"]{ white-space:nowrap; color:var(--ink2); } #catalog-tournaments .pk-tourdate{ display:block; font-weight:500; } /* owner 2026-10-20: the week is part of the name -- read first in the row, not a small caption */ #catalog-tournaments .pk-tourweek{ display:block; margin-bottom:2px; font-size:1rem; font-weight:700; color:var(--ink); } #catalog-tournaments .pk-tourtime{ display:block; font-size:.90625rem; color:var(--ink2); } /* owner 2026-10-21: --ink3 read too light */ #catalog-tournaments .pk-tourname{ display:block; font-weight:600; line-height:1.4; overflow-wrap:break-word; } #catalog-tournaments .qv-dt-rounds{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; } /* a practice tournament whose rounds differ: its topics, as the one-topic name reads (the list stands alone) */ #catalog-tournaments .qv-dt-rounds li{ position:relative; padding-left:14px; font-weight:600; line-height:1.4; color:var(--ink); } #catalog-tournaments .qv-dt-rounds li::before{ content:""; position:absolute; left:2px; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--ink3); } /* the public page, one theme per round (owner 2026-10-17): "Round 1: Fine Arts" -- the round names the line, so no bullet */ #catalog-tournaments .qv-dt-rounds--numbered li{ padding-left:0; } #catalog-tournaments .qv-dt-rounds--numbered li::before{ content:none; } #catalog-tournaments .qv-dt-roundn{ font-weight:500; color:var(--ink2); } #catalog-tournaments .pk-tourreg{ display:block; margin-top:6px; font-size:.90625rem; color:var(--ink2); } #catalog-tournaments .pk-tourreg::before{ content:""; display:inline-block; width:6px; height:6px; margin:0 7px 2px 0; border-radius:50%; background:var(--go); } #catalog-tournaments .pk-subjchip{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap; } #catalog-tournaments .pk-tourrow--ended td, #catalog-tournaments .pk-tourrow--ended .pk-tourname{ color:var(--ink2); } /* top-aligned like every other cell (owner 2026-10-01: centred, the button drifted down a tall row), and lifted by half the difference between its 44px and the first text line, so the two read as one line */ #catalog-tournaments .pk-tourtable tbody td.pk-touract{ text-align:right; vertical-align:top; white-space:nowrap; padding-top:calc(var(--dt-pad-y) - 10px); } #catalog-tournaments .pk-touract .pk-action{ display:inline-flex; align-items:center; justify-content:center; min-width:8.5rem; min-height:44px; margin:0; padding:0 18px; } #catalog-tournaments .pk-touract .pk-action + .pk-action{ margin-left:8px; } /* owner 2026-10-20: where a row has no Register, why (register_state_label): quiet, on the button's line */ #catalog-tournaments .pk-touract .pk-tourstate{ display:inline-flex; align-items:center; min-height:44px; font-size:.9375rem; font-weight:600; color:var(--ink3); } #catalog-tournaments .qv-dt-empty{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:40px 20px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--dt-radius); color:var(--ink2); } #catalog-tournaments .qv-dt-empty[hidden]{ display:none; } #catalog-tournaments .qv-dt-empty p{ margin:0; } #catalog-tournaments .qv-dt-clear{ min-height:44px; padding:0 18px; border:1px solid var(--nav); border-radius:10px; background:var(--paper); color:var(--nav); font:600 .90625rem var(--sans); cursor:pointer; } #catalog-tournaments .qv-dt-legend{ display:flex; flex-wrap:wrap; gap:18px; margin:2px 0 0; padding-left:2px; font-size:.90625rem; color:var(--ink2); } #catalog-tournaments .qv-dt-legend > span{ display:inline-flex; align-items:center; gap:8px; } #catalog-tournaments .qv-dt-swatch{ width:12px; height:12px; padding:0; border-radius:4px; } /* ---- a narrow screen: each row is a stacked card; the headings become a sort row above it. Up to 999px (E2E 2026-10-05: at a tablet's 820px the table's Register column was cut off) ---- */ @media (max-width:999px){ #catalog-tournaments .qv-dt-hint{ display:none; } #catalog-tournaments .qv-dt-f, #catalog-tournaments .qv-dt-f--search .qv-dt-input, #catalog-tournaments .qv-dt-select{ width:100%; } #catalog-tournaments .qv-dt-f{ flex:1 1 100%; } #catalog-tournaments .qv-dt-wrap{ overflow:visible; background:none; border:0; box-shadow:none; } #catalog-tournaments .pk-tourtable, #catalog-tournaments .pk-tourtable tbody{ display:block; } #catalog-tournaments .pk-tourtable thead{ display:block; margin-bottom:10px; } #catalog-tournaments .pk-tourtable thead tr{ display:flex; flex-wrap:wrap; gap:6px; } #catalog-tournaments .pk-tourtable thead th{ background:none; border:0; } #catalog-tournaments .pk-tourtable thead th:last-child{ display:none; } #catalog-tournaments .qv-dt-sort{ min-height:44px; padding:0 12px; border:1px solid var(--rule2); border-radius:999px; background:var(--paper); font-size:.72rem; } #catalog-tournaments .pk-tourtable tbody tr{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0 0 12px; padding:14px 16px; background:var(--paper) !important; border:1px solid var(--rule); border-radius:var(--dt-radius); } #catalog-tournaments .pk-tourtable tbody tr[hidden]{ display:none; } #catalog-tournaments .pk-tourtable tbody td{ display:contents; padding:0; border:0 !important; } #catalog-tournaments .pk-tourtable tbody td[data-label]::before{ content:attr(data-label); grid-column:1; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); padding-top:3px; } #catalog-tournaments .pk-tourtable tbody td[data-label] > *{ grid-column:2; justify-self:start; } /* a chip or badge keeps its own width */ #catalog-tournaments .pk-tourtable tbody td.pk-touract{ display:flex !important; grid-column:1 / -1; flex-wrap:wrap; gap:8px; margin-top:8px; padding:0; } #catalog-tournaments .pk-touract .pk-action{ flex:1 1 10rem; } #catalog-tournaments .pk-touract .pk-action + .pk-action{ margin-left:0; } #catalog-tournaments .pk-touract .pk-tourstate{ min-height:0; } } /* ========================================================================== One CARD PER SUBJECT (2026-09-26) -- replaces the topic x level grid inside #screen-tournament. Markup: tourCardHtml in pack_cart.js. A card is the cart line the server already keys as tour::: its name and state, its themes for THIS tournament, the play window, its levels, then its own action and its own price. The .pk-tg-* rules above stay for the dashboard tab, which still renders a grid. ========================================================================== */ #screen-tournament .pk-subjcards{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:stretch; } /* three across only where the shell can widen for them (the :has() rule above) */ @supports selector(:has(*)){ #screen-tournament .pk-subjcards{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* why a level arrives already ticked: said once, above the cards */ #screen-tournament .pk-recnote{ margin:0 0 18px; padding:10px 14px; background:var(--page); border:1px solid var(--rule2); border-left:3px solid var(--tf-slate); border-radius:10px; font-size:14.5px; line-height:1.55; color:var(--ink2); } #screen-tournament .pk-recnote[hidden]{ display:none; } #screen-tournament .pk-subjcard{ /* 6px is the pair spacing; the boundaries below add to it */ display:flex; flex-direction:column; gap:6px; padding:18px 20px 16px; background:var(--paper); border:1px solid var(--rule); border-radius:12px; transition:border-color .18s ease, box-shadow .2s ease, background-color .18s ease; } #screen-tournament .pk-subjcard--on{ border-color:var(--tf-slate); } #screen-tournament .pk-subjcard.pk-card--incart{ border-color:var(--go); box-shadow:0 6px 16px rgba(30,138,90,.10); } /* every level already bought: the card is a receipt, not an offer */ #screen-tournament .pk-subjcard--held{ background:var(--page); } #screen-tournament .pk-subjcard-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; } #screen-tournament .pk-subjcard-name{ margin:0; font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink); } #screen-tournament .pk-subjcard .pk-tg-state{ align-self:baseline; } /* the tournament's themes for this subject -- what the questions are actually about */ #screen-tournament .pk-subjcard-theme{ margin:4px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink2); max-width:58ch; } #screen-tournament .pk-subjcard-when{ margin:0; font-size:14.5px; line-height:1.4; color:var(--ink3); font-variant-numeric:tabular-nums; } /* the card's two labelled facts, on one key column so the values line up */ #screen-tournament .pk-subjcard-k{ margin-right:7px; font-size:14.5px; font-weight:600; color:var(--ink3); } /* the levels: one per row, as the pack card stacks its chips -- three across never fit a card this wide, and a full-width row reads from the left beside its tick */ /* the choosing, set apart from the facts above it and the money below it */ #screen-tournament .pk-subjcard-levels{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:8px 0; } #screen-tournament .pk-subjcard-levels .pk-level{ height:44px; justify-content:flex-start; padding:0 14px; gap:10px; } /* ONE layout at every width: the figure, then the actions. Three things on one row fits a single Add to cart and not the In cart + Remove pair, and a foot that reflows resizes every card in the row (align-items:stretch). This one is a fixed two rows in every state. */ #screen-tournament .pk-subjcard-foot{ display:flex; flex-direction:column-reverse; align-items:stretch; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); } /* a card with nothing to buy still ends level with the others */ #screen-tournament .pk-subjcard--held .pk-subjcard-levels{ margin-bottom:auto; } #screen-tournament .pk-subjcard-foot .pk-actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; } /* In cart is a label and Remove is a button: they share the row, the label taking what is left */ #screen-tournament .pk-subjcard-foot .pk-actions:has(.pk-remove){ grid-template-columns:minmax(0,1fr) auto; } #screen-tournament .pk-subjcard-foot .pk-action{ width:100%; min-height:42px; padding:8px 18px; font-size:14.5px; } #screen-tournament .pk-subjcard-foot .pk-remove{ min-height:42px; padding:8px 14px; font-size:14.5px; } /* the figure reads as one thing: the amount, then what it buys, on one line. min-height is the amount's own line box, so the row is the same height before a level is ticked (when it holds only the hint) as after -- otherwise the card shrank 4px and took the row's other cards with it. */ #screen-tournament .pk-subjcard-foot .pk-price{ margin-left:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; text-align:left; min-height:24px; } #screen-tournament .pk-subjcard-foot .pk-price-amount{ font-size:1.32rem; } #screen-tournament .pk-subjcard-foot .pk-price-unit{ margin-top:0; white-space:normal; } #screen-tournament .pk-subjcard-foot .pk-price-hint{ font-size:14.5px; color:var(--ink3); } @media (hover:hover) and (pointer:fine){ #screen-tournament .pk-subjcard:not(.pk-subjcard--held):hover{ border-color:var(--tf-off); } #screen-tournament .pk-subjcard--on:hover, #screen-tournament .pk-subjcard.pk-card--incart:hover{ border-color:inherit; } } /* the pack grid's fold: three across, then two, then one */ @media (max-width:999px){ /* below 1000px the shell narrows back to 860px (the rule above), so three no longer fit */ #screen-tournament .pk-subjcards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } } @media (max-width:760px){ /* stacked, they are still three separate purchases, so they keep a section's worth of air */ #screen-tournament .pk-subjcards{ grid-template-columns:minmax(0,1fr); gap:18px; } } @media (max-width:560px){ #screen-tournament .pk-subjcard{ padding:16px 16px 14px; } #screen-tournament .pk-tierline{ margin-bottom:22px; } #screen-tournament .pk-tourcard-head{ padding-top:20px; padding-bottom:20px; } /* the ≤400px rule stacks a grid tile's tick above its label; a full-width row keeps them side by side */ #screen-tournament .pk-subjcard-levels .pk-level{ flex-direction:row; height:44px; } } /* ================================================================================================ W5. Step 2 is a LIST of practice tournaments, not one card. One card per (tournament, subject) -- the unit the cart keys a line by -- filtered, paged three to a page, and with no Add to cart on it: ticking a level IS the line. The head band carries the navy rule and the subject chip; the body carries the tiles and, once something is ticked, a foot saying what is in the cart and what it costs. ============================================================================================== */ /* ---------- what a practice tournament is (case 2 only) ---------- */ #screen-tournament .pk-tourintro{ margin:0 0 20px; font-size:1rem; line-height:1.55; color:var(--ink); } #screen-tournament .pk-tourintro[hidden]{ display:none; } #screen-tournament .pk-tourintro a{ font-weight:600; text-underline-offset:3px; white-space:nowrap; } #screen-tournament .pk-tourintro .pt-about-intro{ margin:0 0 6px; } #screen-tournament .pk-tournotice{ margin:0 0 18px; padding:11px 14px; max-width:76ch; background:var(--warn-tint); border:1px solid var(--warn); border-radius:10px; font-size:14.5px; line-height:1.5; color:var(--ink); } #screen-tournament .pk-tournotice[hidden]{ display:none; } /* ---------- the filter row ---------- One row of real form controls. An active one is shaded, so a parent can see at a glance why the list is short. Choosing a practice tournament turns the other three off: the list is then of one and they could only narrow it to nothing. */ #screen-tournament .pk-tfilters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:0 0 22px; padding:14px 16px; background:var(--paper); border:1px solid var(--rule); border-radius:12px; } #screen-tournament .pk-tfilters[hidden]{ display:none; } #screen-tournament .pk-tfilter{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:1 1 180px; } #screen-tournament .pk-tfilter--q{ flex:1 1 220px; } #screen-tournament .pk-tfilter-k{ font-size:14.5px; font-weight:600; letter-spacing:.01em; color:var(--ink3); } #screen-tournament input.pk-tfilter-c{ min-height:46px; } #screen-tournament .pk-tfilter-c{ -webkit-appearance:none; appearance:none; width:100%; min-width:0; min-height:40px; padding:8px 12px; font:inherit; font-size:14.5px; line-height:1.4; color:var(--ink); background:var(--paper); border:1px solid var(--rule2); border-radius:9px; } #screen-tournament select.pk-tfilter-c{ padding-right:30px; background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%); background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } #screen-tournament .pk-tfilter-c:focus{ outline:none; } /* A coral ring on a FORM CONTROL reads as a validation error, and Chrome applies :focus-visible to a