/* ============================================================================
   src/cortex/skills.css — the Skills view (skills.js)
   ----------------------------------------------------------------------------
   The approved mockup's Skills rules (the design notes (cortex-mockup)),
   on the site's tokens. cortex.css owns the vocabulary both views wear
   (.cx-btn, .cx-chip, .cx-k, .cx-input, .cx-badge, the .cx-rise / .cx-rise8
   reveal); proof.css owns the stat grid (.pf-stats, stat-cell.css), the
   skeleton (.pf-skel, panel.css) and the pill (.pf-tabs, timeframe.css). What
   is here: the frame (main column + right rail), the tiles' rise, the tabs
   and their travelling underline, the filters, the cards, Your skills, Build
   a skill, Track record, the rail, and every state.

   Every colour resolves through src/shared/tokens.css / tokens-dark.css.
   Motion is Meridian's (motion.css): 0.15s state colour, 0.24s out-quint for
   the underline (on transform), rise-8 / rise-14 on out-cubic. No hover
   scale, no bounce. Reduced motion: instant (layer 2 at the foot).
   ========================================================================== */

/* ══ the frame: main column + right rail, no sidebar ═════════════════════ */
.cx-skills{
  display:grid; gap:var(--sp-18); margin-top:var(--sp-21);
  grid-template-columns:minmax(0,1fr) 296px;
  grid-template-rows:auto auto auto 1fr;
  grid-template-areas:"main build" "main connect" "main recent" "main .";
  align-items:start;
}
.cx-skmain{ grid-area:main; min-width:0; }
.cx-railbuild{ grid-area:build; min-width:0; }
.cx-railconnect{ grid-area:connect; min-width:0; }
.cx-railrecent{ grid-area:recent; min-width:0; }
@media (max-width:959px){
  /* phone and tablet: the compact rail on top, Recently published under the grid */
  .cx-skills{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"build" "connect" "main" "recent"; gap:var(--sp-15); margin-top:var(--sp-18); }
  .cx-railrecent{ margin-top:var(--sp-15); }
}
:where(.cx-skview) :where(h2,h3,h4,h5,p,ul,ol,dl,dd,pre){ margin:0; }
:where(.cx-skview) :where(ul,ol){ padding:0; list-style:none; }

/* ══ the four stat tiles — stat-cell.css's hairline grid ═════════════════
   The grid sits beside the rail, so it goes to two columns earlier than on
   /usage, and it stays two-up on a phone (the mockup). Each cell rides the
   view's rise (cortex.js adds .is-inview with the +0.06s ladder), on rise-14
   instead of stat-cell.css's own always-on entrance. */
@media (max-width:1100px){ .cx-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .cx-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cx-stats .pf-stat{ animation:none; }
.cx-stats .pf-stat.cx-rise8.is-inview{ animation:rise-14 var(--dur-400) var(--mrd-ease-out-cubic) var(--d, 0s) both; }
@media (max-width:420px){
  .cx-stats .pf-stat{ padding:var(--sp-13) var(--sp-11) var(--sp-13); }
  .cx-stats .pf-stat__v{ font-size:var(--fs-21); }
}
/* the figure's own line box (1.1em: 28.6px at 26px, 23.1px at the phone's
   21px), held while the skeleton shows, which is sized to fit inside it */
.cx-stats .pf-stat__v{ min-height:1.1em; }
.cx-stats .pf-stat__v .pf-skel{ margin-top:var(--sp-1); height:1em; }
/* a figure that arrives after the skeleton fades in once */
.cx-stats .pf-stat__v.is-fresh{ animation:fade-in var(--dur-300) var(--mrd-ease-out-cubic) both; }

/* ══ section tabs, with counts; the underline travels on transform ═══════ */
.cx-tabs{
  position:relative; display:flex; gap:var(--sp-3); margin-top:var(--sp-18);
  border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
}
.cx-tabs::-webkit-scrollbar{ display:none; }
.cx-tab{
  position:relative; flex:none; display:inline-flex; align-items:center; gap:var(--sp-7);
  min-height:46px; padding:0 var(--sp-13); border:0; background:none; color:var(--graphite);
  font:var(--fw-medium) var(--fs-xl)/1 var(--font-body); white-space:nowrap; cursor:pointer;
  transition:color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.cx-tab:first-child{ padding-left:var(--sp-3); }
.cx-tab:hover, .cx-tab[aria-selected="true"]{ color:var(--ink); }
.cx-tab:focus-visible{ outline:2px solid var(--brand); outline-offset:-4px; border-radius:var(--r-6); }
.cx-tab__n{
  min-width:22px; height:20px; padding:0 var(--sp-5); border-radius:var(--r-full);
  background:var(--pf-trough); color:var(--graphite);
  font:var(--fw-medium) var(--fs-md)/20px var(--font-mono); text-align:center; font-variant-numeric:tabular-nums;
}
.cx-tab[aria-selected="true"] .cx-tab__n{ color:var(--ink); }
.cx-tabs__ind{ position:absolute; left:0; bottom:0; width:1px; height:2px; background:var(--brand); transform-origin:0 0; opacity:0; pointer-events:none; }
.cx-tabs.has-ind .cx-tabs__ind{ opacity:1; }
.cx-tabs.is-animated .cx-tabs__ind{ transition:transform 0.24s var(--mrd-ease-out-quint); }
.cx-tabpanel{ padding-top:var(--sp-17); outline:none; }
.cx-tabpanel.is-in{ animation:rise-8 var(--dur-300) var(--mrd-ease-out-cubic) both; }

/* ══ filters ═════════════════════════════════════════════════════════════ */
.cx-filters{ display:grid; gap:var(--sp-11); margin-bottom:var(--sp-17); }
.cx-search{ position:relative; }
.cx-search svg{ position:absolute; left:var(--sp-12); top:50%; translate:0 -50%; width:15px; height:15px; color:var(--graphite); pointer-events:none; }
.cx-search input{ width:100%; padding-left:38px; }
.cx-search input::-webkit-search-cancel-button{ cursor:pointer; }
.cx-frow{ display:flex; align-items:center; gap:var(--sp-5) var(--sp-7); flex-wrap:wrap; }
.cx-frow > .cx-k{ min-width:64px; }
.cx-fchip{
  display:inline-flex; align-items:center; gap:var(--sp-5); min-height:32px; padding:0 var(--sp-11);
  border:1px solid var(--border); border-radius:var(--r-full); background:var(--paper); color:var(--ink);
  font:var(--fw-medium) var(--fs-base-p)/1 var(--font-body); white-space:nowrap; cursor:pointer;
  transition:border-color var(--mrd-duration-fast) var(--mrd-ease-in-out), background-color var(--mrd-duration-fast) var(--mrd-ease-in-out), color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.cx-fchip:hover{ border-color:var(--brand-55); }
.cx-fchip:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.cx-fchip b{ font:var(--fw-medium) var(--fs-md)/1 var(--font-mono); color:var(--graphite); font-variant-numeric:tabular-nums; }
.cx-fchip b:empty{ display:none; }
.cx-fchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.cx-fchip[aria-pressed="true"] b{ color:var(--paper); opacity:.75; }
@media (pointer:coarse){ .cx-fchip{ min-height:44px; min-width:44px; justify-content:center; } }

/* ══ chips and small parts the cards and the sheet share ═════════════════ */
.cx-chip--life-published{ border-color:var(--brand-55); color:var(--ink); background:var(--brand-10); }
.cx-chip--life-pending{ border-color:var(--warn); color:var(--ink); background:var(--ini-5); }
.cx-chip--life-deprecated{ border-style:dashed; color:var(--graphite); background:transparent; }
.cx-chip--life-reviewed{ background:var(--pf-trough); }
.cx-env{
  display:inline-flex; align-items:center; height:22px; padding:0 var(--sp-5); max-width:100%;
  border-radius:var(--pf-r-4); background:var(--pf-trough); color:var(--ink);
  font:var(--fs-sm-p)/20px var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cx-envs{ display:flex; flex-wrap:wrap; gap:var(--sp-3); min-width:0; }
.cx-av{
  display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:var(--r-6);
  background:var(--pf-trough); color:var(--ini-ink); font:var(--fw-semibold) 9.5px/1 var(--font-mono); text-transform:uppercase;
}
.cx-av--1{ background:var(--ini-1); } .cx-av--2{ background:var(--ini-2); } .cx-av--3{ background:var(--ini-3); }
.cx-av--4{ background:var(--ini-4); } .cx-av--5{ background:var(--ini-5); } .cx-av--6{ background:var(--ini-6); }
.cx-av--7{ background:var(--ini-7); } .cx-av--8{ background:var(--ini-8); } .cx-av--9{ background:var(--ini-9); }
.cx-av--10{ background:var(--ini-10); } .cx-av--11{ background:var(--ini-11); } .cx-av--12{ background:var(--ini-12); }
.cx-av--guest{ background:var(--pf-trough); color:var(--graphite); }
.cx-who{ display:inline-flex; align-items:center; gap:var(--sp-5); min-width:0; font-size:var(--fs-base-p); color:var(--ink); }
.cx-who > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-guest{ font-size:var(--fs-base-p); color:var(--graphite); font-style:italic; }
.cx-card__id{ font:var(--fs-sm-p)/1 var(--font-mono); color:var(--graphite); letter-spacing:var(--ls-01); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cx-evline{
  display:flex; flex-wrap:wrap; column-gap:var(--sp-5); margin-top:auto; padding-top:var(--sp-9);
  border-top:1px solid var(--divider-warm); font:var(--fs-md)/18px var(--font-body); color:var(--graphite); font-variant-numeric:tabular-nums;
}
.cx-evline > span{ white-space:nowrap; }
.cx-evline > span + span::before{ content:"·"; margin-right:var(--sp-5); color:var(--graphite); }
.cx-evline b{ color:var(--ink); font-weight:var(--fw-medium); }
.cx-actions{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:var(--sp-5); }
.cx-actnote{ position:relative; z-index:2; font-size:var(--fs-base); color:var(--graphite); line-height:var(--lh-mail); }
.cx-actnote--err{ color:var(--danger-text); }

/* ══ the card grid ═══════════════════════════════════════════════════════ */
.cx-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(236px, 1fr)); gap:var(--gap-grid); }
@media (max-width:560px){ .cx-grid{ grid-template-columns:minmax(0,1fr); } }
.cx-card{
  position:relative; display:flex; flex-direction:column; gap:var(--sp-9); min-width:0;
  padding:var(--sp-15); border:1px solid var(--border); border-radius:var(--r-9); background:var(--paper);
  transition:border-color var(--mrd-duration-fast) var(--mrd-ease-in-out), background-color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
@media (hover:hover){ .cx-card:not(.cx-card--skel):hover{ border-color:var(--brand-55); background:var(--brand-06); } }
.cx-card:has(.cx-card__open:focus-visible){ outline:2px solid var(--brand); outline-offset:2px; }
/* the head: the chip on one line, the ID on its own line under it, so every
   head is one height and the titles in a row start level */
.cx-card__top{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-5); min-width:0; }
.cx-card__top .cx-card__id{ max-width:100%; }
.cx-card h3{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-16); line-height:1.3; letter-spacing:-.015em; color:var(--ink); }
.cx-card__open{
  all:unset; cursor:pointer; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.cx-card__open::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
/* cards re-rise only on a filter or sort change, on the +0.06s ladder */
.cx-cardin{ animation:rise-8 var(--dur-350) var(--mrd-ease-out-cubic) var(--d, 0s) both; }
.cx-card--skel{ min-height:178px; }
.cx-card--skel .pf-skel.cx-skel-chip{ width:88px; height:20px; border-radius:var(--r-full); }
.cx-card--skel .pf-skel.cx-skel-foot{ width:100%; height:11px; margin-top:auto; }
.cx-more{ display:flex; justify-content:center; margin-top:var(--sp-17); }

/* ══ states: empty, not enabled, no match, unavailable, gate ═════════════ */
.cx-empty{ padding:var(--sp-21) var(--sp-18); border:1px dashed var(--border); border-radius:var(--r-9); text-align:center; }
.cx-empty h3{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-21); letter-spacing:-.02em; color:var(--ink); }
.cx-empty p{ margin:var(--sp-9) auto 0; max-width:52ch; color:var(--graphite); font-size:var(--fs-lg-p); line-height:var(--lh-relaxed); }
.cx-empty .cx-actions{ justify-content:center; margin-top:var(--sp-17); gap:var(--sp-9); }
.cx-empty__ic{ display:inline-grid; place-items:center; width:40px; height:40px; margin-bottom:var(--sp-13); border-radius:var(--r-10); background:var(--pf-trough); color:var(--graphite); }
.cx-empty__ic svg{ width:18px; height:18px; }
.cx-state{ display:flex; align-items:flex-start; gap:var(--sp-11); padding:var(--sp-16) var(--sp-17); border:1px solid var(--border); border-radius:var(--r-9); background:var(--paper); color:var(--graphite); }
.cx-state > svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--graphite); }
.cx-state h3{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-17); letter-spacing:-.02em; color:var(--ink); }
.cx-state p{ margin-top:var(--sp-3); font-size:var(--fs-lg-p); line-height:var(--lh-relaxed); }
.cx-state .cx-actions{ margin-top:var(--sp-11); }
.cx-gate{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-15); padding:var(--sp-18); border:1px solid var(--border); border-radius:var(--r-9); }
.cx-gate__ic{ width:40px; height:40px; border-radius:var(--r-10); display:grid; place-items:center; background:var(--pf-trough); color:var(--graphite); }
.cx-gate__ic svg{ width:18px; height:18px; }
.cx-gate h3{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-19); letter-spacing:-.02em; color:var(--ink); }
.cx-gate p{ margin-top:var(--sp-7); color:var(--graphite); font-size:var(--fs-lg-p); max-width:58ch; line-height:var(--lh-relaxed); }
.cx-gate .cx-actions{ margin-top:var(--sp-15); }
@media (max-width:520px){ .cx-gate{ grid-template-columns:1fr; padding:var(--sp-15); } }
.cx-none{ padding:var(--sp-18) 0; color:var(--graphite); font-size:var(--fs-lg-p); line-height:var(--lh-relaxed); }
.cx-none--rail{ padding:var(--sp-9) 0; font-size:var(--fs-base-p); }
.cx-skelrows{ display:grid; gap:var(--sp-13); padding:var(--sp-9) 0; }
.cx-skelrows .pf-skel:nth-child(3n){ width:62%; }

/* ══ Your skills: one skill per row ══════════════════════════════════════ */
.cx-mine{ display:grid; gap:var(--gap-grid); }
.cx-mine .cx-card{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-9) var(--sp-18); align-items:start; }
.cx-mine .cx-card__body{ display:flex; flex-direction:column; gap:var(--sp-7); min-width:0; }
.cx-mine .cx-card__side{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-7); max-width:320px; }
.cx-mine .cx-actions{ justify-content:flex-end; }
.cx-mine .cx-actnote{ text-align:right; }
.cx-mine .cx-evline{ margin-top:var(--sp-3); border-top:0; padding-top:0; }
.cx-card__life{ display:flex; align-items:center; gap:var(--sp-7); flex-wrap:wrap; }
.cx-card__vis{ font:var(--fs-sm-p)/1 var(--font-mono); letter-spacing:var(--ls-06); text-transform:uppercase; color:var(--graphite); }
@media (max-width:760px){
  .cx-mine .cx-card{ grid-template-columns:minmax(0,1fr); }
  .cx-mine .cx-card__side{ align-items:flex-start; max-width:none; }
  .cx-mine .cx-actions{ justify-content:flex-start; }
  .cx-mine .cx-actnote{ text-align:left; }
}

/* ══ Build a skill: one screen, three steps ══════════════════════════════ */
.cx-steps{ display:grid; gap:var(--sp-15); }
.cx-step{ border:1px solid var(--border); border-radius:var(--r-9); padding:var(--sp-17); transition:opacity var(--dur-200) var(--mrd-ease-in-out); }
.cx-step.is-locked{ opacity:.55; }
.cx-step__head{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--sp-11); align-items:start; margin-bottom:var(--sp-15); }
.cx-step__n{ font:var(--fw-bold) var(--fs-base) var(--font-mono); color:var(--acc); letter-spacing:var(--ls-06); padding-top:3px; }
.cx-step__head h3{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-19); letter-spacing:-.02em; color:var(--ink); }
.cx-step__head p{ margin-top:var(--sp-3); font-size:var(--fs-base-p); color:var(--graphite); max-width:64ch; line-height:var(--lh-relaxed); }
.cx-step__count{ font:var(--fs-md) var(--font-mono); color:var(--graphite); white-space:nowrap; padding-top:5px; }
@media (max-width:560px){
  .cx-step{ padding:var(--sp-15); }
  .cx-step__head{ grid-template-columns:auto minmax(0,1fr); }
  .cx-step__count{ grid-column:2; padding-top:0; }
}
.cx-memlist{ border-top:1px solid var(--border); }
.cx-mem{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--sp-11); align-items:start; padding:var(--sp-11) 0; border-bottom:1px solid var(--border); cursor:pointer; }
.cx-mem.is-off{ cursor:default; }
.cx-mem input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--brand); cursor:inherit; }
.cx-mem__t{ display:block; font-size:var(--fs-lg-p); color:var(--ink); line-height:var(--lh-body); overflow-wrap:anywhere; }
.cx-mem.is-off .cx-mem__t{ color:var(--graphite); }
.cx-mem__m{ margin-top:var(--sp-3); display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-9); font:var(--fs-md)/16px var(--font-mono); color:var(--graphite); }
.cx-qual{ margin-top:var(--sp-5); display:inline-flex; align-items:baseline; gap:var(--sp-5); flex-wrap:wrap; font-size:var(--fs-base); line-height:var(--lh-mail); }
.cx-qual b{ font:var(--fw-semibold) var(--fs-sm) var(--font-mono); letter-spacing:var(--ls-08); text-transform:uppercase; white-space:nowrap; }
.cx-qual.is-yes b{ color:var(--ok-text); }
.cx-qual.is-no b{ color:var(--graphite); }
.cx-qual span{ color:var(--graphite); }
@media (pointer:coarse){ .cx-mem{ min-height:44px; } }
.cx-cand{ display:grid; gap:var(--sp-15); animation:rise-8 var(--dur-350) var(--mrd-ease-out-cubic) both; }
.cx-cand__meta{ display:flex; flex-wrap:wrap; gap:var(--sp-5) var(--sp-11); font:var(--fs-md)/18px var(--font-mono); color:var(--graphite); }
.cx-cand__meta b{ color:var(--ink); font-weight:var(--fw-medium); }
.cx-cand h4{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-19); letter-spacing:-.02em; color:var(--ink); overflow-wrap:anywhere; outline:none; }
.cx-cand__sum{ color:var(--graphite); font-size:var(--fs-lg-p); line-height:var(--lh-relaxed); }
.cx-scope{ display:flex; gap:var(--sp-11); align-items:baseline; flex-wrap:wrap; padding:var(--sp-11) var(--sp-13); border:1px solid var(--border); border-radius:var(--r-9); background:var(--brand-06); font-size:var(--fs-base-p); color:var(--graphite); }
.cx-scope b{ color:var(--ink); font-weight:var(--fw-semibold); }
.cx-lines h5{ font:var(--fw-bold) var(--fs-sm) var(--font-mono); letter-spacing:var(--ls-10); text-transform:uppercase; color:var(--graphite); margin:var(--sp-11) 0 var(--sp-5); }
.cx-line{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-5) var(--sp-15); padding:var(--sp-7) 0; border-top:1px solid var(--divider-warm); font-size:var(--fs-lg-p); color:var(--ink); line-height:var(--lh-relaxed); }
.cx-line > span:first-child{ overflow-wrap:anywhere; }
.cx-line .cx-cites{ justify-content:flex-end; }
@media (max-width:640px){ .cx-line{ grid-template-columns:minmax(0,1fr); } .cx-line .cx-cites{ justify-content:flex-start; } }
.cx-conflict{ padding:var(--sp-11) var(--sp-13); border:1px solid var(--warn); border-radius:var(--r-9); background:var(--ini-5); font-size:var(--fs-base-p); color:var(--ink); line-height:var(--lh-relaxed); }
.cx-conflict b{ font:var(--fw-bold) var(--fs-sm) var(--font-mono); letter-spacing:var(--ls-10); text-transform:uppercase; display:block; margin-bottom:var(--sp-3); }
.cx-conflict .cx-cites{ margin-top:var(--sp-5); }
.cx-conflict .cx-bl{ margin-top:var(--sp-7); }
.cx-okline{ font-size:var(--fs-base-p); color:var(--graphite); }
.cx-decided{ padding:var(--sp-13) var(--sp-15); border:1px solid var(--border); border-radius:var(--r-9); background:var(--pf-trough); font-size:var(--fs-lg-p); color:var(--ink); line-height:var(--lh-relaxed); animation:rise-8 var(--dur-350) var(--mrd-ease-out-cubic) both; }
:root[data-theme="dark"] .cx-decided{ background:var(--brand-06); }
.cx-decided .cx-actions{ margin-top:var(--sp-11); }

/* ══ Track record ════════════════════════════════════════════════════════ */
.cx-recfilters{ display:grid; gap:var(--sp-11); margin-bottom:var(--sp-15); }
.cx-select{ min-height:40px; flex:1 1 220px; min-width:0; width:100%; max-width:420px; padding:0 var(--sp-11); border:1px solid var(--border); border-radius:var(--r-10); background:var(--paper); color:var(--ink); font-size:var(--fs-lg); }
.cx-select:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (pointer:coarse){ .cx-select{ min-height:44px; } }
.cx-privacy{ display:flex; gap:var(--sp-7); align-items:flex-start; margin-bottom:var(--sp-15); font-size:var(--fs-base-p); color:var(--graphite); line-height:var(--lh-relaxed); }
.cx-privacy svg{ width:14px; height:14px; margin-top:2px; flex:none; }
.cx-table{ width:100%; border-collapse:collapse; }
.cx-table th{ text-align:left; padding:var(--sp-7) var(--sp-9); border-bottom:1px solid var(--border); font:var(--fw-medium) var(--fs-sm) var(--font-mono); letter-spacing:var(--ls-10); text-transform:uppercase; color:var(--graphite); white-space:nowrap; }
.cx-table td{ padding:var(--sp-9); border-bottom:1px solid var(--divider-warm); font-size:var(--fs-base-p); color:var(--ink); vertical-align:top; }
.cx-table td.cx-mono{ font-family:var(--font-mono); font-size:var(--fs-base); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cx-table .is-muted{ color:var(--graphite); }
.cx-table tbody tr{ animation:rise-8 var(--dur-300) var(--mrd-ease-out-cubic) var(--d, 0s) both; }
.cx-res{ display:inline-flex; align-items:center; gap:var(--sp-5); white-space:nowrap; }
.cx-res i{ width:6px; height:6px; border-radius:50%; background:var(--graphite); flex:none; }
.cx-res.r-success i{ background:var(--ok); }
.cx-res.r-failure i{ background:var(--graphite); border-radius:1px; }
.cx-res.r-harmful i{ background:var(--danger); }
.cx-res.r-neutral i{ background:transparent; border:1px solid var(--graphite); }
.cx-res.r-none i, .cx-res.r-unused i{ background:transparent; border:1px dashed var(--graphite); }
.cx-skillbtn{
  padding:0; border:0; background:none; text-align:left; color:var(--ink); cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:3px; font:inherit;
  transition:text-decoration-color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.cx-skillbtn:hover{ text-decoration-color:var(--brand); }
@media (pointer:coarse){ .cx-skillbtn{ display:inline-flex; align-items:center; min-height:44px; } }
@media (max-width:760px){
  /* the table stacks into one card per row */
  .cx-table thead{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cx-table, .cx-table tbody, .cx-table tr, .cx-table td{ display:block; width:100%; }
  .cx-table tr{ border:1px solid var(--divider-warm); border-radius:var(--r-9); padding:var(--sp-9) var(--sp-11); margin-bottom:var(--sp-7); }
  .cx-table td{ border:0; padding:var(--sp-3) 0; display:flex; justify-content:space-between; gap:var(--sp-11); text-align:right; }
  .cx-table td::before{ content:attr(data-l); flex:none; text-align:left; font:var(--fs-sm) var(--font-mono); letter-spacing:var(--ls-10); text-transform:uppercase; color:var(--graphite); padding-top:2px; }
  .cx-table td.cx-mono{ white-space:normal; }
  .cx-table .cx-skillbtn{ text-align:right; }
}

/* ══ the right rail ══════════════════════════════════════════════════════ */
.cx-railbuild{ display:grid; gap:var(--sp-7); }
.cx-railbuild .cx-btn{ min-height:44px; }
.cx-railbuild .pf-skel.cx-skel-btn{ height:44px; width:100%; border-radius:var(--r-11); }
.cx-whoami{ display:flex; align-items:center; gap:var(--sp-5); font:var(--fs-md)/16px var(--font-mono); color:var(--graphite); }
.cx-whoami i{ width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none; }
.cx-railcard{ border:1px solid var(--border); border-radius:var(--r-9); background:var(--paper); padding:var(--sp-15); }
.cx-railcard h2{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--fs-17); letter-spacing:-.02em; color:var(--ink); }
.cx-recent{ margin-top:var(--sp-7); }
.cx-recent li + li{ border-top:1px solid var(--divider-warm); }
.cx-recent button{ display:grid; gap:var(--sp-3); width:100%; min-height:44px; padding:var(--sp-9) 0; border:0; background:none; text-align:left; cursor:pointer; }
.cx-recent button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-6); }
.cx-recent button b{
  font-weight:var(--fw-medium); font-size:var(--fs-lg); color:var(--ink); line-height:var(--lh-body);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
  transition:color var(--mrd-duration-fast) var(--mrd-ease-in-out);
}
.cx-recent button:hover b{ color:var(--acc); }
.cx-recent button span{ font:var(--fs-md)/16px var(--font-mono); color:var(--graphite); }
.cx-recent__skel{ display:grid; gap:var(--sp-5); padding:var(--sp-11) 0; }

/* ══ reduced motion — layer 2 (motion.css owns layer 1) ══════════════════ */
@media (prefers-reduced-motion: reduce){
  .cx-stats .pf-stat, .cx-stats .pf-stat__v.is-fresh, .cx-tabpanel.is-in, .cx-cardin, .cx-cand, .cx-decided, .cx-table tbody tr{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .cx-tabs.is-animated .cx-tabs__ind, .cx-card, .cx-fchip, .cx-tab, .cx-step{ transition:none !important; }
}

/* ── Review (operator queue) ── */
.cx-rv .cx-rv-why{ margin:0; padding-left:1.1em; font-size:var(--fs-base); color:var(--graphite); line-height:var(--lh-mail); }
.cx-rv .cx-rv-text{ width:100%; min-height:44px; resize:vertical; font:inherit; font-size:var(--fs-base); }
.cx-rv .cx-actions{ flex-wrap:wrap; }

/* memory promotion suggestion (memory reuse sprint) */
.cx-promo { display: block; margin-top: 4px; font-size: 12px; color: var(--muted, #6b6b6b); }
.cx-promo b { font-weight: 600; }
.cx-promo.is-eligible_skill b { color: var(--ok, #1f7a4d); }