/* SakinLab tools — shared base: design tokens (light/dark), version badge, canvas stage, credit.
   Safe to load in any tool: it only defines variables and sk-* / .version-badge rules.
   Tools whose components already follow the shared UI system also load /assets/tool-ui.css. */
  /* SakinLab tokens: same neutrals as the site (paper #FAFAFA, ink #171717), one blue accent. */
  :root{
    --bg:#EBEBEB;
    --bg-canvas:#F5F5F5;
    --panel:#FAFAFA;
    --panel-2:#F0F0F0;
    --bg-input:#FFFFFF;
    --bg-hover:#F0F0F0;
    --bg-selected:#E8F2FF;
    --border:#ECECEC;
    --border-strong:#D6D6D6;
    --text:#171717;
    --muted:#8C8C8C;
    --text-muted:#B0B0B0;
    --accent:#0d99ff;
    --accent-hover:#0a85e0;
    --accent-2:#0d99ff;
    --danger:#f24822;
    --danger-wash:#FDECEB;
    --warn-ink:#A8760A; --warn-bg:#FFF8E6; --warn-line:#F0DCA0;
    --seg-active:#FFFFFF;
    --scroll-thumb:#C8C8C8; --scroll-thumb-hover:#A8A8A8;
    --toast-bg:#171717; --toast-ink:#FFFFFF;
    --radius:6px;
    --radius-lg:8px;
  }
  :root[data-appearance="dark"]{
    --bg:#101010;
    --bg-canvas:#0E0E0E;
    --panel:#161616;
    --panel-2:#222222;
    --bg-input:#1E1E1E;
    --bg-hover:#242424;
    --bg-selected:rgba(13,153,255,.16);
    --border:#262626;
    --border-strong:#363636;
    --text:#EDEDED;
    --muted:#8E8E8E;
    --text-muted:#5E5E5E;
    --danger-wash:rgba(242,72,34,.14);
    --warn-ink:#E3B341; --warn-bg:rgba(212,160,23,.12); --warn-line:rgba(212,160,23,.35);
    --seg-active:#2E2E2E;
    --scroll-thumb:#3A3A3A; --scroll-thumb-hover:#4C4C4C;
    --toast-bg:#EDEDED; --toast-ink:#161616;
  }

  .version-badge{
    display:inline-block; height:18px; padding:0 6px; line-height:18px;
    font-size:10px; font-weight:500; color:var(--muted); background:var(--panel-2);
    border-radius:4px; letter-spacing:.01em; font-variant-numeric:tabular-nums;
  }

  /* ================= Canvas stage (tool.js) ================= */
  .sk-stage{
    display:grid; grid-template-columns:18px minmax(0,1fr); grid-template-rows:18px minmax(0,1fr);
    flex:1 1 auto; min-width:0; min-height:0; position:relative;
  }
  .sk-corner{grid-area:1/1; background:var(--panel); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    font:600 7.5px/18px "Geist", system-ui, sans-serif; color:var(--muted); text-align:center; letter-spacing:.02em;}
  .sk-ruler{background:var(--panel); overflow:hidden; pointer-events:none; position:relative;}
  .sk-ruler-x{grid-area:1/2; border-bottom:1px solid var(--border);}
  .sk-ruler-y{grid-area:2/1; border-right:1px solid var(--border);}
  .sk-ruler svg{display:block; position:absolute; top:0; left:0;}
  .sk-ruler path{fill:none; stroke-width:1; shape-rendering:crispEdges;}
  .sk-ruler .mi{stroke:var(--border-strong);}
  .sk-ruler .ma{stroke:var(--muted); opacity:.6;}
  .sk-ruler text{font:500 8.5px/1 "Geist", system-ui, sans-serif; fill:var(--muted); font-variant-numeric:tabular-nums;}
  .sk-ruler .dim{opacity:.35;}
  .sk-ruler .b{fill:var(--accent); opacity:.14;}
  .sk-ruler .bl{fill:var(--accent);}
  .sk-ruler .c{stroke:var(--text); opacity:.5;}
  .sk-viewport{
    grid-area:2/2; position:relative;
    --sk-line: rgba(0,0,0,.045);
    background-color:var(--bg-canvas);
    background-image:
      linear-gradient(to right, var(--sk-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--sk-line) 1px, transparent 1px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='linear' slope='.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: var(--sk-grid,100px) var(--sk-grid,100px), var(--sk-grid,100px) var(--sk-grid,100px), 200px 200px;
    background-position: var(--sk-gx,0) var(--sk-gy,0), var(--sk-gx,0) var(--sk-gy,0), 0 0;
    /* grain blends with overlay so the pasteboard keeps its tone (mean-preserving, like the site) */
    background-blend-mode: normal, normal, overlay;
    background-attachment: local, local, local;
  }
  :root[data-appearance="dark"] .sk-viewport{--sk-line: rgba(255,255,255,.045);}
  /* The artboard always sits above the grid and grain */
  .sk-stage:not(.sk-external) .sk-viewport > *{position:relative; z-index:1;}

  .sk-zoom{
    position:absolute; right:12px; bottom:12px; z-index:5;
    display:flex; align-items:center; gap:1px; padding:3px;
    background:var(--panel); border:1px solid var(--border-strong); border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
  }
  .sk-zoom button{
    appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
    height:24px; min-width:24px; padding:0 6px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center;
    font:500 11px/1 "Geist", system-ui, sans-serif; font-variant-numeric:tabular-nums;
    transition:background-color .16s, color .16s, transform .12s;
  }
  .sk-zoom button:hover{background:var(--bg-hover); color:var(--text);}
  .sk-zoom button:active{transform:scale(.94);}
  .sk-zoom button[aria-pressed="true"]{color:var(--text); background:var(--bg-hover);}
  .sk-zoom svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round;}
  .sk-zoom .sk-pct{min-width:44px;}
  .sk-zoom .sk-sep{width:1px; height:14px; background:var(--border-strong); margin:0 3px;}
  .sk-views{display:flex; gap:1px;}

  /* Multiple view: every design side by side; zooming changes the thumbnail size */
  .sk-multi{
    align-self:stretch; width:100%;
    display:grid; grid-template-columns:repeat(auto-fit, var(--tw,200px)); justify-content:center; align-content:start;
    gap:28px 24px; padding:8px 8px 64px;
  }
  .sk-multi[hidden]{display:none;}
  .sk-thumb{appearance:none; border:0; padding:0; background:none; cursor:pointer; text-align:left; display:grid; gap:8px; color:var(--text);}
  .sk-thumb img{display:block; width:var(--tw,200px); aspect-ratio:var(--ta,1); object-fit:cover; background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.15), 0 0 0 1px var(--border-strong); transition:box-shadow .16s, transform .16s;}
  .sk-thumb img:not([src]){background:var(--panel-2);}
  .sk-thumb:hover img{box-shadow:0 2px 10px rgba(0,0,0,.14), 0 0 0 1px var(--muted);}
  .sk-thumb.is-active img{box-shadow:0 0 0 2px var(--accent), 0 1px 3px rgba(0,0,0,.15);}
  .sk-thumb:active img{transform:scale(.99);}
  .sk-cap{display:flex; gap:6px; align-items:baseline; font-size:11px; color:var(--muted); min-width:0;}
  .sk-cap b{font-weight:600; color:var(--text); font-variant-numeric:tabular-nums;}
  .sk-cap span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sk-multi.is-building .sk-thumb img:not([src]){animation:sk-pulse 1.2s ease-in-out infinite;}
  @keyframes sk-pulse{50%{opacity:.5;}}

  /* Optical centering: a line-height equal to the box height centers Geist's cap height exactly
     (its ascent and descent balance around the caps). Avoid flex centering for tiny labels. */
  /* SakinLab credit: small, bottom-left of the canvas area (tool.js adds it) */
  .sk-credit{
    position:absolute; left:30px; bottom:14px; z-index:5;
    font-size:10.5px; font-weight:500; line-height:1; letter-spacing:.01em;
    color:var(--text-muted); text-decoration:none; transition:color .16s;
  }
  .sk-credit span{font-weight:400; font-variant-numeric:tabular-nums;}
  .sk-credit .tm{font-size:.62em; vertical-align:.55em; margin-left:.05em; line-height:0;}
  .sk-credit:hover{color:var(--text);}

  /* Single ⇄ multiple view: each side settles in, so the switch reads as one continuous zoom */
  @media (prefers-reduced-motion: no-preference){
    .sk-multi:not([hidden]){ animation:sk-over-in .3s cubic-bezier(.23,1,.32,1); }
    .sk-stage.sk-was-multi [data-sk-art]{ animation:sk-back-in .3s cubic-bezier(.23,1,.32,1); }
    @keyframes sk-over-in{ from{ opacity:0; transform:scale(1.03); } }
    @keyframes sk-back-in{ from{ opacity:0; transform:scale(.96); } }
  }

  /* Overlay stage: rulers drawn inside the workspace element (canvas-drawn tools) */
  .sk-stage.sk-overlay{display:block;}
  .sk-overlay > .sk-corner, .sk-overlay > .sk-ruler{position:absolute; z-index:4;}
  .sk-overlay > .sk-corner{top:0; left:0; width:18px; height:18px;}
  .sk-overlay > .sk-ruler-x{top:0; left:18px; right:0; height:18px;}
  .sk-overlay > .sk-ruler-y{top:18px; left:0; bottom:0; width:18px;}