/* community-share.css — the share sheet (Community 02C, 19 Sep 2026; redesigned 22 Sep on his
   review from the phone: the sheet is the whole panel, the post itself is the preview of what
   goes out, and the buttons clear the home indicator). Buttons are the contract's
   (docs/buttons-contract.md). */
.cs-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:70}
/* A modal <dialog> is in the top layer; fixed positioning there is relative to the dialog's own
   containing block, not the viewport. Make the scrim fill its dialog host so the sheet stays inside
   the visible dialog and the header/footer don't clip. */
.cs-scrim.cs-in-dialog{position:absolute;inset:0}
.cs-sheet{position:relative;display:flex;flex-direction:column;width:100%;max-width:min(560px,100vw);height:100%;max-height:100%;background:var(--bg);color:var(--ink);box-sizing:border-box;overflow:hidden;border-radius:22px 22px 0 0}
@media (min-width:700px){
  .cs-scrim{align-items:center;padding:24px}
  /* 100% works for both the viewport-fixed scrim and a dialog-absolute one; 100vh would overflow a
     modal dialog that is itself capped to 88vh. */
  .cs-sheet{height:auto;max-height:calc(100% - 48px);border-radius:var(--radius-panel);box-shadow:0 20px 60px rgba(0,0,0,.45)}
  .cs-grab{display:none}
}
.cs-grab{flex:none;width:36px;height:5px;border-radius:3px;background:var(--ink-tertiary);margin:10px auto 0;opacity:.7}
.cs-head{flex:none;display:flex;flex-direction:column;gap:4px;padding:14px 20px 0}
.cs-head .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-sheet h2{margin:0;font-size:22px;line-height:26px;font-weight:var(--weight-bold);letter-spacing:-.2px}
.cs-sheet .x{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:var(--chip-unselected);color:var(--ink-secondary);font-size:18px;line-height:32px;padding:0;cursor:pointer}
.cs-sub{margin:0;font-size:var(--font-footnote);line-height:1.4;color:var(--ink-secondary)}
.cs-loading{margin:0;padding:12px 0 4px;text-align:center;color:var(--ink-secondary)}
.cs-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:14px;padding:18px 16px 20px}
.cs-label{font-size:11px;line-height:14px;font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-secondary);padding:0 6px}
.cs-section{display:flex;flex-direction:column;gap:8px}
.cs-sheet .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cs-card{background:var(--card);border-radius:var(--radius-xl);padding:14px;display:flex;flex-direction:column;gap:12px}
.cs-title{display:flex;align-items:center;gap:10px}
.cs-glyph{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--tint,var(--accent));background:var(--chip-unselected);background:color-mix(in srgb,var(--tint,var(--accent)) 16%,transparent)}
.cs-title .t{flex:1;min-width:0}
.cs-title b{display:block;font-size:17px;line-height:20px;font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-title small{display:block;font-size:var(--font-footnote);line-height:16px;color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The numbers: four to a row and never on two lines (his one condition on the mockup, 22 Sep).
   The value is one line and the label one word or two; both clip rather than wrap. */
.cs-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cs-tile{min-width:0;background:var(--bg);border-radius:12px;padding:8px 7px 7px}
.cs-tile b{display:block;font-size:14px;line-height:18px;font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.cs-tile small{display:block;font-size:11px;line-height:13px;color:var(--ink-secondary);white-space:nowrap;overflow:hidden}
.cs-map{position:relative;aspect-ratio:30/11;height:auto;border-radius:12px;overflow:hidden;background:var(--bg);background-size:cover;background-position:center}
.cs-map.none{aspect-ratio:auto;height:56px}
/* One line, not two (his note, 23 Sep): the basemap carries its own line, framed its own way, so the
   vector path goes once the image is painted — the feed's rule (`.map.mapped .mapsvg`). */
.cs-map.mapped svg{display:none}
.cs-map svg{position:absolute;inset:0;width:100%;height:100%}
.cs-map path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cs-map .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-footnote);color:var(--ink-secondary);text-align:center;padding:0 16px}
.cs-line{display:flex;align-items:center;gap:8px;font-size:var(--font-footnote);line-height:16px;color:var(--ink-secondary)}
.cs-line.ink{color:var(--ink)}
.cs-line .icon{color:var(--ink-secondary)}
.cs-line .t{flex:1;min-width:0}
.cs-line .btn.mini{margin-left:auto}
.cs-line .btn.mini.off{background:var(--chip-unselected);color:var(--ink-secondary)}
/* the lanes the author lets out (22 Sep): a chip each, dark when it goes */
.cs-chips{display:flex;flex-wrap:wrap;gap:6px}
.cs-chip{font-size:12px;font-weight:var(--weight-semibold);padding:6px 10px;border-radius:14px;border:0;background:var(--ink);color:var(--bg);cursor:pointer;font-family:inherit}
.cs-chip.off{background:var(--chip-unselected);color:var(--ink-secondary)}
/* The 3D video, prepared as the composer opens (approved 25 Oct 2026). One line each. */
.cs-prep{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px 12px;border-radius:var(--radius-xl);background:var(--card);overflow:hidden;box-sizing:border-box;min-height:66px;flex:none}
.cs-prep-thumb{flex:none;width:30px;height:44px;border-radius:7px;background:linear-gradient(160deg,#1b2333,#0B0F19);display:flex;align-items:center;justify-content:center;color:#fff}
.cs-prep-thumb svg{width:14px;height:14px;display:block}
.cs-prep .t{flex:1;min-width:0;overflow:hidden}
.cs-prep .t b{display:block;font-size:15px;line-height:18px;font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-prep .t small{display:block;font-size:12px;line-height:16px;color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-prep .btn.mini{flex:none}
.cs-prep .cs-prep-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--separator)}
.cs-prep .cs-prep-line i{display:block;height:100%;width:0;background:var(--accent)}
.cs-row{background:var(--card);border-radius:var(--radius-xl);padding:12px 14px;display:flex;align-items:center;gap:12px}
.cs-row .icon{color:var(--ink-secondary)}
.cs-row .t{flex:1;min-width:0}
.cs-row .t b{display:block;font-size:15px;line-height:18px;font-weight:var(--weight-semibold)}
.cs-row .t small{display:block;font-size:var(--font-footnote);line-height:16px;color:var(--ink-secondary)}
.cs-photos{display:flex;gap:6px;flex-wrap:wrap;padding:0 2px}
.cs-photos .p{position:relative;width:64px;height:64px;border-radius:var(--radius-md);background-size:cover;background-position:center;overflow:hidden}
.cs-photos .p button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:20px;padding:0;cursor:pointer}
.cs-note{display:flex;align-items:flex-start;gap:8px;padding:0 6px;font-size:12px;line-height:16px;color:var(--ink-secondary)}
.cs-note .icon{width:15px;height:15px;margin-top:1px}
.cs-sheet textarea{width:100%;box-sizing:border-box;min-height:84px;resize:none;border:0;border-radius:var(--radius-xl);background:var(--card);color:var(--ink);padding:12px 14px;font:inherit;font-size:var(--font-subheadline);line-height:1.35}
.cs-sheet textarea:focus{outline:none;box-shadow:0 0 0 2px var(--accent-hairline)}
.cs-ok{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--chip-unselected);background:color-mix(in srgb,var(--connected) 14%,transparent);color:var(--connected);font-size:15px;line-height:19px;font-weight:var(--weight-semibold)}
.cs-ok .icon{stroke-width:2.2}
.cs-words{margin:0;font-size:var(--font-subheadline);line-height:1.4;color:var(--ink);white-space:pre-wrap;padding:0 6px}
.cs-sheet .problem{border:1px solid var(--destructive);color:var(--destructive);border-radius:var(--radius-md);padding:8px 12px;font-size:var(--font-caption)}
.cs-foot{flex:none;display:flex;gap:12px;padding:12px 16px;
  /* the safe area on its own line: WebKit drops a shorthand that mixes var() and env() inside calc() (21 Sep) */
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--separator);background:var(--bg)}
.cs-foot .btn{flex:1 1 0;height:50px;border-radius:14px;font-size:16px;font-weight:var(--weight-semibold);padding:0 12px}
.cs-foot .btn.primary{flex:1.4 1 0;font-weight:var(--weight-bold)}
.cs-sheet .btn:disabled{opacity:.45}
/* The app sheet's bar carries Cancel and Share. Unshare… stays in the content. */
.cs-unshare{align-self:flex-start;margin:4px 6px 2px;border:0;background:transparent;color:var(--destructive);font:inherit;font-size:16px;line-height:22px;font-weight:var(--weight-semibold);padding:10px 4px;cursor:pointer}
.cs-embed-ask{display:flex;gap:12px;padding:4px 0 8px}
.cs-embed-ask .btn{flex:1 1 0;height:50px;border-radius:14px;font-size:16px;font-weight:var(--weight-semibold);padding:0 12px}

/* The tiles as the feed's card draws them — community.html's `.stats` rules, here so the activity
   page's sheet draws the same card (his note, 23 Sep: the tiles had no glyphs there). */
.cs-card .stats.measurement-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;background:none;border-radius:0;padding:0}
.cs-card .stats > .measurement-tile{flex:1 1 0;grid-template-rows:auto auto;gap:1px;padding:7px 8px 8px;border-radius:11px;border:0;background:rgba(255,255,255,.55)}
html[data-theme="dark"] .cs-card .stats > .measurement-tile{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .cs-card .stats > .measurement-tile{background:rgba(255,255,255,.06)} }
.cs-card .stats .measurement-label{font-size:.625rem;line-height:.75rem;letter-spacing:0;white-space:nowrap}
.cs-card .stats.many .measurement-label{font-size:.6rem}
.cs-card .stats .measurement-label .measurement-content{display:inline-flex;align-items:center;gap:4px}
.cs-card .stats .measurement-label .icon{width:.8rem;height:.8rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-secondary)}
.cs-card .stats .measurement-number{font-size:1.0625rem;line-height:1.25rem}
.cs-card .stats .measurement-unit{font-size:.6875rem;line-height:.75rem}
/* In fours, always — the feed's own rule (his pick, 21 Sep), and the sheet's "never on two lines". */
.cs-card .stats.many > .measurement-tile{flex:0 0 calc((100% - 18px) / 4);min-width:0}
/* SV-1b: "2,580 kg · 34 flywheel reps" is the whole Volume value. A quarter tile clips it. */
.cs-card .stats.many > .measurement-tile.measurement-sentence{flex:0 0 100%}
.cs-card .stats .measurement-sentence .measurement-readings,
.cs-card .stats .measurement-sentence .measurement-reading{white-space:normal;max-width:100%}
.cs-card .stats .measurement-sentence .measurement-number{font-size:.9375rem;line-height:1.25rem;overflow-wrap:anywhere}
@media (max-width:699px){ .cs-card .stats.many > .measurement-tile{padding:6px 6px 7px} }
/* iOS zooms into a text field under 16 px as it takes focus and leaves the page panned sideways (30 Sep): 16 px on touch. */
@media (pointer:coarse){.cs-sheet textarea,.cs-sheet input{font-size:16px}}
/* The Community rules sheet on an activity's Share. Same copy and shape as the feed's sheet (community.html);
   those styles live on that page, so the activity page carries them here. */
.cs-rules{z-index:80}
/* The phone's share URL stretches the composer to the window. The rules card stays the feed's card: content height, on the bottom edge. */
body.share-only .cs-rules{align-items:flex-end;background:rgba(0,0,0,.45)}
.cs-rules .pk-sheet{width:100%;max-width:520px;height:auto;flex:none;align-self:flex-end;max-height:min(88vh,88dvh);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg-raised,var(--bg));color:var(--ink);border-radius:22px 22px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px));box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
@media (min-width:700px){
  .cs-rules{align-items:center}
  .cs-rules .pk-sheet{border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
}
.cs-rules .pk-sheet header{display:flex;justify-content:space-between;align-items:center}
.cs-rules .pk-sheet h2{margin:0;font-size:20px;font-weight:700}
.cs-rules .pk-sheet .x{background:var(--chip-unselected);border:0;width:30px;height:30px;border-radius:50%;color:var(--ink-secondary);font-size:16px;line-height:30px;padding:0;cursor:pointer}
.cs-rules .pk-sheet .sub{margin:0;font-size:13px;color:var(--ink-secondary);line-height:1.4}
.cs-rules .rules-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:var(--font-subheadline,15px);line-height:1.4;color:var(--ink)}
.cs-rules .rules-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:var(--font-subheadline,15px);font-weight:600;text-decoration:none;min-height:44px}
.cs-rules .rules-link .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-rules .btns{display:flex;gap:8px;justify-content:flex-end}
.cs-rules .problem{border:1px solid var(--destructive);color:var(--destructive);border-radius:var(--radius-md,8px);padding:8px 12px;font-size:var(--font-caption,12px)}
/* The share's bar (2 Oct 2026, build 74): "Sharing…" while the items are copied into the post. */
.cs-progress{display:flex;flex-direction:column;gap:6px;padding:0 6px;font-size:13px;color:var(--ink-secondary)}
.cs-progress progress{width:100%;height:4px}

/* The four tiles as the feed draws them (24 Oct 2026, community.html's .stats.feed4). */
.cs-card .stats.feed4 > .measurement-tile{flex:0 0 calc((100% - 18px) / 4);min-width:0;position:relative;overflow:hidden}
.cs-card .stats.feed4 .measurement-content{white-space:nowrap}
@media (max-width:699px){
  /* The face-dots lane, as the feed (community.html): tiles 4 px apart, 4 px in on the left, the unit 1 px after the number. */
  .cs-card .stats.feed4{gap:4px}
  .cs-card .stats.feed4 > .measurement-tile{flex-basis:calc((100% - 12px) / 4);padding:6px 12px 7px 4px}
  .cs-card .stats.feed4 .measurement-reading{gap:1px}
  .cs-card .stats.feed4 .measurement-label{font-size:.5625rem;letter-spacing:0}
  .cs-card .stats.feed4 .measurement-label .icon{width:.625rem;height:.625rem}
  .cs-card .stats.feed4 .measurement-number{font-size:.8125rem;line-height:1.125rem}
  .cs-card .stats.feed4 .measurement-unit{font-size:.5rem}
}
@media (max-width:379px){ .cs-card .stats.feed4 .measurement-number{font-size:.75rem} }
/* The shared sheet (redesign, 23 Oct 2026, docs/mockups/shared-sheet-2026-10-23): one 16 px margin, one card style,
   every row one line; Charts and Your words in their own cards; Shared on last. Nothing wraps or overflows at 375. */
.cs-sheet.shared .cs-body{padding:16px 16px 28px;gap:24px}
.cs-sheet.shared .cs-label{padding:0 4px}
.cs-sheet.shared .cs-words{padding:0}
.cs-rows{display:flex;flex-direction:column;border-top:1px solid var(--separator);margin:0 -14px -14px;padding:0 14px}
.cs-r{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 0}
.cs-r + .cs-r{border-top:1px solid var(--separator)}
.cs-r .icon{color:var(--ink-secondary)}
.cs-r .t,.cs-chead .t,.cs-on-row .t{flex:1;min-width:0}
.cs-r b,.cs-chead b,.cs-on-row b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--font-subheadline);line-height:20px}
.cs-r b{font-weight:var(--weight-regular);color:var(--ink)}
.cs-r small,.cs-on-row small{display:block;margin-top:2px;font-size:var(--font-footnote);line-height:16px;color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-chead{display:flex;align-items:center;gap:12px}
.cs-chead .icon{color:var(--ink-secondary)}
.cs-chead b,.cs-on-row b{font-weight:var(--weight-semibold)}
.cs-sub2{margin-top:-6px;font-size:var(--font-footnote);line-height:16px;color:var(--ink-secondary)}
.cs-lanes{display:flex;flex-wrap:wrap;gap:8px}
.cs-lane{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border:0;border-radius:var(--radius-pill,999px);font:inherit;
  font-size:var(--font-footnote);font-weight:var(--weight-semibold);white-space:nowrap;cursor:pointer;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.cs-lane .ck{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cs-lane.off{background:var(--chip-unselected);color:var(--ink-secondary)}
.cs-lane.off .ck{display:none}
.cs-hint{font-size:var(--font-footnote);line-height:1.35;color:var(--ink-secondary)}
.cs-hint b{color:var(--ink);font-weight:var(--weight-semibold)}
.cs-edit{display:flex;align-items:flex-start;gap:8px;border-top:1px solid var(--separator);padding-top:12px;font-size:var(--font-footnote);line-height:1.35;color:var(--ink-secondary)}
.cs-edit.alone{border-top:0;padding-top:0}
.cs-edit .icon{width:15px;height:15px;margin-top:1px}
.cs-card.cs-on{gap:0;padding:4px 14px}
.cs-on-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0}
.cs-on-row > .icon{width:22px;height:22px;color:var(--ink-secondary)}
.cs-on-row .btn.compact{flex:none;white-space:nowrap}
.cs-warn{font-size:var(--font-caption);line-height:1.35;color:var(--ink-secondary);padding:0 0 10px 34px;border-bottom:1px solid var(--separator)}
.ox-switch.strava{--switch-tint:var(--strava-orange)}
.cs-ask{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;padding:14px;border-radius:14px;background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.cs-ask b{font-size:var(--font-subheadline)}
.cs-ask span{font-size:var(--font-footnote);line-height:1.35;color:var(--ink-secondary)}
.cs-ask-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.cs-ask-btns .btn{white-space:nowrap;text-decoration:none}
.cs-ask-btns .btn.strava{color:var(--strava-orange)}
.cs-ask-btns .btn.destructive{color:var(--destructive)}