/* Porchly theme: large type, high contrast, big tap targets, calm colours. */
:root {
    --pl-primary: #0f766e;
    --pl-primary-dark: #0b5f58;
    --pl-ink: #1f2933;
    --pl-muted: #52606d;
    --pl-bg: #f6f7f4;
    --pl-card: #ffffff;
    --pl-line: #d9dfe3;
    --pl-sell: #1d4ed8;
    --pl-free: #15803d;
    --pl-swap: #6d28d9;
    --pl-want: #b45309;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--pl-ink);
    --bs-link-color: var(--pl-primary);
    --bs-link-hover-color: var(--pl-primary-dark);
    --bs-primary: var(--pl-primary);
    --bs-primary-rgb: 15, 118, 110;
}

html { font-size: 100%; }
body { background: var(--pl-bg); font-size: 1.125rem; line-height: 1.55; color: var(--pl-ink); }
@media (max-width: 767.98px) { body { padding-bottom: 5.25rem; } }

h1, .h1 { font-size: 1.9rem; font-weight: 700; }
h2, .h2 { font-size: 1.5rem; font-weight: 700; }
h3, .h3 { font-size: 1.6rem; font-weight: 700; }
h4, .h4 { font-size: 1.35rem; font-weight: 700; }
h5, .h5 { font-size: 1.2rem; font-weight: 700; }
.text-muted, .form-text { color: var(--pl-muted) !important; }
.small, small { font-size: .95rem; }

/* Always-visible keyboard focus */
:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: .5rem; background: #fff; padding: .75rem 1rem; z-index: 2000; border-radius: .5rem; font-weight: 600; }
.skip-link:focus { left: .5rem; }

/* Buttons */
.btn { min-height: 3rem; padding: .65rem 1.25rem; font-size: 1.05rem; font-weight: 600; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-lg { min-height: 3.6rem; font-size: 1.2rem; }
.btn-sm { min-height: 2.6rem; font-size: 1rem; padding: .45rem 1rem; }
.btn-primary { --bs-btn-bg: var(--pl-primary); --bs-btn-border-color: var(--pl-primary); --bs-btn-hover-bg: var(--pl-primary-dark); --bs-btn-hover-border-color: var(--pl-primary-dark); --bs-btn-active-bg: #0a524c; --bs-btn-active-border-color: #0a524c; --bs-btn-disabled-bg: var(--pl-primary); --bs-btn-disabled-border-color: var(--pl-primary); }
.btn-outline-primary { --bs-btn-color: var(--pl-primary); --bs-btn-border-color: var(--pl-primary); --bs-btn-hover-bg: var(--pl-primary); --bs-btn-hover-border-color: var(--pl-primary); --bs-btn-active-bg: var(--pl-primary-dark); }

/* Forms */
.form-label { font-weight: 600; margin-bottom: .35rem; }
.form-control, .form-select { min-height: 3.2rem; font-size: 1.1rem; border-radius: .8rem; border: 2px solid var(--pl-line); }
textarea.form-control { min-height: 8rem; }
.form-control:focus, .form-select:focus { border-color: var(--pl-primary); box-shadow: 0 0 0 .25rem rgba(15, 118, 110, .25); }
.form-check-input { width: 1.4rem; height: 1.4rem; margin-top: .15rem; }
.form-check-label { padding-left: .35rem; }
.text-danger { font-weight: 600; }

/* Top bar */
.pl-topbar { background: #fff; border-bottom: 1px solid var(--pl-line); }
.pl-topbar .navbar-brand { font-weight: 800; font-size: 1.5rem; color: var(--pl-primary); display: flex; align-items: center; gap: .5rem; }
.pl-topbar .nav-link { color: var(--pl-ink); font-weight: 600; padding: .6rem .9rem; border-radius: .7rem; display: inline-flex; align-items: center; gap: .45rem; }
.pl-topbar .nav-link:hover { background: #eef2f1; }
.pl-topbar .nav-link.active { background: #dff1ee; color: var(--pl-primary-dark); }
.text-size-controls .btn { min-height: 2.6rem; min-width: 2.6rem; padding: .25rem .6rem; }

/* Mobile tab bar */
.pl-tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--pl-line); display: flex; z-index: 1030; padding-bottom: env(safe-area-inset-bottom); }
.pl-tabbar a { flex: 1; text-align: center; padding: .55rem .25rem; color: var(--pl-muted); text-decoration: none; font-size: .85rem; font-weight: 600; position: relative; }
.pl-tabbar a i { display: block; font-size: 1.5rem; line-height: 1.2; }
.pl-tabbar a.active { color: var(--pl-primary-dark); }
.pl-tabbar a.post-tab i { color: #fff; background: var(--pl-primary); border-radius: 50%; width: 2.6rem; height: 2.6rem; line-height: 2.6rem; margin: -1.1rem auto .1rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.pl-tabbar .badge { position: absolute; top: .2rem; left: 55%; }

/* Hero + type tiles */
.pl-hero { background: linear-gradient(135deg, #0f766e, #115e59); color: #fff; border-radius: 1.25rem; padding: 1.75rem; margin-bottom: 1.5rem; }
.pl-hero h1 { color: #fff; margin-bottom: .25rem; }
.pl-hero p { margin-bottom: 1rem; opacity: .95; }
.pl-hero .form-control, .pl-hero .form-select { border-color: transparent; }
.type-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .type-tiles { grid-template-columns: repeat(4, 1fr); } }
.type-tile { background: var(--pl-card); border: 3px solid transparent; border-radius: 1rem; padding: 1rem; text-decoration: none; color: var(--pl-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); display: block; }
.type-tile:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .12); color: var(--pl-ink); }
.type-tile i { font-size: 2rem; display: block; margin-bottom: .25rem; color: var(--kc); }
.type-tile .t { font-weight: 700; font-size: 1.2rem; display: block; }
.type-tile .d { color: var(--pl-muted); font-size: .95rem; }
.type-tile.active { border-color: var(--kc); background: #fbfdfd; }
.k-sell { --kc: var(--pl-sell); } .k-free { --kc: var(--pl-free); } .k-swap { --kc: var(--pl-swap); } .k-want { --kc: var(--pl-want); }

/* Badges */
.kind-badge { display: inline-block; color: #fff; font-weight: 700; font-size: .9rem; padding: .25rem .7rem; border-radius: 2rem; }
.kind-badge { background: var(--kc); }
.status-badge { display: inline-block; background: #374151; color: #fff; font-weight: 700; font-size: .9rem; padding: .25rem .7rem; border-radius: 2rem; }

/* Listing cards */
.listing-card { background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 1rem; overflow: hidden; height: 100%; position: relative; transition: box-shadow .15s; }
.listing-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.listing-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e5e9ea; display: block; }
.listing-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--pl-muted); font-size: 2.5rem; }
.listing-card .card-body { padding: .9rem 1rem 1rem; }
.listing-card .price { font-size: 1.25rem; font-weight: 800; }
.listing-card .title { font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: .35rem 0 .15rem; }
.listing-card .title a { color: var(--pl-ink); text-decoration: none; }
.listing-card.is-closed .listing-thumb { opacity: .55; }

/* Details */
.detail-photo { max-height: 460px; width: 100%; object-fit: contain; background: #e5e9ea; border-radius: 1rem; }
.thumb-strip button { border: 3px solid transparent; padding: 0; background: none; border-radius: .6rem; }
.thumb-strip button.selected, .thumb-strip button:focus-visible { border-color: var(--pl-primary); }
.thumb-strip img { height: 72px; width: 72px; object-fit: cover; border-radius: .45rem; display: block; }
.panel { background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 1rem; padding: 1.25rem; }

/* Post form: type picker */
.type-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .type-picker { grid-template-columns: repeat(4, 1fr); } }
.type-picker input { position: absolute; opacity: 0; pointer-events: none; }
.type-picker label { display: block; background: var(--pl-card); border: 3px solid var(--pl-line); border-radius: 1rem; padding: .85rem; cursor: pointer; height: 100%; }
.type-picker label i { font-size: 1.8rem; display: block; color: var(--kc); }
.type-picker label .t { font-weight: 700; display: block; }
.type-picker label .d { font-size: .9rem; color: var(--pl-muted); }
.type-picker input:checked + label { border-color: var(--kc); background: #f8fffd; box-shadow: 0 0 0 3px rgba(15, 118, 110, .15); }
.type-picker input:focus-visible + label { outline: 3px solid #f59e0b; outline-offset: 2px; }
.step-title { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.step-title .n { background: var(--pl-primary); color: #fff; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }

/* Messages */
.bubble { max-width: 82%; padding: .7rem 1rem; border-radius: 1.2rem; white-space: pre-wrap; word-wrap: break-word; font-size: 1.1rem; }
.bubble.mine { background: var(--pl-primary); color: #fff; margin-left: auto; border-bottom-right-radius: .3rem; }
.bubble.theirs { background: #fff; border: 1px solid var(--pl-line); border-bottom-left-radius: .3rem; }
.convo-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--pl-line); border-radius: 1rem; text-decoration: none; color: var(--pl-ink); margin-bottom: .6rem; }
.convo-row:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .1); color: var(--pl-ink); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--pl-muted); }
.empty-state > i { font-size: 3rem; display: block; margin-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Hide empty validation summaries (tag helper renders them even when valid) */
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }

/* Condition picker */
.pill-picker { display: flex; flex-wrap: wrap; gap: .75rem; }
.pill-picker input { position: absolute; opacity: 0; pointer-events: none; }
.pill-picker label { display: flex; align-items: center; gap: .5rem; background: var(--pl-card); border: 3px solid var(--pl-line); border-radius: 2rem; padding: .6rem 1.2rem; cursor: pointer; font-weight: 700; }
.pill-picker label .d { font-weight: 400; color: var(--pl-muted); font-size: .9rem; }
.pill-picker input:checked + label { border-color: var(--pl-primary); background: #f0faf8; box-shadow: 0 0 0 3px rgba(15, 118, 110, .15); }
.pill-picker input:focus-visible + label { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* Welcome page */
.welcome-card { background: var(--pl-card); border: 1px solid var(--pl-line); border-radius: 1rem; padding: 1.25rem; height: 100%; }
.welcome-card .icon { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #dff1ee; color: var(--pl-primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: .6rem; }