/* Round-robin generator (/pickleball-round-robin-generator/). Uses the site's own tokens from style.css. */
.rr-head{ padding:clamp(112px,13vh,150px) 0 clamp(28px,4vw,48px); }
.rr-head .wrap{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end; }
.rr-head h1{ font-size:clamp(2.4rem,5.4vw,5.2rem); line-height:1.02; max-width:16ch; margin:.3em 0 .4em; }
.rr-head p{ margin:0; }
.rr-head-photo{ margin:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/8; }
.rr-head-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.rr-toolband{ background:var(--sand); padding:clamp(22px,3vw,44px) 0 clamp(40px,5vw,72px); }
.rr-grid{ display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:clamp(22px,3vw,48px); align-items:start; }
.rr-panel{ position:sticky; top:84px; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(18px,1.8vw,26px); }
.rr-field{ border:0; padding:0; margin:0 0 18px; min-width:0; }
.rr-field>.rr-lab,.rr-field>legend{ display:block; font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.01em; color:var(--ink); margin:0 0 8px; padding:0; }
.rr-field small{ display:block; color:var(--stone); font-size:.88rem; margin-top:7px; line-height:1.35; }

.rr-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.rr-chip{ appearance:none; min-width:44px; height:44px; padding:0 10px; border:1.5px solid var(--line); border-radius:11px; background:#fff; color:var(--ink);
  font:700 1rem/1 var(--sans); cursor:pointer; transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease); }
.rr-chip:hover:not(:disabled){ border-color:var(--clay); }
.rr-chip.is-on{ background:var(--burg); border-color:var(--burg); color:#fff; }
.rr-chip:disabled{ color:#8a7d70; background:var(--sand); border-style:dashed; cursor:not-allowed; }
.rr-chip--sm{ min-width:38px; height:38px; font-size:.92rem; padding:0 9px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rr-chip:focus-visible,.rr-step button:focus-visible,.rr-btn:focus-visible,.rr-switch:focus-visible,.rr-name input:focus-visible,.rr-textbtn:focus-visible{ outline:3px solid var(--clay); outline-offset:2px; }

.rr-step{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.rr-step button{ appearance:none; width:46px; height:44px; border:0; background:none; color:var(--burg); font:800 1.35rem/1 var(--sans); cursor:pointer; }
.rr-step button:hover:not(:disabled){ background:var(--sand-2); }
.rr-step button:disabled{ color:#b5aa9d; cursor:not-allowed; }
.rr-step output{ min-width:52px; text-align:center; font:800 1.15rem/1 var(--sans); color:var(--ink); }
.rr-steprow{ display:flex; flex-wrap:wrap; gap:18px; }
.rr-steprow .rr-field{ margin-bottom:14px; }
.rr-textbtn[hidden]{ display:none; }
.rr-textbtn{ appearance:none; background:none; border:0; padding:4px 0; margin-top:4px; color:var(--accent-text); font:700 .92rem/1.2 var(--sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; display:inline-block; }

.rr-names{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.rr-name{ display:flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:0 8px; min-width:0; }
.rr-name[hidden]{ display:none; }
.rr-name span{ font:800 .84rem/1 var(--sans); color:var(--stone); flex:0 0 auto; min-width:1.2em; }
.rr-name input{ width:100%; min-width:0; border:0; background:none; height:40px; color:var(--ink); font:600 16px/1.2 var(--sans); }
.rr-name input::placeholder{ color:#75685b; }
.rr-names-box[hidden]{ display:none; }
.rr-hint{ color:var(--stone); font-size:.88rem; margin:8px 0 0; }

.rr-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.rr-btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 16px; border-radius:999px; border:1.5px solid var(--burg); background:#fff; color:var(--burg); font:800 .98rem/1 var(--sans); cursor:pointer; flex:1 1 auto; }
.rr-btn:hover{ background:var(--sand-2); }
.rr-btn--main{ background:var(--clay); border-color:var(--clay); color:#fff; flex:1 1 100%; font-size:1.06rem; }
.rr-btn--main:hover{ background:var(--clay-deep); border-color:var(--clay-deep); }
.rr-switchrow{ display:flex; align-items:center; gap:10px; margin:14px 0 2px; color:var(--ink); font-weight:600; font-size:.95rem; line-height:1.25; }
.rr-switch{ appearance:none; flex:0 0 auto; position:relative; width:50px; height:30px; border-radius:30px; border:0; background:#8a7d70; cursor:pointer; }
.rr-switch::after{ content:""; position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .15s var(--ease); }
.rr-switch[aria-checked="true"]{ background:var(--court-deep); }
.rr-switch[aria-checked="true"]::after{ transform:translateX(20px); }
.rr-msg{ margin:10px 0 0; font-size:.92rem; font-weight:600; color:var(--court-deep); }
.rr-msg[hidden]{ display:none; }
.rr-linkbox{ width:100%; height:40px; margin-top:8px; border:1.5px solid var(--line); border-radius:10px; padding:0 10px; font:600 16px/1 var(--sans); color:var(--ink); background:#fff; }
.rr-linkbox[hidden]{ display:none; }

.rr-out-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:0 0 8px; }
.rr-out-head h2{ font-size:clamp(1.7rem,3vw,2.8rem); line-height:1.05; margin:0 0 .2em; }
.rr-out-head p{ margin:0; color:var(--stone); font-weight:600; }
.rr-note{ background:var(--sand-2); border-radius:10px; padding:9px 13px; margin:8px 0 0; font-weight:600; font-size:.95rem; color:var(--ink); }
.rr-note[hidden]{ display:none; }
.rr-proof{ list-style:none; margin:12px 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; }
.rr-proof li{ position:relative; padding-left:22px; font-weight:700; font-size:.97rem; color:var(--court-deep); }
.rr-proof li::before{ content:""; position:absolute; left:3px; top:.34em; width:7px; height:12px; border:solid var(--court-deep); border-width:0 2.5px 2.5px 0; transform:rotate(42deg); }

.rr-tablewrap{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.rr-table{ width:100%; border-collapse:collapse; font-size:1.02rem; }
.rr-table thead th{ background:var(--burg); color:#fff; font:700 .94rem/1.2 var(--sans); text-align:left; padding:12px 14px; }
.rr-table thead th:first-child{ width:84px; }
.rr-table tbody th{ font:800 1.2rem/1 var(--display); color:var(--clay-deep); text-align:left; padding:12px 14px; white-space:nowrap; vertical-align:top; }
.rr-table td{ padding:10px 14px; vertical-align:top; border-left:1px solid var(--line); line-height:1.35; }
.rr-table tbody tr{ border-top:1px solid var(--line); }
.rr-table tbody tr:nth-child(even){ background:rgba(239,226,208,.35); }
.rr-rnd{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.rr-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.rr-game{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.rr-team{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:0 4px; font-weight:600; }
.rr-team i,.rr-sit i{ font-style:normal; color:var(--stone); font-weight:500; }
.rr-vs{ font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }
.rr-p{ font-weight:700; color:var(--ink); border-radius:5px; padding:0 2px; overflow-wrap:anywhere; }
.rr-p.is-me{ background:var(--clay); color:#fff; padding:0 5px; }
.rr-none{ color:var(--stone); }
.rr-box{ display:none; }
.rr-follow{ margin-top:16px; }
.rr-follow h3{ font-size:1.06rem; margin:0 0 8px; letter-spacing:-.01em; font-weight:700; line-height:1.2; }
.rr-followline{ margin:8px 0 0; font-weight:600; }
.rr-followline[hidden]{ display:none; }
.rr-print-only,.rr-print-h,.rr-print-p,.rr-sheet{ display:none; }

/* below the tool */
.rr-sec{ padding:clamp(44px,6vw,88px) 0; }
.rr-sec h2{ line-height:1.02; margin:.3em 0 .4em; }
.rr-lede{ max-width:68ch; color:var(--ink-soft); font-size:1.08rem; margin:0; }
.rr-claims{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); margin-top:clamp(22px,3vw,36px); }
.rr-claims>div{ border-top:2px solid var(--ink); padding-top:16px; }
.rr-claims h3{ line-height:1.1; margin:0 0 10px; }
.rr-claims p{ margin:0; color:var(--ink-soft); }
.rr-matrixwrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,64px); align-items:start; }
.rr-matrix{ width:100%; border-collapse:collapse; background:var(--cream); border-radius:var(--radius-sm); overflow:hidden; font-size:1.02rem; margin-top:0; }
.rr-matrix caption{ text-align:left; font-weight:700; padding:0 0 10px; color:var(--ink); }
.rr-matrix th{ background:var(--burg); color:#fff; font:700 .94rem/1.2 var(--sans); padding:10px 8px; text-align:center; }
.rr-matrix tbody th{ background:var(--sand-2); color:var(--ink); }
.rr-matrix td{ text-align:center; border-top:1px solid var(--line); border-left:1px solid var(--line); padding:0; }
.rr-matrix td a{ display:block; padding:10px 6px; font-weight:800; color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.rr-matrix td a:hover{ background:var(--sand-2); }
.rr-matrix td span{ display:block; padding:10px 6px; color:var(--stone); }
.rr-steps{ margin:18px 0 0; padding:0; list-style:none; counter-reset:s; }
.rr-steps li{ counter-increment:s; position:relative; padding:0 0 16px 46px; }
.rr-steps li::before{ content:counter(s); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%; background:var(--burg); color:#fff; font:800 1rem/32px var(--display); text-align:center; }
.rr-steps b{ display:block; font-family:var(--display); font-size:1.14rem; line-height:1.15; letter-spacing:-.01em; margin-bottom:4px; }
.rr-photo{ margin:0; border-radius:var(--radius); overflow:hidden; }
.rr-photo img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.rr-photo-tall img{ aspect-ratio:auto; height:100%; min-height:360px; }
.rr-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:stretch; }
.rr-split p{ color:var(--ink-soft); }
.rr-faq{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(24px,4vw,64px); align-items:start; }
.rr-faq .faq{ max-width:none; margin:0; }
.rr-faq .faq-a a{ color:var(--accent-text); }
.rr-linkrow{ background:var(--sand-2); }
.rr-snippet{ display:block; background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:12px 0 0; font:600 .94rem/1.45 var(--sans); color:var(--ink); overflow-wrap:anywhere; user-select:all; }
.rr-links a{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; font-weight:700; }

@media (max-width:1020px){
  .rr-grid{ grid-template-columns:minmax(0,1fr); }
  .rr-panel{ position:static; }
  .rr-claims{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rr-matrixwrap,.rr-split,.rr-faq{ grid-template-columns:minmax(0,1fr); }
  .rr-head .wrap{ grid-template-columns:minmax(0,1fr); }
  .rr-head-photo{ display:none; }
}
/* phones: each round is its own block, courts stack, nothing scrolls sideways */
@media (max-width:640px){
  .rr-head{ padding:96px 0 22px; }
  .rr-head h1{ font-size:clamp(2.1rem,10vw,3rem); }
  .rr-claims{ grid-template-columns:minmax(0,1fr); }
  .rr-table,.rr-table tbody,.rr-table tr,.rr-table td{ display:block; width:100%; }
  .rr-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .rr-table tbody th{ display:block; width:100%; padding:12px 14px 2px; font-size:1.25rem; }
  .rr-rnd{ position:static; width:auto; height:auto; overflow:visible; clip:auto; }
  .rr-table td{ border-left:0; padding:4px 14px 6px; display:grid; grid-template-columns:70px minmax(0,1fr); column-gap:8px; align-items:baseline; }
  .rr-table td::before{ content:attr(data-court); font-weight:800; font-size:.88rem; color:var(--stone); }
  .rr-table td.rr-sit{ padding-bottom:12px; }
  .rr-panel{ padding:16px; }
  .rr-chip{ min-width:40px; height:42px; padding:0 6px; }
  .rr-chip--sm{ height:38px; }
  .rr-field{ margin-bottom:14px; }
  .rr-steprow{ flex-wrap:nowrap; gap:12px; }
  .rr-steprow .rr-field{ flex:1 1 0; min-width:0; margin-bottom:10px; }
  .rr-step button{ width:38px; }
  .rr-step output{ min-width:38px; }
}

/* the printout: the rotation, the proof line, the score sheet, the site address. Nothing else on the page. */
@media print{
  @page{ size:letter; margin:.5in; }
  html,body{ background:#fff !important; color:#000 !important; }
  body>*:not(main){ display:none !important; }
  main>*:not(.rr-toolband){ display:none !important; }
  .rr-toolband{ background:#fff !important; padding:0 !important; }
  .rr-toolband>.wrap{ padding:0 !important; max-width:none !important; }
  .rr-grid{ display:block !important; }
  .rr-panel,.rr-follow,.rr-note,.rr-out-head{ display:none !important; }
  .rr-print-only{ display:block !important; }
  .rr-print-title{ font:800 17pt/1.15 var(--display); margin:0 0 3pt; color:#000; }
  .rr-print-line{ font:600 10pt/1.3 var(--sans); margin:0 0 6pt; color:#000; }
  .rr-proof{ margin:0 0 8pt !important; gap:2pt 12pt !important; }
  .rr-proof li{ color:#000 !important; font-size:9.5pt !important; padding-left:14pt !important; }
  .rr-proof li::before{ border-color:#000 !important; width:5pt; height:9pt; left:2pt; top:1pt; }
  .rr-tablewrap{ border:0 !important; border-radius:0 !important; overflow:visible !important; background:none !important; }
  .rr-table{ font-size:10.5pt !important; display:table !important; }
  .rr-table thead{ display:table-header-group !important; position:static !important; width:auto !important; height:auto !important; clip:auto !important; }
  .rr-table tbody{ display:table-row-group !important; }
  .rr-table tr{ display:table-row !important; width:auto !important; break-inside:avoid; page-break-inside:avoid; }
  .rr-table th,.rr-table td{ display:table-cell !important; width:auto !important; border:1pt solid #000 !important; padding:3pt 5pt !important; background:#fff !important; color:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rr-table thead th{ font:800 9.5pt/1.2 var(--sans) !important; background:#eee !important; color:#000 !important; }
  .rr-table tbody th{ font:800 11pt/1 var(--sans) !important; text-align:center; }
  .rr-table td::before{ display:none !important; content:none !important; }
  .rr-rnd{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; }
  .rr-p,.rr-p.is-me{ background:none !important; color:#000 !important; padding:0 !important; }
  .rr-team i,.rr-sit i,.rr-vs,.rr-none{ color:#000 !important; }
  .rr-vs{ font-size:7pt !important; margin:0 !important; }
  .rr-game{ gap:1pt 5pt !important; align-items:center !important; }
  .rr-team{ display:inline-flex !important; align-items:center !important; gap:0 2pt !important; }
  .rr-box{ display:inline-block !important; margin-left:3pt; flex:0 0 auto; width:18pt; height:13pt; border:1pt solid #000; }
  .rr-no-scores .rr-box{ display:none !important; }
  .rr-sheetwrap{ break-before:page; page-break-before:always; }
  .rr-no-scores .rr-sheetwrap{ display:none !important; break-before:auto; page-break-before:auto; }
  .rr-print-h{ display:block !important; font:800 15pt/1.15 var(--display) !important; color:#000 !important; margin:0 0 3pt !important; }
  .rr-print-p{ display:block !important; font:600 9.5pt/1.3 var(--sans) !important; color:#000 !important; margin:0 0 6pt !important; }
  .rr-sheet{ display:table !important; width:100%; border-collapse:collapse; margin:0 0 10pt; font:600 9.5pt/1.1 var(--sans); }
  .rr-sheet th,.rr-sheet td{ border:1pt solid #000; padding:0 3pt; height:17pt; text-align:center; color:#000; background:#fff; }
  .rr-sheet tbody th{ text-align:left; white-space:nowrap; max-width:110pt; overflow:hidden; }
  .rr-sheet td.off{ background:#bbb !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rr-sheet thead th{ background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rr-credit{ font:600 8.5pt/1.3 var(--sans); margin:6pt 0 0; color:#000; }
}