/* ===========================================================================
   The rig panel: name, numbers, bags with what is in them, the kit.
   Also the bag sheet's "Inside" block, the share sheet and the bike sheet,
   which reuse the same rows. Tokens only.
   =========================================================================== */

/* ---- head: name, Save, Share ---------------------------------------------------- */
.rg-head { gap: var(--s-2); }
.rg-name {
  flex: 1; min-width: 0; text-align: left;
  min-height: var(--target); padding: 0 var(--s-2); margin-left: calc(-1 * var(--s-2));
  border-radius: var(--r-control);
  font-size: var(--fs-title2); font-weight: 650; letter-spacing: var(--tr-title);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rg-name:hover { background: var(--fill-1); }
.rg-name-in { flex: 1; font-size: var(--fs-title3); font-weight: 600; }
.rg-save.is-done { background: transparent; color: var(--ok); opacity: 1; }
.rg-share { gap: var(--s-1); }

/* ---- the numbers: a fixed grid that never wraps --------------------------------------- */
.rg-nums {
  flex: none; display: grid; gap: var(--s-1);
  padding: 0 var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--hairline);
}
.rg-nums-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.rg-nums-head .seg button { min-height: 26px; }
@media (pointer: coarse) { .rg-nums-head .seg button { min-height: var(--target); } }
.rg-nums-main { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rg-allup { font-size: var(--fs-display); font-weight: 650; letter-spacing: var(--tr-display); line-height: 1; white-space: nowrap; }
.rg-allup .unit { font-size: var(--fs-title3); }
.rg-split { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); padding-top: var(--s-1); }
.rg-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-cell-v { font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-watts { gap: var(--s-2); color: var(--ink-1); flex: none; }
.rg-watts .num { font-weight: 700; }
.rg-watts-at { color: var(--ink-3); font-weight: 500; }
@media (max-width: 380px) { .rg-watts-at { display: none; } }

/* ---- body sections ---------------------------------------------------------------------- */
.rg-body { padding-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-5); }
.rg-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rg-trip { gap: var(--s-2); max-width: 100%; }
.rg-trip-k { color: var(--ink-3); }
.rg-trip-v { color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; }
.rg-sec { display: flex; flex-direction: column; gap: var(--s-2); }
.rg-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.rg-sec-t { font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.rg-sec-n { font-size: var(--fs-caption); color: var(--ink-3); }
.rg-list { display: flex; flex-direction: column; gap: var(--s-1); }
.rg-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---- a bag: what it is, how full, what is in it ---------------------------------------------- */
.rg-bag {
  display: flex; align-items: flex-start; gap: var(--s-3); width: 100%;
  padding: var(--s-3); border-radius: var(--r-card); text-align: left;
  background: var(--fill-1); border: 1px solid transparent;
  transition: background var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
}
.rg-bag:hover, .rg-bag.hov { background: var(--fill-2); }
.rg-bag.sel { border-color: var(--accent-ring); box-shadow: 0 0 0 1px var(--shade); }
.rg-bag.drop-on { border-color: var(--ink-1); background: var(--fill-3); }
.rg-bag.is-unfit { box-shadow: inset 3px 0 0 var(--bad); }
.rg-bag-img { width: 56px; height: 56px; }
.rg-bag-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rg-bag-l1 { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-caption); color: var(--ink-3); }
.rg-bag-l { color: var(--ink-2); font-weight: 600; }
.rg-bag-name { font-size: var(--fs-title3); font-weight: 600; line-height: var(--lh-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-bag-l3 { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.rg-bag-l3 .meter { flex: 1; }
.rg-bag-fill { flex: none; font-size: var(--fs-caption); color: var(--ink-2); }
.rg-bag-warn { font-size: var(--fs-caption); font-weight: 600; margin-top: 2px; }
.rg-bag-acts { display: flex; flex-direction: column; gap: var(--s-1); }
.rg-strip { display: flex; align-items: center; gap: 4px; margin-top: var(--s-1); min-height: 28px; }
.rg-strip-img { width: 28px; height: 28px; border-radius: 6px; background: var(--fill-1); object-fit: contain; }
.rg-strip-more { font-size: var(--fs-caption); color: var(--ink-3); padding-left: var(--s-1); }

/* ---- an item row: shared by the panel, the bag sheet and my kit ------------------------------- */
.rg-item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  min-height: 56px; padding: var(--s-1) var(--s-2); border-radius: var(--r-control); text-align: left;
  transition: background var(--d-micro) var(--ease-out);
}
.rg-item:hover { background: var(--fill-1); }
.rg-item-img { width: 44px; height: 44px; }
.rg-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rg-item-n { font-size: var(--fs-body); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-item-s { font-size: var(--fs-caption); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-item-w { flex: none; font-size: var(--fs-caption); color: var(--ink-2); }
.rg-flag { flex: none; font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--warn); }

/* ---- balance ------------------------------------------------------------------------------------ */
.rg-bal { display: flex; flex-direction: column; gap: var(--s-1); }
.rg-bal-l { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--ink-3); }
.rg-bal-bar { position: relative; height: 4px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.rg-bal-bar > i { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); }

/* ---- empty bike, someone else's rig ---------------------------------------------------------------- */
.rg-empty { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-2) 0; }
.rg-empty-t { font-size: var(--fs-title2); font-weight: 650; letter-spacing: var(--tr-title); }
.panel.is-empty .rg-body { padding-top: 0; }
.rg-viewing { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-card); background: var(--fill-1); }
.rg-viewing-t { font-size: var(--fs-caption); color: var(--ink-2); }

/* ---- what are you bringing: tiles that pack as you tap ------------------------------------------------ */
.rg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 901px) { .rg-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rg-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  min-height: 84px; padding: var(--s-2) 2px; border-radius: var(--r-card);
  background: var(--fill-1); border: 1px solid var(--hairline); text-align: center;
  transition: background var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
}
.rg-tile:hover { background: var(--fill-2); }
.rg-tile.on { border-color: var(--ink-1); background: var(--fill-2); }
.rg-tile-img { width: 40px; height: 40px; object-fit: contain; }
.rg-tile-l { font-size: var(--fs-caption); font-weight: 600; line-height: 1.2; }
.rg-tile-at { font-size: var(--fs-label); color: var(--ok); font-weight: 650; line-height: 1.2; }

/* ---- inside a bag -------------------------------------------------------------------------------------- */
.inside { display: flex; flex-direction: column; gap: var(--s-2); }
.inside-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.inside-sum { font-size: var(--fs-caption); color: var(--ink-2); }
.inside-note { font-size: var(--fs-caption); color: var(--ink-3); }
.inside-note.warn { color: var(--warn); }
.inside-list { display: flex; flex-direction: column; }
.inside-row.is-over { border-radius: var(--r-control); background: var(--bad-soft); }
.inside-warn { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0 var(--s-2) var(--s-2) calc(44px + var(--s-3) + var(--s-2)); font-size: var(--fs-caption); }
.inside-empty { font-size: var(--fs-caption); color: var(--ink-3); padding: var(--s-2) 0; }
.inside-add { align-self: flex-start; }

/* ---- share ------------------------------------------------------------------------------------------------ */
.share { display: flex; flex-direction: column; gap: var(--s-2); }
.share-url { font-size: var(--fs-caption); color: var(--ink-2); }
.share-inc-h { margin-top: var(--s-3); }
.share-inc { display: flex; flex-direction: column; gap: var(--s-2); }
.share-inc li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-body); color: var(--ink-1); }
.share-inc li svg { color: var(--ok); flex: none; }
.share-inc li.off { color: var(--ink-3); }
.share-inc li.off svg { color: var(--ink-3); }

/* ---- bike: size and colours --------------------------------------------------------------------------------- */
.bike-sheet { display: flex; flex-direction: column; gap: var(--s-2); }
.bike-sheet .label { margin-top: var(--s-3); }
.bs-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s-2); }
.size-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: var(--fill-1); border: 1px solid var(--hairline); text-align: left; }
.size-opt.on { border-color: var(--ink-1); background: var(--fill-2); }
.size-id { font-size: var(--fs-body); font-weight: 600; }
.size-r { font-size: var(--fs-caption); color: var(--ink-3); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.swatch { position: relative; width: var(--target); height: var(--target); border-radius: 50%; }
.swatch::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: inherit; box-shadow: inset 0 0 0 1px var(--edge); }
.swatch { background-clip: content-box; padding: 6px; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 4px var(--shade); }

/* ---- the mount list (the rings' fallback) --------------------------------------------------------------------- */
.mount-list { display: flex; flex-direction: column; gap: var(--s-1); }
.mount-row { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-3); border-radius: var(--r-control); text-align: left; }
.mount-row:hover { background: var(--fill-1); }
.mount-row-k { flex: 1; font-size: var(--fs-body); font-weight: 550; }
.mount-row-v { font-size: var(--fs-caption); color: var(--ink-3); max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mount-row svg { color: var(--ink-3); }
.rg-nums.is-empty { border-bottom: 0; padding-bottom: var(--s-4); }

@media (max-width: 560px) {
  .rg-name { font-size: var(--fs-title3); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: var(--lh-snug); }
  .rg-nums { padding: 0 var(--s-4) var(--s-3); }
}
.rg-callout { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-card); background: var(--fill-2); font-size: var(--fs-caption); color: var(--ink-1); }