/* Compact theme: single-column feed under a slim topline. */
:root {
    --leaf: #2e7d32;
    --leaf-dark: #1b5e20;
    --leaf-soft: #e8f5e9;
    --txt: #22262a;
    --dim: #6b737b;
    --hair: #e4e7ea;
    --bend: 12px;
    --script: 'Segoe UI', system-ui, Arial, sans-serif;
}
* { box-sizing: border-box; }
body.wrap { margin: 0 auto; max-width: 760px; padding: 0 14px; font: 15px/1.55 var(--script); color: var(--txt); background: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }

.topline { position: sticky; top: 0; z-index: 20; background: #fff; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--hair); box-shadow: 0 2px 8px rgba(34, 38, 42, .04); margin: 0 -14px; padding: 10px 14px; }
.site-title a { color: var(--leaf); font-size: 20px; font-weight: 700; text-decoration: none; }
.add-btn { background: var(--leaf); color: #fff; padding: 8px 18px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .15s ease; }
.add-btn:hover { background: var(--leaf-dark); }

.rubric-rail { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.town-menu { position: relative; flex: 0 0 auto; }
.town-btn { list-style: none; cursor: pointer; display: inline-block; border: 1px solid var(--leaf); color: var(--leaf); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; user-select: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.town-btn::-webkit-details-marker { display: none; }
.town-btn::after { content: ' ▾'; }
.town-menu[open] .town-btn { background: var(--leaf); color: #fff; }
.town-list { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; background: #fff; border: 1px solid var(--hair); border-radius: var(--bend); box-shadow: 0 8px 24px rgba(34, 38, 42, .12); padding: 8px; min-width: 180px; max-height: 320px; overflow-y: auto; }
.town-opt { display: block; padding: 7px 10px; border-radius: 8px; color: var(--txt); text-decoration: none; font-size: 14px; }
.town-opt:hover { background: var(--leaf-soft); color: var(--leaf-dark); }
.rubric-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.rubric-scroll::-webkit-scrollbar { display: none; }
.rubric-chip { flex: 0 0 auto; border: 1px solid #bfe0c1; border-radius: 999px; padding: 5px 14px; font-size: 13px; text-decoration: none; color: var(--leaf); background: #fff; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.rubric-chip:hover { background: var(--leaf); border-color: var(--leaf); color: #fff; }

.board-area { padding: 18px 0 36px; }
.board-head { font-size: 24px; line-height: 1.3; margin: 10px 0 16px; }
.notice-bar { background: #fff8e1; border-left: 4px solid #f9a825; border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 14px; }
.path { font-size: 12px; color: var(--dim); margin-bottom: 12px; }
.path-step { color: var(--leaf); text-decoration: none; }
.path-step:hover { text-decoration: underline; }
.path-sep { margin: 0 6px; color: #aeb6bd; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed-item { border-bottom: 1px solid var(--hair); padding: 12px 10px; margin: 0 -10px; transition: background-color .15s ease; }
.feed-item:hover { background: #f4f9f4; }
.feed-boxed .feed-item { border: 1px solid var(--hair); border-radius: var(--bend); margin: 0 0 10px; padding: 12px 14px; }
.feed-boxed .feed-item:hover { background: #f4f9f4; border-color: #bfe0c1; }
.item-head { margin: 0 0 4px; font-size: 16px; }
.item-head a { color: var(--leaf-dark); font-weight: 600; text-decoration: none; }
.item-head a:hover { text-decoration: underline; }
.item-info { margin: 0; font-size: 13px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.item-cost { color: var(--txt); font-weight: 700; font-size: 14px; }

.tag-cloud, .geo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.tag-chip, .geo-chip { border: 1px solid #bfe0c1; border-radius: 999px; padding: 5px 14px; font-size: 13px; text-decoration: none; color: var(--leaf); background: #fff; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
a.tag-chip:hover, a.geo-chip:hover { background: var(--leaf); border-color: var(--leaf); color: #fff; }

.pages { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.page-lnk { color: var(--leaf); border: 1px solid #bfe0c1; border-radius: 999px; padding: 4px 12px; font-size: 14px; text-decoration: none; transition: background-color .15s ease; }
.page-lnk:hover { background: var(--leaf-soft); }
.page-now { font-style: normal; font-weight: 700; background: var(--leaf); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 14px; }

.sheet { background: #fff; border: 1px solid var(--hair); border-radius: var(--bend); padding: 20px; box-shadow: 0 4px 16px rgba(34, 38, 42, .06); }
.sheet-cost { font-size: 24px; font-weight: 700; color: var(--leaf-dark); margin-bottom: 12px; }
.sheet-text p { margin: 0 0 10px; }
.sheet-ref { color: var(--dim); font-size: 14px; }
.sheet-ref a { color: var(--leaf); }
.sheet-cta { margin-top: 16px; }
.msg-btn { display: inline-block; background: var(--leaf-dark); color: #fff; border-radius: 999px; padding: 11px 26px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .15s ease; }
.msg-btn:hover { background: #14491a; }

.props { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; }
.props-row { border-bottom: 1px solid var(--hair); }
.props-row:last-child { border-bottom: 0; }
.props-key { color: var(--dim); padding: 8px 10px 8px 0; width: 40%; vertical-align: top; }
.props-val { padding: 8px 0; font-weight: 500; }

.refine { background: #fff; border: 1px solid #cfe8cf; border-radius: var(--bend); padding: 14px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.refine-box { border: 0; padding: 0; margin: 0; }
.refine-name { font-size: 12px; color: var(--dim); padding: 0; margin-bottom: 3px; }
.refine-in { padding: 7px 10px; border: 1px solid #cfd6dc; border-radius: 8px; max-width: 120px; font: inherit; font-size: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.refine-in:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(46, 125, 50, .15); }
.refine-flag { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.refine-go { background: var(--leaf); color: #fff; border: 0; border-radius: 999px; padding: 8px 20px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .15s ease; }
.refine-go:hover { background: var(--leaf-dark); }

.step-form, .post-form, .msg-form { margin-bottom: 18px; }
.fld-row { margin: 0 0 14px; }
.fld-name { display: block; font-size: 13px; color: #55606a; margin-bottom: 4px; }
.fld { width: 100%; max-width: 460px; padding: 9px 12px; border: 1px solid #cfd6dc; border-radius: 8px; font: inherit; font-size: 15px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.fld:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(46, 125, 50, .15); }
.fld-flag { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 4px 0; }
.go-btn { background: var(--leaf); color: #fff; border: 0; border-radius: 999px; padding: 10px 24px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color .15s ease; }
.go-btn:hover { background: var(--leaf-dark); }
.fail-box { background: #ffebee; border: 1px solid #f3bfc5; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.fail-line { margin: 2px 0; font-size: 14px; }
.gap-slot { display: none; }

.bottomline { border-top: 1px solid var(--hair); padding: 14px 0 24px; margin-top: 8px; }
.fine-print { color: var(--dim); }
.void-note, .oops-text { color: var(--dim); }
.oops { text-align: center; padding: 40px 0; }
.oops-home { color: var(--leaf); }

.spot-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; padding: 8px 0 0; border-top: 1px dashed var(--hair); }
.spot-cell { font-size: 13px; }
.spot-link { color: var(--dim); }
.spot-link:hover { color: var(--leaf); }
.spot-link img { max-width: 100%; height: auto; border-radius: 8px; }

@media (max-width: 560px) {
    .board-head { font-size: 21px; }
    .sheet { padding: 16px; }
    .sheet-cta { position: sticky; bottom: 0; z-index: 10; background: #fff; padding: 10px 0; margin-top: 12px; }
    .msg-btn { display: block; text-align: center; }
    .refine-in { max-width: 100%; }
}