/* Snake Pharm Ops in the look of snakepharm.co.za, over Bootstrap 5.3: forest
   green and gold, DM Serif Display headings over DM Sans, pill buttons. The
   design is on the claude.ai design canvas ("Redesign in the website's style"). */

:root {
    --ops-forest: #004B23;
    --ops-forest-dark: #003318;
    --ops-forest-deep: #00260F;
    --ops-gold: #C49A3C;
    --ops-gold-dark: #B58C34;
    --ops-gold-text: #8C6A1C;      /* small gold text on a light ground */
    --ops-gold-light: #D9B45E;     /* gold on forest */
    --ops-mint: #E6F4EA;
    --ops-cream: #EFF5EF;
    --ops-ink: #1A1A1A;
    --ops-muted: #4A5D50;
    --ops-muted-strong: #3F5546;
    --ops-on-forest: #DCEBE0;      /* text on forest */
    --ops-border: #D5E3D8;
    --ops-border-input: #C9D9CD;
    --ops-rule: #E3ECE5;
    --ops-check-border: #E0A800;   /* "Check this": a value the assistant wasn't sure of */
    --ops-check-bg: #FFF8E1;
    --ops-check-pill: #FFF4D6;
    --ops-check-text: #6B4E00;
    --ops-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
    --ops-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ops-rail-width: 248px;

    /* Bootstrap's own. Its components use --bs-body-bg for their white, so the page's green is set on body. */
    --bs-body-font-family: var(--ops-sans);
    --bs-body-color: var(--ops-ink);
    --bs-body-color-rgb: 26, 26, 26;
    --bs-heading-color: var(--ops-forest);
    --bs-secondary-color: var(--ops-muted);
    --bs-secondary-color-rgb: 74, 93, 80;
    --bs-link-color: var(--ops-forest);
    --bs-link-color-rgb: 0, 75, 35;
    --bs-link-hover-color: var(--ops-forest-dark);
    --bs-link-hover-color-rgb: 0, 51, 24;
    --bs-primary: #004B23;
    --bs-primary-rgb: 0, 75, 35;
    --bs-success: #004B23;
    --bs-success-rgb: 0, 75, 35;
    --bs-border-color: var(--ops-border);
    --bs-border-radius: 14px;
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 20px;
    --bs-border-radius-xl: 24px;
    --bs-focus-ring-color: rgba(0, 75, 35, 0.3);
}

body {
    margin: 0;
    background: var(--ops-cream);
    color: var(--ops-ink);
    font-family: var(--ops-sans);
    -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 3px solid var(--ops-forest); outline-offset: 2px; }
.ops-rail :focus-visible, .ops-topbar :focus-visible, .home-hero :focus-visible { outline-color: var(--ops-gold-light); }

/* Type */

h1, h2, h3, .h1, .h2, .h3 { font-family: var(--ops-serif); font-weight: 400; color: var(--ops-forest); letter-spacing: 0; }
h1, .h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); line-height: 1.14; }
h2, .h2 { font-size: clamp(1.625rem, 1.35rem + 1vw, 2rem); line-height: 1.2; }
h3, .h3 { font-size: 1.5rem; line-height: 1.25; }
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--ops-sans); font-weight: 700; color: var(--ops-forest); }
:is(h1, h2, h3, .h1, .h2, .h3):is(.fw-bold, .fw-semibold) { font-weight: 400 !important; }

.ops-eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ops-gold-text);
}
.ops-lede { margin: 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ops-muted); }
.ops-note, .ops-empty, .ops-footnote { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--ops-muted); }

/* Bootstrap, restyled */

.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-width: 2px;
    --bs-btn-border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
}
.btn-lg { --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 999px; min-height: 52px; }
.btn-sm { --bs-btn-padding-x: 0.9rem; --bs-btn-padding-y: 0.3rem; --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: 999px; min-height: 36px; }
.btn svg { flex-shrink: 0; }

.btn-primary, .btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--ops-forest);
    --bs-btn-border-color: var(--ops-forest);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ops-forest-dark);
    --bs-btn-hover-border-color: var(--ops-forest-dark);
    --bs-btn-focus-shadow-rgb: 0, 75, 35;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--ops-forest-deep);
    --bs-btn-active-border-color: var(--ops-forest-deep);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--ops-forest);
    --bs-btn-disabled-border-color: var(--ops-forest);
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--ops-forest);
    --bs-btn-border-color: var(--ops-forest);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--ops-forest);
    --bs-btn-hover-border-color: var(--ops-forest);
    --bs-btn-focus-shadow-rgb: 0, 75, 35;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--ops-forest-dark);
    --bs-btn-active-border-color: var(--ops-forest-dark);
    --bs-btn-disabled-color: var(--ops-forest);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ops-forest);
}
/* The page's one main action, as on the website; dark text, since white on this gold is hard to read */
.btn-gold {
    --bs-btn-color: var(--ops-ink);
    --bs-btn-bg: var(--ops-gold);
    --bs-btn-border-color: var(--ops-gold);
    --bs-btn-hover-color: var(--ops-ink);
    --bs-btn-hover-bg: var(--ops-gold-dark);
    --bs-btn-hover-border-color: var(--ops-gold-dark);
    --bs-btn-focus-shadow-rgb: 196, 154, 60;
    --bs-btn-active-color: var(--ops-ink);
    --bs-btn-active-bg: #A67F2C;
    --bs-btn-active-border-color: #A67F2C;
    --bs-btn-disabled-color: var(--ops-ink);
    --bs-btn-disabled-bg: var(--ops-gold);
    --bs-btn-disabled-border-color: var(--ops-gold);
    font-weight: 700;
}
.btn-outline-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-border-color: rgba(255, 255, 255, 0.7);
    --bs-btn-hover-color: var(--ops-forest);
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
    --bs-btn-active-color: var(--ops-forest);
    --bs-btn-active-bg: var(--ops-mint);
    --bs-btn-active-border-color: var(--ops-mint);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ops-muted-strong);
    --bs-btn-border-color: var(--ops-border-input);
    --bs-btn-hover-color: var(--ops-forest);
    --bs-btn-hover-bg: var(--ops-mint);
    --bs-btn-hover-border-color: var(--ops-border-input);
    --bs-btn-focus-shadow-rgb: 0, 75, 35;
    --bs-btn-active-color: var(--ops-forest);
    --bs-btn-active-bg: var(--ops-mint);
    --bs-btn-active-border-color: var(--ops-forest);
    --bs-btn-disabled-color: var(--ops-muted);
    --bs-btn-disabled-border-color: var(--ops-border-input);
}

.form-control, .form-select {
    min-height: 44px;
    padding: 0.55rem 1rem;
    border-color: var(--ops-border-input);
    border-radius: 14px;
    background-color: #FFFFFF;
    color: var(--ops-ink);
}
textarea.form-control { border-radius: 18px; }
.form-control-sm, .form-select-sm { min-height: 36px; border-radius: 10px; }
.form-control::placeholder { color: #5F7166; }
.form-control:focus, .form-select:focus { border-color: #4C8A62; box-shadow: 0 0 0 0.25rem rgba(0, 75, 35, 0.18); }
.form-label { font-weight: 600; color: var(--ops-muted-strong); }
.form-check-input { border-color: #6E8577; }
.form-check-input:checked { background-color: var(--ops-forest); border-color: var(--ops-forest); }
.form-check-input:focus { border-color: #4C8A62; box-shadow: 0 0 0 0.25rem rgba(0, 75, 35, 0.18); }

.alert { border-radius: 16px; }
.alert-light { --bs-alert-bg: #FFFFFF; --bs-alert-border-color: var(--ops-border); --bs-alert-color: var(--ops-ink); }
.badge { border-radius: 999px; font-weight: 600; padding: 0.4em 0.8em; }
.table { --bs-table-border-color: var(--ops-rule); }
.nav-tabs {
    --bs-nav-tabs-border-color: var(--ops-border);
    --bs-nav-tabs-link-hover-border-color: var(--ops-rule) var(--ops-rule) var(--ops-border);
    --bs-nav-tabs-link-active-color: var(--ops-forest);
    --bs-nav-tabs-link-active-border-color: var(--ops-border) var(--ops-border) #FFFFFF;
}
.dropdown-menu { --bs-dropdown-border-color: var(--ops-border); --bs-dropdown-border-radius: 16px; --bs-dropdown-link-active-bg: var(--ops-forest); }

/* Pages not yet redesigned keep their markup and take the new look from here */
.container_inform, .card {
    background: #FFFFFF;
    border: 1px solid var(--ops-border);
    border-radius: 24px;
    color: var(--ops-ink);
}
.container_inform { max-width: none; margin: 0 0 24px; padding: clamp(20px, 3vw, 32px); box-shadow: none; }

.swal2-popup { font-family: var(--ops-sans); border-radius: 24px; }
.swal2-popup .swal2-title { font-family: var(--ops-serif); font-weight: 400; color: var(--ops-forest); }
.swal2-popup .swal2-styled.swal2-confirm { border-radius: 999px; background-color: var(--ops-forest); }

/* The page's frame: a side rail on a computer; on a phone, a bar at the top and tabs at the bottom */

.ops-skip {
    position: absolute;
    left: 12px;
    top: -64px;
    z-index: 2000;
    padding: 10px 18px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--ops-forest);
    font-weight: 700;
}
.ops-skip:focus { top: 12px; }

.ops-main { min-width: 0; padding: 40px clamp(16px, 4vw, 56px) 56px; }
.ops-main:focus { outline: none; }
.ops-content { max-width: 1120px; }
.ops-plain { min-height: 100vh; }

.ops-brand { display: flex; align-items: center; gap: 12px; min-height: 48px; color: #FFFFFF; text-decoration: none; }
.ops-brand:hover { color: #FFFFFF; }
/* The two snakes make their own ring, so they sit a little in from the white disc's edge */
.ops-brand img { flex-shrink: 0; width: 48px; height: 48px; padding: 5px; border-radius: 50%; background: #FFFFFF; object-fit: contain; }
.ops-brand-text { display: flex; flex-direction: column; gap: 2px; }
.ops-brand-name { font-family: var(--ops-serif); font-size: 22px; line-height: 24px; }
.ops-brand-tag { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; color: var(--ops-gold-light); }

.ops-nav { margin: 0; padding: 0; list-style: none; }
.ops-nav a { display: flex; align-items: center; text-decoration: none; }

.ops-rail {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 28px 18px;
    background: var(--ops-forest);
    color: #FFFFFF;
}
.ops-rail .ops-nav { display: flex; flex-direction: column; gap: 4px; }
.ops-rail .ops-nav a { gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 999px; color: #FFFFFF; font-size: 15px; }
.ops-rail .ops-nav a:hover { background: rgba(255, 255, 255, 0.08); }
.ops-rail .ops-nav a[aria-current] { background: rgba(255, 255, 255, 0.14); font-weight: 600; }
.ops-rail .ops-nav a[aria-current] svg { color: var(--ops-gold-light); }
.ops-rail .ops-nav-short { display: none; }

.ops-user {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    margin-top: auto;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
}
.ops-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--ops-gold);
    color: var(--ops-ink);
    font-weight: 700;
}
.ops-user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-user-name { font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.ops-user-role { font-size: 13px; line-height: 18px; color: #D5E8DA; }
/* Logging out is a form's button (a link would let other sites log people out), looking like the link it was */
.ops-user form { grid-column: 2; justify-self: start; margin: 0; }
.ops-logout { display: flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: #FFFFFF; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.ops-logout:hover { color: var(--ops-gold-light); }

.ops-topbar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px; background: var(--ops-forest); color: #FFFFFF; }
.ops-topbar .ops-brand img { width: 40px; height: 40px; padding: 4px; }
.ops-topbar .ops-brand-name { font-size: 20px; line-height: 22px; }
.ops-topbar .ops-brand-tag { font-size: 11px; line-height: 14px; }
.ops-topbar .dropdown { margin-left: auto; }
.ops-topbar .ops-avatar { width: 44px; height: 44px; }
.ops-back { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; border-radius: 50%; color: #FFFFFF; }
.ops-back:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.ops-topbar-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ops-topbar-titles h1 { margin: 0; overflow: hidden; color: #FFFFFF; font-size: 22px; line-height: 26px; text-overflow: ellipsis; white-space: nowrap; }
.ops-topbar-titles span { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ops-gold-light); }

.ops-tabbar { padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ops-border); background: #FFFFFF; }
.ops-tabbar .ops-nav { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.ops-tabbar .ops-nav a {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: 14px;
    color: var(--ops-muted);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}
.ops-tabbar .ops-nav a[aria-current] { color: var(--ops-forest); font-weight: 700; }
.ops-tabbar .ops-nav a[aria-current] svg { color: var(--ops-forest); }
.ops-tabbar .ops-nav-long { display: none; }

@media (min-width: 992px) {
    .ops-shell { display: grid; grid-template-columns: var(--ops-rail-width) minmax(0, 1fr); min-height: 100vh; }
    .ops-rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    .ops-topbar, .ops-tabbar { display: none; }
}
@media (max-width: 991.98px) {
    .ops-rail { display: none; }
    .ops-topbar { position: sticky; top: 0; z-index: 1020; }
    .ops-tabbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; }
    .ops-main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
    .ops-shell-notabs .ops-main { padding-bottom: 24px; }
}

/* Shared parts of the redesigned pages */

.ops-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.ops-page-titles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ops-page-titles h1 { margin: 0; }
.ops-crumb { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 4px; font-size: 0.9375rem; font-weight: 600; text-decoration: none; }

.ops-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--ops-border); border-radius: 24px; background: #FFFFFF; }
.ops-card-head { display: flex; flex-direction: column; gap: 6px; }
.ops-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 1.625rem; line-height: 2rem; }
.ops-card-soon { border-style: dashed; border-color: #B9CBBE; background: #F7FAF7; }
.ops-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--ops-mint);
    color: var(--ops-forest);
    font-family: var(--ops-sans);
    font-size: 0.875rem;
    font-weight: 700;
}
.ops-list { margin: 0; padding: 0; list-style: none; }
/* A row's button drops below its text when there isn't room for both */
.ops-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--ops-rule); }
.ops-list-text { display: flex; flex: 1 1 180px; flex-direction: column; gap: 2px; min-width: 0; }
.ops-list .btn { flex-shrink: 0; white-space: nowrap; }
.ops-list-title { font-weight: 600; }
.ops-list-meta { font-size: 0.875rem; color: var(--ops-muted); }
.ops-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; font-weight: 600; text-decoration: none; }
.ops-bar { height: 10px; overflow: hidden; border-radius: 999px; background: var(--ops-mint); }
.ops-bar > div { height: 100%; border-radius: 999px; background: var(--ops-forest); transition: width 0.3s ease; }

/* Home */

.home-search { display: flex; flex: 0 1 400px; flex-wrap: wrap; gap: 8px; }
.home-search .form-control { flex: 1 1 220px; min-height: 48px; padding: 0 1.1rem; border-radius: 999px; }
.home-search .btn { min-height: 48px; }

.home-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 28px;
    align-items: center;
    margin-bottom: 28px;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 28px;
    background: var(--ops-forest);
    color: #FFFFFF;
}
.home-hero-text { display: flex; flex-direction: column; gap: 14px; }
.home-hero .ops-eyebrow { color: var(--ops-gold-light); }
.home-hero h2 { margin: 0; color: #FFFFFF; font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.125rem); line-height: 1.18; }
.home-hero-lede { margin: 0; color: var(--ops-on-forest); font-size: 1.0625rem; line-height: 1.6; }
.home-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.home-example { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, 0.08); }
.home-example .ops-eyebrow { margin-bottom: 2px; }
.home-example p { max-width: 85%; padding: 12px 16px; color: var(--ops-ink); font-size: 0.9375rem; line-height: 1.45; }
.home-example .from-vet { align-self: flex-end; border-radius: 18px 18px 4px 18px; background: #FFFFFF; }
.home-example .from-assistant { align-self: flex-start; border-radius: 18px 18px 18px 4px; background: var(--ops-cream); }

@media (max-width: 575.98px) {
    .home-hero-actions .btn { flex: 1 1 100%; }
    .home-example { display: none; }  /* the lists matter more on a phone */
}

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; gap: 20px; margin-bottom: 24px; }
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.home-stat { display: flex; flex-direction: column-reverse; gap: 2px; padding: 12px; border-radius: 16px; background: var(--ops-mint); }
.home-stat dt { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 400; color: var(--ops-muted-strong); }
.home-stat dd { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; color: var(--ops-forest); }

/* Tell the story */

.story-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.story-conversation { display: flex; flex: 3 1 480px; flex-direction: column; gap: 18px; min-width: 0; }
.story-chat { display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 82%; padding: 12px 16px; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.assistant { align-self: flex-start; border-radius: 20px 20px 20px 6px; background: var(--ops-cream); color: var(--ops-ink); }
.bubble.vet { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--ops-forest); color: #FFFFFF; }
.bubble.waiting { color: var(--ops-muted); font-style: italic; }
.story-composer { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ops-rule); }
.story-composer .form-label { margin: 0; font-size: 0.875rem; }
.story-composer textarea { min-height: 96px; padding: 14px 18px; font-size: 1rem; line-height: 1.5; resize: vertical; }
.story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.story-hint { font-size: 0.875rem; line-height: 1.4; color: var(--ops-muted); }

.story-filled { display: flex; flex: 2 1 320px; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; border-radius: 28px; background: var(--ops-mint); }
.story-filled .ops-eyebrow { color: #6B5214; }
.story-filled .ops-bar { background: #FFFFFF; }
.story-filled-head { display: flex; flex-direction: column; gap: 10px; }
.story-filled-title { margin: 0; font-size: 1.625rem; line-height: 2rem; }
.story-next-part { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 0.875rem; line-height: 1.25rem; color: var(--ops-muted-strong); }
.story-next-part .ops-bar { height: 6px; }
.story-fields { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.story-fields > div { display: flex; flex-direction: column; gap: 2px; }
.story-fields dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 400; color: var(--ops-muted-strong); }
.story-fields .story-value { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.story-fields .story-declined { font-weight: 400; font-style: italic; color: var(--ops-muted-strong); }
.story-fields .story-quote { margin: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--ops-muted-strong); overflow-wrap: anywhere; }
.story-check-pill { padding: 1px 8px; border-radius: 999px; background: var(--ops-check-pill); color: var(--ops-check-text); font-size: 0.75rem; font-weight: 700; }
.story-missing { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #C9DDCE; }
.story-missing h3 { margin: 0; font-family: var(--ops-sans); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--ops-muted-strong); }
.story-missing ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.story-missing li { padding: 6px 12px; border-radius: 999px; background: #FFFFFF; font-size: 0.875rem; line-height: 1.25rem; }
.story-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 14px; border-radius: 18px; background: var(--ops-mint); }
.story-strip-progress { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.story-strip-progress span { font-size: 0.875rem; line-height: 1.125rem; font-weight: 600; color: var(--ops-forest); }
.story-strip .ops-bar { height: 8px; background: #FFFFFF; }
.story-privacy { margin: 24px 0 0; max-width: 75ch; }

@media (min-width: 992px) {
    .story-conversation { padding: 24px; border: 1px solid var(--ops-border); border-radius: 28px; background: #FFFFFF; }
    .story-chat { max-height: 58vh; overflow-y: auto; padding-right: 4px; }
    .story-filled { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
}
@media (max-width: 991.98px) {
    .bubble { max-width: 88%; font-size: 0.9375rem; line-height: 1.45; scroll-margin-bottom: 200px; }
    .bubble.assistant { background: #FFFFFF; }
    /* The answer box stays at the bottom of the screen while the conversation scrolls */
    .story-composer {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin: 0 -16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--ops-border);
        background: #FFFFFF;
    }
    .story-composer .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .story-composer textarea { min-height: 72px; }
    .story-hint { display: none; }
}

/* The checklist */

.checklist-story { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; padding: 16px 20px; border-radius: 20px; background: var(--ops-mint); }
.checklist-story > p { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.checklist-story summary, .case-story summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ops-forest); cursor: pointer; }

.checklist-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; scroll-margin-top: 88px; }
.checklist-steps li { display: flex; }
.checklist-step {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 12px 18px;
    border: 2px solid var(--ops-border-input);
    border-radius: 20px;
    background: transparent;
    color: var(--ops-ink);
    font: inherit;
    text-align: left;
}
.checklist-step:hover { border-color: var(--ops-forest); }
.checklist-step[aria-current] { border-color: var(--ops-forest); background: #FFFFFF; }
.checklist-step-number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--ops-forest);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--ops-forest);
    font-weight: 700;
}
.checklist-step[aria-current] .checklist-step-number { background: var(--ops-forest); color: #FFFFFF; }
.checklist-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checklist-step-title { font-size: 1rem; line-height: 1.35; font-weight: 600; }
.checklist-step-note { font-size: 0.8125rem; line-height: 1.125rem; color: var(--ops-muted-strong); }

.checklist-panel { display: flex; flex-direction: column; gap: 20px; }
.checklist-panel-head { display: flex; flex-direction: column; gap: 4px; }
.checklist-panel-title { margin: 0; font-size: 1.5rem; line-height: 1.875rem; }
.checklist-subtitle { margin: 8px 0 0; font-family: var(--ops-sans); font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--ops-forest); }
.checklist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px 20px; }
.checklist-grid-narrow { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.checklist-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.checklist-field-wide { grid-column: 1 / -1; }
.checklist-field .form-label { margin: 0; font-size: 0.875rem; }
.checklist-field .form-control, .checklist-field .form-select { min-height: 48px; font-size: 1rem; }
.checklist-field .form-text { margin: 0; font-size: 0.8125rem; color: var(--ops-muted-strong); }
.checklist-field .is-invalid ~ .form-text { display: none; }  /* the error says it instead */
/* Google's hospital and place suggestions under a field */
.pac-container { margin-top: 4px; overflow: hidden; border: 1px solid var(--ops-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 51, 24, 0.12); font-family: var(--ops-sans); }
.pac-item { padding: 8px 12px; font-size: 0.875rem; line-height: 1.5; cursor: pointer; }
.pac-item-query { font-size: 0.9375rem; color: var(--ops-ink); }
.checklist-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; margin: 0; padding-left: 0; }
.checklist-check .form-check-input { flex-shrink: 0; float: none; width: 1.375rem; height: 1.375rem; margin: 0; }
.checklist-check .form-check-label { flex: 1 1 0%; min-width: 0; font-size: 1rem; }
.checklist-check .story-source { flex-basis: 100%; }
.story-check { border-width: 2px; }

.checklist-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 16px 20px; border: 1px solid var(--ops-border); border-radius: 24px; background: #FFFFFF; }
.checklist-actions-main { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }

@media (max-width: 767.98px) {
    .checklist-steps { gap: 8px; }
    .checklist-step { flex-direction: column; justify-content: center; gap: 6px; min-height: 64px; padding: 10px 6px; border-radius: 16px; text-align: center; }
    .checklist-step-text { align-items: center; }
    .checklist-step-title { font-size: 0.8125rem; line-height: 1.2; }
    .checklist-step-note { display: none; }
    .checklist-step-number { width: 30px; height: 30px; font-size: 0.875rem; }
}
@media (max-width: 575.98px) {
    .checklist-actions-main { width: 100%; margin-left: 0; }
    .checklist-actions-main .btn { flex: 1 1 100%; }
}

/* A case */

.case-head { margin-bottom: 20px; }
.case-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.case-status { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; }
.case-status-in_progress { background: #F6EBD0; color: var(--ops-check-text); }
.case-status-submitted { background: var(--ops-mint); color: var(--ops-forest); }
.case-status-signed { background: var(--ops-forest); color: #FFFFFF; }
.case-status-draft { background: #E9ECEF; color: var(--ops-muted-strong); }

/* One, two or four across, so the four facts always fill their rows */
.case-facts-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0 0 20px; overflow: hidden; border: 1px solid var(--ops-border); border-radius: 24px; background: var(--ops-border); }
@media (min-width: 576px) { .case-facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .case-facts-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-facts-strip > div { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: #FFFFFF; }
.case-facts-strip dt { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ops-gold-text); }
.case-facts-strip dd { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--ops-muted); overflow-wrap: anywhere; }
.case-facts-strip .case-fact-main { font-family: var(--ops-serif); font-size: 1.375rem; line-height: 1.75rem; color: var(--ops-forest); }

.case-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 24px 28px; border-radius: 24px; }
.case-banner-text { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.case-banner-text h2 { margin: 0; font-size: 1.625rem; line-height: 2rem; }
.case-banner-text p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ops-muted-strong); }
.case-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.case-banner-progress { background: var(--ops-forest); color: #FFFFFF; }
.case-banner-progress h2 { color: #FFFFFF; }
.case-banner-progress p { color: var(--ops-on-forest); }
.case-banner-progress :focus-visible { outline-color: var(--ops-gold-light); }
.case-banner-submitted { background: var(--ops-mint); }
.case-banner-signed { border: 2px solid var(--ops-forest); background: #FFFFFF; }
.case-banner-draft { border: 1px dashed #B9CBBE; background: #F7FAF7; }

.case-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.case-main { display: flex; flex: 2 1 560px; flex-direction: column; gap: 20px; min-width: 0; }
.case-side { display: flex; flex: 1 1 280px; flex-direction: column; gap: 20px; min-width: 0; }
.case-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.case-card-title { margin: 0; font-size: 1.5rem; line-height: 1.875rem; }
.case-side .case-card-title { font-size: 1.375rem; line-height: 1.75rem; }
.case-card-subtitle { margin: 4px 0 0; font-family: var(--ops-sans); font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--ops-forest); }
.case-table { margin: 0; font-size: 0.9375rem; }
.case-table th { font-size: 0.8125rem; font-weight: 600; color: var(--ops-muted-strong); white-space: nowrap; }
.case-facts { margin: 0; font-size: 0.9375rem; }
.case-facts th { width: 36%; font-size: 0.875rem; font-weight: 600; color: var(--ops-muted-strong); }
.case-facts th, .case-facts td { padding: 10px 8px; vertical-align: top; }
.case-record-list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.case-record-list > div { display: flex; flex-direction: column; gap: 2px; }
.case-record-list dt { font-size: 0.8125rem; font-weight: 400; color: var(--ops-muted-strong); }
.case-record-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.case-record-list .case-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; font-weight: 400; }
.case-reaction { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--ops-cream); font-size: 0.9375rem; }
.case-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 14px; }
.case-photos figure { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.case-photos img { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; background: var(--ops-mint); object-fit: cover; }
.case-photos figcaption { font-size: 0.875rem; line-height: 1.35; }
.case-story { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 18px; background: var(--ops-cream); }
.case-story .ops-eyebrow { color: #6B5214; }
.case-story-preview { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.case-story-text { margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.case-story-changes { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; }
.case-checksum { margin: 0; font-size: 0.75rem; color: var(--ops-muted-strong); overflow-wrap: anywhere; }
.case-history .table { margin: 0; font-size: 0.875rem; }
.case-sign-form { margin-top: 20px; }
.case-sign-form .form-control { max-width: 420px; }

/* Call-outs */

.callout-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.callout-filters .form-select { width: auto; min-width: 120px; }

/* Stat tiles: the year's numbers, in the sans, proportional figures */
/* Two or four across, so the four tiles always fill their rows */
.callout-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
@media (min-width: 1200px) { .callout-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.callout-stat { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border: 1px solid var(--ops-border); border-radius: 20px; background: #FFFFFF; }
.callout-stat dt { order: 1; font-size: 0.875rem; font-weight: 600; color: var(--ops-muted-strong); }
.callout-stat dd { order: 2; margin: 0; font-size: 2.25rem; line-height: 2.75rem; font-weight: 600; color: var(--ops-forest); }
.callout-stat .callout-stat-note { order: 3; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 400; color: var(--ops-muted); }

.callout-map { width: 100%; height: 360px; border-radius: 18px; background: var(--ops-mint); }
.callout-map-small { height: 260px; }
.callout-map-large { height: clamp(320px, 52vh, 520px); }
/* The base map greyed, so the call-outs on it stand out */
.callout-map .leaflet-tile-pane { filter: grayscale(0.9) contrast(0.92) brightness(1.04); }
.callout-map .leaflet-popup-content { font-family: var(--ops-sans); font-size: 0.875rem; line-height: 1.45; }
.callout-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.8125rem; color: var(--ops-muted-strong); }
.callout-legend-ramp { width: 72px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #F1DDA6, #D9B45E, #B08630, #7A5A12); }
.callout-legend-pin { width: 10px; height: 10px; margin-left: 8px; border: 2px solid #FFFFFF; border-radius: 50%; background: var(--ops-forest); box-shadow: 0 0 0 1px var(--ops-border); }
.callout-locate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ops-pin { border: 3px solid #FFFFFF; border-radius: 50%; background: var(--ops-forest); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }

.callout-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); align-items: start; gap: 20px; margin: 20px 0; }
.callout-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 5;
    display: none;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--ops-ink);
    color: #FFFFFF;
    font-size: 0.8125rem;
    line-height: 1.3;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}
.callout-tip strong { margin-right: 4px; }

/* One series, one colour: every bar forest, its value at the tip */
.callout-bars { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.callout-bar-row { position: relative; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; padding: 2px 6px; border-radius: 10px; }
.callout-bar-row:hover, .callout-bar-row:focus-visible { background: var(--ops-cream); }
.callout-bar-row:hover .callout-tip, .callout-bar-row:focus-visible .callout-tip { display: block; }
.callout-bar-name { font-size: 0.875rem; line-height: 1.3; overflow-wrap: anywhere; }
.callout-tag { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--ops-check-pill); color: var(--ops-check-text); font-size: 0.6875rem; font-weight: 700; line-height: 1.125rem; vertical-align: 1px; }
.callout-bar-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.callout-bar { min-width: 4px; height: 16px; border-radius: 0 4px 4px 0; background: var(--ops-forest); }
.callout-bar-value { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ops-ink); }

.callout-columns { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; height: 220px; margin: 0; padding: 0; list-style: none; }
.callout-column { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; border-radius: 8px; }
.callout-column:hover, .callout-column:focus-visible { background: var(--ops-cream); }
.callout-column:hover .callout-tip, .callout-column:focus-visible .callout-tip { display: block; }
/* Room above the bars for the busiest month's label, so every bar keeps its true height */
.callout-column-plot { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; padding-top: 22px; border-bottom: 1px solid var(--ops-rule); }
.callout-column-bar { position: relative; flex-shrink: 0; width: min(24px, 70%); min-height: 0; border-radius: 4px 4px 0 0; background: var(--ops-forest); }
.callout-column-value { position: absolute; bottom: 100%; left: 50%; margin-bottom: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--ops-ink); transform: translateX(-50%); }
.callout-column-name { padding-top: 6px; font-size: 0.75rem; color: var(--ops-muted-strong); }
.callout-table td a { font-weight: 600; }
.callout-notes { white-space: pre-wrap; }

.callout-outcome-caught { background: var(--ops-forest); color: #FFFFFF; }
.callout-outcome-not_found, .callout-outcome-got_away { background: #F6EBD0; color: var(--ops-check-text); }
.callout-outcome-dead, .callout-outcome-no_snake { background: #E9ECEF; color: var(--ops-muted-strong); }
/* A call-out reported on WhatsApp, while it's being dealt with */
.callout-status-reported { background: #F6EBD0; color: var(--ops-check-text); }
.callout-status-accepted, .callout-status-on_the_way, .callout-status-on_site { background: var(--ops-mint); color: var(--ops-forest); }
.callout-status-cancelled { background: #E9ECEF; color: var(--ops-muted-strong); }
.callout-open-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.callout-open-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.callout-open-list a { font-weight: 600; }
.callout-chat td { vertical-align: top; }
.callout-chat .callout-chat-text { white-space: normal; overflow-wrap: anywhere; }
.callout-chat .callout-chat-failed { color: #8A1C1C; font-weight: 600; }

/* Log in */

.login-page { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.login-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(28px, 5vw, 56px);
    background: var(--ops-forest);
    color: #FFFFFF;
}
.login-headline { margin: 0; max-width: 18ch; font-family: var(--ops-serif); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.12; color: #FFFFFF; }
.login-lede { margin: 0; max-width: 46ch; color: var(--ops-on-forest); font-size: 1.0625rem; line-height: 1.6; }
.login-brand .ops-eyebrow { color: var(--ops-gold-light); }
.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 56px) 16px; }
.login-form { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 420px; padding: clamp(24px, 4vw, 36px); border: 1px solid var(--ops-border); border-radius: 28px; background: #FFFFFF; }
.login-form h1, .login-form .alert { margin: 0; }
@media (min-width: 992px) {
    .login-page { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}