/* The Kitchen — PJC tokens from WEBSTANDARD.md. One stylesheet, no build step. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* The `hidden` attribute must beat any class that sets `display:`. Without this, a rule such as
   .whys{display:grid} silently outranks the UA's [hidden]{display:none} and the element stays on
   screen with no error — which is exactly how the "you are all set" banner appeared on a page
   that was not installed. Scripts here hide things by setting .hidden, so this has to hold. */
[hidden]{display:none!important}
:root{
  --navy:#011D48; --yellow:#EBF10B; --green:#648F3F; --teal:#0E7C8A;
  --ground:#F2F5F9; --surface:#fff; --ink:#101A2B; --muted:#57627A;
  --line:#D3DAE6; --field-line:#828FA8;
  --f-d:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-b:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:6px;
  --nav-h:60px;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--f-b);font-size:16px;line-height:1.5;
 overflow-x:hidden;
 padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---- header ---- */
.top{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 11px;
 background:#fff;border-bottom:1px solid var(--line)}
.top img{display:block}
/* 26x22 was half a thumb. The negative margin keeps the arrow drawn where it was while the
   tappable box around it grows to 44px. */
.top .back{font-size:22px;text-decoration:none;line-height:1;display:flex;align-items:center;
 justify-content:center;width:44px;height:44px;margin:-11px -9px -11px -10px;flex:0 0 44px}
.wordmark b{display:block;font-family:var(--f-d);font-size:17px;font-weight:800;color:var(--navy);line-height:1.1}
.wordmark span{font-size:11px;color:var(--muted)}
.me,.signin-link{margin-left:auto;text-decoration:none}
.me{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;
 align-items:center;justify-content:center;font-family:var(--f-d);font-size:12px;font-weight:700}
.signin-link{font-family:var(--f-d);font-size:12px;font-weight:800;letter-spacing:.05em;
 text-transform:uppercase;background:var(--yellow);color:var(--navy);border-radius:var(--r);padding:9px 14px}

/* ---- the pinned day machinery: this is the thing that was hard to tell before ---- */
.jump{display:flex;gap:6px;padding:9px 14px;background:var(--navy);position:sticky;top:0;z-index:30;
 overflow-x:auto;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{font-family:var(--f-d);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
 color:#8FA3C6;padding:6px 13px;border-radius:999px;white-space:nowrap;text-decoration:none}
.jump a.on{background:var(--yellow);color:var(--navy)}
.filters{display:flex;gap:6px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);
 overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip-f{font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;
 padding:5px 12px;white-space:nowrap;text-decoration:none;background:#fff}
.chip-f.on{background:var(--navy);border-color:var(--navy);color:#fff}
.daybar{display:flex;align-items:baseline;gap:8px;padding:10px 16px;background:#E9EEF7;
 border-top:1px solid #CFD9E8;border-bottom:1px solid #CFD9E8;position:sticky;top:39px;z-index:29;
 box-shadow:0 2px 6px rgba(1,29,72,.07)}
.daybar b{font-family:var(--f-d);font-size:13px;font-weight:800;color:var(--navy);
 text-transform:uppercase;letter-spacing:.1em}
.daybar span{font-size:12px;color:var(--muted)}
.daybar em{margin-left:auto;font-style:normal;font-family:var(--f-d);font-size:10px;font-weight:800;
 letter-spacing:.07em;text-transform:uppercase;color:var(--navy);background:var(--yellow);
 border-radius:999px;padding:3px 9px}
.daybody{padding:11px 13px 15px}

/* ---- a game ---- */
.row{position:relative;background:#fff;border:1px solid var(--line);border-left:5px solid var(--c);
 border-radius:12px;padding:12px 14px 13px;margin-bottom:11px;box-shadow:0 2px 5px rgba(1,29,72,.05)}
.rowlink{position:absolute;inset:0;z-index:1;border-radius:12px;text-indent:-9999px;overflow:hidden}
.row>*:not(.rowlink){position:relative;z-index:2;pointer-events:none}
.row .join,.row a{pointer-events:auto}
.r1{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.r1 .t{font-family:var(--f-d);font-size:19px;font-weight:800;color:var(--navy);line-height:1}
.r1 .dur{font-size:12px;color:var(--muted)}
.cnt{margin-left:auto;font-family:var(--f-d);font-size:13px;font-weight:800;color:var(--navy);
 background:#fff;border:1.5px solid var(--navy);border-radius:999px;padding:2px 10px;white-space:nowrap}
.cnt i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.cnt.full{background:var(--navy);color:#fff}
.cnt.full i{color:#9FBCEC}
.row h3{font-family:var(--f-d);font-size:16px;font-weight:700;line-height:1.25;margin-top:5px;
 overflow-wrap:anywhere}
.eventtag{display:inline-block;font-family:var(--f-d);font-size:10px;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;color:var(--navy);background:var(--yellow);border-radius:3px;padding:3px 8px;margin-top:5px}
.r2{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px}
.place{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.place i{width:11px;height:11px;border-radius:3px;background:var(--c);flex:0 0 11px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted);
 border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 7px;background:#fff;white-space:nowrap}
.chip .ic{width:12px;height:12px;flex:0 0 12px}
.chip.lvl{border-color:#C7D2E4;background:#F2F5F9;color:#26334C}
.chip.begin{border-color:#CFE3BC;background:#EFF7E7;color:#3F5C26}
.wx{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:9px;background:#EDF4FF;
 border:1px solid #D6E3F7;border-radius:8px;padding:7px 11px;font-size:12.5px}
.wx b{font-family:var(--f-d);font-size:15px;font-weight:800;color:var(--navy);flex:0 0 auto}
.wx{min-width:0}
.wx>*{min-width:0}
.wx span{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.report{flex-basis:100%;font-size:11px;font-weight:700;border-radius:4px;padding:3px 7px;
 margin-top:4px}
/* The court report sits INSIDE `.wx`, whose `span` rule sets `nowrap` for the wind-and-rain
   figure on the right. `.wx span` is (0,1,1) and reaches this too, so a long enough report
   would have run out of its own box instead of wrapping. The first attempt at this fix was
   `white-space:normal` on `.report` (0,1,0) — which LOST, silently, exactly like every other
   instance of this trap in the file. It needs both classes to outrank the descendant rule. */
.wx .report{white-space:normal}
.report.dry{background:#EFF7E7;color:#3F5C26}
.report.wet{background:#E7F0FA;color:#1B4E7A}
.report.windy{background:#FFF3E0;color:#8A5A06}
.report.unplayable{background:#FFECE6;color:#B4451F}
.r3{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.r4{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.left{font-size:12px;color:var(--muted);flex:1 1 auto;min-width:0}
.avs{display:flex}
.av{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;
 background:var(--navy);color:#fff;font-family:var(--f-d);font-size:10px;font-weight:700;
 border:2px solid #fff;flex:0 0 27px}
.avs .av+.av{margin-left:-8px}
.av.more{background:#E4EAF4;color:var(--navy)}
.bar{height:6px;border-radius:3px;background:#E4EAF4;overflow:hidden;flex:1 1 auto;max-width:110px}
.bar i{display:block;height:100%;background:var(--green)}
.bar.full i{background:#B4451F}
.join{margin-left:auto;font-family:var(--f-d);font-size:12.5px;font-weight:800;letter-spacing:.05em;
 text-transform:uppercase;color:var(--navy);background:var(--yellow);border:0;border-radius:999px;
 padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block;min-height:40px;line-height:20px;
 flex:0 0 auto;white-space:nowrap}
.join.wait{background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy)}
.join.in{background:var(--green);color:#fff}
.join.off{background:#E8EBF0;color:#8A95A8;cursor:not-allowed}
.shut{margin-top:9px;background:#FFF1EC;border:1px solid #F3C9B9;border-left:4px solid #B4451F;
 border-radius:var(--r);padding:9px 11px;font-size:12.5px;color:#5A3226}
.shut b{display:block;font-family:var(--f-d);font-size:10.5px;font-weight:800;color:#B4451F;
 text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.shut em{display:block;font-style:normal;font-size:10.5px;color:#8A6457;margin-top:5px}
.shut-row{background:#F7F8FA;border-left-color:#9AA5B8;box-shadow:none}
.shut-row h3{color:var(--muted);text-decoration:line-through;text-decoration-color:#C3CBD9}
.shut-row .place i{background:#9AA5B8}

/* ---- pages ---- */
.pad{padding:16px}
.narrow{max-width:38rem;margin:0 auto}
.h{font-family:var(--f-d);font-size:24px;font-weight:800;color:var(--navy);margin-bottom:8px}
.lede{font-size:16px;line-height:1.6;margin-bottom:14px}
.muted{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:16px}
.error{background:#FFF1EC;border:1px solid #F3C9B9;border-left:4px solid #B4451F;border-radius:var(--r);
 padding:11px 13px;font-size:14px;color:#5A3226;margin-bottom:14px}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.form label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
 letter-spacing:.07em;margin-bottom:5px}
.form input{width:100%;font-size:16px;font-family:inherit;padding:12px 13px;border:1px solid var(--field-line);
 border-radius:var(--r);background:#fff;color:var(--ink)}
.primary{margin-top:14px;width:100%;font-family:var(--f-d);font-size:15px;font-weight:800;letter-spacing:.04em;
 color:var(--navy);background:var(--yellow);border:0;border-radius:var(--r);padding:14px;cursor:pointer}

/* ---- bottom nav ---- */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:stretch;background:#fff;
 border-top:1px solid var(--line);padding:0 0 env(safe-area-inset-bottom);z-index:40}
/* The links fill the bar's height. They were 24px tall inside a 47px bar, because the padding
   that made the bar look right was on the CONTAINER — so the bottom half of the bar under every
   label was dead to a thumb. A tap target wants ~44px. */
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
 min-height:44px;text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);
 text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:4px 0}
.tabs a.on{color:var(--navy)}
.tabs a.on::before{content:"";display:block;width:16px;height:2.5px;background:var(--yellow);
 margin:0 auto 4px;border-radius:2px}
.tabs a.post{flex:0 0 46px;height:46px;border-radius:50%;background:var(--navy);color:var(--yellow);
 font-size:24px;line-height:44px;margin:-18px 8px 0;padding:0}

@media (min-width:720px){
  main{max-width:46rem;margin:0 auto}
  .daybody{padding:14px 0 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- forms: post a game, and the profile ---- */
.sheet{padding-bottom:28px}
.field{margin-top:16px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#B4451F;background:#FFFBFA}
.felt{font-size:12.5px;font-weight:700;color:#B4451F;margin-top:5px}
.hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:5px}
.block-hint{margin-top:0;margin-bottom:12px}
.form select,.form textarea{width:100%;font-size:16px;font-family:inherit;padding:12px 13px;
 border:1px solid var(--field-line);border-radius:var(--r);background:#fff;color:var(--ink)}
.form select{appearance:none;-webkit-appearance:none;padding-right:38px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23011D48' stroke-width='1.8'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px}
.form textarea{resize:vertical;line-height:1.5}
.two{display:flex;gap:11px}
.two>.field{flex:1 1 0;min-width:0}
.two input{min-width:0}

.seg{border:0;margin-top:18px}
.seg legend{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
 letter-spacing:.07em;margin-bottom:7px;padding:0}
.segopt{display:block;position:relative;margin-bottom:7px}
.segopt input{position:absolute;opacity:0;width:0;height:0}
.segopt span{display:block;font-size:14.5px;font-weight:600;background:#fff;border:1px solid var(--line);
 border-radius:var(--r);padding:12px 13px 12px 40px;cursor:pointer}
.segopt span::before{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);
 width:17px;height:17px;border-radius:50%;border:1.5px solid var(--field-line);background:#fff}
.segopt input:checked+span{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.segopt input:checked+span::before{border:5px solid var(--navy)}
.segopt input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:2px}

/* A field's own label is a caption, so it is set in capitals. A checkbox or radio label is a
   SENTENCE, and a sentence in capitals is slower to read.
   These rules must BEAT `.form label` above, which is specificity 0,1,1 — a bare `.check` is
   0,1,0 and loses to it, which silently turned the rows back into display:block, stacked the
   checkbox above its own text and collapsed the facility color swatch to zero width. */
.form label.check,.form label.placechk{display:flex;text-transform:none;letter-spacing:normal;
 font-size:inherit;font-weight:400;color:inherit;margin-bottom:0}
/* A <label> styled as a button — "Choose a photo" on the profile, which is a label because it
   drives a hidden file input. It sits inside a `.form`, so `.form label` (0,1,1) beat `.btn-sec`
   (0,1,0) and took six properties with it: the button rendered `display:block` (full width
   instead of hugging its text) in the muted caption grey instead of navy. It looked deliberate
   because `.form label` is also uppercase and bold, which is why four sessions walked past it.
   FOURTH time this rule has done this — `.check`, `.placechk`, `.daychk` and now this. Any new
   control that is a <label> inside a `.form` needs its class spelled out here with the element. */
.form label.btn-sec{display:inline-block;font-size:12.5px;font-weight:800;color:var(--navy);
 text-transform:uppercase;letter-spacing:.04em;margin-bottom:0}
.form label.segopt{display:block;text-transform:none;letter-spacing:normal;
 font-size:inherit;font-weight:400;color:inherit;margin-bottom:7px}
.form .placechk i{display:block}
.check{display:flex;gap:11px;align-items:flex-start;margin-top:16px;background:#fff;
 border:1px solid var(--line);border-radius:var(--r);padding:13px;cursor:pointer}
.check input{flex:0 0 20px;width:20px;height:20px;margin-top:1px;accent-color:var(--navy)}
.check span{font-size:13px;color:var(--muted);line-height:1.5}
.check span b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}

.block{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.h2{font-family:var(--f-d);font-size:15px;font-weight:800;color:var(--navy);text-transform:uppercase;
 letter-spacing:.08em;margin-bottom:10px}
.h3{font-family:var(--f-d);font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;
 letter-spacing:.09em;margin:14px 0 7px}
.saved{background:#EFF7E7;border:1px solid #CFE3BC;border-left:4px solid var(--green);
 border-radius:var(--r);padding:11px 13px;font-size:14px;font-weight:600;color:#2F4A1A;margin-bottom:16px}
.note-soft{background:#FFFBE6;border:1px solid #EAE3A8;border-left:4px solid var(--yellow);
 border-radius:var(--r);padding:11px 13px;font-size:13.5px;line-height:1.55;margin-bottom:4px}

/* ---- the profile ---- */
.whoami{display:flex;gap:14px;align-items:center}
.whoami .h{margin-bottom:2px;font-size:21px;overflow-wrap:anywhere}
.sub{font-size:12.5px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.bigav{flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;
 display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
 font-family:var(--f-d);font-size:21px;font-weight:700}
.bigav img{width:64px;height:64px;object-fit:cover;display:block}
.me.photo{overflow:hidden;padding:0}
.me.photo img{width:34px;height:34px;object-fit:cover;display:block}
.av.photo{overflow:hidden;padding:0;background:#E4EAF4}
.av.photo img{width:27px;height:27px;object-fit:cover;display:block}
.avedit{display:flex;gap:14px;align-items:center}
.avbtns{min-width:0}
.btn-sec{display:inline-block;font-family:var(--f-d);font-size:12.5px;font-weight:800;letter-spacing:.04em;
 text-transform:uppercase;color:var(--navy);background:#fff;border:1.5px solid var(--navy);
 border-radius:999px;padding:9px 16px;cursor:pointer;text-decoration:none}
.btn-sec.danger{border-color:#B4451F;color:#B4451F;margin-top:4px}
.btn-plain{display:block;margin-top:8px;background:0;border:0;padding:0;font:inherit;font-size:12.5px;
 color:var(--muted);text-decoration:underline;cursor:pointer}

.places{display:grid;grid-template-columns:1fr;gap:7px}
.placechk{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
 border-radius:var(--r);padding:10px 12px;cursor:pointer;min-width:0}
.placechk input{flex:0 0 19px;width:19px;height:19px;accent-color:var(--navy)}
.placechk i{flex:0 0 10px;width:10px;height:10px;border-radius:3px}
.placechk span{font-size:13.5px;font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.placechk em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted)}
.placechk.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}

.minilist{list-style:none}
.minilist li{border-left:4px solid var(--c);background:#fff;border:1px solid var(--line);
 border-left-width:4px;border-radius:var(--r);margin-bottom:7px}
.minilist a{display:block;padding:10px 13px;text-decoration:none;min-width:0}
.minilist b{display:block;font-family:var(--f-d);font-size:13px;font-weight:800;color:var(--navy)}
.minilist span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.minilist .wait{display:inline-block;font-style:normal;font-size:10.5px;font-weight:800;
 letter-spacing:.06em;text-transform:uppercase;color:#8A5A06;background:#FFF3E0;
 border-radius:3px;padding:2px 7px;margin-top:3px}

@media (min-width:480px){ .places{grid-template-columns:1fr 1fr} }

/* ---- "put it on your home screen" (/install) ---- */
.install .lede{margin-bottom:18px}

/* What it will look like when it is done. The tile uses the real icon at the real proportion. */
.homedemo{margin:18px 0 22px}
.hd-screen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 12px;padding:18px 16px 20px;
 max-width:330px;margin:0 auto;
 border-radius:16px;background:linear-gradient(165deg,#0A2D63 0%,#011D48 55%,#011533 100%);
 box-shadow:0 6px 18px rgba(1,29,72,.22)}
.hd-tile{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.hd-tile.ghost::before{content:"";display:block;width:100%;aspect-ratio:1;border-radius:22%;
 background:rgba(255,255,255,.085)}
.hd-tile.ghost::after{content:"";display:block;width:70%;height:6px;border-radius:3px;
 background:rgba(255,255,255,.085)}
.hd-tile.real img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:22%;
 box-shadow:0 3px 10px rgba(0,0,0,.35);background:#fff}
.hd-tile.real span{font-size:10.5px;font-weight:600;color:#fff;text-align:center;line-height:1.2;
 white-space:nowrap}

/* Three reasons, each one line of weight and one of explanation. */
.whys{list-style:none;display:grid;gap:9px;margin:0 0 24px}
.whys li{display:flex;align-items:flex-start;gap:11px;background:#fff;
 border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;
 font-size:13px;color:var(--muted);line-height:1.5}
.whys li>div{min-width:0}
.whys li .whyic{flex:0 0 22px;color:var(--navy);margin-top:1px}
.whys li .whyic svg{width:22px;height:22px;display:block}
.whys li b{display:block;font-family:var(--f-d);font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.whys li em{font-style:normal;font-weight:700;color:#8A5A06}

/* Device tabs. Links to anchors, so they still work with the script off. */
.picker{display:flex;gap:6px;margin-bottom:4px;overflow-x:auto;scrollbar-width:none}
.picker::-webkit-scrollbar{display:none}
.picker a{flex:1 1 auto;text-align:center;font-family:var(--f-d);font-size:12px;font-weight:800;
 letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:#fff;
 border:1.5px solid var(--line);border-radius:999px;padding:10px 12px;text-decoration:none;
 white-space:nowrap}
.picker a.on{background:var(--navy);border-color:var(--navy);color:#fff}

.platblock{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);scroll-margin-top:12px}
.plat-note{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:6px}

/* The steps. A number you cannot lose, because the whole page is one instruction. */
.steps{list-style:none;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding:16px 0 16px 46px;
 border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0;padding-bottom:4px}
.steps li::before{content:counter(step);position:absolute;left:0;top:15px;width:30px;height:30px;
 border-radius:50%;background:var(--yellow);color:var(--navy);font-family:var(--f-d);font-size:15px;
 font-weight:800;display:flex;align-items:center;justify-content:center}
.steps li b{display:block;font-family:var(--f-d);font-size:16px;font-weight:700;color:var(--navy);
 line-height:1.3;margin-bottom:5px}
.steps li p{font-size:14px;line-height:1.6;color:var(--ink)}
.steps li p b{display:inline;font-family:inherit;font-size:inherit;color:inherit}

/* Drawings of the controls — not screenshots, which age the day a vendor moves a button. */
.stepart{margin-top:11px;background:var(--ground);border:1px solid var(--line);border-radius:8px;
 padding:10px 11px}
.stepart svg{width:21px;height:21px;display:block}
.art-bar{display:flex;align-items:center;gap:26px;justify-content:center}
.art-bar.right{justify-content:flex-end}
.art-ic{display:inline-flex;color:#8D99AE;padding:6px;border-radius:7px}
.art-ic.on{color:var(--navy);background:var(--yellow);box-shadow:0 0 0 3px rgba(235,241,11,.4)}
.art-sheet{background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.art-rowi{display:flex;align-items:center;gap:11px;padding:10px 12px;font-size:13.5px;
 color:var(--muted);border-bottom:1px solid var(--line)}
.art-rowi:last-child{border-bottom:0}
.art-rowi svg{width:18px;height:18px;flex:0 0 18px}
.art-rowi.on{background:var(--yellow);color:var(--navy);font-weight:700}
.art-nav{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
 border-radius:7px;padding:10px 12px;font-size:13px}
.art-nav .dim{color:#9AA5B8}
.art-nav .ttl{flex:1;text-align:center;font-weight:700;color:var(--ink);font-size:12.5px}
.art-nav .act{font-weight:800;color:var(--navy);background:var(--yellow);border-radius:5px;padding:4px 11px}
.art-omni{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
 border-radius:999px;padding:7px 9px 7px 15px}
.art-omni .url{flex:1;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}
.installbtn-wrap .primary{margin-top:8px}

/* ---- the notification switch ---- */
.pushbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px}
.pushsay{font-size:13.5px;color:var(--muted);line-height:1.55}
.pushbtns{margin-top:10px}
.pushbtns:empty{display:none}

/* ---- admin screens ---- */
.closurerow{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 13px}
.closurerow>div:first-child{min-width:0}
.closurerow b{display:block;font-family:var(--f-d);font-size:13.5px;font-weight:800;color:var(--navy);
 overflow-wrap:anywhere}
.closurerow span{display:block;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.closurerow .byline{font-size:11px;color:#8A95A8;margin-top:2px}
.closurerow form{flex:0 0 auto}
/* Keep the small look, give it a real tap target. These were 29px tall — "Reopen" undoes a
   facility closure and "Stop" ends a repeating rule, both of them on a phone. */
.closurerow .btn-sec{padding:7px 13px;font-size:11px;min-height:40px;display:inline-flex;
 align-items:center}
.minilist li:has(.closurerow){padding:0}
.grantrow{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:9px}
.grantwho{display:flex;gap:10px;align-items:center;min-width:0}
.grantwho b{display:block;font-family:var(--f-d);font-size:14px;font-weight:700;overflow-wrap:anywhere}
.grantwho span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.grantrow .field{margin-top:11px}
.grantrow .btn-sec{margin-top:11px}

/* ---- repeating games ---- */
.days{display:flex;gap:5px;flex-wrap:wrap}
.daychk{position:relative;flex:1 1 44px;min-width:44px}
.daychk input{position:absolute;opacity:0;width:0;height:0}
.daychk span{display:block;text-align:center;font-family:var(--f-d);font-size:11.5px;font-weight:800;
 letter-spacing:.03em;color:var(--muted);background:#fff;border:1px solid var(--line);
 border-radius:var(--r);padding:11px 2px;cursor:pointer}
.daychk input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.daychk input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:2px}
.form label.daychk{display:block;text-transform:none;letter-spacing:normal;margin-bottom:0;
 font-size:inherit;font-weight:400;color:inherit}

/* ---- the by-facility view ---- */
.court{background:#fff;border:1px solid var(--line);border-left:5px solid var(--c);border-radius:12px;
 margin-bottom:11px;box-shadow:0 2px 5px rgba(1,29,72,.05);overflow:hidden}
.court.open{box-shadow:0 4px 14px rgba(1,29,72,.1)}
.courthead{display:flex;align-items:center;gap:12px;padding:13px 14px 10px;text-decoration:none;
 min-width:0}
.courtname{min-width:0}
.courtname b{display:block;font-family:var(--f-d);font-size:15.5px;font-weight:700;color:var(--ink);
 line-height:1.25;overflow-wrap:anywhere}
.courtname span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.chev{margin-left:auto;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#F2F5F9;
 color:var(--navy);font-size:17px;font-weight:700;display:inline-flex;align-items:center;
 justify-content:center;line-height:1}
.counts{display:flex;gap:7px;padding:0 14px 11px}
.cpill{flex:1 1 0;min-width:0;background:#F2F5F9;border-radius:8px;padding:8px 6px;text-align:center}
.cpill b{display:block;font-family:var(--f-d);font-size:17px;font-weight:800;color:var(--navy);line-height:1}
.cpill span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
 color:var(--muted);margin-top:3px}
.cpill em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:1px}
.cpill.none b{color:#A6B0C2}
.fees{border-top:1px solid var(--line);padding:10px 14px;font-size:12.5px;color:var(--muted)}
.fees>b{display:block;font-family:var(--f-d);font-size:11px;font-weight:800;letter-spacing:.07em;
 text-transform:uppercase;color:var(--navy);margin-bottom:4px}
.fees.free{background:#F3F9EE}
.fees.free>b{color:#3F5C26}
.fees p{line-height:1.5}
.fees .unknown{color:#8A5A06}
.feebits{display:flex;flex-wrap:wrap;gap:6px}
.feebits span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;
 font-size:12px;color:var(--ink);white-space:nowrap}
.feebits b{font-family:var(--f-d);font-size:9.5px;font-weight:800;letter-spacing:.07em;
 text-transform:uppercase;color:var(--muted);margin-right:5px}
.courtopen{border-top:1px solid var(--line);background:#FAFBFD;padding:4px 14px 13px}
.courtopen .h3{margin:12px 0 6px}
.cgame{border-left:3px solid var(--c);background:#fff;border:1px solid var(--line);border-left-width:3px;
 border-radius:var(--r);margin-bottom:7px}
.cgame>a{display:block;padding:9px 11px;text-decoration:none;min-width:0}
.cgame b{font-family:var(--f-d);font-size:13.5px;font-weight:800;color:var(--navy);margin-right:7px}
.cgame span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.cgame.shut{background:#F7F8FA;border-left-color:#9AA5B8}
.cgame.shut b{color:var(--muted);text-decoration:line-through;text-decoration-color:#C3CBD9}
.cwho{display:flex;flex-wrap:wrap;gap:4px;padding:0 11px 10px}
.who{font-size:11.5px;color:#26334C;background:#EEF2F8;border-radius:999px;padding:3px 9px;white-space:nowrap}
.swatch{flex:0 0 12px;width:12px;height:12px;border-radius:3px;display:block}

/* The fee cards are forms but are NOT inside a `.form` wrapper — deliberately, because
   `.form label` would capture their captions — so these rules are a hand-kept SECOND COPY of
   the form styling. That is the hazard: a control type missing from the selector below falls
   straight through to the browser's defaults and renders as an unstyled box in a monospace
   font. `textarea` was missing and the "Anything else" field landed exactly there the moment
   it stopped being an `<input>`. **Add any new control type here as well as to `.form`.** */
.grantrow .field>label{display:block;font-size:12px;font-weight:700;color:var(--muted);
 text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.grantrow select,.grantrow input[type=text],.grantrow textarea{width:100%;font-size:16px;
 font-family:inherit;padding:11px 12px;border:1px solid var(--field-line);
 border-radius:var(--r);background:#fff;color:var(--ink)}
.grantrow textarea{resize:vertical;line-height:1.45}
.grantrow select{appearance:none;-webkit-appearance:none;padding-right:38px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23011D48' stroke-width='1.8'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px}
.grantrow .btn-sec{display:block;width:100%;text-align:center}

/* ---- who is here right now ---- */
.herenow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 14px 11px;
 background:#EFF7E7;border:1px solid #CFE3BC;border-radius:8px;padding:8px 11px;font-size:12.5px}
.herenow .dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--green)}
.herenow b{font-family:var(--f-d);font-size:13px;font-weight:800;color:#3F5C26}
.herenow span:last-child{color:#5E7A45;font-size:11.5px}
.checkin{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;
 margin:10px 0}
.checkrow{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;margin-top:8px}
.checkrow label{flex:1 1 100%;font-size:11px;font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;color:var(--muted)}
.plin{flex:0 0 74px;width:74px;font-size:16px;font-family:inherit;padding:9px 10px;
 border:1px solid var(--field-line);border-radius:var(--r)}
.checkrow .btn-sec{flex:1 1 auto}
.herewho{padding:0 0 10px}
.who.here{background:#EFF7E7;color:#3F5C26;font-weight:700}
.pastgames{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.pastgames summary{font-family:var(--f-d);font-size:11px;font-weight:800;letter-spacing:.07em;
 text-transform:uppercase;color:var(--navy);cursor:pointer;padding:4px 0}
.cgame.past{opacity:.85}
.cgame.past b{color:var(--muted)}

/* ---- one game, in full ---- */
.gamepage{padding:16px;max-width:38rem;margin:0 auto;border-left:5px solid var(--c)}
.ghead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.gwhen b,.gtime b{font-family:var(--f-d);font-weight:800;color:var(--navy);display:block;line-height:1.1}
.gwhen b{font-size:14px;text-transform:uppercase;letter-spacing:.09em}
.gtime b{font-size:26px}
.gwhen span,.gtime span{font-size:12px;color:var(--muted)}
.gtime{margin-left:auto;text-align:right}
.gtitle{margin-top:10px;font-size:22px;overflow-wrap:anywhere}
.gplace{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--muted);margin-top:4px}
.gplace i{flex:0 0 11px;width:11px;height:11px;border-radius:3px;background:var(--c)}
.gchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gnote{margin-top:12px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--c);
 border-radius:var(--r);padding:11px 13px;font-size:14px;line-height:1.55}
.gsign{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.gsign .join{margin-left:0}
/* The court report and the "who is here" strip on the GAME PAGE, where each stands on its own
   rather than tucked inside a list row. Both base rules are sized for the row — `.report` is
   11px in a 3px box, `.herenow` carries `margin:0 14px` to sit inside the row's padding — and
   the first version of this override set only `margin-top`, so on the game page the strip came
   out indented 14px from everything else and the report sat as a thin bar beside a much heavier
   weather box. Reset the SIDE margins explicitly, and give the report the same weight as `.wx`
   so the two read as a pair. (Same lesson as `.form label`: a rule written for one context does
   not stop applying in another just because the markup looks different.) */
.report.standalone,.herenow.standalone{display:flex;margin:10px 0 0;flex-basis:auto}
.report.standalone{align-items:center;font-size:12.5px;padding:8px 11px;border-radius:8px;
 border:1px solid transparent}
.report.standalone.dry{border-color:#CFE3BC}
.report.standalone.wet{border-color:#C9DCF0}
.report.standalone.windy{border-color:#EFD9AE}
.report.standalone.unplayable{border-color:#F3C9B9}
.gpeople{display:flex;flex-direction:column;gap:7px}
.gperson{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
 border-radius:var(--r);padding:7px 11px;min-width:0}
.gperson b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.gperson em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--muted);
 background:#F2F5F9;border-radius:999px;padding:2px 8px;white-space:nowrap}
.chat{list-style:none;display:flex;flex-direction:column;gap:8px}
.chat li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 12px}
.chat b{display:block;font-family:var(--f-d);font-size:12px;font-weight:800;color:var(--navy)}
.chat span{display:block;font-size:14px;line-height:1.5;margin-top:2px;overflow-wrap:anywhere}
.chat em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:3px}
.saybox{margin-top:12px}
.saybox .btn-sec{margin-top:9px}
.conds{display:flex;flex-wrap:wrap;gap:7px}
.cond{flex:1 1 140px;font-family:var(--f-d);font-size:12.5px;font-weight:800;letter-spacing:.03em;
 border:1.5px solid var(--line);border-radius:var(--r);padding:12px 10px;cursor:pointer;background:#fff;
 color:var(--ink)}
.cond.dry{border-color:#CFE3BC;background:#EFF7E7;color:#3F5C26}
.cond.wet{border-color:#C9DCF0;background:#E7F0FA;color:#1B4E7A}
.cond.windy{border-color:#EFD9AE;background:#FFF3E0;color:#8A5A06}
.cond.unplayable{border-color:#F3C9B9;background:#FFECE6;color:#B4451F}
/* 16px, not 12.5: iOS Safari zooms the whole page when a form control under 16px takes focus,
   and this field exists to be tapped (tapping it selects the address to copy). The text is
   longer than the box either way and scrolls inside it. */
.copyurl{width:100%;font-size:16px;font-family:ui-monospace,Menlo,monospace;padding:9px 11px;
 border:1px solid var(--field-line);border-radius:var(--r);background:#F8FAFC;color:var(--ink);margin-top:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.block .counts{padding:0}

/* ---- how busy it is ----
   Gary, 2026-11-04: green when there are enough to play, through yellow and orange to red as a
   place fills past what its nets can hold. The two bad ends are both worth seeing: too few and
   there is no game, too many and you queue all evening.
   Color is never alone — every state carries its own words beside it (SPEC rule 2). */
.t-need    { --tc:#1B4E7A; --tbg:#E7F0FA; --tbd:#C9DCF0 }
.t-good    { --tc:#3F5C26; --tbg:#EFF7E7; --tbd:#CFE3BC }
.t-busy    { --tc:#8A5A06; --tbg:#FFF8E6; --tbd:#EFD9AE }
.t-crowded { --tc:#A8520E; --tbg:#FFF1E3; --tbd:#F0C79B }
.t-over    { --tc:#B4451F; --tbg:#FFECE6; --tbd:#F3C9B9 }
.t-full    { --tc:#4B4FA6; --tbg:#EEEFFA; --tbd:#CDCFEE }

.left.t-need,.left.t-good,.left.t-busy,.left.t-crowded,.left.t-over,.left.t-full{
  color:var(--tc);font-weight:600}
.bar i{background:var(--tc,var(--green))}
.cnt.t-need,.cnt.t-good,.cnt.t-busy,.cnt.t-crowded,.cnt.t-over,.cnt.t-full{
  background:var(--tbg);border-color:var(--tbd);color:var(--tc)}
.cnt i{color:var(--tc);opacity:.7}

/* the band on the game page */
.band{margin-top:14px;background:var(--tbg);border:1px solid var(--tbd);border-radius:var(--r);
 padding:11px 13px}
.band b{font-family:var(--f-d);font-size:17px;font-weight:800;color:var(--tc)}
.band span{font-size:13px;color:var(--tc);margin-left:8px}
.band .bar{max-width:none;margin-top:9px;background:#fff}
.band em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:7px}

/* ---- indoor or outdoor, which Gary wanted to read at a glance ---- */
.chip.where{font-weight:800;letter-spacing:.03em;border-width:1.5px}
.chip.where.in{background:#EEF0FA;border-color:#C6CBEC;color:#3A3F96}
.chip.where.out{background:#E9F4FB;border-color:#B9DBF0;color:#15618E}
.chip.where .ic{width:13px;height:13px;flex:0 0 13px}

/* ---- being in a game has to look like something ---- */
.join.in{background:var(--green);color:#fff;box-shadow:inset 0 0 0 1.5px #4D7230;
 display:inline-flex;align-items:center;gap:7px}
.join .tick{width:15px;height:15px;flex:0 0 15px}
.join.waitl{background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy)}
.join.signin{background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy)}
.gsign.playing{background:#F3F9EE;border:1px solid #CFE3BC;border-radius:var(--r);padding:11px 13px}

/* Tap targets. The audit's floor is 38px and Apple's guidance is 44; these were 34 and 35.
   The checkboxes it also flags are false positives — their label is the target, not the box. */
.btn-sec{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.closurerow .btn-sec{min-height:38px}   /* denser row, still comfortably tappable */
.me,.me.photo{width:40px;height:40px}
.me.photo img{width:40px;height:40px}
/* `.wx span` (0,1,1) beats `.report` (0,1,0) on font-size — the same trap a sixth time, caught
   by __spec() rather than by eye. The report keeps its own size inside the weather band. */
.wx .report{font-size:11px}

/* ======================================================================
   FLAIR. Gary, 2026-11-04: "a little more flare in the UI. It kind of
   looks a little bit flat."

   It follows the club's established pattern rather than inventing one:
   the letters and the member directory both lead with a NAVY MASTHEAD
   carrying the crest on a white plate over a YELLOW RULE, and that is
   what the top of this app now does too.

   The one rule that is easy to break and must not be: yellow #EBF10B is
   NEVER text on a light ground — about 1.1:1 on white. It is a band, a
   rule, a focus ring, or a fill with navy on top of it. Never a letter
   on white. (WEBSTANDARD.md, and the reason it is called out there is
   that everyone breaks it by accident.)
   ====================================================================== */

/* ---- the masthead: navy, crest on a plate, yellow rule under it ---- */
.top{background:linear-gradient(180deg,#02255A 0%,var(--navy) 100%);border-bottom:0;
 box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.crest{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
 border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);flex:0 0 40px}
.crest img{display:block;border-radius:50%}
.wordmark b{color:#fff;letter-spacing:-.01em}
.wordmark span{color:#9FB6DA}
.top .back{color:#fff;width:40px;height:40px;display:inline-flex;align-items:center;
 justify-content:center;border-radius:50%;background:rgba(255,255,255,.10);flex:0 0 40px}
.me{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.22)}
.me.photo{box-shadow:0 2px 6px rgba(0,0,0,.22)}
/* the day jumper sits directly under the masthead, so they read as one navy block */
.jump{border-top:1px solid rgba(255,255,255,.08);
 box-shadow:inset 0 -3px 0 var(--yellow)}

/* ---- the day bar gets its own weight ---- */
.daybar{background:linear-gradient(180deg,#EEF2F9 0%,#E4EAF4 100%);
 box-shadow:0 3px 10px rgba(1,29,72,.09);top:42px}
.daybar b{position:relative;padding-left:12px}
.daybar b::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
 width:4px;height:14px;border-radius:2px;background:var(--yellow)}

/* ---- cards: lift them off the page ---- */
.row{box-shadow:0 1px 2px rgba(1,29,72,.06),0 6px 16px -6px rgba(1,29,72,.18);
 transition:box-shadow .18s ease,transform .18s ease}
.row::after{content:"";position:absolute;left:-5px;top:0;bottom:0;width:5px;
 background:linear-gradient(180deg,var(--c) 0%,color-mix(in srgb,var(--c) 62%,#000) 100%);
 border-radius:12px 0 0 12px;pointer-events:none}
.row:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(1,29,72,.08)}
.row h3{letter-spacing:-.01em}
.r1 .t{font-size:21px;letter-spacing:-.02em}

/* ---- the buttons feel pressable ---- */
.join{box-shadow:0 2px 0 rgba(1,29,72,.18),0 4px 12px -4px rgba(1,29,72,.35);
 transition:transform .12s ease,box-shadow .12s ease}
.join:active{transform:translateY(2px);box-shadow:0 0 0 rgba(1,29,72,.18)}
.join.in{box-shadow:inset 0 0 0 1.5px #4D7230,0 2px 0 rgba(44,70,24,.35)}
.primary{box-shadow:0 2px 0 rgba(1,29,72,.18),0 6px 18px -6px rgba(1,29,72,.4);
 transition:transform .12s ease}
.primary:active{transform:translateY(2px)}

/* ---- the weather band reads like sky ---- */
.wx{background:linear-gradient(180deg,#F2F8FF 0%,#E6EFFC 100%)}

/* ---- the courts cards and the counts ---- */
.court{box-shadow:0 1px 2px rgba(1,29,72,.06),0 6px 16px -6px rgba(1,29,72,.16)}
.cpill{background:linear-gradient(180deg,#F6F8FC 0%,#EDF1F8 100%)}
.cpill b{letter-spacing:-.02em}

/* ---- an empty day should not be a bare sentence ---- */
.empty{position:relative;padding:54px 24px 60px}
.empty::before{content:"";display:block;width:76px;height:76px;margin:0 auto 16px;
 background:url("/img/pjc-icon-180.png") center/contain no-repeat;opacity:.16}

/* the section headings get the club's yellow rule, which is where yellow belongs */
.h2{position:relative;padding-left:11px}
.h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
 width:3px;height:13px;border-radius:2px;background:var(--yellow)}

/* why a game is in the suggested view — never a mystery */
.suggest{margin:0 14px 10px;background:#EEF2FA;border:1px solid #D6DEEE;border-radius:var(--r);
 padding:8px 12px;font-size:12.5px;color:#334A6E}
.suggest.none{background:#FFFBE6;border-color:#EAE3A8;color:#5B5420}
.suggest a{color:var(--navy);font-weight:700}