/* Public agency page (/public/agency/{slug}).
   Light, official-page theme. Standalone stylesheet: this page does not
   mount the admin shell or the EchoCAD Night tokens. */

:root {
    --ap-bg: #efece3;
    --ap-card: #ffffff;
    --ap-card-hover: #faf8f2;
    --ap-navy: #0e1633;
    --ap-border: #d9d4c3;
    --ap-border-row: #ece8dc;
    --ap-border-input: #c9c4b2;
    --ap-ink: #1b1a15;
    --ap-body: #454236;
    --ap-muted: #8b887a;
    --ap-red: #b01e2b;
    --ap-red-hover: #d02537;
    --ap-accent-navy: #22336f;
    --ap-head-2: #93a0cd;
    --ap-head-3: #c3cdec;
    --ap-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --ap-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ap-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
    margin: 0;
    background: var(--ap-bg);
    color: var(--ap-ink);
    font-family: var(--ap-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.ap-container {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
}

/* ---- 1. Stripe ---------------------------------------------------------- */

.ap-stripe { display: flex; height: 4px; }
.ap-stripe span { flex: 1; }
.ap-stripe .s-red { background: var(--ap-red); }
.ap-stripe .s-cream { background: var(--ap-bg); }
.ap-stripe .s-navy { background: var(--ap-navy); }

/* ---- 2. Official banner -------------------------------------------------- */

.ap-banner {
    background: #e6e2d6;
    border-bottom: 1px solid var(--ap-border);
    font-size: 12.5px;
    color: var(--ap-body);
}
.ap-banner .ap-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.ap-banner a { color: var(--ap-red); text-decoration: none; font-weight: 800; }
.ap-banner a:hover { color: var(--ap-red-hover); }

/* ---- 3. Agency header ---------------------------------------------------- */

.ap-header { background: var(--ap-navy); color: #fff; }
.ap-header .ap-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: clamp(24px, 4vw, 40px);
    padding-bottom: clamp(24px, 4vw, 40px);
}
.ap-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ap-badge {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    border: 2px solid #c9a35a;
    object-fit: cover;
    background: #fff;
}
.ap-badge--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ap-head-3);
    font-family: var(--ap-serif);
    font-weight: 900;
    font-size: 26px;
    letter-spacing: 0.04em;
}
.ap-header-eyebrow {
    font-family: var(--ap-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ap-head-2);
    margin-bottom: 4px;
}
.ap-name {
    font-family: var(--ap-serif);
    font-weight: 900;
    letter-spacing: -0.015em;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.1;
    margin: 0;
}
.ap-header-addr { font-size: 14px; color: var(--ap-head-3); margin-top: 6px; }

.ap-phones {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    overflow: hidden;
}
.ap-phone {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    min-width: 0;
}
.ap-phone + .ap-phone { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.ap-phone .l {
    display: block;
    font-family: var(--ap-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ap-head-2);
    margin-bottom: 2px;
}
.ap-phone .n { display: block; font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.ap-phone:hover .n { color: var(--ap-head-3); }

/* ---- Main sections ------------------------------------------------------- */

.ap-main {
    display: grid;
    gap: clamp(36px, 5vw, 64px);
    padding-top: clamp(36px, 5vw, 64px);
    padding-bottom: clamp(36px, 5vw, 64px);
}

.ap-eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ap-red);
    margin-bottom: 10px;
}
.ap-h2 {
    font-family: var(--ap-serif);
    font-weight: 900;
    letter-spacing: -0.015em;
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.15;
    margin: 0 0 10px;
}
.ap-body-copy { font-size: 16.5px; line-height: 1.7; color: var(--ap-body); margin: 0; white-space: pre-line; }
.ap-note { font-size: 14.5px; color: var(--ap-body); margin: 0 0 16px; }

.ap-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px 48px;
    align-items: start;
}

/* ---- 4. Volume counts ---------------------------------------------------- */

.ap-counts {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* always 2x2, never 3+1 */
    column-gap: 32px;
    border-bottom: 1px solid var(--ap-border);
}
.ap-count { border-top: 1px solid var(--ap-border); padding: 14px 0 16px; }
.ap-count .n {
    font-family: var(--ap-serif);
    font-weight: 900;
    font-size: 38px;
    line-height: 1.1;
    color: var(--ap-ink);
}
.ap-count .l {
    font-family: var(--ap-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ap-muted);
    margin-top: 4px;
}

/* ---- 5. Blotter ----------------------------------------------------------- */

.ap-blotter-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 18px;
}
.ap-blotter-head .ap-h2 { margin-bottom: 0; }

.ap-toggle {
    display: inline-flex;
    border: 1px solid var(--ap-ink);
    border-radius: 4px;
    overflow: hidden;
}
.ap-toggle button {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ap-ink);
    font-family: var(--ap-sans);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.ap-toggle button + button { border-left: 1px solid var(--ap-ink); }
.ap-toggle button.on { background: var(--ap-ink); color: #fff; }
.ap-toggle .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ap-red);
    animation: ap-blink 1.2s steps(1) infinite;
}
.ap-toggle button.on .dot { background: #ff5c68; }
@keyframes ap-blink { 50% { opacity: 0.15; } }

.ap-card {
    background: var(--ap-card);
    border: 1px solid var(--ap-border);
    border-radius: 6px;
    overflow: hidden;
}

.ap-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 14px 20px;
}
.ap-row + .ap-row { border-top: 1px solid var(--ap-border-row); }
.ap-row:hover { background: var(--ap-card-hover); }

.ap-row-time { flex: 0 0 78px; }
.ap-row-time .t { font-family: var(--ap-mono); font-size: 14px; font-weight: 700; }
.ap-row-time .d {
    font-family: var(--ap-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ap-muted);
}
.ap-row-tl {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}
.ap-row-tl .t { font-weight: 700; }
.ap-row-tl .loc { color: var(--ap-body); }

.ap-tag {
    margin-left: auto;
    font-family: var(--ap-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid;
    border-radius: 3px;
    padding: 3px 8px;
    white-space: nowrap;
}
.ap-tag--open { background: #fdf1f2; color: #b01e2b; border-color: #e7a5ab; }
.ap-tag--dispatched { background: #fdf6e3; color: #8a5a00; border-color: #e3c67a; }
.ap-tag--onscene { background: #eef1fa; color: #22336f; border-color: #b6c0e3; }
.ap-tag--closed { background: #f3f1ea; color: #6b6858; border-color: #d9d4c3; }

.ap-empty { text-align: center; color: var(--ap-muted); padding: 36px 20px; }

.ap-card-foot {
    background: var(--ap-card-hover);
    border-top: 1px solid var(--ap-border-row);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-size: 12.5px;
    color: var(--ap-muted);
}
.ap-card-foot .stamp {
    font-family: var(--ap-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---- 6. Top call types ----------------------------------------------------- */

.ap-type-row { border-top: 1px solid var(--ap-border-row); padding: 12px 0; }
.ap-type-row:last-child { border-bottom: 1px solid var(--ap-border-row); }
.ap-type-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ap-type-line .name { font-size: 14.5px; font-weight: 600; }
.ap-type-line .count { font-family: var(--ap-mono); font-size: 14px; font-weight: 700; }
.ap-type-bar { height: 5px; background: var(--ap-border-row); margin-top: 8px; }
.ap-type-bar span { display: block; height: 100%; background: var(--ap-accent-navy); }

/* ---- 7. Forms -------------------------------------------------------------- */

.ap-forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: start;
}
.ap-form-card {
    background: var(--ap-card);
    border: 1px solid var(--ap-border);
    border-radius: 6px;
    padding: clamp(20px, 3vw, 28px);
}
.ap-form-card .ap-h2 { font-size: clamp(20px, 2.2vw, 24px); }

.ap-field { margin-bottom: 14px; }
.ap-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.ap-field input,
.ap-field textarea {
    width: 100%;
    background: var(--ap-card-hover);
    border: 1px solid var(--ap-border-input);
    border-radius: 4px;
    font-family: var(--ap-sans);
    font-size: 15px;
    color: var(--ap-ink);
    padding: 9px 12px;
    resize: vertical;
}
.ap-field input:focus,
.ap-field textarea:focus {
    outline: none;
    border-color: var(--ap-accent-navy);
    box-shadow: 0 0 0 3px rgba(34, 51, 111, 0.14);
}
.ap-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ap-btn {
    appearance: none;
    font-family: var(--ap-sans);
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
}
.ap-btn--primary { background: var(--ap-red); border: 1.5px solid var(--ap-red); color: #fff; }
.ap-btn--primary:hover { background: var(--ap-red-hover); border-color: var(--ap-red-hover); }
.ap-btn--outline { background: transparent; border: 1.5px solid var(--ap-ink); color: var(--ap-ink); }
.ap-btn--outline:hover { background: var(--ap-ink); color: #fff; }
.ap-btn[disabled] { opacity: 0.55; cursor: default; }

.ap-form-msg { font-size: 13.5px; margin: 10px 0 0; min-height: 1em; }
.ap-form-msg.ok { color: #2e6b34; }
.ap-form-msg.err { color: var(--ap-red); }

/* ---- 8. Footer -------------------------------------------------------------- */

.ap-footer { background: var(--ap-navy); color: var(--ap-head-2); font-size: 13px; }
.ap-footer .ap-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 32px;
    padding-top: 22px;
    padding-bottom: 22px;
}
.ap-footer a { color: #fff; text-decoration: none; font-weight: 700; }
.ap-footer a:hover { color: var(--ap-head-3); }

/* ---- Unavailable state ------------------------------------------------------ */

.ap-unavailable { text-align: center; padding: 96px 20px; }
.ap-unavailable h1 {
    font-family: var(--ap-serif);
    font-weight: 900;
    letter-spacing: -0.015em;
    font-size: 30px;
    margin: 0 0 10px;
}
.ap-unavailable p { color: var(--ap-body); margin: 0; }

/* ---- Responsive ------------------------------------------------------------- */

@media (max-width: 650px) {
    .ap-header .ap-container { display: block; }
    .ap-phones { margin-top: 20px; width: 100%; }
    .ap-phone { flex: 1; text-align: center; }
}

@media (max-width: 360px) {
    /* Time + status on the first line, type and location beneath. */
    .ap-row { align-items: center; }
    .ap-row-time { order: 1; display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; }
    .ap-tag { order: 2; }
    .ap-row-tl { order: 3; flex-basis: 100%; }
    .ap-phone { padding: 10px 12px; }
    .ap-phone .n { font-size: 15px; }
}