/* ===========================================================================
   face-tool.css - the sheet the little picture tool is drawn on.

   It sits over everything, dims the page behind it, and shows the two frames
   the site keeps a picture in: the wide band and the hexagonal icon, which is
   drawn in the middle of the band at the band's own height - the very shape
   the site takes out of a square. The frames are the real output sizes blown
   up for the eye - moving the picture inside them moves it in the pixels that
   get kept. The window itself is cut and edged the way every other window and
   button of the site is: --hx-edge for the lit edge, --hx-face for the dark
   inside, a card's cut for the band and a hexagon for the icon.
   =========================================================================== */

.ft[hidden] { display: none; }

.ft {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 24px;
}
.ft-back {
  position: absolute; inset: 0;
  background: rgba(4, 2, 14, .74);
  backdrop-filter: blur(3px);
}

.ft-card {
  position: relative;
  width: min(660px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 20px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--popup);
  color: var(--ink);
}
/* The card needs nothing said about its corners: hex.css takes the border and
   the radius away and cuts it like every other window of the site. Only what
   that cut makes pointless is dropped here - the border, the radius, and a
   shadow a clip-path would cut off anyway. The dimmed page behind is what
   separates the window from the page. */

/* ---- the head ---------------------------------------------------------- */

.ft-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; }
.ft-head b { font-size: 15px; }
.ft-head span {
  grid-column: 1; font-size: 12px; line-height: 1.55;
  color: var(--ink-faint); max-width: 62ch;
}
.ft-x {
  grid-row: 1 / span 2; grid-column: 2; align-self: start;
  width: 26px; height: 26px; line-height: 1;
  font-size: 17px; color: var(--ink-faint);
  /* a 26px square takes neither the full cut nor the whole edge: the site's
     own small buttons lean in 6px and keep a rim of one */
  --ch: 6px; --rim: 1px;
  cursor: pointer;
}
.ft-x:hover { color: var(--ink); filter: brightness(1.14); }

/* ---- the two frames ---------------------------------------------------- */

/* One window, one picture. The band is the whole of it; the icon is not drawn
   beside it - the site's hexagon lies over the band as a border and nothing
   else, no fill and no darkening, and the part of the band's own picture that
   falls inside that border is the icon. The border is stroked along the very
   hexagon the site takes out of a square, corner for corner. Every part is
   measured against the pane's own width, so the window grows and shrinks as
   one piece. */
.ft-body { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.ft-pane {
  position: relative; flex: 0 0 auto;
  width: 344px; max-width: 100%;
  aspect-ratio: 512 / 305;
}
.ft-slot { margin: 0; position: absolute; }
.ft-slot.ft-base { left: 0; top: 0; width: 100%; }
.ft-slot.ft-over {
  left: 50%; top: 0; height: 100%; aspect-ratio: 1 / 1;
  transform: translateX(-50%); z-index: 2;
}

/* Both frames are cut and edged with the site's own two tokens - the lit edge
   and the dark inside - so the tool wears the skin the rest of the site wears.
   The band takes the cut a card takes; the icon takes the hexagon, written in
   the site's own percentages, which is the only way all six sides of a square
   come out the same length. */
.ft-frame {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  padding: 1.3px;
  background: var(--hx-edge);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.ft-frame[data-shape="band"] {
  --hc: 10px;
  width: 100%; aspect-ratio: 512 / 305;
  clip-path: polygon(
    var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--hc),
    100% calc(100% - var(--hc)), calc(100% - var(--hc)) 100%,
    var(--hc) 100%, 0 calc(100% - var(--hc)), 0 var(--hc));
}
.ft-frame[data-shape="icon"] {
  width: 100%; height: 100%;
  clip-path: polygon(
    25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}
/* the dark inside, inset so only the lit edge is left showing */
.ft-frame::before {
  content: ""; position: absolute; inset: 1.3px; z-index: 0;
  pointer-events: none;
  background: rgba(4, 2, 14, .62);
}
.ft-frame[data-shape="band"]::before {
  clip-path: polygon(
    var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--hc),
    100% calc(100% - var(--hc)), calc(100% - var(--hc)) 100%,
    var(--hc) 100%, 0 calc(100% - var(--hc)), 0 var(--hc));
}
.ft-frame[data-shape="icon"]::before {
  clip-path: polygon(
    25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}
/* Over the band, the hexagon is nothing but its border. It is not filled and
   it darkens nothing: the band's own picture shows through, and the part of it
   inside the border is the icon. Its cut is still the site's hexagon, so the
   border stands exactly where the icon will be cut. */
.ft-frame[data-shape="icon"] { background: none; padding: 0; }
.ft-frame[data-shape="icon"]::before { display: none; }
/* the icon's own canvas is drawn and kept for the icon file, but never shown
   here - the border frames the band's real pixels, not a second copy of them */
.ft-frame[data-shape="icon"] canvas { visibility: hidden; }
/* The border itself, stroked along the very hexagon the site cuts out of a
   square - all six sides the same length. The frame's own hexagon clip keeps
   the outer half of the stroke, so 2.6 in the file reads as the site's rim. */
.ft-hex {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ft-hex polygon {
  fill: none;
  stroke: url(#ft-hex-lit);
  /* the frame's own hexagon cut keeps the outer half of the stroke, so twice
     the site's own rim thickness reads as exactly that rim */
  stroke-width: calc(var(--hx-rim) * 2);
  vector-effect: non-scaling-stroke;
}
/* the picture sits over the dark inside, and over the band when it is the icon
   - later in the box tree, so it paints on top without a number */
.ft-frame canvas { display: block; position: relative; z-index: 1;
  width: 100%; height: 100%; }
.ft-frame.held { cursor: grabbing; background: var(--hx-edge-lit); }
.ft-frame[data-shape="icon"].held { background: none; }
.ft-frame.held .ft-hex polygon { filter: brightness(1.3); }
.ft-frame.empty { cursor: default; }

.ft-gap {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  display: none;
  place-items: center; text-align: center;
  font-size: 11.5px; color: var(--ink-faint);
  padding: 8px;
}
.ft-frame.empty .ft-gap { display: grid; }
/* the icon has no state of its own - it is the middle of the band's picture -
   so it never speaks for itself; when there is no picture, the band says so */
.ft-frame[data-shape="icon"] .ft-gap { display: none; }

/* what each frame is, beside the window ---------------------------------- */
.ft-keys {
  flex: 1 1 200px; min-width: 180px;
  display: flex; flex-direction: column; gap: 10px;
}
.ft-key { font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.ft-key b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* ---- the controls ------------------------------------------------------ */

.ft-ctl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ft-pick, .ft-act {
  font: inherit; font-size: 12.5px;
  padding: 7px 13px;
  color: var(--ink);
  cursor: pointer;
}
/* A real button wears the site's skin the moment hex.css loads - the lit edge,
   the dark inside, the slanted sides - so a background painted here would only
   be painted over. What is left to say is the ghost: it is the quiet one, so it
   edges the lit edge down instead of lifting it. */
.ft-act.ghost { --hx-edge: linear-gradient(90deg, rgba(169, 156, 255, .45),
  rgba(120, 100, 220, .3)); color: var(--ink-soft); }
.ft-act.ghost:hover { color: var(--ink); }
.ft-pick:hover, .ft-act:not([disabled]):hover { filter: brightness(1.14); }
.ft-act[disabled] { opacity: .4; cursor: default; }

/* The label is the one control the site has never seen - a button made of a
   <label>, so the browser opens the file picker with no script behind it - and
   it is cut the way the site cuts its own buttons: the same lit edge, the same
   dark inside, the same slanted sides. --hx-cut and --hx-rim are the site's own
   two knobs, so this button leans exactly as far in as its neighbours do. */
.ft-pick {
  position: relative;
  --ch: var(--hx-cut); --rim: var(--hx-rim);
  background: var(--hx-edge);
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}
.ft-pick::before {
  content: ""; position: absolute; inset: var(--rim); z-index: -1;
  pointer-events: none;
  background: var(--hx-face);
  clip-path: polygon(
    calc(var(--ch) - var(--rim)) 0, calc(100% - var(--ch) + var(--rim)) 0, 100% 50%,
    calc(100% - var(--ch) + var(--rim)) 100%, calc(var(--ch) - var(--rim)) 100%, 0 50%);
}

.ft-zoom {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--ink-faint);
}
.ft-zoom input { width: 170px; accent-color: var(--link); }

.ft-said {
  margin: 0; min-height: 17px;
  font-size: 12px; line-height: 1.5; color: var(--ink-soft);
}
.ft-said.bad { color: #ff9db6; }

.ft-foot { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------- out on the pages -- */
/* A creator's head when VRChat has nothing for them: the initials, and under
   them one plain sentence saying so, rather than a frame standing empty. And
   on your own page, the one line that opens the tool. Both use the theme's
   own tokens, so neither turns into a bright patch on a dark page. */
.nopicnote {
  display: block; margin-top: 7px;
  font-size: 11.5px; line-height: 1.4; color: var(--ink-faint);
}
.wshot .nopicnote { position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center; pointer-events: none; }
.cpic-btn {
  margin-left: 9px; padding: 2px 9px;
  font: inherit; font-size: 11.5px;
  /* a real button, so the site's skin already cuts it; only the lean is set */
  --ch: 6px; --rim: 1px;
  color: var(--ink-soft);
  cursor: pointer;
}
.cpic-btn:hover { color: var(--ink); filter: brightness(1.14); }