/* per-page polish: skill-detail */

/* ════════════════════════════════════════════════════════════
   C3 ─ CONSTANT PAGE WIDTH (root-cause fix)
   The proto sets `.shell{grid-template-columns:244px minmax(0,1fr)}`
   and `.wrap{max-width:none}`. Inside that grid track `.wrap` is a
   block that shrink-wraps to its CONTENT's intrinsic width and then
   centers, so tabs whose panel has narrower intrinsic content (Files
   / Activity / Manage tables) collapsed `.wrap` from 1021px -> 942px
   and shifted it ~39px right. Force `.wrap` to always fill the track,
   and pin the inner `.body` grid so neither the panels column nor a
   table's intrinsic width can drive layout variance across tabs.
   Result: identical width + left edge on every tab/state.
   ════════════════════════════════════════════════════════════ */
.shell > .wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.shell > .wrap .body {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 268px;
}
/* tables must wrap to the (now constant) panel width, never push it
   wider via max-content; fixed layout keeps every tab identical */
.shell > .wrap .file-table,
.shell > .wrap .ver-table {
  table-layout: fixed;
  width: 100%;
}
.shell > .wrap .panels-col,
.shell > .wrap .panel {
  min-width: 0;
}

/* ── Breadcrumb: lighter, tracked ── */
.wrap .crumb {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wrap .crumb a {
  color: var(--ink-soft);
  font-weight: 500;
}
.wrap .crumb a:hover {
  color: var(--accent);
}
.wrap .crumb .sep {
  color: var(--ink-faint);
  font-size: 14px;
}

/* Repo icon container: refined treatment is the canonical D2 rule
   in space-ds.css (one icon-container look across header/grid/drawer). */

/* ── Repo name: tighter tracking ── */
.wrap .repo-name {
  /* unified with the app-page H1 cluster (~28px). Was 22px = small
     outlier vs library/settings/owner-profile/onboarding/activity peers. */
  font-size: 28px;
  letter-spacing: -.03em;
}
.wrap .repo-name .own {
  color: var(--ink-mute);
}
.wrap .repo-name .sl {
  color: var(--ink-faint);
}

/* ── Repo desc: slightly larger ── */
.wrap .repo-desc {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.55;
}

/* ── Repo meta items: accent icons ── */
.wrap .repo-meta .it svg {
  color: var(--accent);
  opacity: .7;
}
.wrap .repo-meta {
  gap: 12px 18px;
  margin-top: 12px;
}

/* -- Works-with: CANON sec 2 pill. -- */
.wrap .works .lbl {
  color: var(--ink-mute);
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 500;
}
.wrap .works .pill {
  height: 30px;
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  padding: 0 13px;
  font-weight: 550;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Tabs: tighter, cleaner underline for selected ── */
.wrap .tabs {
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  padding-bottom: 0;
}
.wrap .tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  font-size: 13px;
  color: var(--ink-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.wrap .tabs .tab:hover {
  color: var(--ink);
}
/* CANON sec 13 / R10  -  tab active = solid bg/fg/border (not accent underline). */
.wrap .tabs .tab[aria-selected="true"] {
  color: var(--solid-fg) !important;
  background: var(--solid) !important;
  border-bottom-color: var(--solid) !important;
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-weight: 600;
}
.wrap .tabs .tab .ct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}

/* ── Panel head: cleaner metadata row ── */
.wrap .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.wrap .panel-head .pt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 600;
}
.wrap .panel-head .pm {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}

/* ── Markdown body: better type ── */
.wrap .md {
  padding: 22px 24px 28px;
}
/* CANON sec 10  -  markdown preview h1/h2 follow app-page scale (28/22). */
.wrap .md h1 {
  font-size: 28px;
  letter-spacing: -.025em;
  font-weight: 660;
  color: var(--ink);
  line-height: 1.12;
}
.wrap .md h2 {
  font-size: 22px;
  font-weight: 640;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 20px 0 7px;
}
.wrap .md p,
.wrap .md li {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.wrap .md ul {
  padding-left: 18px;
}
.wrap .md li {
  margin: 4px 0;
}
/* inline code in md uses space-ds.css rules already */

/* ── File table: better density ── */
.wrap .file-table th {
  font-size: 9.5px;
  letter-spacing: .07em;
  padding: 9px 12px;
  color: var(--ink-mute);
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
}
.wrap .file-table td {
  padding: 10px 12px;
  font-size: 12.5px;
}
.wrap .file-table .fp {
  font-size: 12px;
}
.wrap .file-table .sha {
  font-size: 10.5px;
  color: var(--ink-faint);
}
.wrap .file-summary {
  font-size: 11px;
  color: var(--ink-mute);
  padding: 10px 14px;
}

/* ── Version table ── */
.wrap .ver-table th {
  font-size: 9.5px;
  letter-spacing: .07em;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
}
.wrap .ver-table td {
  padding: 11px 12px;
}
.wrap .ver-table .vn {
  color: var(--ink);
}
.wrap .ver-table .vd {
  color: var(--ink-mute);
  font-size: 11.5px;
}
.wrap .ver-table .vc {
  font-size: 12.5px;
}
.wrap .yanked-note {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 3px;
  font-style: italic;
  line-height: 1.45;
}

/* ── Activity dot: accent-tinted for recent events ── */
.wrap .activity-dot {
  background: var(--accent);
  opacity: .55;
}
.wrap .activity-event {
  font-size: 12.5px;
  line-height: 1.45;
}
.wrap .activity-event strong {
  color: var(--accent);
  font-weight: 600;
}
.wrap .activity-ts {
  font-size: 10.5px;
}
.wrap .activity-actor {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 1px;
}

/* ── Access/manage section headings ── */
.wrap .access-section h3,
.wrap .manage-section h3 {
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wrap .danger-area h3 {
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--negative);
}

/* ── Person rows: email weight ── */
.wrap .person-email {
  font-size: 12.5px;
  font-weight: 560;
  color: var(--ink);
}
.wrap .person-meta {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* ── Rail cards: rcard headings ── */
.wrap .rcard h4 {
  font-size: 9.5px;
  letter-spacing: .07em;
  color: var(--ink-mute);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wrap .rcard .rrow {
  font-size: 12px;
  padding: 7px 0;
}
.wrap .rcard .rrow .k {
  color: var(--ink-mute);
}
.wrap .rcard .rrow .v {
  font-weight: 570;
  color: var(--ink);
}

/* ── Rail install block ── */
.wrap .rcard .cmd {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2)) !important;
  border: 1px solid var(--accent-line) !important;
  border-radius: var(--r-md);
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
}
.wrap .rcard .cmd .pr {
  color: var(--accent);
  font-weight: 600;
}
.wrap .rcard .cmd .cp {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  cursor: pointer;
}
.wrap .rcard .cmd .cp:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

/* ── Rail "Published by" author row ── */
.wrap .rcard .pubr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.wrap .rcard .pubr .av {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 680;
  border: 1px solid var(--accent-line);
}
.wrap .rcard .pubr .nm {
  font-size: 13px;
  font-weight: 610;
}
.wrap .rcard .pubr .hd {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
}

/* ── Roleband: compact single-line readout (D3a) ── */
.wrap .roleband {
  margin-bottom: 14px;
}
/* hide the original verbose roleband content when compacted */
.wrap .roleband.flm-rb-compact {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 1;
  margin-bottom: 14px;
}
.wrap .flm-rb-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-mute);
}
.wrap .flm-rb-value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.wrap .flm-rb-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0;
  transition: border-color .14s, color .14s, background .14s;
}
.wrap .flm-rb-gear svg {
  width: 13px;
  height: 13px;
}
.wrap .flm-rb-gear:hover,
.wrap .flm-rb-gear[aria-expanded="true"] {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--ink);
}
.wrap .flm-rb-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wrap .roleband.flm-rb-compact {
  position: relative;
}
.wrap .flm-rb-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.wrap .flm-rb-opt:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.wrap .flm-rb-opt.on {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
}

/* ── Seg control: active gets accent ── */
.wrap .seg-opt.active {
  background: var(--accent) !important;
  color: #fff !important;
}
html.dark .wrap .seg-opt.active {
  color: var(--ink-on-accent) !important;
}

/* ── Meta row: two-row split (D3b) ── */
.wrap .repo-meta.flm-meta-split {
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.wrap .flm-meta-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
}
.wrap .flm-meta-primary .it {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wrap .flm-meta-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.wrap .flm-meta-secondary .badge-accent {
  font-size: 9.5px !important;
  padding: 1px 6px !important;
  opacity: .8;
}
.wrap .flm-meta-secondary .flm-sk-tags {
  margin-left: 0 !important;
  gap: 4px !important;
}
.wrap .flm-meta-secondary .flm-sk-tag {
  font-size: 10px !important;
}

/* ── Works With: compact icon strip (D3c) ── */
.wrap .works.flm-works-compact {
  gap: 0;
  margin: 10px 0 18px;
  align-items: center;
}
.wrap .flm-works-strip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 8px;
}
.wrap .flm-wi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  margin-left: -5px;
  color: var(--ink-soft);
  cursor: default;
  transition: transform .14s, z-index .14s;
  position: relative;
  z-index: 1;
}
.wrap .flm-wi:first-child {
  margin-left: 0;
}
.wrap .flm-wi:hover {
  z-index: 10;
  transform: translateY(-2px) scale(1.12);
}
.wrap .flm-wi svg {
  width: 11px;
  height: 11px;
}
.wrap .flm-wi-text {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: -.03em;
}
.wrap .works.flm-works-compact .lbl {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
}

/* ── Tabs: overflow Manage as "..." button (D3d) ── */
.wrap .tabs.flm-tabs-compact {
  display: flex;
  align-items: flex-end;
  position: relative;
}
.wrap .flm-tab-hidden {
  display: none !important;
}
.wrap .flm-tabs-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: -1px;
  margin-left: auto;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color .14s, background .14s;
  flex-shrink: 0;
}
.wrap .flm-tabs-more svg {
  width: 14px;
  height: 14px;
}
.wrap .flm-tabs-more:hover,
.wrap .flm-tabs-more[aria-expanded="true"] {
  color: var(--ink);
  background: var(--bg-2);
}
.wrap .flm-tabs-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  min-width: 120px;
}
.wrap .flm-tabs-pop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 11px;
  font-size: 12.5px;
  font-family: inherit;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.wrap .flm-tabs-pop-item:hover {
  background: var(--bg-2);
  color: var(--ink);
}

/* ── Section divider between chrome and content (D3f) ── */
.wrap .flm-section-div {
  height: 1px;
  background: var(--line);
  margin: 18px 0 20px;
  opacity: .6;
}

/* ── Dark-mode: code body readable ── */
html.dark .wrap .fv-body {
  color: color-mix(in srgb, var(--ink-soft) 90%, var(--accent));
}

/* ── Mobile ── */
/* 1A: skill-detail's right rail is the only content that reaches the
   bottom-right corner where the fixed collapsed #flmPrev pill sits
   (measured: rail content right edge ~1241 vs pill x 1211-1251, so
   the pill clipped ~30px into the rail cards). Pull the rail content
   left so its right edge clears the pill column. Desktop only (pill
   hidden <=900, rail hidden <=880). */
@media (min-width: 881px) {
  .wrap .rail {
    padding-right: 52px !important;
  }
}
@media (max-width: 880px) {
  .wrap .body {
    grid-template-columns: 1fr;
  }
  .wrap .rail {
    display: none;
  }
  .wrap .crumb {
    font-size: 11.5px;
  }
  .wrap .repo-name {
    font-size: 19px;
  }
}

/* GAP-D: the Versions tab table. The shared E4 table->block reflow in
   space-ds.css (<=760) has no data-l labels here, so each ver-table
   cell would land as an unlabelled right-aligned line and the empty
   action `<td></td>` cells would add blank space -- a raw, sparse,
   unfinished card. Rebuild scoped to .ver-table as a tidy card:
   version + status on line 1, the published date small under it, the
   changelog (and any yanked-note) full-width and readable, the action
   button full-width when present, empty action cells removed. The
   Files tab already reflows cleanly (its rows are not this dense), so
   only .ver-table is touched. */
@media (max-width: 760px) {
  .wrap .ver-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    padding: 12px 14px !important;
  }
  .wrap .ver-table td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .wrap .ver-table td:nth-child(1) { font-weight: 600 !important; }
  .wrap .ver-table td:nth-child(2) { margin-right: auto !important; }
  .wrap .ver-table td:nth-child(3) {
    flex: 1 0 100% !important;
    order: 3;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-mute);
  }
  .wrap .ver-table td:nth-child(4) {
    flex: 1 0 100% !important;
    order: 4;
  }
  .wrap .ver-table td:nth-child(5) {
    flex: 1 0 100% !important;
    order: 5;
  }
  .wrap .ver-table td:nth-child(5):empty {
    display: none !important;
  }
  .wrap .ver-table td:nth-child(5) .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 36px !important;
  }
}