/* monogram-maker (RT-FUN-092) — tool styles. Card system in share-card.css. */

.mm-tool { display: flex; flex-direction: column; gap: 16px; }
.mm-input {
    font: inherit; font-size: 1.15rem; padding: 12px 14px; border: 1.5px solid var(--border, #ebebeb);
    border-radius: 10px; background: var(--card-bg, #fff); color: var(--t1, #1a1814);
}
.mm-input:focus-visible { outline: 3px solid var(--rt-accent, #e8622a); outline-offset: 1px; border-color: var(--rt-accent, #e8622a); }
.mm-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.mm-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--t2, #6b6760); }
.mm-field select { font: inherit; font-weight: 500; padding: 9px 12px; border: 1.5px solid var(--border, #ebebeb); border-radius: 8px; background: var(--card-bg, #fff); color: var(--t1, #1a1814); min-width: 140px; }
.mm-empty { color: var(--t2, #6b6760); text-align: center; padding: 26px 10px; margin: 0; }
.mm-stage { background: #0c1827; border-radius: 16px; }

/* Card (1080×1350 coords) */
.mm-card { align-items: center; text-align: center; justify-content: center; }
.mm-card .sc-eyebrow { font-size: 26px; letter-spacing: 10px; }

.mm-mono {
    font-family: var(--sc-font-serif, 'IBM Plex Serif', Georgia, serif);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 460px; height: 460px; margin: 40px auto; box-sizing: border-box;
    font-size: 220px; font-weight: 700; line-height: 1;
}
.mm-ring { border: 10px solid var(--mm-accent); border-radius: 50%; font-size: 190px; }
.mm-solid { border-radius: 50%; font-size: 190px; }
.mm-serif { width: auto; height: auto; border-top: 6px solid var(--mm-accent); border-bottom: 6px solid var(--mm-accent); padding: 24px 40px; font-size: 230px; }
.mm-diamond { border: 10px solid var(--mm-accent); transform: rotate(45deg); border-radius: 24px; width: 380px; height: 380px; }
.mm-diamond > * { transform: rotate(-45deg); }

/* 3-letter stacked monogram (serif style with 3 initials): middle larger */
.mm-mono .mm-side { font-size: .62em; opacity: .9; align-self: center; }
.mm-mono .mm-mid { font-size: 1em; }

.mm-card-name { font-family: var(--sc-font-serif, serif); font-size: 56px; font-weight: 600; margin: 8px 0 0; letter-spacing: 1px; }