/* per-page polish: library */

/* ── App topbar on library uses .topbar but no .nav-right (just .dd),
   so the topbar glass from space-ds needs no override.
   Key: scope everything under .shell or .main for this page ── */

/* -- Sidebar group headings: CANON sec 12 / sec 10  -  10.5/500/.12em mono. -- */
.shell .side .grp h4,
.shell .side-scroll .grp h4 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 500;
  color: var(--ink-mute);
  margin-bottom: 5px;
  padding: 0 8px;
}

/* Sidebar active item: canonical treatment lives in space-ds.css
   (D4 ,  ONE consistent restrained active state across all app
   pages + the landing-v2 hero-mock sidebar). Single source of
   truth; no per-page override here so it cannot diverge again. */

/* ── Sidebar workspace switcher: consistent with glass system ── */
.shell .ws-trigger {
  background: var(--surface-3) !important;
}

/* -- Page title area: CANON sec 10  -  h1 = 28 / 660 / -.025em. Override proto's
   31px inline `.head .h1 { font-size:31px }`. ── */
.shell .main .head .h1 {
  font-size: 28px !important;
  font-weight: 660 !important;
  letter-spacing: -.025em !important;
  line-height: 1.12 !important;
}
.shell .main .head p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 5px;
}

/* ── Search bar: slightly taller, better alignment ── */
.shell .main .search {
  background: var(--surface-3) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.shell .main .search svg {
  flex-shrink: 0;
  opacity: .55;
}
.shell .main .search .kbd {
  background: var(--bg-2);
  color: var(--ink-mute);
}

/* ── Filter row: tighter, mono label more restrained ── */
.shell .main .filters {
  gap: 12px 20px;
  margin-bottom: 22px;
}
.shell .main .ffl {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 500;
  white-space: nowrap;
}

/* v2-folders cleanup: the top "Folder" chip group is now redundant -- the
   sidebar carries a folder tree with counts (canonical nav). Hide just
   the first .ffg (Folder); Tags + Visibility chip groups stay. The proto
   markup is unchanged; this is CSS-only, reversible by removing the rule. */
.shell .main .filters > .ffg:first-of-type { display: none !important; }
.shell .main .cnt {
  font-size: 10.5px;
  color: var(--ink-mute);
}

/* ── Filter chips: more presence when active ── */
.shell .main .fc.on {
  background: var(--solid) !important;
  color: var(--solid-fg) !important;
  border-color: var(--solid) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Let the space ground show through the library page (it was
   painting opaque over the injected .spacebg) ── */
body:has(.shell) { background: transparent !important; }
.shell, .shell .main, .shell .side-scroll { background: transparent !important; }
.shell .side { background: var(--surface-3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3); }

/* ════════════════════════════════════════════════════════════
   G1 (revised) ─ LIST / GRID VIEW TOGGLE
   Federico 2026-05-19: align with the .fc filter chips above so
   List/Grid read as part of the same control family (same height,
   border, pill shape, font). Container becomes a transparent flex
   wrapper; each button is a .fc-shaped pill. ── */
.shell .main .filters .lib-view-seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-left: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.shell .main .filters .lib-view-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: transform var(--t-base) var(--spring), color .15s, border-color .15s, background .15s;
}
.shell .main .filters .lib-view-seg button svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.shell .main .filters .lib-view-seg button:hover {
  transform: translateY(-1px);
  color: var(--ink);
  border-color: var(--line-strong);
}
.shell .main .filters .lib-view-seg button.on {
  background: var(--solid);
  color: var(--solid-fg);
  border-color: var(--solid);
}
@media (max-width: 560px) {
  .shell .main .filters .lib-view-seg button span { display: none; }
  .shell .main .filters .lib-view-seg button { padding: 0 12px; }
}

/* ════════════════════════════════════════════════════════════
   GRID VIEW (default) ─ square / almost-square cards
   Replaces the old wide ~1.56:1 tile. ~1:1, glass-consistent with
   the refined app, crafted steel icon, clean dot+label chip,
   description clamped so it is never long-and-unreadable. The grid
   auto-fits ~256-300px squares; aspect-ratio keeps them ~1:1. ── */
.shell .main .grid[data-libview="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}
.shell .main .grid[data-libview="grid"] .sk {
  display: flex;
  flex-direction: column;
  gap: 0;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 20px;
  /* G-glass: identical material to the login auth card
     (polish/login.css .below): paper 68% + blur(10px) + accent 12%
     hairline. Lets the cloud ground show through, same as login. */
  background: var(--surface-3) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line)) !important;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm) !important;
}
.shell .main .grid[data-libview="grid"] .sk .sk-top {
  margin-bottom: 16px;
}
.shell .main .grid[data-libview="grid"] .sk .sk-ic {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
}
.shell .main .grid[data-libview="grid"] .sk .nm {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ink);
}
.shell .main .grid[data-libview="grid"] .sk .ds {
  flex: 1;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.52;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shell .main .grid[data-libview="grid"] .sk .mt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}

/* ════════════════════════════════════════════════════════════
   LIST VIEW ─ the proven variant-A compact list-row, ported onto
   the live .grid .sk cards (proto markup untouched; this is a pure
   layout/skin remap of the same elements). Single column, full-
   width rows, icon + 168px name column + flexible one-line
   ellipsis description + right-aligned meta. ── */
.shell .main .grid[data-libview="list"] {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.shell .main .grid[data-libview="list"] .sk {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  aspect-ratio: auto;
  min-height: 0;
  padding: 13px 18px;
  /* G-glass: same login auth-card material as the grid view above */
  background: var(--surface-3) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line)) !important;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm) !important;
}
.shell .main .grid[data-libview="list"] .sk .sk-top {
  margin: 0;
  flex: 0 0 auto;
}
.shell .main .grid[data-libview="list"] .sk .sk-ic {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
}
.shell .main .grid[data-libview="list"] .sk .nm {
  flex: 0 0 auto;
  width: 184px;
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell .main .grid[data-libview="list"] .sk .ds {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell .main .grid[data-libview="list"] .sk .mt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 10.5px;
  color: var(--ink-mute);
}
.shell .main .grid[data-libview="list"] .sk:hover {
  transform: translateX(2px);
}
@media (max-width: 720px) {
  .shell .main .grid[data-libview="list"] .sk {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 13px 15px;
  }
  .shell .main .grid[data-libview="list"] .sk .nm {
    width: auto;
    flex: 1;
  }
  .shell .main .grid[data-libview="list"] .sk .ds {
    flex: 1 0 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ── Mobile (<=640): the GRID view kept aspect-ratio:1/1, so a
   full-width single column became a ~358px tall square with a huge
   empty middle (content top, meta bottom, flex gap between). On a
   phone cards must hug their content. Single column, no forced
   square, description no longer flex-stretches, tighter padding. ── */
@media (max-width: 640px) {
  .shell .main .grid[data-libview="grid"] {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .shell .main .grid[data-libview="grid"] .sk {
    aspect-ratio: auto;
    min-height: 0;
    padding: 16px;
  }
  .shell .main .grid[data-libview="grid"] .sk .sk-top {
    margin-bottom: 11px;
  }
  .shell .main .grid[data-libview="grid"] .sk .ds {
    flex: none;
    margin-top: 6px;
    margin-bottom: 13px;
    -webkit-line-clamp: 2;
  }
  /* Filter block was eating the whole first screen (3 stacked chip
     groups). Tighten the rhythm so skills appear sooner. */
  .shell .main .filters {
    gap: 8px 14px;
    margin-bottom: 14px;
  }
  .shell .main .filters .fc {
    padding: 5px 11px;
    font-size: 12px;
  }
}

/* ── Card hover: lift + accent border (both views) ── */
.shell .main .grid .card-int:hover {
  border-color: var(--accent-line) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}
.shell .main .grid[data-libview="list"] .card-int:hover {
  transform: translateX(2px);
}

/* ── User menu / dropdown: better avatar ── */
.shell .topbar .me-btn .avatar,
header.topbar .me-btn .avatar {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 680;
  border: 1px solid var(--accent-line);
}

/* ════════════════════════════════════════════════════════════
   SKILL SIDE-PANEL (drawer): click a skill, opens here, not full page
   ════════════════════════════════════════════════════════════ */
.sk-drawer-ov{ position:fixed; inset:0; z-index:1900; background:var(--overlay);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .28s var(--ease,ease); }
.sk-drawer-ov.open{ opacity:1; }
.sk-drawer-ov[hidden]{ display:none; }

.sk-drawer{ position:fixed; top:0; right:0; z-index:2000;
  height:100vh; width:min(620px,100vw);
  display:flex; flex-direction:column;
  background:var(--surface-3);
  -webkit-backdrop-filter:saturate(1.5) blur(22px); backdrop-filter:saturate(1.5) blur(22px);
  border-left:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  box-shadow:var(--shadow-drawer);
  transform:translateX(102%); transition:transform .34s cubic-bezier(.22,1,.36,1); }
.sk-drawer.open{ transform:translateX(0); }

.sk-drawer-hd{ flex:none; display:flex; align-items:center; gap:14px;
  height:60px; padding:0 20px;
  border-bottom:1px solid var(--line);
  background:var(--surface-3); }
.sk-drawer-t{ font-size:15px; font-weight:660; letter-spacing:-.02em;
  color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-drawer-ax{ display:flex; align-items:center; gap:14px; }
.sk-drawer-full{ font-size:12.5px; font-weight:550; color:var(--accent);
  text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:40px; }
.sk-drawer-full:hover{ text-decoration:underline; }
.sk-drawer-x{ display:grid; place-items:center; width:30px; height:30px;
  border:0; border-radius:var(--r-md); background:transparent; color:var(--ink-soft); cursor:pointer; }
.sk-drawer-x:hover{ background:var(--accent-soft); color:var(--accent); }
.sk-drawer-x svg{ width:16px; height:16px; }

.sk-drawer-bd{ flex:1; min-height:0; overflow:auto; padding:24px 26px 60px;
  outline:none; -webkit-overflow-scrolling:touch; }
.sk-drawer-load{ padding:48px 0; text-align:center; color:var(--ink-mute);
  font-family:var(--font-mono); font-size:12px; }

/* ════════════════════════════════════════════════════════════
   DRAWER CONTENT STYLESHEET: the reused skill-detail .wrap markup
   carries NO styling (the proto's component CSS lives in an inline
   <style> in skill-detail.html's <head>, which is not fetched, and
   library.html does not load polish/skill-detail.css). So the panel
   content must be fully styled here, scoped under .sk-drawer-bd,
   tuned for a single-column ~620px panel. This is the D1 fix.
   ════════════════════════════════════════════════════════════ */

/* layout reset: single column, no page chrome, full width */
.sk-drawer-bd .wrap{ max-width:none!important; width:auto!important;
  margin:0!important; padding:0!important; position:static!important; }
.sk-drawer-bd .rise{ opacity:1!important; transform:none!important; }
.sk-drawer-bd .body{ display:block!important; }
.sk-drawer-bd .panels-col{ display:block!important; }
.sk-drawer-bd .rail{ display:flex!important; flex-direction:column;
  gap:12px; margin-top:20px; }

/* ── role band: a clean, demoted control strip (was raw text) ── */
.sk-drawer-bd .roleband{ display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin:0 0 18px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:color-mix(in srgb,var(--bg-2) 55%,transparent);
  font-size:11.5px; color:var(--ink-mute); }
.sk-drawer-bd .roleband .rl-lbl{ font-family:var(--font-mono);
  font-size:9px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-mute); }
.sk-drawer-bd .roleseg{ display:inline-flex; border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; background:var(--paper); }
.sk-drawer-bd .roleseg button{ padding:4px 11px; font-size:11.5px;
  font-family:inherit; color:var(--ink-soft); background:transparent;
  border:none; cursor:pointer; transition:background var(--t-fast),color var(--t-fast); }
.sk-drawer-bd .roleseg button:hover{ color:var(--ink); background:var(--accent-soft); }
.sk-drawer-bd .roleseg button.on{ background:var(--solid);
  color:var(--solid-fg); font-weight:600; }
.sk-drawer-bd .roleband .rl-note{ font-style:italic; flex-basis:100%;
  color:var(--ink-mute); }

/* ── repo header: constrain the giant icon, set the name scale ── */
.sk-drawer-bd .repo{ display:flex; flex-direction:column; gap:14px;
  align-items:stretch; margin:0 0 18px; }
.sk-drawer-bd .repo-id{ display:flex; align-items:flex-start; gap:13px; }
/* size only ,  refined fill/ring/glyph = canonical D2 (space-ds.css) */
.sk-drawer-bd .repo-ic{ width:44px!important; height:44px!important;
  border-radius:var(--r-md); flex-shrink:0; display:grid; place-items:center; }
.sk-drawer-bd .repo-ic svg{ width:21px!important; height:21px!important; }
.sk-drawer-bd .repo-name{ font-size:19px; font-weight:660;
  letter-spacing:-.03em; line-height:1.2; color:var(--ink);
  display:flex; align-items:baseline; gap:3px; flex-wrap:wrap; }
.sk-drawer-bd .repo-name .own{ color:var(--ink-soft); font-weight:500; }
.sk-drawer-bd .repo-name .sl{ color:var(--ink-faint); font-weight:400; }
.sk-drawer-bd .repo-name .vis{ margin-left:6px; align-self:center; }
.sk-drawer-bd .repo-desc{ margin-top:7px; font-size:13px;
  color:var(--ink-soft); line-height:1.55; }
.sk-drawer-bd .repo-meta{ margin-top:11px; display:flex; gap:10px 16px;
  flex-wrap:wrap; font-family:var(--font-mono); font-size:11px;
  color:var(--ink-mute); }
.sk-drawer-bd .repo-meta .it{ display:inline-flex; align-items:center; gap:5px; }
.sk-drawer-bd .repo-meta .it svg{ width:12px; height:12px;
  color:var(--accent); opacity:.7; }
.sk-drawer-bd .repo-act{ display:flex; gap:8px; flex-wrap:wrap; }
.sk-drawer-bd .repo-act .btn{ flex:1; min-width:140px; justify-content:center; }
.sk-drawer-bd .role-ro{ display:none; font-size:11px; color:var(--ink-mute);
  font-style:italic; }

/* ── works-with pills ── */
.sk-drawer-bd .works{ display:flex; align-items:center; gap:7px;
  flex-wrap:wrap; margin:0 0 20px; }
.sk-drawer-bd .works .lbl{ font-family:var(--font-mono); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute);
  margin-right:3px; }
.sk-drawer-bd .works .pill{ font-size:11.5px; font-weight:520;
  padding:3px 11px; border-radius:var(--r-pill); display:inline-block;
  background:color-mix(in srgb,var(--accent) 7%,var(--bg-2));
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));
  color:var(--ink-soft); }

/* ── tabs: horizontal scroll, accent underline on selected ── */
.sk-drawer-bd .tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line);
  margin:0 0 20px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; }
.sk-drawer-bd .tabs::-webkit-scrollbar{ display:none; }
.sk-drawer-bd .tabs .tab{ display:inline-flex; align-items:center; gap:5px;
  padding:9px 12px; font-size:12.5px; color:var(--ink-mute); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500;
  white-space:nowrap; transition:color var(--t-fast),border-color var(--t-fast); }
.sk-drawer-bd .tabs .tab:hover{ color:var(--ink); }
.sk-drawer-bd .tabs .tab[aria-selected="true"]{ color:var(--accent)!important;
  border-bottom-color:var(--accent)!important; font-weight:600; }
.sk-drawer-bd .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); }

/* ── panels: card surface, only the active one shown ── */
.sk-drawer-bd .panel{ display:none; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface-2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.sk-drawer-bd .panel.on{ display:block; }
.sk-drawer-bd .panel-head{ display:flex; align-items:center;
  justify-content:space-between; padding:11px 16px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-2) 60%,transparent); }
.sk-drawer-bd .panel-head .pt{ font-family:var(--font-mono);
  font-size:11px; color:var(--ink); font-weight:600; }
.sk-drawer-bd .panel-head .pm{ font-family:var(--font-mono);
  font-size:10px; color:var(--ink-mute); }

/* ── markdown body ── */
.sk-drawer-bd .md{ padding:18px 18px 22px; }
.sk-drawer-bd .md h1{ font-size:18px; font-weight:650; letter-spacing:-.02em;
  margin:0 0 11px; padding-bottom:9px; border-bottom:1px solid var(--line);
  color:var(--ink); }
.sk-drawer-bd .md h2{ font-size:14px; font-weight:640; letter-spacing:-.01em;
  margin:18px 0 7px; color:var(--ink); }
.sk-drawer-bd .md p,.sk-drawer-bd .md li{ font-size:13px;
  color:var(--ink-soft); line-height:1.62; }
.sk-drawer-bd .md p{ margin:0 0 11px; }
.sk-drawer-bd .md ul{ padding-left:19px; margin:0 0 13px; }
.sk-drawer-bd .md li{ margin:3px 0; }
.sk-drawer-bd .md code{ font-family:var(--font-mono); font-size:11.5px;
  background:var(--bg-3); border:1px solid var(--line); padding:1px 5px;
  border-radius:var(--r-sm); color:var(--ink); }
.sk-drawer-bd .md pre{ font-family:var(--font-mono); font-size:11.5px;
  background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px 14px; line-height:1.55;
  overflow-x:auto; margin:8px 0 13px; }
.sk-drawer-bd .md pre code{ background:none; border:0; padding:0; }

/* ── tables (files / versions) ── */
.sk-drawer-bd .file-table,.sk-drawer-bd .ver-table{ width:100%;
  border-collapse:collapse; }
.sk-drawer-bd .file-table th,.sk-drawer-bd .ver-table th{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-mute); padding:8px 10px;
  text-align:left; border-bottom:1px solid var(--line); font-weight:500;
  background:color-mix(in srgb,var(--bg-2) 50%,transparent); }
.sk-drawer-bd .file-table td,.sk-drawer-bd .ver-table td{ padding:9px 10px;
  font-size:12px; border-bottom:1px solid var(--line-soft);
  vertical-align:middle; }
.sk-drawer-bd .file-table tr:last-child td,
.sk-drawer-bd .ver-table tr:last-child td{ border-bottom:none; }
.sk-drawer-bd .file-table .fp{ font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink); }
.sk-drawer-bd .file-table .fp .entry{ color:var(--ink-soft); }
.sk-drawer-bd .file-table .sha,.sk-drawer-bd .file-table .fsz,
.sk-drawer-bd .file-table .fmime{ font-family:var(--font-mono);
  font-size:11px; color:var(--ink-mute); }
.sk-drawer-bd .file-summary{ font-family:var(--font-mono); font-size:11px;
  color:var(--ink-mute); padding:11px 14px; border-top:1px solid var(--line); }
.sk-drawer-bd .ver-table .vn{ font-family:var(--font-mono); font-size:12.5px;
  font-weight:600; color:var(--ink); }
.sk-drawer-bd .ver-table .vd{ font-size:11.5px; color:var(--ink-mute);
  font-family:var(--font-mono); }
.sk-drawer-bd .ver-table .vc{ font-size:12.5px; color:var(--ink-soft); }
.sk-drawer-bd .ver-table .badge-accent,
.sk-drawer-bd .ver-table .badge-negative,
.sk-drawer-bd .ver-table .badge-mute{ white-space:nowrap; }
.sk-drawer-bd .ver-table td:nth-child(2){ white-space:nowrap; }
.sk-drawer-bd .yanked-note{ font-size:11px; color:var(--ink-mute);
  font-style:italic; margin-top:3px; line-height:1.45; }
.sk-drawer-bd .badge-negative{ background:color-mix(in srgb,var(--negative) 12%,transparent);
  color:var(--negative); border:1px solid color-mix(in srgb,var(--negative) 25%,transparent);
  border-radius:var(--r-sm); font-family:var(--font-mono); font-size:10px;
  padding:2px 7px; display:inline-block; }
.sk-drawer-bd .badge-mute{ background:var(--bg-2); color:var(--ink-mute);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:10px; padding:2px 7px;
  display:inline-block; }

/* ── access / manage sections ── */
.sk-drawer-bd .access-section,.sk-drawer-bd .manage-section{ padding:16px 18px; }
.sk-drawer-bd .access-section+.access-section,
.sk-drawer-bd .manage-section+.manage-section{ border-top:1px solid var(--line); }
.sk-drawer-bd .access-section h3,.sk-drawer-bd .manage-section h3{
  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-mute); margin:0 0 12px;
  font-weight:600; }
.sk-drawer-bd .person-row,.sk-drawer-bd .manage-row,
.sk-drawer-bd .danger-row,.sk-drawer-bd .link-row{ display:flex;
  align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-top:1px solid var(--line-soft); flex-wrap:wrap; }
.sk-drawer-bd .person-row:first-of-type,
.sk-drawer-bd .manage-row:first-of-type,
.sk-drawer-bd .danger-row:first-of-type,
.sk-drawer-bd .link-row:first-of-type{ border-top:none; }
.sk-drawer-bd .person-info,.sk-drawer-bd .link-info{ display:flex;
  flex-direction:column; gap:2px; min-width:0; }
.sk-drawer-bd .person-email,.sk-drawer-bd .link-name{ font-size:12.5px;
  color:var(--ink); font-weight:560; }
.sk-drawer-bd .person-meta,.sk-drawer-bd .link-meta{ font-size:11px;
  color:var(--ink-mute); font-family:var(--font-mono); }
.sk-drawer-bd .manage-row .mk,.sk-drawer-bd .danger-row .dk{
  color:var(--ink-mute); font-size:12.5px; }
.sk-drawer-bd .manage-row .mv{ color:var(--ink); font-weight:540;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; }
.sk-drawer-bd .manage-row .mv-note,.sk-drawer-bd .danger-row .dnote{
  font-size:11px; color:var(--ink-mute); font-family:var(--font-mono); }
.sk-drawer-bd .seg{ display:inline-flex; border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; background:var(--paper); }
.sk-drawer-bd .seg-opt{ padding:4px 11px; font-size:11.5px; cursor:pointer;
  color:var(--ink-soft); background:transparent; border:none;
  font-family:inherit; }
.sk-drawer-bd .seg-opt.active{ background:var(--accent)!important;
  color:#fff!important; font-weight:600; }
.sk-drawer-bd .access-footer{ padding:13px 18px; border-top:1px solid var(--line); }
.sk-drawer-bd .danger-area{ padding:16px 18px; border-top:1px solid var(--line); }
.sk-drawer-bd .danger-area h3{ font-family:var(--font-mono); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--negative);
  margin:0 0 12px; font-weight:600; }

/* ── activity list ── */
.sk-drawer-bd .activity-list{ padding:16px 18px; display:flex;
  flex-direction:column; gap:0; }
.sk-drawer-bd .activity-item{ display:flex; gap:13px; padding:11px 0;
  border-top:1px solid var(--line-soft); align-items:flex-start; }
.sk-drawer-bd .activity-item:first-child{ border-top:none; }
.sk-drawer-bd .activity-dot{ width:7px; height:7px; border-radius:50%;
  background:var(--accent); opacity:.55; flex-shrink:0; margin-top:5px; }
.sk-drawer-bd .activity-body{ flex:1; min-width:0; }
.sk-drawer-bd .activity-event{ font-family:var(--font-mono); font-size:12px;
  color:var(--ink-soft); line-height:1.45; }
.sk-drawer-bd .activity-event strong{ color:var(--accent); font-weight:600; }
.sk-drawer-bd .activity-actor{ font-size:11px; color:var(--ink-mute);
  margin-top:2px; }
.sk-drawer-bd .activity-ts{ font-family:var(--font-mono); font-size:10.5px;
  color:var(--ink-mute); white-space:nowrap; flex-shrink:0; }

/* ── rail cards (collapse below the panels in the narrow drawer) ── */
.sk-drawer-bd .rcard{ padding:15px 16px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface-2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm); }
.sk-drawer-bd .rcard h4{ font-family:var(--font-mono); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute);
  margin:0 0 11px; font-weight:600; }
.sk-drawer-bd .rcard .rrow{ display:flex; align-items:center;
  justify-content:space-between; padding:6px 0;
  border-top:1px solid var(--line-soft); font-size:12px; }
.sk-drawer-bd .rcard .rrow:first-of-type{ border-top:none; }
.sk-drawer-bd .rcard .rrow .k{ color:var(--ink-mute); }
.sk-drawer-bd .rcard .rrow .v{ color:var(--ink); font-weight:560; }
.sk-drawer-bd .rcard .cmd{ display:flex; align-items:center; gap:6px;
  padding:9px 11px; font-family:var(--font-mono); font-size:11.5px;
  background:color-mix(in srgb,var(--accent) 5%,var(--bg-2))!important;
  border:1px solid var(--accent-line)!important; border-radius:var(--r-md);
  color:var(--ink); }
.sk-drawer-bd .rcard .cmd .pr{ color:var(--accent); font-weight:600; }
.sk-drawer-bd .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; }
.sk-drawer-bd .rcard .cmd .cp:hover{ color:var(--accent);
  border-color:var(--accent-line); }
.sk-drawer-bd .rcard .pubr{ display:flex; align-items:center; gap:10px;
  text-decoration:none; }
.sk-drawer-bd .rcard .pubr .av{ width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:680;
  background:var(--accent-soft)!important; color:var(--accent)!important;
  border:1px solid var(--accent-line); flex-shrink:0; }
.sk-drawer-bd .rcard .pubr .nm{ font-size:13px; font-weight:610;
  color:var(--ink); }
.sk-drawer-bd .rcard .pubr .hd{ font-family:var(--font-mono); font-size:11px;
  color:var(--ink-mute); }
.sk-drawer-bd .rcard .btn-block{ width:100%; justify-content:center; }

/* hide the in-page file-viewer overlay if it rides along in .wrap */
.sk-drawer-bd .fv{ display:none!important; }

@media (max-width:680px){
  .sk-drawer{ width:100vw; border-left:0; }
  .sk-drawer-bd{ padding:20px 16px 56px; }
  /* E4: comfortable mobile touch target for the drawer close control */
  .sk-drawer-x{ width:40px; height:40px; }
  .sk-drawer-x svg{ width:18px; height:18px; }
  .sk-drawer-hd{ padding:0 14px; }
}
@media (prefers-reduced-motion:reduce){
  .sk-drawer,.sk-drawer-ov{ transition:none; }
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .shell .main {
    padding: 22px 16px 60px;
  }
  .shell .main .head {
    gap: 12px;
  }
  .shell .main .grid {
    grid-template-columns: 1fr;
  }
  .shell .main .filters {
    gap: 10px 14px;
  }
}