/* Garfield Heights Today — civic hub stylesheet (self-hosted, no CDN).
   Slate + brass palette derived from the garfieldheightsinfo logo artwork. */

:root {
    --blue-900: #1b2a33;
    --blue-800: #263a46;
    --blue-700: #33505e;
    --blue-600: #3a6076;
    --blue-500: #4e7b92;
    --blue-050: #eef3f7;
    --green-700: #2c6e5e;
    --green-600: #37836f;
    --green-050: #e8f2ef;
    --gold: #c08a3e;
    --ink: #1b242e;
    --ink-soft: #4a5866;
    --line: #e2e8ee;
    --bg: #f6f8fa;
    --card: #ffffff;
    --shadow: 0 1px 2px rgba(16,42,67,.06), 0 6px 20px rgba(16,42,67,.06);
    --shadow-lg: 0 8px 30px rgba(16,42,67,.12);
    --radius: 14px;
    --radius-sm: 9px;
    --maxw: 1120px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
    --serif: Georgia, "Times New Roman", "Noto Serif", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--blue-800); color: #fff;
    padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- header */
.site-header {
    background: linear-gradient(180deg, var(--blue-900), var(--blue-800));
    color: #fff;
    border-bottom: 3px solid var(--gold);
    position: sticky; top: 0; z-index: 40;
    box-shadow: 0 2px 14px rgba(11,46,79,.25);
}
.header-inner { display: flex; align-items: center; gap: 20px; padding: 12px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--gold); display: inline-flex; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-size: 1.32rem; font-weight: 800; letter-spacing: -.01em; }
.brand-sub { font-size: .74rem; text-transform: uppercase; letter-spacing: .13em; color: #a9c6e2; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-nav > a {
    color: #dbe7f3; font-weight: 600; padding: 8px 12px; border-radius: 8px; font-size: .96rem;
}
.site-nav > a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.nav-search { display: flex; align-items: center; background: rgba(255,255,255,.14); border-radius: 999px; overflow: hidden; padding: 2px; }
.nav-search input { border: 0; background: transparent; color: #fff; padding: 6px 12px; outline: none; width: 130px; }
.nav-search input::placeholder { color: #bcd2e6; }
.nav-search button { border: 0; background: transparent; color: #fff; cursor: pointer; padding: 4px 10px; font-size: .95rem; }
.nav-toggle { display: none; margin-left: auto; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 1.3rem; padding: 6px 12px; border-radius: 8px; cursor: pointer; }

/* ------------------------------------------------------------------ main */
.main { padding: 30px 20px 50px; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 18px; }
.section-head h2 { font-size: 1.45rem; margin: 0; color: var(--blue-900); letter-spacing: -.01em; }
.section-head h2::before { content: ""; display: inline-block; width: 6px; height: 1.1em; background: var(--gold); border-radius: 3px; margin-right: 10px; vertical-align: -2px; }
.section-head .more { font-weight: 600; font-size: .92rem; }

.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 700; }
.badge {
    display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    padding: 3px 9px; border-radius: 999px; background: var(--blue-050); color: var(--blue-700);
}
.badge.news { background: var(--blue-050); color: var(--blue-700); }
.badge.weather { background: var(--green-050); color: var(--green-700); }
.badge.history { background: #f6efe0; color: #8a6417; }
.badge.feature { background: #f0eefb; color: #5b46a8; }

/* --------------------------------------------------------------- layout grid */
.home-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- lead story */
.lead {
    background: var(--card); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); border: 1px solid var(--line); margin-bottom: 26px;
}
.lead-body { padding: 26px 28px 28px; }
.lead .badge { margin-bottom: 12px; }
.lead h1 { margin: 6px 0 10px; font-size: 2.1rem; line-height: 1.15; letter-spacing: -.02em; color: var(--blue-900); }
.lead h1 a { color: inherit; }
.lead .subhead { font-size: 1.12rem; color: var(--ink-soft); margin: 0 0 14px; }
.lead .meta { color: var(--ink-soft); font-size: .9rem; }
.lead-hero { background: linear-gradient(135deg, var(--blue-700), var(--green-600)); aspect-ratio: 16/6; display: flex; align-items: flex-end; }

/* ------------------------------------------------------------ news grid cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card .card-top { height: 5px; background: linear-gradient(90deg, var(--blue-600), var(--green-600)); }
.card .card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { margin: 4px 0; font-size: 1.12rem; line-height: 1.25; }
.card h3 a { color: var(--blue-900); }
.card .excerpt { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.card .meta { margin-top: auto; color: var(--ink-soft); font-size: .82rem; display: flex; gap: 8px; align-items: center; }

/* --------------------------------------------------------------- sidebar */
.sidebar { display: flex; flex-direction: column; gap: 24px; }
.panel {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
}
.panel-head { padding: 14px 18px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.panel-head.blue { background: linear-gradient(135deg, var(--blue-700), var(--blue-600)); }
.panel-head.green { background: linear-gradient(135deg, var(--green-700), var(--green-600)); }
.panel-head.gold { background: linear-gradient(135deg, #9c6f2f, var(--gold)); }
.panel-body { padding: 18px; }

/* --------------------------------------------------------------- weather widget */
.wx-now { display: flex; align-items: center; gap: 16px; }
.wx-emoji { font-size: 3.2rem; line-height: 1; }
.wx-temp { font-size: 2.6rem; font-weight: 800; color: var(--blue-900); line-height: 1; }
.wx-label { color: var(--ink-soft); font-weight: 600; }
.wx-meta { color: var(--ink-soft); font-size: .86rem; margin-top: 4px; }
.wx-forecast { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 16px; }
.wx-day { text-align: center; background: var(--blue-050); border-radius: var(--radius-sm); padding: 10px 4px; }
.wx-day .d { font-weight: 700; font-size: .78rem; color: var(--blue-800); }
.wx-day .e { font-size: 1.5rem; margin: 2px 0; }
.wx-day .hi { font-weight: 700; }
.wx-day .lo { color: var(--ink-soft); font-size: .82rem; }
.wx-asof { margin-top: 12px; font-size: .78rem; color: var(--ink-soft); text-align: right; }

/* ------------------------------------------------------------- facts panel */
.facts dt { font-weight: 700; color: var(--blue-800); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.facts dd { margin: 2px 0 12px; color: var(--ink); }
.facts dd:last-child { margin-bottom: 0; }
.fact-quote { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); font-style: italic; border-left: 4px solid var(--gold); padding-left: 14px; margin: 0; }

/* --------------------------------------------------------- history feature */
.feature-tile { display: block; color: inherit; }
.feature-tile:hover { text-decoration: none; }
.feature-tile h3 { color: var(--blue-900); margin: 0 0 8px; font-size: 1.2rem; }
.feature-tile p { color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------- article page */
.article { max-width: 760px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
/* .article-hero's aspect-ratio was declared here as 16/6 AND again below as 16/7;
   the later one always won, so this was dead. Ratio now lives in one place. */
.article-hero { background: linear-gradient(135deg, var(--blue-700), var(--green-600)); }
.article-inner { padding: 30px 34px 40px; }
.article h1 { font-size: 2.2rem; line-height: 1.15; letter-spacing: -.02em; color: var(--blue-900); margin: 10px 0 12px; }
.article .subhead { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 16px; }
.article .byline { display: flex; gap: 12px; align-items: center; color: var(--ink-soft); font-size: .92rem; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.article-body { font-size: 1.09rem; line-height: 1.75; }
.article-body p { margin: 0 0 1.1em; }
.article-body h2, .article-body h3 { color: var(--blue-900); margin: 1.4em 0 .5em; }
.article-body ul, .article-body ol { margin: 0 0 1.1em 1.3em; }
.article-body a { text-decoration: underline; }
.source-note { margin-top: 22px; padding: 14px 16px; background: var(--blue-050); border-radius: var(--radius-sm); font-size: .95rem; color: var(--blue-800); }
.source-note a { font-weight: 600; }

/* ------------------------------------------------------------- audio player */
.listen {
    margin: 20px 0 8px; padding: 16px 18px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--green-050), #f0f7fb); border: 1px solid var(--line);
}
.listen-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-700); margin-bottom: 10px; }
.listen audio { width: 100%; }
.listen .pending { color: var(--ink-soft); font-size: .92rem; }

/* ------------------------------------------------------------- related */
.related { max-width: 760px; margin: 30px auto 0; }

/* --------------------------------------------------------------- section list */
.list-stack { display: flex; flex-direction: column; gap: 16px; }
.list-item {
    display: flex; gap: 16px; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; align-items: flex-start;
}
.list-item .li-body { flex: 1; }
.list-item h3 { margin: 4px 0 6px; font-size: 1.2rem; }
.list-item h3 a { color: var(--blue-900); }
.list-item .excerpt { color: var(--ink-soft); margin: 0; }
.list-item .meta { color: var(--ink-soft); font-size: .84rem; margin-top: 6px; }

/* ------------------------------------------------------------- about page */
.prose { max-width: 800px; margin: 0 auto; }
.prose .lede { font-size: 1.25rem; color: var(--ink-soft); }
.hero-band {
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    color: #fff; border-radius: var(--radius); padding: 40px 34px; margin-bottom: 26px; box-shadow: var(--shadow);
}
.hero-band h1 { margin: 0 0 8px; font-size: 2.2rem; }
.hero-band p { margin: 0; color: #cfe0f0; font-size: 1.1rem; }
.fact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fact-list li { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green-600); border-radius: var(--radius-sm); padding: 14px 18px; box-shadow: var(--shadow); }
.quick-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin: 20px 0; }
.qf { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow); }
.qf .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--blue-700); font-weight: 700; }
.qf .v { font-size: 1.05rem; font-weight: 600; margin-top: 3px; }

/* ------------------------------------------------------------- empty / notices */
.notice { background: var(--blue-050); border: 1px solid #cfe0f0; border-radius: var(--radius-sm); padding: 16px 18px; color: var(--blue-800); }
.empty { text-align: center; color: var(--ink-soft); padding: 40px 20px; }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--blue-900); color: #cfe0f0; margin-top: 40px; border-top: 3px solid var(--gold); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 24px; padding: 34px 20px; align-items: start; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand strong { color: #fff; font-size: 1.1rem; }
.footer-brand p { margin: 6px 0 0; font-size: .92rem; }
.footer-nav { display: flex; flex-direction: column; gap: 6px; }
.footer-nav a { color: #b9d0e6; }
.footer-credit { font-size: .88rem; }
.footer-credit .powered a { color: var(--gold); font-weight: 700; }

/* -------------------------------------------------------------- responsive nav */
@media (max-width: 780px) {
    .nav-toggle { display: block; }
    .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; margin-top: 10px; }
    .site-nav.open { display: flex; }
    .site-nav > a { padding: 12px; border-radius: 8px; }
    .nav-search { margin-top: 6px; }
    .nav-search input { width: 100%; }
}

.btn {
    display: inline-block; background: var(--blue-600); color: #fff; padding: 9px 18px; border-radius: 999px;
    font-weight: 600; border: 0; cursor: pointer; font-size: .95rem;
}
.btn:hover { background: var(--blue-700); text-decoration: none; }
.btn.green { background: var(--green-600); }
.btn.green:hover { background: var(--green-700); }

/* ============================================================= R2: images + cameras */

/* --- Real images inside heroes/cards (override the gradient placeholders) --- */
.lead-hero { display:block; aspect-ratio:16/8; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; background:linear-gradient(135deg,var(--blue-700),var(--green-600)); }
.lead-hero img { width:100%; height:100%; object-fit:cover; display:block; }

.card .card-top { display:block; height:auto; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(90deg,var(--blue-600),var(--green-600)); }
.card .card-top img { width:100%; height:100%; object-fit:cover; display:block; }

.article-hero { margin:0 0 4px; aspect-ratio:40/21; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; background:linear-gradient(135deg,var(--blue-700),var(--green-600)); }
.article-hero img { width:100%; height:100%; object-fit:cover; display:block; }

.list-item .li-thumb { flex:0 0 150px; display:block; border-radius:var(--radius-sm); overflow:hidden; align-self:flex-start; }
.list-item .li-thumb img { width:150px; height:100px; object-fit:cover; display:block; }
@media (max-width:560px){ .list-item .li-thumb, .list-item .li-thumb img { width:100%; height:auto; aspect-ratio:16/9; flex-basis:auto; } }

/* --- Live traffic cameras --- */
.cam-widget { display:grid; gap:12px; }
.cam-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin:22px 0; }
.cam-tile { margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); position:relative; }
.cam-tile .cam-frame, .cam-widget .cam-tile { position:relative; }
.cam-frame { position:relative; background:#0d1b2a; aspect-ratio:16/9; overflow:hidden; }
.cam-img { width:100%; height:100%; object-fit:cover; display:block; background:#0d1b2a; }
.cam-widget .cam-tile { border-radius:var(--radius-sm); position:relative; }
.cam-widget .cam-img { aspect-ratio:16/9; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.cam-live { position:absolute; top:8px; left:8px; background:rgba(200,30,30,.92); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:999px; z-index:2; }
.cam-offline { display:none; position:absolute; inset:0; align-items:center; justify-content:center; color:#cdd6df; font-size:.9rem; background:#0d1b2a; z-index:1; text-align:center; padding:12px; }
.cam-tile.cam-down .cam-offline { display:flex; }
.cam-tile.cam-down .cam-live { display:none; }
.cam-tile figcaption { padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.cam-tile figcaption strong { color:var(--blue-900); font-size:1rem; }
.cam-tile figcaption .cam-loc { color:var(--ink-soft); font-size:.86rem; }
.cam-tile figcaption span, .cam-widget figcaption span { color:var(--ink-soft); font-size:.82rem; }
.cam-attr { color:var(--ink-soft); font-size:.76rem; }
.cam-note { color:var(--ink-soft); font-size:.85rem; background:#eef4fa; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin-top:8px; }

/* ============================================================= R3 additions
   Share bar · Ad slots · Newsletter subscribe · Advertise page · result pages */

/* ---- nav CTA ---- */
.site-nav a.nav-cta { background:var(--green,#1f7a4d); color:#fff; border-radius:8px; padding:8px 14px; }
.site-nav a.nav-cta:hover { filter:brightness(1.08); text-decoration:none; }

/* ---- Article layout with rail ---- */
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
.article-layout > .article { min-width:0; }
.article-rail { position:sticky; top:20px; }
@media (max-width:900px){ .article-layout { grid-template-columns:1fr; } .article-rail { position:static; } }

/* ---- Share bar ---- */
.share-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 0 4px; }
.share-foot { margin-top:26px; padding-top:16px; border-top:1px solid var(--line,#e4e7ec); }
.share-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--soft,#5b6470); margin-right:2px; }
.share-btn { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600;
    padding:7px 12px; border-radius:999px; border:1px solid var(--line,#e4e7ec); background:#fff; color:#334;
    cursor:pointer; text-decoration:none; line-height:1; transition:transform .08s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.share-btn:hover { text-decoration:none; transform:translateY(-1px); }
.share-btn svg { display:block; }
.share-btn.s-mail:hover { background:#eef4fb; color:#1a5088; border-color:#cfe0f2; }
.share-btn.s-fb:hover  { background:#1877f2; color:#fff; border-color:#1877f2; }
.share-btn.s-x:hover   { background:#111; color:#fff; border-color:#111; }
.share-btn.s-li:hover  { background:#0a66c2; color:#fff; border-color:#0a66c2; }
.share-btn.s-copy:hover{ background:#eef6f1; color:#1f7a4d; border-color:#cfe6d9; }
.share-btn.s-copy.copied { background:#1f7a4d; color:#fff; border-color:#1f7a4d; }

/* ---- Ad slots ---- */
.ad-slot { position:relative; margin:18px 0; text-align:center; }
.ad-slot .ad-tag { display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:#a0a8b2; margin-bottom:4px; }
.ad-slot .ad-creative { max-width:100%; height:auto; border-radius:8px; display:inline-block; }
.ad-slot .ad-link { display:inline-block; line-height:0; }
.ad-leaderboard { margin:0 0 22px; }
.ad-leaderboard .ad-creative { max-height:120px; }
.ad-sidebar .ad-creative { width:100%; max-width:300px; }
.ad-in_article { margin:24px 0; padding:6px 0; border-top:1px solid var(--line,#e4e7ec); border-bottom:1px solid var(--line,#e4e7ec); }
.ad-section { margin:0 0 22px; }

/* house filler */
.ad-house { border:1px dashed #cdd6e0; border-radius:12px; background:linear-gradient(180deg,#fafcff,#f2f6fb); }
.ad-house .ad-house-link { display:block; padding:18px 16px; text-decoration:none; }
.ad-house .ad-house-link:hover { text-decoration:none; }
.ad-house .ad-house-kicker { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#1f7a4d; }
.ad-house .ad-house-title { display:block; font-size:1rem; font-weight:800; color:var(--blue-d,#123f6b); margin:4px 0; }
.ad-house .ad-house-cta { display:block; font-size:.85rem; color:var(--soft,#5b6470); }
.ad-house.ad-leaderboard .ad-house-link { padding:14px 16px; }

/* ---- Newsletter signup (sidebar widget) ---- */
.panel-head.navy { background:linear-gradient(135deg,#0b2e4f,#1a5088); color:#fff; }
.signup-panel .signup-lead { margin:0 0 12px; font-size:.92rem; color:var(--ink,#1a1a1a); }
.signup-mini { display:flex; flex-direction:column; gap:8px; }
.signup-mini input[type=email], .signup-mini select { width:100%; padding:9px 11px; border:1px solid var(--line,#e4e7ec); border-radius:8px; font-size:.95rem; font-family:inherit; }
.signup-mini .btn { width:100%; text-align:center; cursor:pointer; border:0; }
.signup-fine { margin:8px 0 0; font-size:.76rem; color:var(--soft,#8892a0); }

/* honeypot: visually removed, still in DOM */
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---- Subscribe + Advertise pages ---- */
.subscribe-page, .advertise-page { max-width:760px; margin:0 auto; }
.subscribe-hero { text-align:center; padding:8px 0 22px; }
.subscribe-hero h1 { font-size:2rem; margin:12px 0 8px; color:var(--blue-d,#123f6b); }
.subscribe-hero .subhead { color:var(--soft,#5b6470); font-size:1.05rem; max-width:560px; margin:0 auto; }
.card-form { background:#fff; border:1px solid var(--line,#e4e7ec); border-radius:14px; padding:26px; box-shadow:0 1px 3px rgba(16,42,67,.05); }
.card-form .field { margin-bottom:16px; }
.card-form label { display:block; font-weight:700; margin-bottom:6px; color:var(--blue-d,#123f6b); font-size:.92rem; }
.card-form input[type=text], .card-form input[type=email], .card-form select, .card-form textarea {
    width:100%; padding:11px 13px; border:1px solid var(--line,#e4e7ec); border-radius:9px; font-size:1rem; font-family:inherit; background:#fff; }
.card-form textarea { min-height:120px; resize:vertical; line-height:1.5; }
.field-hint { color:var(--soft,#5b6470); font-size:.82rem; margin-top:5px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .field-row { grid-template-columns:1fr; } }
.card-form .btn-primary { background:var(--green,#1f7a4d); color:#fff; border:0; padding:12px 26px; border-radius:9px; font-weight:700; font-size:1rem; cursor:pointer; }
.card-form .btn-primary:hover { filter:brightness(1.07); }
.fineprint { font-size:.8rem; color:var(--soft,#8892a0); margin:14px 0 0; }

.notice.ok-notice { background:#e9f6ee; border:1px solid #bfe6cf; color:#1f7a4d; padding:16px 18px; border-radius:12px; }
.notice.err-notice { background:#fbeaea; border:1px solid #f0c9c9; color:#a23; padding:14px 18px; border-radius:12px; margin-bottom:16px; }

.subscribe-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
@media (max-width:640px){ .subscribe-benefits { grid-template-columns:1fr; } }
.benefit { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line,#e4e7ec); border-radius:12px; padding:14px 16px; }
.benefit > span { font-size:1.5rem; line-height:1; }
.benefit strong { display:block; color:var(--blue-d,#123f6b); font-size:.95rem; }
.benefit div span { color:var(--soft,#5b6470); font-size:.85rem; }

/* result pages */
.result-page { max-width:560px; }
.result-card { background:#fff; border:1px solid var(--line,#e4e7ec); border-radius:16px; padding:36px 28px; text-align:center; box-shadow:0 2px 8px rgba(16,42,67,.06); }
.result-card .result-icon { font-size:3rem; }
.result-card h1 { margin:12px 0 8px; color:var(--blue-d,#123f6b); }
.result-card p { color:var(--soft,#5b6470); font-size:1.02rem; }
.result-card .btn { margin:16px 8px 0; }
.result-card.ok { border-top:4px solid #1f7a4d; }
.result-card.err { border-top:4px solid #c0392b; }

/* advertise rate cards */
.rate-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:8px 0 8px; }
@media (max-width:820px){ .rate-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .rate-grid { grid-template-columns:1fr; } }
.rate-card { background:#fff; border:1px solid var(--line,#e4e7ec); border-radius:12px; padding:16px; }
.rate-card .rate-name { font-weight:800; color:var(--blue-d,#123f6b); }
.rate-card .rate-desc { color:var(--soft,#5b6470); font-size:.88rem; margin:6px 0; }
.rate-card .rate-spec { font-size:.78rem; color:#1f7a4d; font-weight:700; }
.rate-note { color:var(--soft,#5b6470); font-size:.92rem; margin:0 0 22px; }

.btn.btn-ghost { background:#eef2f6; color:var(--blue-d,#123f6b); }

/* ---- Member accounts (Shield auth pages) -------------------------------- */
.auth-card {
    max-width: 460px;
    margin: 26px auto 40px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 24px;
}
.auth-card label {
    display: block;
    font-weight: 700;
    font-size: .93rem;
    margin: 16px 0 6px;
    color: var(--blue-900);
}
.auth-input {
    width: 100%;
    padding: 11px 13px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.auth-input:focus {
    outline: none;
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(58, 96, 118, .16);
}
.auth-code { letter-spacing: .5em; font-size: 1.3rem; text-align: center; font-weight: 700; }
.auth-hint { margin: 6px 0 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.auth-check { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-weight: 500; }
.auth-check input { width: 17px; height: 17px; }
.auth-btn { width: 100%; margin-top: 22px; padding: 12px 18px; font-size: 1rem; font-weight: 700; }
.auth-links {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: .92rem;
    text-align: center;
    line-height: 1.9;
}
.auth-sep { color: var(--ink-soft); margin: 0 6px; }
.auth-alert {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: .93rem;
    line-height: 1.5;
}
.auth-alert.error { background: #fbeaea; border: 1px solid #f0c9c9; color: #8a2b2b; }
.auth-alert.ok    { background: var(--green-050); border: 1px solid #bfe0d5; color: var(--green-700); }
@media (max-width: 520px) {
    .auth-card { margin: 16px 12px 30px; padding: 20px 18px; }
}
/* ---- Owner business management ------------------------------------------ */
.biz-table { width: 100%; border-collapse: collapse; background: var(--card);
             border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
             box-shadow: var(--shadow); }
.biz-table th, .biz-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line);
                               vertical-align: top; font-size: .95rem; }
.biz-table thead th { background: var(--blue-050); color: var(--blue-900); font-size: .8rem;
                      text-transform: uppercase; letter-spacing: .06em; }
.biz-table tr:last-child td { border-bottom: 0; }
.biz-sub { color: var(--ink-soft); font-size: .84rem; margin-top: 2px; }
.biz-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem;
              font-weight: 700; }
.biz-status.ok    { background: var(--green-050); color: var(--green-700); }
.biz-status.warn  { background: #fdf3e2; color: #8a6414; }
.biz-status.bad   { background: #fbeaea; color: #8a2b2b; }
.biz-status.muted { background: #eef1f4; color: var(--ink-soft); }
.biz-actions { white-space: nowrap; }
.biz-actions a, .biz-actions .linklike { margin-right: 10px; font-size: .9rem; }
.inline-form { display: inline; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-600);
            cursor: pointer; text-decoration: none; }
.linklike:hover { text-decoration: underline; }
.linklike.danger { color: #a33; }

.biz-form { max-width: 640px; }
.biz-form label { display: block; font-weight: 700; font-size: .93rem; margin: 16px 0 6px;
                  color: var(--blue-900); }
.biz-form .req { color: #a33; }
.biz-form textarea.auth-input { resize: vertical; line-height: 1.55; }
.biz-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.hours-table th { text-align: left; font-weight: 600; font-size: .92rem; padding: 6px 10px 6px 0;
                  white-space: nowrap; color: var(--blue-900); }
.hours-table td { padding: 4px 6px 4px 0; }
.hours-table .to { color: var(--ink-soft); font-size: .86rem; }
.auth-input.time { width: auto; min-width: 128px; padding: 7px 9px; }
.closed-check { margin-top: 0; font-size: .88rem; }
@media (max-width: 620px) {
    .biz-row { grid-template-columns: 1fr; }
    .hours-table, .hours-table tbody, .hours-table tr, .hours-table td, .hours-table th { display: block; width: 100%; }
    .hours-table tr { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
    .biz-table thead { display: none; }
    .biz-table td { border-bottom: 0; }
    .biz-table tr { display: block; border-bottom: 1px solid var(--line); }
}

/* ---- Public business directory ------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dir-wrap { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 40px; }

.dir-search { display: flex; gap: 10px; margin-bottom: 18px; }
.dir-search input[type="search"] {
    flex: 1; padding: 11px 14px; font-size: 1rem; font-family: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.dir-search input[type="search"]:focus { outline: none; border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(58,96,118,.16); }

.dir-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dir-cat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
           background: var(--card); border: 1px solid var(--line); border-radius: 999px;
           font-size: .89rem; color: var(--ink); text-decoration: none; }
.dir-cat:hover { border-color: var(--blue-500); text-decoration: none; }
.dir-cat.on { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }
.dir-count { font-size: .78rem; color: var(--ink-soft); background: var(--bg);
             border-radius: 999px; padding: 1px 7px; }
.dir-cat.on .dir-count { background: rgba(255,255,255,.16); color: #fff; }

.dir-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px;
               flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px;
               border-bottom: 1px solid var(--line); }
.dir-total { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.dir-sort { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.dir-sort select { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
                   font-family: inherit; font-size: .9rem; background: #fff; color: var(--ink); }

.dir-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
            grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.dir-card { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line);
            border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.dir-card-media { flex: 0 0 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden;
                  background: linear-gradient(145deg, var(--blue-700), var(--blue-900));
                  display: flex; align-items: center; justify-content: center; text-decoration: none; }
.dir-card-media img { width: 100%; height: 100%; object-fit: cover; }
.dir-initial { color: var(--gold); font-size: 1.7rem; font-weight: 800; }
.dir-card-body { min-width: 0; }
.dir-card h3 { margin: 0 0 3px; font-size: 1.06rem; line-height: 1.3; }
.dir-card h3 a { color: var(--blue-900); }
.dir-tagline { margin: 0 0 6px; font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.dir-rating { margin: 0 0 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.stars { letter-spacing: 1px; font-size: .95rem; color: #d3d8de; }
.stars .star.on { color: var(--gold); }
.dir-rating-text { font-size: .84rem; color: var(--ink-soft); }
.dir-meta { margin: 0; font-size: .84rem; color: var(--ink-soft); }
.dir-empty { margin: 8px 0 22px; }
.dir-pager { margin-top: 24px; display: flex; justify-content: center; }
.dir-pager ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; }
.dir-pager a, .dir-pager strong { display: inline-block; padding: 7px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--card); font-size: .9rem; text-decoration: none; }
.dir-pager .active strong, .dir-pager strong { background: var(--blue-900); color: #fff; border-color: var(--blue-900); }
.dir-cta { margin-top: 26px; text-align: center; color: var(--ink-soft); font-size: .93rem; }
@media (max-width: 560px) {
    .dir-search { flex-direction: column; }
    .dir-toolbar { align-items: flex-start; }
}
/* ---- Business profile page ---------------------------------------------- */
.biz-hero { background: linear-gradient(145deg, var(--blue-800), var(--blue-900));
            color: #fff; border-bottom: 3px solid var(--gold); }
.biz-hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px;
                  display: flex; gap: 20px; align-items: center; }
.biz-logo { flex: 0 0 88px; height: 88px; border-radius: var(--radius); overflow: hidden;
            background: rgba(255,255,255,.10); display: flex; align-items: center;
            justify-content: center; }
.biz-logo img { width: 100%; height: 100%; object-fit: cover; }
.biz-logo span { font-size: 2.4rem; font-weight: 800; color: var(--gold); }
.biz-hero-text { min-width: 0; }
.biz-cat { display: inline-block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
           color: #cfe0f0; text-decoration: none; margin-bottom: 6px; }
.biz-cat:hover { color: #fff; }
.biz-hero h1 { margin: 0 0 6px; font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; }
.biz-tagline { margin: 0 0 8px; color: rgba(255,255,255,.82); font-size: 1.03rem; }
.biz-rating-line { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                   font-size: .9rem; color: rgba(255,255,255,.85); }
.biz-rating-line .stars { color: rgba(255,255,255,.32); }
.biz-rating-line .stars .star.on { color: var(--gold); }

.biz-page { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 40px; }
.owner-note { margin-bottom: 18px; }
.owner-note a { margin-left: 8px; }
.biz-cols { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
.biz-main { min-width: 0; }
.biz-desc { line-height: 1.7; }
.biz-noreviews { color: var(--ink-soft); line-height: 1.6; }
.biz-noreviews.muted { font-size: .9rem; font-style: italic; }
.biz-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
            padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.biz-card h3 { margin: 0 0 10px; font-size: 1.02rem; color: var(--blue-900); }
.biz-card p { margin: 0 0 8px; font-size: .94rem; line-height: 1.55; }
.biz-addr { color: var(--ink-soft); }
.biz-hours { width: 100%; border-collapse: collapse; font-size: .9rem; }
.biz-hours th { text-align: left; font-weight: 600; padding: 4px 10px 4px 0; color: var(--ink-soft); }
.biz-hours td { padding: 4px 0; }
.biz-hours .is-today th, .biz-hours .is-today td { color: var(--blue-900); font-weight: 700; }
.claim-card { background: var(--blue-050); border-color: #cfe0f0; }
.biz-report { font-size: .86rem; color: var(--ink-soft); }
@media (max-width: 820px) {
    .biz-cols { grid-template-columns: 1fr; }
    .biz-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .biz-hero h1 { font-size: 1.6rem; }
}

/* ===== images ===== */

/* ---- Business pictures: owner panel (task #30) --------------------------- */
/* Appends to the existing directory/auth CSS. Uses the same custom properties
   (--card, --line, --ink-soft, --radius, --shadow, --blue-*) — no new tokens. */

.img-panel { max-width: 760px; }

.img-slot { display: flex; gap: 20px; align-items: flex-start; }
.img-slot-body { flex: 1 1 auto; min-width: 0; }
.img-slot-body .biz-form { max-width: none; }
.img-slot-body .img-form label:first-of-type { margin-top: 0; }

.img-slot-preview {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: var(--blue-050, #eef3f8);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.img-slot-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-slot-preview.logo  { width: 120px; height: 120px; }
.img-slot-preview.cover { width: 220px; height: 124px; }
.img-slot-preview.logo span { font-size: 2.6rem; font-weight: 800; color: var(--blue-900); }
.img-empty { font-size: .82rem; color: var(--ink-soft); padding: 0 10px; text-align: center; line-height: 1.4; }

.img-remove-form { margin-top: 12px; }

.img-count { margin: 0 0 14px; font-size: .95rem; color: var(--ink-soft); }
.img-count strong { color: var(--ink); }
.img-full { color: #8a6414; font-weight: 600; }

.img-add {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 22px; max-width: none;
}
.img-add label:first-of-type { margin-top: 0; }

.img-manage { margin-top: 4px; }
.img-grid {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.img-card {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px; box-shadow: var(--shadow);
}
/* A picture with no description is a live accessibility problem, so it is
   marked on the card rather than only counted at the top of the page. */
.img-card.needs-alt { border-color: #e2b95f; box-shadow: 0 0 0 2px rgba(226, 185, 95, .22); }

.img-card-media {
    aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm);
    background: var(--bg, #f2f4f7);
}
.img-card-media a { display: block; width: 100%; height: 100%; }
.img-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.img-card-fields label { display: block; font-weight: 700; font-size: .88rem;
                         margin: 12px 0 5px; color: var(--blue-900); }
.img-card-fields label:first-child { margin-top: 0; }
.img-card-fields .auth-input { padding: 8px 10px; font-size: .92rem; }
.img-card-fields .auth-hint { margin-top: 4px; font-size: .79rem; }
.img-card-fields .req { color: #a33; }
.img-pos { width: 84px; }

.img-badge {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: #fdf3e2; color: #8a6414; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; vertical-align: middle;
}
.img-card-meta { margin: 10px 0 0; font-size: .78rem; color: var(--ink-soft); }
.img-remove { margin-top: 10px; font-size: .86rem; }
.img-actions { margin: 0 0 6px; }
.img-alt-alert { line-height: 1.55; }

@media (max-width: 620px) {
    .img-slot { flex-direction: column; }
    .img-slot-preview.cover { width: 100%; height: 150px; }
    .img-grid { grid-template-columns: 1fr; }
}

/* ---- Business pictures: public profile gallery --------------------------- */
.biz-gallery {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.biz-gallery figure { margin: 0; }
.biz-gallery-link {
    display: block; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg, #f2f4f7);
}
.biz-gallery-link img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
.biz-gallery-link:hover img,
.biz-gallery-link:focus-visible img { transform: scale(1.04); }
.biz-gallery-link:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.biz-gallery figcaption { margin-top: 6px; font-size: .84rem; color: var(--ink-soft); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
    .biz-gallery-link img { transition: none; }
    .biz-gallery-link:hover img,
    .biz-gallery-link:focus-visible img { transform: none; }
}
@media (max-width: 560px) {
    .biz-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ===== posts ===== */
/* ==========================================================================
   Business posts — "what we have going on"  (task #31)
   Append to app/../assets/site.css after the existing directory / owner rules.
   Uses only the custom properties already defined by the host theme:
   --card --line --bg --ink --ink-soft --blue-050 --blue-600 --blue-900
   --gold --green-050 --green-700 --radius --radius-sm --shadow --maxw
   ========================================================================== */

/* ---- Public: posts block on a business profile --------------------------- */
.biz-posts { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 14px; }
.biz-post {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.biz-post.is-pinned { border-left: 3px solid var(--gold); }
.biz-post-media {
    flex: 0 0 108px; height: 108px; border-radius: var(--radius-sm);
    overflow: hidden; background: var(--bg);
}
.biz-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz-post-body { min-width: 0; flex: 1; }
.biz-post-title { margin: 0 0 4px; font-size: 1.06rem; line-height: 1.35; color: var(--blue-900); }
.biz-post-pin { margin-right: 4px; font-size: .95rem; }
.biz-post-meta {
    margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 10px;
    font-size: .82rem; color: var(--ink-soft);
}
.biz-post-until {
    background: var(--blue-050); color: var(--blue-900);
    border-radius: 999px; padding: 1px 9px; font-weight: 600;
}
.biz-post-text { font-size: .95rem; line-height: 1.6; }
.biz-post-text p { margin: 0 0 8px; }
.biz-post-text p:last-child { margin-bottom: 0; }
.biz-post-text ul, .biz-post-text ol { margin: 0 0 8px; padding-left: 20px; }
.biz-post-text li { margin-bottom: 3px; }
.biz-post-text a { color: var(--blue-600); }

@media (max-width: 560px) {
    .biz-post { flex-direction: column; }
    .biz-post-media { flex: 0 0 auto; width: 100%; height: 170px; }
}

/* ---- Public: site-wide "going on around town" strip ---------------------- */
.post-strip {
    list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.post-strip-item {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.post-strip-media { display: block; height: 132px; background: var(--bg); }
.post-strip-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-strip-body { padding: 12px 14px 14px; }
.post-strip-body h3 { margin: 0 0 3px; font-size: 1rem; line-height: 1.3; }
.post-strip-body h3 a { color: var(--blue-900); }
.post-strip-biz { margin: 0 0 6px; font-size: .82rem; color: var(--ink-soft); }
.post-strip-excerpt { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--ink); }

/* ---- Owner: post manager ------------------------------------------------- */
/* .biz-table, .biz-status, .biz-actions, .linklike, .inline-form are reused
   from the existing owner styles — only the additions live here. */
.post-table .post-window { font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.post-table .post-window div { white-space: nowrap; }
.post-pin { margin-right: 4px; }
.post-back { margin-left: 14px; font-size: .92rem; }

/* ---- Owner: post form ---------------------------------------------------- */
.post-form textarea.auth-input { min-height: 190px; }
.post-form input[type="file"].auth-input { padding: 9px 10px; font-size: .92rem; background: #fff; }
.post-window-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.post-current-img {
    display: flex; gap: 14px; align-items: center; margin: 6px 0 10px;
    padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg);
}
.post-current-img img {
    width: 112px; height: 84px; object-fit: cover;
    border-radius: var(--radius-sm); display: block;
}
.post-current-img .auth-check { margin-top: 0; font-size: .89rem; }
.post-form code {
    background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
    padding: 0 4px; font-size: .85em;
}

@media (max-width: 620px) {
    .post-window-row { grid-template-columns: 1fr; }
    .post-current-img { flex-direction: column; align-items: flex-start; }
}

/* ===== reviews ===== */

/* ---- Ratings & reviews --------------------------------------------------- */
/* Append to assets/site.css after the existing directory block. Uses only the
   custom properties already defined there (--card, --line, --ink, --ink-soft,
   --gold, --blue-*, --green-*, --radius, --radius-sm, --shadow) and reuses the
   established .stars / .biz-card / .auth-input conventions. */

.rev-summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
               padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 18px; }
.rev-summary-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rev-avg { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--blue-900); }
.rev-avg-of { font-size: .85rem; color: var(--ink-soft); }
.rev-count { font-size: .92rem; color: var(--ink-soft); }
.rev-summary .biz-noreviews { margin: 8px 0 0; font-size: .9rem; }

.rev-dist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.rev-dist li { display: grid; grid-template-columns: 54px 1fr 34px; align-items: center; gap: 10px; }
.rev-dist-label { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.rev-dist-bar { display: block; height: 8px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.rev-dist-bar > span { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.rev-dist-n { font-size: .82rem; color: var(--ink-soft); text-align: right; }

/* ---- write / edit -------------------------------------------------------- */
.rev-write { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
             padding: 4px 16px; box-shadow: var(--shadow); margin-bottom: 20px; }
.rev-write > summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--blue-900); }
.rev-write > summary:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.rev-write[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.rev-form { padding-bottom: 14px; }
.rev-form label { display: block; font-weight: 700; font-size: .93rem; margin: 14px 0 6px; color: var(--blue-900); }
.rev-form textarea.auth-input { resize: vertical; line-height: 1.55; }
.rev-form .req, .biz-form .req { color: #a33; }
.rev-withdraw { padding: 0 0 14px; }
.rev-rules { line-height: 1.6; }
.rev-pending { background: #fdf3e2; border-color: #ecd7a8; }
.rev-owner-note { margin-bottom: 18px; }
.rev-signin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.rev-signin-note { font-size: .86rem; color: var(--ink-soft); }

/* Star picker: real radio inputs, so it is keyboard and screen-reader native.
   The row is reversed so the "checked and everything before it" CSS sibling
   trick works without a line of JavaScript. */
.star-input { border: 0; margin: 6px 0 0; padding: 0; }
.star-input legend { font-weight: 700; font-size: .93rem; color: var(--blue-900); padding: 0; }
.star-input-row { position: relative; display: inline-flex; flex-direction: row-reverse;
                  justify-content: flex-end; gap: 2px; margin-top: 4px; }
.star-input-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-input-row label { font-size: 2rem; line-height: 1; color: #d3d8de; cursor: pointer; padding: 2px; border-radius: 4px; }
.star-input-row label:hover,
.star-input-row label:hover ~ label,
.star-input-row input:checked ~ label { color: var(--gold); }
.star-input-row input:focus-visible + label { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* ---- the list ------------------------------------------------------------ */
.rev-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.rev-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
            padding: 14px 16px; box-shadow: var(--shadow); scroll-margin-top: 80px; }
.rev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rev-author { font-weight: 700; font-size: .94rem; color: var(--blue-900); }
.rev-date, .rev-on { font-size: .82rem; color: var(--ink-soft); }
.rev-edited { font-size: .74rem; color: var(--ink-soft); border: 1px solid var(--line);
              border-radius: 999px; padding: 1px 8px; }
.rev-body { line-height: 1.65; font-size: .95rem; overflow-wrap: anywhere; }
.rev-body.muted { color: var(--ink-soft); font-style: italic; }
.rev-response { margin-top: 12px; padding: 11px 13px; background: var(--blue-050);
                border-left: 3px solid var(--blue-600); border-radius: var(--radius-sm); }
.rev-response-head { font-weight: 700; font-size: .85rem; color: var(--blue-900); margin-bottom: 5px;
                     display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rev-actions { margin: 10px 0 0; font-size: .84rem; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rev-actions a { color: var(--ink-soft); }
.rev-actions a:hover { color: var(--blue-600); }

.rev-pager { display: flex; align-items: center; justify-content: center; gap: 14px;
             font-size: .9rem; margin: 4px 0 18px; }
.rev-pager span { color: var(--ink-soft); }
.rev-policy { font-size: .84rem; color: var(--ink-soft); line-height: 1.6; border-top: 1px solid var(--line);
              padding-top: 12px; margin-top: 6px; }

/* ---- report form --------------------------------------------------------- */
.report-reasons { border: 0; margin: 6px 0 0; padding: 0; }
.report-reasons legend { font-weight: 700; font-size: .93rem; color: var(--blue-900); padding: 0; }
.report-reasons .auth-check { margin-top: 10px; font-weight: 400; font-size: .94rem; }
.report-reasons .auth-check input { width: 16px; height: 16px; flex: 0 0 auto; }

@media (max-width: 560px) {
    .rev-dist li { grid-template-columns: 48px 1fr 30px; }
    .star-input-row label { font-size: 2.3rem; }
    .rev-signin { align-items: flex-start; }
}

/* ===== profiles ===== */

/* ---- Member profile settings (account/profile) --------------------------- */
/* Appended to public/assets/site.css. Uses only the custom properties already
   defined by the site theme, so it inherits both hubs' colours untouched. */
.pf-form { max-width: 640px; }
.pf-pending { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }

.pf-avatar-block { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
                   background: var(--card); border: 1px solid var(--line);
                   border-radius: var(--radius); box-shadow: var(--shadow);
                   padding: 18px; max-width: 640px; }
.pf-avatar { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
             background: linear-gradient(145deg, var(--blue-700), var(--blue-900));
             display: flex; align-items: center; justify-content: center; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar span { font-size: 2.2rem; font-weight: 800; color: var(--gold); }
.pf-avatar-controls { flex: 1 1 300px; min-width: 0; }
.pf-avatar-controls label { display: block; font-weight: 700; font-size: .93rem;
                            margin: 0 0 6px; color: var(--blue-900); }
.pf-upload input[type="file"] { padding: 8px; font-size: .92rem; background: #fff; }
.pf-upload .btn { margin-top: 12px; }
.pf-avatar-controls .inline-form { display: block; margin-top: 12px; }

.pf-prefs { list-style: none; margin: 6px 0 0; padding: 0; }
.pf-prefs li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pf-prefs li:last-child { border-bottom: 0; }
.pf-prefs .auth-check { margin-top: 0; }
.pf-prefs .auth-hint { margin-left: 26px; }

.pf-danger { max-width: 640px; background: #fdf7f7; border: 1px solid #f0c9c9;
             border-radius: var(--radius); padding: 18px 20px; }
.pf-danger p { line-height: 1.6; margin: 0 0 12px; font-size: .95rem; }
.pf-danger label { display: block; font-weight: 700; font-size: .93rem;
                   margin: 14px 0 6px; color: var(--blue-900); }
.btn.danger-btn { background: #8a2b2b; border-color: #8a2b2b; margin-top: 16px; }
.btn.danger-btn:hover { background: #a33; }
.pf-foot { margin-top: 26px; font-size: .93rem; }

/* ---- Public member profile (/member/<username>) -------------------------- */
.member-hero { background: linear-gradient(145deg, var(--blue-800), var(--blue-900));
               color: #fff; border-bottom: 3px solid var(--gold); }
.member-hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px;
                     display: flex; gap: 20px; align-items: center; }
.member-avatar { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
                 background: rgba(255,255,255,.10); display: flex; align-items: center;
                 justify-content: center; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-avatar span { font-size: 2.4rem; font-weight: 800; color: var(--gold); }
.member-hero-text { min-width: 0; }
.member-hero h1 { margin: 0 0 6px; font-size: 1.9rem; line-height: 1.15; letter-spacing: -.02em; }
.member-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px;
               font-size: .9rem; color: rgba(255,255,255,.82); }
.member-meta span { display: inline-block; }
.member-handle { color: #cfe0f0; }

.member-page { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 40px; }
.member-cols { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
.member-main { min-width: 0; }
.member-bio { line-height: 1.7; }
.member-empty { color: var(--ink-soft); line-height: 1.6; }

.member-reviews { list-style: none; margin: 0; padding: 0; }
.member-review { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
                 box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.member-review-head { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center;
                      gap: 4px 10px; font-size: .93rem; }
.member-review-head a { font-weight: 700; color: var(--blue-900); }
.member-review-date { color: var(--ink-soft); font-size: .84rem; }
.member-review-title { margin: 0 0 6px; font-weight: 700; font-size: 1rem; }
.member-review-body { line-height: 1.65; font-size: .95rem; }

.member-side .biz-card { margin-bottom: 16px; }
.member-privacy { font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.member-privacy-card { background: var(--blue-050); border-color: #cfe0f0; }

@media (max-width: 820px) {
    .member-cols { grid-template-columns: 1fr; }
    .member-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .member-hero h1 { font-size: 1.55rem; }
}
@media (max-width: 560px) {
    .pf-avatar-block { padding: 14px; gap: 14px; }
}

/* ===== engage ===== */
/* ==========================================================================
   Engagement — follow / like buttons and the blocklist page   (social tier 1)

   APPEND to the host stylesheet after the existing directory / owner rules.
   Do not edit site.css in place from this module; paste this block at the end.

   Uses ONLY custom properties the host theme already defines — no new tokens:
     --card --line --bg --ink --ink-soft --blue-050 --blue-600 --blue-900
     --gold --radius --radius-sm --shadow
   Every one has a literal fallback so the buttons are still legible if this
   block is dropped into a hub whose theme is missing one of them.
   ========================================================================== */

/* ---- The button itself ---------------------------------------------------
   One class for all five states so the markup does not change when a visitor
   signs in: a <button> inside a form, an <a> for signed-out, and a <span> when
   there is nothing to press. Same box, same alignment, no layout shift. */
.engage { display: inline-block; margin: 0; }

.engage-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    font: inherit; font-size: .86rem; font-weight: 600; line-height: 1.2;
    color: var(--ink-soft, #4a5866);
    background: var(--card, #fff);
    border: 1px solid var(--line, #e2e8ee);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    /* A colour change alone is not a state change for everyone — the label
       text changes too (Like -> Liked), and aria-pressed carries it to a
       screen reader. */
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.engage-btn:hover,
.engage-btn:focus-visible {
    border-color: var(--blue-600, #3a6076);
    color: var(--blue-900, #1b2a33);
    text-decoration: none;
}
.engage-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(58, 96, 118, .16);
}
.engage-btn[disabled] { opacity: .6; cursor: progress; }

/* Pressed. aria-pressed is the source of truth; this is only its appearance,
   which is why the selector reads the attribute as well as the class — if the
   script ever updates one without the other, the mismatch shows up. */
.engage-btn.is-on,
.engage-btn[aria-pressed="true"] {
    background: var(--blue-050, #eef3f8);
    border-color: var(--blue-600, #3a6076);
    color: var(--blue-900, #1b2a33);
}

.engage-icon { font-size: .95rem; line-height: 1; }
.engage-btn.is-on .engage-icon,
.engage-btn[aria-pressed="true"] .engage-icon { color: var(--gold, #b8912f); }

.engage-count {
    font-variant-numeric: tabular-nums;      /* the number does not jiggle on 9 -> 10 */
    font-weight: 700;
    font-size: .8rem;
    color: var(--ink-soft, #4a5866);
    background: var(--bg, #f2f4f7);
    border-radius: 999px;
    padding: 1px 8px;
}
.engage-btn.is-on .engage-count,
.engage-btn[aria-pressed="true"] .engage-count {
    background: rgba(58, 96, 118, .12);
    color: var(--blue-900, #1b2a33);
}

/* Nothing to press: your own words, or an account that cannot write yet. */
.engage-btn.is-static { cursor: default; }
.engage-btn.is-static:hover { border-color: var(--line, #e2e8ee); color: var(--ink-soft, #4a5866); }
.engage-btn.is-muted { opacity: .75; }

/* The follow button on a business hero carries more weight than a like on a
   post — it is the primary action on that page. */
.engage-btn-strong {
    padding: 8px 16px;
    font-size: .9rem;
    color: var(--blue-900, #1b2a33);
}
.biz-hero .engage-btn-strong {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}
.biz-hero .engage-btn-strong:hover,
.biz-hero .engage-btn-strong:focus-visible { border-color: #fff; color: #fff; }
.biz-hero .engage-btn-strong.is-on,
.biz-hero .engage-btn-strong[aria-pressed="true"] {
    background: var(--gold, #b8912f);
    border-color: var(--gold, #b8912f);
    color: #1b2a33;
}
.biz-hero .engage-count { background: rgba(255, 255, 255, .18); color: #fff; }
.biz-hero .engage-btn-strong.is-on .engage-count { background: rgba(27, 42, 51, .16); color: #1b2a33; }

/* A row of actions under a post or review. */
.engage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.engage-row .rev-actions { margin: 0; }

/* ---- Block / unblock ----------------------------------------------------- */
.engage-block { margin-top: 14px; }
.engage-block form { margin: 0; }
.engage-block-note {
    margin: 0 0 6px;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--ink-soft, #4a5866);
}

/* ---- The member's own blocklist page -------------------------------------- */
.blocks-card { max-width: 620px; }
.blocks-list { list-style: none; margin: 16px 0 0; padding: 0; }
.blocks-item {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 0;
    border-bottom: 1px solid var(--line, #e2e8ee);
}
.blocks-item:last-child { border-bottom: 0; }
.blocks-item form { margin: 0 0 0 auto; }
.blocks-name { font-weight: 700; color: var(--blue-900, #1b2a33); }
.blocks-since { font-size: .82rem; color: var(--ink-soft, #4a5866); }

@media (max-width: 560px) {
    .blocks-item { align-items: flex-start; }
    .blocks-item form { margin-left: 0; width: 100%; }
}

/* Respect a stated preference for less motion. */
@media (prefers-reduced-motion: reduce) {
    .engage-btn { transition: none; }
}

/* ===== comments ===== */
/* ---- Comments on posts and reviews --------------------------------------
   Append to the bundle that becomes assets/site.css (modules.css is where the
   review block lives, so this belongs next to it). Uses only tokens that are
   already defined: --card --line --ink --ink-soft --bg --blue-050 --blue-600
   --blue-900 --gold --radius --radius-sm --shadow. No new custom properties,
   no colour that is not already on the page.

   .sr-only, .auth-input, .auth-alert, .btn, .linklike, .notice and .req all
   come from the existing sheets and are reused rather than re-declared.       */

.cmt-thread { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.cmt-heading { margin: 0 0 10px; font-size: .86rem; font-weight: 700; letter-spacing: .04em;
               text-transform: uppercase; color: var(--ink-soft); }
.cmt-alert { margin-bottom: 12px; }

.cmt-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.cmt-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
            padding: 10px 12px; scroll-margin-top: 80px; }
.cmt-item.is-gone { background: transparent; border-style: dashed; }

.cmt-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.cmt-author { font-weight: 700; font-size: .89rem; color: var(--blue-900); }
.cmt-date { font-size: .78rem; color: var(--ink-soft); }
.cmt-badge { font-size: .7rem; color: var(--ink-soft); border: 1px solid var(--line);
             border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.cmt-badge.warn { background: #fdf3e2; border-color: #ecd7a8; color: #8a6414; }
.cmt-badge.bad  { background: #fbeceC; border-color: #e6c3c3; color: #8a2b2b; }
.cmt-note { margin: 0 0 6px; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }

.cmt-body { font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; }
.cmt-body p { margin: 0 0 8px; }
.cmt-body p:last-child { margin-bottom: 0; }
.cmt-tombstone { margin: 0; font-size: .84rem; font-style: italic; color: var(--ink-soft); }

.cmt-actions { margin-top: 7px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
               font-size: .8rem; }
.cmt-actions a, .cmt-actions .linklike { color: var(--ink-soft); font-size: .8rem; }
.cmt-actions a:hover, .cmt-actions .linklike:hover { color: var(--blue-600); }
.cmt-actions .linklike.danger:hover { color: #8a2b2b; }
.cmt-actions form { display: inline; margin: 0; }

.cmt-replies { list-style: none; margin: 10px 0 0 0; padding: 0 0 0 14px;
               border-left: 2px solid var(--line); display: grid; gap: 8px; }
.cmt-replies .cmt-item { background: var(--bg); }

.cmt-reply { margin-top: 8px; }
.cmt-reply > summary { cursor: pointer; font-size: .8rem; color: var(--ink-soft);
                       list-style: none; display: inline-block; }
.cmt-reply > summary::-webkit-details-marker { display: none; }
.cmt-reply > summary:hover { color: var(--blue-600); }
.cmt-reply > summary:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px;
                                     border-radius: var(--radius-sm); }

.cmt-form { margin-top: 8px; }
.cmt-form textarea.auth-input { resize: vertical; line-height: 1.55; font-size: .92rem; }
.cmt-form-new { margin-top: 4px; }
.cmt-form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cmt-btn { padding: 7px 15px; font-size: .86rem; }
.cmt-hint { font-size: .78rem; color: var(--ink-soft); }
.cmt-signin, .cmt-empty { margin: 4px 0 0; font-size: .86rem; color: var(--ink-soft); }

/* ---- "Your comments" (account) ------------------------------------------ */
.cmt-mine { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.cmt-mine-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
                 padding: 13px 15px; box-shadow: var(--shadow); }
.cmt-mine-where { margin: 0 0 6px; font-size: .84rem; color: var(--ink-soft); }
.cmt-mine-body { margin: 0; font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; }

@media (max-width: 560px) {
    .cmt-replies { padding-left: 10px; }
    .cmt-form-foot { align-items: flex-start; }
}

/* ===== feed ===== */
/* ---- Activity feed + notifications (social tier 1) -----------------------
   Append to the built site.css, after directory.css / auth.css / owner.css.

   Uses ONLY the custom properties those files already define
   (--card, --line, --ink, --ink-soft, --bg, --radius, --radius-sm, --shadow,
   --blue-050, --blue-600, --blue-900, --gold, --green-050, --green-700) and
   reuses the existing .sr-only, .linklike, .inline-form, .notice, .dir-pager,
   .stars and .btn classes. No new tokens, nothing site-specific.
--------------------------------------------------------------------------- */

/* ---- nav badge ---------------------------------------------------------- */

.nav-notif { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: #8a2b2b; color: #fff;
    font-size: .72rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* In the dark site header the link colour is inherited; the pill supplies its
   own contrast so it reads on either background. */
.site-nav .nav-notif.has-unread { font-weight: 700; }

/* ---- shared toolbar ----------------------------------------------------- */

.notif-toolbar {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; justify-content: space-between;
    margin: 0 0 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
}
.notif-toolbar form { margin: 0; }

/* ---- notification inbox ------------------------------------------------- */

.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
    display: grid;
    grid-template-columns: 26px 40px 1fr auto;
    align-items: start; gap: 12px;
    padding: 13px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 9px;
}
.notif-item.is-unread { border-left: 3px solid var(--blue-600); background: var(--blue-050, #eef3f8); }

.notif-icon { font-size: 1.05rem; line-height: 1.5; text-align: center; color: var(--ink-soft); }
.notif-icon.star { color: var(--gold); }
.notif-icon.warn { color: #8a6414; }
.notif-icon.info { color: var(--blue-600); }
.notif-icon.ok   { color: var(--green-700, #2c6e5e); }

.notif-avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: var(--blue-050, #eef3f8);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue-900); font-weight: 800; font-size: 1rem;
}
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.notif-body { min-width: 0; }
.notif-summary { display: block; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.notif-when { display: block; margin-top: 3px; font-size: .82rem; color: var(--ink-soft); }
.notif-new {
    display: inline-block; margin-left: 7px; padding: 1px 8px;
    border-radius: 999px; background: var(--blue-900); color: #fff;
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.notif-actions { white-space: nowrap; font-size: .9rem; }

/* ---- activity feed ------------------------------------------------------ */

.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-item {
    display: flex; gap: 14px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
}
.feed-avatar {
    flex: 0 0 46px; width: 46px; height: 46px;
    border-radius: var(--radius-sm); overflow: hidden;
    background: linear-gradient(145deg, var(--blue-700, #3a6076), var(--blue-900, #1b2a33));
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-weight: 800; font-size: 1.25rem;
}
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feed-body { min-width: 0; flex: 1 1 auto; }
.feed-meta {
    margin: 0 0 5px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    font-size: .89rem; color: var(--ink-soft);
}
.feed-actor { font-weight: 700; color: var(--blue-900); }
.feed-verb  { color: var(--ink-soft); }
.feed-when  { color: var(--ink-soft); font-size: .82rem; }
.feed-pin   { font-size: .82rem; }

.feed-title { margin: 0 0 7px; font-size: 1.06rem; line-height: 1.35; }
.feed-title a { color: var(--blue-900); }

.feed-stars { margin: 0 0 7px; }

.feed-media {
    margin: 0 0 9px; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg); max-height: 260px;
}
.feed-media img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block; }

.feed-text { line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.feed-text p { margin: 0 0 8px; }
.feed-text p:last-child { margin-bottom: 0; }

/* Long bodies are shortened VISUALLY. The whole text is in the DOM — nothing a
   member wrote is thrown away server-side to make a card fit. */
.feed-text.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-link { margin: 9px 0 0; font-size: .9rem; }

.feed-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 22px; padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: .93rem;
}
.feed-page-no { color: var(--ink-soft); font-size: .86rem; }
.feed-pager .muted { color: #b3bcc6; }

@media (max-width: 560px) {
    .notif-item { grid-template-columns: 24px 1fr; row-gap: 8px; }
    .notif-avatar { display: none; }
    .notif-actions { grid-column: 2; text-align: right; }
    .feed-item { padding: 13px; gap: 11px; }
    .feed-avatar { flex-basis: 38px; width: 38px; height: 38px; font-size: 1.05rem; }
    .feed-text.clamp { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* ---- Report a single gallery picture ------------------------------------
   Deliberately quiet: a takedown link should be findable without inviting
   idle use, and without competing with the owner's own caption. It stays
   keyboard-reachable and meets contrast at this size. */
.biz-gallery-report {
    display: inline-block; margin-top: 4px;
    font-size: .74rem; color: var(--ink-soft); text-decoration: none; opacity: .75;
}
.biz-gallery-report:hover,
.biz-gallery-report:focus-visible { opacity: 1; text-decoration: underline; color: var(--ink); }
.biz-gallery-report:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
/* A category with nothing in it: shown so the directory advertises its scope,
   but not a link, so nobody clicks through to a blank page. Muted rather than
   hidden — a hub with one listing still needs to look like a directory. */
.dir-cat.is-empty {
    opacity: .55;
    cursor: default;
    background: transparent;
}
.dir-cat.is-empty:hover { text-decoration: none; }
/* ---- News/search list rows on a phone -------------------------------------
   .list-item is a thumbnail-left / text-right flex row. A mobile rule already
   existed telling the thumb to go full width at <=560px — but nothing ever told
   the CONTAINER to stop being a row, so the thumb took the whole width AS A ROW
   ITEM and the text was pushed out beside it. Measured on /section/news at
   360px: document scrollWidth 447 against a 360 viewport, the whole page
   panning sideways with the left edge of every card cut off.

   Two lines, and they are both needed:
     flex-direction: column  makes the existing thumb rule mean what it says
     min-width: 0            a flex item defaults to min-width:auto, so .li-body
                             refuses to shrink below its longest word and pushes
                             the row wider than its container even when stacked */
@media (max-width: 560px) {
    .list-item { flex-direction: column; }
    .list-item .li-body { min-width: 0; }
}

/* ---- Sponsor message above an article -------------------------------------
   Reads as a sponsor message, not as the newspaper's own voice: tinted panel,
   a rule separating it from the story, smaller and quieter type than the body.
   The label is not decoration — the site owner also owns the advertiser, and a
   house ad that looks like editorial is how a civic hub loses its readers'
   benefit of the doubt. */
.art-sponsor {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
    margin: 0 0 22px; padding: 12px 16px;
    background: var(--blue-050, #eef3f8);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold, #c8952b);
    border-radius: var(--radius-sm, 8px);
}
.art-sponsor-tag {
    flex: 0 0 auto;
    font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #8a6417; background: #fff3d6; border: 1px solid #f0d79a;
    border-radius: 999px; padding: 2px 9px;
}
.art-sponsor-copy {
    flex: 1 1 220px; margin: 0;
    font-size: .92rem; line-height: 1.5; color: var(--ink-soft);
}
.art-sponsor-copy strong { color: var(--blue-900, #123a63); }
.art-sponsor-copy a { color: var(--blue-600); font-weight: 700; white-space: nowrap; }

@media (max-width: 560px) {
    .art-sponsor { padding: 11px 13px; margin-bottom: 18px; }
    /* The phone number is the point of the ad on a phone — give it a real tap
       target rather than a link the size of the surrounding text. */
    .art-sponsor-copy a { display: inline-block; padding: 4px 0; }
}

/* ---- Curated graphics must not be cropped ---------------------------------
   The hero and thumbnail art is not photography. Every one of these files is
   1200x630 (= 40:21) and CARRIES TEXT: the section label and strapline down
   the left, and the "<City>, Ohio - Community Information Hub" caption along
   the bottom. object-fit:cover in a container of any other ratio therefore
   does not trim empty margin, it cuts words in half.

   Measured before this rule, on live pages:
     .article-hero   16/7  (2.286) vs 1.905  -> 8.3% off TOP and BOTTOM,
                     i.e. y<52 and y>578 of a 630px image invisible, which
                     sliced the bottom caption through the middle.
     .li-thumb img   150x100 (1.5) vs 1.905  -> 10.6% off EACH SIDE,
                     i.e. x<127 and x>1073 invisible, so every line lost its
                     first characters: "ROADVIEW HEIGHTS TODAY", "ews",
                     "al news & community updates".

   Fix is to match the artwork rather than to move the artwork. 40/21 IS
   1200/630 exactly, so nothing is cropped at any width, and it keeps working
   if a curated graphic is redrawn later.

   The thumbnail keeps its 100px height and gains width instead, so list rows
   do not change height. Left as they are, because they crop nothing that
   matters: .lead-hero on the home page (2.0 -> 2.4% off top/bottom, which is
   canvas margin) and .card-top (1.78 -> 3.3% off the sides, and the text
   starts at x=72, beyond the cut). */
/* .article-hero ratio is set at its own declaration above, not overridden here. */

.list-item .li-thumb { flex: 0 0 190px; }
.list-item .li-thumb img { width: 100%; height: auto; aspect-ratio: 40/21; }

@media (max-width: 560px) {
    /* Full width already; the existing 16/9 crops 3.3% off the sides and the
       text starts beyond that, but there is no reason to keep two ratios. */
    .list-item .li-thumb, .list-item .li-thumb img { width: 100%; aspect-ratio: 40/21; flex-basis: auto; }
}

/* ---- Home-page camera tile: stop the caption being clipped ----------------
   Two different tile markups exist. /live-cameras wraps the image in a
   .cam-frame, so the figure is [div.cam-frame, figcaption] and its height is
   frame + caption - the caption shows. The home-page widget has no wrapper:
   [img.cam-img, span.cam-live, figcaption]. There .cam-img's height:100%
   resolves against the figure, the image takes the entire box, and the
   caption is laid out starting exactly at the figure's bottom edge - where
   .cam-tile's own overflow:hidden makes it invisible.

   Measured on garfieldheights.info home @390 before this rule:
     figure  287px tall
     img     285px  (top 4569 -> bottom 4854)
     caption 111px  starting at 4854, i.e. entirely below the figure
   Result: the camera rendered with no name and no location - the only text a
   reader got was "Images: Ohio DOT (OHGO)". The /live-cameras page was
   unaffected, which is why this survived: the page dedicated to cameras
   looked right.

   Scoped with > so it only touches the unwrapped case; .cam-frame .cam-img
   still fills its frame as intended. */
.cam-tile > .cam-img { height: auto; }

/* ==========================================================================
   Community noticeboard.
   Built on the existing tokens (--card, --line, --radius, --ink-soft ...) so
   the board reads as part of the site rather than a bolted-on module. Nothing
   here restyles an existing class; every selector below is new.
   ========================================================================== */

.notice-wrap,
.notice-form-wrap { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 40px; }
.notice-form-wrap { max-width: 720px; }

/* --- flash messages. The public side had no .flash rule at all, so a message
       set by a redirect rendered as unstyled body text. --- */
.flash { border-radius: var(--radius-sm); padding: 11px 14px; margin: 0 0 16px; font-size: .95rem; }
.flash.ok  { background: var(--green-050); border: 1px solid #bfded4; color: #1f5747; }
.flash.err { background: #fdeceb; border: 1px solid #f3c4c0; color: #8d2f27; }

/* --- filter chips --- */
.notice-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
              justify-content: space-between; margin: 0 0 18px; }
.notice-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-kind { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
               border: 1px solid var(--line); border-radius: 999px; background: var(--card);
               color: var(--blue-800); text-decoration: none; font-size: .9rem; }
.notice-kind span { color: var(--ink-soft); font-size: .82rem; }
.notice-kind:hover { border-color: var(--blue-500); }
.notice-kind.on { background: var(--blue-800); border-color: var(--blue-800); color: #fff; }
.notice-kind.on span { color: #cfe0ea; }
/* Shown, but plainly not clickable - see the view for why empty kinds are
   still listed. */
.notice-kind.empty { opacity: .5; cursor: default; }
.notice-cta { white-space: nowrap; }

/* --- the board --- */
.notice-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.notice-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
               padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.notice-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
               font-size: .82rem; color: var(--ink-soft); }
.notice-tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .76rem;
              font-weight: 600; background: var(--blue-050); color: var(--blue-700); }
.notice-tag.tag-lost_found { background: #fdf1e3; color: #92601f; }
.notice-tag.tag-event      { background: var(--green-050); color: var(--green-700); }
.notice-tag.tag-for_sale   { background: #eef0fb; color: #414c8c; }
.notice-tag.tag-staff      { background: var(--blue-800); color: #fff; }
.notice-title { margin: 0; font-size: 1.12rem; line-height: 1.35; color: var(--blue-900); }
.notice-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-sm); }
.notice-body { font-size: .95rem; line-height: 1.6; color: var(--ink); }
.notice-body p:last-child { margin-bottom: 0; }
.notice-contact { margin: 0; font-size: .9rem; color: var(--ink-soft);
                  background: var(--bg); border-radius: var(--radius-sm); padding: 8px 10px; }
.notice-foot-row { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
                   display: flex; justify-content: space-between; align-items: center;
                   gap: 10px; font-size: .84rem; color: var(--ink-soft); }
.notice-report { color: var(--ink-soft); text-decoration: underline; }

/* --- the empty board. This is the state the page ships in, so it gets real
       styling rather than being treated as an edge case. --- */
.notice-empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
                padding: 34px 24px; text-align: center; }
.notice-empty h2 { margin: 0 0 10px; color: var(--blue-900); }
.notice-empty p { max-width: 52ch; margin: 0 auto 12px; color: var(--ink-soft); line-height: 1.6; }

/* --- forms --- */
.notice-form label,
.admin-form label { display: block; margin: 16px 0 5px; font-weight: 600; color: var(--blue-900); font-size: .94rem; }
.notice-form input[type=text], .notice-form input[type=email], .notice-form select,
.notice-form textarea, .notice-form input[type=file] { width: 100%; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--card); }
.notice-form textarea { resize: vertical; }
.notice-form .opt, .opt { font-weight: 400; color: var(--ink-soft); font-size: .86rem; }
.field-hint { margin: 5px 0 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.notice-you { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px 18px; margin: 22px 0 0; }
.notice-you legend { padding: 0 8px; font-weight: 600; color: var(--blue-900); }
.notice-signedin { margin: 20px 0 0; padding: 12px 14px; background: var(--blue-050);
                   border-radius: var(--radius-sm); font-size: .93rem; }
.notice-form button { margin-top: 22px; }

.notice-note { background: var(--blue-050); border-left: 4px solid var(--blue-500);
               border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 22px; }
.notice-note p { margin: 0 0 8px; line-height: 1.6; font-size: .94rem; }
.notice-note p:last-child { margin-bottom: 0; }
.notice-token-link { word-break: break-all; font-size: .88rem; }
.notice-preview { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
                  padding: 16px; margin: 0 0 20px; }
.notice-preview h2 { margin: 0 0 8px; font-size: 1.1rem; }
.notice-foot { margin: 26px 0 0; font-size: .87rem; color: var(--ink-soft); line-height: 1.6; }

/* --- pager, used by the board and available to anything else --- */
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 26px 0 0; }
.pager-at { font-size: .88rem; color: var(--ink-soft); }

/* --- "Your notices" --- */
.account-wrap { max-width: 900px; margin: 0 auto; padding: 18px 16px 40px; }
.acct-table { width: 100%; border-collapse: collapse; margin: 14px 0 26px; font-size: .93rem; }
.acct-table th, .acct-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
                                 vertical-align: top; }
.acct-table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.acct-table .muted { color: var(--ink-soft); font-size: .86rem; }
.inline-form { display: inline; }

/* --- the nav entry added for members --- */
.site-nav .nav-account { font-weight: 600; }

/* ==========================================================================
   Reply privately — bounded contact threads. Built on the existing tokens.
   ========================================================================== */

.msg-list { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.msg { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
       background: var(--card); max-width: 46em; }
.msg-mine { margin-left: auto; background: var(--blue-050); border-color: #cfdfea; }
.msg-theirs { margin-right: auto; }
.msg-meta { font-size: .8rem; color: var(--ink-soft); margin-bottom: 6px; }
.msg-body { margin: 0; line-height: 1.6; font-size: .95rem; white-space: normal; }
.msg-body.muted { color: var(--ink-soft); }
.msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0;
               padding-top: 14px; border-top: 1px solid var(--line); }
.msg-report { margin: 20px 0 0; border: 1px solid var(--line); border-radius: var(--radius);
              padding: 10px 14px; background: var(--bg); }
.msg-report summary { cursor: pointer; font-weight: 600; color: var(--blue-900); }
.msg-report .notice-form { margin-top: 10px; }
.msg-report textarea, .msg-report select { width: 100%; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }

/* "Reply privately" sits next to Report on a notice card. Deliberately the
   stronger of the two - it is the action that lets somebody stop publishing
   their phone number. */
.notice-reply { color: var(--blue-700); font-weight: 600; text-decoration: underline; }