/* Cyto's component classes, as cyto-web renders them.

   Derived from the design system's components/bundle.css, which is dumped for reference under
   cyto-design-system/. Derived, not synced: the artifact is reference for behaviour, and this
   file is ours. Two things follow from that.

   ONLY WHAT WE DRAW. The bundle defines 143 classes; two thirds are for screens the web will
   never render - the recording screen, the record controls, the notification, the app bar, the
   sign-in (ours comes from flux-handlers) and the form (ours is shared-ui). Those are not here.
   This file grows a component at a time, as we build one.

   OUR TOKEN NAMES. Where Smito One already has a word for something, the rule uses that word:
   --color-accent not --primary, --ff-body not --font-body, --color-base-foreground not
   --text-body. Six of those invert - the bundle reads --color-X as the text and --color-X-bg as
   the ground, and this repository reads --color-X as the ground with --color-X-foreground as the
   text - so a rule copied across untranslated draws pale green on pale green. cyto-tokens.css
   declares the names Smito One has no word for; cyto-design-system/PROVENANCE.md has the full map.

   Pulling another component: take its rules out of the bundle, translate the token names, and
   add them here under their own comment. Do not copy the file wholesale, and do not reach for a
   class that nothing renders yet.

   Derived from bundle.css sha256 c4f37283d4016c79…
   If a refreshed dump has a different sha, the design system moved - go and look at what changed
   rather than assuming it did not matter. Nothing enforces this; it is a tripwire, not a contract.
*/

/* Stat tile: a label, one figure, a unit */
.cy-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.cy-stat__label{font:600 11px/16px var(--ff-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-base-foreground-muted)}
.cy-stat__row{display:flex;align-items:baseline;gap:6px;min-width:0}
.cy-stat__value{font:500 28px/34px var(--ff-mono);color:var(--text-heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.cy-stat__unit{font:500 14px/20px var(--ff-body);color:var(--color-base-foreground-muted)}
.cy-stat--md .cy-stat__value{font-size:22px;line-height:28px}
.cy-stat--md .cy-stat__unit{font-size:12px;line-height:16px}

/* Sync badge: where an activity's data is */
.cy-sync{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font:600 12px/16px var(--ff-body);white-space:nowrap;background:var(--smito-gray-100);color:var(--color-base-foreground)}
.cy-sync::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cy-sync--synced{background:var(--color-success);color:var(--color-success-foreground)}

/* Chip: activity type, GPS state */
.cy-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface-card);font:600 14px/20px var(--ff-body);color:var(--text-heading);white-space:nowrap}

/* Route trace on a map ground */
.cy-map{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-map);border:1px solid var(--border-color)}
.cy-map svg{display:block;width:100%;height:100%}
.cy-route{fill:none;stroke:var(--route-line);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.cy-route--thin{stroke-width:3}
.cy-route-start{fill:var(--route-start);stroke:var(--surface-card);stroke-width:2}
.cy-route-end{fill:var(--route-end);stroke:var(--surface-card);stroke-width:2}

/* Activity card */
.cy-activity{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-3) var(--space-4);padding:var(--space-4);background:var(--surface-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);min-height:var(--touch-min);text-decoration:none;color:inherit}
.cy-activity .cy-map{width:72px;height:72px;border-radius:var(--radius-md)}
.cy-activity__body{display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);min-width:0}
.cy-activity__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px var(--space-2)}
.cy-activity__top>:first-child{flex:1 1 150px}
.cy-activity__title{margin:0;font:600 18px/24px var(--ff-heading);letter-spacing:-.01em;color:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cy-activity__meta{margin:0;font:500 12px/16px var(--ff-body);color:var(--color-base-foreground-muted)}
.cy-activity__stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-color)}

/* Buttons */
.cy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-height);padding:0 var(--space-5);border-radius:var(--radius-md);border:1px solid transparent;font:600 14px/20px var(--ff-body);cursor:pointer;text-decoration:none;white-space:nowrap;background:var(--color-accent);color:var(--color-accent-foreground)}
.cy-btn:active{background:var(--color-accent-pressed)}
.cy-btn--secondary{background:var(--surface-card);color:var(--text-heading);border-color:var(--border-strong)}
.cy-btn--danger-text{background:transparent;color:var(--color-error-foreground);padding:0 var(--space-3)}
.cy-btn--secondary:active{background:var(--surface-2)}
.cy-btn--danger-text:active{background:var(--color-error)}
.cy-btn--sm{height:40px;padding:0 var(--space-4)}
.cy-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Activity detail */
.cy-detail__head{display:flex;flex-direction:column;gap:var(--space-2)}
.cy-detail__title{margin:0;font:600 28px/34px var(--ff-heading);letter-spacing:-.02em;color:var(--text-heading)}
.cy-detail__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin:0;font:500 14px/20px var(--ff-body);color:var(--color-base-foreground-muted)}
.cy-detail__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5) var(--space-3)}
.cy-section{display:flex;flex-direction:column;gap:var(--space-3)}
.cy-section__title{margin:0;font:600 18px/24px var(--ff-heading);letter-spacing:-.01em;color:var(--text-heading)}
.cy-panel{background:var(--surface-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-4)}

/* Field list: label and value pairs */
.cy-fields{margin:0;display:flex;flex-direction:column}
.cy-fields__row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--border-color)}
.cy-fields__row:first-child{border-top:0;padding-top:0}
.cy-fields__row:last-child{padding-bottom:0}
.cy-fields dt{font:500 14px/20px var(--ff-body);color:var(--color-base-foreground-muted)}
.cy-fields dd{margin:0;font:400 15px/22px var(--ff-body);color:var(--text-heading);overflow-wrap:anywhere}

/* Web page shell */
.cy-page{max-width:1080px;margin:0 auto;padding:var(--space-5) var(--space-5) var(--space-7)}
.cy-page__crumbs{margin:0 0 var(--space-3);font:500 14px/20px var(--ff-body);color:var(--color-base-foreground-muted)}
.cy-page__crumbs a{color:var(--link-color);text-decoration:none}
.cy-page__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.cy-page__actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
.cy-page__cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-5);align-items:start}
.cy-page__col{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}

/* Filter chips: pressable version of the chip */
button.cy-chip{cursor:pointer;height:40px;padding:0 var(--space-4)}
button.cy-chip[aria-pressed="true"]{background:var(--smito-teal-100);border-color:var(--smito-teal-100);color:var(--text-heading)}
button.cy-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.cy-chips{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none}

/* Activity list */
.cy-list{display:flex;flex-direction:column;gap:var(--space-3)}
.cy-list__group{margin:var(--space-3) 0 0;display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);font:600 14px/20px var(--ff-body);color:var(--text-heading)}
.cy-list__group span{font:500 12px/16px var(--ff-mono);color:var(--color-base-foreground-muted)}
.cy-summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--surface-2)}
.cy-summary__title{flex-basis:100%;margin:0;font:600 14px/20px var(--ff-body);color:var(--text-heading)}
.cy-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-8) var(--space-5)}
.cy-empty__title{margin:0;font:600 22px/28px var(--ff-heading);letter-spacing:-.02em;color:var(--text-heading)}
.cy-empty__body{margin:0;max-width:280px;font:400 15px/22px var(--ff-body);color:var(--color-base-foreground-muted)}

/* Web top bar */
.cy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.cy-grid .cy-list__group{grid-column:1 / -1}