/* Email + SMS Templates (/panel/email-templates, /panel/sms-templates) —
   page-scoped bridge additions for both sibling template-management pages.

   SMS Templates consumes fi-eds-header / fi-eds-panelcard / fi-eds-stage* /
   fi-eds-badge from the shared bridge as-is; everything under "SMS" below is
   only what this page adds on top of those primitives: the template-key
   chip, inline placeholder/source chips, the locked-wording caveat line, the
   two-column card layout (rail vs. editor), the plain textarea (hand-rolled,
   not a Filament form field, so it never picks up the fi-input-wrp treatment
   eds-filament-theme.css ships), and the action row. Namespaced .smt__* so
   it never collides with another page's classes.

   Email Templates' .etm__* block below was moved here from eds-panel.css
   (Workflow B: page-scoped CSS belongs in eds-pages/<unit>.css, not the
   shared bridge file) — same rules, plus the mobile scroll-affordance fix
   on .etm__frame. Kept verbatim otherwise: same markup order, same copy. */

/* ── SMS Templates ──────────────────────────────────────────────────── */

.fi-eds.fi-eds-u17-sms { max-width: 1040px; }

.smt__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The card fills --cream2; chips need to sit on a --paper well or they read
   as bare text (cream2-on-cream2 has no contrast against the card behind it). */
.smt__key {
    font: 500 12px ui-monospace, Menlo, Consolas, monospace;
    color: var(--ink2); background: var(--paper); border: 1px solid var(--line);
    border-radius: 6px; padding: 2px 7px; overflow-wrap: anywhere;
}

.smt__facts { display: flex; flex-direction: column; gap: 6px; }

.smt__desc { margin: 0; font: 400 12.5px/1.6 var(--sans); color: var(--ink2); }

.smt__code {
    font: 450 12px ui-monospace, Menlo, Consolas, monospace;
    background: var(--psoft); color: var(--purple7); padding: 1.5px 6px; border-radius: 6px;
}

.smt__caveat { margin: 0; font: 400 12.5px/1.6 var(--sans); color: var(--ink2); }
.smt__caveat strong { font-weight: 600; color: var(--warn-ink); }

/* .fi-eds-badge--neutral is cream2-on-cream2 by default (fine on a --paper
   card); this page's cards are --cream2, so it needs its own well here. Kept
   scoped to .smt__meta, not .fi-eds-panelcard, so it never leaks to other
   pages using the shared badge primitive on a --paper card. */
.smt__meta .fi-eds-badge--neutral { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }

/* --warning is bg-only (no ring), so against --cream2 it had no container
   edge while its two neighbours (--brand, and --neutral above) do. Same
   hairline idiom as .etm__note--warn's border below. */
.smt__meta .fi-eds-badge--warning { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn-ink) 20%, transparent); }

/* Two-column card: key/badges/facts in a fixed-width rail, textarea +
   actions in the remaining space — so the card's width is actually used
   instead of stranding the textarea against a few hundred px of dead cream.
   Mobile-first: stacked by default, side-by-side once there's room for both
   a real rail and a real editor column. */
.smt__cols { display: flex; flex-direction: column; gap: 16px; }
.smt__rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.smt__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

@media (min-width: 760px) {
    .smt__cols { flex-direction: row; align-items: flex-start; gap: 24px; }
    .smt__rail { flex: 0 0 300px; }
    .smt__body { flex: 1 1 0%; }
}

/* The wrapper Filament themes (.fi-input-wrp) is only present around real
   form-component fields; this textarea is a plain wire:model element, so the
   ring/radius/surface are declared directly here instead. */
.smt__textarea {
    display: block; width: 100%; max-width: 96ch; margin: 0; padding: 10px 12px;
    background: var(--paper); border: 0; border-radius: 10px; resize: vertical;
    box-shadow: 0 0 0 1px var(--lineS);
    font: 400 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--ink);
    transition: box-shadow 150ms var(--fi-eds-ease);
}
.smt__textarea:hover { box-shadow: 0 0 0 1px var(--ink3); }
.smt__textarea:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--purple), var(--eds-focus-ring); }

@media (max-width: 640px) {
    /* 16px floor stops iOS Safari's zoom-on-focus (same as .ans / u12). */
    .smt__textarea { min-height: 160px; font-size: 16px; }
}

.smt__override { margin: 0; font: 400 12px/1.6 var(--sans); color: var(--ink3); }

.smt__actions { display: flex; gap: 8px; }

.smt__link { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }

/* ── Email Templates ─────────────────────────────────────────────────── */

.etm { display: grid; gap: 24px; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); align-items: start; }
@media (max-width: 63.9375rem) { .etm { grid-template-columns: minmax(0, 1fr); } }

.etm__nav { display: flex; flex-direction: column; gap: 24px; }
.etm__group { display: flex; flex-direction: column; gap: 8px; }
.etm__grouplabel { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.etm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.etm__item {
    display: block; width: 100%; text-align: left; cursor: pointer;
    border: 0; background: transparent; border-radius: 10px; padding: 8px 12px;
    font: 450 13px/1.4 var(--sans); color: var(--ink2);
    transition: background-color 150ms var(--fi-eds-ease), color 150ms var(--fi-eds-ease);
}
.etm__item:hover { background: var(--cream2); color: var(--ink); }
.etm__item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--purple); }
.etm__item.is-active { background: var(--psoft); color: var(--purple7); font-weight: 500; }

.etm__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.etm__card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--fi-eds-shadow); display: flex; flex-direction: column; gap: 4px; }
.etm__title { font: 430 18px/1.25 var(--ser); letter-spacing: -.01em; color: var(--ink); }
.etm__desc { font: 400 13px/1.5 var(--sans); color: var(--ink2); }
.etm__meta { font: 400 12px/1.6 var(--sans); color: var(--ink3); }
.etm__meta strong { font-weight: 600; color: var(--ink2); }
.etm__meta code { font: 450 12px ui-monospace, Menlo, Consolas, monospace; background: var(--cream2); color: var(--purple7); padding: 1.5px 6px; border-radius: 6px; }
.etm__label { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.etm__subject { font: 500 14px/1.45 var(--sans); color: var(--ink); }

.etm__note { border-radius: 14px; padding: 14px 16px; font: 400 13px/1.55 var(--sans); display: flex; flex-direction: column; gap: 6px; }
.etm__note--warn { background: var(--warn-surface); color: var(--warn-ink); border: 1px solid color-mix(in srgb, var(--warn-ink) 20%, transparent); }
.etm__note--err { background: var(--err-surface); color: var(--err-ink); border: 1px solid color-mix(in srgb, var(--err-ink) 20%, transparent); }
.etm__note strong { font-weight: 600; }
.etm__note code { font: 450 12px ui-monospace, Menlo, Consolas, monospace; background: rgba(26, 23, 20, 0.06); padding: 1.5px 6px; border-radius: 6px; overflow-wrap: anywhere; }

.etm__frame { width: 100%; height: 70vh; display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }

/* Wrapper around the iframe: on mobile the srcdoc email body is routinely
   wider than the viewport (fixed-width HTML-email tables), so instead of
   silently clipping it we widen the frame past its container and let this
   wrapper scroll horizontally, with a persistent inset shadow on its trailing
   edge as the "there's more" affordance (the shadow is on the scroll
   container itself, so it stays put while the content scrolls under it). */
.etm__framewrap { position: relative; }
@media (max-width: 640px) {
    .etm__framewrap {
        overflow-x: auto;
        border-radius: 14px;
        -webkit-overflow-scrolling: touch;
        box-shadow: inset -18px 0 14px -14px rgba(40, 33, 20, 0.16);
    }
    .etm__frame { width: max(100%, 50rem); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .smt__textarea, .etm__item { transition: none; }
}