/* ============================================================
   SHARED FRAMEWORK — zero hex codes; all colors via variables.css
   Written with logical properties so one file serves LTR + RTL.
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }html{ font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (max-width: 640px) {html{ font-size: 16px; } }body{
    margin: 0;
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
}.container{ max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space); }a{ color: var(--brand); text-decoration: none; }a:hover{ text-decoration: underline; }img{ max-width: 100%; height: auto; }/* ---- header / nav — light, sticky, glass; signed-in state is a visible chip ---- */
.site-header{
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--text);
    border-block-end: 1px solid var(--border);
}.header-inner{ display: flex; align-items: center; justify-content: space-between; padding-block: calc(var(--space) * 0.6); gap: var(--space); }.brand{ display: flex; align-items: center; gap: calc(var(--space) * 0.5); color: var(--brand-dark); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }.brand:hover{ text-decoration: none; }.brand-logo{ height: 36px; width: auto; }.site-nav{ display: flex; align-items: center; gap: calc(var(--space) * 0.9); flex-wrap: wrap; }.site-nav a{ color: var(--text); font-weight: 500; padding-block: 0.3rem; }.site-nav a:hover{ color: var(--brand); text-decoration: none; }.nav-cta{ color: var(--text-light) !important; font-weight: 600; }.nav-toggle{ display: none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; font-size: 1.1rem; }/* signed-in identity chip — you always know who you are */
.user-chip{ display: inline-flex; align-items: center; gap: 0.5rem; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); border-radius: 999px; padding: 0.25rem 0.85rem 0.25rem 0.25rem; color: var(--text); text-decoration: none; }.user-chip:hover{ border-color: var(--brand); text-decoration: none; }.user-avatar{ display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--text-light); font-weight: 700; font-size: 0.95rem; }.user-name{ font-weight: 600; font-size: 0.95rem; }/* ---- hero ---- */
.hero{ background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, var(--surface)), var(--surface)); border-block-end: 1px solid var(--border); padding: calc(var(--space) * 3) var(--space); text-align: center; }.hero h1{ margin-block: 0 calc(var(--space) * 0.5); color: var(--brand-dark); font-size: 2.2rem; letter-spacing: -0.02em; }.hero p{ color: var(--text-muted); max-width: 46rem; margin-inline: auto; font-size: 1.1rem; }/* ---- cards / grids ---- */
.cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space); margin-block: var(--space); }.card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 1.25); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; }.card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }.card h3{ margin-block-start: 0; color: var(--brand-dark); }.card .price{ font-weight: 700; color: var(--brand); }.listing-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space); margin-block: var(--space); }.listing-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 1.25); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.35rem; transition: box-shadow 0.2s ease, transform 0.2s ease; }.listing-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }.listing-card.featured{ border-color: var(--accent); box-shadow: var(--shadow); }.listing-card .meta{ color: var(--text-muted); font-size: 0.9rem; }/* ---- buttons — pills, confident, 44px touch targets ---- */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 999px; padding: 0.65rem 1.3rem; border: 1px solid transparent; cursor: pointer; font-size: 1rem; font-weight: 600; min-height: 44px; line-height: 1.3; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }.btn:hover{ text-decoration: none; transform: translateY(-1px); }.btn-primary{ background: var(--brand); color: var(--text-light); box-shadow: var(--shadow-sm); }.btn-primary:hover{ background: var(--brand-dark); text-decoration: none; }.btn-danger{ background: var(--accent); color: var(--text-light); }.btn-ghost{ background: var(--surface); color: var(--brand); border-color: var(--border); }.btn-ghost:hover{ border-color: var(--brand); }.btn-sm{ padding: 0.5rem 0.9rem; font-size: 0.95rem; min-height: 44px; }/* 44px minimum tap target */

/* ---- keyboard / focus visibility — easy to see where you are ---- */
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}input:focus, select:focus, textarea:focus{ border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }/* ---- tables — card-contained, readable, never wider than the view ----
   main.js wraps every table in .table-wrap and copies header text into
   data-label attributes, so narrow screens get stacked rows with labels
   instead of a sideways-squished table. */
.table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: var(--space);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}table{ width: 100%; border-collapse: collapse; margin: 0; }th, td{ text-align: start; padding: 0.85rem 1rem; border-block-end: 1px solid var(--border); vertical-align: top; }td{ overflow-wrap: break-word; word-break: break-word; }tr:last-child td{ border-block-end: none; }th{
    background: var(--surface);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    border-block-end: 2px solid var(--border);
    white-space: nowrap;
}tbody tr:nth-child(even){ background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }tbody tr:hover{ background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }td .btn, td form{ margin-block: 0.15rem; }

/* narrow screens: each row becomes a labeled card — no horizontal scrolling needed */
@media (max-width: 720px) {.table-wrap{ border: none; background: transparent; box-shadow: none; overflow-x: visible; }.table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap td{ display: block; width: 100%; }.table-wrap thead{ position: absolute; inset-inline-start: -9999px; height: 0; overflow: hidden; }.table-wrap tr{
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        margin-block-end: 0.75rem;
        padding: 0.35rem 0;
    }.table-wrap tr:hover{ background: var(--surface); }.table-wrap tbody tr:nth-child(even){ background: var(--surface); }.table-wrap td{ border-block-end: 1px dashed var(--border); padding: 0.55rem 1rem; }.table-wrap td:last-child{ border-block-end: none; }.table-wrap td::before{
        content: attr(data-label);
        display: block;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        margin-block-end: 0.15rem;
    }.table-wrap td[data-label=""]::before{ content: none; }
}/* ---- forms ---- */
form .field{ margin-block-end: var(--space); }label{ display: block; margin-block-end: 0.3rem; font-weight: 600; font-size: 0.9rem; }input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], select, textarea{
    width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text); font: inherit;
}textarea{ min-height: 130px; }.form-hint{ color: var(--text-muted); font-size: 0.85rem; }.hp{ position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }/* ---- badges / alerts ---- */
.badge{ display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text); }/* v5.9.91: event tags — borderless tinted pills that LINK to the filtered list. No border + brand-tinted fill marks them as navigation, not status labels (Nielsen: links need an action cue; the underline-on-hover supplies it). 44px min height keeps the tap target honest. */
.event-tags{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }
.event-tag{ display: inline-flex; align-items: center; min-height: 44px; padding: 0.3rem 0.5rem; border-radius: 999px; border: none; font-size: 0.95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; color: var(--brand-dark); }
.event-tag:hover, .event-tag:focus{ text-decoration-thickness: 2px; color: var(--brand); }
.event-tag-accent{ color: var(--brand-dark); }.badge-featured{ background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--brand-dark); border-color: var(--accent); }.badge-ok{ background: var(--success-bg); color: var(--success-text); border-color: var(--success-text); }.alert{ max-width: var(--max-width); margin: var(--space) auto; padding: 0.7rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); }.alert-success{ background: var(--success-bg); color: var(--success-text); border-color: var(--success-text); }.alert-error{ background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--brand-dark); border-color: var(--accent); }.alert-info{ background: var(--surface); color: var(--text); }/* ---- news / jobs / misc ---- */
.news-card{ border-block-end: 1px solid var(--border); padding-block: var(--space); }.news-card .source{ color: var(--text-muted); font-size: 0.85rem; }.job-row{ display: flex; justify-content: space-between; gap: var(--space); align-items: baseline; flex-wrap: wrap; }.job-row .company{ color: var(--text-muted); }.filter-bar{ display: flex; gap: calc(var(--space) * 0.5); flex-wrap: wrap; margin-block: var(--space); }.page-head{ margin-block: calc(var(--space) * 2) calc(var(--space) * 1.5); max-width: 60rem; }.page-head h1{ font-size: 1.9rem; letter-spacing: -0.02em; margin-block-end: 0.35rem; }.page-head p{ color: var(--text-muted); font-size: 1.05rem; margin-block-start: 0; }/* comfortable rhythm between sections — nothing feels crowded */
main.container > section, main.container > form{ margin-block: calc(var(--space) * 1.75); }main.container > .page-head:first-child{ margin-block-start: calc(var(--space) * 1.75); }.error-page{ text-align: center; padding-block: calc(var(--space) * 3); }/* ---- legal pages ---- */
.legal-page{ max-width: 52rem; white-space: pre-wrap; }/* ---- footer — light and quiet, not a dark slab ---- */
.site-footer{ background: var(--surface); color: var(--text-muted); margin-block-start: calc(var(--space) * 2.5); border-block-start: 1px solid var(--border); }.footer-inner{ display: flex; justify-content: space-between; gap: var(--space); flex-wrap: wrap; padding-block: var(--space); font-size: 0.92rem; }.footer-links a{ color: var(--brand); margin-inline-start: var(--space); }

/* ---- responsive ---- */
@media (max-width: 640px) {/* v5.9.84: hamburger retired on mobile — the module-bar replaces it */.site-nav{ display: none !important; }.header-inner{ flex-wrap: nowrap; }.hero h1{ font-size: 1.5rem; }
}.badge-warn{ background: color-mix(in srgb, var(--accent) 25%, var(--surface)); color: var(--brand-dark); border-color: var(--accent); }.badge-err{ background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--brand-dark); border-color: var(--accent); }.badge-accent{ background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--brand-dark); border-color: var(--accent); }.badge-soft{ background: var(--surface); color: var(--text-muted); }.badge-gold{ background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: var(--text); border-color: var(--gold-dark); }.kind-picker{ border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin: 0 0 1rem; }.kind-picker legend{ font-weight: 600; padding: 0 0.4rem; }.kind-option{ display: flex; gap: 0.5rem; align-items: baseline; font-weight: 400; margin: 0.35rem 0; }.panel{ margin-block: calc(var(--space) * 1.5); padding: calc(var(--space) * 1.25); border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface); box-shadow: var(--shadow-sm); }.panel h2{ margin-top: 0; font-size: 1.35rem; }.panel .form-hint{ font-size: 0.95rem; }/* ---- sticky footer ----
   Short pages: footer pinned to the bottom of the viewport.
   Long pages: footer scrolls naturally after the content (never overlaps). */
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;   /* fallback */
    min-height: 100dvh;  /* mobile-correct viewport height */
}main.container{ flex: 1 0 auto; }/* grows to fill leftover space, pushing the footer down */
.site-footer{ flex-shrink: 0; }/* never squished, never overlapping */

/* ---- stats module ---- */
.spark{ width: 100%; max-width: 420px; height: 40px; display: block; }.stats-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); }
@media (max-width: 640px) {.stats-cols{ grid-template-columns: 1fr; } }.stat-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space); margin-block: var(--space); }.stat-card{ border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: var(--space); background: var(--surface); text-align: center; }.stat-card .num{ font-size: 1.6rem; font-weight: 700; color: var(--brand); }.stat-card .lbl{ font-size: .9rem; color: var(--text-muted); }/* ---- about page ---- */
.about-hero{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 2.5) calc(var(--space) * 2); margin-block: var(--space); text-align: center; box-shadow: var(--shadow-sm); }.about-hero h1{ margin-block: 0 calc(var(--space) * 0.5); color: var(--brand-dark); font-size: 2rem; }.about-lead{ font-size: 1.2rem; color: var(--text-muted); max-width: 44rem; margin-inline: auto; margin-block-end: 0; }.chip-row{ list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--space) * 0.5); justify-content: center; padding: 0; margin-block: var(--space) 0; }.chip{ background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.85rem; color: var(--text-muted); }.about-prose{ max-width: 46rem; margin-inline: auto; margin-block: var(--space); font-size: 1.05rem; line-height: 1.7; }.about-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space); margin-block: var(--space); }.about-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space); box-shadow: var(--shadow-sm); border-block-start: 3px solid var(--accent); }.about-card h3{ margin-block-start: 0; color: var(--brand-dark); }.about-card p{ color: var(--text-muted); margin-block-end: 0; }.about-cta{ text-align: center; margin-block: calc(var(--space) * 1.5); }/* ---- showcase card (v2.10.0) — one tap target, accent bar, tile fallback ---- */
.showcase-card{ display: flex; align-items: stretch; gap: 0; margin-block: var(--space); background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); overflow: hidden; }.showcase-card:hover{ border-color: var(--accent); }.showcase-media{ flex: 0 0 72px; display: flex; align-items: center; justify-content: center; background: var(--bg); }.showcase-media img{ width: 72px; height: 72px; object-fit: cover; display: block; }.showcase-tile{ width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; color: var(--text-light); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }.showcase-body{ display: flex; flex-direction: column; justify-content: center; padding: calc(var(--space) * 0.6) var(--space); min-width: 0; }.showcase-body strong{ color: var(--brand-dark); }.showcase-body span{ color: var(--text-muted); font-size: 0.92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.showcase-evidence{ font-size: 0.9em; color: var(--text-muted); }.showcase-template{ background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: calc(var(--space) * 0.75); white-space: pre-wrap; }.progress{ height: 10px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; margin: 0.5rem 0; }/* ---- admin dashboard: status strip, stat cards, action grid ---- */
.admin-status{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--space); align-items: center; }.admin-status a.badge{ text-decoration: none; }.admin-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 0 0 var(--space); }.admin-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; box-shadow: var(--shadow-sm); text-align: center; }.admin-card-number{ font-size: 1.8rem; font-weight: 700; color: var(--brand-dark); margin: 0; line-height: 1.1; }.admin-card-label{ font-size: 0.95rem; color: var(--text-muted); margin: 0.25rem 0 0; }.admin-actions{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; }.admin-action{ display: block; background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 0.85rem 1rem; text-decoration: none; color: var(--text); }.admin-action:hover, .admin-action:focus{ border-color: var(--accent); box-shadow: var(--shadow-sm); }.admin-action strong{ display: block; font-size: 1.05rem; color: var(--brand-dark); margin-bottom: 0.2rem; }.admin-action span{ font-size: 0.92rem; color: var(--text-muted); line-height: 1.4; }.mod-actions{ display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }/* ---- visual data patterns: bars, feed, action items (no spreadsheet look) ---- */
.bar-list{ display: flex; flex-direction: column; gap: 0.55rem; margin-block: 0.5rem var(--space); }.bar-row{ display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 0.75rem; align-items: center; }.bar-label{ overflow-wrap: break-word; word-break: break-word; }.bar-track{ height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--bg) 60%, var(--surface)); border: 1px solid var(--border); overflow: hidden; }.bar-fill{ display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }.bar-value{ font-weight: 700; color: var(--brand-dark); white-space: nowrap; text-align: end; }
@media (max-width: 560px) {.bar-row{ grid-template-columns: 1fr auto; }.bar-track{ grid-column: 1 / -1; }
}.feed{ display: flex; flex-direction: column; gap: 0.6rem; }.feed-item{ background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--brand); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; display: flex; flex-direction: column; gap: 0.1rem; }.feed-when{ font-size: 0.82rem; color: var(--text-muted); }.feed-main{ font-size: 1rem; }.feed-meta{ font-size: 0.88rem; color: var(--text-muted); overflow-wrap: break-word; word-break: break-word; }.action-list{ display: flex; flex-direction: column; gap: 0.6rem; margin-block: 0.5rem var(--space); }.action-item{ display: flex; align-items: center; justify-content: space-between; gap: var(--space); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.7rem 1rem; box-shadow: var(--shadow-sm); }.action-item .action-text{ display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }.action-item .action-text span{ font-size: 0.9rem; color: var(--text-muted); overflow-wrap: break-word; word-break: break-word; }/* ---- edit cards: labeled field groups instead of input-grid tables ---- */
.edit-card{ border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 0.75) var(--space) var(--space); margin: 0 0 var(--space); background: var(--surface); box-shadow: var(--shadow-sm); }.edit-card legend{ font-weight: 700; padding: 0 0.4rem; color: var(--brand-dark); overflow-wrap: break-word; }.edit-card-new{ border-style: dashed; background: var(--bg); }.edit-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--space); }.edit-grid .field{ margin-block-end: calc(var(--space) * 0.5); }.edit-grid .field-wide{ grid-column: 1 / -1; }.edit-flags{ display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; margin-block-start: 0.35rem; }.edit-flags label{ display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; margin: 0; }.delete-check{ color: var(--accent); }input[type="checkbox"], input[type="radio"]{ width: 1.15em; height: 1.15em; accent-color: var(--brand); }/* ---- status rows (label : value, no table) ---- */
.status-rows{ display: flex; flex-direction: column; gap: 0.6rem; margin-block: 0.5rem var(--space); }.status-row{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--space); flex-wrap: wrap; padding-block-end: 0.6rem; border-block-end: 1px solid var(--border); }.status-row:last-child{ border-block-end: none; padding-block-end: 0; }.status-label{ font-weight: 700; }.status-value{ text-align: end; }/* ---- palette swatches ---- */
.palette-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; margin-block: 0.5rem var(--space); }.palette-chip{ display: flex; align-items: center; gap: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; }.palette-swatch{ flex: 0 0 2.2em; height: 2.2em; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ============================================================
   GAME LAYER (v3.0.0) — levels, XP, quests, badges, power-ups.
   Playful but readable: big type, bouncy motion, high contrast.
   ============================================================ */
@keyframes xp-shine {from{ background-position: 0 0; }to{ background-position: 44px 0; } }
@keyframes pop-in {from{ opacity: 0; transform: translateY(10px) scale(0.98); }to{ opacity: 1; transform: none; } }.level-kicker{ margin: 0 0 0.2rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; opacity: 0.85; font-weight: 700; }.level-number{ font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }.level-name{ font-size: 1.4rem; font-weight: 700; opacity: 0.95; }.level-xp{ margin: 0.3rem 0 0.6rem; font-weight: 700; font-size: 1.05rem; }.level-next{ margin: 0.5rem 0 0; font-size: 0.95rem; opacity: 0.92; }.level-medal{ font-size: 3.4rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }.xp-bar{ height: 16px; border-radius: 999px; background: rgba(255,255,255,0.25); overflow: hidden; }.xp-fill{
    height: 100%; border-radius: 999px; min-width: 0;
    background: repeating-linear-gradient(45deg, var(--gold) 0 11px, color-mix(in srgb, var(--gold) 60%, var(--text-light)) 11px 22px);
    background-size: 44px 100%; animation: xp-shine 1.4s linear infinite;
    transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
}/* quest cards — actions with icons and XP rewards */
.quest-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; margin-block: 0.75rem; }.quest-card{
    display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem;
    background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius);
    color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm);
    transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), border-color 0.18s ease, box-shadow 0.18s ease;
    animation: pop-in 0.35s ease both;
}.quest-card:hover, .quest-card:focus-visible{ transform: translateY(-3px) scale(1.01); border-color: var(--brand); box-shadow: var(--shadow); text-decoration: none; }.quest-card:active{ transform: scale(0.98); }.quest-icon{ flex: 0 0 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; border-radius: 1rem; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }.quest-body{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }.quest-body strong{ font-size: 1.05rem; color: var(--brand-dark); }.quest-body span{ font-size: 0.92rem; color: var(--text-muted); line-height: 1.45; }/* admin mission board hero + power-ups */
.mission-hero{
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface));
    border: 1px solid var(--border); border-inline-start: 5px solid var(--brand);
    border-radius: calc(var(--radius) + 4px); padding: calc(var(--space) * 1.5) calc(var(--space) * 2);
    margin-block: calc(var(--space) * 1.75); box-shadow: var(--shadow-sm);
    animation: pop-in 0.35s ease both;
}.mission-hero h1{ margin: 0 0 0.6rem; font-size: 1.9rem; letter-spacing: -0.02em; }.mission-hero .level-kicker{ color: var(--brand); opacity: 1; }.powerups{ display: flex; flex-wrap: wrap; gap: 0.5rem; }.powerup{ display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 999px; font-weight: 600; font-size: 0.92rem; text-decoration: none; border: 1px solid var(--border); background: var(--surface); }.powerup-on{ border-color: var(--success-text); background: var(--success-bg); color: var(--success-text); }.powerup-off{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--brand-dark); }a.powerup:hover{ text-decoration: none; box-shadow: var(--shadow-sm); }.admin-card-icon{ font-size: 1.6rem; margin: 0 0 0.2rem; }.admin-card{ transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s ease; animation: pop-in 0.35s ease both; }.admin-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }/* nav level pill */
.user-level{ font-size: 0.75rem; font-weight: 800; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--text-light); border-radius: 999px; padding: 0.1rem 0.5rem; }/* game-feel buttons: press me */
.btn{ box-shadow: var(--shadow-sm); }.btn:active{ transform: scale(0.96); }.btn-primary{ background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 130%); }.btn-primary:hover{ background: var(--brand-dark); }/* progress bars thicker and animated everywhere */
.progress{ height: 14px; border-radius: 999px; }/* gentle entrance for panels and cards */
.panel, .edit-card, .action-item{ animation: pop-in 0.3s ease both; }

@media (prefers-reduced-motion: reduce) {.xp-fill{ animation: none; }.quest-card, .admin-card, .panel, .edit-card, .action-item, .mission-hero{ animation: none; }.quest-card, .admin-card, .card, .listing-card, .btn{ transition: none; }
}/* ---- events calendar (v2.12.0) ---- */
.event-card{ border-inline-start: 3px solid var(--accent); }.event-date{ color: var(--accent); margin-block-end: 0.25rem; }/* ---- news cards (v2.13.0) — horizontal rows, image or deliberate tile ---- */
.news-card-row{ display: flex; gap: var(--space); align-items: stretch; }.news-thumb{ flex: 0 0 140px; display: block; border-radius: var(--radius-sm); overflow: hidden; }.news-thumb img{ width: 140px; height: 100%; min-height: 96px; object-fit: cover; display: block; }.news-tile{ width: 140px; min-height: 96px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; color: var(--text-light); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }.season-calving .news-tile{ background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%); }.season-bull-sales .news-tile{ background: linear-gradient(135deg, var(--accent) 0%, var(--brand-dark) 100%); }.season-pasture .news-tile{ background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%); }.season-fall-run .news-tile{ background: linear-gradient(135deg, var(--accent) 0%, var(--brand) 100%); }.season-bred-cows .news-tile{ background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); }.news-body{ min-width: 0; }.news-hero img{ width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius); }.herd-hero img{ width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: var(--radius); }
.kw-list{ list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .2rem 0 .4rem; }.kw-list li{ border: 2px solid var(--border); border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; background: var(--surface); }
@media (max-width: 640px) {.news-card-row{ flex-direction: column; }.news-thumb, .news-thumb img, .news-tile{ width: 100%; } }

/* ============================================================
   PROGRESS-MAP GAME LAYER (v4.0.0) — warm playful world.
   Player topbar, step map, big 3D CTA, bottom HUD (member+admin),
   town-hall buildings, celebration overlay. Mobile-first.
   ============================================================ */
@keyframes xp-shine {from{ background-position: 0 0; }to{ background-position: 44px 0; } }
@keyframes pulse-ring {0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }50%{ box-shadow: 0 0 0 14px transparent; } }
@keyframes gem-pop {50%{ transform: scale(1.18); } }/* player topbar (member dashboard header) */
.game-topbar{
    display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: var(--text-light); border-radius: var(--radius); margin-block-start: calc(var(--space) * 1.5);
    box-shadow: var(--shadow);
}.game-topbar .avatar{ width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; color: var(--text-light); background: linear-gradient(135deg, var(--sun), var(--accent)); }.game-topbar .who{ flex: 1; min-width: 0; }.game-topbar .who b{ display: block; font-size: 1.02rem; }/* current-step hero + big 3D call-to-action */
.hero-now{
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--text-light);
    border-radius: var(--radius); padding: calc(var(--space) * 1.5); margin-block: var(--space);
    box-shadow: var(--shadow); animation: pop-in 0.35s ease both;
}.hero-now .kicker{ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; font-weight: 800; margin: 0 0 0.25rem; }.hero-now h2{ font-size: 1.35rem; margin: 0 0 0.4rem; color: var(--text-light); }.hero-now p{ font-size: 0.95rem; opacity: 0.93; line-height: 1.5; margin: 0 0 1rem; }.big-cta{
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
    background: var(--gold); color: var(--text); font-weight: 800; font-size: 1.08rem;
    border: none; border-radius: 999px; padding: 0.95rem 1.25rem; cursor: pointer; text-decoration: none;
    box-shadow: 0 6px 0 var(--gold-dark); transition: transform 0.12s ease, box-shadow 0.12s ease;
}.big-cta:hover{ text-decoration: none; filter: brightness(1.05); }.big-cta:active{ transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-dark); }/* "Your move" panel — one storyline, one action, action FIRST (v5.5) */
.value-prop{ padding: var(--space); }.value-prop .vp-tag{ font-size: 1.05rem; font-weight: 700; opacity: 1; margin-bottom: 0.9rem; }.value-prop .vp-cta{ margin: 0 0 0.5rem; }
/* sticky thumb-reach CTA — mobile only, JS reveals it once the hero button
   scrolls away; sits above the member HUD when someone is logged in */
.vp-sticky{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 0.55rem 0.8rem calc(0.55rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(0,0,0,0.12); display: none; }.vp-sticky-member{ bottom: 72px; }.vp-sticky .big-cta{ font-size: 1rem; padding: 0.8rem 1.1rem; }.vp-sticky-lbl{ text-align: center; font-size: 0.72rem; color: var(--text-muted); margin: 0.3rem 0 0; }
@media (max-width: 860px) {.vp-sticky.on{ display: block; } }/* the progress map — winding steps{ padding: 0.5rem 0 1rem; }/* bottom HUD — game menu bar, fixed, mobile-first */
.hud{
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    display: flex; justify-content: space-around; gap: 2px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-block-start: 3px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}.hud a{ display: flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; color: var(--text-muted); font-size: 0.8rem; font-weight: 800; padding: 8px 10px 7px; border-radius: 16px; position: relative; min-width: 64px; min-height: 48px; border: 2px solid transparent; }.hud a:active{ transform: scale(0.92); }.hud a:hover{ text-decoration: none; }.hud a.is-active{ color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); box-shadow: 0 3px 0 color-mix(in srgb, var(--brand) 35%, var(--border)); }.hud .hi{ font-size: 1.3rem; line-height: 1; }.hud .sub{ font-size: 0.62rem; font-weight: 700; color: var(--text-muted); }body.has-hud{ padding-block-end: calc(86px + env(safe-area-inset-bottom)); }body.has-hud main.container{ padding-block-end: 1rem; }/* town hall (admin dashboard) */
.needs{ background: color-mix(in srgb, var(--sun) 16%, var(--surface)); border: 3px solid var(--sun); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-block: var(--space); }.needs b{ color: var(--brand-dark); }.needs ul{ margin: 0.4rem 0 0 1.1rem; font-size: 0.92rem; }.town{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; margin-block: 0.75rem; }.bldg{ background: var(--surface); border: 3px solid var(--border); border-radius: var(--radius); padding: 1.1rem 0.8rem; text-align: center; position: relative; box-shadow: var(--shadow-sm); cursor: pointer; text-decoration: none; color: var(--text); transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), border-color 0.15s; animation: pop-in 0.3s ease both; }.bldg:hover{ transform: translateY(-3px) scale(1.02); border-color: var(--brand); text-decoration: none; box-shadow: var(--shadow); }.bldg:active{ transform: scale(0.96); }.bldg .bi{ font-size: 2rem; display: block; margin-bottom: 0.35rem; }.bldg b{ font-size: 0.95rem; display: block; color: var(--brand-dark); }.bldg small{ color: var(--text-muted); font-size: 0.75rem; display: block; margin-top: 0.2rem; line-height: 1.35; }.alert-dot{ position: absolute; top: -8px; inset-inline-end: -8px; min-width: 26px; height: 26px; border-radius: 99px; background: var(--accent); color: var(--text-light); font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; padding: 0 6px; border: 3px solid var(--bg); animation: gem-pop 1.4s infinite; }
@keyframes confetti-fall {to{ transform: translateY(110vh) rotate(540deg); } }/* kind picker becomes big tappable choice cards */
.kind-picker{ border: none; padding: 0; margin: 0 0 1rem; }.kind-picker legend{ font-weight: 800; font-size: 1.1rem; padding: 0; margin-block-end: 0.6rem; color: var(--brand-dark); }.kind-option{ display: flex; gap: 0.75rem; align-items: center; background: var(--surface); border: 3px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin: 0 0 0.6rem; font-weight: 700; font-size: 1.02rem; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }.kind-option:hover{ border-color: var(--brand); }.kind-option:active{ transform: scale(0.98); }.kind-option:has(input:checked){ border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow: var(--shadow-sm); }.kind-option small{ font-weight: 400; color: var(--text-muted); }/* friendlier big inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], select, textarea{
    padding: 0.85rem 1.05rem; border: 2px solid var(--input-border); border-radius: var(--radius-sm); font-size: 1.05rem;
}input:focus, select:focus, textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 15%, transparent); }

@media (prefers-reduced-motion: reduce) {.alert-dot{ animation: none; }
}/* ============================================================
   WARM PLAYFUL WORLD — base restyle (v4.0.1)
   Every color below is a token from variables.css — each site
   re-skins by editing its own variables file, nothing here.
   ============================================================ */

/* chunky cards everywhere — 3px warm border, soft warm shadow */
.card, .listing-card, .table-wrap, .panel, .stat-card, .edit-card, .action-item{
    border: 3px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
}.card:hover, .listing-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }/* buttons become game buttons — bold pills with a 3D press */
.btn{ font-weight: 800; border: none; }.btn-primary{
    background: var(--gold); color: var(--text);
    box-shadow: 0 4px 0 var(--gold-dark);
}.btn-primary:hover{ background: var(--gold); filter: brightness(1.06); transform: none; }.btn-primary:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-dark); }.btn-danger{ background: var(--accent); color: var(--text-light); box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 70%, var(--text)); }.btn-danger:active{ transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 70%, var(--text)); }.btn-ghost{ background: var(--surface); color: var(--brand-dark); border: 3px solid var(--border); }.btn-ghost:hover{ border-color: var(--brand); }/* header — warm paper with a chunky bottom line, pill nav links */
.site-header{ border-block-end: 3px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); }.site-nav a{ font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 999px; }.site-nav a:hover{ background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand-dark); }.brand{ color: var(--brand-dark); }.user-chip{ border: 2px solid color-mix(in srgb, var(--brand) 35%, var(--border)); }/* hero — warm sunrise wash instead of a flat band */
.hero{
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--gold) 26%, var(--surface)),
        color-mix(in srgb, var(--sun) 18%, var(--bg)));
    border-block-end: 3px solid var(--border);
}.hero h1{ color: color-mix(in srgb, var(--brand-dark) 80%, var(--text)); }.hero p{ color: var(--text-muted); }/* badges — chunky pills */
.badge{ border: 2px solid var(--border); font-weight: 700; }/* labels + headings keep the warm ink */
h1, h2, h3, h4{ color: var(--text); }.card h3, .bldg b{ color: var(--brand-dark); }/* footer separation matches the chunky world */
.site-footer{ border-block-start: 3px solid var(--border); background: var(--surface); }

/* small screens — breathe: tighter gutters, single column, big tap targets */
@media (max-width: 640px) {.container{ padding-inline: 0.9rem; }.header-inner{ flex-wrap: wrap; gap: 0.5rem; padding-block: 0.6rem; }.hero{ padding: calc(var(--space) * 1.6) 0.9rem; }.hero h1{ font-size: 1.7rem; }.card, .listing-card{ padding: 1rem; }.town{ grid-template-columns: 1fr 1fr; }.hud a{ min-width: 56px; padding-inline: 6px; }
}

/* wide screens — keep the cozy reading width, never a wall of content */
@media (min-width: 900px) {.town{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}/* never let anything bleed sideways on a phone */
body{ overflow-x: hidden; }main.container{ width: 100%; }/* ============================================================
   FIT + OVERLAP FIXES (v4.0.2) — HUD gems clear of icons, topbar pill on its own line, no label wrapping, no wide text
   ============================================================ */

/* player topbar — name truncates, level pill gets its own row */
.game-topbar{ gap: 0.6rem; padding: 0.8rem 0.9rem; }.game-topbar .who b{
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}/* HUD — equal-width items, icon cleared of the gem, labels never wrap */
.hud{ gap: 0; padding-inline: 2px; }.hud a{
    flex: 1 1 0; min-width: 0; padding: 10px 2px 6px;
    font-size: 0.64rem; text-align: center;
}.hud a > *{ max-width: 100%; }.hud a{ overflow: hidden; }.hud a, .hud a .sub{ white-space: nowrap; text-overflow: ellipsis; }.hud .hi{ font-size: 1.25rem; margin-top: 3px; }

/* open mobile menu — full-width chunky pills, always fits */
@media (max-width: 640px) {.site-nav.open{ gap: 0.25rem; padding-block: 0.5rem; }.site-nav.open a{
        display: block; width: 100%; padding: 0.7rem 1rem;
        border-radius: var(--radius-sm); font-size: 1.05rem;
    }.site-nav.open a:hover{ background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }.site-nav.open .user-chip{ width: auto; }
}

/* very small phones — tighten, keep one tap per thumb */
@media (max-width: 380px) {.hud a{ font-size: 0.58rem; padding-top: 9px; }.hud .hi{ font-size: 1.1rem; }.game-topbar .avatar{ width: 38px; height: 38px; font-size: 1rem; }
}/* long words, URLs and emails break instead of overflowing the view */
.card, .listing-card, .bldg, .stat-card, .panel, .alert, td, .action-item, .site-nav, .game-topbar{
    overflow-wrap: break-word; word-break: break-word;
}/* ============================================================
   YOU ARE HERE (v4.0.3) — every page announces itself:
   page-head becomes a big warm location banner, and the admin
   entry lives in the footer on every page
   ============================================================ */
.page-head{
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--gold) 24%, var(--surface)),
        color-mix(in srgb, var(--sun) 15%, var(--bg)));
    border: 3px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: calc(var(--space) * 1.4) calc(var(--space) * 1.2);
    margin-block: calc(var(--space) * 1.2) var(--space);
    max-width: none;
}.page-head h1{
    margin: 0 0 0.3rem;
    font-size: 1.8rem; font-weight: 800; letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--brand-dark) 85%, var(--text));
    overflow-wrap: break-word;
}.page-head h1::before{ content: "📍 "; }.page-head p{ margin: 0 0 0.8rem; color: var(--text-muted); font-size: 1.02rem; }.page-head p:last-child{ margin-block-end: 0; }
@media (max-width: 640px) {.page-head{ padding: 1.1rem 1rem; }.page-head h1{ font-size: 1.45rem; }.page-head .btn{ width: 100%; }
}/* v5.9.88: footer admin link removed — tucked into the cookies legal page (.legal-admin below) */
.legal-admin{ margin-block-start: 2rem; font-size: 0.85rem; }
.legal-admin a{ color: var(--text-muted); }
.legal-admin a:hover{ color: var(--brand-dark); }
/* ============================================================
   EVERY PAGE IS A LEVEL (v5.0.0) — game bar, admin setup path, chat-style wizard forms
   ============================================================ */

/* slim game bar — follows signed-in members on every page */
.minibar{
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--surface); border-block-end: 3px solid var(--border);
    padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 800; color: var(--text);
    text-decoration: none;
}.minibar:hover{ text-decoration: none; }.minibar .mav{
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--sun), var(--accent));
    color: var(--text-light); display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}.minibar .mname{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.minibar .mxp{ flex: 1; min-width: 40px; height: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }.minibar .mxp i{ display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--gold) 0 6px, color-mix(in srgb, var(--gold) 60%, var(--text-light)) 6px 12px); }
.setup-heading{ font-size: 1.1rem; margin: var(--space) 0 0.5rem; }.setup-path .hero-now form{ margin: 0; }/* chat-style wizard forms — one big question at a time */
form.wizard .field, form.wizard .kind-picker{ display: none; }form.wizard .field.wiz-on, form.wizard .kind-picker.wiz-on{ display: block; animation: pop-in 0.25s ease both; }form.wizard .field label{ font-size: 1.15rem; font-weight: 800; margin-block-end: 0.5rem; }.wiz-dots{ display: flex; gap: 8px; justify-content: center; margin-block-end: 1.2rem; }.wiz-dots i{ width: 44px; height: 10px; border-radius: 99px; background: var(--border); }.wiz-dots i.on{ background: var(--brand); }.wiz-nav{ display: flex; gap: 0.6rem; margin-block-start: 1rem; }/* v5.2.9: back/next are the form's steering wheel — big, worded, thumb-easy */
.wiz-nav .btn{ flex: 1; min-height: 56px; font-size: 1.15rem; font-weight: 700; padding: 0.8rem 1.4rem; }form.wizard:not(.wiz-js) .field, form.wizard:not(.wiz-js) .kind-picker{ display: block; }form.wizard:not(.wiz-js) .wiz-dots, form.wizard:not(.wiz-js) .wiz-nav{ display: none; }.version-stamp{ text-align: center; color: var(--text-muted); font-size: 0.8rem; margin: 1.5rem 0 0; opacity: 0.8; }/* ============================================================
   STOREFRONT REDESIGN (v5.7.0) — approved direction.
   The listings ARE the page: photo-led grid, the pitch compressed
   to one slim strip, and the single action floats as a pill in the
   thumb arc (the marketplace-app pattern — Jakob's law: familiar
   conventions, zero learning). Theory base unchanged: Von Restorff
   (brand color only on actions), 60-30-10, 8pt grid, 1.25 type
   scale, Fitts (big floating target), Hick (one decision).
   Admin colors untouched: every color is a variables.css token or
   the site.json branding override, as always.
   ============================================================ */
:root{
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --rule: 1px solid var(--border);
}/* flatten the chunky v4 world to the storefront discipline */
.card, .listing-card, .table-wrap, .panel, .stat-card, .edit-card, .action-item, .showcase-card, .admin-card, .bldg, .kind-option, .feed-item{
    border: var(--rule) !important;
    box-shadow: none !important;
}.card:hover, .listing-card:hover, .admin-card:hover, .bldg:hover{
    transform: none; box-shadow: none !important;
    border-color: color-mix(in srgb, var(--text) 30%, var(--border)) !important;
}.btn{ font-weight: 700; border-radius: 999px; box-shadow: none; }.btn:active{ transform: none; }.btn-primary{ background: var(--brand); color: var(--text-light); box-shadow: none; }.btn-primary:hover{ background: var(--brand-dark); filter: none; transform: none; }.btn-primary:active{ transform: none; box-shadow: none; }.btn-danger, .btn-danger:active{ box-shadow: none; transform: none; }.btn-ghost{ border: var(--rule); }.btn-ghost:hover{ border-color: var(--brand); }.site-header{ border-block-end: var(--rule); }.site-nav a:hover{ background: none; color: var(--brand); }.page-head{
    background: none; border: none; border-block-end: var(--rule); border-radius: 0;
    box-shadow: none; padding: 0 0 calc(var(--space) * 0.8);
    margin-block: calc(var(--space) * 1.4) calc(var(--space) * 1.1);
}.page-head h1::before{ content: none; }.page-head h1{ color: var(--text); font-size: 1.8rem; }.hero{ background: none; border-block-end: var(--rule); }.site-footer{ border-block-start: var(--rule); }.badge{ border: var(--rule); font-weight: 600; }/* ---- the pitch strip: one sentence + real numbers, not a hero box ---- */
.hero-now, .hero-now.value-prop{
    background: var(--surface);
    color: var(--text);
    border: var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
    animation: none;
    padding: calc(var(--space) * 0.9) var(--space);
    margin-block: 0 var(--space);
    display: flex; align-items: center; gap: calc(var(--space) * 1.25); flex-wrap: wrap;
}.hero-now .kicker{ display: none; }.hero-now h2{
    color: var(--text); font-family: var(--font-family);
    font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em;
    margin: 0 0 0.15rem; max-width: none;
}.value-prop .vp-line{ flex: 1 1 220px; min-width: 0; }.value-prop .vp-tag{
    color: var(--text-muted); font-size: 0.92rem; font-weight: 400;
    opacity: 1; margin: 0; max-width: 52ch;
}/* ---- the ONE action: floating pill in the thumb arc (Fitts) ---- */
.big-cta.vp-fab{
    position: fixed; z-index: 60;
    inset-inline-end: 20px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: auto;
    background: var(--brand); color: var(--text-light);
    border-radius: 999px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 35%, transparent);
    font-size: 1rem; font-weight: 700;
    min-height: 60px; padding: 0 1.5rem;
    gap: 0.5rem;
}.big-cta.vp-fab:hover{ background: var(--brand-dark); filter: none; }.big-cta.vp-fab:active{ transform: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent); }/* logged-in members have the HUD — float above it */
.big-cta.vp-fab-member{ bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 1160px) {.big-cta.vp-fab{ inset-inline-end: calc(50% - 540px); }
}/* legacy sticky bar retired */
.vp-sticky{ display: none !important; }/* ---- photo-led grid: the listings ARE the page ---- */
.listing-grid{
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (min-width: 720px) {.listing-grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; } }.listing-card{ padding: 0; overflow: hidden; gap: 0; border-radius: var(--radius); }.listing-card > a:first-child{ display: block; }.listing-card img{
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
    background: var(--bg);
}.listing-card h3, .listing-card .price, .listing-card .meta, .listing-card .badge{
    margin-inline: 14px;
}.listing-card .badge{ margin-block-start: 10px; }.listing-card h3{ font-size: 1rem; font-weight: 600; margin-block: 2px 0; }.listing-card .price{
    display: block; font-size: 1.25rem; font-weight: 800; color: var(--brand);
    letter-spacing: -0.01em; margin-block-start: 10px;
}.listing-card .price:has(+ *){ margin-block-end: 0; }.listing-card .meta{ font-size: 0.78rem; color: var(--text-muted); }.listing-card > *:last-child{ margin-block-end: 14px; }.listing-card.featured{ border-color: var(--brand) !important; border-width: 1px !important; }/* filter bar -> pill rail */
.filter-bar{ flex-wrap: nowrap; overflow-x: auto; padding-block-end: 6px; }.filter-bar input[type="text"], .filter-bar select{
    width: auto; flex: 1 0 180px; border-radius: 999px;
    padding: 0.6rem 1.1rem; font-size: 0.95rem;
}.filter-bar .btn{ flex: 0 0 auto; }/* ---- game layer kept, .game-topbar, .mission-hero{
    background: var(--surface); color: var(--text);
    border: var(--rule); border-inline-start: 3px solid var(--brand);
    box-shadow: none; animation: none;
}.mission-hero .level-kicker{ color: var(--text-muted); }.xp-bar{ background: var(--bg); border: var(--rule); }.xp-fill, .minibar .mxp i{ animation: none; background: var(--brand); }.game-topbar .who b{ color: var(--text); }.hud{ border-block-start: var(--rule); }.hud a{ font-weight: 600; }.hud a.is-active{ background: none; border-color: transparent; color: var(--brand-dark); box-shadow: none; border-block-start: 2px solid var(--brand); }.minibar{ border-block-end: var(--rule); font-weight: 600; }.needs{ background: var(--surface); border: var(--rule); border-inline-start: 3px solid var(--accent); }.alert-dot{ animation: none; border: none; }.user-level{ background: var(--brand); }.progress{ height: 8px; border-radius: 4px; }.bar-track{ height: 10px; border-radius: 5px; }.bar-fill{ background: var(--brand); }.kind-option{ border: var(--rule) !important; font-weight: 600; }.kind-option:has(input:checked){ border-color: var(--brand) !important; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); box-shadow: none; }.wiz-dots i{ height: 4px; border-radius: 0; }.wiz-dots i.on{ background: var(--brand); }.table-wrap th{ border-block-end: 2px solid var(--brand); }tbody tr:hover{ background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], select, textarea{
    border: var(--rule);
}input:focus, select:focus, textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }/* mobile overflow guard — the page is never wider than its content */
html, body{ overflow-x: hidden; max-width: 100%; }main.container, .header-inner, .footer-inner{ max-width: 100%; }img, svg, video, canvas{ max-width: 100%; }.page-head h1, .hero-now h2{ overflow-wrap: break-word; }

@media (max-width: 640px) {.page-head{ padding: 0 0 0.9rem; }.page-head h1{ font-size: 1.45rem; }.hero-now, .hero-now.value-prop{ padding: 0.9rem 1rem; gap: 0.75rem; }
}/* ============================================================
   STOREFRONT COMPOSITION (v5.7.1) — the page order matches the
   approved mock: slim title, SEARCH RAIL FIRST, pitch strip, then the photo grid. No banner, no clutter above the goods.
   ============================================================ */

/* page-head shrinks to a quiet section title — no banner energy */
.page-head{
    margin-block: calc(var(--space) * 1.1) calc(var(--space) * 0.8);
    padding-block-end: 0.6rem;
}.page-head h1{ font-size: 1.5rem; font-weight: 800; }.page-head p{ font-size: 0.92rem; margin-block: 0.15rem 0; }/* search rail: the app pattern — big pill input leads, filters follow */
.filter-bar{
    display: flex; align-items: center; gap: 8px;
    margin-block: 0 var(--space);
}.filter-bar input[type="text"]{
    flex: 1 1 auto; min-width: 0;
    border-radius: 999px; min-height: 52px;
    padding: 0.7rem 1.3rem; font-size: 1.02rem;
    background: var(--surface);
}.filter-bar select{
    flex: 0 0 auto; width: auto; max-width: 42%;
    border-radius: 999px; min-height: 52px; padding: 0.6rem 1rem;
    font-size: 0.92rem;
}.filter-bar .btn{ min-height: 52px; border-radius: 999px; padding-inline: 1.4rem; }/* events category pills read as a rail, not a button row */
.filter-bar .btn-sm{ min-height: 44px; }/* the strip hugs the rail — one tight unit, then the goods */
.filter-bar + .hero-now.value-prop{ margin-block-start: 0; }/* quest box on money pages stops competing with the ask:
   same information{ margin-block: 0 var(--space); }/* next-moves cards keep members moving but stay quiet for guests */

@media (max-width: 640px) {.page-head h1{ font-size: 1.3rem; }.filter-bar{ flex-wrap: wrap; }.filter-bar input[type="text"]{ flex: 1 1 100%; }.filter-bar select{ flex: 1 1 auto; max-width: none; }.filter-bar .btn{ flex: 0 0 auto; }
}/* ============================================================
   MOCK-FAITHFUL FRAME (v5.7.1) — the approved storefront mock, 1:1: app top bar with search pill on money pages, NO page
   banner (title is visually hidden, SEO kept), guest bottom tab
   bar (Browse / Partners / Join), FAB floating above the bars.
   ============================================================ */

/* visually hidden but present for SEO + screen readers */
.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;
}/* app top bar: wordmark + search pill lead; nav steps aside */
.site-header.has-search .header-inner{ flex-wrap: wrap; gap: 0.6rem; }.top-search{ flex: 1 1 220px; min-width: 0; margin: 0; }.top-search input[type="text"]{
    width: 100%; min-height: 48px;
    border-radius: 999px; border: var(--rule);
    background: var(--bg); color: var(--text);
    padding: 0.6rem 1.2rem; font-size: 1rem;
}.top-search input[type="text"]:focus{ border-color: var(--brand); }.site-header.has-search .site-nav{ margin-inline-start: auto; }
@media (max-width: 640px) {.site-header.has-search .header-inner{ padding-block: 0.6rem; }.top-search{ flex-basis: 100%; order: 3; }
}/* guest bottom tab bar — the mock's app chrome for visitors */
.gtabs{
    position: fixed; inset-inline: 0; bottom: 0; z-index: 55;
    display: flex; justify-content: space-around;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-block-start: var(--rule);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}.gtabs a{
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: var(--text-muted);
    font-size: 0.75rem; font-weight: 600;
    padding: 8px 16px; min-height: 48px; min-width: 64px;
}.gtabs a:hover{ text-decoration: none; color: var(--text); }.gtabs a.on{ color: var(--brand); }.gtabs .gt-ic{ font-size: 1.3rem; line-height: 1; }body.has-tabs{ padding-block-end: calc(80px + env(safe-area-inset-bottom)); }/* FAB floats above whichever bottom bar is present */
body.has-tabs .big-cta.vp-fab{ bottom: calc(88px + env(safe-area-inset-bottom)); }/* the in-page filter form becomes the mock's category rail
   (search now lives in the top bar) */
.filter-bar input[type="text"]{ flex: 0 1 220px; min-height: 44px; font-size: 0.95rem; }
@media (max-width: 640px) {.filter-bar input[type="text"]{ flex: 1 1 100%; }
}/* money pages: strip leads the content — first thing under the bar */
main.container > .sr-only:first-child{ margin: 0; }main.container > .filter-bar:first-of-type{ margin-block-start: calc(var(--space) * 1.2); }/* ============================================================
   GAME BOARD (v5.8.0) — approved design, ALL pages.
   The site is a board you play, not a spreadsheet you scan:
   big type (18px base, nothing meaningful under 14px), big icons, chunky soft cards with press-down physics, steel-blue action
   color (admin brand still rules — the palette is variables.css
   tokens, recolored to the approved cool gray + steel blue).
   ============================================================ */
:root{
    --radius: 20px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --rule: 3px solid var(--border);
    --press: 0 4px 0 var(--border);
}/* ---- board-wide type: readable at arm's length ---- */
html{ font-size: 18px; }
@media (max-width: 640px) {html{ font-size: 17px; } }body{ font-size: 1rem; }.form-hint, .meta, small{ font-size: 0.9rem; }/* ---- every card is a soft chunky tile with press physics ---- */
.card, .listing-card, .table-wrap, .panel, .stat-card, .edit-card, .action-item, .showcase-card, .admin-card, .bldg, .kind-option, .feed-item, .about-card, .about-hero{
    border: var(--rule) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--press) !important;
    animation: none;
}a.card:active, a.listing-card:active, .bldg:active, .quest-card:active{
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 var(--border) !important;
}.card:hover, .listing-card:hover, .admin-card:hover, .bldg:hover{
    transform: none;
    box-shadow: var(--press) !important;
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border)) !important;
}/* ---- buttons: chunky press-down in the steel action color ---- */
.btn{ border-radius: 14px; font-weight: 800; min-height: 52px; padding: 0.7rem 1.4rem; }.btn-primary{
    background: var(--gold); color: var(--text-light);
    box-shadow: 0 5px 0 var(--gold-dark);
}.btn-primary:hover{ background: var(--gold); filter: brightness(1.06); transform: none; }.btn-primary:active{ transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-dark); }.btn-ghost{ border: var(--rule); background: var(--surface); box-shadow: var(--press); }.btn-ghost:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--border); }.btn-sm{ min-height: 48px; }/* ---- the big action (in-card + floating): mock's golden button ---- */
.big-cta{
    background: var(--gold); color: var(--text-light);
    border-radius: 16px; box-shadow: 0 6px 0 var(--gold-dark);
    font-size: 1.15rem; font-weight: 800; min-height: 64px;
}.big-cta:hover{ background: var(--gold); filter: brightness(1.05); }.big-cta:active{ transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-dark); }.big-cta.vp-fab{ box-shadow: 0 6px 0 var(--gold-dark); }.big-cta.vp-fab:active{ transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-dark); }/* ---- header: board top bar with a VISIBLE town hall for the admin ---- */
.site-header{ border-block-end: var(--rule); background: var(--surface); }.brand{ font-size: 1.3rem; font-weight: 800; }.site-nav a{ font-size: 1rem; min-height: 48px; display: inline-flex; align-items: center; }.townhall-btn{
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: var(--text); color: var(--surface);
    font-weight: 700; font-size: 0.95rem; text-decoration: none;
    padding: 0.55rem 1rem; border-radius: 14px; min-height: 48px;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--text) 70%, transparent);
}.townhall-btn:hover{ text-decoration: none; filter: brightness(1.1); }.townhall-btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 70%, transparent); }/* ---- "Today's move" card: the pitch strip becomes the move ---- */
.hero-now, .hero-now.value-prop{
    display: block;
    background: linear-gradient(150deg, var(--surface) 40%, color-mix(in srgb, var(--gold) 12%, var(--surface)));
    border: 3px solid var(--gold) !important;
    border-radius: 24px !important;
    box-shadow: 0 6px 0 var(--gold-dark) !important;
    padding: 1.4rem 1.3rem;
    margin-block: var(--space);
}.hero-now .kicker{
    display: inline-block; background: var(--gold); color: var(--text-light);
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.35rem 0.9rem; border-radius: 999px; margin: 0 0 0.8rem;
}.hero-now .kicker::after{ content: none; }.hero-now h2{ font-size: 1.65rem; font-weight: 800; line-height: 1.2; margin: 0 0 0.4rem; }.value-prop .vp-tag{ font-size: 1.05rem; color: var(--text-muted); margin-block-end: 1rem; }/* proof nums: big chunky tiles */
/* in-card CTA sits above the micro line (restored per approved mock) */
.value-prop .vp-cta{ width: 100%; margin-block: 0.2rem 0; }/* v5.9.37: partner foot is a plain line — the dashed box is gone (approved A2) */
.value-prop .vp-footline{ margin-block-start: 0.9rem; font-size: 0.95rem; color: var(--text-muted); }
.value-prop .vp-footline a{ color: var(--brand); font-weight: 700; }/* ---- the board: listing cards become big row tiles ---- */
.listing-grid{ display: flex; flex-direction: column; gap: 14px; }.listing-card{
    display: flex; flex-direction: row; align-items: center; gap: 16px;
    padding: 14px; text-decoration: none; color: var(--text);
}.listing-card > a:first-child{ flex: 0 0 auto; }.listing-card img, .listing-card .tile-icon{
    width: 88px; height: 88px; border-radius: 16px; object-fit: cover; flex: 0 0 auto;
}.listing-card .tile-icon{
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; background: color-mix(in srgb, var(--gold) 16%, var(--surface));
}.listing-card .tile-body{ flex: 1; min-width: 0; }.listing-card h3{ font-size: 1.25rem; font-weight: 800; margin: 0; }.listing-card .price{
    display: inline-block; background: var(--brand); color: var(--text-light);
    font-size: 0.95rem; font-weight: 800; padding: 0.2rem 0.85rem;
    border-radius: 999px; margin: 0.35rem 0 0;
}.listing-card .meta{ font-size: 0.88rem; color: var(--text-muted); margin: 0.35rem 0 0; }.listing-card .badge{ margin: 0 0 0.3rem; }.listing-card > *:last-child{ margin-block-end: 0; }
@media (max-width: 640px) {.listing-card img, .listing-card .tile-icon{ width: 76px; height: 76px; }.listing-card h3{ font-size: 1.1rem; }
}/* ---- player card + dock: big and friendly ---- */
.game-topbar, .minibar{
    background: var(--surface); color: var(--text);
    border: var(--rule); border-radius: var(--radius);
    box-shadow: var(--press); padding: 0.9rem 1rem;
}.game-topbar .avatar, .minibar .mav{ width: 56px; height: 56px; font-size: 1.4rem; border-radius: 16px; }.game-topbar .who b{ font-size: 1.2rem; }.xp-bar{ background: var(--bg); border: 2px solid var(--border); height: 12px; }.xp-fill, .minibar .mxp i{
    background: repeating-linear-gradient(45deg, var(--gold) 0 10px, var(--brand-light) 10px 20px);
    animation: none;
}.minibar{ border-radius: 0; border-inline: none; box-shadow: none; }.hud, .gtabs{ border-block-start: var(--rule); }.hud a, .gtabs a{ font-size: 0.85rem; font-weight: 700; min-height: 56px; }.hud .hi, .gtabs .gt-ic{ font-size: 1.6rem; }.hud a.is-active{
    background: color-mix(in srgb, var(--gold) 14%, var(--surface));
    border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 3px 0 var(--gold-dark);
    color: var(--text);
}/* quest strip: the move prompt{ border: 3px solid var(--gold) !important; border-radius: var(--radius) !important; box-shadow: var(--press) !important; }/* page-head on non-money pages: calm board title */
.page-head{ border-block-end: var(--rule); }.page-head h1{ font-size: 1.9rem; }/* forms: big friendly fields */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], select, textarea{
    border: 2px solid var(--input-border); border-radius: 14px; font-size: 1.02rem;
    min-height: 52px; padding: 0.7rem 1.1rem;
}textarea{ min-height: 140px; }label{ font-size: 1rem; }/* chips, badges, town buildings: all chunky */
.badge{ border: 2px solid var(--border); font-size: 0.9rem; }.bldg .bi{ font-size: 2.4rem; }.bldg b{ font-size: 1.05rem; }.admin-card-number{ font-size: 2rem; }.stat-card .num{ font-size: 1.9rem; }.needs{ border: 3px solid var(--gold); border-radius: var(--radius); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }/* footer + misc */
.site-footer{ border-block-start: var(--rule); }.hero{ background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 14%, var(--surface)), var(--surface)); border-block-end: var(--rule); }.hero h1{ font-size: 2.2rem; }.filter-bar input[type="text"], .filter-bar select{ border-radius: 999px; min-height: 52px; }

@media (prefers-reduced-motion: reduce) {.btn-primary, .big-cta, .townhall-btn, a.card, a.listing-card, .bldg{ transition: none; }
}/* tile-body meta stacks inside the row tiles (v5.8.0) */
.listing-card .tile-body .meta{ display: block; }.listing-card .tile-body .badge{ display: inline-block; }/* ==========================================================================
   v5.8.6 HERD CARDS — WHOLE ANIMAL, NO CROP
   The v5.8.0 row-tile rule (88px square, object-fit: cover) cut the heads
   off pedigree portraits. A herd buyer judges conformation — the WHOLE
   animal — so cropping is information loss, not style. Fix: uniform 200px
   frame with object-fit: contain (every card aligns — C.R.A.P. alignment —
   and every animal is fully visible = maximum processing fluency).
   ========================================================================== */
.herd-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }.herd-grid .listing-card{ flex-direction: column; align-items: stretch; gap: 10px; }.herd-grid .listing-card > a:first-child{ display: block; }.herd-grid .listing-card img{
    width: 100%; height: 200px; aspect-ratio: auto; object-fit: contain; flex: 0 0 auto;
    background: color-mix(in srgb, var(--gold) 8%, var(--surface));
    border-radius: 16px;
}
@media (max-width: 640px) {.herd-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }.herd-grid .listing-card img{ height: 160px; }
}/* ==========================================================================
   v5.9.3 VALUE COMPARISON — the paying customer's case on the home page.
   Points carry the claim (scannable list — NN/g F-pattern); the table is
   three honest rows, our column visually heavier (Von Restorff: the winner
   is the thing that looks different).
   ========================================================================== */
.value-points{ list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 12px; }.value-points li{
    position: relative;
    background: var(--surface);
    border: 2px solid var(--border); border-radius: var(--radius-sm, 14px);
    /* room for the check disc + generous inner air (whitespace = lower cognitive load) */
    padding: 1rem 1.25rem 1rem 3.25rem;
    line-height: 1.65; font-weight: 400;
    transition: border-color 0.15s ease, transform 0.15s ease;
}[dir="rtl"] .value-points li{ padding: 1rem 3.25rem 1rem 1.25rem; }.value-points li:hover{ border-color: var(--gold); transform: translateY(-1px); }/* check disc: one consistent anchor per card, high contrast against surface */
.value-points li::before{
    content: "✓";
    position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--gold) 16%, var(--surface));
    color: var(--brand-dark); font-weight: 900; font-size: 0.95rem;
}/* three-sentence hierarchy (v5.9.10): lead = full contrast (the gist);
   business sentence = regular body; technical sentence = smaller + muted
   (detail on demand). Size/weight contrast sets reading order so no
   sentence fights another. */
.vp-lead{ display: block; font-weight: 700; color: var(--text); font-size: 1.06rem; }.vp-biz{ display: block; margin-block-start: 0.35rem; color: var(--text); }.vp-tech{ display: block; margin-block-start: 0.35rem; color: var(--text-muted); font-size: 0.92rem; }/* plain-language meaning under the technical point (v5.9.7, legacy points) */
.vp-plain{ display: block; margin: 2px 0 0; color: var(--muted); font-size: .94em; }/* Q&A pairs (v5.9.11): answers are three audience sentences separated by
   blank lines — the airy line-height + paragraph gaps keep them scannable */
.qa-list{ display: grid; gap: 12px; }.qa-pair{ padding: 1rem 1.25rem; }.qa-pair .qa-q{ margin-block: 0 0.6rem; font-size: 1.15rem; }.qa-pair .qa-a{ margin: 0; line-height: 1.65; }.qa-pair .qa-a br + br{ content: ""; display: block; margin-block-start: 0.6rem; }/* v5.9.12 — account-type choice (registration): big worded tap targets, min 44px tall, whole row tappable; checked state shown by border + tint.
   (WCAG 2.5.5 target size; visible label text, not icon-only.) */
.type-choice{ border: 0; padding: 0; margin: 0 0 1rem; }.type-choice legend{ font-weight: 700; margin-block-end: 0.5rem; }.type-option{ display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px;
    padding: 0.75rem 1rem; margin-block-end: 0.5rem; border: 2px solid var(--border);
    border-radius: var(--radius, 10px); cursor: pointer; background: var(--surface, #fff); }.type-option:has(input:checked){ border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface, #fff)); }.type-option input{ margin-block-start: 0.35rem; width: 1.15rem; height: 1.15rem; }.type-option small{ display: block; color: var(--text-muted); margin-block-start: 2px; }/* v5.9.12 — receipts: definition list on a card, status chips */
.receipt-card{ background: var(--surface, #fff); border: 2px solid var(--border);
    border-radius: var(--radius, 10px); padding: 1rem 1.25rem; margin-block-end: 1rem; }.receipt-lines{ margin: 0; display: grid; gap: 0.5rem; }.receipt-lines > div{ display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }.receipt-lines dt{ font-weight: 700; }.receipt-lines dd{ margin: 0; text-align: end; }.receipt-status{ font-size: 0.8rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; }.receipt-live{ background: #e8f5e9; color: #1b5e20; }.receipt-expired{ background: #f5f5f5; color: #616161; }.receipt-cancelled{ background: #fbe9e7; color: #b71c1c; }/* v5.9.12 — admin member rows: type select + free days inline */
.member-row{ flex-wrap: wrap; }.member-flags{ display: block; color: var(--text-muted); font-size: 0.85rem; }.member-profile{ display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }.member-profile select, .member-profile input{ min-height: 44px; }.member-profile input[type="number"]{ width: 7.5rem; }/* v5.9.13 — compare module: collapsible comparison sections.
   Native <details> (no JS, keyboard/screen-reader accessible); summary bar is
   56px — above the 44px minimum tap target. Desktop shows two columns; under
   640px the row stacks as a labeled pair so the page never scrolls sideways
   (basis: WCAG 2.5.5 target size; reflow, WCAG 1.4.10). Color does double
   duty only WITH text labels — the tag text carries the meaning, the
   red/green tint is reinforcement (WCAG 1.4.1, no color-only meaning). */
details.vs{ margin: 0 0 .8rem; background: var(--surface, #fffdf6); border: 2px solid var(--text);
    border-radius: 16px; overflow: hidden; box-shadow: 0 4px 0 rgba(90,60,20,.15); }details.vs summary{ list-style: none; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; gap: 1rem; min-height: 56px; padding: .9rem 1.1rem;
    font-weight: 800; font-size: clamp(1.02rem, 2.8vw, 1.25rem); }details.vs summary::-webkit-details-marker{ display: none; }details.vs summary .chev{ flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid var(--text); background: var(--brand); display: grid; place-items: center;
    font-weight: 900; transition: transform .18s; }details.vs[open] summary .chev{ transform: rotate(180deg); }details.vs summary:focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; }.vs-body{ border-top: 2px solid var(--border); }.cmp-row{ display: grid; grid-template-columns: 1fr 1fr; }.cmp-row + .cmp-row{ border-top: 2px solid var(--border); }.cmp-cell{ padding: .8rem 1.1rem; font-size: .97rem; line-height: 1.6; }.cmp-cell .tag{ display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; margin-block-end: 2px; }.cmp-cell.there{ color: var(--text-muted); }.cmp-cell.there .tag{ color: #8c3b2e; }.cmp-cell.here{ font-weight: 600; border-inline-start: 2px solid var(--border); }.cmp-cell.here .tag{ color: #1b5e20; }
@media (max-width: 640px) {.cmp-row{ grid-template-columns: 1fr; padding: .55rem 1rem; }.cmp-cell{ padding: .15rem 0; }.cmp-cell.here{ border-inline-start: 0; }
}

/* v5.9.14: setup-journey styles kept for the ADMIN dashboard (member game layer removed) */

/* the progress map — winding steps, done / current / locked */
.map { padding: 0.5rem 0 1rem; }
.path-node { display: flex; align-items: center; gap: 0.9rem; margin-block-end: 0.4rem; animation: pop-in 0.35s ease both; }
.node-dot { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; border: 4px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.node-done .node-dot { border-color: var(--gold); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 45%, var(--text-light)), var(--gold)); }
.node-now .node-dot { border-color: var(--brand); animation: pulse-ring 1.6s infinite; }
.node-locked .node-dot { filter: grayscale(1); }
.node-card { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; }
.node-card b { display: block; font-size: 1.02rem; color: var(--brand-dark); }
.node-card small { color: var(--text-muted); font-size: 0.88rem; line-height: 1.4; display: block; }
.node-tag { display: inline-block; margin-top: 0.35rem; margin-inline-end: 0.35rem; font-size: 0.88rem; font-weight: 800; border-radius: 999px; padding: 0.3rem 0.8rem; text-decoration: none; }
.tag-done { background: var(--success-bg); color: var(--success-text); }
.tag-now { background: var(--brand); color: var(--text-light); }
.tag-now:hover { text-decoration: none; background: var(--brand-dark); }
.tag-lock { background: var(--bg); color: var(--text-muted); border: 1px dashed var(--border); }
a.node-tag { text-decoration: none; display: inline-block; }
a.tag-lock { cursor: pointer; }
.connector { width: 4px; height: 22px; margin-inline-start: 28px; border-radius: 4px; background: repeating-linear-gradient(var(--border) 0 6px, transparent 6px 11px); }
    .xpfill, .node-now .node-dot, .gem.hot, .alert-dot, .celebrate-emoji, .celebrate-confetti span { animation: none; }

/* ============================================================
   WARM PLAYFUL WORLD — base restyle (v4.0.1)
   Every color below is a token from variables.css — each site
   re-skins by editing its own variables file, nothing here.
   ============================================================ */

/* chunky cards everywhere — 3px warm border, soft warm shadow */
.card, .listing-card, .node-card, .table-wrap,
.panel, .stat-card, .quest, .shelf-item, .edit-card, .action-item {
    border: 3px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
}
.card h3, .node-card b, .bldg b { color: var(--brand-dark); }
    .node-dot { width: 52px; height: 52px; font-size: 1.35rem; border-width: 3px; }
    .connector { margin-inline-start: 24px; }

/* long words, URLs and emails break instead of overflowing the view */
.card, .listing-card, .node-card, .bldg, .quest, .stat-card, .panel,
.alert, td, .action-item, .site-nav, .game-topbar {
    overflow-wrap: break-word; word-break: break-word;
}

/* flatten the chunky v4 world to the storefront discipline */
.card, .listing-card, .node-card, .table-wrap,
.panel, .stat-card, .quest, .shelf-item, .edit-card, .action-item,
.showcase-card, .admin-card, .bldg, .kind-option, .feed-item {
    border: var(--rule) !important;
    box-shadow: none !important;
}
.node-dot { border-width: 2px; box-shadow: none; }
.node-now .node-dot { animation: none; }

/* ---- every card is a soft chunky tile with press physics ---- */
.card, .listing-card, .node-card, .table-wrap, .panel, .stat-card,
.quest, .shelf-item, .edit-card, .action-item, .showcase-card,
.admin-card, .bldg, .kind-option, .feed-item, .about-card, .about-hero {
    border: var(--rule) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--press) !important;
    animation: none;
}

/* v5.9.22 — styles for view classes that shipped unstyled */
.brand-name{ font-weight: 900; font-size: 1.15rem; letter-spacing: .01em; color: var(--text); }
.value-block{ margin: 1rem 0; }
.field-label{ display: block; font-weight: 700; margin-block-end: .35rem; }
.empty-note{ color: var(--text-muted); font-size: .95rem; }
.cta-reward{ display: block; font-size: .85rem; font-weight: 700; color: var(--text-muted); margin-block-start: .3rem; }
.seller-relay{ margin: 1rem 0; }
.share-actions{ display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.qr-wrap{ text-align: center; margin: 1rem 0; }
.qr-wrap canvas{ max-width: 100%; height: auto; }
.progress{ background: var(--surface); border: 2px solid var(--border); border-radius: 999px; overflow: hidden; height: 14px; }
.progress-bar{ background: var(--brand); height: 100%; transition: width .3s; }
.palette-name{ font-size: .8rem; color: var(--text-muted); }

/* v5.9.27 — mixed-language direction on RTL sites: each text block follows
   its own content (Unicode bidi 'plaintext'): Arabic stays RTL, English
   strings (fallback labels, English posts) render LTR automatically. */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] summary, [dir="rtl"] label, [dir="rtl"] legend,
[dir="rtl"] .card, [dir="rtl"] .panel, [dir="rtl"] .alert,
[dir="rtl"] .btn, [dir="rtl"] .form-hint, [dir="rtl"] .meta,
[dir="rtl"] .brand-name, [dir="rtl"] .cmp-cell, [dir="rtl"] .kw-list li {
    unicode-bidi: plaintext;
}

/* ---- v5.9.34: post grid, browse grid, list nav strip, hero search ---- */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space); margin-block:var(--space); max-width:52rem; margin-inline:auto; }
.post-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.35rem; padding:1.4rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); min-height:120px; min-width:44px; font-weight:700; color:var(--brand-dark); text-align:center; transition:box-shadow 0.2s ease, transform 0.2s ease; }
.post-tile:hover{ box-shadow:var(--shadow); transform:translateY(-2px); text-decoration:none; }
.post-tile .post-tile-ic{ font-size:2rem; line-height:1; }
.post-tile small{ font-weight:500; color:var(--text-muted); }
.browse-block{ text-align:center; padding-block:var(--space); }
.browse-heading{ color:var(--brand-dark); }
.listnav{ display:flex; gap:0.25rem; overflow-x:auto; padding:0.35rem 0.75rem; background:var(--surface); border-bottom:1px solid var(--border); scrollbar-width:none; }
.listnav::-webkit-scrollbar{ display:none; }
.listnav a{ white-space:nowrap; padding:0.45rem 0.8rem; border-radius:999px; font-weight:600; color:var(--brand-dark); font-size:0.95rem; min-height:44px; display:inline-flex; align-items:center; gap:0.3rem; }
.listnav a:hover{ text-decoration:none; background:color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.listnav a.on{ background:color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.hero-search{ display:flex; gap:0.5rem; max-width:34rem; margin:var(--space) auto 0; }
.hero-search input[type=text]{ flex:1; min-height:48px; border:1px solid var(--border); border-radius:999px; padding:0.6rem 1.1rem; font-size:1rem; background:var(--surface); color:var(--text); }
.filter-bar select{ min-height:48px; border:1px solid var(--border); border-radius:999px; padding:0.6rem 1rem; font-size:1rem; background:var(--surface); color:var(--text); }
.list-toolbar select{ min-height:48px; border:1px solid var(--border); border-radius:999px; padding:0.6rem 1rem; font-size:1rem; background:var(--surface); color:var(--text); }
.search-hits{ display:grid; gap:0.5rem; margin-block:0.5rem; }
.search-hit{ display:flex; flex-direction:column; gap:0.15rem; padding:0.75rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.search-hit:hover{ text-decoration:none; box-shadow:var(--shadow-sm); }
.search-hit-title{ font-weight:700; color:var(--brand-dark); }
.search-hit small{ color:var(--text-muted); }
.type-cards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space); margin-block:var(--space); }
.type-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem; padding:1.6rem 1rem; background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); min-height:150px; font-weight:700; color:var(--brand-dark); cursor:pointer; text-align:center; }
.type-card .ic{ font-size:2.4rem; line-height:1; }
.type-card small{ font-weight:500; color:var(--text-muted); }
.type-card input{ position:absolute; opacity:0; pointer-events:none; }
.type-card:has(input:checked){ border-color:var(--brand); box-shadow:var(--shadow); }
@media (max-width:640px){
    .post-grid{ grid-template-columns:repeat(2,1fr); gap:0.75rem; }
    .post-tile{ padding:1.1rem 0.5rem; min-height:104px; font-size:0.95rem; }
    .type-cards{ grid-template-columns:1fr; }
    .list-toolbar input[type=text]{ flex:1 1 100%; }
    .list-toolbar select{ flex:1 1 auto; min-width:0; }
}
.pw-wrap{ display:flex; gap:0.5rem; align-items:center; }
.pw-wrap input{ flex:1; }

/* ---- v5.9.35: list subscriptions ---- */
/* v5.9.65 — subscribe + follow live only in the item-page action cluster,
   floated inline-end next to share (kebab rightmost, then share, subscribe,
   follow). One predictable spot for every per-item action. */
.sub-toggle{ margin: 0; }
.sub-toggle .btn{ min-height:44px; }
.sub-card{ display:flex; align-items:center; gap:.6rem; }
.sub-card .btn{ min-height:44px; }
/* v5.9.55 — sub-cards stack: list name on its own line, button full width
   below it. In the row layout the button claimed its content width first
   and flex gave the name only the leftover sliver, so names wrapped to two
   or three letters per line. Stacking gives the name the full card width
   and turns the button into a bigger, easier target (Fitts' law). */
.sub-card{ flex-direction:column; align-items:stretch; text-align:center; gap:.5rem; }
.sub-card .btn{ width:100%; }

/* ---- v5.9.38: per-post follow + author/admin reach strip (approved mock) ---- */
.follow-toggle{ margin: 0; }
.follow-toggle .btn{ min-height:44px; }
.post-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-block-start:1rem; }
.author-stats{ margin-block-start:1rem; border-block-start:1px solid var(--border); padding-block-start:0.9rem; }
.author-stats .as-title{ font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin:0 0 0.5rem; }
.as-grid{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.as-grid div b{ display:block; font-size:1.35rem; font-weight:800; font-variant-numeric:tabular-nums; }
.as-grid div span{ font-size:0.75rem; color:var(--text-muted); }
.author-stats .as-refs{ font-size:0.85rem; color:var(--text-muted); margin:0.7rem 0 0; }

/* ---- v5.9.39: two-action interface (Post / Partner) ---- */
.hero-quiet{ padding: calc(var(--space) * 1.2) 0; }
.hero-quiet h1{ font-size: 1.6rem; text-align: center; margin: 0; color: var(--brand-dark); }
.door-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); margin-block: var(--space); }
.door{ background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 1.2); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .7rem; }
.door h2{ margin: 0; font-size: 1.4rem; color: var(--brand-dark); }
.door p{ margin: 0; color: var(--text-muted); line-height: 1.55; flex: 1; }
.door .btn{ align-self: flex-start; }
.door-post{ border-color: var(--brand); }
.door-eyebrow{ font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
/* bottom-bar browse menu (pure <details>, no JS) */
.gtabs .gt-primary{ color: var(--text-light); background: var(--brand); border-radius: 14px; }
.gt-browse, .hud-browse{ position: relative; }
.gt-browse summary, .hud-browse summary{ list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--text-muted); font-size: .8rem; font-weight: 800; padding: 8px 10px 7px; min-width: 64px; min-height: 48px; border-radius: 16px; }
.gt-browse summary::-webkit-details-marker, .hud-browse summary::-webkit-details-marker{ display: none; }
.gt-browse[open] summary, .hud-browse[open] summary{ color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.gt-menu, .hud-menu{ position: absolute; bottom: calc(100% + 8px); inset-inline: 0 auto; min-width: 220px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .5rem; display: flex; flex-direction: column; z-index: 60; }
.gt-menu a, .hud-menu a{ display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; min-height: 44px; border-radius: var(--radius-xs); color: var(--text); font-weight: 600; text-decoration: none; }
.gt-menu a:hover, .hud-menu a:hover{ background: color-mix(in srgb, var(--brand) 8%, var(--surface)); text-decoration: none; }
.hud .hud-primary{ color: var(--text-light); background: var(--brand); border-color: var(--brand-dark); }
.hud .hud-primary .hi{ filter: brightness(10); }
.hud summary .hi{ font-size: 1.25rem; margin-top: 3px; }
/* collapsible Q&A pairs */
details.qa-pair summary.qa-q{ cursor: pointer; list-style: none; font-weight: 800; font-size: 1.1rem; color: var(--brand-dark); display: flex; justify-content: space-between; align-items: center; gap: .8rem; min-height: 44px; }
details.qa-pair summary.qa-q::-webkit-details-marker{ display: none; }
details.qa-pair[open] .chev{ transform: rotate(180deg); }
details.qa-pair .chev{ transition: transform .15s ease; }
details.qa-pair .qa-a{ margin-block-start: .8rem; }
@media (max-width: 640px){
    .door-grid{ grid-template-columns: 1fr; }
    .hero-quiet h1{ font-size: 1.35rem; }
}
/* v5.9.40: admin manual tables */
.manual-body table{ width: 100%; border-collapse: collapse; margin-block: .8rem; font-size: .95rem; }
.manual-body th, .manual-body td{ border: 1px solid var(--border); padding: .5rem .7rem; text-align: start; vertical-align: top; }
.manual-body th{ background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.manual-body code{ font-size: .88em; }

/* ---- v5.9.41: boomer-sized admin (approved mock) ---- */
/* Larger base everywhere: 18px root, so every rem-based element scales up */
html{ font-size: 112.5%; }
/* admin dashboard: grouped, compact, big-touch tiles */
.town-group{ margin-block-end: calc(var(--space) * 1.1); }
.town-group > h3{ margin: 0 0 .6rem; font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.town{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.town .bldg{ padding: .9rem .6rem; min-height: 84px; gap: .3rem; }
.town .bldg small{ display: none; }
.town .bldg b{ font-size: 1.02rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.town .bldg .bi{ font-size: 1.8rem; }
.hud a{ min-height: 56px; }
@media (max-width: 640px){ .town{ grid-template-columns: repeat(2, 1fr); } }

/* ---- v5.9.43: report kebab + form ------------------------------------- */
/* Discreet three-dot menu on public item pages. 44px+ tap target (boomer
   sizing), grey until touched — it must not compete with the two doors. */
.kebab{position:relative;display:inline-block;float:inline-end}
.kebab>summary{list-style:none;cursor:pointer;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;color:var(--text-muted);border-radius:50%;border:1px solid transparent}
.kebab>summary::-webkit-details-marker{display:none}
.kebab>summary:hover,.kebab[open]>summary{background:var(--bg);border-color:var(--border)}
.kebab-menu{position:absolute;inset-inline-end:0;top:100%;z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);min-width:200px;padding:.35rem}
.kebab-menu a{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.4rem .8rem;border-radius:var(--radius-xs);color:var(--text);font-size:1.05rem;text-decoration:none;white-space:nowrap}
.kebab-menu a:hover{background:var(--bg)}
.report-box{max-width:620px}
.report-box label{display:block;font-weight:600;margin:.9rem 0 .3rem}
.report-box .req{color:var(--accent)}
.report-box small.muted{display:block;color:var(--text-muted)}

/* ---- v5.9.47: Browse menu in the top bar ------------------------------- */
/* Same sections menu as the bottom bars, as a pure <details> dropdown.
   Desktop: floats under the trigger. Mobile (nav behind the hamburger):
   renders inline so nothing overflows the narrow column. */
.nav-browse{position:relative;display:inline-block}
.nav-browse>summary{list-style:none;cursor:pointer;color:var(--text);font-weight:700;padding:0.35rem 0.8rem;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;gap:.35rem}
.nav-browse>summary::-webkit-details-marker{display:none}
.nav-browse>summary:hover{background:color-mix(in srgb, var(--brand) 10%, var(--surface));color:var(--brand-dark)}
.nav-browse[open]>summary{background:color-mix(in srgb, var(--brand) 10%, var(--surface));color:var(--brand-dark)}
.nav-browse-menu{position:absolute;inset-inline-start:0;top:100%;z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);min-width:240px;padding:.4rem}
.nav-browse-menu a{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.4rem .8rem;border-radius:var(--radius-xs);white-space:nowrap}
.nav-browse-menu a:hover{background:var(--bg)}
@media (max-width: 640px){
    .nav-browse{width:100%}
    .nav-browse-menu{position:static;box-shadow:none;border:none;padding:0 0 0 1rem;min-width:0}
    .nav-browse-menu a{white-space:normal}
}

/* v5.9.55 — header on one row, whatever the title length.
   Why the hamburger dropped under the logo: .header-inner wraps at 640px
   and a flex item refuses to shrink below its content's longest word
   (min-width:auto), so a long site name took the whole row and pushed the
   button onto the next line. The fix is the standard flexbox trio: allow
   the brand to shrink (min-width:0), clip the name with an ellipsis, and
   pin the button (flex:none + auto inline margin keeps it at the end in
   both LTR and RTL). The title gets every pixel between logo and button;
   only when even that runs out does the name shorten with … */
.site-header .brand{min-width:0}
.site-header .brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-header .brand-logo{flex:none}
.site-header .nav-toggle{flex:none;margin-inline-start:auto}
@media (max-width: 640px){
    /* basis 0, not auto: with flex-wrap the line breaks on the item's base
       size BEFORE shrink is considered, so a long title still pushed the
       button down. Basis 0 keeps brand + button on one row, always. */
    .site-header .brand{flex:1 1 0}
}

/* v5.9.55 — register wizard on desktop. The form stretched to the full
   container, so the Back/Next steering buttons (flex:1) each grew to half
   a wide screen while the Create account button sat small at the far left
   — easy to miss, easy to click past. Fix: hold the form to a readable
   560px measure, cap the secondary buttons, and make the one primary
   action the biggest, widest target on the form (Hick/Fitts: the desired
   action gets the most size and the expected end position). */
@media (min-width: 641px){
    form.wizard-register{ max-width:560px; margin-inline:auto; }
    form.wizard-register .wiz-nav .btn{ flex:0 1 auto; min-width:9rem; }
    form.wizard-register .wiz-nav .btn:last-child{ flex:1 1 auto; }
    form.wizard-register > .btn-primary[type="submit"]{ display:flex; width:100%; min-height:56px; font-size:1.15rem; }
    form.wizard-register > p{ text-align:center; }
}

/* v5.9.57 — grouped top bar: brand · search · sections · actions · account.
   Search is an always-visible box (Nielsen Norman: a field, not a link);
   the account cluster collapses into one menu so the desktop row never
   wraps (nine loose items previously forced a second line). */
.site-header .site-nav{flex-wrap:nowrap;flex:none;gap:calc(var(--space) * .5)}
.site-header .top-search input{min-height:48px;font-size:1.05rem}
.nav-account{position:relative;display:inline-block}
.nav-account>summary{list-style:none;cursor:pointer;color:var(--text);font-weight:700;padding:0.35rem 0.8rem;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.nav-account>summary::-webkit-details-marker{display:none}
.nav-account>summary:hover,.nav-account[open]>summary{background:color-mix(in srgb, var(--brand) 10%, var(--surface));color:var(--brand-dark)}
.nav-account-menu{position:absolute;inset-inline-end:0;top:100%;z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);min-width:240px;padding:.4rem}
.nav-account-menu a{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.4rem .8rem;border-radius:var(--radius-xs);white-space:nowrap;color:var(--text);font-weight:500}
.nav-account-menu a:hover{background:var(--bg)}
@media (max-width: 640px){
    /* v5.9.77: the account control lives in the row permanently now — the
       dropdown stays a floating panel under it, never inline, never a
       second line */
    .site-header .nav-account>summary{max-width:40vw;padding-inline:.55rem}
    .site-header .nav-account-menu{position:absolute;inset-inline-end:0;min-width:220px}
}

/* v5.9.59 — approved mock: no separate Home link (the logo and title are
   the home link), and Post/Partner live at the top of the Browse menu.
   The top row is just brand · search · Browse · account; mobile keeps
   Post/Partner one tap away on the bottom bar. */

/* v5.9.61 — share button on every public item page, next to the kebab.
   Same boomer sizing as the kebab (44px+), quiet until touched so the two
   doors stay the loudest things on the page. */
/* v5.9.85: share matches follow/subscribe exactly — same padding, size, weight, colour as .btn.btn-ghost.btn-sm */
/* v5.9.87: .share-btn is a bare marker now — all visual styling comes from
   .btn.btn-ghost.btn-sm, the exact classes follow/subscribe use. The only
   extra rule is the copied state, mirroring the ghost hover. */
.share-btn.copied{border-color:var(--brand);color:var(--brand-dark)}


/* v5.9.65 — action cluster: buttons form a right-aligned row ABOVE the
   title; the title clears below them so long names never slide under the
   buttons (seen on "Whiskey Creek Hereford Ranch" clipping). */
.page-head h1{ clear:both; }
.sub-toggle, .follow-toggle{ margin-block-end:.35rem; }

/* v5.9.67 — header search becomes an icon; the bar row NEVER wraps.
   Row: brand (shrinks, ellipsis) · 🔍 · ☰/Browse+account. The search field
   lives in a panel under the row and opens on tap (progressive disclosure).
   The open mobile menu becomes an absolute panel too, because a nowrap flex
   row can no longer let it drop to a second line. */
.site-header.has-search .header-inner, .site-header .header-inner{flex-wrap:nowrap}
.site-header .search-toggle{flex:none;margin-inline-start:auto;background:none;border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);min-width:44px;min-height:44px;font-size:1.15rem;cursor:pointer;padding:.25rem .6rem}
.site-header .search-toggle:hover{border-color:var(--brand);color:var(--brand)}
.site-header .search-toggle[aria-expanded="true"]{background:color-mix(in srgb,var(--brand) 12%,var(--surface));border-color:var(--brand)}
.site-header.has-search .nav-toggle{margin-inline-start:.4rem}
/* the icon's auto margin pushes the whole right cluster; the nav must not
   claim a second auto margin or the free space splits and the icon strands
   mid-row */
.site-header.has-search .site-nav{margin-inline-start:0}
/* v5.9.77 — login/account is a permanent top-row item (never inside the
   hamburger panel, never wrapping). It shrinks by ellipsis, not by wrapping:
   the greeting text caps and truncates, the row stays one line. */
.site-header .header-account{flex:none;display:flex;align-items:center;gap:calc(var(--space) * .4);margin-inline-start:.4rem;min-width:0}
.site-header .header-login{color:var(--text);font-weight:700;padding:.35rem .8rem;border-radius:999px;min-height:48px;display:inline-flex;align-items:center;white-space:nowrap}
.site-header .header-login:hover{background:color-mix(in srgb, var(--brand) 10%, var(--surface));color:var(--brand-dark);text-decoration:none}
.site-header .nav-account{flex:none;min-width:0}
.site-header .nav-account>summary{max-width:34vw}
.site-header .nav-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (max-width: 640px){
    .site-header .header-account{margin-inline-start:0}
}
.top-search-panel{padding-block:.2rem .7rem}
.top-search-panel .top-search{margin:0}
.top-search-panel .top-search input[type="text"]{width:100%;min-height:48px;font-size:1.05rem}
@media (max-width: 640px){
    .site-header .search-toggle{margin-inline-start:auto}
    .site-header{position:relative}
    .site-header .site-nav{position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--surface);border-block-end:var(--rule);box-shadow:var(--shadow);padding:.5rem .9rem}
    .site-header .site-nav a{min-height:48px}
}

/* v5.9.71 — labeled trend line + stacked daily bars on the receipt */
.trend-wrap{margin-block:.5rem 1rem;max-width:100%}
.trend-peak{font-size:.85rem;font-weight:700;color:var(--brand-dark);margin:0 0 .2rem}
.trend-dates{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-muted);margin-top:.2rem}
.trend-dot{fill:var(--brand)}
.spark{width:100%;height:40px;display:block}
.daybars{width:100%;height:auto;display:block}
.daybars .seg0{fill:var(--brand)}
.daybars .seg1{fill:color-mix(in srgb,var(--brand) 65%,var(--accent))}
.daybars .seg2{fill:var(--accent)}
.daybars .seg3{fill:color-mix(in srgb,var(--accent) 55%,var(--surface))}
.daybars .seg4{fill:var(--border)}
.daybars .seg-empty{fill:var(--border);opacity:.45}
.daybar-legend{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.9rem}
.daybar-legend li{display:flex;align-items:center;gap:.4rem}
.daybar-legend .chip{width:14px;height:14px;border-radius:3px;display:inline-block;flex:none}
.chip.seg0{background:var(--brand)}
.chip.seg1{background:color-mix(in srgb,var(--brand) 65%,var(--accent))}
.chip.seg2{background:var(--accent)}
.chip.seg3{background:color-mix(in srgb,var(--accent) 55%,var(--surface))}
.chip.seg4{background:var(--border)}

/* v5.9.72 — admin trend stub bars (outside .daybars) + chart title in the reach strip */
.seg-empty{fill:var(--border);opacity:.45}
.author-stats .as-chart-title{font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin:.6rem 0 .2rem}

/* v5.9.74 — instant chart tooltip (works on hover and tap; text from data-tip) */
.chart-tip{position:fixed;z-index:9999;max-width:340px;background:#1a1a1a;color:#fff;padding:.55rem .75rem;border-radius:6px;font-size:1rem;line-height:1.5;white-space:pre-line;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* v5.9.80 — payment page: the draft being paid for, above the pay button */
.pay-preview{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);padding:.6rem .9rem;margin:.4rem 0 .8rem}
.pay-preview p{margin:.2rem 0}

/* v5.9.84 — mobile flat navigation: scrollable module bar replaces the hamburger.
   v5.9.85 — Post/Partner moved out of the header into .footer-actions, a second
   footer row above the existing footer, visible on every screen size. */
.footer-actions{
    display: flex; gap: 0.6rem;
    padding-block: calc(var(--space) * 0.9) calc(var(--space) * 0.4);
    border-block-start: 1px solid var(--border);
    margin-block-start: calc(var(--space) * 1.2);
}
.quick-action{
    flex: 1 1 0; min-height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    gap: 0.4rem; padding: 0.6rem 1rem;
    font-size: 1.1rem; font-weight: 700; text-decoration: none;
    line-height: 1.25; text-align: center; white-space: normal;
    box-sizing: border-box; min-width: 0;
}
.quick-action.qa-post{ background: var(--brand); color: var(--text-light); }
.quick-action.qa-post:hover{ background: var(--brand-dark); text-decoration: none; }
.quick-action.qa-partner{ background: var(--surface); color: var(--brand-dark); border: 2px solid var(--brand-dark); }
.quick-action.qa-partner:hover{ text-decoration: none; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
/* v5.9.86: the module bar is THE sections nav on every screen size — the
   Browse menu and hamburger are gone from the markup altogether. */
.module-bar{
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-block: calc(var(--space) * 0.25) calc(var(--space) * 0.6);
}
.module-bar::-webkit-scrollbar{ display: none; }
.module-bar-track{
    display: flex; gap: 0.5rem; width: max-content;
    padding-inline: calc(var(--space) * 0.75);
}
.module-bar a{
    flex: 0 0 auto; min-height: 48px; padding: 0 1rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--surface); color: var(--brand-dark);
    border: 1px solid var(--border); border-radius: 999px;
    font-size: 1.05rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.module-bar a:hover{ text-decoration: none; border-color: var(--brand); }
.module-bar a.active{ background: var(--brand-dark); color: var(--text-light); border-color: var(--brand-dark); }


/* v5.9.86 — action cluster (share/subscribe/follow): one flex row, top-right
   of the page head, no floats; footer actions centered, auto-width. */
.action-cluster{
    display: flex; justify-content: flex-end; align-items: center;
    gap: 0.5rem; flex-wrap: wrap; margin-block: 0.25rem 0.5rem;
}
.action-cluster form{ margin: 0; }
.footer-actions{
    justify-content: center; flex-wrap: wrap; gap: 0.75rem;
}
.quick-action{
    flex: 1 1 240px; max-width: 420px;
}

/* v5.9.87 — mobile: every cluster item (button AND the forms wrapping
   follow/subscribe) takes a full row, so all three stack identically. */
@media (max-width: 640px) {
    .action-cluster{ justify-content: stretch; }
    .action-cluster > *{ flex: 1 1 100%; }
    .action-cluster form .btn{ width: 100%; }
}