/* The character creator (src/dialogs/creator.rs, creator.js): a panel (a bottom sheet on narrow screens)
   over the live preview drawn in the canvas. The overlay lets the canvas take drags; only the
   panel and the stage's controls take the pointer. */
#creator {
  font: 16px/1.5 var(--face); color: var(--paper);
  position: fixed; inset: 0; z-index: 10; display: none; pointer-events: none;
  .panel {
    position: absolute; top: 16px; left: 16px; width: 392px; max-height: calc(100% - 32px); margin: 0; pointer-events: auto;
    display: flex; flex-direction: column; overflow: hidden;
    backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%);
  }
  /* The header: the steps (only those this shinobi takes), the one you are at lit and underlined.
     The step's title is for screen readers (and focus) only, but on the roster, which has no
     steps: there it stands where they would, lit and underlined as the step you are at. */
  header { padding: 16px 22px 0; margin-bottom: 16px; }
  h1:focus { outline: none; }
  h1:not(.sr-only) {
    position: relative; margin: 0; padding: 4px 0 13px; border-bottom: 1px solid var(--line);
    font: 800 23px/1.1 var(--face); letter-spacing: 0.01em; color: var(--paper-bright);
    &::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: linear-gradient(90deg, var(--accent-hi), var(--accent) 70%, transparent); box-shadow: 0 0 10px var(--accent-glow); }
  }
  .progress {
    display: flex; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line);
    &[hidden] { display: none; }
    li { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 11px;
      padding: 4px 0 13px; color: var(--faint); transition: color 0.2s; }
    li[hidden] { display: none; }
    li + li:not([hidden]) { padding-left: 14px; }
    li + li:not([hidden])::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 17px;
      width: 1px; background: var(--line); }
    .num { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 28px; height: 28px;
      font: 700 12.5px/1 var(--face); font-variant-numeric: tabular-nums; }
    .num::before { content: ""; position: absolute; inset: 5px; z-index: -1; rotate: 45deg;
      border: 1px solid currentColor; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; }
    .num:empty { display: none; }
    .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font: 800 23px/1.1 var(--face); letter-spacing: 0.01em; }
    li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: linear-gradient(90deg, var(--accent-hi), var(--accent) 70%, transparent); opacity: 0;
      transform: scaleX(0.4); transform-origin: left; transition: opacity 0.25s, transform 0.35s cubic-bezier(.2, .7, .2, 1); }
    li + li:not([hidden])::after { left: 14px; }
    li[aria-current=step] { color: var(--paper-bright); }
    li[aria-current=step]::after { opacity: 1; transform: none; box-shadow: 0 0 10px var(--accent-glow); }
    li[aria-current=step] .num { color: var(--on-accent); }
    li[aria-current=step] .num::before { background: var(--accent-hi); border-color: var(--accent-hi);
      box-shadow: 0 0 10px var(--accent-glow); }
    li.done { color: var(--muted); }
    li.done .num { color: var(--ink); }
    li.done .num::before { background: var(--muted); border-color: var(--muted); }
  }
  .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 22px 4px; }
  fieldset {
    &:last-child { margin-bottom: 0; }
    & { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
  }
  legend {
    display: flex; width: 100%; align-items: baseline; justify-content: space-between; padding: 0;
    margin-bottom: 9px;
    .aside { font-size: 13.5px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none;
      color: var(--faint); }
  }
  .note { margin: -2px 0 10px; font-size: 14.5px; }

  /* Selectable cards: a radio input inside a label (keyboard and screen readers get a radio group).
     The pick gets an accent rim and wash and a diamond on its corner. */
  .card {
    position: relative; display: block; cursor: pointer; border-radius: 2px; --press: 0.975;
    background: transparent; border: 1px solid var(--line);
    input { position: absolute; opacity: 0; pointer-events: none; }
    &:hover { border-color: var(--line-strong); background: var(--paper-wash); }
    &:has(input:checked) { border-color: var(--accent-rim); background: var(--accent-wash);
      box-shadow: 0 0 22px -10px var(--accent-glow) inset; }
    &:has(input:focus-visible) { outline: 1px solid var(--accent-hi); outline-offset: 3px; }
    &:has(input:disabled) { cursor: not-allowed; opacity: 0.45; }
    .tick { position: absolute; top: -5px; right: -5px; width: 9px; height: 9px; background: var(--accent-hi);
      box-shadow: 0 0 10px var(--accent-hi); opacity: 0; transform: rotate(45deg) scale(0.4);
      transition: opacity 0.15s, transform 0.15s; }
    &:has(input:checked) .tick { opacity: 1; transform: rotate(45deg); }
  }

  /* A shinobi, a village or a biome: its rune on the left (a shinobi's is its village's), its name
     over what it is. Picked, a village or a biome is rimmed and marked in its land's tone
     (creator.js, EMBLEMS); a shinobi keeps the accent's rim. Either way its rune glows in its
     land's tone. */
  .characters, .towns, .biomes { display: flex; flex-direction: column; gap: 8px; }
  .shinobi, .new, .village, .biome { padding: 9px 12px 10px 9px; display: grid; grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 11px; align-items: center; }
  :is(.shinobi, .new, .village, .biome) > :not(.emblem, input, .tick) { grid-column: 2; }
  .emblem {
    grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 2px; width: 34px; height: 34px; display: grid; place-items: center;
    color: var(--tone, var(--muted)); background: var(--well); border: 1px solid var(--line);
    opacity: 0.7; transition: opacity 0.15s, box-shadow 0.15s, border-color 0.15s;
    svg { width: 22px; height: 22px; }
  }
  .card {
    &:hover .emblem { opacity: 0.9; }
    &:has(input:checked) .emblem { opacity: 1; border-color: var(--tone, var(--line-strong));
      box-shadow: 0 0 16px -4px var(--tone, transparent); }
    &:has(input:checked) .emblem svg { filter: drop-shadow(0 0 5px var(--tone, transparent)); }
  }
  :is(.shinobi, .village, .biome) .top { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 6px; }
  :is(.shinobi, .new, .village, .biome) .name { min-width: 0; font-size: 16px; font-weight: 650; line-height: 20px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shinobi .name { font-size: 18px; line-height: 23px; color: var(--paper-bright); }
  :is(.shinobi, .new, .village) {
    .meta { font-size: 13px; color: var(--muted); line-height: 18px; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; }
  }
  .shinobi .journey { font-style: italic; color: var(--faint); }
  .village {
    .meta .here, .meta.lives { color: var(--paper); }
    .meta.by { font-style: italic; color: var(--faint); }
    .full { flex: none; margin-left: auto; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--danger); }
  }
  .badge { flex: none; padding: 3px 6px 2px 7px; font: 600 10.5px/1.2 var(--face); letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--paper-muted); border: 1px solid var(--line-strong); border-radius: 2px; }
  .biome {
    .count { flex: none; margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .blurb { margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; line-height: 18px; color: var(--muted); }
  }
  :is(.village, .biome):has(input:checked) { border-color: var(--tone, var(--accent-rim)); background: var(--paper-wash);
    box-shadow: none; }
  :is(.village, .biome):has(input:checked) .tick { background: var(--tone, var(--accent-hi)); box-shadow: 0 0 10px var(--tone, var(--accent-hi)); }
  /* Another shinobi: a card left open (dashed), a cross where a village's rune would be, how many
     the account keeps of how many it may under its name. At the cap a note stands in its place. */
  .choose { margin-bottom: 8px; }
  .new {
    width: 100%; border-style: dashed; border-color: var(--line-strong);
    font: inherit; color: var(--paper); text-align: left;
    &[hidden] { display: none; }
    .emblem { grid-row: 1 / span 2; border-style: dashed; color: var(--muted); }
    &:hover .emblem, &:focus-visible .emblem { color: var(--accent-hi); }
    &:focus-visible { outline: 1px solid var(--accent-hi); outline-offset: 3px; }
  }
  .at-cap { margin: 10px 0 0; }

  /* Join or found: the tabs; the biome chips. */
  .tabs { padding: 0 2px; margin: 0 0 14px; }
  .pane[hidden], .step[hidden], .filters[hidden] { display: none; }
  .filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
  .pane fieldset:disabled, .field:has(input:disabled) { opacity: 0.45; }
  /* The new village's name: a field as the sign-in form's, its problem under it. */
  .field {
    margin: 0 0 18px;
    .problem { margin-top: 8px; font-size: 14.5px; }
  }
  /* Body: a segmented well of two. */
  .bodies > label { height: 36px; }

  /* What to choose: hair, mask, outfit. Each tab names its part over what is picked of it. */
  .parts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0 14px;
    button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
      min-width: 0; padding: 4px 2px 9px; text-align: left; }
    .part-name { font: 600 11px/1.2 var(--face); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint);
      transition: color 0.15s; }
    .part-pick { max-width: 100%; font: 500 16px/1.25 var(--face); color: var(--muted); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; transition: color 0.15s; }
    button:hover .part-pick, button[aria-selected=true] .part-pick { color: var(--paper); }
    button[aria-selected=true] .part-name { color: var(--accent-hi); }
    button[aria-selected=true]::after { left: -2px; right: 14px; }
  }
  /* Every part's pane takes the room of the tallest, so the panel holds still between tabs. */
  .part-panes {
    display: grid;
    > .part { grid-area: 1 / 1; min-width: 0; }
    > .part[hidden] { display: block; visibility: hidden; }
  }
  .part fieldset { margin-bottom: 14px; }

  /* Pictures to choose from: each a render of the thing itself, its name over its foot. */
  .tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
  .masks { --cols: 3; }
  .styles { --cols: 4; }
  .tile {
    position: relative; display: block; cursor: pointer; aspect-ratio: var(--ratio, 1 / 1.2); --press: 0.975;
    border-radius: 2px; isolation: isolate; box-shadow: inset 0 0 0 1px var(--line);
    .pic { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 2px;
      background: radial-gradient(120% 90% at 50% 30%, var(--plate-lit), var(--ink) 70%); }
  }
  .styles .tile { --ratio: 1 / 1.9; }
  .tile {
    input { position: absolute; opacity: 0; pointer-events: none; }
    img { display: block; width: 100%; height: 100%; object-fit: cover;
      filter: saturate(0.82) brightness(0.86); transition: filter 0.2s, transform 0.35s cubic-bezier(.2, .7, .2, 1); }
    .pic::after { content: ""; position: absolute; inset: 50% 0 0; pointer-events: none;
      background: linear-gradient(180deg, transparent, var(--veil)); }
    .name { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 8px 7px;
      font: 600 13.5px/1.2 var(--face); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden;
      text-overflow: ellipsis; text-shadow: 0 1px 3px var(--shadow); transition: color 0.15s; }
  }
  .styles .tile .name { padding: 0 4px 7px; font-size: 12.5px; }
  .tile {
    &:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
    &:hover img { filter: saturate(0.95) brightness(1); transform: scale(1.04); }
    &:hover .name { color: var(--paper); }
    &:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent-hi), inset 0 0 24px -6px var(--accent-glow),
      0 0 18px -8px var(--accent-hi); }
    &:has(input:checked) img { filter: none; }
    &:has(input:checked) .name { color: var(--paper); }
    .tick { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; background: var(--accent-hi);
      box-shadow: 0 0 10px var(--accent-hi); opacity: 0; transform: rotate(45deg) scale(0.4); transition: opacity 0.15s, transform 0.15s; }
    &:has(input:checked) .tick { opacity: 1; transform: rotate(45deg); }
    &:has(input:focus-visible) { outline: 1px solid var(--accent-hi); outline-offset: 3px; }
    /* A picture missing (not rendered yet): its name, larger, on the empty tile. */
    &.bare .name { top: 0; display: grid; place-items: center; padding: 8px; white-space: normal; font-size: 14px; }
  }

  /* Colours: a row of diamonds, the one picked ringed; its name in the legend. The swatch is the
     look's own colour (--c, from the catalog): a picture of it, not a token. */
  .colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px 2px; }
  .color {
    position: relative; height: 28px; cursor: pointer; display: grid; place-items: center;
    input { position: absolute; opacity: 0; pointer-events: none; }
    i { width: 17px; height: 17px; transform: rotate(45deg); background: var(--c);
      box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow 0.15s, transform 0.15s; }
    &:hover i { transform: rotate(45deg) scale(1.1); }
    &:has(input:checked) i { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px var(--accent-hi), 0 0 12px var(--accent-hi); }
    &:has(input:focus-visible) { outline: 1px solid var(--accent-hi); outline-offset: 1px; }
  }
  .body { margin-bottom: 14px; }
  .skin { margin-bottom: 10px; }

  footer { padding: 14px 26px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
  &[data-state=busy] #creator-message { display: none; }  /* the button says it */
  footer .actions { flex-wrap: nowrap; gap: 16px; }
  .back {
    flex: none; height: 52px; padding: 0 6px 0 calc(6px + 0.2em);
    &[hidden] { display: none; }
  }
  .submit { flex: 1; min-width: 0; width: 100%; }
  /* On the roster: deleting the shinobi picked, a quiet word under the way in. */
  .delete {
    align-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    &[hidden] { display: none; }
  }

  /* Deleting a shinobi: a confirmation as the graphics change's (menu.css), armed by typing the
     name. The creator lets the pointer through to the canvas; the dialog takes it, as the panel
     does. */
  dialog {
    width: min(480px, calc(100vw - 40px)); padding: 28px 28px 26px 32px; pointer-events: auto;
    &::backdrop { background: var(--veil); }
    h2 { margin: 0 0 14px; font: 700 26px/1.25 var(--face); color: var(--paper-bright); overflow-wrap: anywhere; }
    p { margin: 0 0 22px; color: var(--muted); }
    .field { margin: 0; }
    .actions { margin-top: 24px; }
  }

  /* The stage: the part of the view the panel leaves to the preview. */
  .stage { position: absolute; top: 0; right: 0; bottom: 0; left: 424px; }
  .loading {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 2px;
    font-size: 15px; font-style: italic; color: var(--muted); background: var(--plate); border: 1px solid var(--line);
    opacity: 0; transition: opacity 0.25s;
    .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong);
      border-top-color: var(--accent-hi); animation: spin 0.8s linear infinite; }
  }
  /* The look picked before holds while the next is made ready: say so only if it takes a while. */
  &[data-preview=loading] .loading { opacity: 1; transition-delay: 0.4s; }
  .turn {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); pointer-events: auto;
    display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 2px;
    background: var(--plate-faint); border: 1px solid var(--line);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
    span { padding: 0 8px; white-space: nowrap; }
    button { width: 32px; height: 32px; border: 0; border-radius: 0; cursor: pointer; display: grid;
      place-items: center; color: var(--muted); background: transparent; }
    button:hover { color: var(--accent-hi); background: var(--paper-wash); }
    button:focus-visible { outline: 1px solid var(--accent-hi); outline-offset: 1px; }
    svg { width: 16px; height: 16px; }
    button.framing { width: auto; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 10px;
      margin-left: 4px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted);
      border-left: 1px solid var(--line); }
    button.framing span { padding: 0; }
  }
  .stand-in { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: none;
    font-size: 14.5px; font-style: italic; color: var(--faint); white-space: nowrap; }
  &[data-preview=stand-in] .stand-in { display: block; }

  @media (max-width: 720px) {
    .panel {
      top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: min(60vh, 560px);
      border-bottom: 0; border-left: 0; border-right: 0;
      /* On the bottom sheet the brush edge runs along the top. */
      &::before { top: -1px; bottom: auto; left: 24px; right: 24px; width: auto; height: 4px;
        background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent-hi) 50%, var(--accent) 88%, transparent);
        mask: var(--brush-h) 0 0 / 100% 100% no-repeat; }
    }
    header { padding: 10px 20px 0; margin-bottom: 12px; }
    .progress {
      li { padding-bottom: 10px; }
      .label { font-size: 20px; }
    }
    h1:not(.sr-only) { padding-bottom: 10px; font-size: 20px; }
    .scroll { padding: 2px 20px 0; }
    /* Six masks across: too small for their names (the tab names the one picked). */
    .masks {
      --cols: 6; gap: 6px;
      .tile .name { display: none; }
      .tile .pic::after { content: none; }
    }
    .body { margin-bottom: 10px; }
    .parts { margin-bottom: 10px; }
    .part fieldset { margin-bottom: 10px; }
    .tabs { margin-bottom: 10px; }
    fieldset { margin-bottom: 12px; }
    legend { margin-bottom: 7px; }
    footer { padding: 10px 20px calc(12px + env(safe-area-inset-bottom)); }
    .stage { left: 0; bottom: var(--sheet); }
    .turn { bottom: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .loading .spinner { animation-duration: 2s; }
    *, *::before, *::after { transition: none !important; }
  }
}