/* My gear: a view inside the You sheet, built from the Safety & learning cards (src/safety.css). */
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet[data-gear-view] > :not(#gearView) { display:none!important; }
.vertex-v3 #app .gear-chips { display:flex; flex-wrap:wrap; gap:6px; }
.vertex-v3 #app .gear-view .gear-chips { margin:-2px 0 0; }
.vertex-v3 #app#app#app#app button.gear-chip { height:34px; padding:0 13px; border:1px solid rgba(var(--g-ink-rgb),0.149); border-radius:999px; background:none; color:var(--g-muted); font:500 13.5px var(--font-sans); cursor:pointer; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.vertex-v3 #app#app#app#app button.gear-chip.on { background:var(--g-accent); border-color:var(--g-accent); color:var(--g-on-accent); font-weight:600; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);} /* Petrol fill like the Tours chips: the old light fill was hard to see (tester 2026-11-10). */
.vertex-v3 #app .gear-list { display:flex; flex-direction:column; padding:2px 14px; }
.vertex-v3 #app .gear-view button.gear-row { display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:6px 0; border-top:1px solid rgba(var(--g-ink-rgb),0.063); text-align:left; }
.vertex-v3 #app .gear-view button.gear-row:first-child { border-top:0; }
.vertex-v3 #app .gear-icon { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--g-raised); color:var(--g-contrast); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .gear-icon svg,.vertex-v3 #app .gear-hero svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vertex-v3 #app .gear-icon svg { width:19px; height:19px; }
.vertex-v3 #app .gear-copy { flex:1 1 auto; min-width:0; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-copy b { display:block; font:600 15px/1.25 var(--font-sans)!important; color:var(--g-contrast); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-copy small { display:block; margin-top:2px; font-size:12.5px!important; line-height:1.3; color:var(--g-muted)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-copy small.gear-due { color:var(--g-warning)!important; }
.vertex-v3 #app .gear-row > i { font-style:normal; font-size:20px; color:var(--g-muted); }
.vertex-v3 #app .gear-retired { opacity:.6; }
.vertex-v3 #app .gear-hero { display:grid; place-items:center; height:clamp(96px,18dvh,150px); border-radius:14px; background:linear-gradient(135deg,var(--g-raised),var(--g-raised)); color:var(--g-accent); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .gear-hero svg { width:64px; height:64px; stroke-width:1.4; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-facts { margin:-2px 2px 0; color:var(--g-muted)!important; font-size:13.5px!important; }
.vertex-v3 #app .gear-stats { display:flex; gap:8px; }
.vertex-v3 #app .gear-stats span { flex:1 1 0; min-width:0; padding:10px 12px; border-radius:14px; background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-stats b { display:block; font:600 17px/1.2 var(--font-sans)!important; color:var(--g-contrast); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-stats small { font-size:12px!important; color:var(--g-muted)!important; }
.vertex-v3 #app .gear-service { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-service small { color:var(--g-muted)!important; font-size:13px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-service b { font:600 14px var(--font-sans)!important; color:var(--g-contrast); }
.vertex-v3 #app .gear-reminder { padding:12px 14px; border-radius:14px; background:var(--g-raised); color:var(--g-warning); font-size:13.5px; line-height:1.4; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .gear-note { margin:0 4px; color:var(--g-muted)!important; font-size:14px!important; white-space:pre-wrap; overflow-wrap:anywhere; }
.vertex-v3 #app .gear-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.vertex-v3 #app .gear-field > span { margin-left:4px; color:var(--g-muted); font:600 12px var(--font-sans); letter-spacing:.06em; }
.vertex-v3 #app .gear-field :is(input,textarea) { width:100%; box-sizing:border-box; min-height:46px; padding:10px 14px; border:1px solid rgba(var(--g-ink-rgb),0.122); border-radius:14px; background:var(--g-raised); color:var(--g-contrast); font:400 16px/1.35 var(--font-sans); color-scheme:light; resize:vertical; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .gear-field :is(input,textarea):focus { outline:none; border-color:var(--g-accent); }
.vertex-v3 #app .gear-field input::placeholder,.vertex-v3 #app .gear-field textarea::placeholder { color:var(--g-muted); }
.vertex-v3 #app .gear-pair { display:flex; gap:10px; }
.vertex-v3 #app .gear-pair > .gear-field { flex:1 1 0; }
.vertex-v3 #app .gear-view button.gear-delete { align-self:center; min-height:40px; color:var(--g-danger); font:600 14px var(--font-sans); }
/* The Safety check names the user's own gear under its line. */
.vertex-v3 #app .safety-mine { display:block; margin-top:1px; font-style:normal; color:var(--g-accent); font-size:12.5px; }
/* Skis, boots and skins: a Ski log day, and the card over the recording bar. */
.vertex-v3 #app .gear-pick-row { display:flex; flex-direction:column; gap:7px; }
.vertex-v3 #app .gear-pick-row > small { color:var(--g-muted); font:600 12px var(--font-sans); letter-spacing:.08em; }
.vertex-v3 #app .activity-gear { display:flex; flex-direction:column; gap:12px; margin:0 0 14px; padding:12px 14px; border-radius:14px; background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .activity-gear[hidden] { display:none; }
.vertex-v3 #app#app#app#app#app#app #activeSession .gear-pick-card:not([hidden]) { position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:2; display:flex; flex-direction:column; gap:12px; max-height:min(52dvh,420px); overflow:auto; padding:14px 16px; border-radius:22px; background:var(--ui-surface,var(--g-surface)); box-shadow:0 10px 34px rgba(var(--g-shadow-rgb),0.240); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app #activeSession .gear-pick-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.vertex-v3 #app#app#app#app#app#app #activeSession .gear-pick-head b { font:600 15px var(--font-sans); color:var(--g-contrast); }
.vertex-v3 #app#app#app#app#app#app #activeSession .gear-pick-head small { font-size:12.5px; color:var(--g-muted); }
.vertex-v3 #app#app#app#app#app#app #activeSession .gear-pick-body { display:flex; flex-direction:column; gap:12px; }
.vertex-v3 #app#app#app#app#app#app #activeSession button.gear-pick-done { align-self:stretch; min-height:44px; border:0; border-radius:14px; background:var(--g-accent); color:var(--g-contrast); font:600 15px var(--font-sans); cursor:pointer; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app#app#app#app#app#app #activeSession #activeGear svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.vertex-v3 #app#app#app#app#app#app #activeSession #activeGear[aria-expanded="true"] { background:var(--g-surface)!important; color:var(--g-ink)!important; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app#app #activeSession #activeGear[hidden] { display:none!important; }
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app #youSheet[data-gear-view] { height:auto!important; max-height:calc(100dvh - var(--corner-clear,0px) - 14px)!important; }
}
/* The phone recording bar clips its own paint; the gear card sits above it while open. */
.vertex-v3 #app#app#app#app#app#app#app #activeSession:has(#activeGearCard:not([hidden])) { contain:layout!important; }
.vertex-v3 #app#app#app#app#app#app#app #activeSession #activeGear[aria-expanded="true"] svg { color:var(--g-ink)!important; stroke:var(--g-ink)!important; }