/* =====================================================================
   YAKOOHA — kit-page.css
   Styles for the Kit playground page only (loaded on /kit). The component
   library itself lives in /assets/kit/yk-kit.css and is untouched.
   Uses the site tokens from site.css.
   ===================================================================== */
.seg button.on{background:var(--fg);color:var(--bg)}
.kit-install{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
.kit-install-code{background:var(--ink);color:var(--porcelain);border-radius:var(--r-lg);padding:1rem 1.2rem;min-width:0}
.kit-install-code .mono{color:rgba(246,245,241,.6);display:block;margin-bottom:.5rem}
.kit-install-code pre{font-family:var(--f-mono);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all;margin:0}
.kit-install-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.kit-shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:1.5rem;align-items:start}
.kit-side{position:sticky;top:calc(var(--nav-h) + 1rem);max-height:calc(100vh - var(--nav-h) - 2rem);overflow:auto;padding-right:.4rem;scrollbar-width:thin}
.kit-nav-toggle{display:none;width:100%;text-align:left;font-size:14px;font-weight:500;color:var(--ink);border:1px solid var(--line-2);border-radius:14px;padding:.75rem 1rem;background:var(--paper);margin-bottom:.8rem;position:relative}
.kit-nav-toggle::after{content:"";position:absolute;right:1rem;top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.kit-nav-toggle[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.kit-nav-toggle span{color:var(--ink-3);font-weight:400}
.kit-search{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line-2);border-radius:999px;padding:0 .9rem;background:var(--paper);margin-bottom:1rem}
.kit-search svg{width:14px;height:14px;fill:none;stroke:var(--ink-3);stroke-width:2;flex:none}
.kit-search input{flex:1;border:0;background:transparent;padding:.6rem 0;font:inherit;font-size:14px;color:var(--ink);min-width:0}
.kit-search input:focus{outline:none}
.kit-cat{margin-bottom:1rem}
.kit-cat h4{font-family:var(--f-mono);font-size:11.5px;font-weight:500;color:var(--ink-3);display:flex;justify-content:space-between;padding:.4rem .6rem .3rem}
.kit-cat button{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;text-align:left;font-size:14px;font-weight:500;color:var(--ink-2);padding:.45rem .6rem;border-radius:10px;transition:background .15s,color .15s}
.kit-cat button:hover{color:var(--ink);background:var(--paper)}
.kit-cat button.on{background:var(--ink);color:var(--porcelain)}
.kit-cat button i{font:500 10px var(--f-mono);font-style:normal;border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;color:var(--ink-2)}
.kit-main{min-width:0;display:flex;flex-direction:column;gap:1rem}
.kit-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.kit-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.03em;line-height:1;margin:.35rem 0 .4rem}
.kit-head p:last-child{color:var(--ink-2);font-size:15px;max-width:60ch}
.kit-head p code,.kit-note code{font-family:var(--f-mono);font-size:.86em;background:var(--paper-2);padding:1px 5px;border-radius:5px;color:var(--ink)}
.kit-head-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.kit-toolbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--paper)}
.kit-custom{padding:.8rem .9rem .9rem;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--paper);font-size:13px;color:var(--ink-2)}
.kit-custom-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.7rem;font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.kit-custom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem .9rem;align-items:end}
.kit-ctl{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.kit-ctl>span{display:flex;justify-content:space-between;align-items:baseline;font-weight:500;color:var(--ink);font-size:12.5px}
.kit-ctl>span b{font:400 11.5px var(--f-mono);color:var(--ink-3)}
.kit-ctl--wide{grid-column:span 2}
.kit-ctl select{width:100%;height:32px;font:inherit;font-size:13px;border:1px solid var(--line-2);border-radius:9px;padding:0 .5rem;background:var(--paper);color:var(--ink)}
.kit-ctl input[type=range]{width:100%;height:32px;margin:0;accent-color:var(--accent)}
.kit-presets{display:flex;align-items:center;gap:6px;height:32px;flex-wrap:wrap}
.kit-presets button{width:22px;height:22px;border-radius:50%;background:var(--c);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line-2);transition:transform .15s}
.kit-presets button:hover{transform:scale(1.12)}
.kit-presets button.on{box-shadow:0 0 0 2px var(--ink)}
.kit-colorpick{margin-left:.3rem;display:inline-flex}
.kit-colorpick input[type=color]{width:30px;height:24px;border:1px solid var(--line-2);border-radius:7px;padding:1px;background:var(--paper);cursor:pointer}
.kit-reset{font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.kit-reset:hover{color:var(--ink)}
.kit-preview{border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;padding:0;overflow:auto;background-image:radial-gradient(rgba(21,22,27,.08) 1px,transparent 1px);background-size:16px 16px;transition:background-color .3s}
.kit-preview.is-dark{background-color:#0F1015;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px)}
.kit-preview iframe{display:block;width:100%;height:320px;border:0;background:transparent;margin:0 auto;transition:width .35s var(--ease),height .25s var(--ease)}
.kit-preview.is-device iframe{box-shadow:0 0 0 1px var(--line-2),0 30px 60px -30px rgba(0,0,0,.4);border-radius:18px;margin:24px auto;background:#fff}
.kit-preview.is-dark.is-device iframe{background:#0F1015}
.kit-code{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink);color:var(--porcelain);overflow:hidden}
.kit-code-tabs{display:flex;gap:2px;padding:.5rem .6rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.kit-code-tabs button{font-size:13px;font-weight:500;color:rgba(246,245,241,.6);padding:.5rem .8rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.kit-code-tabs button.on{color:#fff;border-color:var(--lime)}
.kit-code-actions{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;flex-wrap:wrap}
.kit-code-actions .mono{color:rgba(246,245,241,.55);margin-right:auto}
.kit-code-actions .btn{border-color:rgba(255,255,255,.35);color:#fff}
.kit-code-actions .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.kit-code-actions .btn--solid{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.kit-editor{display:block;width:100%;min-height:260px;max-height:480px;resize:vertical;border:0;background:transparent;color:#F1F0EE;font-family:var(--f-mono);font-size:13px;line-height:1.6;padding:.4rem 1rem 1rem;tab-size:2;white-space:pre;overflow:auto}
.kit-editor:focus{outline:none}
.kit-editor[readonly]{color:rgba(246,245,241,.8)}
.kit-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,10px);background:var(--ink);color:var(--porcelain);font-size:13.5px;font-weight:500;padding:.65rem 1rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease);z-index:200;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.kit-toast.on{opacity:1;transform:translate(-50%,0)}
.kit-compose{border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--paper);padding:clamp(1.4rem,3vw,2.4rem);transition:box-shadow .3s}
.kit-compose.flash{box-shadow:0 0 0 3px var(--lime)}
.kit-compose-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:end;margin-bottom:1.6rem}
.kit-compose-head .lead{margin-top:.6rem;font-size:1rem}
.kit-compose-head .h2{margin-top:.4rem;font-size:clamp(1.6rem,3vw,2.6rem)}
.kit-compose-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.kit-compose-list{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.kit-compose-list li{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:14px;background:var(--porcelain)}
.kit-compose-empty{display:block!important;color:var(--ink-3);border-style:dashed!important;text-align:center;padding:1.4rem!important}
.kit-compose-n{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.kit-compose-name b{display:block;font-weight:500}
.kit-compose-name small{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
.kit-compose-acts{display:flex;gap:.2rem}
.kit-compose-acts button{width:30px;height:30px;border:1px solid var(--line-2);border-radius:9px;color:var(--ink-2);font-size:14px;line-height:1;background:var(--paper)}
.kit-compose-acts button:hover{border-color:var(--ink);color:var(--ink)}
.kit-compose-acts button:disabled{opacity:.3}
.kit-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.kit-note{border-top:1px solid var(--line-2);padding-top:1.2rem}
.kit-note h3{font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;margin-bottom:.5rem}
.kit-note p{color:var(--ink-2);font-size:15px;line-height:1.6}
@media (max-width:900px){.kit-shell{grid-template-columns:1fr}.kit-side{position:static;max-height:none;padding:0}.kit-nav-toggle{display:block}.kit-search,.kit-nav{display:none}.kit-shell.nav-open .kit-search{display:flex}.kit-shell.nav-open .kit-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.kit-install{grid-template-columns:1fr}.kit-compose-head{grid-template-columns:1fr}.kit-notes{grid-template-columns:1fr}.kit-custom-row{gap:.6rem .9rem}}
@media (max-width:560px){.kit-shell.nav-open .kit-nav{grid-template-columns:1fr}.kit-custom-grid{grid-template-columns:1fr 1fr}.kit-ctl--wide{grid-column:1/-1}}