/* ============================================================
   NEXORA · Screen / Skills — Personal Skills Dashboard
   Premium EdTech SaaS. Tokens only, no hardcoded colors.
   ============================================================ */
.skills-screen{ gap: clamp(1rem,1vw,1.4rem); animation: skills-enter .42s var(--ease-out) both }
@keyframes skills-enter{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
html.nx-reduced-motion .skills-screen{ animation:none }
.skills-offline{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-radius:var(--radius-md); background:var(--warning-soft); color:var(--warning-text); border:1px solid var(--warning-border); font-family:var(--font-mono); font-size:.75rem; font-weight:600 }
[data-theme="dark"] .skills-offline{ background:var(--warning-soft); color:var(--warning-text); border-color:var(--warning-border) }
.skills-offline .icon{ width:16px; height:16px; flex:none }

/* header */
.skills-head{ align-items:center }
.skills-head-copy{ min-width:0; flex:1 1 420px }
.skills-head-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; margin-top:.85rem }
.skills-head-meta .w-meta{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.72rem; color:var(--text-2) }
.skills-head-meta .w-meta .icon{ width:14px; height:14px; color:var(--text-3); flex:none }

/* toolbar */
.skills-toolbar{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; justify-content:space-between }
.skills-search{ display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); flex:1 1 260px; max-width:520px }
.skills-search > .icon{ color:var(--text-3); flex:none }
.skills-search input{ flex:1; min-width:0; background:none; border:0; outline:none; font-size:.95rem; color:var(--text-1) }
.skills-search input::placeholder{ color:var(--text-3) }
.skills-search kbd{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-3); padding:.15rem .45rem; border-radius:5px; background:var(--surface-2); border:1px solid var(--border) }
.skills-toolbar-actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.view-toggle{ display:flex; gap:.25rem; padding:.25rem; border-radius:var(--radius-full); background:var(--surface-2); border:1px solid var(--border) }
.view-toggle .btn{ min-width:36px }
.view-toggle .btn.is-active{ background:var(--text-1); color:var(--bg-elevated) }

/* hero */
.skills-hero{ padding: clamp(1.1rem, 1rem + .8vw, 1.6rem) }
.skills-hero-grid{ display:grid; grid-template-columns: auto 1fr auto; gap:1.4rem; align-items:center }
.skills-hero-score{ display:grid; place-items:center; gap:.6rem; text-align:center }
.skills-hero-score .ring-lg{ width:118px; height:118px }
.skills-hero-score .ring-lg .ring-text b{ font-size:1.9rem }
.skills-hero-caption b{ display:block; font-family:var(--font-display); font-size:.95rem; color:var(--text-1) }
.skills-hero-caption span{ font-size:.68rem; color:var(--text-3) }
.skills-hero-stats{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.7rem }
.hero-stat{ padding:.85rem .9rem; border-radius:var(--radius-md); background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well); display:grid; gap:.25rem }
.hero-stat b{ font-size:1.25rem; color:var(--text-1) }
.hero-stat span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3) }
.hero-stat i{ font-style:normal; font-family:var(--font-mono); font-size:.66rem; color:var(--text-2) }
.skills-radar{ width:140px; height:140px; display:grid; place-items:center }
.skills-radar svg{ width:100%; height:100%; overflow:visible }
.radar-poly{ fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width:1.6; stroke-linejoin:round }
[data-theme="light"] .radar-poly{ fill: color-mix(in srgb, var(--accent) 8%, transparent) }
.radar-grid{ fill:none; stroke: var(--border); stroke-width:.8 }
.radar-dot{ fill: var(--accent); stroke: var(--bg-elevated); stroke-width:2 }
.radar-label{ font-family:var(--font-mono); font-size:6.5px; fill:var(--text-3); text-anchor:middle }
.skills-hero-categories{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem }
.hero-cat{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .75rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-family:var(--font-mono); font-size:.7rem; color:var(--text-2) }
.hero-cat b{ color:var(--text-1); font-weight:700 }

/* section grids */
.skills-section-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.9rem; margin-top:.9rem }
@media (max-width: 980px){ .skills-section-grid{ grid-template-columns: repeat(2,1fr) } .skills-hero-grid{ grid-template-columns: 1fr; justify-items:center } .skills-radar{ width:160px; height:160px } }
@media (max-width: 640px){ .skills-section-grid{ grid-template-columns:1fr } }

/* skill card */
.skill-card{ display:grid; gap:.85rem; align-content:start; transition: transform .16s var(--ease-out), border-color .16s; cursor:pointer }
.skill-card:hover{ transform:translateY(-1px); border-color:var(--border-strong) }
html.nx-reduced-motion .skill-card:hover{ transform:none }
.skill-card:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }
.skill-card .sc-top{ display:flex; align-items:center; justify-content:space-between; gap:.8rem }
.skill-card .sc-name{ display:flex; align-items:center; gap:.5rem; min-width:0; font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--text-1) }
.skill-card .sc-name .icon{ color:var(--success); width:1em; height:1em; flex:none }
.skill-card .delta{ font-family:var(--font-mono); font-size:.7rem; font-weight:600 }
.skill-card .delta.up{ color: var(--success-text); }
.skill-card .delta.down{ color: var(--danger-text); }
.skill-card .delta.stable{ color: var(--text-3); }
.skill-card .sc-main{ display:flex; align-items:baseline; gap:.7rem }
.skill-card .sc-pct{ font-family:var(--font-display); font-size:2rem; font-weight:700; letter-spacing:-.03em; color:var(--text-1); line-height:1 }
.skill-card .sc-meta{ display:flex; gap:.6rem; align-items:center; font-family:var(--font-mono); font-size:.66rem; color:var(--text-3) }
.skill-card .sc-meta .trend{ display:inline-flex; align-items:center; gap:.25rem; font-weight:600 }
.skill-card .sc-ev{ display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; padding-top:.35rem }
.skill-card .sc-ev .kpi-value{ font-size:1.05rem }
.skill-card .sc-actions{ display:flex; gap:.4rem; flex-wrap:wrap }
.sc-evidence{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem }
.sc-evidence span{ font-family:var(--font-mono); font-size:.62rem; color:var(--text-3); padding:.2rem .5rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border) }

/* list view */
.skills-screen.is-list #s-grid{ display:grid; gap:.6rem; grid-template-columns:1fr }
.skills-screen.is-list .skill-card{ grid-template-columns: 1fr auto; align-items:center; gap:.9rem; padding:.9rem 1rem }
.skills-screen.is-list .skill-card .sc-ev{ display:none }
.skills-screen.is-list .skill-card .sc-actions .btn-secondary{ display:none }

/* next skill */
.skills-next{ display:grid; gap:.9rem; padding:1.2rem 1.3rem }
.skills-next h3{ font-size:1.1rem; color:var(--text-1) }
.skills-next p{ font-size:.85rem; color:var(--text-2); line-height:1.5 }

/* identity hero (preserve) */
.id-hero{ display:grid; grid-template-columns: minmax(0,1.4fr) auto auto; gap:1.6rem; align-items:center; padding:clamp(1.2rem,1rem + 1vw,1.7rem); max-width:100%; box-sizing:border-box }
.id-person{ display:flex; align-items:center; gap:1rem; min-width:0 }
.id-person .avatar{ width:64px; height:64px; font-size:1.2rem }
.id-person-who b{ display:flex; align-items:center; gap:.45rem; font-family:var(--font-display); font-size:1.15rem; color:var(--text-1) }
.id-person-who b .icon{ width:1em; height:1em; color:var(--text-1) }
.id-person-who .mono{ display:block; font-size:.74rem; color:var(--text-3); margin-top:.2rem }
.id-totals{ display:flex; gap:1.5rem; padding-inline:1.5rem }

/* drawer — floating dock (portal to body, z-index above shell) */
.skills-drawer-backdrop{ position:fixed; inset:0; z-index:300; background:color-mix(in srgb, var(--n-1000) 42%, transparent); backdrop-filter:none; -webkit-backdrop-filter:none; opacity:0; visibility:hidden; transition:opacity .18s var(--ease-out), visibility .18s }
.skills-drawer-backdrop:not([hidden]){ opacity:1; visibility:visible }
.skills-drawer-backdrop[hidden]{ display:block !important; pointer-events:none }
[data-theme="dark"] .skills-drawer-backdrop{ background:rgba(0,0,0,.58) }
[data-theme="dark"] .skills-drawer-backdrop:not([hidden]){ background:rgba(0,0,0,.66) }
.skills-drawer{ position:fixed; top:calc(var(--tb-top) + var(--tb-h) + 16px); right:20px; width:min(440px, calc(100vw - 32px)); height:min(640px, calc(100dvh - var(--tb-top) - var(--tb-h) - 32px)); min-height:420px; max-height:calc(100dvh - var(--tb-top) - var(--tb-h) - 32px); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:20px; box-shadow:var(--hi-top), var(--elev-3); z-index:301; display:flex; flex-direction:column; overflow:hidden; transform:translate3d(10px,-8px,0) scale(.97); opacity:0; visibility:hidden; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s var(--ease-out), visibility .24s; will-change:transform, opacity }
.skills-drawer:not([hidden]){ transform:none; opacity:1; visibility:visible }
.skills-drawer[hidden]{ display:flex !important; pointer-events:none }
[data-theme="light"] .skills-drawer{ background:var(--bg-elevated); border-color:var(--border-strong) }
[data-theme="dark"] .skills-drawer{ background:var(--bg-elevated); border-color:rgba(255,255,255,.10); }
html.nx-reduced-motion .skills-drawer{ transition:none }
@media (max-width:767px){ .skills-drawer{ top:auto; right:10px; left:10px; bottom:10px; width:auto; height:min(78dvh,640px); min-height:0; transform:translate3d(0,16px,0) scale(.985) } .skills-drawer:not([hidden]){ transform:none } }
@media (max-width:420px){ .skills-drawer{ right:6px; left:6px; bottom:6px; height:min(84dvh,640px) } }
.skills-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.2rem; border-bottom:1px solid var(--border) }
.skills-drawer-title{ display:flex; align-items:center; gap:.85rem; min-width:0 }
.skills-drawer-title .icon-tile{ width:44px; height:44px; display:grid; place-items:center; background:var(--surface-2); border-radius:var(--radius-sm); color:var(--text-2) }
.skills-drawer-title h3{ font-size:1.05rem; color:var(--text-1) }
.skills-drawer-body{ flex:1; overflow:auto; padding:1.1rem 1.2rem; display:grid; gap:1rem; align-content:start }
.drawer-stat{ display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem }
.drawer-chart{ height:110px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:.6rem; display:grid; place-items:center }
.drawer-chart svg{ width:100%; height:100% }
.drawer-ev{ display:grid; gap:.6rem }
.drawer-ev h4{ font-size:.85rem; color:var(--text-1) }
.drawer-timeline{ display:grid; gap:.5rem }
.timeline-row{ display:flex; gap:.6rem; align-items:center; font-family:var(--font-mono); font-size:.72rem; color:var(--text-2) }
.timeline-row b{ color:var(--text-1) }

/* skeletons & empty */
.empty-state{ display:grid; place-items:center; text-align:center; gap:.4rem; padding:1.4rem 1rem; border-radius:var(--radius-md); background: var(--surface-2); border:1px dashed var(--border-strong) }
.empty-state p{ font-size:.9rem; font-weight:600; color:var(--text-1) }
.empty-state span{ font-size:.78rem; color:var(--text-3); max-width:28ch; line-height:1.5 }
.skeleton{ position:relative; overflow:hidden; background: var(--surface-2); border-radius:var(--radius-sm); min-height:18px }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: translateX(-100%); animation: shimmer 1.15s infinite }
[data-theme="dark"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) }
@keyframes shimmer{ 100%{ transform: translateX(100%) } }
html.nx-reduced-motion .skeleton::after{ animation:none }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }

/* responsive */
@media (max-width: 860px){ .id-hero{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:1.2rem } .id-person{ flex-direction:column; text-align:center } .id-person-who b{ justify-content:center } .id-totals{ padding-inline:0; flex-wrap:wrap; justify-content:center; gap:1.2rem } }
@media (max-width: 560px){ .skill-card .sc-ev{ gap:.4rem } .skill-card .sc-ev .kpi-value{ font-size:.92rem } .skills-toolbar{ flex-direction:column; align-items:stretch } }