/* Iron Realms — free tools. Layered on site.css; no external requests. */

/* THE HIDDEN ATTRIBUTE HAS TO WIN. Every interactive control on these pages
 * ships in the HTML with `hidden` set and is revealed by script, so that a
 * reader without JavaScript sees prose and worked examples instead of four
 * buttons that do nothing. The browser's own rule for that is
 * `[hidden] { display: none }` — at author level zero — which ANY display
 * declaration in this file silently outranks. Without the line below, a
 * .forge-row or a .gen-actions with `display: flex` stays on screen while
 * still reporting itself as hidden, which is the worst of both: dead controls
 * for a crawler, and a division-tincture picker that never goes away when the
 * division is plain. !important because the whole point is to beat every
 * layout rule in this file, present and future. */
[hidden] { display: none !important; }

.tool-kicker {
  font-family: var(--display); color: var(--gold-bright); letter-spacing: 2px;
  text-transform: uppercase; font-size: 12px; margin: 0 0 6px;
}
.tool-h1 { font-family: var(--fancy); color: var(--gold); font-size: clamp(30px, 5.4vw, 46px); margin: 0 0 10px; line-height: 1.1; }
.tool-prose { max-width: 760px; }
.tool-prose h2 { font-family: var(--fancy); color: var(--gold); font-size: clamp(22px, 3.4vw, 30px); margin: 34px 0 10px; }
.tool-prose h3 { font-family: var(--display); color: var(--gold-bright); font-size: 19px; margin: 24px 0 6px; }
.tool-status { color: var(--muted); font-size: 13px; min-height: 1.3em; margin: 6px 0 0; }

/* ── The forge ───────────────────────────────────────────────────────────── */

.forge { margin: 8px 0 26px; }
.forge-stage { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.crest-frame { flex: 0 0 auto; }
.crest {
  width: min(360px, 78vw); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(70% 70% at 50% 35%, rgba(255,255,255,.05), rgba(0,0,0,0));
  border-radius: 18px;
}
.crest svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 26px rgba(0,0,0,.55)); }
.blazon {
  font-family: var(--display); color: var(--gold-bright); font-size: 15px;
  text-align: center; margin: 10px 0 0; max-width: min(360px, 78vw); line-height: 1.45;
}
.forge-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 240px; flex: 1 1 240px; }
.forge-controls {
  margin: 26px 0 0; padding: 18px 20px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.forge-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid rgba(227,193,104,.10); }
.forge-row:last-child { border-bottom: 0; }
.forge-label {
  font-family: var(--display); color: var(--muted); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; flex: 0 0 132px;
}
.chip-row, .swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }

.tool-chip {
  font: inherit; font-size: 13.5px; cursor: pointer; color: var(--text);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; transition: border-color .15s, background .15s;
}
.tool-chip:hover { border-color: var(--gold); }
.tool-chip.on { border-color: var(--gold); background: rgba(227,193,104,.16); color: var(--gold-bright); }
.tool-chip:focus-visible, .tincture:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tincture {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; padding: 0;
  background: var(--t); border: 2px solid rgba(255,255,255,.18); position: relative;
}
.tincture:hover { border-color: var(--gold); }
.tincture.on { border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(227,193,104,.45); }

.crest-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; margin: 18px 0 8px; }
.crest-gallery figure { margin: 0; text-align: center; }
.crest-gallery svg { width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.crest-gallery figcaption { color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.4; }

.vocab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }
.vocab-list { list-style: none; padding: 0; margin: 6px 0 14px; }
.vocab-list li { margin: 5px 0; font-size: 14.5px; }
.vocab-list code { color: var(--muted); font-size: 12.5px; }
.vocab-dot { display: inline-block; width: 13px; height: 13px; border-radius: 4px; background: var(--t); border: 1px solid rgba(255,255,255,.25); vertical-align: -1px; }

/* ── Name generators ─────────────────────────────────────────────────────── */

.gen { margin: 8px 0 26px; }
.gen-panel { padding: 20px 22px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); max-width: 760px; }
.gen-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.gen-list li { margin: 0; }
.gen-name {
  display: block; font-family: var(--display); color: var(--gold-bright); font-size: 17px;
  padding: 7px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent;
}
.gen-name:hover { background: rgba(227,193,104,.10); border-color: var(--line); }
.gen-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gen-buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gen-hint { color: var(--muted); font-size: 12.5px; margin: 0; }

.sample-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 18px; margin: 16px 0; }
.sample { color: var(--text); font-size: 14.5px; padding: 3px 0; }

/* ── Quiz ────────────────────────────────────────────────────────────────── */

.quiz { margin: 8px 0 26px; }
.quiz-panel { padding: 24px 24px 26px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); max-width: 700px; }
.quiz-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 0 0 16px; }
.quiz-bar { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .25s ease; }
.quiz-count { color: var(--muted); font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 10px; }
.quiz-prompt { font-family: var(--fancy); font-size: clamp(19px, 3vw, 24px); color: #fff; margin: 0 0 18px; line-height: 1.35; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); padding: 13px 17px; transition: border-color .15s, background .15s, transform .1s;
}
.quiz-option:hover { border-color: var(--gold); background: rgba(227,193,104,.06); transform: translateY(-1px); }
.quiz-option.picked { border-color: var(--gold); background: rgba(227,193,104,.12); }
.quiz-back { margin-top: 16px; }
.quiz-outcome-name { font-family: var(--fancy); color: var(--gold); font-size: clamp(26px, 5vw, 38px); margin: 0 0 4px; }
.quiz-outcome-line { font-style: italic; color: var(--gold-bright); margin: 0 0 14px; }
.quiz-dragon-name { font-size: 17px; margin: 0 0 10px; }
.quiz-dragon-label { color: var(--muted); }
.quiz-outcome-body { margin: 16px 0; }
.quiz-verdict-head { font-family: var(--display); color: var(--gold); font-size: 17px; margin: 22px 0 6px; }
.quiz-verdict { border-left: 3px solid var(--gold); padding: 4px 0 4px 16px; margin: 0 0 18px; color: var(--text); }
.quiz-axes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.quiz-axis { display: flex; align-items: center; gap: 12px; }
.quiz-axis-name { flex: 0 0 64px; color: var(--muted); font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.quiz-axis-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.quiz-axis-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.quiz-result-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

.outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 18px 0; }
.outcome { padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.outcome h3 { margin: 0 0 4px; }
.outcome-line { font-style: italic; color: var(--gold-bright); margin: 0 0 8px; font-size: 14.5px; }
.outcome p { font-size: 14.5px; }
.question-list li { margin: 12px 0; }
.question-list ul { margin: 6px 0 0; color: var(--muted); }
.question-list ul li { margin: 3px 0; font-size: 14.5px; }

/* ── Shared bits ─────────────────────────────────────────────────────────── */

.tool-grid { margin: 8px 0 30px; }
.tool-card { display: block; }
.db-table { overflow-x: auto; margin: 18px 0; }
.db-table table { min-width: 420px; margin: 0; border-collapse: collapse; }
.db-table caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 6px; }
.db-table th, .db-table td { text-align: left; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.db-table th { color: var(--gold); font-family: var(--display); font-size: 13.5px; }

@media (max-width: 620px) {
  .forge-label { flex: 0 0 100%; }
  .forge-stage { gap: 18px; }
}

/* ── TOUCH TARGETS ───────────────────────────────────────────────────────────
 *
 * Apple's guidance is a minimum tappable area of 44x44pt, and it is not an
 * arbitrary round number — it is roughly the contact patch of an adult
 * fingertip. Below it, the tap that misses is not the user's fault.
 *
 * Measured against that, the controls on these pages come up short by default:
 *
 *     .btn / .tool-btn          38px      .tool-chip               33px
 *     .quiz-option              47px ✓    .tincture                34x34
 *     .gen-name                 34px
 *
 * KEYED TO THE INPUT, NOT THE VIEWPORT. "pointer: coarse" asks the real
 * question — is this being driven by a finger — where "max-width" asks a proxy
 * that is wrong at both ends: a 1024px tablet is a finger, and a small desktop
 * window is a mouse. A mouse is precise and the desktop layout is deliberately
 * left exactly as it is.
 */
@media (pointer: coarse) {
  .tool-btn,
  .tool-chip,
  .gen-name,
  .quiz-option { min-height: 44px; }

  .tool-chip { display: inline-flex; align-items: center; }
  .gen-name { display: flex; align-items: center; }

  /* THE ONE THAT HAS TO STAY SMALL. Eight tinctures in a row at 44px wide
   * plus gaps is 400px, which wraps to three lines on a phone and turns a
   * palette — a thing you read at a glance — into a list. So the BOX stays
   * 34px and the TARGET grows underneath it: a transparent pseudo-element,
   * centred and absolutely positioned, extends the hit area to the full 44px
   * without moving a single pixel of layout. This is the standard way to
   * satisfy the guideline when the visual design genuinely needs to be
   * smaller than the finger using it.
   */
  .tincture::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* Purely a target. It must never paint. */
    background: transparent;
  }
  /* The swatch row's own gap has to grow with the hit areas, or two adjacent
     44px targets overlap and the edge of one steals taps meant for the next. */
  .swatch-row { gap: 12px; }
}