/*
 * Plain CSS that must survive regardless of the Tailwind browser build:
 * the tooltip node, table behaviour, and the admin side menu. Written as real
 * CSS (not utilities) so nothing can purge or race it.
 */
.mm-tip {
    position: fixed;
    z-index: 9999;
    max-width: 22rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    background: #0f2b2a;
    color: #f8fafc;
    font-size: 0.75rem;
    line-height: 1.2rem;
    white-space: pre-line;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.24);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    display: none;
}

.mm-table { width: 100%; table-layout: fixed; }
.mm-table td, .mm-table th { white-space: nowrap; }
/*
 * The first column carries the name or title on nearly every table here, so it
 * wraps. Without this the row cannot shrink and the region scrolls sideways;
 * tables must FIT rather than scroll. Numeric, date and action cells stay on
 * one line because a wrapped price reads worse than a narrow one.
 */
.mm-table td:first-child, .mm-table th:first-child { white-space: normal; }
.mm-table td.mm-nowrap, .mm-table th.mm-nowrap { white-space: nowrap; }
/*
 * Every cell clips. Without this, a cell holding a badge or a button kept
 * white-space:nowrap but had no overflow guard, so long tag lists and long
 * names spilled straight out of the fixed-layout table. Only plain text
 * cells get the ellipsis; cells holding controls just clip.
 */
.mm-table td, .mm-table th { overflow: hidden; }
.mm-table td:not(:has(button, form, input, select, .mm-badge)),
.mm-table th:not(:has(button, form, input, select, .mm-badge)) { text-overflow: ellipsis; }
.mm-table th.w-10, .mm-table td.w-10 { width: 4rem; }
.mm-table th.text-right:last-child, .mm-table td.text-right:last-child { width: 12rem; }

/* Integrated thin scrollbar for scroll areas. */
.mm-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.mm-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.mm-scroll::-webkit-scrollbar-track { background: transparent; }
.mm-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
.mm-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* Admin section shell: sticky left menu beside the page body. */
.settings-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings-aside { position: sticky; top: 5rem; }
@media (max-width: 900px) {
    .settings-shell { grid-template-columns: 1fr; }
    .settings-aside { position: static; }
}
.st-menu { display: flex; flex-direction: column; gap: 0.15rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.st-group { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; padding: 0.65rem 0.6rem 0.25rem; }
.st-group:first-child { padding-top: 0.25rem; }
.st-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 0.55rem; font-size: 0.875rem; font-weight: 500; color: #475569; text-decoration: none; transition: background 0.15s, color 0.15s; }
.st-item:hover { background: #f1f5f9; color: #0f172a; }
.st-item.is-active { background: #0d9488; color: #fff; font-weight: 600; }
.st-item svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.st-badge { margin-left: auto; font-size: 0.625rem; font-weight: 700; background: #c8a45c; color: #0f2b2a; border-radius: 9999px; padding: 0.05rem 0.45rem; line-height: 1.5; }

/*
 * Home hero background. Real CSS rather than utilities so it renders
 * identically whether or not the Tailwind browser build has finished, and
 * so a municipality with no photography still gets an intentional hero.
 * Both layers sit behind the content via -z-10 on the elements themselves.
 */
.site-hero-wash {
    /* A cleaner, brighter scholarly teal: the brand teal leads instead of
       near-black, with one soft lighter-teal glow top-right and a deeper pool
       bottom-left for depth. Reads confident rather than muddy. */
    background:
        radial-gradient(115% 130% at 88% -12%, #2dd4bf 0%, rgba(35, 114, 180, 0) 46%),
        radial-gradient(100% 120% at 0% 108%, #115e59 0%, rgba(10, 58, 99, 0) 52%),
        linear-gradient(150deg, #115e59 0%, #0d9488 58%, #0d8276 100%);
}

/*
 * Campus skyline. Two silhouette layers anchored to the bottom of the hero: a
 * faint distant row and a brighter detailed front row that carries the campus
 * landmarks (a central hall with a bell tower and a pennant, flanked by
 * plain buildings). White fill at low opacity reads as a lit campus against the
 * teal wash, which is the single clearest "this is a school" cue when a
 * school has supplied no hero photograph. Both tile horizontally so the
 * skyline fills any viewport width, and both fade out upward with a mask so
 * the buildings sit on the ground rather than floating.
 *
 * base64 data URIs keep it self-contained (no asset request) and side-step
 * the URL-escaping traps of inline SVG in CSS.
 */
.site-hero-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 100%);
    mask-image: linear-gradient(to top, #000 40%, transparent 100%);
}
.site-hero-skyline--back {
    height: 200px;
    background-size: 760px 165px;
    opacity: 0.08;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAwJyBoZWlnaHQ9JzI2MCcgdmlld0JveD0nMCAwIDEyMDAgMjYwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48ZyBmaWxsPScjZmZmZmZmJz48cmVjdCB4PScwJyB5PSc3MCcgd2lkdGg9JzEyMCcgaGVpZ2h0PScxOTAnLz48cmVjdCB4PScxNTAnIHk9JzEyMCcgd2lkdGg9JzkwJyBoZWlnaHQ9JzE0MCcvPjxyZWN0IHg9JzMwMCcgeT0nNjAnIHdpZHRoPSc3MCcgaGVpZ2h0PScyMDAnLz48cmVjdCB4PSc0MjAnIHk9JzExMCcgd2lkdGg9JzExMCcgaGVpZ2h0PScxNTAnLz48cmVjdCB4PSc1NjAnIHk9JzE1MCcgd2lkdGg9JzgwJyBoZWlnaHQ9JzExMCcvPjxyZWN0IHg9JzcwMCcgeT0nOTAnIHdpZHRoPScxMzAnIGhlaWdodD0nMTcwJy8+PHJlY3QgeD0nODgwJyB5PScxMzAnIHdpZHRoPSc3MCcgaGVpZ2h0PScxMzAnLz48cmVjdCB4PSc5ODAnIHk9JzY2JyB3aWR0aD0nMTAwJyBoZWlnaHQ9JzE5NCcvPjxyZWN0IHg9JzExMjAnIHk9JzEyMCcgd2lkdGg9JzgwJyBoZWlnaHQ9JzE0MCcvPjwvZz48L3N2Zz4=");
}
.site-hero-skyline--front {
    height: 175px;
    background-size: 940px 203px;
    opacity: 0.15;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAwJyBoZWlnaHQ9JzI2MCcgdmlld0JveD0nMCAwIDEyMDAgMjYwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48ZyBmaWxsPScjZmZmZmZmJz48cmVjdCB4PScwJyB5PScxNTAnIHdpZHRoPSc2NCcgaGVpZ2h0PScxMTAnLz48cmVjdCB4PSc2NCcgeT0nMTIwJyB3aWR0aD0nNDQnIGhlaWdodD0nMTQwJy8+PHJlY3QgeD0nMTA4JyB5PScxNzgnIHdpZHRoPSc1NCcgaGVpZ2h0PSc4MicvPjxyZWN0IHg9JzE2MicgeT0nOTYnIHdpZHRoPSc3MicgaGVpZ2h0PScxNjQnLz48cmVjdCB4PScyNDAnIHk9JzEzOCcgd2lkdGg9JzU4JyBoZWlnaHQ9JzEyMicvPjxyZWN0IHg9JzI5OCcgeT0nMTY0JyB3aWR0aD0nNDAnIGhlaWdodD0nOTYnLz48cmVjdCB4PSc0MzAnIHk9JzE1MCcgd2lkdGg9JzYwJyBoZWlnaHQ9JzExMCcvPjxyZWN0IHg9JzQ5MCcgeT0nMTIwJyB3aWR0aD0nNDAnIGhlaWdodD0nMTQwJy8+PHJlY3QgeD0nNTQ4JyB5PScxMzInIHdpZHRoPScxNzAnIGhlaWdodD0nMTI4Jy8+PHBhdGggZD0nTTU0MCAxMzIgTDYzMyA5MiBMNzI2IDEzMiB6Jy8+PHJlY3QgeD0nNjIwJyB5PSc1OCcgd2lkdGg9JzI2JyBoZWlnaHQ9JzQwJy8+PHBhdGggZD0nTTYxNCA1OCBMNjMzIDM4IEw2NTIgNTggeicvPjxyZWN0IHg9JzYzMScgeT0nMTYnIHdpZHRoPSczJyBoZWlnaHQ9JzI0Jy8+PHBhdGggZD0nTTYzNCAxOCBMNjY0IDI2IEw2MzQgMzQgeicgZmlsbD0nI2M4YTQ1YycvPjxyZWN0IHg9JzcyNCcgeT0nMTQwJyB3aWR0aD0nNTInIGhlaWdodD0nMTIwJy8+PHJlY3QgeD0nODAwJyB5PScxNDAnIHdpZHRoPSc3MCcgaGVpZ2h0PScxMjAnLz48cmVjdCB4PSc4NzAnIHk9JzExMCcgd2lkdGg9JzUwJyBoZWlnaHQ9JzE1MCcvPjxyZWN0IHg9JzkyMCcgeT0nMTY4JyB3aWR0aD0nNjQnIGhlaWdodD0nOTInLz48cmVjdCB4PSc5ODQnIHk9JzEzMicgd2lkdGg9JzQ2JyBoZWlnaHQ9JzEyOCcvPjxyZWN0IHg9JzEwMzAnIHk9JzE1MCcgd2lkdGg9JzcwJyBoZWlnaHQ9JzExMCcvPjxyZWN0IHg9JzExMDAnIHk9JzEyMCcgd2lkdGg9JzUyJyBoZWlnaHQ9JzE0MCcvPjxyZWN0IHg9JzExNTInIHk9JzE2MCcgd2lkdGg9JzQ4JyBoZWlnaHQ9JzEwMCcvPjwvZz48L3N2Zz4K");
}

@media (prefers-reduced-motion: no-preference) {
    .site-hero form input:focus {
        transition: box-shadow 150ms ease;
    }
}

/*
 * Interior page banner. Same family as .site-hero-wash but shallower and
 * lighter, so inner pages read as the same site without competing with the
 * home hero.
 */
.site-pagehead-wash {
    background:
        radial-gradient(100% 140% at 0% 0%, #0d8276 0%, rgba(13, 67, 114, 0) 60%),
        linear-gradient(120deg, #115e59 0%, #0f766e 60%, #0d8276 100%);
}

/*
 * Footer. Deepest field on the site so it reads as the base of the page.
 */
.site-footer-wash {
    background:
        radial-gradient(90% 120% at 100% 0%, #0f766e 0%, rgba(10, 53, 90, 0) 55%),
        linear-gradient(180deg, #0f2b2a 0%, #042f2e 100%);
}

/*
 * Safety net for horizontal page scroll. A grid or flex child defaults to
 * min-width:auto, so a wide descendant (a min-w table, a long token) sizes the
 * track to the content and the PAGE scrolls sideways instead of the region.
 * Allowing scroll containers to shrink keeps the overflow where it belongs.
 * The page body must never scroll horizontally.
 */
.vx-scroll,
.mm-scroll,
[class*="overflow-x-auto"] {
    min-width: 0;
    max-width: 100%;
}

/* ==========================================================================
 * Template Manager
 * --------------------------------------------------------------------------
 * Plain CSS rather than Tailwind utilities: the browser Tailwind build only
 * emits classes it finds in the DOM, and the editor's gutter needs metrics
 * (line-height, tab size, font metrics) that must match the textarea EXACTLY
 * or the numbers drift away from the lines they label. Expressing that once,
 * here, is the only way to keep the two in lockstep.
 * ========================================================================== */
.mm-code,
.mm-code-area,
.mm-gutter {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    tab-size: 4;
}

.mm-editor {
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.mm-editor-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .75rem;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    min-width: 0;
}

.mm-editor-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.mm-editor-file {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-editor-stat {
    font-size: .6875rem;
    color: #94a3b8;
    white-space: nowrap;
}

.mm-editor-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .6875rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 9999px;
    white-space: nowrap;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-editor-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 9999px;
    flex: 0 0 auto;
    background: #64748b;
}

.mm-editor-status[data-state="idle"]     { background: #334155; color: #cbd5e1; }
.mm-editor-status[data-state="checking"] { background: #134e4a; color: #bfdbfe; }
.mm-editor-status[data-state="checking"] .mm-editor-dot { background: #60a5fa; }
.mm-editor-status[data-state="ok"]       { background: #064e3b; color: #a7f3d0; }
.mm-editor-status[data-state="ok"] .mm-editor-dot { background: #34d399; }
.mm-editor-status[data-state="error"]    { background: #4c0519; color: #fecdd3; }
.mm-editor-status[data-state="error"] .mm-editor-dot { background: #fb7185; }

.mm-editor-body {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.mm-gutter {
    flex: 0 0 auto;
    width: 3.25rem;
    padding: .75rem .5rem .75rem 0;
    text-align: right;
    color: #475569;
    background: #042f2e;
    border-right: 1px solid #1e293b;
    overflow: hidden;
    white-space: pre;
    user-select: none;
}

.mm-code-area {
    flex: 1 1 auto;
    min-width: 0;
    height: 32rem;
    padding: .75rem .9rem;
    border: 0;
    outline: none;
    resize: vertical;
    color: #e2e8f0;
    background: #0f172a;
    white-space: pre;
    overflow: auto;
    caret-color: #38bdf8;
}

.mm-code-area:focus {
    box-shadow: inset 0 0 0 2px rgba(56, 189, 248, .35);
}

/* Inline code chip in the Blade reference. */
.mm-chip {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    padding: .1rem .4rem;
    border-radius: .35rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Available Variables reference. Clickable chips insert a snippet into the
 * editor at the cursor. Kept as a plain button so it works without Alpine.
 * ------------------------------------------------------------------------ */
.mm-insert {
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.mm-insert:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.mm-insert:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}
.mm-insert.copied {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

/* --------------------------------------------------------------------------
 * Version diff. A grid, not a table, so the two line-number columns stay
 * aligned while the text column is the only thing that can scroll.
 * ------------------------------------------------------------------------ */
.mm-diff {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    background: #ffffff;
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
}

.mm-diff-row {
    display: grid;
    grid-template-columns: 3rem 3rem 1.25rem minmax(0, 1fr);
    align-items: start;
    border-bottom: 1px solid #f1f5f9;
}

.mm-diff-num {
    padding: .1rem .5rem;
    text-align: right;
    color: #94a3b8;
    user-select: none;
    font-size: 11px;
}

.mm-diff-sign {
    text-align: center;
    color: #64748b;
    user-select: none;
}

.mm-diff-text {
    padding: .1rem .5rem;
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 0;
    color: #334155;
}

.mm-diff-add    { background: #ecfdf5; }
.mm-diff-add .mm-diff-text  { color: #065f46; }
.mm-diff-add .mm-diff-sign  { color: #10b981; }
.mm-diff-remove { background: #fff1f2; }
.mm-diff-remove .mm-diff-text { color: #9f1239; }
.mm-diff-remove .mm-diff-sign { color: #f43f5e; }

/* ==========================================================================
 * Theme Manager live preview
 * --------------------------------------------------------------------------
 * Every colour, font and metric comes from a custom property set by
 * public/js/themes.js on the container, so a keystroke is one style write.
 * ========================================================================== */
.mm-swatch {
    width: 2.5rem;
    height: 2.25rem;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: none;
    cursor: pointer;
}

.mm-range {
    accent-color: var(--color-brand-600, #0d8276);
    height: 1.5rem;
}

.mm-theme-preview {
    --tp-brand: #0d9488;
    --tp-brand-soft: #ccfbf1;
    --tp-brand-dark: #0f766e;
    --tp-accent: #c8a45c;
    --tp-chrome: #0f2b2a;
    --tp-chrome-soft: #14403c;
    --tp-font: system-ui, sans-serif;
    --tp-font-display: Georgia, serif;
    --tp-scale: 1;
    --tp-space: 1;
    --tp-radius: .75rem;
    --tp-radius-sm: .5rem;
    font-family: var(--tp-font);
    background: #f8fafc;
    min-width: 0;
    overflow: hidden;
}

.mm-tp-chrome {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: calc(.6rem * var(--tp-space)) calc(.85rem * var(--tp-space));
    background: var(--tp-chrome);
    color: #fff;
    min-width: 0;
}

.mm-tp-mark {
    font-family: var(--tp-font-display);
    font-size: calc(.9rem * var(--tp-scale));
    font-weight: 600;
    color: var(--tp-accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-tp-sub {
    font-size: calc(.6rem * var(--tp-scale));
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
    white-space: nowrap;
}

.mm-tp-hero {
    display: flex;
    flex-direction: column;
    gap: calc(.35rem * var(--tp-space));
    padding: calc(1.1rem * var(--tp-space)) calc(.85rem * var(--tp-space));
    background: linear-gradient(120deg, var(--tp-chrome) 0%, var(--tp-chrome-soft) 55%, var(--tp-brand) 100%);
    color: #fff;
}

.mm-tp-eyebrow {
    font-size: calc(.6rem * var(--tp-scale));
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tp-accent);
}

.mm-tp-title {
    font-family: var(--tp-font-display);
    font-size: calc(1.1rem * var(--tp-scale));
    line-height: 1.2;
}

.mm-tp-rule {
    width: 2.5rem;
    height: 3px;
    border-radius: 9999px;
    background: var(--tp-accent);
}

.mm-tp-body {
    display: flex;
    flex-direction: column;
    gap: calc(.75rem * var(--tp-space));
    padding: calc(.85rem * var(--tp-space));
}

.mm-tp-card {
    display: flex;
    flex-direction: column;
    gap: calc(.4rem * var(--tp-space));
    padding: calc(.75rem * var(--tp-space));
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--tp-radius);
    min-width: 0;
}

.mm-tp-cardtitle {
    font-size: calc(.8rem * var(--tp-scale));
    font-weight: 600;
    color: #0f172a;
}

.mm-tp-text {
    font-size: calc(.72rem * var(--tp-scale));
    line-height: 1.55;
    color: #475569;
}

.mm-tp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(.4rem * var(--tp-space));
    margin-top: calc(.15rem * var(--tp-space));
}

.mm-tp-btn,
.mm-tp-btn-ghost {
    font-size: calc(.7rem * var(--tp-scale));
    font-weight: 500;
    padding: calc(.35rem * var(--tp-space)) calc(.7rem * var(--tp-space));
    border-radius: var(--tp-radius-sm);
    white-space: nowrap;
}

.mm-tp-btn {
    background: var(--tp-brand);
    color: #fff;
}

.mm-tp-btn-ghost {
    background: var(--tp-brand-soft);
    color: var(--tp-brand-dark);
}

.mm-tp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
}

.mm-tp-chip {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--tp-radius-sm);
    border: 1px solid rgba(15, 23, 42, .08);
    flex: 0 0 auto;
}

.mm-tp-footer {
    padding: calc(.65rem * var(--tp-space)) calc(.85rem * var(--tp-space));
    background: var(--tp-chrome);
    color: rgba(255, 255, 255, .65);
    font-size: calc(.65rem * var(--tp-scale));
}