/* =====================================================================
   brand-maker.css — ミミメーカー (/brand/avatar/maker/)
   ---------------------------------------------------------------------
   Loaded by that page only, after css/brand.css. A two-column tool: the
   preview and the save settings in a sticky column on the left, the
   choices on the right. Below 1024px it is one column: the preview and
   the tab bar stay pinned under the header while the tiles scroll, and
   the script moves the save panel after the choices, so the keyboard
   order stays the order on screen.

     1. Frame         .maker, .maker-side, .maker-controls
     2. Preview       .maker-stage, .maker-preview (+ its ground swatches),
                      .maker-summary
     3. Save          .maker-output: rows of label + control, the
                      segmented control (.maker-seg), the two buttons
     4. Choices       .maker-tabs, .maker-panel, .maker-tile
     5. Uses          .maker-uses: what the chosen parts are for

   Sizes are tokens. The grounds are the avatar system's own (cream
   #FCF0CF, card #FFF8E6, navy #1E2340 — docs/avatar-system.md); the
   checkerboard is the usual sign for "transparent".
   ===================================================================== */

/* The tool needs the script; without it, a sentence and a link. The
   page's <head> marks <html> .maker-js before anything paints, so the
   sentence never flashes where the script runs. */
.maker { display: none; }
.maker-js .maker { display: grid; }
.maker-js .maker-fallback { display: none; }
.maker-fallback {
  max-width: var(--w-narrow);
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
}
.maker-section { padding-top: var(--sp-12); }


/* =====================================================================
   1. FRAME
   ===================================================================== */
.maker {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-10);
  align-items: start;
}
.maker-side {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
/* A short laptop screen: the column scrolls inside itself rather than
   hide the save buttons below the fold. The padding keeps focus rings
   inside its scroll box. */
@media (min-width: 1024px) and (max-height: 760px) {
  .maker-side {
    max-height: calc(100vh - var(--header-h) - var(--sp-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: calc(var(--sp-2) * -1);
    padding: var(--sp-2);
  }
}
/* Everything the keyboard reaches scrolls to just below what is pinned
   (in one column: the header, the preview and the tab bar). */
.maker input,
.maker button { scroll-margin-top: var(--maker-cover, calc(var(--header-h) + var(--sp-4))); scroll-margin-bottom: var(--sp-4); }
.maker-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

/* One column: the preview pins under the header, the save settings move
   below the choices (pick first, then save). */
@media (max-width: 1023px) {
  .maker-js .maker { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .maker-side { display: contents; }
  /* A white strip above and below, so the tiles slide out of sight
     cleanly under the pinned preview. */
  .maker-stage {
    position: sticky;
    top: var(--header-h);
    z-index: 2;
    margin: calc(var(--sp-2) * -1) 0 0;
    padding: var(--sp-2) 0 var(--sp-3);
    background: var(--bg-white);
  }
  /* The tabs pin under the preview (the script measures it), so the next
     part is always one tap away. */
  .maker-tabbar {
    position: sticky;
    top: var(--maker-pin, var(--header-h));
    z-index: 1;
    background: var(--bg-white);
  }
}
/* A short phone (an iPhone SE held upright): the pinned preview would
   leave no room for a tile, so only the tab bar pins. */
@media (max-width: 1023px) and (max-height: 640px) {
  .maker-stage { position: relative; top: auto; }
}
/* This page is a tool: the site's floating 「無料体験」 bar would sit on
   its controls (as on /trial/ and the store). */
.page-maker .mobile-sticky-cta { display: none; }
@media (max-width: 520px) { body.page-maker { padding-bottom: 0; } }


/* =====================================================================
   2. PREVIEW
   ===================================================================== */
.maker-stage { display: flex; flex-direction: column; gap: var(--sp-2); }
.maker-preview {
  position: relative;
  height: clamp(10rem, calc(100vh - 35rem), 26rem);
  padding: var(--sp-6) var(--sp-6) var(--sp-14);   /* the foot holds the ground swatches */
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  background-color: var(--bg-white);
  transition: background-color var(--transition);
}
.maker-preview[data-bg="none"],
.maker-bg-chip[data-bg="none"] {
  background-image: conic-gradient(#EEF0F4 25%, transparent 0 50%, #EEF0F4 0 75%, transparent 0);
  background-size: 20px 20px;
}
.maker-preview[data-bg="cream"], .maker-bg-chip[data-bg="cream"] { background-color: #FCF0CF; }
.maker-preview[data-bg="card"],  .maker-bg-chip[data-bg="card"]  { background-color: #FFF8E6; }
.maker-preview[data-bg="navy"],  .maker-bg-chip[data-bg="navy"]  { background-color: #1E2340; }
.maker-preview-art { width: 100%; height: 100%; overflow: hidden; }
.maker-preview-art .maker-art { width: 100%; height: 100%; max-width: none; }

@media (max-width: 1023px) {
  .maker-preview {
    height: clamp(10rem, 26vh, 15rem);
    padding: var(--sp-3) var(--sp-4) var(--sp-12);
    box-shadow: var(--shadow-md);
  }
}

/* The grounds to check against: a row of swatches in the preview's foot.
   The file itself is always transparent. */
.maker-bg {
  position: absolute;
  left: 50%;
  bottom: var(--sp-2);
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-full);
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
}
.maker-bg-name {
  align-self: center;
  min-width: 5.5em;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  color: var(--text-light);
  white-space: nowrap;
}
.maker-bg-option { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; cursor: pointer; }
.maker-bg-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.maker-bg-chip {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-full);
  border: 1px solid var(--ink-quiet);   /* cream, card and white differ by little: the edge tells them apart */
  background-color: var(--bg-white);
  background-size: 8px 8px;
}
.maker-bg-option input:checked + .maker-bg-chip { box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--primary-dark); }
.maker-bg-option input:focus-visible + .maker-bg-chip { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.maker-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: 0 var(--sp-1);
}
.maker-summary {
  min-width: 0;
  min-height: var(--lh-body-sm);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-main);
}
.maker-summary .pill { vertical-align: 1px; }


/* =====================================================================
   3. SAVE
   ===================================================================== */
.maker-output {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--pad-card);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  background: var(--bg-cream);
}
.maker-heading {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
}
.maker-row {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.maker-label {
  padding-top: var(--sp-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.maker-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-width: 0; }
/* The narrowest phones: each label over its control. */
@media (max-width: 400px) {
  .maker-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .maker-label { padding-top: 0; }
}

/* Segmented control: radios in one rounded track; the chosen one is a
   raised white pill ringed in the darker blue, its label in the blue's
   text step (white 13px text on the brand blue would be 2.5 : 1). */
.maker-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--border-warm);
}
.maker-seg label { position: relative; cursor: pointer; }
.maker-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.maker-seg span {
  display: block;
  min-width: 3.5rem;
  padding: 6px var(--sp-4);   /* a 36px target */
  border-radius: var(--r-full);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);   /* 4.6 : 1 on the track */
  text-align: center;
  transition: background-color var(--transition), color var(--transition);
}
.maker-seg input:checked + span { background: var(--bg-white); color: var(--ink-sky); box-shadow: 0 0 0 1.5px var(--primary-dark), var(--shadow-sm); }
.maker-seg label:hover input:not(:checked) + span { color: var(--text-main); }
.maker-seg input:focus-visible + span { outline: var(--focus-ring); outline-offset: 1px; }
.maker-seg--sizes span { min-width: 0; padding-inline: var(--sp-3); }
@media (max-width: 360px) { .maker-seg--sizes span { padding-inline: var(--sp-2); } }

.maker-check {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-main);
  cursor: pointer;
}
.maker-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--primary-dark); }
.maker-check[hidden] { display: none; }
.maker-dims {
  flex-basis: 100%;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-quiet);
}

.maker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.maker-save { padding-inline: var(--sp-4); font-size: var(--fs-body); }
.maker-save svg { width: 1.125em; height: 1.125em; flex-shrink: 0; }
.maker-save[aria-disabled="true"] { opacity: 0.6; cursor: progress; transform: none; }
.maker-nowrap { white-space: nowrap; }
.btn-outline.maker-save { background: var(--bg-white); }
@media (max-width: 360px) { .maker-actions { grid-template-columns: 1fr; } }
.maker-status {
  min-height: var(--lh-caption);
  margin-top: calc(var(--sp-2) * -1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-quiet);
  overflow-wrap: anywhere;
}


/* =====================================================================
   4. CHOICES — tabs over a grid of radio tiles
   ===================================================================== */
.maker-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--border-warm);
}
.maker-tabs { display: flex; gap: var(--sp-6); }
.maker-tab {
  position: relative;
  padding: var(--sp-3) 0;
  border: 0;
  background: none;
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  color: var(--text-light);
  cursor: pointer;
}
.maker-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: var(--r-full);
  background: transparent;
}
.maker-tab[aria-selected="true"] { color: var(--text-main); }
.maker-tab[aria-selected="true"]::after { background: var(--primary-dark); }
.maker-tab:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (max-width: 360px) { .maker-tabs { gap: var(--sp-4); } }
.maker-tab:hover { color: var(--text-main); }

.maker-panel { display: flex; flex-direction: column; gap: var(--sp-5); }
.maker-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.maker-next { align-self: flex-end; cursor: pointer; }
.maker-panel[hidden] { display: none; }
.maker-hint {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-light);
}
.maker-group-title {
  padding: 0;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-bold);
}
.maker-group-title .font-en { margin-left: var(--sp-1); color: var(--ink-quiet); font-weight: var(--fw-regular); }
.maker-lock {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-cream);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-main);
}
.maker-lock[hidden] { display: none; }

.maker-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 520px) {
  .maker-tiles { grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--sp-2); }
}

.maker-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
  background: var(--bg-white);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.maker-tile:hover { border-color: var(--primary); }
.maker-tile-input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.maker-tile-art {
  display: block;
  height: 5.5rem;
  overflow: hidden;   /* .rabbit lets a drawing overflow; a tile must not */
  border-radius: calc(var(--r-md) - 4px);
  background: #FFF8E6;
}
.maker-tiles--face .maker-tile-art { height: 4.5rem; }
.maker-tiles--head .maker-tile-art { height: 5rem; }
.maker-tile-art .maker-art { width: 100%; height: 100%; max-width: none; }
.maker-tile-name {
  padding: 0 var(--sp-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  text-align: center;
  word-break: auto-phrase;
}
/* The tier, as the site's amber pill under the name — never on Mimi. */
.maker-tile-tier { align-self: center; padding-inline: var(--sp-2); }
/* Chosen: the blue ring and a tick on the tile's corner, off the picture. */
.maker-tile:has(.maker-tile-input:checked) {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 1px var(--primary-dark);
}
.maker-tile:has(.maker-tile-input:checked)::after {
  content: '';
  position: absolute;
  top: -7px;
  left: -7px;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--bg-white);
  box-sizing: content-box;
  border-radius: var(--r-full);
  background: var(--primary-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
}
.maker-tile:has(.maker-tile-input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* A face the chosen body cannot take (its effect comes out of the face). */
.maker-tile:has(.maker-tile-input:disabled) { opacity: 0.4; cursor: not-allowed; }
.maker-tile:has(.maker-tile-input:disabled):hover { border-color: var(--border-warm); }
.maker-tile-input:disabled { cursor: not-allowed; }


/* =====================================================================
   5. USES — what the chosen parts are for, and their limits
   ===================================================================== */
.maker-uses { gap: var(--sp-3); }
.maker-uses .card-title { margin: 0; }
.maker-reset {
  flex-shrink: 0;
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ja);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-sky);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.maker-uses-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.maker-uses-list div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: var(--sp-3); }
.maker-uses-list dt {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-bold);
}
.maker-uses-list dd {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-light);
}
@media (max-width: 520px) { .maker-uses-list div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.maker-tier {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(245, 158, 11, 0.12);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--ink-amber);
}
.maker-tier ul { margin: 0; padding-left: 1.2em; }
.maker-tier li + li { margin-top: var(--sp-1); }