/* Before the Vote.
   ---------------------------------------------------------------------------
   Set on the newspaper's own stock -- the same paper, ink and red as the front
   page -- because this is journalism about the county, not a civic-tech app
   with a masthead bolted on.

   One deliberate omission: the weather page sets `.header { top: 0 }`. This
   page does not. The site header is `position: fixed` with no `top`, which is
   what lets the confirm-your-email bar push it down by padding the body; pin it
   to 0 and the bar would sit on top of the masthead. */

.osc-btv-body { overflow-y: auto !important; }

.osc-btv-main { background: #FFFFF7; }
.osc-btv-wrap {
    max-width: 62rem;
    margin: 0 auto;
    /* Masthead clearance, matching weather.css. */
    padding: 160px 20px 70px;
    color: #1b1b1b;
}
.osc-btv-wrap--narrow { max-width: 50rem; }
@media (max-width: 640px) { .osc-btv-wrap { padding: 120px 14px 50px; } }

/* -------------------------------------------------------------- heading ---- */
.osc-btv-head { margin-bottom: 26px; }
.osc-btv-kicker {
    margin: 0 0 8px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font: 900 0.7rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.1em; text-transform: uppercase; color: #b21f2d;
}
.osc-btv-title {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.05;
}
.osc-btv-title--meeting { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; }
.osc-btv-dek {
    margin: 12px 0 0; max-width: 42rem;
    font: 1.08rem/1.55 Georgia, 'Times New Roman', serif; color: #333;
}
.osc-btv-checked {
    margin: 12px 0 0;
    font: 0.78rem/1.4 Arial, Helvetica, sans-serif; color: #6b6b6b;
}
.osc-btv-meta { margin: 12px 0 0; font: 1rem/1.5 Georgia, 'Times New Roman', serif; color: #333; }
.osc-btv-lede {
    margin: 16px 0 0; padding-left: 14px;
    border-left: 3px solid #b21f2d;
    font: 1.1rem/1.55 Georgia, 'Times New Roman', serif;
}
.osc-btv-crumbs { margin-bottom: 14px; font: 0.8rem/1.4 Arial, Helvetica, sans-serif; color: #6b6b6b; }
.osc-btv-crumbs a { color: #164f8b; text-decoration: none; }
.osc-btv-crumbs a:hover { text-decoration: underline; }

/* The countdown. "Meets in 3 days" is the headline of this whole feature. */
.osc-btv-status { padding: 4px 8px; border-radius: 2px; }
.osc-btv-status.is-upcoming { background: #1a7f4b; color: #fff; }
.osc-btv-status.is-past { background: #e6e1d3; color: #4a4a4a; }
.osc-btv-flag { padding: 4px 8px; background: #b21f2d; color: #fff; border-radius: 2px; }

.osc-btv-warn {
    margin: 14px 0 0; padding: 10px 12px;
    background: #fff4e0; border-left: 3px solid #b8872e;
    font: 0.92rem/1.45 Arial, Helvetica, sans-serif;
}

/* ------------------------------------------------------------- sections ---- */
.osc-btv-section { margin-top: 34px; }
.osc-btv-h2 {
    margin: 0 0 14px; padding-bottom: 8px;
    border-bottom: 2px solid #1b1b1b;
    font: 900 0.78rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.osc-btv-empty, .osc-btv-pending {
    margin: 0; color: #4a4a4a;
    font: 1rem/1.55 Georgia, 'Times New Roman', serif;
}
.osc-btv-pending { font-style: italic; }
.osc-btv-pending--big { margin: 18px 0; padding: 16px 18px; background: #fffdf6; border: 1px solid #c6b89e; font-style: normal; }

/* ---------------------------------------------------------- upcoming card -- */
.osc-btv-card {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px;
    padding: 20px 0; border-bottom: 1px solid #d9d2c1;
}
.osc-btv-card:last-child { border-bottom: 0; }
.osc-btv-date {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 8px 0 10px; height: max-content;
    background: #fffdf6; border: 1px solid #c6b89e; border-top: 5px solid #b21f2d;
    text-decoration: none; color: #1b1b1b;
}
.osc-btv-date-mon { font: 900 0.72rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #b21f2d; }
.osc-btv-date-day { font: 900 2rem/1.1 Georgia, 'Times New Roman', serif; }
.osc-btv-date-dow { font: 700 0.72rem/1 Arial, Helvetica, sans-serif; text-transform: uppercase; color: #6b6b6b; }

.osc-btv-when {
    margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font: 700 0.8rem/1.3 Arial, Helvetica, sans-serif; color: #4a4a4a;
}
.osc-btv-count { color: #1a7f4b; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; }
.osc-btv-card-title { margin: 0; font: 700 1.4rem/1.2 Georgia, 'Times New Roman', serif; }
.osc-btv-card-title a { color: #1b1b1b; text-decoration: none; }
.osc-btv-card-title a:hover { color: #164f8b; text-decoration: underline; }
.osc-btv-overview { margin: 8px 0 0; font: 1.02rem/1.55 Georgia, 'Times New Roman', serif; }

.osc-btv-keys { margin: 12px 0 0; padding: 0; list-style: none; }
.osc-btv-keys li {
    position: relative; margin: 0 0 8px; padding-left: 16px;
    font: 0.97rem/1.5 Georgia, 'Times New Roman', serif; color: #333;
}
.osc-btv-keys li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: #b21f2d; }

/* Money is the thing a resident most often wants before a vote: set apart,
   tabular, and never shown unless it was checked against the document. */
.osc-btv-money {
    display: inline-block; margin-left: 4px; padding: 1px 7px;
    background: #fff4e0; border: 1px solid #e3c98f; border-radius: 2px;
    font: 700 0.85rem/1.5 Arial, Helvetica, sans-serif; color: #5a3d00;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.osc-btv-money--unchecked { background: #f1efe8; border-color: #d9d2c1; color: #6b6b6b; font-weight: 400; font-style: italic; }

.osc-btv-actions { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.osc-btv-btn {
    display: inline-block; padding: 9px 14px;
    background: #164f8b; color: #fff; text-decoration: none;
    font: 800 0.78rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
}
.osc-btv-btn:hover { background: #0e355e; color: #fff; }
.osc-btv-link { font: 0.88rem/1.4 Arial, Helvetica, sans-serif; color: #164f8b; }

/* ---------------------------------------------------------- recent list ---- */
.osc-btv-list { margin: 0; padding: 0; list-style: none; }
.osc-btv-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid #e6e1d3; }
.osc-btv-row-date { font: 700 0.82rem/1.5 Arial, Helvetica, sans-serif; color: #6b6b6b; text-transform: uppercase; }
.osc-btv-row-title { font: 700 1.05rem/1.35 Georgia, 'Times New Roman', serif; color: #1b1b1b; text-decoration: none; }
.osc-btv-row-title:hover { color: #164f8b; text-decoration: underline; }
.osc-btv-row-ov { margin: 4px 0 0; font: 0.93rem/1.5 Georgia, 'Times New Roman', serif; color: #4a4a4a; }

/* ------------------------------------------------------- meeting items ---- */
.osc-btv-items { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: none; }
.osc-btv-item {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px;
    padding: 18px 0; border-top: 1px solid #e6e1d3;
}
.osc-btv-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: #1b1b1b; color: #fff;
    font: 900 0.85rem/1 Arial, Helvetica, sans-serif;
}
.osc-btv-num--small { width: 22px; height: 22px; font-size: 0.7rem; margin-right: 6px; vertical-align: middle; }
.osc-btv-plain { margin: 2px 0 0; font: 1.08rem/1.5 Georgia, 'Times New Roman', serif; }
.osc-btv-tags { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.osc-btv-tags .osc-btv-money { margin-left: 0; }
.osc-btv-tag {
    padding: 1px 7px; border: 1px solid #c6b89e; border-radius: 2px;
    font: 0.8rem/1.6 Arial, Helvetica, sans-serif; color: #4a4a4a; background: #fffdf6;
}
.osc-btv-tag--place::before { content: "\2316\00a0"; color: #b21f2d; }

.osc-btv-written { margin-top: 10px; }
.osc-btv-written summary, .osc-btv-routine summary {
    cursor: pointer; font: 700 0.8rem/1.4 Arial, Helvetica, sans-serif; color: #164f8b;
}
.osc-btv-written p {
    margin: 8px 0 0; padding: 10px 12px;
    background: #fffdf6; border-left: 3px solid #c6b89e;
    font: 0.93rem/1.55 Georgia, 'Times New Roman', serif; color: #333;
}
.osc-btv-routine { margin-top: 18px; padding: 14px 16px; background: #fffdf6; border: 1px solid #e6e1d3; }
.osc-btv-routine ol { margin: 10px 0 0; padding: 0; list-style: none; }
.osc-btv-routine li { margin: 0 0 6px; font: 0.93rem/1.5 Georgia, 'Times New Roman', serif; color: #4a4a4a; }

/* -------------------------------------------------------- how it's made ---- */
.osc-btv-how {
    margin-top: 44px; padding: 18px 20px;
    background: #fffdf6; border: 1px solid #c6b89e; border-top: 4px solid #1b1b1b;
}
.osc-btv-how h2 { margin: 0 0 8px; font: 900 0.75rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.osc-btv-how p { margin: 0 0 10px; font: 0.95rem/1.55 Georgia, 'Times New Roman', serif; color: #333; }
.osc-btv-how p:last-child { margin-bottom: 0; }
.osc-btv-how a { color: #164f8b; }

@media (max-width: 560px) {
    .osc-btv-card { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
    .osc-btv-date-day { font-size: 1.6rem; }
    .osc-btv-card-title { font-size: 1.2rem; }
    .osc-btv-item { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
    .osc-btv-num { width: 28px; height: 28px; }
}