/*
  Design system page styles for the GC kit. gc.css loads first, so everything here
  uses the kit's own tokens and components: the docs are built from the kit.
*/

/* ---------- Header and footer ---------- */
/* The header stays on screen on every page, so the menu is always one tap away. */
:root{--ds-bar-h:64px;}
html{scroll-padding-top:calc(var(--ds-bar-h) + 16px);}
.ds-bar{position:sticky; top:0; z-index:40; padding:14px 0; border-bottom:1px solid var(--border); background:var(--paper);}
.ds-bar .wrap{display:flex; align-items:center; gap:12px 24px;}
.ds-mark{display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-0.02em; text-decoration:none; white-space:nowrap;}
.ds-links{display:flex; gap:2px; margin-left:auto;}
.ds-links a{padding:6px 10px; border-radius:999px; font-size:0.88rem; font-weight:600; white-space:nowrap; color:var(--muted); text-decoration:none; transition:color .2s, background .2s;}
.ds-links a:hover{color:var(--text); background:var(--panel);}
.ds-home{display:inline-block; padding:4px 0; margin:-4px 0; font-size:0.88rem; font-weight:600; color:var(--accent-ink); text-decoration:none; white-space:nowrap;}
.ds-home:hover{text-decoration:underline;}
/* Phones and narrow windows: a Menu button opens every page, in its groups, under the header. */
.ds-menu{display:none; margin-left:auto;}
.ds-menu summary{list-style:none; cursor:pointer; padding:8px 18px; font-size:0.88rem; font-weight:600;}
.ds-menu summary::-webkit-details-marker{display:none;}
.ds-m-close, .ds-menu[open] .ds-m-open{display:none;}
.ds-menu[open] .ds-m-close{display:inline;}
.ds-sheet{position:absolute; left:0; right:0; top:100%; max-height:calc(100vh - var(--ds-bar-h)); max-height:calc(100dvh - var(--ds-bar-h)); overflow-y:auto; padding:12px 20px 28px; background:var(--paper); border-bottom:1px solid var(--border); box-shadow:0 24px 40px rgba(10,37,64,0.12);}
.ds-sheet-k{margin:16px 0 4px; font-size:0.78rem; font-weight:600; color:var(--faint);}
.ds-sheet ul{list-style:none; margin:0; padding:0;}
.ds-sheet li a{display:block; margin:0 -12px; padding:9px 12px; border-radius:var(--r-md); color:var(--text); text-decoration:none;}
.ds-sheet li a b{display:block; font-size:0.98rem;}
.ds-sheet li a span{display:block; margin-top:2px; font-size:0.84rem; line-height:1.45; color:var(--muted);}
.ds-sheet a[aria-current="page"]{background:var(--panel);}
.ds-sheet-home, .ds-sheet-site{display:block; padding:10px 0; font-size:0.92rem; font-weight:600; color:var(--accent-ink); text-decoration:none;}
.ds-sheet-site{margin-top:14px; padding-top:16px; border-top:1px solid var(--border);}
.ds-foot{padding:36px 0 48px; border-top:1px solid var(--border); font-size:0.85rem; color:var(--muted);}
.ds-foot .wrap{display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap;}
.ds-map{flex:1 0 100%; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px; max-width:900px; margin-bottom:28px;}
.ds-map p{margin:0 0 8px; font-size:0.8rem; font-weight:600; color:var(--faint);}
.ds-map ul{list-style:none; margin:0; padding:0;}
.ds-foot .ds-map a{display:inline-block; padding:5px 0; color:var(--text); font-size:0.9rem; font-weight:500; text-decoration:none;}
.ds-foot .ds-map a:hover, .ds-foot .ds-map a:focus-visible{color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px;}
.ds-foot a{color:var(--accent-ink); font-weight:600;}
.sys-head{padding-top:72px;}
.sys-head .crumbs{margin-bottom:28px;}
.ds-page-fig{font-weight:500; color:var(--faint);}
.ds-carry{margin:0 0 12px;}

/* ---------- Home: every page at a glance, in its group ---------- */
.ds-group{margin-top:36px;}
.ds-group .sys-h{margin-bottom:2px;}
.ds-doors{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
.ds-door{display:flex; flex-direction:column; gap:6px; height:100%; padding:20px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--paper); color:var(--text); text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s;}
.ds-door:hover, .ds-door:focus-visible{border-color:var(--accent); box-shadow:0 12px 28px rgba(10,37,64,0.08); transform:translateY(-2px);}
.ds-door-fig{font-size:0.78rem; font-weight:600; color:var(--accent-ink);}
.ds-door b{font-size:1.06rem; letter-spacing:-0.01em;}
.ds-door b::after{content:' \2192'; color:var(--accent-ink);}
.ds-door-sum{font-size:0.9rem; line-height:1.5; color:var(--muted);}
@media (prefers-reduced-motion: reduce){ .ds-door{transition:none;} .ds-door:hover{transform:none;} }

/* ---------- Helpers carried over from the main site ---------- */
.ds-pairs{margin:4px 0 32px; border-top:1px solid var(--border);}
.ds-pairs div{display:grid; grid-template-columns:130px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--border);}
.ds-pairs dt{font-weight:700; font-size:0.92rem; color:var(--violet-deep);}
.ds-pairs dd{margin:0; font-size:0.95rem;}
.ds-n{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:0.75rem; font-weight:700; background:var(--panel); color:var(--violet-deep); border:1px solid var(--border);}

/* The full menu needs about 1010px; below that, the Menu button takes over. */
@media (max-width:1080px){
  :root{--ds-bar-h:70px;}
  .ds-links, .ds-home{display:none;}
  .ds-menu{display:block;}
}
@media (max-width:900px){
  .ds-doors{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .ds-map{grid-template-columns:1fr 1fr; gap:24px 20px;}
  .sys-head{padding-top:48px;}
}
@media (max-width:640px){
  .ds-doors{grid-template-columns:1fr; gap:12px;}
  .ds-door{padding:16px 18px;}
}

/* ---------- Operating model: outcomes, two real changes traced, and what it means for a program ---------- */
.sys-om-head .lede{max-width:640px;}
.sys-om-head .grad-word{white-space:nowrap;}

/* Outcomes: a plain checklist */
.sys-outcomes{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, max-content); gap:12px 40px;}
.sys-outcomes li, .sys-receipts li{position:relative; padding-left:32px;}
.sys-outcomes li{font-weight:600; line-height:1.4;}
.sys-outcomes li::before, .sys-receipts li::before{content:''; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--accent);}
.sys-outcomes li::after, .sys-receipts li::after{content:''; position:absolute; left:7px; top:5px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

/* Follow one change: the switch, then one case at a time */
.sys-case-pick{margin-bottom:20px;}
.sys-case{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 56px; align-items:start; padding:32px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);}
.sys-case + .sys-case{margin-top:16px;}
.sys-case[hidden] + .sys-case{margin-top:0;}
.sys-case-story h3{font-size:1.45rem; line-height:1.2;}
.sys-case-sum{margin:8px 0 0; font-size:0.98rem; color:var(--muted);}
.sys-case code{font:600 0.9em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--text); white-space:nowrap;}
.sys-ba{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:22px;}
.sys-ba-card{padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);}
.sys-ba-card.after{padding:13px 15px; border:2px solid var(--accent);}
.sys-ba-k{margin:0 0 10px; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--faint);}
.sys-ba-card.after .sys-ba-k{color:var(--accent-ink);}
.sys-ba-sw{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.sys-ba-sw li{display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:10px; align-items:center;}
.sys-ba-sw li > span{grid-row:span 2; width:24px; height:24px; border-radius:6px;}
.sys-ba-sw code{font:700 0.85rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:nowrap;}
.sys-ba-sw small{font:0.72rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--faint);}
.sys-ba-note{margin:10px 0 0; font-size:0.85rem; line-height:1.45; color:var(--muted);}
/* An illustration of a scrolled filter. Before, the glass scrolled away with the options, so it
   stops with a hard edge after "Hooks"; after, it covers the whole control. */
.sys-fx{--fx-glass:radial-gradient(120% 80% at 30% -20%, #fff, rgba(255,255,255,0) 60%), linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)); --fx-edge:inset 0 1px 0 #fff, inset 0 -10px 16px -12px var(--accent);
  position:relative; overflow:hidden; height:38px; border-radius:var(--r-pill); background:var(--border); box-shadow:inset 0 0 0 1px rgba(10,37,64,0.06);}
.sys-fx:not(.broken)::before{content:''; position:absolute; inset:0; border-radius:inherit; background:var(--fx-glass); box-shadow:var(--fx-edge);}
.sys-fx-row{position:absolute; z-index:1; top:0; bottom:0; left:-40px; display:flex; align-items:center; gap:18px; white-space:nowrap; font-size:0.8rem; font-weight:600; color:var(--muted);}
.sys-fx-glass{display:flex; align-items:center; gap:18px; height:100%; padding:0 14px 0 16px;}
.sys-fx.broken .sys-fx-glass{background:var(--fx-glass); box-shadow:var(--fx-edge); border-right:2px solid var(--coral);}
/* The receipts: a ticked timeline, each step with its time and the record behind it */
.sys-receipts{list-style:none; margin:0; padding:0;}
.sys-receipts li{padding-bottom:18px; background:linear-gradient(var(--accent-line), var(--accent-line)) 9px 26px / 2px calc(100% - 28px) no-repeat;}
.sys-receipts li:last-child{padding-bottom:0; background:none;}
.sys-receipts p{margin:0; font-size:0.95rem; line-height:1.5; color:var(--muted);}
.sys-receipts b{color:var(--text);}
.sys-receipts .sys-rc-meta{display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:3px; font-size:0.8rem; font-weight:600;}
.sys-rc-meta span{color:var(--faint);}
.sys-rc-meta a{display:inline-block; padding:4px 0; margin:-4px 0; color:var(--accent-ink); text-decoration:none;}
.sys-rc-meta a:hover{text-decoration:underline;}
.sys-rc-meta a[target]::after{content:'\2197'; margin-left:3px;}
.sys-case-foot{margin:14px 0 0; font-size:0.8rem; color:var(--faint);}

/* What this means for your program: a dark band, using the kit's dark surface */
.sys-program{background:radial-gradient(55% 90% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), radial-gradient(45% 80% at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%), var(--paper);}
.sys-program .section-head h2{line-height:1.25;}
.sys-map{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;}
.sys-map li{display:flex; flex-direction:column; padding:20px; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:var(--r-md); background:var(--surface);}
.sys-map b{font-size:1.02rem; line-height:1.35; letter-spacing:-0.01em;}
.sys-map p{margin:8px 0 0; font-size:0.9rem; line-height:1.55; color:var(--muted);}
.sys-map small{margin-top:auto; padding-top:14px; font-size:0.8rem; font-weight:600; color:var(--accent-ink);}

/* The old intro, now the lead-in to Foundations */
.sys-lead{margin-bottom:0;}
.sys-lead-cta{margin-top:24px;}

@media (max-width:1000px){
  .sys-map{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:900px){
  .sys-outcomes{grid-template-columns:repeat(2, max-content);}
  .sys-case{grid-template-columns:1fr; padding:22px;}
}
@media (max-width:640px){
  .sys-outcomes{grid-template-columns:1fr; gap:10px; margin-top:26px;}
  .sys-case{padding:18px 16px;}
  .sys-case-story h3{font-size:1.3rem;}
  .sys-ba{gap:8px;}
  .sys-ba.is-filter{grid-template-columns:1fr;}
  .sys-ba-card{padding:12px;}
  .sys-ba-card.after{padding:11px;}
  .sys-ba-sw li{column-gap:8px;}
  .sys-ba-sw code{font-size:0.76rem;}
  .sys-map{grid-template-columns:1fr;}
}

/* ---------- Foundations, playground and "Use it anywhere" ---------- */
.sys-block + .sys-block{margin-top:64px;}
.sys-h{font-size:1.15rem; margin-bottom:6px;}
.sys-note{margin:0 0 8px; max-width:var(--max); color:var(--muted); font-size:0.95rem;}
.sys-k{display:block; margin:24px 0 10px; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--faint);}
.sys-swatches, .sys-radii{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap:12px;}
.sys-swatch{display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden;}
.sys-chip{display:block; height:72px; border-bottom:1px solid var(--border);}
.sys-swatches.art .sys-chip{height:96px;}
.sys-swatch > span:not(.sys-chip){padding:0 14px;}
.sys-name{display:block; margin-top:10px; font-size:0.85rem; font-weight:700;}
.sys-val{display:block; font:0.75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--muted); overflow-wrap:anywhere;}
.sys-use{display:block; margin:4px 0 12px; font-size:0.8rem; line-height:1.4; color:var(--muted);}
.sys-radii{margin-top:20px;}
.sys-radii li{display:flex; flex-direction:column; padding:16px 16px 4px; background:#fff; border:1px solid var(--border); border-radius:14px;}
.sys-shape{display:block; height:88px; margin-bottom:2px; background:var(--violet-wash); border:2px solid var(--violet);}
.sys-type{list-style:none; margin:20px 0 0; padding:0; border-top:1px solid var(--border);}
.sys-type li{display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:8px 32px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--border);}
.sys-sample{margin:0; line-height:1.15; overflow-wrap:anywhere;}
.sys-spec{margin:0; font-size:0.82rem; color:var(--muted);}
.sys-spec b{display:block; font-size:0.88rem; color:var(--ink);}
.sys-material{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center; margin-top:20px;}
.sys-stage{display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:14px; min-height:240px; padding:22px; border-radius:20px; background:var(--art-sport); overflow:hidden;}
.sys-pane{padding:14px 18px; border-radius:16px;}
.sys-pane strong{display:block; font-size:0.95rem;}
.sys-pane span{display:block; font-size:0.8rem; color:var(--muted);}
.sys-pairs{margin:20px 0 0;}
.sys-material .sys-pairs{margin:0;}
.sys-pairs dt{color:var(--ink); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.8rem; padding-top:2px;}
.sys-pairs div{grid-template-columns:150px 1fr;}
.sys-pairs code{display:block; margin-top:2px; font:0.76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--faint);}

.sys-play{display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; align-items:start;}
.sys-controls{position:sticky; top:calc(var(--ds-bar-h) + 16px); z-index:5; display:flex; flex-direction:column; gap:18px; padding:20px; border-radius:24px; background:linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));}
.sys-ctl .sys-k{display:flex; justify-content:space-between; gap:8px; margin:0 0 8px;}
.sys-ctl output{font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted);}
.sys-dots{display:flex; flex-wrap:wrap; gap:8px;}
.sys-dot{position:relative; flex:0 0 auto; width:30px; height:30px; padding:0; border-radius:50%; border:2px solid #fff; background:var(--c); box-shadow:0 0 0 1px var(--border); cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;}
.sys-dot:hover{transform:scale(1.08);}
.sys-dot[aria-pressed="true"], .sys-pick.is-on{box-shadow:0 0 0 2px var(--ink);}
.sys-pick{overflow:hidden; background:conic-gradient(#EB5D76, #FFA659, #0E97AA, #635BFF, #EB5D76);}
.sys-pick input{position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); padding:0; border:0; opacity:0; cursor:pointer;}
.sys-pick:focus-within{outline:2px solid var(--violet); outline-offset:3px;}
.sys-surface{display:flex;}
.sys-surface button{flex:1;}
.sys-range{display:block; width:100%; margin:0; accent-color:var(--violet);}
.sys-reset{align-self:flex-start; cursor:pointer;}
.sys-canvas{min-width:0;}
.sys-frame{display:block; width:100%; height:1600px; border:1px solid var(--border); border-radius:20px; background:transparent;}

.sys-steps{list-style:none; margin:0; padding:0; max-width:820px;}
.sys-steps li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:16px; padding:24px 0; border-top:1px solid var(--border);}
.sys-steps li:last-child{border-bottom:1px solid var(--border);}
.sys-steps h3{font-size:1.05rem;}
.sys-steps p{margin:4px 0 0; color:var(--muted); font-size:0.95rem;}
.sys-code{position:relative; margin-top:14px;}
.sys-code pre{margin:0; padding:16px 92px 16px 18px; overflow-x:auto; border-radius:12px; background:var(--ink); color:#E6EAF2; font:0.8rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;}
.sys-copy{position:absolute; top:9px; right:9px; padding:5px 14px; font-size:0.78rem; cursor:pointer;}
.sys-cta{margin-top:16px;}
.sys-poc{margin-top:28px; font-size:0.88rem;}

@media (max-width:900px){
  .sys-play{grid-template-columns:1fr; gap:16px;}
  .sys-controls{top:calc(var(--ds-bar-h) + 10px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 16px; padding:14px 16px; border-radius:22px;}
  .sys-ctl-accent{grid-column:1 / -1;}
  .sys-ctl .sys-k{margin-bottom:6px; font-size:0.66rem;}
  .sys-dot{width:28px; height:28px;}
  .sys-reset{position:absolute; top:10px; right:12px; padding:4px 12px; font-size:0.75rem;}
  .sys-material{grid-template-columns:1fr;}
  .sys-type li{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .sys-pairs div{grid-template-columns:1fr;}
  .sys-code pre{padding-right:18px; padding-top:44px; white-space:pre-wrap; overflow-wrap:anywhere;}
}

/* ---------- Imagery: rules beside a diagram of the canvas ---------- */
.sys-img-rule{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:start; margin-top:20px;}
.sys-diagram{margin:0;}
.sys-diagram svg{display:block; width:100%; height:auto; border-radius:16px;}
.sys-diagram figcaption{margin-top:8px; font-size:0.8rem; color:var(--faint);}
.d-canvas{fill:var(--ink);}
.d-safe{fill:rgba(255,255,255,0.06); stroke:rgba(255,255,255,0.6); stroke-width:3; stroke-dasharray:14 12;}
.d-clear{fill:rgba(235,93,118,0.3); stroke:var(--coral); stroke-width:2; stroke-dasharray:6 6;}
.d-ring{fill:none; stroke:#fff; stroke-width:1.5; stroke-dasharray:3 4;}
.d-mark{fill:#fff;}
.d-mark.warn{fill:var(--coral);}
.d-num{font:700 40px var(--font); fill:var(--ink); text-anchor:middle;}
.d-num.s{font-size:12px;}
.sys-rules{margin:0; padding-left:1.4em;}
.sys-rules li{margin:0 0 12px; font-size:0.95rem; line-height:1.55; color:var(--muted);}
.sys-rules li::marker{color:var(--violet); font-weight:700;}
.sys-rules b{color:var(--ink);}
.sys-rules.plain{max-width:var(--max); margin-top:16px;}
@media (max-width:900px){
  .sys-img-rule{grid-template-columns:1fr; gap:18px;}
}

/* ---------- Governance ---------- */
.sys-roles, .sys-checks{margin:16px 0 0; max-width:820px;}
.sys-roles div, .sys-checks div{grid-template-columns:180px 1fr;}
.sys-roles dt{color:var(--ink);}
.sys-flow{margin:16px 0 20px;}
.sys-flag{display:inline-block; padding:2px 10px; border-radius:999px; font-size:0.75rem; font-weight:700;}
.sys-flag.drift{color:#fff; background:var(--coral);}
.sys-flag.info{color:var(--violet-deep); background:var(--violet-wash);}
/* Collapsible table: the decision log, closed by default so it can grow */
.sys-fold{margin-top:16px; max-width:900px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); transition:border-color var(--dur-fast) ease;}
.sys-fold[open]{border-color:var(--accent);}
.sys-fold summary{display:flex; flex-direction:column; gap:2px; list-style:none; cursor:pointer; padding:16px 48px 16px 18px; position:relative;}
.sys-fold summary::-webkit-details-marker{display:none;}
.sys-fold summary::after{content:'+'; position:absolute; right:18px; top:14px; font-size:1.3rem; font-weight:500; line-height:1; color:var(--accent); transition:transform .2s ease;}
.sys-fold[open] summary::after{transform:rotate(45deg);}
.sys-fold-t{font-weight:700; font-size:1rem; color:var(--ink);}
.sys-fold-m{font-size:0.85rem; color:var(--muted);}
.sys-table-wrap{overflow-x:auto; padding:0 18px 12px;}
.sys-table{width:100%; border-collapse:collapse; font-size:0.9rem;}
.sys-table th{padding:10px 12px 10px 0; text-align:left; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--border);}
.sys-table td{padding:12px 12px 12px 0; vertical-align:top; border-bottom:1px solid var(--border); color:var(--muted); line-height:1.5;}
.sys-table tr:last-child td{border-bottom:0;}
.sys-table td:first-child{white-space:nowrap; font-size:0.8rem; font-weight:600; color:var(--faint);}
.sys-table td:nth-child(2){color:var(--ink); font-weight:600;}
.sys-table code{white-space:nowrap; font:600 0.85em/1 ui-monospace, SFMono-Regular, Menlo, monospace;}
@media (max-width:640px){
  .sys-roles div, .sys-checks div{grid-template-columns:1fr;}
  .sys-table thead{display:none;}
  .sys-table, .sys-table tbody, .sys-table tr, .sys-table td{display:block; width:100%;}
  .sys-table tr{padding:12px 0; border-bottom:1px solid var(--border);}
  .sys-table tr:last-child{border-bottom:0;}
  .sys-table td{padding:2px 0; border:0;}
  .sys-table td:first-child{margin-bottom:2px;}
}

/* ---------- Workflow library ---------- */
.ds-links a[aria-current="page"]{color:var(--text); background:var(--panel);}
.wf-type{display:inline-block; align-self:flex-start; padding:2px 10px; border-radius:999px; font-size:0.72rem; font-weight:700; letter-spacing:0.02em;}
.wf-type[data-type="skill"]{color:var(--violet-deep); background:var(--violet-wash);}
.wf-type[data-type="harness"]{color:#0B6E7C; background:rgba(14,151,170,0.12);}
.wf-type[data-type="hook"]{color:#9A5512; background:rgba(255,166,89,0.2);}
.wf-type[data-type="workflow"]{color:#B23A55; background:rgba(235,93,118,0.12);}
.wf-kinds{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:12px;}
.wf-kind{display:flex; flex-direction:column; gap:8px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);}
.wf-kind b{font-size:1rem; line-height:1.35; color:var(--ink);}
.wf-kind span:not(.wf-type){font-size:0.88rem; color:var(--muted);}
.wf-kind small{margin-top:auto; font-size:0.78rem; font-weight:600; color:var(--faint);}
.wf-filter{margin-top:4px;}
.wf-list{display:flex; flex-direction:column; gap:10px; margin-top:8px; max-width:900px;}
.wf-card summary{display:flex; flex-direction:column; gap:2px;}
.wf-card .eng-client{margin-top:8px;}
.wf-card .eng-title{margin-top:2px;}
.wf-card .eng-meta{margin-top:8px; font-size:0.8rem;}
.wf-card .eng-meta b{color:var(--muted);}
.wf-card{scroll-margin-top:16px;}
.wf-body{padding:0 16px 16px;}
.wf-spec{margin:0 0 4px;}
.wf-spec div{grid-template-columns:120px 1fr;}
.wf-spec dt{color:var(--ink); font-size:0.85rem;}
.wf-spec dd{font-size:0.9rem; color:var(--muted); line-height:1.55;}
.wf-spec ol, .wf-spec ul{margin:0; padding-left:1.2em;}
.wf-spec li{margin:0 0 4px;}
.wf-rel{display:flex; flex-wrap:wrap; gap:6px;}
.wf-link{font-size:0.8rem; font-weight:600; color:var(--accent-ink); background:var(--accent-wash); padding:3px 10px; border-radius:999px; text-decoration:none;}
.wf-link:hover{text-decoration:underline;}
.wf-body .sys-code pre{white-space:pre-wrap; overflow-wrap:anywhere;}
@media (max-width:640px){
  .wf-spec div{grid-template-columns:1fr;}
}