/* Oualator - Ambigram Generator page styles. All selectors are prefixed amb- so they can't clash with the site theme. */

body { margin: 0; }

.amb-page {
  --amb-ink: #1f2937;
  --amb-muted: #4b5563;
  --amb-line: #e5e7eb;
  --amb-accent: #2563eb;
  --amb-accent-dark: #1d4ed8;
  --amb-paper: #faf8f4;
  max-width: 1152px;
  margin: 0 auto;
  padding: 24px 16px 8px;
  color: var(--amb-muted);
  line-height: 1.7;
  box-sizing: border-box;
}
.amb-page *, .amb-page *::before, .amb-page *::after { box-sizing: border-box; }
.amb-page a { color: var(--amb-accent); }
.amb-page a:hover { color: var(--amb-accent-dark); }
.amb-page p { margin: 0 0 1em; }
.amb-page h1, .amb-page h2, .amb-page h3, .amb-page h4 { color: var(--amb-ink); line-height: 1.25; margin: 0; }
.amb-page ul, .amb-page ol { margin: 0 0 1em; padding-left: 1.4em; }
.amb-page li { margin-bottom: .4em; }
.amb-page code { background: #eef0f3; border-radius: 4px; padding: 1px 6px; font-size: .88em; }

/* breadcrumb */
.amb-crumbs { font-size: 14px; margin-bottom: 20px; }
.amb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.amb-crumbs li { display: flex; align-items: center; margin: 0; }
.amb-crumbs li + li::before { content: '›'; margin: 0 8px; color: #9ca3af; }
.amb-crumbs a { text-decoration: none; color: var(--amb-muted); }
.amb-crumbs a:hover { color: var(--amb-accent); }
.amb-crumbs [aria-current] { color: var(--amb-ink); font-weight: 600; }

/* heading */
.amb-h1 { text-align: center; font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px !important; }
.amb-meta { text-align: center; font-size: 14px; color: #6b7280; margin-bottom: 28px !important; }

/* cards */
.amb-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(17, 24, 39, .08); padding: 28px; margin-bottom: 28px; }
.amb-card > h2 { font-size: 1.65rem; margin-bottom: 16px; }
.amb-card > h2.amb-center, .amb-center { text-align: center; }
.amb-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.amb-lead { font-size: 1.08rem; }
.amb-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 16px 18px; margin: 20px 0 0; }
.amb-note strong { color: #92400e; }
.amb-note p:last-child { margin-bottom: 0; }

.amb-grid2, .amb-grid3 { display: grid; gap: 16px; }
.amb-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amb-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.amb-tile { border-radius: 10px; padding: 18px; border: 1px solid transparent; }
.amb-tile h3, .amb-tile h4 { font-size: 1.05rem; margin-bottom: 6px; }
.amb-tile p:last-child { margin-bottom: 0; }
.amb-blue   { background: #eff6ff; border-color: #dbeafe; } .amb-blue h3, .amb-blue h4 { color: #1d4ed8; }
.amb-green  { background: #f0fdf4; border-color: #dcfce7; } .amb-green h3, .amb-green h4 { color: #15803d; }
.amb-purple { background: #faf5ff; border-color: #f3e8ff; } .amb-purple h3, .amb-purple h4 { color: #7e22ce; }
.amb-pink   { background: #fdf2f8; border-color: #fce7f3; } .amb-pink h3, .amb-pink h4 { color: #be185d; }
.amb-yellow { background: #fefce8; border-color: #fef9c3; } .amb-yellow h3, .amb-yellow h4 { color: #a16207; }
.amb-gray   { background: #f9fafb; border-color: #e5e7eb; }
.amb-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: 2px 10px; margin-bottom: 8px; background: #dcfce7; color: #166534; }
.amb-badge.is-soon { background: #e5e7eb; color: #4b5563; }

/* ---------- tool ---------- */
.amb-tool-card { padding: 0; overflow: hidden; }
.amb-tool-head { padding: 28px 28px 0; }
.amb-tool { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "controls preview"; gap: 0; }
.amb-controls { grid-area: controls; padding: 24px 28px 28px; border-right: 1px solid var(--amb-line); background: #fbfbfc; }
.amb-controls h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; margin: 22px 0 10px; }
.amb-controls h3:first-child { margin-top: 0; }
.amb-field { margin-bottom: 14px; }
.amb-field > label, .amb-label { display: block; font-size: 14px; font-weight: 600; color: var(--amb-ink); margin-bottom: 6px; }
.amb-field .amb-val { float: right; font-weight: 500; color: #6b7280; font-variant-numeric: tabular-nums; }
.amb-text {
  width: 100%; font: inherit; font-size: 1.15rem; padding: 11px 14px; border: 1.5px solid #d1d5db; border-radius: 10px; background: #fff; color: #111827;
}
.amb-text:focus { outline: none; border-color: var(--amb-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.amb-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--amb-ink); margin: 6px 0 14px; cursor: pointer; line-height: 1.45; }
.amb-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--amb-accent); flex: none; }
.amb-controls input[type=range] { width: 100%; accent-color: var(--amb-accent); }
.amb-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amb-colors input[type=color] { width: 100%; height: 40px; padding: 2px; border: 1.5px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; }
.amb-select { width: 100%; font: inherit; font-size: 14px; padding: 9px 10px; border: 1.5px solid #d1d5db; border-radius: 8px; background: #fff; }
.amb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.amb-chip {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 99px; border: 1.5px solid #d1d5db; background: #fff; color: var(--amb-ink); cursor: pointer;
}
.amb-chip:hover { border-color: var(--amb-accent); color: var(--amb-accent); }
.amb-theme { display: inline-flex; align-items: center; gap: 7px; }
.amb-theme i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .25); display: inline-block; }

.amb-btn {
  font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; color: var(--amb-ink); cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
.amb-btn:hover:not(:disabled) { border-color: #9ca3af; background: #f3f4f6; }
.amb-btn:active:not(:disabled) { transform: translateY(1px); }
.amb-btn:disabled { opacity: .45; cursor: not-allowed; }
.amb-btn-primary { background: var(--amb-accent); border-color: var(--amb-accent); color: #fff; }
.amb-btn-primary:hover:not(:disabled) { background: var(--amb-accent-dark); border-color: var(--amb-accent-dark); }
.amb-btn:focus-visible, .amb-chip:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
.amb-btnrow { display: flex; flex-wrap: wrap; gap: 10px; }
.amb-btnrow .amb-btn { flex: 1 1 130px; }
.amb-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--amb-accent); text-decoration: underline; cursor: pointer; }

/* preview */
.amb-preview { grid-area: preview; padding: 24px 28px 28px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.amb-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.amb-preview-top h3 { margin: 0; }
.amb-checker.is-transparent .amb-stage {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%), linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.amb-stage { border-radius: 12px; border: 1px solid var(--amb-line); background: var(--amb-paper); min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.amb-flip { width: 100%; transition: transform .8s cubic-bezier(.45, 0, .2, 1); transform-origin: 50% 50%; }
.amb-flip.is-rot { transform: rotate(180deg); }
.amb-flip.is-mir { transform: scaleY(-1); }
.amb-check[hidden], .amb-chip[hidden] { display: none; }

/* ambigram type switch */
.amb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: #f3f4f6; border-radius: 12px; margin: 0 0 18px; }
.amb-seg label { position: relative; cursor: pointer; margin: 0; }
.amb-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.amb-seg span { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 9px 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #4b5563; line-height: 1.3; transition: background .15s, color .15s; }
.amb-seg input:checked + span { background: #fff; color: var(--amb-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.amb-seg input:focus-visible + span { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 1px; }
.amb-view { width: 100%; padding: 6px; }
.amb-empty { text-align: center; color: #6b7280; padding: 60px 16px; margin: 0 !important; }
.amb-cap { text-align: center; font-size: 14px; color: #6b7280; margin: 10px 0 0 !important; }
.amb-cap strong { color: var(--amb-ink); letter-spacing: .04em; }
.amb-second { margin-top: 14px; }
.amb-msg { min-height: 1.4em; font-size: 14px; margin: 0 !important; }
.amb-msg.is-warn { color: #b45309; font-weight: 600; }
.amb-msg.is-info { color: #6b7280; }
.amb-pairs { font-size: 13px; color: #6b7280; margin: 0 !important; line-height: 2; }
.amb-pairs code { margin-right: 4px; background: #f3f4f6; }
.amb-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 28px 28px; }

/* ---------- content ---------- */
.amb-steps { counter-reset: s; list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.amb-steps li { counter-increment: s; position: relative; padding: 18px 18px 18px 64px; background: #f9fafb; border: 1px solid var(--amb-line); border-radius: 10px; margin: 0; }
.amb-steps li::before {
  content: counter(s); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--amb-accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.amb-steps strong { display: block; color: var(--amb-ink); margin-bottom: 2px; }
.amb-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.amb-figs figure { margin: 0; }
.amb-figs img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--amb-line); background: #fff; }
.amb-figs figcaption { font-size: 13px; text-align: center; color: #6b7280; margin-top: 6px; }
.amb-type { border-left: 4px solid var(--amb-accent); padding: 4px 0 4px 16px; margin-bottom: 18px; }
.amb-type h3 { margin-bottom: 4px; }
.amb-type p:last-child { margin-bottom: 0; }
.amb-faq details { background: #f9fafb; border: 1px solid var(--amb-line); border-radius: 10px; padding: 0 16px; margin-bottom: 10px; }
.amb-faq summary { cursor: pointer; font-weight: 700; color: var(--amb-ink); padding: 14px 0; list-style-position: outside; }
.amb-faq details[open] summary { border-bottom: 1px solid var(--amb-line); margin-bottom: 12px; }
.amb-faq details p { margin-bottom: 14px; }
.amb-related { display: flex; flex-wrap: wrap; gap: 12px; }
.amb-related a { display: block; padding: 12px 18px; border: 1px solid var(--amb-line); border-radius: 10px; text-decoration: none; font-weight: 600; background: #fff; }
.amb-related a:hover { border-color: var(--amb-accent); }
.amb-spacer { height: 40px; }

/* ---------- responsive ---------- */
@media (min-width: 961px) {
  .amb-preview { position: sticky; top: 12px; align-self: start; }
}
@media (max-width: 960px) {
  .amb-tool { grid-template-columns: 1fr; grid-template-areas: "preview" "controls"; }
  /* single column: preview first, controls underneath */
  .amb-controls { border-right: 0; border-top: 1px solid var(--amb-line); }
}
@media (max-width: 720px) {
  .amb-grid2, .amb-grid3, .amb-features, .amb-steps, .amb-figs { grid-template-columns: 1fr; }
  .amb-card { padding: 20px 16px; }
  .amb-tool-head { padding: 20px 16px 0; }
  .amb-controls, .amb-preview { padding-left: 16px; padding-right: 16px; }
  .amb-features { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .amb-flip { transition: none; }
}

/* letter style switch */
.amb-seg3 { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 6px; }
.amb-sty-gothic { font-family: "UnifrakturMaguntia", "Old English Text MT", Georgia, serif; font-size: 15px !important; letter-spacing: .02em; }
.amb-sty-brush { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 16px !important; }
.amb-style-note { font-size: 13px; color: #6b7280; margin: 0 0 16px !important; min-height: 1em; }
.amb-field[hidden] { display: none; }

/* while a style's letters download, keep the old drawing visible but dimmed */
.amb-checker .amb-view svg { transition: opacity .15s; }
.amb-checker.is-loading .amb-view svg { opacity: .35; }
.amb-checker.is-loading .amb-stage { position: relative; }
.amb-checker.is-loading .amb-stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 3px solid rgba(37, 99, 235, .25); border-top-color: var(--amb-accent); border-radius: 50%; animation: amb-spin .7s linear infinite;
}
@keyframes amb-spin { to { transform: rotate(360deg); } }