/* ============================================================
   ASCENDANT — SKILL LIBRARY · ATTRIBUTION · TRAIN PLANS · PROGRESSION
   (Claude Design handoff 9 — lib-*/attr-*/tpl-*/start-*/prog-* styles;
   board chrome lives in the prototype only). Loaded by BOTH builds.
   ============================================================ */

/* ============================================================
   1 · SKILL LIBRARY — a calm, browse-on-purpose library.
   Grouped by attribute · tiered discipline variants · interest
   filter · owned / restore states. A library, not a store.
   ============================================================ */
.lib-interests { margin: -2px 0 16px; }
.lib-int-l { display: flex; align-items: baseline; gap: 8px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.lib-int-l b { font-family: var(--font-mono); letter-spacing: .04em; color: var(--dimmer); text-transform: none; margin-left: auto; }
.lib-int-row { display: flex; gap: 6px; padding-bottom: 2px; }
.lib-int { flex: 1 1 0; min-width: 0; max-width: 108px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 5px; border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--dim); font-size: 11.5px; letter-spacing: .04em; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.lib-int .lg { font-size: 12px; opacity: .85; }
.lib-int:hover { border-color: var(--line); color: var(--text); }
.lib-int.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px -8px var(--glow); }
.lib-int.on .lg { opacity: 1; }

.lib-cols { columns: 2; column-gap: 22px; }
.lib-cols .lib-group { break-inside: avoid; }
.lib-group { margin-bottom: 16px; }
.lib-gh { display: flex; align-items: center; gap: 10px; padding-bottom: 7px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.lib-gh-g { font-size: 16px; color: var(--accent); }
.lib-gh-n { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: .02em; color: var(--text); }

.lib-gh-ct { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--dimmer); border: 1px solid var(--line-soft); padding: 1px 7px; }

.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-disc { position: relative; padding: 11px 12px; border: 1px solid var(--line-soft); background: var(--panel-2); transition: border-color .15s, background .15s; }
.lib-disc:hover { border-color: var(--line); }
.lib-disc.owned { background: color-mix(in srgb, var(--good) 6%, var(--panel-2)); border-color: color-mix(in srgb, var(--good) 26%, var(--line-soft)); }
.lib-disc-top { display: flex; align-items: flex-start; gap: 11px; }
.lib-disc-mark { flex: none; margin-top: 1px; }
.lib-disc-meta { flex: 1; min-width: 0; }
.lib-disc-n { font-size: 15px; line-height: 1.15; color: var(--text); }
.lib-disc-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em; color: var(--dimmer); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 9px; }
.lib-disc-sub b { color: var(--dim); font-weight: 400; }

.lib-disc-sub .w { color: var(--accent); }
.lib-disc-act { flex: none; align-self: center; }

/* add / owned / restore control */
.lib-add { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); padding: 8px 13px; transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s; white-space: nowrap; }
.lib-add:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lib-add.owned { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line-soft)); pointer-events: none; }
.lib-add.restore { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.lib-add.restore:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }
/* "added": a pre-drawn glow fades up and away by opacity (D574; was an eased box-shadow) */
.lib-add.just { position: relative; }
.lib-add.just::after { content: ''; position: absolute; inset: -1px; box-shadow: 0 0 18px 1px var(--glow); pointer-events: none; opacity: 0; animation: lib-added .5s var(--e-move); }
@keyframes lib-added { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

.lib-foot { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.lib-forge { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; border: 1px dashed var(--line); background: var(--panel-2); color: var(--text); font-size: 13.5px; letter-spacing: .04em; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.lib-forge:hover { border-color: var(--accent); color: var(--accent); }
.lib-forge .g { color: var(--accent); font-size: 15px; }

/* ============================================================
   2 · ATTRIBUTION SHEET — "What does this train?"
   A pre-filled stat split that reads in ~3s (Accept & go) while
   giving control to anyone who wants to fine-tune.
   ============================================================ */
.attr-scrim { position: absolute; inset: 0; z-index: 55; display: flex; align-items: flex-end; }
/* the scrim is its own layer behind the sheet (E1), so the sheet's own fade is never multiplied by it, and a drag fades it */
.sheet-bg { position: absolute; inset: 0; background: rgba(2,5,10,.62); pointer-events: none; animation: scrim-in 240ms var(--e-arrive) both; }
.attr-scrim.closing > .sheet-bg, .adopt-scrim.closing > .sheet-bg { animation: scrim-out 200ms var(--e-leave) both; }
.adopt-scrim.closing > .link-sheet { animation: e1-out var(--d-sheet-out) var(--e-leave) both; pointer-events: none; }
.dwin-scrim.closing { animation: scrim-out 160ms var(--e-leave) both; pointer-events: none; }
.dwin-scrim.closing > .dwin { animation: e3-out 160ms var(--e-leave) both; }

.attr-sheet { position: relative; width: 100%; max-height: 92%; overflow-y: auto; background: var(--panel); border-top: 1px solid var(--accent);
  padding: 10px 18px calc(16px + var(--safe-b, 20px)); box-shadow: 0 -22px 54px -20px #000, 0 0 40px -18px var(--glow);
  animation: e1-in var(--d-sheet) var(--e-arrive) both; }
.attr-sheet::-webkit-scrollbar { width: 0; }
@keyframes attr-up { from { transform: translateY(100%); } to { transform: none; } }
.attr-grab { box-sizing: content-box; width: 40px; height: 4px; padding: 10px 30px; border-radius: 4px; background: var(--line); background-clip: content-box; margin: -7px auto 4px; }

/* modal variant (desktop) */
.attr-modal-bg { position: absolute; inset: 0; z-index: 55; background: rgba(2,5,10,.72); display: grid; place-items: center; padding: 24px; animation: scrim-in 200ms var(--e-arrive) both; }
.attr-modal { width: 468px; max-width: 100%; max-height: 90%; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent); padding: 22px 24px 24px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); box-shadow: 0 40px 90px -30px #000, 0 0 50px -20px var(--glow); animation: e3-in 240ms var(--e-arrive) both; }
@keyframes st-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.attr-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.attr-h-tt { flex: 1; min-width: 0; }
.attr-eyebrow { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.attr-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.12; margin-top: 3px; }
.attr-skill { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 10px; border: 1px solid var(--line); background: var(--panel-2); font-size: 13px; color: var(--text); }
.attr-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-soft); color: var(--dim); font-size: 15px; transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s; }
.attr-x:hover { border-color: var(--accent); color: var(--accent); }

.attr-lead { font-size: 12px; color: var(--dim); line-height: 1.5; margin: 12px 0 12px; }
.attr-lead b { color: var(--text); font-weight: 600; }

/* primary path — accept & go */

.attr-accept { width: 100%; padding: 15px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--accent); color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent-2)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; box-shadow: 0 0 22px -6px var(--glow); transition: color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }

/* fine-tune — per-attribute rows with sliders + preset chips */

@keyframes attr-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* fine-tune — per-attribute track + steppers (no raw range input) */
.attr-frow { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 13px; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); transition: opacity .16s ease,background .16s ease; }
.attr-frow:last-of-type { border-bottom: 0; }
.attr-frow-g { font-size: 16px; color: var(--accent); text-align: center; filter: drop-shadow(0 0 6px var(--glow)); }
.attr-frow.zero .attr-frow-g { color: var(--dimmer); filter: none; }
.attr-frow-mid { min-width: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.attr-frow.scrub .attr-frow-mid { cursor: grabbing; }
.attr-hint { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--dimmer); margin: -1px 0 9px; }
.attr-split.scrubbing .attr-frow:not(.scrub) { opacity: .6; }
.attr-split.scrubbing .attr-frow.zero:not(.scrub) { opacity: .2; }
.attr-frow.scrub { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.attr-frow.scrub .attr-fname { color: var(--text); }
.attr-frow.scrub .attr-fval { color: var(--accent); font-size: 15px; text-shadow: 0 0 12px var(--glow); }
.attr-frow.scrub .attr-ftrack > i { box-shadow: 0 0 14px var(--glow); }
.attr-frow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.attr-fname { font-size: 12.5px; letter-spacing: .02em; color: var(--text); }
.attr-frow.zero .attr-fname { color: var(--dim); }
.attr-fval { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); }
.attr-frow.zero .attr-fval { color: var(--dimmer); }
.attr-ftrack { height: 7px; background: var(--panel); border: 1px solid var(--line-soft); overflow: hidden; }
.attr-ftrack > i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 8px var(--glow); transition: transform 120ms var(--e-move); }   /* D4: follows the finger by scaleX */
.attr-fstep { display: flex; border: 1px solid var(--line); background: var(--panel-2); }
.attr-fstep button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent); font-size: 18px; line-height: 1; transition: color .12s,background-color .12s,border-color .12s,opacity .12s,transform .12s; }
.attr-fstep button:first-child { border-right: 1px solid var(--line-soft); }
.attr-fstep button:hover { background: var(--accent); color: var(--accent-ink); }

.attr-note { font-size: 10.5px; color: var(--dimmer); line-height: 1.5; margin-top: 12px; }

/* pool-model split: assign a 100% pool across the six attributes (steppers) */
.attr-pool { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 0 8px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); }
.attr-pool-l { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.attr-pool-n { font-family: var(--font-mono); font-size: 12px; color: var(--warn); letter-spacing: .02em; }
.attr-pool-n.ok { color: var(--good); }
.attr-fstep button:disabled { opacity: .26; cursor: not-allowed; }
.attr-fstep button:disabled:hover { background: var(--panel-2); color: var(--accent); }
.attr-accept:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.attr-split { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 2px; }

/* ============================================================
   3 · TRAIN TEMPLATE LIBRARY + starting-point scaling
   Starting points you can make your own — options, never locks.
   ============================================================ */
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tpl-card { position: relative; text-align: left; padding: 14px 13px 13px; border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--text); transition: color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.tpl-card:hover { border-color: var(--accent); }
.tpl-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 26px -12px var(--glow); background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); }
.tpl-card.origin { border-style: solid; border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft)); }
.tpl-card-ic { font-size: 20px; color: var(--accent); }
.tpl-card-n { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.12; margin-top: 8px; }
.tpl-card-t { font-size: 10.5px; color: var(--dim); letter-spacing: .02em; margin-top: 3px; }
.tpl-card-marks { display: flex; align-items: center; gap: 5px; margin-top: 10px; }
.tpl-card-skill { margin-top: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .03em; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-card-badge { position: absolute; top: 0; right: 0; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 3px 8px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
.tpl-card.origin .tpl-card-badge { background: color-mix(in srgb, var(--accent) 60%, var(--panel)); color: var(--text); }
.tpl-build { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px dashed var(--line); background: var(--panel-2); color: var(--text); text-align: left; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.tpl-build:hover { border-color: var(--accent); }
.tpl-build-g { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-soft); color: var(--accent); font-size: 20px; }
.tpl-build-t b { font-size: 14px; display: block; }
.tpl-build-t span { font-size: 11px; color: var(--dim); }

/* starting-point step (after picking a template) */
.start-wrap { animation: attr-reveal .24s ease both; }
.start-plan { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); margin-bottom: 16px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.start-plan-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent); font-size: 22px; border: 1px solid var(--line); background: var(--panel); }
.start-plan-t b { font-family: var(--font-display); font-size: 17px; font-weight: 700; display: block; line-height: 1.1; }
.start-plan-t span { font-size: 11px; color: var(--dim); }
.start-q { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.start-qs { font-size: 12px; color: var(--dim); line-height: 1.5; margin-bottom: 12px; }

/* scaled preview of the seeded copy */
.start-prev { margin-top: 14px; border: 1px solid var(--line-soft); background: var(--panel-2); padding: 12px 14px; }
.start-prev-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.start-prev-l { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.start-prev-m { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.start-ex { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.start-ex:last-child { border-bottom: 0; }
.start-ex-n { font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-ex-s { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.start-ex-s i { font-style: normal; color: var(--dimmer); text-decoration: line-through; margin-right: 6px; }
.start-foot { display: flex; gap: 10px; margin-top: 16px; }
.start-use { flex: 1; padding: 15px; border: 1px solid var(--accent); color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent-2)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; box-shadow: 0 0 22px -6px var(--glow); transition: color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.start-back { flex: none; padding: 15px 18px; border: 1px solid var(--line); color: var(--dim); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s; }
.start-back:hover { border-color: var(--accent); color: var(--accent); }
.start-note { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--dim); line-height: 1.5; margin-top: 12px; padding: 10px 12px; border-left: 2px solid var(--line); background: color-mix(in srgb, var(--accent) 4%, var(--panel-2)); }
.start-note .g { color: var(--accent); flex: none; }

/* seeded toast */
.tpl-toast { position: absolute; left: 16px; right: 16px; bottom: calc(16px + var(--safe-b, 20px)); z-index: 62; padding: 14px 16px; border: 1px solid var(--accent); background: var(--panel);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); box-shadow: 0 20px 50px -20px #000; animation: attr-up .3s cubic-bezier(.2,1,.3,1) both; }
.tpl-toast-t { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent); }
.tpl-toast-s { font-size: 12px; color: var(--dim); margin-top: 3px; line-height: 1.45; }

/* the offer */
.prog-offer { margin-top: 15px; padding: 14px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.prog-offer.ease { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.prog-offer-h { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-bottom: 5px; }
.prog-offer-badge { align-self: flex-start; }

.prog-offer-badge { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 2px 8px; }
.prog-offer.ease .prog-offer-badge { background: var(--warn); color: #1c1400; }
.prog-offer-t { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.prog-offer-s { font-size: 12px; color: var(--dim); line-height: 1.5; margin: 2px 0 12px; }
.prog-offer-s b { color: var(--text); font-weight: 600; }
.prog-deltas { display: flex; flex-direction: column; gap: 7px; margin-bottom: 13px; }
.prog-delta { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--line-soft); background: var(--panel-2); }
.prog-delta-g { flex: none; color: var(--accent); font-size: 14px; }
.prog-delta-n { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-delta-v { flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; }
.prog-delta-v .from { color: var(--dimmer); }
.prog-delta-v .arrow { color: var(--accent); }
.prog-delta-v .to { color: var(--accent); font-weight: 700; }
.prog-offer.ease .prog-delta-v .to, .prog-offer.ease .prog-delta-v .arrow, .prog-offer.ease .prog-delta-g { color: var(--warn); }
.prog-offer-act { display: flex; gap: 9px; }
.prog-accept { flex: 1; padding: 13px; border: 1px solid var(--accent); color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent-2)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; box-shadow: 0 0 20px -6px var(--glow); transition: color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.prog-offer.ease .prog-accept { border-color: var(--warn); background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 72%, #000)); color: #1c1400; box-shadow: 0 0 20px -6px color-mix(in srgb, var(--warn) 60%, transparent); }
.prog-later { flex: none; padding: 13px 16px; border: 1px solid var(--line); color: var(--dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s; }
.prog-later:hover { border-color: var(--accent); color: var(--accent); }

/* accepted / settled state */
.prog-settled { margin-top: 15px; display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); border-left: 3px solid var(--good); background: color-mix(in srgb, var(--good) 7%, var(--panel-2)); }
.prog-settled-i { flex: none; color: var(--good); font-size: 16px; }
.prog-settled-t { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.prog-settled-t b { color: var(--good); }

/* ============================================================
   LIBRARY · LINK · STARTING-POINT — polish pass (Claude Design
   "Library-Link-Starting Polish" handoff, vendored 1:1).
   Overrides + additions AFTER the base skilltrain grammar.
   ============================================================ */

/* desktop two-up library groups */
.lib-cols { columns: 2; column-gap: 22px; }
.lib-cols .lib-group { break-inside: avoid; }

/* ---------- Attribution: desktop MODAL host (centred; sheet stays for phone) ---------- */
.attr-modal-bg { position: fixed; inset: 0; z-index: 75; background: rgba(2,5,10,.72); display: grid; place-items: center; padding: 24px; animation: scrim-in 200ms var(--e-arrive) both; }
.attr-modal { width: 468px; max-width: 100%; max-height: 90%; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent); padding: 22px 24px 24px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); box-shadow: 0 40px 90px -30px #000, 0 0 50px -20px var(--glow); animation: e3-in 240ms var(--e-arrive) both; }

/* ---------- Attribution: real EXIT so accept eases out (not a hard cut) ---------- */
.attr-sheet.closing { animation: e1-out var(--d-sheet-out) var(--e-leave) both; }
.attr-modal-bg.closing { animation: scrim-out 160ms var(--e-leave) both; }
.attr-modal.closing { animation: e3-out 160ms var(--e-leave) both; }

/* ---------- A · Skill Library rows (calmer, lighter) ---------- */
.lib-disc { padding: 10px 12px; transition: border-color .15s, background .15s, opacity .15s; }
/* owned rows recede so the eye lands on what's addable */
.lib-disc.owned { background: var(--panel-2); border-color: var(--line-soft); opacity: .74; }
.lib-disc.owned:hover { opacity: 1; }
.lib-disc.removed { opacity: .64; }
.lib-disc.removed:hover { opacity: 1; }
.lib-disc-top { align-items: center; gap: 12px; }
.lib-disc-mark { align-self: flex-start; margin-top: 3px; }
.lib-disc-n { font-size: 14.5px; line-height: 1.15; letter-spacing: .01em; }
/* one quiet meta line: target · attribution glyphs (no percent spam) */
.lib-disc-sub { margin-top: 4px; gap: 6px 10px; align-items: center; }
.lib-target { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; color: var(--dim); border: 1px solid transparent; padding: 2px 5px 2px 6px; margin: -2px 0; transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }
.lib-target:hover { border-color: var(--line); color: var(--text); }
.lib-target.static { border: 0; padding-left: 0; cursor: default; }
.lib-target-edit { color: var(--accent); font-size: 9px; opacity: .8; }
.lib-attr { display: inline-flex; align-items: center; gap: 4px; }
.lib-attr i { font-style: normal; font-size: 11px; color: var(--accent); opacity: .85; filter: drop-shadow(0 0 5px var(--glow)); }
.lib-attr i ~ i { opacity: .5; filter: none; font-size: 10px; }

/* three CALM states — Add (active) · Added (settled) · Restore (neutral) */
.lib-add { font-size: 10px; letter-spacing: .08em; padding: 7px 12px; border-color: color-mix(in srgb, var(--accent) 40%, var(--line-soft)); }
.lib-state { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.lib-state.added { color: var(--dimmer); padding: 7px 4px; }
.lib-state.added .dot { color: color-mix(in srgb, var(--good) 78%, var(--dim)); font-size: 11px; }
.lib-state.restore { color: var(--dim); border: 1px solid var(--line-soft); padding: 7px 12px; transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s; }
.lib-state.restore:hover { border-color: var(--accent); color: var(--accent); }

/* target editor — revealed only on the armed row */
.lib-disc.armed { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.lib-tedit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 2px 2px; border-top: 1px dashed var(--line-soft); animation: attr-reveal .18s ease both; }
.lib-tedit-l { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

/* ---------- B · Link window ("which skill does this feed?") ---------- */
/* phone: window over a darkened app (periphery darkens, kept) */
/* ONLY the sheet scrolls — the scrim must NOT scroll too (nested scroll
   containers fight and trap the content, which stranded the adopt CTA
   off-screen so a plan couldn't be linked). */
.adopt-scrim { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; }
.link-sheet { position: relative; max-height: calc(100% - 20px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--accent); padding: 16px 15px calc(15px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -22px 54px -20px #000, 0 0 40px -18px var(--glow);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); animation: e1-in var(--d-sheet) var(--e-arrive) both; }
.link-sheet::-webkit-scrollbar { width: 0; }

.link-wrap { position: relative; }
.link-head { margin-bottom: 13px; }
.link-eyebrow { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.link-q { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.12; margin-top: 4px; }
.link-qs { font-size: 12px; color: var(--dim); line-height: 1.5; margin-top: 6px; }
.link-qs b { color: var(--text); font-weight: 600; }

/* live plan → skill map */
.link-map { display: flex; align-items: stretch; gap: 0; margin: 0 0 16px; }
.link-node { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); background: var(--panel-2);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.link-node.plan { border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); }
.link-node.skill.empty { border-style: dashed; border-color: var(--line); }
.link-node.skill:not(.empty) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.link-node-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-soft); background: var(--panel); color: var(--accent); font-size: 18px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.link-node-ic.dim { color: var(--dimmer); }
.link-node-t { min-width: 0; }
.link-node-k { display: block; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.link-node-t b { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-wire { flex: none; width: 40px; display: flex; align-items: center; justify-content: center; }
.link-wire i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.link-wire-o { flex: none; font-size: 10px; color: var(--accent); margin: 0 -2px; text-shadow: 0 0 8px var(--glow); }

/* choices */
.link-opts { display: flex; flex-direction: column; gap: 8px; }
.link-sep { margin: 8px 2px 1px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--dimmer); }
.link-opt { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--text); text-align: left; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s; }
.link-opt:hover { border-color: var(--line); }
.link-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); box-shadow: inset 0 0 0 1px var(--accent); }
.link-opt.suggest { border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft)); }
.link-opt-x { flex: none; width: 20px; height: 20px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); font-size: 11px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.link-opt.on .link-opt-x { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 10px -2px var(--glow); }
.link-opt.create .link-opt-x { border: 0; color: var(--accent); font-size: 15px; }
.link-opt-t { flex: 1; min-width: 0; }
.link-opt-n { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.link-opt-d { font-size: 11px; color: var(--dim); margin-top: 2px; }
.link-opt-d.warn { color: var(--warn); }
.link-tag { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 2px 6px; }
.link-opt-mk { flex: none; color: var(--dim); font-size: 15px; display: grid; place-items: center; min-width: 20px; }

/* create-new inline */
.link-create { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel-2)); padding: 13px; display: flex; flex-direction: column; gap: 11px; animation: attr-reveal .18s ease both; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent); }
.link-create-h { display: flex; align-items: center; gap: 9px; }
.link-create-h .link-opt-x { border: 0; color: var(--accent); font-size: 15px; width: auto; height: auto; }
.link-create-h .link-opt-n { flex: 1; }
.link-create-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-soft); color: var(--dim); font-size: 12px; transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s; }
.link-create-x:hover { border-color: var(--accent); color: var(--accent); }
.link-field { display: flex; flex-direction: column; gap: 5px; }
.link-field-l { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.link-field-note { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .02em; color: var(--dimmer); }

/* footer */
.link-foot { display: flex; gap: 10px; margin-top: 16px; }
.link-back { flex: none; padding: 14px 18px; border: 1px solid var(--line); color: var(--dim); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s; }
.link-back:hover { border-color: var(--accent); color: var(--accent); }
.link-go { flex: 1; padding: 14px; border: 1px solid var(--accent); color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent-2)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; box-shadow: 0 0 22px -6px var(--glow); transition: color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.link-go:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ---------- C · Starting-point header bits ---------- */
.start-plan-feed { flex: none; margin-left: auto; text-align: right; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); line-height: 1.5; }
.start-plan-feed b { color: var(--accent); font-size: 11px; letter-spacing: .02em; text-transform: none; }
.start-cap { display: flex; align-items: center; gap: 8px; margin: 11px 0 15px; font-size: 12px; color: var(--dim); line-height: 1.45; }
.start-cap .g { flex: none; color: var(--accent); }

/* ---------- C · Starting-point — editable sets × reps / exercise list ---------- */
.sx-list { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; }
.sx-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 3px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.sx-group { margin: 10px 2px 4px; display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.sx-group::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.sx-row { border: 1px solid var(--line-soft); background: var(--panel-2); padding: 11px 12px; display: flex; flex-direction: column; gap: 11px; transition: border-color .15s; }
.sx-row:focus-within { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-soft)); }
.sx-top { display: flex; align-items: center; gap: 10px; }
.sx-name { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text); font-family: var(--font-display); font-size: 15px; font-weight: 600; padding: 3px 2px; transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s; }
.sx-name:focus { outline: none; border-bottom-color: var(--accent); }
.sx-name::placeholder { color: var(--dimmer); font-weight: 400; font-family: var(--font-ui); }
.sx-del { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-soft); color: var(--dimmer); font-size: 11px; transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s; }
.sx-del:hover { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.sx-nums { display: flex; align-items: flex-end; gap: 10px; }
.sx-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sx-lbl { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.sx-x { color: var(--dim); font-size: 14px; align-self: center; padding-bottom: 8px; }
.sx-nums .scrub-val { min-width: 54px; }
.sx-add { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; padding: 12px; border: 1px dashed var(--line); background: var(--panel-2); color: var(--text); font-size: 13px; letter-spacing: .02em; transition: color .15s,background-color .15s,border-color .15s,opacity .15s,transform .15s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sx-add:hover { border-color: var(--accent); color: var(--accent); }
.sx-add .g { color: var(--accent); font-size: 15px; }

/* ---------- Desktop: considered centered WINDOW ---------- */
.dwin-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 40px; background: rgba(2,5,10,.6); animation: scrim-in 200ms var(--e-arrive) both; }
.dwin { display: flex; flex-direction: column; width: 780px; max-width: 100%; max-height: 82%; background: var(--panel); border: 1px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); box-shadow: 0 50px 110px -30px #000, 0 0 60px -22px var(--glow); animation: e3-in 240ms var(--e-arrive) both; }
.dwin.link-win, .dwin.start-win { width: 560px; }
.dwin-h { flex: none; display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--line-soft); }
.dwin-h-t { flex: 1; min-width: 0; }
.dwin-eyebrow { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.dwin-title { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.1; margin-top: 3px; }

.dwin-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-soft); color: var(--dim); font-size: 15px; transition: color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s; }
.dwin-x:hover { border-color: var(--accent); color: var(--accent); }
.dwin-b { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.dwin-b::-webkit-scrollbar { width: 9px; }
.dwin-b::-webkit-scrollbar-thumb { background: var(--line); }
.dwin-f { flex: none; display: flex; align-items: center; gap: 14px; padding: 15px 24px; border-top: 1px solid var(--line-soft); }
.dwin-f-note { flex: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--dimmer); }
.dwin-done { padding: 11px 26px; border: 1px solid var(--accent); color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent-2)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; box-shadow: 0 0 20px -6px var(--glow); transition: color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
/* the link/start windows keep their own footer inside the body */
.dwin.link-win .link-foot, .dwin.start-win .start-foot { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) and (scripting: none) {
  .attr-sheet.closing, .attr-modal.closing, .attr-modal, .link-sheet, .dwin { animation: none !important; }
}