/* ai-image-aspect-ratio — style.css (RT-AI-019). Tokens only. */
#iar { display: flex; flex-direction: column; gap: 1rem; }

.iar-block { display: flex; flex-direction: column; gap: .4rem; }
.iar-label { font-size: .8rem; font-weight: 600; color: var(--rt-ink-soft, #2A3340); }

.iar-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.iar-preset {
  min-height: 38px; padding: .35rem .8rem; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--rt-border, #d8dce2); border-radius: 999px;
  background: var(--rt-card, #fff); color: var(--rt-ink-soft, #2A3340); cursor: pointer;
}
.iar-preset:hover { border-color: var(--rt-accent, #e8622a); color: var(--rt-accent, #e8622a); }
.iar-preset.is-active {
  background: var(--rt-accent, #e8622a); border-color: var(--rt-accent, #e8622a); color: #fff;
}
.iar-preset:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }

.iar-custom { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.iar-num {
  width: 84px; min-height: 44px; padding: .5rem .6rem; font-size: 16px; text-align: center;
  border: 1px solid var(--rt-border, #d8dce2); border-radius: 8px;
  background: var(--rt-card, #fff); color: var(--rt-ink, #14213d); font-family: inherit;
}
.iar-num:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }
.iar-colon { font-size: 1.1rem; font-weight: 700; color: var(--rt-ink-soft, #2A3340); }

.iar-controls { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 560px) { .iar-controls { grid-template-columns: 1fr 1fr; } }
.iar-select {
  width: 100%; min-height: 44px; padding: .5rem .65rem; font-size: 16px;
  border: 1px solid var(--rt-border, #d8dce2); border-radius: 8px;
  background: var(--rt-card, #fff); color: var(--rt-ink, #14213d); font-family: inherit;
}
.iar-select:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }

.iar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 560px) { .iar-grid { grid-template-columns: repeat(5, 1fr); } }
.iar-stat {
  display: flex; flex-direction: column; gap: .15rem; padding: .65rem .55rem;
  border: 1px solid var(--rt-border, #d8dce2); border-radius: 10px; background: var(--rt-card, #fff); text-align: center;
}
.iar-stat--hero { background: var(--rt-result-bg, #14213d); border-color: var(--rt-result-bg, #14213d); }
.iar-stat-val { font-size: 1.35rem; font-weight: 700; color: var(--rt-ink, #14213d); line-height: 1.1; word-break: break-all; }
.iar-stat--hero .iar-stat-val { color: var(--rt-result-ink, #fff); }
.iar-stat-label { font-size: .72rem; font-weight: 600; color: var(--rt-ink-soft, #2A3340); }
.iar-stat--hero .iar-stat-label { color: var(--rt-result-ink, #fff); }

.iar-out-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.iar-out-title { font-size: .8rem; font-weight: 600; color: var(--rt-ink-soft, #2A3340); }
.iar-copy {
  min-height: 40px; padding: .4rem .9rem; border: 1px solid var(--rt-border, #d8dce2);
  border-radius: 8px; background: var(--rt-accent, #e8622a); color: #fff; font-weight: 600; cursor: pointer;
}
.iar-copy:hover { filter: brightness(1.05); }
.iar-copy:disabled { opacity: .5; cursor: not-allowed; }
.iar-copy:focus-visible { outline: 2px solid var(--rt-ink, #14213d); outline-offset: 2px; }

.iar-fineprint { font-size: .74rem; color: var(--rt-ink-mute, #6b6760); margin: 0; }
.iar-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }