/* thesaltedhash.tv/wardrobe/ — the page around the potato. The potato itself
   is potato.css, the stage's own sheet; nothing here draws any part of it. */

html { background: var(--bg); }

.w-head, .w-main {
  position: relative; z-index: 2;
  width: min(100% - 32px, 72rem); margin-inline: auto;
}
.w-head { padding-top: 1.5rem; }
.w-head h1 {
  font-family: var(--title); font-weight: 400; letter-spacing: .04em;
  font-size: clamp(1.3rem, 4vw, 2.2rem); color: var(--accent3); margin: .6rem 0 1.2rem;
}
.w-home { color: var(--ink-dim); text-decoration: none; font-size: .85rem; }
.w-home:hover, .w-home:focus-visible { color: var(--ink); text-decoration: underline; }

/* The frame: an unscaled 80x84 box holding the potato feet-down, scaled by
   --s from its top-left, inside an outer box sized to the scaled result so
   the layout makes room for it. The scale is on a wrapper, never the sprite:
   the stage moves the sprite with its own transforms. */
.box { --s: 2.15; width: calc(80px * var(--s)); height: calc(84px * var(--s)); position: relative; }
.scaler {
  position: absolute; left: 0; top: 0; width: 80px; height: 84px;
  display: flex; justify-content: center; align-items: flex-end;
  transform: scale(var(--s)); transform-origin: 0 0;
}
.scaler .sprite { transition: none; }
/* ⚠️ THE STAGE DRAWS WITH content-box, AND site.css SETS border-box ON
   EVERYTHING. Under border-box a body's 3px outline eats into its 50x38, so
   every potato came out 6px smaller than the stream's and every hat sat 3px
   off its head. Measured against the stage's own markup and sheets. */
.scaler, .scaler * { box-sizing: content-box; }

.preview { display: flex; justify-content: center; padding: 1rem 0 .5rem; }
.preview .box { --s: 3.2; }
.said { text-align: center; color: var(--ink); font-size: 1rem; margin: .5rem 0; }
.problem { text-align: center; color: var(--alert); font-size: .9rem; margin: .3rem 0; }

.fine { text-align: center; color: var(--ink-faint); font-size: .8rem; margin: .4rem 0; }
.w-actions { display: flex; justify-content: center; gap: .6rem; margin: 1rem 0; }
.w-button {
  font: inherit; font-size: .9rem; letter-spacing: .06em; cursor: pointer;
  color: var(--bg); background: var(--accent3); border: 0; border-radius: 4px;
  padding: .7rem 1.2rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.w-button:hover, .w-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.w-button.quiet { background: transparent; color: var(--ink-dim); border: 1px solid var(--edge); }

/* The contact sheet, at the stage's own scale (avatarScale 2.15). */
.sheet-part h2 { font-size: .95rem; font-weight: 400; color: var(--ink-dim); margin: 1.4rem 0 .6rem; }
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: .5rem; }
.cell {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--edge) 45%, transparent); border-radius: 6px;
  padding: .3rem 0 .4rem;
}
.cell figcaption { font-size: .8rem; color: var(--ink-dim); }

@media (max-width: 420px) {
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet .box { --s: 1.9; }
}

/* ---- the picker (wardrobe-picker.js) -------------------------------------- */
.w-main { padding-bottom: 3rem; }
.w-status { min-height: 1.2em; }
.w-status.bad { color: var(--alert); }
.w-rule { text-align: center; color: var(--accent3); font-size: .9rem; margin: .6rem 0; }

.w-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid color-mix(in srgb, var(--edge) 60%, transparent); margin-top: 1rem; }
.w-tab {
  font: inherit; font-size: .85rem; letter-spacing: .05em; color: var(--ink-dim);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .7rem .8rem; min-height: 44px; cursor: pointer; flex: 0 0 auto;
}
.w-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent3); }
.w-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.w-panel { padding: .8rem 0; }
.w-sub { font-size: .8rem; font-weight: 400; color: var(--ink-dim); margin: .8rem 0 .4rem; }

.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; }
.w-tile {
  font: inherit; font-size: .72rem; color: var(--ink-dim); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--edge) 45%, transparent); border-radius: 6px;
  padding: .2rem 0 .35rem; min-height: 44px;
}
.w-tile[aria-pressed="true"] { border-color: var(--accent3); color: var(--ink); box-shadow: 0 0 0 1px var(--accent3) inset; }
.w-tile[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.w-tile:focus-visible, .w-chip:focus-visible, .w-swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.w-slider { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: .6rem; margin: .8rem 0; font-size: .85rem; }
.w-slider input { width: 100%; min-height: 44px; accent-color: var(--accent3); }
.w-slider input:disabled { opacity: .4; }
.w-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .6rem; }
.w-chip {
  font: inherit; font-size: .75rem; color: var(--ink-dim); cursor: pointer;
  background: none; border: 1px solid color-mix(in srgb, var(--edge) 60%, transparent); border-radius: 999px;
  padding: .35rem .7rem; min-height: 32px;
}
.w-chip[aria-pressed="true"] { color: var(--bg); background: var(--accent3); border-color: var(--accent3); }
.w-chip[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.w-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .4rem; }
.w-swatch {
  aspect-ratio: 1; min-height: 44px; border-radius: 50%; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.w-swatch.off { background: none; color: var(--ink-dim); font: inherit; font-size: .75rem; }
.w-swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent3); }

.w-button:disabled { opacity: .4; cursor: default; outline: none; }
.w-free {
  margin-top: 1.5rem; padding: .8rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--edge) 60%, transparent); border-radius: 8px;
}
.w-free h2 { font-size: .9rem; font-weight: 400; color: var(--ink-dim); margin: 0 0 .6rem; }
.w-free-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.w-switch { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; font-size: .9rem; }
.w-switch input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent3); }

@media (min-width: 900px) {
  .w-main:has(> .w-left) { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
  .w-left { position: sticky; top: 1rem; }
  .w-right .w-tabs { margin-top: 0; }
}

/* The privacy page (/privacy/): plain reading text. */
.w-prose { max-width: 44rem; line-height: 1.6; font-size: .95rem; padding-bottom: 3rem; }
.w-prose h2 { font-size: .95rem; color: var(--accent3); font-weight: 400; margin: 1.6rem 0 .3rem; }
.w-prose a { color: var(--accent2); }
.w-prose code { color: var(--accent3); }