/* ============================================================
   Skills section prototype — content-area styles.
   Shell (sidebar + header) comes verbatim from the dashboard
   capture; everything here is scoped with .sk- and follows the
   platform AntD theme: primary #007BFF, text rgba(0,0,0,.88),
   radius 6/8, split #f0f0f0. No font-family overrides — content
   inherits the platform stack.
   ============================================================ */

#sk-root{flex:1 1 0%;min-height:0;display:flex;flex-direction:column;color:rgba(0,0,0,.88);font-size:14px}
.sk-page{background:#fff;border-radius:8px;padding:20px 24px;flex:1;overflow-y:auto}
.sk-muted{color:rgba(0,0,0,.45)}
.sk-num{font-variant-numeric:tabular-nums}

/* prototype lens bar */
.sk-lens{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.sk-lens .sk-flag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#d46b08;background:#fff7e6;border:1px solid #ffd591;border-radius:4px;padding:1px 7px}
.sk-lens .sk-grow{flex:1}
.sk-seg{display:inline-flex;background:rgba(0,0,0,.04);border-radius:6px;padding:2px}
.sk-seg button{border:0;background:transparent;border-radius:4px;padding:3px 12px;font-size:13px;color:rgba(0,0,0,.65);cursor:pointer}
.sk-seg button.on{background:#fff;color:rgba(0,0,0,.88);box-shadow:0 1px 2px rgba(0,0,0,.1)}

/* page head + toolbar */
.sk-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sk-head h2{font-size:20px;font-weight:600;margin:0}
.sk-head .sk-grow{flex:1}
.sk-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.sk-search{position:relative;flex:1;min-width:220px;max-width:340px}
.sk-search svg{position:absolute;left:10px;top:9px;color:rgba(0,0,0,.3);pointer-events:none}
.sk-input{width:100%;border:1px solid #d9d9d9;background:#fff;border-radius:6px;padding:5px 11px;font-size:14px;line-height:22px;color:rgba(0,0,0,.88);transition:border-color .2s}
.sk-input::placeholder{color:rgba(0,0,0,.25)}
.sk-input:hover{border-color:#2997ff}
.sk-input:focus{border-color:#007bff;outline:0;box-shadow:0 0 0 2px rgba(0,123,255,.1)}
.sk-search .sk-input{padding-left:32px}
select.sk-input{width:auto;padding:5px 8px;cursor:pointer}
textarea.sk-input{resize:vertical;font-family:inherit}
.sk-dir{border:1px solid #d9d9d9;background:#fff;border-radius:6px;width:32px;height:32px;color:rgba(0,0,0,.65);cursor:pointer}
.sk-dir:hover{border-color:#2997ff;color:#007bff}

/* status chips (admin) + owner toggle */
.sk-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sk-chip{border:1px solid #d9d9d9;background:#fff;border-radius:999px;padding:2px 12px;font-size:12.5px;color:rgba(0,0,0,.65);cursor:pointer}
.sk-chip.on{background:#007bff;border-color:#007bff;color:#fff}
.sk-chip .n{opacity:.75;margin-left:4px;font-variant-numeric:tabular-nums}
.sk-toggle{display:inline-flex;gap:7px;align-items:center;font-size:13px;color:rgba(0,0,0,.65);cursor:pointer;margin-bottom:12px}

/* tiles grid */
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.sk-tile{background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:box-shadow .2s,border-color .2s}
.sk-tile:hover{border-color:transparent;box-shadow:0 1px 2px -2px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.12),0 5px 12px 4px rgba(0,0,0,.09)}
.sk-tile-top{display:flex;align-items:flex-start;gap:8px}
.sk-tile h3{margin:0;font-size:15px;font-weight:600;flex:1;color:rgba(0,0,0,.88)}
.sk-desc{color:rgba(0,0,0,.55);font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.sk-tile-foot{display:flex;align-items:center;gap:12px;font-size:12.5px;color:rgba(0,0,0,.45);margin-top:auto;padding-top:8px;border-top:1px solid #f0f0f0}
.sk-tile-foot .owner{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-stat{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.sk-star{color:#fadb14}

/* status colors on top of .ant-tag */
.sk-t-DRAFT{color:rgba(0,0,0,.65)!important;background:#fafafa!important;border-color:#d9d9d9!important}
.sk-t-ON_REVIEW{color:#d46b08!important;background:#fff7e6!important;border-color:#ffd591!important}
.sk-t-PUBLISHED{color:#389e0d!important;background:#f6ffed!important;border-color:#b7eb8f!important}
.sk-t-ARCHIVED{color:rgba(0,0,0,.45)!important;background:#f5f5f5!important;border-color:#e0e0e0!important}
.sk-t-cluster{color:#007bff!important;background:#e6f4ff!important;border-color:#91caff!important}
.sk-t-inactive{color:#cf1322!important;background:#fff1f0!important;border-color:#ffa39e!important}

/* empty state */
.sk-empty{border:1px dashed #d9d9d9;border-radius:8px;padding:56px 20px;text-align:center;color:rgba(0,0,0,.45)}
.sk-empty .big{font-size:15px;font-weight:500;color:rgba(0,0,0,.88);margin-bottom:6px}

/* detail */
.sk-crumb-link{color:#007bff;cursor:pointer}
.sk-detail{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start}
@media (max-width:980px){.sk-detail{grid-template-columns:1fr}}
.sk-card{background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:20px}
.sk-card + .sk-card{margin-top:14px}
.sk-dhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sk-dhead h2{font-size:19px;font-weight:600;margin:0}
.sk-dmeta{display:flex;gap:16px;flex-wrap:wrap;color:rgba(0,0,0,.45);font-size:13px;margin-top:10px}
.sk-dmeta b{color:rgba(0,0,0,.88);font-weight:500}
.sk-label{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(0,0,0,.45);margin:0 0 8px}
.sk-howto{white-space:pre-wrap;font-size:13.5px;line-height:1.6}
.sk-prompt{display:block;background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;padding:10px 12px;margin-top:10px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.sk-reason{background:#fff7e6;border:1px solid #ffd591;border-radius:6px;padding:10px 12px;font-size:13px;margin-top:12px}
.sk-reason b{color:#d46b08}
.sk-side .ant-btn{width:100%;justify-content:center;margin-bottom:8px}
.sk-hr{border-top:1px solid #f0f0f0;margin:12px 0}
.sk-kv{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.sk-kv .k{color:rgba(0,0,0,.45)}
.sk-kv .v{font-variant-numeric:tabular-nums;font-weight:500}
.sk-danger-btn{color:#cf1322!important;border-color:#ffa39e!important}
.sk-danger-btn:hover{color:#f5222d!important;border-color:#f5222d!important}

/* reviews */
.sk-review{padding:12px 0;border-top:1px solid #f0f0f0}
.sk-review:first-of-type{border-top:0}
.sk-rhead{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.sk-rhead .who{font-weight:500}
.sk-rhead .when{color:rgba(0,0,0,.45);font-size:12px}
.sk-rhead .acts{margin-left:auto;display:flex;gap:2px}
.sk-linkbtn{border:0;background:none;color:#007bff;cursor:pointer;font-size:12.5px;padding:2px 6px}
.sk-linkbtn.danger{color:#cf1322}
.sk-rtext{font-size:13.5px;margin-top:4px}
.sk-agg{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.sk-agg .avg{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.sk-agg .stars{color:#fadb14;font-size:16px;letter-spacing:2px}

/* 404 stub */
.sk-gone{max-width:420px;margin:60px auto;text-align:center}
.sk-gone .icon{font-size:38px;margin-bottom:10px}
.sk-gone h2{font-size:17px;margin:0 0 6px}

/* form */
.sk-form{max-width:620px}
.sk-field{margin-bottom:16px}
.sk-field > label{display:block;font-size:13px;font-weight:500;margin-bottom:5px}
.sk-field .req{color:#cf1322}
.sk-hint{display:flex;justify-content:space-between;font-size:12px;color:rgba(0,0,0,.45);margin-top:4px;gap:12px}
.sk-field.err .sk-input{border-color:#cf1322}
.sk-errmsg{color:#cf1322;font-size:12.5px;margin-top:4px}
.sk-errbox{background:#fff1f0;border:1px solid #ffa39e;border-radius:6px;padding:10px 14px;font-size:13px;margin-bottom:16px}
.sk-errbox ul{margin:6px 0 0;padding-left:18px}
.sk-filebox{border:1.5px dashed #d9d9d9;border-radius:8px;padding:18px;text-align:center;color:rgba(0,0,0,.45);font-size:13px;cursor:pointer}
.sk-filebox:hover{border-color:#007bff;color:#007bff}
.sk-filechip{display:inline-flex;align-items:center;gap:8px;background:#fafafa;border:1px solid #d9d9d9;border-radius:6px;padding:6px 12px;font-size:13px}
.sk-filechip .x{border:0;background:none;color:rgba(0,0,0,.45);cursor:pointer;padding:0 2px}
.sk-notice{background:#e6f4ff;border:1px solid #91caff;border-radius:6px;padding:10px 12px;font-size:12.5px;margin-top:8px}
.sk-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* stars input */
.sk-stars-in{display:flex;gap:4px;font-size:28px;line-height:1}
.sk-stars-in button{border:0;background:none;padding:0 2px;color:#f0f0f0;cursor:pointer;transition:color .1s}
.sk-stars-in button.on{color:#fadb14}

/* modal (AntD markup, ensure overlay geometry even if capture css differs) */
.sk-modal-root .ant-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000}
.sk-modal-root .ant-modal-wrap{position:fixed;inset:0;overflow:auto;z-index:1000;display:flex;align-items:flex-start;justify-content:center}
.sk-modal-root .ant-modal{margin:80px 16px 40px;width:100%}
.sk-modal-root .ant-modal-content{background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);padding:20px 24px;position:relative}
.sk-modal-root .ant-modal-title{font-size:16px;font-weight:600}
.sk-modal-sub{color:rgba(0,0,0,.45);font-size:13px;margin:2px 0 16px}
.sk-modal-root .ant-modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.sk-modal-x{position:absolute;top:14px;right:14px;border:0;background:none;color:rgba(0,0,0,.45);font-size:16px;cursor:pointer;border-radius:4px;width:28px;height:28px}
.sk-modal-x:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.88)}

/* clusters modal rows */
.sk-clrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #f0f0f0}
.sk-clrow .sk-input{flex:1}
.sk-clrow .cnt{color:rgba(0,0,0,.45);font-size:12px;font-variant-numeric:tabular-nums;width:64px;text-align:right}

/* toaster (platform-like, top-right) */
.sk-toasts{position:fixed;top:70px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:1100}
.sk-toast{background:#fff;color:rgba(0,0,0,.88);border-radius:8px;padding:12px 16px;font-size:13.5px;min-width:260px;max-width:360px;box-shadow:0 4px 12px rgba(0,0,0,.15);border-left:4px solid #52c41a;animation:sk-in .18s ease-out}
.sk-toast.error{border-left-color:#f5222d}
@keyframes sk-in{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sk-toast{animation:none}}

/* sidebar: skills item counter (admin lens) */
#sk-nav-skills{cursor:pointer}
#sk-nav-skills .ant-badge{position:relative}
.sk-navcount{position:absolute;top:-6px;right:-10px;background:#f5222d;color:#fff;border-radius:99px;font-size:10px;font-weight:600;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 4px;font-variant-numeric:tabular-nums}

/* buttons focus */
.sk-page button:focus-visible,.sk-modal-root button:focus-visible{outline:2px solid #007bff;outline-offset:1px}