/* ==========================================================================
   NIVAKANA — Feel the Art (painting studio)
   Page-specific only. Tokens, buttons, tags, header and footer all come from
   nivakana.css so this page is the same object as the rest of the site.
   ========================================================================== */

/* ==========================================================================
   CHOOSER
   ========================================================================== */
.picks{
  display:grid; gap:var(--s-8);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .picks{ grid-template-columns:repeat(3,1fr); } }

.pick{
  display:grid; gap:var(--s-4); justify-items:start;
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit;
}
.pick__media{
  display:block; width:100%;
  border:1.5px solid var(--line); border-radius:var(--radius-lg);
  background:var(--paper); overflow:hidden;
  transition:transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
.pick__media img{ width:100%; height:auto; display:block; aspect-ratio:1; }
.pick:hover .pick__media,
.pick:focus-visible .pick__media{
  transform:translateY(-5px);
  box-shadow:var(--shadow-hover);
}
.pick:focus-visible{ outline:none; }
.pick:focus-visible .pick__media{ outline:2px solid var(--accent-strong); outline-offset:3px; }

/* ==========================================================================
   STUDIO
   ========================================================================== */
.studio{ padding-block:var(--s-8) var(--s-16); }
.studio[hidden]{ display:none; }

.studio__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-6); margin-bottom:var(--s-6);
}
.chip--back svg{ transform:none; }
.btn--ghost:hover .chip--back{ transform:translateX(-3px); }

.studio__grid{ display:grid; gap:var(--s-8); align-items:start; }
@media (min-width:980px){
  .studio__grid{ grid-template-columns:minmax(0,1fr) 300px; gap:var(--s-12); }
}

/* ---- the canvas stack ----------------------------------------------------
   Paint sits underneath, line art on top. That way a fill can never cover an
   outline, and the brush is automatically clipped behind the drawing without
   any compositing work per stroke.
   ------------------------------------------------------------------------- */
.studio__stage{
  position:relative; width:100%; aspect-ratio:1;
  max-width:min(76vh, 760px); margin-inline:auto;
  /* leaves room for the docked toolbar so no part of the drawing is hidden */
  border:1.5px solid var(--line); border-radius:var(--radius-lg);
  background:var(--paper); overflow:hidden;
  /* stops the browser treating a painting gesture as a scroll or a zoom */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:crosshair;
  box-shadow:var(--shadow-rest);
}
.studio__canvas{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
}
.studio__canvas--line{ pointer-events:none; }

.studio__hint{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  background:color-mix(in srgb,var(--ink) 88%,transparent); color:var(--paper);
  font-size:var(--step--1); font-weight:600;
  padding:.45rem .9rem; border-radius:var(--radius-pill);
  pointer-events:none; white-space:nowrap;
}

/* ==========================================================================
   TOOLS
   ========================================================================== */
.tools{ display:grid; gap:var(--s-8); align-content:start; }

.tools__h{
  font-family:var(--font-sans); font-size:var(--step--1); font-weight:600;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--ink-muted); margin:0 0 var(--s-3);
  display:flex; align-items:center; gap:.5rem;
}
.tools__v{ color:var(--ink); font-variant-numeric:tabular-nums; }
.tools__row{ display:flex; gap:var(--s-3); }

.swatches{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-3);
}
.swatch{
  appearance:none; border:1.5px solid var(--line); background:var(--sw);
  width:100%; aspect-ratio:1; border-radius:50%; cursor:pointer; padding:0;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.swatch:hover{ transform:scale(1.12); }
.swatch.is-on{
  transform:scale(1.16);
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

.segmented{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  overflow:hidden;
}
.seg{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; font-size:.88rem;
  padding:.6rem .4rem; color:var(--ink);
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.seg + .seg{ border-left:1.5px solid var(--line); }
.seg.is-on{ background:var(--ink); color:var(--paper); }

.slider{
  appearance:none; width:100%; height:2px; background:var(--hairline);
  border-radius:2px; outline:none; cursor:pointer;
}
.slider::-webkit-slider-thumb{
  appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:1.5px solid var(--line); cursor:pointer;
}
.slider::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:1.5px solid var(--line); cursor:pointer;
}

.icon-btn[disabled]{ opacity:.35; cursor:not-allowed; }
.studio__done{ justify-content:center; }

/* ==========================================================================
   FINISHED
   ========================================================================== */
.finish{
  position:fixed; inset:0; z-index:1400;
  display:grid; place-items:center;
  padding:var(--gutter);
  background:color-mix(in srgb,var(--night) 72%,transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.finish[hidden]{ display:none; }

.finish__card{
  position:relative; z-index:2;
  width:min(520px,100%); max-height:92vh; overflow:auto;
  background:var(--paper); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s-12) var(--s-8) var(--s-8);
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.34);
}
.finish__mark{ width:56px; height:auto; margin:0 auto var(--s-6); display:block; }
.finish__h{ font-size:clamp(1.6rem,4.4vw,2.4rem); line-height:1.1; letter-spacing:-.02em; }
.finish__h .w{ display:inline-block; }

.finish__preview{
  margin:0 0 var(--s-8); border:1.5px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:var(--paper);
}
.finish__preview img, .finish__preview canvas{ width:100%; height:auto; display:block; }

.finish__actions{ display:grid; gap:var(--s-3); }
@media (min-width:520px){ .finish__actions{ grid-auto-flow:column; justify-content:center; } }

.finish__close{
  position:absolute; top:.75rem; right:.75rem;
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--hairline); background:transparent;
  display:grid; place-items:center; cursor:pointer;
}
.finish__close svg{ width:16px; height:16px; }
.finish__close:hover{ border-color:var(--line); }

.finish__confetti{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.confetti-bit{
  position:absolute; top:-8%; width:10px; height:14px; border-radius:2px;
  will-change:transform, opacity;
}

/* ==========================================================================
   MOBILE / TABLET — docked controls
   Must come after the base rules: a media query adds no specificity, so
   placed earlier its .swatches override was beaten by the base 6-column
   grid and the strip stayed tall enough to cover the drawing.
   ========================================================================== */
@media (max-width:979px){
  /* A docked control strip, laid out on a grid so the swatches, the tool
     switch and the finish button share as few rows as possible. At its first
     height it ran to 417px and hid the bottom of the drawing — losing part of
     the picture you are colouring is worse than a dense strip, so the labels
     go and the rows double up. */
  .tools{
    position:sticky; bottom:0; z-index:5;
    background:color-mix(in srgb,var(--paper) 95%,transparent);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-top:1.5px solid var(--line);
    margin-inline:calc(var(--gutter) * -1);
    padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));

    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "colour  colour"
      "tool    history"
      "size    size"
      "done    done";
    gap:var(--s-3) var(--s-4);
    align-items:center;
  }
  .tools > .tools__group:nth-of-type(1){ grid-area:colour; }
  .tools > .tools__group:nth-of-type(2){ grid-area:tool; }
  .tools > .tools__group:nth-of-type(3){ grid-area:size; }
  .tools > .tools__group:nth-of-type(4){ grid-area:history; }
  .studio__done{ grid-area:done; width:100%; }

  .tools__h{ display:none; }                 /* the controls read on sight */
  .swatches{ grid-template-columns:repeat(12,1fr); gap:5px; }
  .seg{ padding:.5rem .3rem; font-size:.84rem; }
  .slider{ height:3px; }
  .icon-btn{ width:36px; height:36px; }

  .studio__stage{ max-width:min(100%, 44vh); }
}

/* ==========================================================================
   REDUCED MOTION — the tool still works, it just stops moving
   ========================================================================== */
.no-motion .pick__media{ transition:none; }
.no-motion .finish__confetti{ display:none; }