/* =====================================================================
   app.css -- THE CARD SYSTEM'S SHARED LAYER.
   Lifted close to verbatim from the reference page agreed with Mako on
   device, 2026-09-19 (claude.ai artifact "RAVI card system, reference").
   Every value below is the agreed value. The reference is the spec.

   HOW IT IS LINKED: by relative path, AFTER fonts.css and BEFORE the
   page's own <style>, so a page rule of equal specificity still wins.
   A page links this file only when that page is converted.

   LEFT OUT ON PURPOSE, and nothing else: the reference's :root
   safe-area padding, html scroll-padding-top and html/body height:100%.
   Those are layout, not surface, and each page keeps its own.

   ALSO CARRIED, AND NOT IN THE REFERENCE: patterns settled on device
   on the calendar that every page uses, in their own section below.
   ===================================================================== */

:root{
  color-scheme:dark;
  /* ground and ink */
  --ground:#08090A;            /* near-void. Chosen over #121316 and #17191C */
  --bone:#EDEAE3; --ink:#121316; --muted:#A4A7AD; --faint:#4A4E55; --track:#2A2D32; --hi:#34383E;
  /* identity colours: players, event types, over-time */
  --p1:#5DA5EE; --p2:#EE5F9C;                               /* player 1 and Yours blue, player 2 and Theirs pink */
  --p1t:rgba(93,165,238,.14); --p2t:rgba(238,95,156,.14);   /* score-button stain ("light") */
  --p1r:rgba(93,165,238,.50); --p2r:rgba(238,95,156,.50);   /* score-button press */
  --over:#E5484D;
  /* THE GLASS RECIPE ("specular"): near-clear body, light caught along the top curve fading
     down the sides, a faint return at the base, a soft glow inside the base. No full outline. */
  --glass:rgba(255,255,255,.045);
  --glass-press:rgba(255,255,255,.14);
  --glass-base:inset 0 -10px 18px -14px rgba(255,255,255,.14);
  --rim-light:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.10) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.10));
  /* FROSTED CHROME: the bar, the counter's strip, menus. Real blur, "clearest" strength. */
  --frost:rgba(36,37,38,.22);
  --frost-solid:rgba(36,37,38,.94);
  --frost-rim:rgba(255,255,255,.10);
  --on:rgba(255,255,255,.14);      /* the bar's "you are here" pill */
  --tint:transparent;             /* the page colour in the glass; pages.js sets it from RAVI_PAGES */
  --cg:.30;                       /* THE COLOURED GLASS: how much colour a coloured surface carries */
  --recess:rgba(0,0,0,.35);        /* tracks that hold options: segmented controls, pick lists */
  --scrim:rgba(0,0,0,.35);
  /* type: faces and rungs unchanged from the type-scale ARCH item */
  --disp:"Poppins",system-ui,-apple-system,sans-serif;
  --text:"Nunito",system-ui,-apple-system,sans-serif;
  --barH:56px;
  /* THE NAMED SIZES. Every control height on every page reads one of
     these, never a bare number, so the scale stays a decision made once. */
  --sz-row:44px;       /* menu rows, fields, full-width actions */
  --sz-track:40px;      /* a recessed track, and search fields */
  --sz-seg:34px;        /* a segment inside a track, and colour swatches */
  --sz-seg-tall:38px;   /* the counter strip only: a segment in its Layout track */
  --sz-sm:36px;         /* round buttons and compact pill buttons */
  --r-cut:6px;          /* the inner corner of a cut track (the counter's score buttons, .seg.multi) */
  --gap-cut:3px;        /* the gap between segments in a cut track (same two) */
  --sz-score:48px;      /* counter only: the main score buttons, read at arm's length */
  --sz-score-min:38px;  /* counter only: the slim-banner score buttons */
  --sz-seam:50px;       /* counter only: Pass turn */
  --ease:cubic-bezier(.22,.72,.2,1);
  /* THE TOP CLEAR LINE. iOS draws its own fade under the status bar in the
     installed app, and we cannot change its depth. Nothing we draw that
     must stay sharp sits above this line. Tune this one number. */
  --top-clear:calc(env(safe-area-inset-top,0px) + 28px);
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
/* THE SCROLLBAR STAYS PUT. Without this, a page that stops being
   scrollable -- a list collapsing, a filter narrowing it -- loses its
   scrollbar, the viewport widens by its width, and everything reflows
   mid-animation. That is a jump, and it is not worth the 15px. */
html{scrollbar-gutter:stable;overflow-y:scroll}
/* EVERY PAGE IS AT LEAST ONE FULL SCREEN TALL. In the installed app, with
   the status bar drawn over the page, a document shorter than the screen
   is laid out against the height the app reports (the screen less the
   status bar), and the floating bar rides up by the difference. Found on
   the counter, 2026-09-22. 100vh is the full screen there. */
body{min-height:100vh}
body{background:var(--ground);color:var(--bone);font-family:var(--text);font-size:15px;line-height:1.4;
  font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.ttl{font-family:var(--disp);font-weight:700;margin:0;letter-spacing:-.005em}   /* titles are SENTENCE CASE */

/* press feedback, every button */
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease}
button:active{transform:scale(.96);transition-duration:.08s}
button:disabled{opacity:.4;pointer-events:none}                   /* dim means disabled, holds its place */
button:focus-visible{outline:2px solid var(--bone);outline-offset:2px}

/* .glass: the one glass recipe. Buttons, surfaces, event cards and the
   glass group (.doors) all use it. */
.glass,.doors{position:relative;background:linear-gradient(var(--tint),var(--tint)),var(--glass);box-shadow:var(--glass-base)}
/* THE COLOURED GLASS (colour system, Mako 2026-10-15). One recipe for every coloured surface:
   its colour at --cg inside the glass body, the usual rim and base glow, frosted, and no solid
   base, so what passes behind shows through. A surface opts in with class .cg and its colour
   as --c (an rgb triple); its background is the glass recipe with that colour on top. On a
   page marked glass:true, the page's glass outside menus is coloured glass in the page colour.
   Menus, the bar, the strip and the two plates stay clear (see-through chrome). */
.cg{background:linear-gradient(rgba(var(--c),var(--cg)),rgba(var(--c),var(--cg))),var(--frost-solid)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .cg{background:linear-gradient(rgba(var(--c),var(--cg)),rgba(var(--c),var(--cg))),var(--glass)}
  .cg,html.paged main .glass,html.paged main .doors{-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
  /* a surface carries the frost once: plain glass inside glass (a group's rows, a card's buttons) adds none;
     a coloured surface (.cg) always frosts, wherever it sits */
  .glass .glass:not(.cg),.doors .glass:not(.cg),.cg .glass:not(.cg),html.paged main .glass .glass:not(.cg),html.paged main .doors .glass:not(.cg){-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* on a page colour, grey text inside glass is lifted to stay readable (4.4:1 or better on the lightest, Settings) */
html.paged .glass,html.paged .doors{--muted:#DCDEE2}
.glass::before,.doors::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--rim-light);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.btn{border-radius:999px}
.btn:active{background:linear-gradient(var(--tint),var(--tint)),var(--glass-press)}
.circ{width:var(--sz-sm);height:var(--sz-sm);display:grid;place-items:center}
.circ svg{width:18px;height:18px}

/* .frost: see-through chrome that blurs what passes behind it */
.frost{background:var(--frost-solid);border:1px solid var(--frost-rim)}
/* Blur is an enhancement. Without it the chrome is near-opaque, so text behind stays readable. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.frost{background:var(--frost);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}}

/* the bar: Facebook's floating pill, icons only */
.bar{position:fixed;left:12px;right:12px;bottom:max(4px,calc(env(safe-area-inset-bottom,0px) - 12px));max-width:456px;margin:0 auto;
  height:var(--barH);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:20;padding:5px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tab{border-radius:999px;display:grid;place-items:center}
.tab svg{width:24px;height:24px}
/* THE STRIP'S LAYOUT TRACK is the one tall track: its options are --sz-seg-tall (38), so the
   track is 44 like the strip's three slots and sits 6 from the strip's top and bottom. */
.bar.strip .seg button{height:var(--sz-seg-tall)}
.tab:active,.tab.on{background:var(--on-pc,var(--on))}
.tab.on{color:var(--on-ink,inherit)}
/* ICONS: each carries an outline drawing (.ico) and a filled one (.icf). The filled one
   shows while its slot is on: shape as well as shade. Gaps in a filled icon are real holes
   cut by its own mask, so every mask id on a page must be unique (pages.js numbers them). */
svg .icf{display:none}
svg .icb{display:none} /* a hub-only drawing at the hub's thinner line (Trade's handshake); index.html shows it */
.on > svg .ico{display:none}
.on > svg .icf{display:inline}

/* menus: frosted panel rising from the bottom over a light scrim */
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:30}
.scrim.show{opacity:1;pointer-events:auto;transition-duration:.3s}
.panel{position:fixed;left:12px;right:12px;bottom:calc(max(4px,calc(env(safe-area-inset-bottom,0px) - 12px)) + var(--barH) + 8px);max-width:456px;margin:0 auto;
  border-radius:24px;padding:16px;z-index:40;box-shadow:0 14px 36px rgba(0,0,0,.5);
  /* THE CAP COUNTS THE BAR. The panel sits above the bar, so a cap of the
     whole screen let a tall menu run off the top by the bar's height. */
  max-height:calc(100% - max(4px,calc(env(safe-area-inset-bottom,0px) - 12px)) - var(--barH) - 8px - var(--top-clear) + 10px);
  display:flex;flex-direction:column;overflow:hidden;
  /* A MENU ARRIVES SLOWER THAN IT LEAVES (STYLE.md, Motion): it glides up
     and settles in .34s, and drops away in .2s. */
  transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .2s cubic-bezier(.4,0,1,1),opacity .2s ease}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.panel{-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}}
.panel.show{transform:none;opacity:1;pointer-events:auto;transition:transform .34s var(--ease),opacity .22s ease}
/* A DEEPER MENU SLIDES IN FROM THE RIGHT and Back slides it out again; the
   menu it came from moves the other way. The page script sets these for
   one move only: .fromr or .froml on the menu arriving, .tol or .tor on the
   one leaving. */
.panel.fromr:not(.show){transform:translateX(32px);transition:none}
.panel.froml:not(.show){transform:translateX(-32px);transition:none}
.panel.tol:not(.show){transform:translateX(-32px)}
.panel.tor:not(.show){transform:translateX(32px)}
/* TRAY: a menu that holds one track and nothing else -- Go to is the
   first one. Same frost, position and scrim as any .panel; no .phead
   (STYLE.md, Control kinds: "no title, no X"). Closing it needs no code of
   its own: the scrim, the bar slot that opened it (toggle), and the
   current tile's own click handler already close whatever panel is
   open. */
.panel.tray{padding:6px;border-radius:calc(24px + 6px)}
.panel.tray .pbody{margin:0 -6px;padding:0 6px}
.phead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex:0 0 auto}
.phead h4{font-size:20px}
/* EVERY OVERLAY IS THIS MENU, and every menu is a head, a body and an
   optional foot. The head and foot hold still and only the body scrolls,
   so the rim and the actions never travel with the content. A deeper menu
   takes the place of the one it came from and carries a back arrow in its
   head; the X closes the whole stack. There are no full-screen sheets. */
.pbody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:0 -16px;padding:0 16px}
.pbody > .row:last-child{margin-bottom:0}
.pfoot{flex:0 0 auto;padding-top:12px}
.phead .ht{display:flex;align-items:center;gap:8px;min-width:0}
.phead .ht h4{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phead .cnt{flex:0 0 auto;font-size:12px;color:var(--muted)}
.phead .back{flex:0 0 auto;margin-left:-4px}
/* the X holds its size beside a long title (M9: a long article title squeezed it) */
.phead > .circ{flex:0 0 auto}

/* MENU EDGES: a menu's header and footer stay put while its body scrolls. While content runs
   underneath one, the body fades out softly toward it (pages.js sets .edge on that head or
   foot): no line and no shadow, the way iOS lets a list fade under its own bars. With nothing
   underneath, the body stays sharp to its edge. The fade grows in .15s where the phone can
   animate a length (@property); elsewhere it simply appears. */
@property --fade-t{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-b{syntax:"<length>";inherits:false;initial-value:0px}
.pbody{--fade-t:0px;--fade-b:0px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade-t),#000 calc(100% - var(--fade-b)),transparent 100%);
  transition:--fade-t .15s ease,--fade-b .15s ease}
.panel:has(> .phead.edge) > .pbody{--fade-t:24px}
.panel:has(> .pfoot.edge) > .pbody{--fade-b:24px}
/* THE PAGE HOLDS STILL UNDER AN OPEN MENU BY SWITCHING SCROLLING OFF AT
   THE ROOT. Pinning the body with position:fixed was the first lock and,
   in the installed app with the status bar drawn over the page, it lifted
   the bar and left a black band under it (2026-09-22, four-lock test).
   Nothing is saved or restored, so the page cannot come back somewhere
   else. The page script adds and removes the class on <html>. */
html.lock,html.lock body{overflow:hidden}
.row{margin-bottom:14px}
.lb{font-size:13px;font-weight:600;margin:0 0 6px}
/* menu small print (M9.6 consistency sweep): one look in every menu, 12 on 18, grey, 2 in
   from the content edge. A page sets only the space above and below it. */
.pnote{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 2px 0}

/* option tracks: a recessed track, borderless options, the chosen one in bone.
   A track is for a few short options side by side; a list of rows is a
   group (.pick below, .doors further down). */
.seg{display:flex;background:var(--recess);border-radius:999px;padding:3px;gap:2px}
.seg button{flex:1;height:var(--sz-seg);border-radius:999px;font-size:13px;font-weight:600;font-family:var(--disp)}
.seg button:active{background:var(--hi)}
.seg button.on{background:var(--bone);color:var(--ink)}
/* the same chosen state as an attribute, for option tracks that carry aria-pressed */
.seg button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}
/* THE GROUPED LIST (STYLE.md, Surfaces). A list of rows is one rounded
   group: rows flat inside it, no gap, a hairline between them inset 16
   from the left. Corner 22, half a row, so a group of one row is the
   familiar pill. .pick is the SUNKEN group you choose in: the chosen row
   wears a bone check on the right, never a fill. .doors (further down)
   is the GLASS group you press in. Rows in a group shade on press and do
   not scale. */
.pick{background:var(--recess);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.pick button,.pick a{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:var(--sz-row);box-sizing:border-box;padding:0 16px;border-radius:0;
  font-family:var(--disp);font-weight:600;font-size:15px}
.pick button:active,.pick a:active{background-color:var(--hi);transform:none}
.pick button.on,.pick a.on{padding-right:44px}
.pick button.on::after,.pick a.on::after{content:"";position:absolute;right:16px;top:calc(50% - 9px);width:18px;height:18px;background:var(--bone);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") center/contain no-repeat}
.pick .sp{flex:1}
.pick a{color:inherit;text-decoration:none}
.pick small{font-family:var(--text);font-size:12px;font-weight:600;color:var(--muted)}
/* no link preview on long press */
.pick a, a.tab{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ======== PATTERNS SETTLED ON THE CALENDAR, SHARED BY EVERY PAGE ========
   Not in the reference page. Moved here from index.html so no page
   reinvents them slightly differently. */

/* THE WORDMARK ROW. App chrome, not a title block: one thin row carrying
   the coloured RAVI wordmark and nothing else, scrolling away with the
   page. Centred, and its first line starts where the counter's stage does
   (safe top plus 30px), below the top clear line. */
.wmrow{padding:calc(env(safe-area-inset-top,0px) + 30px) 18px 16px 18px;text-align:center}
.wm{margin:0;font-family:var(--disp);font-size:22px;font-weight:800;letter-spacing:.01em;line-height:1.2} /* rung-exempt: the wordmark */
/* THE COLOURED WORDMARK, as on the app icon: RA blue, VI pink, Poppins 800.
   Only the hub's name and the page-top row carry it; everywhere else the
   name is plain RAVI. */
.wm .logo1,.hubname .logo1{color:var(--p1)}
.wm .logo2,.hubname .logo2{color:var(--p2)}

/* A SECTION HEAD: title left at 17, meta right at 12. */
.shead{display:flex;align-items:center;gap:10px;margin:0 0 10px 0;padding:0 4px;min-height:32px}
.shead h2{margin:0;font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.005em}
.shead .sp{flex:1}
.shead .cnt{font-size:12px;color:var(--muted)}
/* A PAGE HEAD: a text page's title and one line on what the page is for,
   in a glass plate, so the page starts on a surface as the calendar and
   trade pages do. */
/* a text page opens with one plain line under the wordmark (no glass); its title is for screen readers */
.lede{margin:6px 4px 0;font-size:13px;line-height:1.45;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pghead{border-radius:22px;padding:14px 16px 15px;margin:6px 0 0}
.pghead h2{font-size:20px;line-height:1.2}
.pghead p{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}

/* THE CHEVRON POINTS AT WHAT A TAP WILL DO, not at the state it is in.
   Draw it pointing UP in the markup: up while open, because the tap
   closes. The control carries aria-expanded, and false flips it down.
   Size comes from the button it sits in, with 16px as the fallback. */
.chev{width:16px;height:16px;stroke-width:2.2;transition:transform .28s var(--ease)} /* a row chevron: the same size and line as .cvr, so up, down, left and right match */
[aria-expanded="false"] > .chev{transform:rotate(180deg)}

/* A PLAIN FULL-WIDTH ACTION, in a panel or anywhere a page needs one.
   Used with btn glass. */
.pact{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:var(--sz-row);
  font-family:var(--disp);font-size:15px;font-weight:600;
}
.pact svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none}

/* THE FOOTER. More room above than below, and a short dim hairline
   inset from both ends. */
.foot{position:relative;margin:30px 0 0 0;padding:26px 4px 0 4px}
.foot::before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:rgba(255,255,255,.06)}
.foot p{margin:0 0 10px 0;font-size:12px;line-height:1.5;color:var(--muted)}
.foot b{color:var(--bone);font-weight:600}

/* CONTROL KINDS: see STYLE.md, Control kinds. .door is the glass row you
   press: it opens a deeper menu (with .cvr) or acts once (.door.act).
   Inside .doors, the glass group, a .door gives up its own glass and
   becomes a flat row; standing alone it is a glass pill. .cvr is the
   chevron that marks a deeper-opening control: it appears inside a
   .door, or trailing a plain glass foot button (e.g. "Receipt image")
   that also opens one level deeper. */
.door{display:flex;align-items:center;gap:10px;width:100%;height:var(--sz-row);box-sizing:border-box;padding:0 16px;border-radius:999px;
  font-family:var(--disp);font-weight:600;font-size:15px;text-align:left}
.door .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.door .sp{flex:1}
.door small{font-family:var(--text);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.doors{display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
.doors > .door{background-color:transparent;box-shadow:none;border-radius:0;--tint:transparent}   /* the group carries the page colour, once */
/* GO TO IS CHROME, so it stays clear on a coloured page (Mako 2026-10-24: nav and settings menus
   are chrome; a page's own content keeps its colour) */
.panel.tray{--tint:transparent}
.doors > .door::before{content:none}
.doors > .door:active{background-color:var(--glass-press);transform:none}
/* the hairline between rows, in either group */
.pick > :not(:last-child),.doors > :not(:last-child){background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08));background-size:calc(100% - 16px) 1px;background-position:16px 100%;background-repeat:no-repeat}
/* .door.act: the same row (left .t, .sp, grey small on the right) for a
   plain action, data-k="do", never deeper -- no .cvr. STYLE.md, Control
   kinds: in a stack of rows an action is this, never a centred .pact; a
   .pact is only for standing alone or in a menu foot. */
.door.act .cvr{display:none}
.cvr{width:16px;height:16px;flex:0 0 auto;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pact .cvr{width:16px;height:16px;stroke:var(--muted);stroke-width:2.2} /* a row chevron in a pill keeps its row size */
.pact .extl{width:16px;height:16px;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none} /* the out-arrow on a pill that leaves the app (the support plate) */
/* THE SUPPORT PLATE (M15; pages.js RAVI_SUPPORT): App settings and Feedback. A glass card: head,
   who (a 56 round picture, name, a muted line), two short paragraphs, the tip pill. */
.sup{margin-top:20px;border-radius:22px;padding:14px 12px 12px}
.sup .shead{margin:0 4px 10px}
.sup .shead h2{font-size:17px}
.supwho{display:flex;align-items:center;gap:12px;margin:0 4px 10px}
.supwho img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto} /* size-exempt: portrait image */
.supwho span{display:flex;flex-direction:column;gap:2px}
.supwho b{font-family:var(--disp);font-weight:700;font-size:15px}
.supwho small{font-size:12px;color:var(--muted)}
.suptx{margin:0 4px 10px;font-family:var(--text);font-size:15px;line-height:1.4;color:var(--bone)}
.sup .pact{margin-top:12px}
.circ .chev{width:18px;height:18px;stroke-width:2.4} /* a chevron in a round button matches Back and the month arrows */

/* GO TO: the page-picker tiles, built by pages.js's RAVI_GOTO from
   RAVI_PAGES. A sunken track (kind "pick"), not glass -- the page you are
   on is the chosen tile. The tiles share one row evenly, however many
   there are, in one row up to five (two rows past five, below). */
.goto{background:var(--recess);border-radius:24px;padding:4px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px}
.goto .gt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:60px;min-width:0;
  border-radius:20px;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:-.08em;padding:0 2px;color:inherit;text-decoration:none}
.goto .gt span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goto .gt svg{width:22px;height:22px}
.goto .gt:active{background:var(--hi)}
.goto .gt.on{background:var(--bone);color:var(--ink)}
/* never more than four across (Mako 2026-10-27): one row up to four; five and six as rows of
   three; seven or more as rows of four, as many rows as it takes */
.goto:has(> .gt:nth-child(5)){grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}
.goto:has(> .gt:nth-child(7)){grid-template-columns:repeat(4,1fr)}

/* THE SUNKEN FIELD: one shape for every text input in a recessed track,
   with an optional single action at its right end (.fbtn, a "do", so it
   uses the .glass recipe rather than var(--glass-press) -- a sunken
   parent cannot show the pressed shade at rest). .nf ("name field") is
   the canonical class; .sf ("search field") is its alias -- both already
   existed per-page with this same shape. ".field" was the name agreed on,
   but counter/index.html already uses that class for its own two-player
   board container, so .nf stays canonical instead, to avoid the clash. */
.nf,.sf{display:flex;align-items:center;gap:8px;height:var(--sz-track);box-sizing:border-box;
  border-radius:999px;background:var(--recess);padding:0 6px 0 16px}
.nf.tall,.sf.tall{height:var(--sz-row)}
/* STYLE.md, Type: "type follows height" -- a .nf.tall's own inline
   label (the counter's "Other length") is a row-height control's text
   same as .door/.pact/.sidebtn, so it reads at the same 15px. */
.nf.tall > .t{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--muted);white-space:nowrap}
.nf input,.sf input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--bone);
  font-family:var(--text);font-size:16px;padding:0;-webkit-appearance:none;appearance:none;
  -webkit-user-select:text;user-select:text}
.nf input::placeholder,.sf input::placeholder{color:var(--muted)}
.sf input::-webkit-search-cancel-button{-webkit-appearance:none}
.nf svg,.sf svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--muted);stroke-width:2;fill:none;stroke-linecap:round}
.nf .fbtn,.sf .fbtn{flex:0 0 auto;height:calc(100% - 6px);box-sizing:border-box;padding:0 14px;border-radius:999px;
  font-family:var(--disp);font-weight:600;font-size:13px}
.nf .fbtn.armed,.sf .fbtn.armed{background:var(--hi)}
/* A SEARCH CLEARS WITH A ROUND X (Mako 2026-10-24: an icon, not the word): the field's glass button made
   round, holding the bare X glyph (18, line 2.4, as a round button's Close). It shows only while there
   is text; hidden, it keeps its place, so nothing moves. */
.nf .fbtn.fx,.sf .fbtn.fx{width:var(--sz-seg);padding:0;display:grid;place-items:center;color:var(--bone)}
.nf .fbtn.fx svg,.sf .fbtn.fx svg{width:18px;height:18px}
.nf .fbtn.fx:disabled,.sf .fbtn.fx:disabled{visibility:hidden}

/* SEG.MULTI: a multi-select track -- every segment is its own independent
   on/off switch (aria-pressed), not a single choice. Same recess as .seg;
   the cut -- gap and inner-corner radius both -- is the counter's
   score-button cut, scaled to a pill: outer ends fully round. KNOWN BUG:
   999px on one corner makes the browser scale down EVERY corner of that
   same box to avoid overlap, flattening the small cut corner right along
   with it -- the outer corner must be the segment's own real half-height
   instead, never a number bigger than the box. */
.seg.multi{gap:var(--gap-cut)}
.seg.multi button{border-radius:var(--r-cut)}
.seg.multi button:first-child{border-radius:calc(var(--sz-seg) / 2) var(--r-cut) var(--r-cut) calc(var(--sz-seg) / 2)}
.seg.multi button:last-child{border-radius:var(--r-cut) calc(var(--sz-seg) / 2) calc(var(--sz-seg) / 2) var(--r-cut)}
.seg.multi button:only-child{border-radius:calc(var(--sz-seg) / 2)}
.seg.multi button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}
.seg.multi button:not([aria-pressed="true"]){background:transparent}

/* SEG.SWATCH: a pick-one track of colour capsules -- each segment IS the
   colour (--sw, set inline per button), not a dot on a neutral chip. The
   chosen one wears a double ring: bone on the colour, ground outside
   that, so the ring reads on every colour including the near-white one. */
.seg.swatch button{background-color:var(--sw)}
.seg.swatch button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--bone),inset 0 0 0 4px var(--ground)}

/* .rec: a RECORD row (STYLE.md, Control kinds) -- the one shape allowed
   to grow past one line, since its content is a saved item, not a fixed
   label (a past match, a saved trade). One line measures exactly
   --sz-row (min-height); two lines get 7px above and below so the text
   clears the row's edge, never a fixed taller height. */
.rec{height:auto;min-height:var(--sz-row);padding-top:7px;padding-bottom:7px}
.door.rec{align-items:flex-start;flex-direction:column;justify-content:center;gap:2px;position:relative;padding-right:40px}
.door.rec .t{width:100%}
/* a record inside a pick group (the calendar's store rows): a .pick row's
   own height and padding give way to the record's */
.pick button.rec{height:auto;padding-top:7px;padding-bottom:7px}
.door.rec small{white-space:normal;width:100%}
.door.rec .cvr{position:absolute;top:calc(50% - 8px);right:16px}

/* flashes that confirm a tap */
.flash-p{animation:flp .42s ease}
@keyframes flp{0%{background:var(--pc);color:var(--ink)}100%{}}
.flash-n{animation:fln .42s ease}
@keyframes fln{0%{background:rgba(237,234,227,.85);color:var(--ink)}100%{}}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* PAGE TO PAGE: no motion (STYLE.md, Motion). Pages switch instantly, as
   the tabs of an iPhone tab bar do, so the bar never changes between them.
   A cross-page fade was tried in M6 and dropped: the phone does not draw
   the bar's blur into the fade, so the bar went see-through each time. */
/* CONTENT A TAP OPENS eases in under the row that opened it (STYLE.md,
   Motion): the page script adds .reveal after the tap, never on a render,
   so a re-render never replays it. The height changes in one frame. */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:reveal .26s var(--ease)}
}
@keyframes reveal{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
/* A NUMBER A TAP CHANGES SETTLES from 1.06, the counter's point-land move (.32s), added by the
   page script after the tap, never on a render (motion sweep, 2026-10-16). Flex and grid items
   only: an inline span cannot scale. */
@media (prefers-reduced-motion:no-preference){
  .settle{animation:settle .32s var(--ease)}
}
@keyframes settle{0%{transform:scale(1.06)}100%{transform:none}}
/* A PICK-ONE TRACK SLIDES (motion sweep, 2026-10-16): when a tap moves the choice, pages.js
   draws .sgth, the chosen fill, at the old option and slides it to the new one in .26s, then
   hands the fill back to the button. Every .seg except .multi, .swatch and the wrapping
   .lgpchips. */
.sgth{position:absolute;pointer-events:none;z-index:0}

/* THE INSTALL SCREEN (STYLE.md, The install screen). In a browser tab
   pages.js adds html.gate and puts #ravigate first in the body; every other
   child of the body is hidden, so a page's own markup is untouched. The
   installed app never sees any of this. */
html.gate body > :not(#ravigate){display:none!important}
/* One block, centred in the screen; the bottom padding keeps the Continue
   line clear of Safari's floating bar (Mako's phone check 2026-10-09). */
#ravigate{width:100%;max-width:480px;min-height:100vh;min-height:100svh;margin:0 auto;padding:calc(var(--top-clear) + 8px) 12px calc(env(safe-area-inset-bottom,0px) + 84px);display:flex;flex-direction:column;justify-content:center}
.gwtop{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 26px}
.gwname{margin:0;font-family:var(--disp);font-weight:800;font-size:40px;letter-spacing:.01em;line-height:1.1} /* rung-exempt: the wordmark */
.gwname .logo1{color:var(--p1)}
.gwname .logo2{color:var(--p2)}
.gwline{margin:8px 24px 0;max-width:320px;font-size:17px;line-height:1.4;color:var(--muted)}
.gwcard{border-radius:22px;padding:16px 14px 10px}
.gwcard .shead{margin:0 4px 6px}
.gwcard .shead h2{font-size:20px}
.gwcard .pact{margin-top:4px}
.gwstep{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:var(--sz-row);padding:12px 4px}
.gwn{flex:0 0 14px;font-family:var(--disp);font-weight:600;font-size:15px;line-height:24px;color:var(--muted);text-align:center}
.gwt{font-size:17px;line-height:24px}
.gwsub{display:block;margin-top:3px;font-size:15px;line-height:1.4;color:var(--muted)}
.gwstep + .gwstep::before{content:"";position:absolute;top:0;left:4px;right:4px;height:1px;background:rgba(255,255,255,.08)}
.gwstep svg,.gwstep img{flex:0 0 24px;width:24px;height:24px}
.gwstep svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gwstep img{border-radius:6px}
.gwstep b{font-weight:700}
.gwtxt{margin:0 4px 12px;color:var(--muted)}
.gwor{margin:12px 4px 2px;font-size:13px;color:var(--muted);text-align:center}
.gwnote{margin:14px 8px 0;font-size:13px;line-height:1.5;color:var(--muted)}
#ravigate .foot{margin-top:20px;padding-top:20px}
#ravigate .foot p{font-size:13px}
#ravigate .foot a{color:var(--bone);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(237,234,227,.4)}