/* rinknotes.app — app mock-ups for / and /lineups/ only. Drawn from the app's own screens and
   wording (app/Lineups, LineupsCore copy), with the app's palette from Palette.swift: dark by default,
   the app's light palette when the site is light. Every rule is scoped under .phone or .mk-, so nothing
   here reaches site.css's own classes. Player names are fictional (hard constraint 7). */
:root{--mk-bezel:#1c2128;--mk-bezel-edge:#30363d}
:root[data-theme="light"]{--mk-bezel:#1f2328;--mk-bezel-edge:#1f2328}
@media (prefers-color-scheme: light){:root:not([data-theme]){--mk-bezel:#1f2328;--mk-bezel-edge:#1f2328}}
.phone{--a-bg:#0d1117;--a-card:#161b22;--a-card2:#11161d;--a-border:#21262d;--a-border2:#30363d;--a-text:#e6edf3;--a-muted:#8b949e;--a-ghost:#4a525c;--a-green:#2ea043;--a-gb:#3fb950;--a-ongreen:#0d1117;--a-gsoft:rgba(46,160,67,.12);--a-gline:rgba(46,160,67,.3);--a-amber:#d29922;--a-asoft:rgba(210,153,34,.13);--a-aline:rgba(210,153,34,.35);--a-red:#f85149;--a-dim:rgba(1,4,9,.62);--t-blue:#388bfd;--t-orange:#e3812e;--t-purple:#bc8cff;--t-cyan:#56d3f5;--t-pink:#f778ba;--t-teal:#39d353}
:root[data-theme="light"] .phone{--a-bg:#ffffff;--a-card:#f6f8fa;--a-card2:#eef1f4;--a-border:#d0d7de;--a-border2:#afb8c1;--a-text:#1f2328;--a-muted:#656d76;--a-ghost:#8c959f;--a-green:#1a7f37;--a-gb:#1a7f37;--a-ongreen:#ffffff;--a-gsoft:rgba(45,164,78,.12);--a-gline:rgba(45,164,78,.30);--a-amber:#9a6700;--a-asoft:rgba(154,103,0,.10);--a-aline:rgba(154,103,0,.30);--a-red:#cf222e;--a-dim:rgba(31,35,40,.38);--t-blue:#0969da;--t-orange:#bc4c00;--t-purple:#8250df;--t-cyan:#1b7c83;--t-pink:#bf3989;--t-teal:#1a7f37}
@media (prefers-color-scheme: light){:root:not([data-theme]) .phone{--a-bg:#ffffff;--a-card:#f6f8fa;--a-card2:#eef1f4;--a-border:#d0d7de;--a-border2:#afb8c1;--a-text:#1f2328;--a-muted:#656d76;--a-ghost:#8c959f;--a-green:#1a7f37;--a-gb:#1a7f37;--a-ongreen:#ffffff;--a-gsoft:rgba(45,164,78,.12);--a-gline:rgba(45,164,78,.30);--a-amber:#9a6700;--a-asoft:rgba(154,103,0,.10);--a-aline:rgba(154,103,0,.30);--a-red:#cf222e;--a-dim:rgba(31,35,40,.38);--t-blue:#0969da;--t-orange:#bc4c00;--t-purple:#8250df;--t-cyan:#1b7c83;--t-pink:#bf3989;--t-teal:#1a7f37}}
.phone{position:relative;flex:none;container-type:inline-size;
  width:250px;max-width:100%;aspect-ratio:390/844;
  border-radius:15% / 7%;
  background:var(--a-bg);
  box-shadow:0 0 0 7px var(--mk-bezel),0 0 0 8px var(--mk-bezel-edge),0 30px 60px -24px rgba(0,0,0,.55);
  margin:8px;
  color:var(--a-text);font-family:var(--sans);line-height:1.3;}
.phone .scr{position:absolute;inset:0;border-radius:inherit;overflow:hidden;font-size:4.25cqi;display:flex;flex-direction:column}
.phone.land{width:100%;max-width:640px;aspect-ratio:844/390;border-radius:7% / 15%}
.phone.land .scr{font-size:1.95cqi}
.phone.sm{width:210px}
.phone .sb{flex:none;display:flex;align-items:center;justify-content:space-between;height:3.3em;padding:0 2.1em 0 2.5em;font-size:.95em;font-weight:600}
.phone .isl{width:8.4em;height:2.35em;background:#000;border-radius:2em}
.phone .sbr{display:flex;gap:.45em;align-items:center}
.phone .sig{width:1.5em;height:.95em;background:linear-gradient(90deg,currentColor 0 20%,transparent 20% 27%,currentColor 27% 47%,transparent 47% 53%,currentColor 53% 73%,transparent 73% 80%,currentColor 80%);clip-path:polygon(0 100%,100% 0,100% 100%)}
.phone .bat{width:2.1em;height:1em;border:1.5px solid currentColor;border-radius:.32em;padding:1px;opacity:.9}
.phone .bat::before{content:"";display:block;height:100%;width:72%;background:currentColor;border-radius:.15em}
.phone .hi{position:absolute;bottom:.7em;left:50%;width:36%;height:.38em;border-radius:1em;background:var(--a-text);opacity:.85;transform:translateX(-50%);z-index:3}
.phone .land .hi{width:22%;bottom:.55em}
.phone .body{flex:1;min-height:0;padding:.9em 1.6em;display:flex;flex-direction:column;gap:1.05em;overflow:hidden;position:relative}
.phone .foot{flex:none;padding:.8em 1.6em 2.3em;display:grid;gap:.7em}
.phone .prog{display:grid;grid-template-columns:repeat(6,1fr);gap:.45em}
.phone .prog i{height:.38em;border-radius:1em;background:var(--a-border2)}
.phone .prog i.on{background:var(--a-gb)}
.phone .k{font-size:.8em;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--a-muted);display:flex;align-items:center;gap:.5em}
.phone .k.g{color:var(--a-gb)}
.phone .t{font-size:1.9em;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.phone .s{font-size:1.05em;color:var(--a-muted);line-height:1.38}
.phone .fl{font-size:.85em;color:var(--a-muted);font-weight:500;margin-bottom:.4em;display:block}
.phone .fl em{font-style:normal;color:var(--a-ghost)}
.phone .in{height:3.7em;border:1px solid var(--a-border2);border-radius:.9em;background:var(--a-card2);display:flex;align-items:center;padding:0 1em;font-size:1.08em}
.phone .in.f{border-color:var(--a-gb);box-shadow:0 0 0 .25em rgba(46,160,67,.18)}
.phone .in .ph{color:var(--a-ghost)}
.phone .caret{display:inline-block;width:2px;height:1.2em;background:var(--a-gb);margin-left:1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.phone .caret{animation:none}}
.phone .pb{height:3.9em;border-radius:1.1em;background:var(--a-green);color:var(--a-ongreen);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.08em;gap:.4em}
.phone .pb.dim{opacity:.4}
.phone .lk{text-align:center;color:var(--a-muted);font-weight:600;font-size:1em;padding:.4em}
.phone .gp{white-space:nowrap;display:inline-flex;align-items:center;gap:.4em;padding:.55em 1em;border-radius:99em;background:var(--a-gsoft);border:1px solid var(--a-gline);color:var(--a-gb);font-weight:600;font-size:.95em}
.phone .dot{width:.85em;height:.85em;border-radius:50%;flex:none;background:var(--t-blue)}
.phone .dot.o{background:var(--t-orange)}
.phone .dot.p{background:var(--t-purple)}
.phone .dot.c{background:var(--t-cyan)}
.phone .dot.k{background:var(--t-pink)}
.phone .dot.t{background:var(--t-teal)}
.phone .box{border:1px solid var(--a-border);background:var(--a-card);border-radius:1.2em}
.phone .box2{border:1px solid var(--a-border);background:var(--a-card2);border-radius:1.2em}
.phone .lock{display:flex;align-items:center;justify-content:center;gap:.5em;color:var(--a-muted);font-size:.85em}
.phone .lock svg{width:1.1em;height:1.1em}
.phone .ic{width:1.2em;height:1.2em;flex:none}
.phone .am{color:var(--a-amber)}
.phone .gr{color:var(--a-gb)}
.phone .mu{color:var(--a-muted)}
.phone .mn{font-family:var(--mono);font-variant-numeric:tabular-nums}
.phone .wpro{display:grid;gap:1.1em;font-size:1.05em}
.phone .wpro div{display:flex;gap:.8em;align-items:flex-start;line-height:1.3}
.phone .wpro svg{width:1.25em;height:1.25em;color:var(--a-gb);flex:none;margin-top:.05em}
.phone .trow{display:flex;align-items:center;gap:.9em;padding:.75em .9em .75em 1.1em;border:1px solid var(--a-border);background:var(--a-card);border-radius:1.2em}
.phone .trow b{font-weight:600;font-size:1.1em;display:block}
.phone .trow small{color:var(--a-muted);font-size:.9em}
.phone .trow .x{margin-left:auto;color:var(--a-muted);font-size:1.1em}
.phone .sw{display:flex;gap:.7em}
.phone .sw i{width:2.2em;height:2.2em;border-radius:50%}
.phone .sw i.sel{box-shadow:0 0 0 .2em var(--a-card2),0 0 0 .38em var(--a-text)}
.phone .ch{border:1px solid var(--a-border);background:var(--a-card);border-radius:1.2em;padding:1em 1.1em;display:flex;gap:.9em;align-items:flex-start}
.phone .ch.hot{border-color:var(--a-gline);background:linear-gradient(0deg,var(--a-gsoft),var(--a-gsoft)),var(--a-card)}
.phone .ch .icb{width:2.6em;height:2.6em;border-radius:.8em;background:var(--a-card2);border:1px solid var(--a-border2);display:grid;place-items:center;flex:none;color:var(--a-gb)}
.phone .ch .icb svg{width:1.3em;height:1.3em}
.phone .ch b{display:flex;gap:.5em;align-items:center;font-size:1.05em;font-weight:600}
.phone .ch span{display:block;color:var(--a-muted);font-size:.9em;margin-top:.2em;line-height:1.3}
.phone .ch .fast{font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:var(--a-gb);background:var(--a-gsoft);border:1px solid var(--a-gline);padding:.15em .55em;border-radius:99em}
.phone .ch.off{opacity:.45}
.phone .reading{align-items:center;justify-content:center;text-align:center;gap:1.4em}
.phone .thumbs{display:flex;gap:.6em}
.phone .thumbs i{width:4.2em;height:8.6em;border-radius:.7em;border:1px solid var(--a-border2);background:repeating-linear-gradient(180deg,var(--a-card) 0 .9em,var(--a-card2) .9em 1.8em)}
.phone .thumbs i.done{border-color:var(--a-gline)}
.phone .bar{width:70%;height:.45em;border-radius:1em;background:var(--a-border2);overflow:hidden}
.phone .bar b{display:block;height:100%;width:66%;background:var(--a-gb);border-radius:inherit}
.phone .rv{display:grid;gap:.5em}
.phone .rr{display:grid;grid-template-columns:3.2em 1fr auto;gap:.6em;align-items:center;padding:.5em .6em;border:1px solid var(--a-border);background:var(--a-card);border-radius:.9em}
.phone .rr .num{height:2.6em;border-radius:.6em;background:var(--a-card2);border:1px solid var(--a-border2);display:grid;place-items:center;font-family:var(--mono);font-size:.95em}
.phone .rr.amb{border-color:var(--a-aline)}
.phone .rr.amb .num{border-color:var(--a-amber);color:var(--a-amber)}
.phone .rr .nm{font-weight:600;font-size:.98em}
.phone .rr .nm small{display:block;font-weight:500;color:var(--a-amber);font-size:.8em}
.phone .seg{display:inline-flex;border:1px solid var(--a-border2);border-radius:.6em;overflow:hidden;font-size:.78em;font-weight:600}
.phone .seg i{font-style:normal;padding:.35em .55em;color:var(--a-muted)}
.phone .seg i.on{background:var(--a-text);color:var(--a-bg)}
.phone .anote{border:1px solid var(--a-aline);background:var(--a-asoft);color:var(--a-text);border-radius:.9em;padding:.6em .8em;font-size:.88em;display:flex;gap:.5em}
.phone .anote b{color:var(--a-amber)}
.phone .fold{display:flex;justify-content:space-between;color:var(--a-muted);font-size:.9em;padding:.5em .2em;border-top:1px solid var(--a-border)}
.phone .hmaw{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--a-border2);border-radius:.9em;overflow:hidden;font-weight:600}
.phone .hmaw i{font-style:normal;text-align:center;padding:.8em;color:var(--a-muted)}
.phone .hmaw i.on{background:var(--a-card);color:var(--a-text);box-shadow:inset 0 0 0 1px var(--a-border2)}
.phone .when{display:grid;grid-template-columns:1.4fr 1fr;gap:.6em}
.phone .hdr{display:flex;align-items:flex-start;gap:.8em}
.phone .hdr .bk{font-size:1.6em;line-height:1;color:var(--a-muted);margin-top:.1em}
.phone .hdr .grow{flex:1;min-width:0}
.phone .hdr .ico{display:flex;gap:.9em;color:var(--a-muted)}
.phone .hdr .ico svg{width:1.35em;height:1.35em}
.phone .stat{display:flex;justify-content:space-between;align-items:center;gap:.6em;font-size:.82em;color:var(--a-muted)}
.phone .vp{border:1px solid var(--a-border2);border-radius:99em;padding:.25em .7em;font-weight:600;color:var(--a-text);white-space:nowrap}
.phone .sl{font-size:.75em;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--a-muted);margin-bottom:.45em}
.phone .u{display:grid;grid-template-columns:2.3em repeat(3,1fr);gap:.4em;align-items:stretch;margin-bottom:.4em}
.phone .u.two{grid-template-columns:2.3em repeat(2,1fr)}
.phone .u .ul{font-size:.8em;font-weight:700;color:var(--a-muted);display:grid;place-items:center;font-family:var(--mono)}
.phone .c{border:1px solid var(--a-border);background:var(--a-card);border-radius:.75em;padding:.35em .5em;min-height:3.3em;display:flex;flex-direction:column;justify-content:center;min-width:0}
.phone .c small{font-size:.66em;color:var(--a-ghost);font-weight:700;letter-spacing:.06em;font-family:var(--mono)}
.phone .c b{font-size:.9em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone .c b .mn{color:var(--a-muted);font-weight:500;margin-right:.25em}
.phone .c.e{border-style:dashed;border-color:var(--a-border2);background:transparent}
.phone .c.e b{color:var(--a-ghost);font-weight:500}
.phone .c.arm{border-color:var(--a-gb);background:var(--a-gsoft);box-shadow:0 0 0 .15em rgba(63,185,80,.25)}
.phone .c.out{border-color:var(--a-amber)}
.phone .c.out small::after{content:" OUT";color:var(--a-amber)}
.phone .c.tgt{border-color:var(--a-gb);border-style:solid;transform:scale(1.03)}
.phone .fadeb{position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(transparent,var(--a-bg))}
.phone .tray{flex:none;border-top:1px solid var(--a-border2);background:var(--a-card);border-radius:1.5em 1.5em 0 0;padding:.5em 1.4em 2.4em;display:grid;gap:.7em;position:relative;z-index:2}
.phone .grab{width:3.2em;height:.36em;border-radius:1em;background:var(--a-border2);margin:0 auto .2em}
.phone .trh{display:flex;align-items:center;gap:.7em}
.phone .trh b{font-size:1.05em}
.phone .trh small{color:var(--a-muted);font-size:.85em;display:block;font-weight:500}
.phone .trh .gp{margin-left:auto}
.phone .chips{display:flex;gap:.45em;overflow:hidden}
.phone .chip{flex:none;border:1px solid var(--a-border2);background:var(--a-card2);border-radius:99em;padding:.45em .75em;font-size:.88em;font-weight:600;white-space:nowrap}
.phone .chip .mn{color:var(--a-muted);font-weight:500;margin-right:.25em}
.phone .chip.out{border-style:dashed;opacity:.55}
.phone .chip.out::after{content:" Out";color:var(--a-amber)}
.phone .chip.arm{border-color:var(--a-gb);background:var(--a-gsoft)}
.phone .pbar{display:flex;gap:.6em;align-items:center}
.phone .pbar .pb{flex:1}
.phone .lgrid{flex:1;min-height:0;display:grid;grid-template-columns:26.5% 1fr}
.phone .lpane{border-right:1px solid var(--a-border);background:var(--a-card2);padding:1em .9em 1em 3.2em;display:flex;flex-direction:column;gap:.35em;overflow:hidden}
.phone .lpane .ph{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35em}
.phone .lpane .ph b{font-size:1em}
.phone .lpane .ph small{color:var(--a-muted);font-size:.8em}
.phone .pr{display:grid;grid-template-columns:2em 1fr;gap:.2em .5em;padding:.35em .5em;border-radius:.6em;border:1px solid transparent}
.phone .pr .mn{color:var(--a-muted);font-size:.9em;grid-row:span 2;align-self:center}
.phone .pr b{font-size:.92em;font-weight:600;line-height:1.1}
.phone .pr small{font-size:.7em;font-weight:600;color:var(--a-muted)}
.phone .pr small.on{color:var(--a-gb)}
.phone .pr small.o{color:var(--a-amber)}
.phone .pr.arm{border-color:var(--a-gb);background:var(--a-gsoft)}
.phone .lmain{display:flex;flex-direction:column;min-width:0;padding:.9em 3.2em 0 1.2em;gap:.7em;overflow:hidden}
.phone .lhdr{display:flex;align-items:center;gap:.8em}
.phone .lhdr .t{font-size:1.45em}
.phone .lhdr .mn{color:var(--a-muted);font-size:.9em}
.phone .lhdr .ico{margin-left:auto;display:flex;gap:.9em;color:var(--a-muted);align-items:center}
.phone .lhdr .ico svg{width:1.3em;height:1.3em}
.phone .lcols{display:grid;grid-template-columns:1.45fr 1fr;gap:1.1em;min-height:0}
.phone .lcols .c{min-height:2.9em}
.phone .lfoot{flex:none;display:flex;align-items:center;gap:1em;border-top:1px solid var(--a-border);padding:.6em 0 1.6em}
.phone .lfoot .talk{flex:1;color:var(--a-muted);font-size:.9em;border:1px solid var(--a-border);border-radius:.7em;padding:.5em .8em;background:var(--a-card2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone .lfoot .pb{height:2.9em;padding:0 1.4em;font-size:.95em;border-radius:.8em}
.phone .gh{display:flex;align-items:center;gap:.7em}
.phone .live{display:inline-flex;align-items:center;gap:.4em;padding:.3em .7em;border-radius:99em;background:rgba(248,81,73,.12);color:var(--a-red);font-weight:700;font-size:.78em;letter-spacing:.08em}
.phone .live::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--a-red)}
.phone .mseg{display:inline-flex;border:1px solid var(--a-border2);border-radius:.7em;padding:.15em;font-size:.85em;font-weight:600;background:var(--a-card2)}
.phone .mseg i{font-style:normal;padding:.35em .8em;border-radius:.55em;color:var(--a-muted)}
.phone .mseg i.on{background:var(--a-card);color:var(--a-text);box-shadow:inset 0 0 0 1px var(--a-border2)}
.phone .pseg{display:inline-flex;gap:.25em;font-family:var(--mono);font-size:.78em;font-weight:600}
.phone .pseg i{font-style:normal;padding:.3em .55em;border-radius:.5em;border:1px solid var(--a-border2);color:var(--a-muted)}
.phone .pseg i.on{background:var(--a-text);color:var(--a-bg);border-color:var(--a-text)}
.phone .gu{display:grid;grid-template-columns:3.6em repeat(3,1fr);gap:.4em;margin-bottom:.45em}
.phone .gu.two{grid-template-columns:3.6em repeat(2,1fr)}
.phone .rate{border:1px solid var(--a-border2);border-radius:.75em;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72em;font-weight:700;line-height:1.2;padding:.3em 0;background:var(--a-card2)}
.phone .rate span{font-weight:600}
.phone .rate .up{color:var(--a-gb)}
.phone .rate .eq{color:var(--a-text)}
.phone .rate .dn{color:var(--a-amber)}
.phone .rate .nr{color:var(--a-muted)}
.phone .tile{border:1px solid var(--a-border);background:var(--a-card);border-radius:.8em;padding:.45em .55em;min-height:4em;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-width:0}
.phone .tile small{font-family:var(--mono);color:var(--a-muted);font-size:.72em}
.phone .tile b{font-size:.95em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone .tile .nc{position:absolute;top:.35em;right:.4em;min-width:1.5em;height:1.5em;border-radius:99em;background:var(--a-gsoft);border:1px solid var(--a-gline);color:var(--a-gb);font-size:.66em;font-weight:700;display:grid;place-items:center;padding:0 .3em}
.phone .tile.tap{border-color:var(--a-gb);box-shadow:0 0 0 .18em rgba(63,185,80,.25)}
.phone .gbtns{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.phone .gbtn{height:3.3em;border-radius:1em;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.98em;border:1px solid var(--a-border2);background:var(--a-card)}
.phone .gbtn.f{background:var(--a-gsoft);border-color:var(--a-gline);color:var(--a-gb)}
.phone .endg{text-align:center;color:var(--a-muted);font-weight:600;font-size:.95em}
.phone .cmark{position:absolute;left:1.4em;right:1.4em;z-index:4;background:var(--a-text);color:var(--a-bg);border-radius:1em;padding:.8em 1em;font-size:.98em;box-shadow:0 1em 2em rgba(0,0,0,.5);display:flex;gap:.8em;align-items:center}
.phone .cmark b{font-weight:700}
.phone .cmark .ok{margin-left:auto;background:var(--a-bg);color:var(--a-text);border-radius:.6em;padding:.4em .8em;font-weight:700;white-space:nowrap;font-size:.9em}
.phone .cmark::before{content:"";position:absolute;top:-.5em;left:30%;border:.5em solid transparent;border-top:0;border-bottom-color:var(--a-text)}
.phone .dim{position:absolute;inset:0;background:var(--a-dim);z-index:3}
.phone .sheet{position:absolute;left:0;right:0;bottom:0;z-index:4;background:var(--a-card);border-radius:1.7em 1.7em 0 0;border-top:1px solid var(--a-border2);padding:.6em 1.6em 2.6em;display:grid;gap:.9em}
.phone .ta{min-height:6.5em;border:1px solid var(--a-gb);border-radius:.9em;background:var(--a-card2);padding:.7em .9em;font-size:1em;line-height:1.35;box-shadow:0 0 0 .25em rgba(46,160,67,.18)}
.phone .r3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.phone .r3 i{font-style:normal;border:1px solid var(--a-border2);border-radius:.9em;padding:.85em 0;text-align:center;font-weight:700;background:var(--a-card2)}
.phone .r3 i.g{color:var(--a-gb);border-color:var(--a-gline);background:var(--a-gsoft)}
.phone .r3 i.a{color:var(--a-amber)}
.phone .sumc{width:6.2em;height:6.2em;border-radius:50%;background:var(--a-gsoft);border:1px solid var(--a-gline);display:grid;place-items:center;color:var(--a-gb);margin:1.6em auto .4em}
.phone .sumc svg{width:2.6em;height:2.6em}
.phone .srow{display:flex;gap:.9em;padding:.9em 1em;align-items:flex-start}
.phone .srow + .srow{border-top:1px solid var(--a-border)}
.phone .srow b{display:block;font-size:1.05em}
.phone .srow small{color:var(--a-muted);font-size:.88em}
.phone .srow .dot{margin-top:.3em}
.phone .tcard{border:1px solid var(--a-border);background:var(--a-card);border-radius:1.2em;padding:.9em 1em;display:grid;gap:.35em}
.phone .tcard .tt{display:flex;align-items:center;gap:.6em}
.phone .tcard .tt b{font-size:1.1em}
.phone .pill{margin-left:auto;font-size:.75em;font-weight:700;padding:.3em .7em;border-radius:99em;border:1px solid var(--a-border2);color:var(--a-muted);white-space:nowrap}
.phone .pill.g{color:var(--a-gb);border-color:var(--a-gline);background:var(--a-gsoft)}
.phone .pill.a{color:var(--a-amber);border-color:var(--a-aline);background:var(--a-asoft)}
.phone .pill.l{color:var(--a-red);border-color:rgba(248,81,73,.35);background:rgba(248,81,73,.1)}
.phone .tcard small{color:var(--a-muted);font-size:.88em}
.phone .land .tile{min-height:2.75em;padding:.3em .45em}
.phone .land .gu{margin-bottom:.35em;grid-template-columns:3.2em repeat(3,1fr)}
.phone .land .gu.two{grid-template-columns:3.2em repeat(2,1fr)}
.phone .land .gu.five{grid-template-columns:3.2em repeat(5,1fr)}
.phone .land .tile b{font-size:.88em}
.phone .land .sl{margin-bottom:.3em}
.phone .lgame{flex:1;min-height:0;display:flex;flex-direction:column;padding:.8em 3.4em 0;gap:.6em}
.phone .lgame .gh{gap:.9em}
.phone .lgcols{flex:1;min-height:0;display:grid;grid-template-columns:1.25fr 1fr;gap:1.2em;overflow:hidden}
.phone .lgfoot{flex:none;display:flex;align-items:center;gap:.8em;border-top:1px solid var(--a-border);padding:.55em 0 1.7em}
.phone .lgfoot .gbtn{height:2.7em;padding:0 1.3em;font-size:.9em;border-radius:.8em}
.phone .lgfoot .lock{flex:1;justify-content:flex-start}
.phone .scrz{border:1px dashed var(--a-border2);border-radius:.75em;padding:.4em .6em;font-size:.8em;color:var(--a-muted);display:flex;gap:.5em;align-items:center;flex-wrap:wrap}
.phone .scrz b{color:var(--a-text);font-weight:600}
.phone .scrz.tgt{border-color:var(--a-amber);border-style:solid;background:var(--a-asoft)}
@media (max-width:700px){.phone .steps3{grid-template-columns:1fr}}

/* ---------- page layout for the mock-ups (site tokens: --bg --card --line --ink --muted --green) ---------- */
.mk-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.mk-hero .rink{right:-120px}
.mk-hero-visual{position:relative;display:grid;place-items:center;padding:18px 8px 28px}
.mk-hero-visual .phone{width:260px}
.mk-hero-copy .pill{margin-top:6px}
.mk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.mk-link{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:12px;border:1px solid var(--line2);color:var(--ink);font-weight:600;text-decoration:none}
.mk-link:hover{border-color:var(--muted)}
@media (max-width:820px){.mk-hero{grid-template-columns:1fr}.mk-hero-visual{justify-self:center}}

/* rows of copy beside a stage of phones */
.mk-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-top:72px}
.mk-row.rev .mk-copy{order:2}
.mk-row h2{margin-top:0}
.mk-copy p{color:var(--muted)}
.mk-copy .kick{margin-bottom:10px}
.mk-copy ul{padding-left:18px;color:var(--muted)}
.mk-copy li b{color:var(--ink)}
.mk-stage{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 18px;display:flex;flex-wrap:wrap;gap:22px 18px;justify-content:center;align-items:center;position:relative;overflow:hidden}
.mk-stage .phone{width:200px}
.mk-stage .phone.sm{width:170px}
.mk-stage.wide{grid-column:1/-1}
.mk-cap{display:grid;justify-items:center;gap:10px}
.mk-cap > span{font-size:13px;color:var(--muted)}
@media (max-width:820px){.mk-row,.mk-row.rev{grid-template-columns:1fr;gap:22px;margin-top:56px}.mk-row.rev .mk-copy{order:0}}

/* the shared card image */
.mk-share{width:270px;max-width:100%;background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6);padding:12px;display:grid;gap:10px}
.mk-share.float{position:absolute;left:-18%;bottom:6px;z-index:5;width:250px}
.mk-share .sh{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.mk-share .sh svg{width:14px;height:14px;color:var(--green)}
.mk-img{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 10px 8px;display:grid;gap:5px;font-size:10.5px;color:var(--ink)}
.mk-img .ct{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.mk-img .ct b{font-size:12px}
.mk-img .ct span{font-family:var(--mono);color:var(--muted);font-size:9.5px;white-space:nowrap}
.mk-img .rw{display:grid;grid-template-columns:22px repeat(3,1fr);gap:4px;font-family:var(--mono);font-size:9.5px}
.mk-img .rw.two{grid-template-columns:22px repeat(2,1fr)}
.mk-img .rw i{font-style:normal;color:var(--muted)}
.mk-img .rw span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-img .talk{color:var(--muted);font-size:9.5px;border-top:1px solid var(--line);padding-top:5px}
.mk-img .made{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:8.5px}
.mk-img .made svg{width:12px;height:12px;color:var(--green)}
.mk-nonotes{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--green);border:1px solid var(--line2);border-radius:99px;padding:4px 10px;justify-self:start}
.mk-nonotes svg{width:13px;height:13px}
.mk-share.big{width:360px}
.mk-share.big .mk-img{font-size:12px;gap:7px;padding:14px}
.mk-share.big .mk-img .rw{font-size:11.5px;grid-template-columns:28px repeat(3,1fr)}
.mk-share.big .mk-img .rw.two{grid-template-columns:28px repeat(2,1fr)}
.mk-share.big .mk-img .ct b{font-size:14px}
@media (max-width:980px){.mk-share.float{left:auto;right:-4%;width:220px}}
@media (max-width:520px){.mk-share.float{position:relative;right:auto;bottom:auto;margin-top:-34px;width:100%;max-width:290px}}

/* hero: a bench player is dragged onto the empty Line 2 right wing (CSS only) */
.mk-drag .c.drop{animation:mkdropspot 6s cubic-bezier(.32,.72,0,1) infinite}
.mk-drag .c.drop b{animation:mkdropname 6s cubic-bezier(.32,.72,0,1) infinite}
.mk-drag .chip.fly{animation:mkchip 6s cubic-bezier(.32,.72,0,1) infinite}
.mk-ghost{position:absolute;z-index:6;display:inline-flex;align-items:center;background:var(--a-text);color:var(--a-bg);border-radius:99em;padding:.4em .9em;font-weight:700;font-size:.9em;box-shadow:0 .8em 1.6em rgba(0,0,0,.45);opacity:0;pointer-events:none;animation:mkghost 6s cubic-bezier(.32,.72,0,1) infinite}
.mk-finger{position:absolute;z-index:7;width:2.6em;height:2.6em;margin:-.6em 0 0 .2em;border-radius:50%;background:color-mix(in srgb,var(--a-text) 25%,transparent);border:2px solid color-mix(in srgb,var(--a-text) 70%,transparent);opacity:0;pointer-events:none;animation:mkfinger 6s cubic-bezier(.32,.72,0,1) infinite}
@keyframes mkdropspot{0%,30%{border-color:var(--a-border2);border-style:dashed;background:transparent;transform:none}38%,52%{border-color:var(--a-gb);border-style:solid;background:var(--a-gsoft);transform:scale(1.04)}60%,100%{border-color:var(--a-border);border-style:solid;background:var(--a-card);transform:none}}
@keyframes mkdropname{0%,55%{opacity:0}62%,100%{opacity:1}}
@keyframes mkchip{0%,10%{opacity:1}18%,55%{opacity:.3}62%,100%{opacity:0}}
@keyframes mkghost{0%,12%{opacity:0;transform:translate(0,0) scale(1)}16%{opacity:1;transform:translate(0,-.4em) scale(1.06)}46%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1.06)}56%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.9)}100%{opacity:0}}
@keyframes mkfinger{0%,8%{opacity:0;transform:translate(0,0)}12%{opacity:1;transform:translate(0,0)}46%{opacity:1;transform:translate(var(--dx),var(--dy))}54%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@media (prefers-reduced-motion: reduce){.mk-ghost,.mk-finger{display:none}.mk-drag .c.drop,.mk-drag .c.drop b,.mk-drag .chip.fly{animation:none}.mk-drag .chip.fly{display:none}}

/* portrait / landscape switch (CSS only: a checkbox and two radios) */
.mk-sw{position:absolute;opacity:0;pointer-events:none}
.mk-turnbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.mk-seg{display:inline-flex;border:1px solid var(--line2);border-radius:12px;padding:3px;background:var(--card)}
.mk-seg label{cursor:pointer;color:var(--muted);font-size:14px;font-weight:600;padding:8px 14px;border-radius:9px;min-height:40px;display:inline-flex;align-items:center}
.mk-rot{cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font-weight:600;font-size:14px}
.mk-rot svg{width:16px;height:16px;color:var(--green)}
.mk-rot .up{display:none}
#mk-pair-lines:checked ~ .mk-turnbar label[for="mk-pair-lines"],#mk-pair-game:checked ~ .mk-turnbar label[for="mk-pair-game"]{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
#mk-rot:checked ~ .mk-turnbar .mk-rot .up{display:inline}
#mk-rot:checked ~ .mk-turnbar .mk-rot .side{display:none}
#mk-rot:focus-visible ~ .mk-turnbar .mk-rot,#mk-pair-lines:focus-visible ~ .mk-turnbar label[for="mk-pair-lines"],#mk-pair-game:focus-visible ~ .mk-turnbar label[for="mk-pair-game"]{outline:2px solid var(--green);outline-offset:3px}
.mk-turn{position:relative;display:grid;place-items:center;min-height:440px;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;padding:24px}
.mk-turn .pair{display:none;grid-area:1/1;width:100%;place-items:center}
#mk-pair-lines:checked ~ .mk-turn .pair.lines,#mk-pair-game:checked ~ .mk-turn .pair.game{display:grid}
.mk-turn .pv,.mk-turn .lv{grid-area:1/1;display:grid;place-items:center;width:100%;transition:transform .6s cubic-bezier(.32,.72,0,1),opacity .45s cubic-bezier(.32,.72,0,1)}
.mk-turn .pv .phone{width:210px}
.mk-turn .lv .phone{width:min(100%,620px)}
.mk-turn .lv{opacity:0;transform:rotate(90deg) scale(.55);visibility:hidden}
#mk-rot:checked ~ .mk-turn .pv{opacity:0;transform:rotate(-90deg) scale(.8);visibility:hidden}
#mk-rot:checked ~ .mk-turn .lv{opacity:1;transform:none;visibility:visible}
.mk-turnnotes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.mk-turnnotes .card h3{display:flex;align-items:center;gap:8px}
.mk-turnnotes .card h3 svg{color:var(--green)}
#mk-rot:not(:checked) ~ .mk-turnnotes .card.p,#mk-rot:checked ~ .mk-turnnotes .card.l{border-color:var(--green)}
@media (max-width:700px){.mk-turnnotes{grid-template-columns:1fr}.mk-turn{min-height:360px}}

/* coming next: voice preview */
.mk-soon{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:1px solid var(--line2);border-radius:99px;padding:4px 11px}
.mk-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.phone .mk-orb{width:7.2em;height:7.2em;border-radius:50%;background:var(--a-green);display:grid;place-items:center;margin:0 auto;box-shadow:0 0 0 1.4em var(--a-gsoft),0 0 0 2.8em color-mix(in srgb,var(--a-gsoft) 50%,transparent);animation:mkorb 2.4s ease-in-out infinite}
.phone .mk-orb svg{width:3em;height:3em;color:var(--a-ongreen)}
@keyframes mkorb{50%{box-shadow:0 0 0 1.8em var(--a-gsoft),0 0 0 3.4em color-mix(in srgb,var(--a-gsoft) 40%,transparent)}}
.phone .mk-said{text-align:center;font-size:1.2em;font-weight:500;line-height:1.35;white-space:nowrap;display:inline-block;clip-path:inset(0 100% 0 0);animation:mktype 5s steps(27) infinite}
@keyframes mktype{0%{clip-path:inset(0 100% 0 0)}55%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion: reduce){.phone .mk-said{animation:none;clip-path:none}.phone .mk-orb{animation:none}}

/* index: three small phones inside the Lineups card */
.mk-strip{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:18px 0 6px;padding:22px 10px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.mk-strip .phone{width:170px}
.mk-more{display:inline-flex;margin-top:14px;font-weight:600;text-decoration:none}

/* site.css names .foot, .card and p for the page; inside a phone they mean the app's own parts */
.phone .foot{font-size:inherit;color:inherit;border-top:0}
.phone p{margin:0}

/* app marks beside an app's own title (the header always carries the RinkNotes mark) */
.apptitle{display:flex;align-items:center;gap:10px}
.appmark{display:inline-flex;flex:none}
.appmark img{height:26px;width:auto}
.kick.apptitle .appmark img{height:22px}
.appmark .on-light{display:none}
:root[data-theme="light"] .appmark .on-dark{display:none}
:root[data-theme="light"] .appmark .on-light{display:inline}
@media (prefers-color-scheme: light){:root:not([data-theme]) .appmark .on-dark{display:none}:root:not([data-theme]) .appmark .on-light{display:inline}}

/* coming-soon apps on the home page */
.soon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.soon-card{display:flex;flex-direction:column;gap:8px}
.soon-card h3{margin:4px 0 0;font-size:17px}
.soon-card p{font-size:15px;flex:1}
.soon-card .pill{align-self:flex-start;margin-top:6px}
.soon-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line2);color:var(--muted);background:var(--bg)}
.soon-ic svg{width:21px;height:21px}
.soon-share{display:flex;gap:10px;align-items:flex-start;margin-top:22px;color:var(--muted);font-size:15px;max-width:720px}
.soon-share svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--green)}
@media (max-width:900px){.soon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.soon-grid{grid-template-columns:1fr}}