/* ==========================================================================
   BhoomiPlan — stylesheet
   Earth palette, system fonts, no framework, prints cleanly.
   ========================================================================== */

:root {
    --green-900:#12301c; --green-800:#1d4227; --green-700:#2E5E3A; --green-600:#3d7a4b;
    --green-500:#4f9a60; --green-200:#bfe0c7; --green-50:#eef6f0;
    --earth-700:#7a4f21; --earth-500:#b97a3c; --earth-200:#e8d5bb;
    --sun-500:#e0a32e; --sun-200:#f7e2b0;
    --clay-500:#c25a3c;
    --ink:#1b211d; --ink-soft:#4d5a52; --ink-faint:#7b8880;
    --bg:#fbfaf6; --surface:#ffffff; --surface-2:#f4f3ec;
    --line:#e2e0d5;
    --radius:14px; --radius-sm:9px;
    --shadow:0 1px 2px rgba(27,33,29,.06), 0 8px 24px rgba(27,33,29,.06);
    --shadow-lg:0 2px 6px rgba(27,33,29,.08), 0 20px 48px rgba(27,33,29,.12);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    --maxw:1140px;
}

html[data-theme="dark"] {
    --ink:#e8ece8; --ink-soft:#a9b5ad; --ink-faint:#7d8a82;
    --bg:#11150f; --surface:#1a201a; --surface-2:#222a22;
    --line:#2f3a30;
    --green-50:#1c2a1f; --green-200:#3a5a42;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 20px 48px rgba(0,0,0,.45);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
    margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.015em; }
h1 { font-size:clamp(2rem,5vw,3.25rem); }
h2 { font-size:clamp(1.5rem,3.2vw,2.1rem); }
h3 { font-size:1.2rem; }
p { margin:0 0 1em; }
a { color:var(--green-700); }
html[data-theme="dark"] a { color:var(--green-500); }
img,svg { max-width:100%; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.muted { color:var(--ink-faint); }

.skip-link {
    position:absolute; left:-9999px; top:0; background:var(--green-700); color:#fff;
    padding:10px 16px; z-index:100; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus { left:0; }

:focus-visible { outline:3px solid var(--sun-500); outline-offset:2px; border-radius:4px; }

/* ---------- header ---------- */
.site-header {
    position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; gap:16px; min-height:64px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; margin-right:auto; }
.brand-mark { font-size:1.6rem; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong { font-size:1.05rem; letter-spacing:-.02em; }
.brand-text small { font-size:.7rem; color:var(--ink-faint); }
.site-nav { display:flex; gap:20px; }
.site-nav a { text-decoration:none; color:var(--ink-soft); font-size:.92rem; font-weight:500; }
.site-nav a:hover { color:var(--green-700); }
.icon-btn {
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1rem;
}
.top-actions { display:flex; gap:8px; align-items:center; }
.lang-btn { font-size:.82rem; font-weight:700; font-family:inherit; }
.mic-btn {
    flex:0 0 auto; width:44px; height:44px; border-radius:50%; cursor:pointer;
    border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:1.05rem;
}
.mic-btn:hover { border-color:var(--green-500); }
.mic-btn.listening {
    background:var(--clay-500); color:#fff; border-color:var(--clay-500);
    animation:micPulse 1.1s ease-in-out infinite;
}
@keyframes micPulse { 0%,100% { box-shadow:0 0 0 0 rgba(194,90,60,.45); } 50% { box-shadow:0 0 0 9px rgba(194,90,60,0); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.listening { animation:none; } }
@media (max-width:720px){ .site-nav { display:none; } }

/* ---------- buttons ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; border-radius:999px; border:1px solid transparent;
    font-size:.95rem; font-weight:600; text-decoration:none; cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
    min-height:44px;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--green-700); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover { background:var(--green-800); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--green-600); color:var(--green-700); }
.btn-link { background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:.86rem; padding:6px 2px; }
.btn-link:hover { color:var(--green-700); }

/* ---------- hero ---------- */
.hero { padding:56px 0 40px; background:
    radial-gradient(900px 420px at 88% -10%, var(--green-50), transparent 60%); }
.hero-inner { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--green-600); margin-bottom:10px; }
.hero h1 em { font-style:normal; color:var(--green-700); }
.lede { font-size:1.08rem; color:var(--ink-soft); max-width:56ch; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 26px; }
.hero-points { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.hero-points li { display:flex; gap:10px; align-items:center; font-size:.92rem; color:var(--ink-soft); }
.hero-points span { font-size:1.05rem; }

.plot {
    display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(5,1fr);
    gap:6px; aspect-ratio:1/.92; background:var(--surface); padding:10px;
    border-radius:var(--radius); box-shadow:var(--shadow-lg); border:1px solid var(--line);
}
.plot-cell {
    border-radius:var(--radius-sm); display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; font-size:.64rem; font-weight:600; text-align:center;
    color:var(--green-900); padding:4px;
}
.plot-cell span { font-size:1.1rem; }
.c1 { grid-area:1/1/2/3; background:var(--earth-200); }
.c2 { grid-area:1/3/3/5; background:var(--green-200); }
.c3 { grid-area:1/5/4/7; background:#cfe7d4; }
.c4 { grid-area:3/1/4/3; background:var(--sun-200); }
.c5 { grid-area:4/1/6/4; background:#c4ddc9; }
.c6 { grid-area:4/4/6/7; background:#bcd9e6; }
html[data-theme="dark"] .plot-cell { color:#0e1a10; }
@media (max-width:900px){
    .hero-inner { grid-template-columns:1fr; gap:32px; }
    .hero-art { max-width:420px; }
}

/* ---------- section scaffolding ---------- */
.section-head { max-width:62ch; margin:0 0 26px; }
.section-head p { color:var(--ink-soft); margin:0; }
.planner { padding:48px 0; }
.result { padding:8px 0 56px; }
.how { padding:56px 0 72px; background:var(--surface-2); border-top:1px solid var(--line); }

.panel {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:24px; margin:0 0 22px; box-shadow:var(--shadow);
}
.panel-head { margin-bottom:18px; }
.panel-head p { margin:0; color:var(--ink-faint); font-size:.9rem; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .two-col { grid-template-columns:1fr; } }

/* ---------- result tabs ---------- */
.tabbar {
    display:flex; gap:6px; margin:0 0 22px; padding:6px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow-x:auto; scrollbar-width:thin;
    position:sticky; top:62px; z-index:30;
}
.tab {
    flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    white-space:nowrap; padding:11px 16px; min-height:44px; border:0; cursor:pointer;
    border-radius:var(--radius-sm); background:transparent; color:var(--ink-soft);
    font-family:inherit; font-size:.88rem; font-weight:600; transition:background .18s, color .18s;
}
.tab:hover { background:var(--surface-2); color:var(--ink); }
.tab.is-active { background:var(--green-700); color:#fff; }
html[data-theme="dark"] .tab.is-active { background:var(--green-600); }
.tab:focus-visible { outline:2px solid var(--green-600); outline-offset:2px; }
.tab-ico { font-size:1rem; line-height:1; }
.tabpanel:focus { outline:none; }
.tabpanel.is-active { animation:tabin .22s ease; }
@keyframes tabin { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .tabpanel.is-active { animation:none; } }

/* ---------- people / manpower ---------- */
.stage-list { display:grid; gap:18px; }
.stage { border:1px solid var(--line); border-left:4px solid var(--green-500); border-radius:var(--radius-sm); padding:16px 18px; background:var(--surface); }
.stage-establish { border-left-color:var(--sun-500); }
.stage-growing   { border-left-color:var(--earth-500); }
.stage-steady    { border-left-color:var(--green-500); }
.stage-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.stage-head b { font-size:1rem; display:block; }
.stage-years { font-size:.79rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.stage-crew { display:flex; align-items:baseline; gap:7px; }
.crew-n { font-size:1.7rem; font-weight:800; line-height:1; color:var(--green-700); font-variant-numeric:tabular-nums; }
html[data-theme="dark"] .crew-n { color:#8fce9f; }
.crew-l { font-size:.79rem; color:var(--ink-soft); max-width:110px; }
.crew-l em { font-style:normal; font-weight:700; color:var(--earth-700); }
html[data-theme="dark"] .crew-l em { color:var(--earth-200); }
.stage-note { font-size:.85rem; color:var(--ink-soft); margin:10px 0 14px; max-width:78ch; }
.stage-bar { display:flex; height:22px; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
.sb { display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; min-width:0; }
.sb-fam  { background:var(--green-600); }
.sb-perm { background:var(--earth-500); }
.sb-cas  { background:var(--sun-500); color:#3a2c07; }
.stage-figs { display:flex; flex-wrap:wrap; gap:4px 20px; font-size:.8rem; color:var(--ink-soft); margin-top:10px; }
.stage-figs b { color:var(--ink); font-variant-numeric:tabular-nums; }
.stage-roles { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-top:14px; }
.role { border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; background:var(--surface-2); display:grid; gap:3px; }
.role b { font-size:.87rem; }
.role-fte { font-size:.76rem; font-weight:700; color:var(--green-700); }
html[data-theme="dark"] .role-fte { color:#8fce9f; }
.role-supervisor .role-fte { color:var(--clay-500); }
.role-does { font-size:.78rem; color:var(--ink-soft); }

.work-split { display:grid; gap:9px; }
.ws-row { display:grid; grid-template-columns:minmax(150px,1.4fr) 3fr minmax(84px,auto); gap:12px; align-items:center; font-size:.84rem; }
.ws-name small { display:block; font-size:.74rem; color:var(--ink-faint); }
.ws-track { height:14px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.ws-fill { height:100%; background:var(--green-500); }
.ws-fill.daily { background:var(--earth-500); }
.ws-days { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ws-days em { font-style:normal; font-size:.72rem; font-weight:600; color:var(--earth-700); }
html[data-theme="dark"] .ws-days em { color:var(--earth-200); }
#peopleNote { margin-top:16px; font-size:.82rem; color:var(--ink-soft); max-width:80ch; }
@media (max-width:640px) { .ws-row { grid-template-columns:1fr; gap:3px; } .ws-days { text-align:left; } }

.tab-anchor { height:0; margin:0; padding:0; }
.tabpager { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 22px; }
.tabpager .btn { min-height:44px; }
.pager-count { color:var(--ink-faint); font-size:.82rem; white-space:nowrap; }

@media (max-width:640px){
    .tabbar { top:0; padding:5px; }
    .tab { flex:0 0 auto; padding:10px 13px; font-size:.82rem; }
}

/* ---------- chat interview ---------- */
.chat-shell {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); overflow:hidden;
}
.chat-progress { height:4px; background:var(--surface-2); }
.chat-progress-bar { height:100%; width:0; background:linear-gradient(90deg,var(--green-600),var(--sun-500)); transition:width .35s ease; }
.chat { padding:22px; max-height:440px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.bubble { max-width:82%; padding:13px 16px; border-radius:16px; font-size:.95rem; }
.bubble-ai { background:var(--green-50); color:var(--ink); border-bottom-left-radius:5px; align-self:flex-start; }
.bubble-user { background:var(--green-700); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.bubble-ai strong { color:var(--green-800); }
html[data-theme="dark"] .bubble-ai strong { color:var(--green-200); }
.bubble small { display:block; margin-top:6px; opacity:.72; font-size:.8rem; }
.bubble-note { background:var(--sun-200); color:#4a3a10; align-self:flex-start; border-bottom-left-radius:5px; }

.chat-input { border-top:1px solid var(--line); padding:18px 22px; background:var(--surface-2); }
.chip-row { display:flex; flex-wrap:wrap; gap:9px; }
.chip {
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    padding:10px 16px; border-radius:999px; cursor:pointer; font-size:.9rem; font-weight:500;
    min-height:42px; transition:all .12s ease;
}
.chip:hover { border-color:var(--green-600); color:var(--green-700); }
.chip[aria-pressed="true"] { background:var(--green-700); color:#fff; border-color:var(--green-700); }
.chip .chip-icon { margin-right:6px; }

.field-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.field-row input[type="text"], .field-row input[type="number"], .field-row select {
    flex:1 1 200px; min-width:0; padding:12px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:1rem;
    font-family:inherit; min-height:46px;
}
.helper { font-size:.82rem; color:var(--ink-faint); margin:10px 0 0; }
.chat-foot { display:flex; justify-content:space-between; padding:10px 22px 14px; }

.place-results { display:grid; gap:8px; margin-top:12px; }
.place-btn {
    text-align:left; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--line);
    background:var(--surface); cursor:pointer; font-size:.9rem; color:var(--ink); font-family:inherit;
}
.place-btn:hover { border-color:var(--green-600); }
.place-btn small { display:block; color:var(--ink-faint); }

.thinking { display:inline-flex; gap:4px; align-items:center; }
.thinking i { width:6px; height:6px; border-radius:50%; background:var(--green-600); display:block; animation:blink 1.2s infinite; }
.thinking i:nth-child(2){ animation-delay:.2s } .thinking i:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }

/* ---------- stats ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.stat {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:15px 16px;
}
.stat .k { font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:700; }
.stat .v { font-size:1.35rem; font-weight:700; margin-top:4px; letter-spacing:-.02em; }
.stat .s { font-size:.8rem; color:var(--ink-faint); }
.stat.good .v { color:var(--green-600); }
.stat.warn .v { color:var(--clay-500); }

/* ---------- layout map ---------- */
.layout-wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
@media (max-width:860px){ .layout-wrap { grid-template-columns:1fr; } }
.layout-map {
    position:relative; aspect-ratio:1/1; border-radius:var(--radius-sm);
    border:2px dashed var(--earth-500); padding:6px; background:var(--surface-2);
}
.zone {
    position:absolute; border-radius:7px; padding:8px; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-start; gap:2px;
    font-size:.7rem; line-height:1.25; color:#12301c; border:1px solid rgba(255,255,255,.55);
}
.zone b { font-size:.74rem; display:block; }
.zone .z-ac { opacity:.75; font-size:.66rem; }
.zone .z-icon { font-size:1rem; }
.compass {
    position:absolute; right:10px; top:10px; font-size:.68rem; font-weight:700;
    color:var(--ink-faint); background:var(--surface); border-radius:50%; width:38px; height:38px;
    display:flex; align-items:center; justify-content:center; border:1px solid var(--line); z-index:2;
}
.layout-notes { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.layout-note { border-left:3px solid var(--green-500); padding:2px 0 2px 12px; }
.layout-note b { display:block; font-size:.92rem; }
.layout-note span { font-size:.85rem; color:var(--ink-soft); }

/* ---------- SVG site plan ---------- */
:root {
    --plan-ground:#f0eee1; --plan-path:#b9a88a; --plan-water:#3d8fb5;
    --plan-drip:#2b7fd1; --plan-belt:#2E5E3A; --plan-fence:#8a7a5c; --plan-gate:#5c4a2e;
}
[data-theme="dark"] {
    --plan-ground:#232a21; --plan-path:#6d6048; --plan-water:#2f7699;
    --plan-drip:#5aa9e6; --plan-belt:#6f9d7b; --plan-fence:#6b5f46; --plan-gate:#7d6845;
}
.layout-map { border:none; padding:0; background:none; aspect-ratio:auto; }
.site-plan {
    display:block; width:100%; max-width:720px; margin:0 auto;
    border-radius:var(--radius-sm); background:var(--surface-2); padding:10px;
    border:1px solid var(--line);
}
.site-plan text { text-anchor:middle; paint-order:stroke; stroke:rgba(255,255,255,.75); stroke-width:.5; }
[data-theme="dark"] .site-plan text { stroke:rgba(0,0,0,.6); }
.site-plan .plan-ico { font-size:2.6px; stroke:none; }
.site-plan .plan-name { font-size:2.3px; font-weight:700; fill:#16301f; }
.site-plan .plan-ac { font-size:1.9px; fill:#2c4433; }
[data-theme="dark"] .site-plan .plan-name,
[data-theme="dark"] .site-plan .plan-ac { fill:#10241a; }
.site-plan .plan-gate-t { font-size:1.6px; font-weight:700; fill:#fff; stroke:none; }
.site-plan .plan-meta-t { font-size:2.2px; fill:var(--ink-soft); }
.site-plan .plan-scale { font-size:2px; fill:var(--ink-soft); text-anchor:start; }
.site-plan .plan-zone:hover rect { filter:brightness(1.06); }

.layout-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:16px 0 18px; }
.layout-legend .lg { display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ink-soft); }
.layout-legend i { width:15px; height:11px; border-radius:3px; display:inline-block; background:#ddd; border:1px solid rgba(0,0,0,.18); }
.layout-legend i.sw-path  { background:var(--plan-path); }
.layout-legend i.sw-water { background:var(--plan-water); }
.layout-legend i.sw-drip  { background:none; border:none; height:0; border-top:2px dashed var(--plan-drip); border-radius:0; }
.layout-legend i.sw-belt  { background:none; border:2px solid var(--plan-belt); border-radius:50%; width:12px; height:12px; }
.layout-legend i.sw-gate  { background:var(--plan-gate); }
.layout-legend i.sw-open  { background:var(--plan-ground); }

/* ---------- income boosters ---------- */
.boost-list { display:grid; gap:14px; margin-top:18px; }
.boost { display:flex; gap:14px; align-items:flex-start; background:var(--surface-2);
    border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
.boost-n { flex:none; width:26px; height:26px; border-radius:50%; background:var(--green-500);
    color:#fff; font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.boost-body { flex:1; min-width:0; }
.boost-head { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; justify-content:space-between; }
.boost-head b { font-size:.98rem; }
.boost-gain { font-weight:700; color:var(--green-600,#2E5E3A); font-size:.92rem; white-space:nowrap; }
[data-theme="dark"] .boost-gain { color:#8fce9f; }
.boost-body p { margin:6px 0 9px; font-size:.87rem; color:var(--ink-soft); line-height:1.5; }
.boost-foot { margin-top:4px; font-size:.8rem; color:var(--ink-faint); }
.data-table .sub { display:block; font-size:.72rem; color:var(--ink-faint); font-weight:400; }
.data-table .u { color:var(--ink-faint); font-size:.78rem; }

/* ---------- recommendation cards ---------- */
.rec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.rec {
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2);
    overflow:hidden;
}
.rec summary { list-style:none; cursor:pointer; padding:16px; display:block; }
.rec summary::-webkit-details-marker { display:none; }
.rec-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.rec-name { font-weight:700; font-size:1.02rem; }
.rec-local { font-size:.82rem; color:var(--ink-faint); }
.score-ring {
    flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
    font-size:.86rem; font-weight:700; color:#fff;
}
.rec-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tag { font-size:.72rem; padding:3px 9px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); }
.tag.hi { background:var(--green-50); border-color:var(--green-200); color:var(--green-800); }
html[data-theme="dark"] .tag.hi { color:var(--green-200); }
.rec-body { padding:0 16px 16px; font-size:.87rem; }
.rec-body h5 { margin:12px 0 6px; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.rec-body ul { margin:0; padding-left:18px; }
.rec-body li { margin-bottom:4px; color:var(--ink-soft); }
.rec-body li.neg { color:var(--clay-500); }
.rec-expand { font-size:.8rem; color:var(--green-700); margin-top:10px; display:inline-block; }

/* ---------- chart ---------- */
.chart-box { margin:8px 0 22px; }
.chart-box h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.chart { display:flex; align-items:stretch; gap:6px; height:210px; padding-top:10px; }
.bar { flex:1; display:flex; flex-direction:column; min-width:0; }
.bar-half { display:flex; flex-direction:column; min-height:0; }
.bar-half.top { justify-content:flex-end; }
.bar-half.bot { justify-content:flex-start; border-top:2px solid var(--line); }
.bar-fill { width:100%; border-radius:5px 5px 0 0; background:var(--green-600); transition:height .5s ease; }
.bar-fill.neg { background:var(--clay-500); border-radius:0 0 5px 5px; }
.bar-label { font-size:.66rem; color:var(--ink-faint); margin-top:5px; text-align:center; }
.bar-value { font-size:.6rem; color:var(--ink-soft); white-space:nowrap; text-align:center; overflow:hidden; }

/* ---------- table ---------- */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; font-size:.86rem; min-width:620px; }
.data-table th, .data-table td { padding:10px 12px; text-align:right; border-bottom:1px solid var(--line); }
.data-table th:first-child, .data-table td:first-child { text-align:left; }
.data-table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
.data-table tfoot td { font-weight:700; border-top:2px solid var(--line); border-bottom:0; }

/* ---------- calendar ---------- */
.cal-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px; }
.cal-month { border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; background:var(--surface-2); }
.cal-month h4 { margin:0 0 2px; font-size:1rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cal-n { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--line);
         color:var(--ink-soft); font-size:.68rem; font-weight:700; flex:none; }
.cal-month.earns { border-color:var(--green-500); }
.cal-month.earns .cal-n { background:var(--green-600); color:#fff; }
.cal-cash { font-size:.68rem; font-weight:700; color:var(--green-700); background:var(--green-50);
            border-radius:20px; padding:2px 8px; }
html[data-theme="dark"] .cal-cash { color:#8fce9f; background:rgba(60,140,80,.18); }
.cal-season { font-size:.72rem; color:var(--ink-faint); margin-bottom:9px; }
.cal-month ul { margin:0; padding-left:0; list-style:none; }
.cal-month li { font-size:.82rem; padding:4px 0 4px 22px; position:relative; color:var(--ink-soft); }
.cal-month li::before { position:absolute; left:0; top:4px; }
li.t-sow::before { content:'\1F331 '; } li.t-plant::before { content:'\1F333 '; }
li.t-harvest::before { content:'\1F9FA '; } li.t-stock::before { content:'\1F43E '; }
li.t-weather::before { content:'\1F326 '; } li.t-prep::before { content:'\1F9F0 '; }
li.t-care::before { content:'\1F501 '; } li.t-build::before { content:'\1F3D7 '; }
li.t-money::before { content:'\1F4B0 '; } li.t-note::before { content:'\2139 '; }
li.t-order::before { content:'\1F6D2 '; }
li.t-order { color:var(--ink); }
li.t-harvest, li.t-money { color:var(--ink); font-weight:600; }
li.urgent { color:var(--clay-500); font-weight:600; }
.cal-month.idle { opacity:.72; }

.cal-ledger { display:grid; gap:10px; }
.cl-row { display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:start;
          border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--radius-sm);
          padding:11px 14px; background:var(--surface-2); }
.cl-row.soon  { border-left-color:var(--green-500); }
.cl-row.slow  { border-left-color:var(--sun-500); }
.cl-row.later { border-left-color:var(--ink-faint); opacity:.8; }
.cl-when { text-align:right; }
.cl-when b { display:block; font-size:.95rem; line-height:1.15; font-variant-numeric:tabular-nums; }
.cl-when span { font-size:.72rem; color:var(--ink-faint); }
.cl-what b { font-size:.9rem; }
.cl-size { font-size:.72rem; color:var(--ink-faint); margin-left:8px; }
.cl-what p { margin:3px 0 0; font-size:.82rem; color:var(--ink-soft); max-width:74ch; }
.cal-notes { margin-top:16px; display:grid; gap:8px; }
.cal-note { margin:0; font-size:.84rem; color:var(--ink-soft); padding-left:18px; position:relative; max-width:80ch; }
.cal-note::before { content:'\2192 '; position:absolute; left:0; color:var(--green-600); font-weight:700; }
@media (max-width:640px) {
  .cl-row { grid-template-columns:1fr; gap:4px; }
  .cl-when { text-align:left; }
  .cl-when b { display:inline; } .cl-when span { margin-left:8px; }
}

/* ---------- advisories ---------- */
.advisory-list { display:grid; gap:12px; }
.advisory { padding:14px 16px; border-radius:var(--radius-sm); border-left:4px solid var(--line); background:var(--surface-2); }
.advisory b { display:block; margin-bottom:3px; }
.advisory p { margin:0; font-size:.88rem; color:var(--ink-soft); }
.advisory.warn { border-left-color:var(--clay-500); }
.advisory.good { border-left-color:var(--green-500); }
.advisory.info { border-left-color:var(--sun-500); }

.alt-list, .scheme-list { display:grid; gap:10px; }
.alt, .scheme { padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.88rem; }
.alt b, .scheme b { display:block; }
.alt span, .scheme span { color:var(--ink-soft); font-size:.83rem; display:block; }
.scheme-how { margin-top:6px; color:var(--ink-faint) !important; font-size:.79rem !important; }
.scheme-link, .link-btn {
    display:inline-block; margin-top:8px; font-size:.82rem; font-weight:600;
    color:var(--green-600,#2E5E3A); text-decoration:none; border-bottom:1px solid currentColor;
    background:none; border-left:none; border-right:none; border-top:none; padding:0; cursor:pointer;
    font-family:inherit;
}
.scheme-link:hover, .link-btn:hover { opacity:.72; }
html[data-theme="dark"] .scheme-link, html[data-theme="dark"] .link-btn { color:#8fce9f; }
.alt-how { margin-top:8px; display:block; }
.alt-how b { display:inline; }
@media print { .link-btn { display:none; } .scheme-link::after { content:" (" attr(href) ")"; font-weight:400; } }

#phasingBox { margin-top:18px; }
.phase { border:1px dashed var(--earth-500); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:10px; font-size:.87rem; }
.phase b { color:var(--earth-700); }
html[data-theme="dark"] .phase b { color:var(--earth-200); }
.phase-src { display:block; font-size:.78rem; color:var(--ink-faint); margin:2px 0 6px; }
.phase-items { display:block; color:var(--ink-soft); }
.phase-intro { font-size:.87rem; color:var(--ink-soft); margin:0 0 14px; max-width:78ch; }
.phase-intro.warn { color:var(--clay-500); margin-top:4px; }

/* ---------- water budget ---------- */
.water-balance { margin-top:18px; display:grid; gap:10px; }
.wb-row { display:grid; grid-template-columns:minmax(120px,1fr) 3fr minmax(84px,auto); gap:12px; align-items:center; font-size:.85rem; }
.wb-label { color:var(--ink-soft); }
.wb-track { height:16px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.wb-fill { height:100%; border-radius:8px 0 0 8px; transition:width .35s ease; }
.wb-fill.need { background:linear-gradient(90deg,var(--clay-500),var(--sun-500)); }
.wb-fill.supply { background:linear-gradient(90deg,var(--plan-water,#3d8fb5),var(--green-500)); }
.wb-value { font-weight:700; text-align:right; white-space:nowrap; }

.water-methods { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:18px; }
.wmethod { border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; background:var(--surface); display:grid; gap:3px; }
.wmethod.is-current { border-color:var(--green-600); box-shadow:inset 0 0 0 1px var(--green-600); }
.wmethod b { font-size:.9rem; }
.wm-eff, .wm-litres { font-size:.8rem; color:var(--ink-soft); }
.wm-tag { margin-top:6px; font-size:.74rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-faint); }
.wm-tag.save { color:var(--green-600); }
html[data-theme="dark"] .wm-tag.save { color:#8fce9f; }
#waterNote { margin-top:14px; font-size:.83rem; color:var(--ink-soft); max-width:78ch; }

/* ---------- good / normal / bad year band ---------- */
.risk-band { display:grid; gap:14px; margin-top:6px; }
.risk-row { border-left:4px solid var(--line); padding:4px 0 4px 14px; }
.risk-row.risk-best { border-left-color:var(--green-500); }
.risk-row.risk-likely { border-left-color:var(--sun-500); }
.risk-row.risk-worst { border-left-color:var(--clay-500); }
.risk-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.risk-value { font-weight:800; font-variant-numeric:tabular-nums; }
.risk-value.pos { color:var(--green-600); }
.risk-value.neg { color:var(--clay-500); }
html[data-theme="dark"] .risk-value.pos { color:#8fce9f; }
.risk-track { height:10px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; margin:6px 0; }
.risk-fill { height:100%; background:currentColor; opacity:.55; transition:width .35s ease; }
.risk-best .risk-fill { background:var(--green-500); }
.risk-likely .risk-fill { background:var(--sun-500); }
.risk-worst .risk-fill { background:var(--clay-500); }
.risk-meta { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:.8rem; color:var(--ink-soft); }
#riskNote { margin-top:14px; font-size:.83rem; color:var(--ink-faint); max-width:78ch; }

/* ---------- editable numbers ---------- */
.ov-cell { min-width:150px; }
.ov-field { display:flex; align-items:center; gap:5px; font-size:.75rem; color:var(--ink-faint); margin-bottom:4px; }
.ov-field:last-child { margin-bottom:0; }
.ov-input {
    width:88px; padding:4px 6px; font-family:inherit; font-size:.8rem; font-variant-numeric:tabular-nums;
    border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink);
}
.ov-input:focus { outline:2px solid var(--green-500); outline-offset:1px; border-color:var(--green-500); }
tr.row-edited { background:color-mix(in srgb, var(--sun-200) 35%, transparent); }
html[data-theme="dark"] tr.row-edited { background:rgba(224,163,46,.14); }
.edit-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:.84rem; color:var(--ink-soft); }

/* ---------- saved plans ---------- */
.scenario-panel { margin-top:8px; }
.scenario-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.scenario-actions input {
    flex:1 1 230px; min-width:180px; padding:10px 12px; font-family:inherit; font-size:.9rem;
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink);
}
.scenario-actions input:focus { outline:2px solid var(--green-500); outline-offset:1px; }
.scenario-list { display:grid; gap:10px; }
.scenario {
    display:grid; grid-template-columns:minmax(180px,2fr) minmax(200px,2fr) auto; gap:10px 18px;
    align-items:center; border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:12px 14px; background:var(--surface);
}
.sc-pick { display:flex; gap:9px; align-items:flex-start; cursor:pointer; }
.sc-pick input { margin-top:3px; accent-color:var(--green-600); }
.sc-pick b { display:block; font-size:.9rem; }
.sc-pick small { display:block; font-size:.76rem; color:var(--ink-faint); margin-top:2px; }
.sc-figs { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:.79rem; color:var(--ink-soft); }
.sc-figs b { font-variant-numeric:tabular-nums; color:var(--ink); }
.sc-btns { display:flex; gap:14px; }
.sc-btns .link-btn { margin-top:0; }
.compare-table td.better { color:var(--green-600); font-weight:700; }
html[data-theme="dark"] .compare-table td.better { color:#8fce9f; }
@media (max-width:640px) { .scenario { grid-template-columns:1fr; } .wb-row { grid-template-columns:1fr; gap:4px; } .wb-value { text-align:left; } }

.result-actions { display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 18px; }
.disclaimer { font-size:.8rem; color:var(--ink-faint); max-width:70ch; }

/* ---------- how it works ---------- */
.how-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; counter-reset:s; }
.how-steps li { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; }
.how-steps h3 { font-size:.95rem; color:var(--green-700); }
.how-steps p { margin:0; font-size:.88rem; color:var(--ink-soft); }

/* ---------- guide page ---------- */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; align-items:center; }
.filter-bar input { padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.95rem; min-height:44px; flex:1 1 220px; font-family:inherit; }
.lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.lib-card { border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; background:var(--surface); }
.lib-card h3 { margin-bottom:2px; font-size:1.05rem; }
.lib-card .lib-local { font-size:.82rem; color:var(--ink-faint); margin-bottom:10px; }
.lib-card dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0 0 10px; font-size:.82rem; }
.lib-card dt { color:var(--ink-faint); } .lib-card dd { margin:0; }
.lib-card ul { margin:0; padding-left:17px; font-size:.83rem; color:var(--ink-soft); }
.empty { padding:40px; text-align:center; color:var(--ink-faint); }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--line); padding:30px 0; background:var(--surface); }
.footer-inner p { margin:0 0 6px; font-size:.88rem; }

/* ---------- print ---------- */
@media print {
    .site-header, .hero, .planner, .how, .site-footer, .result-actions, .icon-btn { display:none !important; }
    .scenario-panel, .mic-btn, .edit-actions, .ov-cell { display:none !important; }
    .tabbar, .tabpager { display:none !important; }
    .tabpanel, .tabpanel[hidden] { display:block !important; visibility:visible !important; }
    .tabpanel { break-before:page; page-break-before:always; animation:none !important; }
    .tabpanel:first-of-type { break-before:auto; page-break-before:auto; }
    body { background:#fff; font-size:11pt; }
    .panel { box-shadow:none; break-inside:avoid; page-break-inside:avoid; border:1px solid #ccc; }
    .rec[open] .rec-body { display:block; }
    .rec { break-inside:avoid; }
    a { text-decoration:none; color:#000; }
}

/* ---------- farmyard & support buildings ---------- */
.sup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sup-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: var(--card); border-left: 4px solid var(--line); }
.sup-card.lv-essential { border-left-color: #b45309; }
.sup-card.lv-strong    { border-left-color: #15803d; }
.sup-card.lv-nice      { border-left-color: #64748b; }
.sup-top { display: flex; align-items: center; gap: 10px; }
.sup-ico { font-size: 1.5rem; line-height: 1; }
.sup-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sup-id strong { font-size: .97rem; }
.sup-lv { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sup-cost { font-weight: 700; font-size: .93rem; white-space: nowrap; }
.sup-why { margin: 9px 0 5px; font-size: .88rem; line-height: 1.5; }
.sup-spec { margin: 0 0 9px; font-size: .81rem; color: var(--muted); line-height: 1.45; }
.sup-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-nums span { font-size: .76rem; background: var(--chip-bg, rgba(0,0,0,.04)); border-radius: 999px; padding: 3px 9px; color: var(--muted); }
.sup-nums .sup-win { background: rgba(21,128,61,.12); color: #15803d; font-weight: 600; }
.sup-foot { margin-top: 14px; }
.sup-total { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.035); font-size: .88rem; }
.sup-total .sup-win { color: #15803d; }
.sup-skipped { margin-top: 16px; }
.sup-skipped h4 { margin: 0 0 4px; font-size: .92rem; }
.sup-left { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.sup-left li { font-size: .85rem; line-height: 1.45; color: var(--muted); }
.sup-left li strong { color: var(--fg); }
.sup-left li em { font-style: normal; font-weight: 600; }
.chip-note { display: block; font-size: .72rem; opacity: .7; margin-top: 2px; font-weight: 500; }
@media (max-width: 640px) { .sup-list { grid-template-columns: 1fr; } }

#econTable tr.row-support td { background: rgba(0,0,0,.028); }
#econTable tr.row-support td:first-child { font-style: normal; }

/* ---------- headline numbers, always above the tabs ---------- */
.kpibar {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  margin:0 0 14px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.kpi { background:var(--surface); padding:11px 14px; display:flex; flex-direction:column; gap:3px; }
.kpi span { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.kpi strong { font-size:1.06rem; line-height:1.2; }

/* ---------- grouped tab bar ---------- */
.tabbar { scroll-snap-type:x proximity; }
.tab { scroll-snap-align:start; }
.tabgroup {
  flex:0 0 auto; align-self:center; padding:0 8px 0 6px; white-space:nowrap;
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.62; border-left:1px solid var(--line);
}
.tabgroup:first-child { border-left:0; padding-left:4px; }

/* ---------- tools & kit ---------- */
.kit-tier { margin:22px 0 10px; font-size:.95rem; }
.kit-tier:first-child { margin-top:4px; }
.kit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.kit-card { border:1px solid var(--line); border-radius:12px; padding:13px 14px; background:var(--card); border-top:3px solid var(--line); }
.kit-card.m-buy   { border-top-color:#15803d; }
.kit-card.m-rent  { border-top-color:#0369a1; }
.kit-card.m-hire  { border-top-color:#b45309; }
.kit-card.m-later { border-top-color:#94a3b8; }
.kit-top { display:flex; align-items:center; gap:10px; }
.kit-ico { font-size:1.5rem; line-height:1; }
.kit-id { flex:1; min-width:0; display:flex; flex-direction:column; }
.kit-id strong { font-size:.95rem; }
.kit-sub { font-size:.74rem; color:var(--ink-soft); }
.kit-mode { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.m-buy .kit-mode   { background:rgba(21,128,61,.13);  color:#15803d; }
.m-rent .kit-mode  { background:rgba(3,105,161,.13);  color:#0369a1; }
.m-hire .kit-mode  { background:rgba(180,83,9,.13);   color:#b45309; }
.m-later .kit-mode { background:rgba(100,116,139,.15);color:#475569; }
.kit-what { margin:9px 0 5px; font-size:.86rem; line-height:1.5; }
.kit-why  { margin:0 0 6px; font-size:.83rem; line-height:1.5; color:var(--ink-soft); }
.kit-verdict { margin:0 0 7px; font-size:.83rem; line-height:1.5; padding:7px 10px; border-radius:8px; background:rgba(0,0,0,.04); }
.kit-tip { margin:0 0 9px; font-size:.81rem; line-height:1.5; }
.kit-tip span { font-weight:700; margin-right:5px; color:#b45309; }
.kit-nums { display:flex; flex-wrap:wrap; gap:6px; }
.kit-nums span { font-size:.76rem; background:rgba(0,0,0,.04); border-radius:999px; padding:3px 9px; color:var(--ink-soft); }

/* ---------- learn ---------- */
.learn-phase { margin:22px 0 10px; font-size:.95rem; }
.learn-phase:first-child { margin-top:4px; }
.learn-card { border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--card); margin-bottom:11px; }
.learn-card.lv-foundation { border-left-color:#b45309; }
.learn-card.lv-skill      { border-left-color:#15803d; }
.learn-card.lv-business   { border-left-color:#0369a1; }
.learn-top { display:flex; align-items:center; gap:11px; }
.learn-ico { font-size:1.5rem; line-height:1; }
.learn-id { display:flex; flex-direction:column; }
.learn-id strong { font-size:.97rem; }
.learn-sub { font-size:.76rem; color:var(--ink-soft); }
.learn-covers { margin:10px 0 9px; padding-left:20px; display:grid; gap:3px; }
.learn-covers li { font-size:.85rem; line-height:1.45; }
.learn-gate { margin:0 0 8px; font-size:.84rem; line-height:1.5; padding:8px 11px; border-radius:8px; background:rgba(180,83,9,.09); }
.learn-gate span { font-weight:700; color:#b45309; }
.learn-where { margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.learn-where a { font-size:.8rem; padding:4px 10px; border:1px solid var(--line); border-radius:999px; text-decoration:none; }
.learn-where a:hover { background:var(--surface-2); }

/* ---------- money leaks ---------- */
.leak-list { display:grid; gap:10px; }
.leak { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card); }
.leak.quick { border-left:4px solid #15803d; }
.leak-head { display:flex; align-items:center; gap:9px; }
.leak-rank { width:22px; height:22px; flex:0 0 auto; border-radius:50%; background:var(--surface-2); color:var(--ink-soft); font-size:.74rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.leak-ico { font-size:1.2rem; }
.leak-head strong { flex:1; min-width:0; font-size:.93rem; }
.leak-amt { font-weight:700; font-size:1rem; color:#15803d; white-space:nowrap; }
.leak-amt em { font-style:normal; font-size:.72rem; font-weight:600; opacity:.75; }
.leak-lose, .leak-fix { margin:7px 0 0; font-size:.85rem; line-height:1.5; }
.leak-lose span, .leak-fix span { font-weight:700; margin-right:4px; }
.leak-lose { color:var(--ink-soft); }
.leak-effort { font-style:normal; font-size:.72rem; padding:2px 8px; border-radius:999px; margin-left:6px; white-space:nowrap; }
.e-low { background:rgba(21,128,61,.13); color:#15803d; }
.e-medium { background:rgba(180,83,9,.13); color:#b45309; }

/* ---------- pitfalls ---------- */
.pit-list { display:grid; gap:10px; }
.pit { border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card); }
.pit.sev-high   { border-left-color:#b91c1c; }
.pit.sev-medium { border-left-color:#b45309; }
.pit.sev-low    { border-left-color:#94a3b8; }
.pit-head { display:flex; align-items:center; gap:9px; }
.pit-ico { font-size:1.25rem; }
.pit-head strong { flex:1; min-width:0; font-size:.93rem; }
.pit-chance { font-size:.74rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); white-space:nowrap; }
.sev-high .pit-chance { background:rgba(185,28,28,.12); color:#b91c1c; }
.pit-when { margin:7px 0 0; font-size:.82rem; color:var(--ink-soft); }
.pit-sign, .pit-prevent { margin:6px 0 0; font-size:.85rem; line-height:1.5; }
.pit-sign span, .pit-prevent span { font-weight:700; margin-right:4px; }
.pit-prevent span { color:#15803d; }

@media (max-width:640px) {
  .kit-grid { grid-template-columns:1fr; }
  .kpibar { grid-template-columns:repeat(2,1fr); }
  .tabgroup { display:none; }
}

/* ==========================================================================
   Utility panels — land area converter and My lands
   ========================================================================== */
.util-panel {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: 22px 0 26px;
    animation: utilIn .18s ease-out;
}
@keyframes utilIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.util-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.util-head h2 { margin: 0; font-size: 1.15rem; }
.util-lede { margin: 6px 0 14px; color: var(--ink-soft); font-size: .88rem; max-width: 74ch; }

/* ---------- converter ---------- */
.conv-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: var(--surface-1); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px 14px;
}
.conv-row input[type="number"] { width: 130px; }
.conv-row select { min-width: 210px; max-width: 100%; }
.conv-eq { color: var(--ink-faint); font-size: 1.2rem; }
.conv-head1 { font-size: 1.05rem; }
.conv-head1 b { font-size: 1.3rem; color: var(--leaf-600); }
html[data-theme="dark"] .conv-head1 b { color: var(--leaf-300); }
.conv-alt { color: var(--ink-faint); font-size: .84rem; }
.conv-note { margin: 8px 0 0; font-size: .82rem; color: var(--ink-soft); }
.conv-note em { color: var(--clay-500); font-style: normal; }

.conv-quick {
    display: grid; gap: 8px; margin: 14px 0 4px;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.conv-cell {
    background: var(--surface-1); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 9px 10px; text-align: center;
}
.conv-val { display: block; font-weight: 700; font-size: 1rem; }
.conv-unit { display: block; font-size: .76rem; color: var(--ink-faint); margin-top: 2px; }

.conv-all { margin-top: 14px; }
.conv-all summary { cursor: pointer; font-size: .86rem; color: var(--ink-soft); }
.conv-grid {
    display: grid; gap: 16px; margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.conv-group h4 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.conv-line {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: .84rem; padding: 4px 0; border-bottom: 1px dotted var(--line);
}
.conv-line span { color: var(--ink-soft); }
.conv-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn-sm { padding: 7px 14px; font-size: .84rem; }

/* live readout beside the size question */
.size-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.size-live-lead { font-size: .8rem; color: var(--ink-faint); }
.size-live-chip {
    font-size: .79rem; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 999px; padding: 3px 10px; color: var(--ink-soft);
}
.size-live-chip b { color: var(--ink); }

/* ---------- my lands ---------- */
.store-note {
    font-size: .8rem; color: var(--ink-soft); margin: 0 0 14px;
    border-left: 3px solid var(--leaf-500); padding-left: 10px;
}
.store-note.warn { border-left-color: var(--clay-500); color: var(--clay-500); }

.lands-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lands-actions input { flex: 1 1 260px; }
.lands-list { display: grid; gap: 10px; margin: 16px 0; }

.land {
    background: var(--surface-1); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px 14px;
    display: grid; gap: 8px;
    grid-template-columns: minmax(200px, 2fr) minmax(200px, 1.4fr) auto;
    align-items: center;
}
.land-open { border-color: var(--leaf-500); box-shadow: inset 3px 0 0 var(--leaf-500); }
.land-main b { display: block; font-size: .95rem; }
.land-main small { display: block; color: var(--ink-faint); font-size: .78rem; margin-top: 2px; }
.land-tag {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
    background: var(--leaf-500); color: #fff; border-radius: 999px; padding: 1px 7px; vertical-align: 2px;
}
.land-figs { display: flex; flex-wrap: wrap; gap: 12px; font-size: .79rem; color: var(--ink-soft); }
.land-figs b { color: var(--ink); }
.land-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.link-btn.danger { color: var(--clay-500); }

.lands-backup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.helper.warn { color: var(--clay-500); }

@media (max-width: 760px) {
    .land { grid-template-columns: 1fr; }
    .land-btns { justify-content: flex-start; }
    .conv-row select { min-width: 0; flex: 1 1 100%; }
}

/* state picker inside the converter and the size question */
.conv-state {
    background: var(--surface-1); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px;
}
.conv-state label { display: block; font-size: .88rem; margin-bottom: 6px; }
.conv-state select { width: 100%; max-width: 340px; }
.conv-state-note { margin: 8px 0 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.55; }
.conv-state-note b { color: var(--leaf-600); }
html[data-theme="dark"] .conv-state-note b { color: var(--leaf-300); }
.conv-state-note em { font-style: normal; color: var(--ink-faint); }
.conv-allunits {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
    font-size: .83rem; color: var(--ink-soft); cursor: pointer;
}
.field-row-state { margin-bottom: 8px; }
.field-row-state select { min-width: 220px; }
.field-label { font-size: .85rem; color: var(--ink-soft); align-self: center; }
.state-note { line-height: 1.55; }
.state-note b { color: var(--leaf-600); }
html[data-theme="dark"] .state-note b { color: var(--leaf-300); }
.state-note em { font-style: normal; color: var(--ink-faint); }

/* honest note about how much of the page is really in Hindi */
.lang-notice {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
    padding: 12px 22px; font-size: .84rem; color: var(--ink-soft); line-height: 1.55;
}
.lang-notice b { color: var(--ink); }
.lang-notice em { display: block; margin-top: 3px; font-style: normal; color: var(--ink-faint); font-size: .8rem; }
.lang-pct {
    flex: 0 0 auto; font-weight: 700; font-size: .9rem;
    background: var(--leaf-500); color: #fff;
    border-radius: 999px; padding: 3px 11px;
}
.lang-notice .link-btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
    .lang-notice { flex-wrap: wrap; padding: 10px 16px; }
    .lang-notice .link-btn { margin-left: 0; }
}
@media print { .lang-notice { display: none !important; } }

/* ==========================================================================
   Buy list — planting material, quantities, grades and suppliers
   ========================================================================== */
.buy-totals {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.buy-tot {
    background: var(--green-50); border: 1px solid var(--green-200);
    border-radius: var(--radius-sm); padding: 12px 14px;
}
.buy-tot b { display: block; font-size: 1.35rem; color: var(--green-800); line-height: 1.2; }
.buy-tot span { font-size: .84rem; color: var(--ink-soft); }

.buy-list { display: flex; flex-direction: column; gap: 8px; }

.buy-row {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); overflow: hidden;
}
.buy-row[open] { box-shadow: var(--shadow); }
.buy-row.u-late { border-left: 4px solid var(--clay-500); }
.buy-row.u-now { border-left: 4px solid var(--sun-500); }
.buy-row.u-soon { border-left: 4px solid var(--green-500); }
.buy-row.u-later { border-left: 4px solid var(--line); }
.buy-row.u-held { border-left: 4px solid var(--line); opacity: .74; }

.buy-row > summary {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; cursor: pointer; list-style: none;
}
.buy-row > summary::-webkit-details-marker { display: none; }
.buy-row > summary:hover { background: var(--surface-2); }
.buy-ico { font-size: 1.3rem; flex: 0 0 auto; }
.buy-main { flex: 1 1 auto; min-width: 0; }
.buy-main b { display: block; font-size: .98rem; }
.buy-qty { font-size: .86rem; color: var(--green-700); font-weight: 600; }
.buy-when { flex: 0 0 auto; text-align: right; }
.buy-badge {
    display: inline-block; font-size: .72rem; font-weight: 700;
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.b-late { background: var(--clay-500); color: #fff; }
.b-now { background: var(--sun-500); color: var(--ink); }
.b-soon { background: var(--green-200); color: var(--green-900); }
.b-later, .b-held { background: var(--surface-2); color: var(--ink-soft); }
.buy-date { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }
.buy-cost { flex: 0 0 auto; font-weight: 700; font-size: .95rem; min-width: 74px; text-align: right; }

.buy-body { padding: 0 14px 14px 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.buy-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 12px;
}
.buy-facts > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.buy-facts span { display: block; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-faint); }
.buy-facts b { font-size: .88rem; font-weight: 600; }

.buy-grade { font-size: .9rem; margin: 0 0 10px 0; }
.buy-check { margin: 0 0 10px 0; padding-left: 18px; }
.buy-check li { font-size: .88rem; color: var(--ink-soft); margin-bottom: 4px; }
.buy-diy { font-size: .88rem; color: var(--ink-soft); margin: 0 0 10px 0; }

.buy-where b { display: block; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 6px; }
.buy-src { border-left: 2px solid var(--green-200); padding-left: 10px; margin-bottom: 8px; }
.buy-src a, .buy-src span { font-weight: 600; font-size: .9rem; }
.buy-src p { margin: 2px 0 0 0; font-size: .85rem; color: var(--ink-soft); }

.buy-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.src-card {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); padding: 12px 14px;
}
.src-card h4 { margin: 0 0 4px 0; font-size: .95rem; }
.src-how { margin: 0 0 8px 0; font-size: .85rem; color: var(--ink-soft); }
.src-items { margin: 0 0 8px 0; font-size: .85rem; }
.src-foot { margin: 0; font-size: .82rem; color: var(--ink-faint); }
.src-foot b { color: var(--ink); }

@media (max-width: 560px) {
    .buy-row > summary { flex-wrap: wrap; }
    .buy-main { flex: 1 1 100%; order: 1; }
    .buy-ico { order: 0; }
    .buy-when { order: 2; text-align: left; }
    .buy-cost { order: 3; margin-left: auto; }
}

/* ==========================================================================
   Needs and wants
   ========================================================================== */
.prio-groups { display: grid; gap: 18px; margin-top: 14px; }

.prio-group {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
}
.prio-group > header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.prio-group > header h4 {
    margin: 0 0 4px;
    font-size: 1.02rem;
    display: flex; align-items: center; gap: 8px;
}
.prio-group > header p { margin: 0; font-size: .86rem; color: var(--muted); }
.prio-count {
    font-size: .72rem; font-weight: 700;
    background: var(--chip); color: var(--muted);
    border-radius: 999px; padding: 1px 9px;
}
.prio-must  > header { background: color-mix(in srgb, #d64545 9%, transparent); }
.prio-good  > header { background: color-mix(in srgb, #d9a300 11%, transparent); }
.prio-later > header { background: color-mix(in srgb, #7a8896 10%, transparent); }

.prio-rows { display: grid; gap: 1px; background: var(--line); }
.prio-row { background: var(--card); padding: 12px 16px; }
.prio-top {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; flex-wrap: wrap;
}
.prio-top b { font-size: .98rem; }
.prio-size { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.prio-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.prio-when, .prio-first {
    font-size: .72rem; font-weight: 600;
    border-radius: 999px; padding: 2px 9px;
    background: var(--chip); color: var(--muted);
}
.prio-why { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.5; }

.tag.tier-must  { background: color-mix(in srgb, #d64545 16%, transparent); }
.tag.tier-good  { background: color-mix(in srgb, #d9a300 18%, transparent); }
.tag.tier-later { background: color-mix(in srgb, #7a8896 16%, transparent); }

/* left out on purpose */
.declined {
    margin-top: 18px; padding: 14px 16px;
    border: 1px dashed var(--line); border-radius: 14px;
    background: color-mix(in srgb, var(--muted) 5%, transparent);
}
.declined h4 { margin: 0 0 4px; font-size: .98rem; }
.declined-intro { margin: 0 0 12px; font-size: .86rem; color: var(--muted); }
.declined-row + .declined-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.declined-row b { display: block; font-size: .95rem; }
.declined-why { display: block; font-size: .85rem; color: var(--muted); margin: 3px 0 8px; }
.declined-alt {
    border-left: 3px solid var(--accent);
    padding: 8px 12px; border-radius: 0 10px 10px 0;
    background: var(--card);
}
.alt-tag {
    display: inline-block; font-size: .68rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 3px;
}
.declined-alt p { margin: 0; font-size: .87rem; line-height: 1.55; }

/* and in what order */
.phase-title { margin: 22px 0 10px; font-size: 1rem; }
.phase-line { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.phase-step {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; background: var(--card);
}
.phase-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: .78rem; font-weight: 700; margin-bottom: 6px;
}
.phase-step b { display: block; font-size: .93rem; }
.phase-step p { margin: 4px 0 8px; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.phase-step ul { margin: 0; padding-left: 18px; font-size: .85rem; }
.phase-step li { margin: 2px 0; }

/* ==========================================================================
   People: which way of hiring
   ========================================================================== */
.mode-note {
    margin: 8px 0 0 !important;
    font-size: .84rem; opacity: .85; font-style: italic;
}
.hire-compare { margin-top: 16px; }
.hire-compare h4 { margin: 0 0 10px; font-size: 1rem; }
.hire-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hire-card {
    position: relative;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 14px; background: var(--card);
    display: flex; flex-direction: column; gap: 6px;
}
.hire-best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.hire-tag {
    position: absolute; top: -9px; right: 12px;
    background: var(--accent); color: #fff;
    font-size: .66rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
}
.hire-card > b { font-size: .95rem; }
.hire-cost { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.hire-cost small { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); }
.hire-good, .hire-bad { font-size: .84rem; line-height: 1.5; color: var(--muted); }
.hire-advice {
    margin: 12px 0 0; font-size: .88rem; line-height: 1.6;
    padding: 10px 12px; border-radius: 10px;
    background: var(--chip);
}
.stat.warn .v { color: #c26a1c; }

/* ==========================================================================
   Farm register
   ========================================================================== */
.book-licence {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 10px; justify-content: space-between;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; margin: 14px 0;
}
.lic-pro   { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lic-trial { background: color-mix(in srgb, #d9a300 8%, transparent); }
.lic-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 320px; }
.lic-badge {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
    background: var(--chip); white-space: nowrap;
}
.lic-pro .lic-badge { background: var(--accent); color: #fff; }
.lic-note { font-size: .85rem; color: var(--muted); }
.lic-bar {
    display: block; width: 100%; height: 4px; border-radius: 999px;
    background: var(--line); overflow: hidden;
}
.lic-bar i { display: block; height: 100%; background: var(--accent); }
.lic-buy { flex: 1 1 100%; }
.lic-buy summary { cursor: pointer; font-size: .88rem; font-weight: 600; }
.lic-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .84rem; }
.lic-table th, .lic-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.lic-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lic-honest { font-size: .84rem; color: var(--muted); line-height: 1.6; }
.lic-redeem { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lic-redeem input {
    flex: 1 1 180px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); color: inherit; font: inherit;
}
.lic-owner { font-size: .8rem; color: var(--muted); margin: 6px 0 0; }
.lic-owner code { background: var(--chip); padding: 1px 6px; border-radius: 5px; }
.lic-msg { font-size: .84rem; margin: 6px 0 0; font-weight: 600; }

.book-form {
    border: 1px solid var(--line); border-radius: 14px;
    padding: 14px; background: var(--card);
}
.book-kinds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.book-kinds label { cursor: pointer; }
.book-kinds input { position: absolute; opacity: 0; width: 0; height: 0; }
.book-kinds span {
    display: inline-block; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--line); font-size: .86rem; font-weight: 600;
}
.book-kinds input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
.book-kinds input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.book-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bf { display: flex; flex-direction: column; gap: 4px; }
.bf-wide { grid-column: span 2; }
.bf label { font-size: .76rem; font-weight: 600; color: var(--muted); }
.bf input, .bf select {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); color: inherit; font: inherit; font-size: .9rem;
    min-width: 0;
}
.book-hint { font-size: .8rem; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.book-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-sm { padding: 6px 12px; font-size: .84rem; }

.book-summary { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 16px 0; }
.book-analysis h4 { margin: 18px 0 8px; font-size: .98rem; }

.book-locked {
    border: 1px dashed var(--line); border-radius: 12px;
    padding: 16px; text-align: center; margin-top: 16px;
}
.book-locked b { display: block; font-size: .98rem; margin-bottom: 6px; }
.book-locked p { margin: 4px 0; font-size: .87rem; color: var(--muted); line-height: 1.55; }

.bk-blocks { display: grid; gap: 10px; }
.bk-block {
    display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto;
    gap: 12px; align-items: center;
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.bk-bname b { display: block; font-size: .9rem; }
.bk-bname span { font-size: .75rem; color: var(--muted); }
.bk-bars { display: grid; gap: 3px; min-width: 0; }
.bk-bar {
    height: 16px; border-radius: 4px; min-width: 2px;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 5px;
}
.bk-bar span { font-size: .68rem; font-weight: 700; color: #fff; white-space: nowrap; }
.bk-bar.bk-in { background: #2e7d4f; }
.bk-bar.bk-out { background: #c05a2e; }
.bk-net { font-size: .95rem; font-weight: 700; white-space: nowrap; }
.bk-net.pos { color: #2e7d4f; }
.bk-net.neg { color: #c05a2e; }

.bk-months {
    display: flex; gap: 6px; align-items: flex-end;
    overflow-x: auto; padding-bottom: 6px;
}
.bk-month { flex: 0 0 auto; width: 46px; text-align: center; }
.bk-mbars { display: flex; gap: 2px; align-items: flex-end; height: 90px; justify-content: center; }
.bk-mbars i { width: 12px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bk-min { background: #2e7d4f; }
.bk-mout { background: #c05a2e; }
.bk-month span { display: block; font-size: .68rem; color: var(--muted); margin-top: 4px; }

.bk-vs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.bk-vs > div {
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.bk-vs span { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bk-vs b { display: block; font-size: 1.2rem; }
.bk-vs small { font-size: .78rem; color: var(--muted); }

.book-listhead {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin: 22px 0 10px;
}
.book-listhead h3 { margin: 0; font-size: 1.05rem; }
.book-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.book-filters input, .book-filters select {
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); color: inherit; font: inherit; font-size: .85rem;
}

.book-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.book-list:empty { border: 0; }
.bk-row {
    display: grid; grid-template-columns: 46px 1fr auto auto;
    gap: 10px; align-items: center;
    background: var(--card); padding: 9px 12px;
    border-left: 3px solid transparent;
}
.bk-row.bk-out { border-left-color: #c05a2e; }
.bk-row.bk-in { border-left-color: #2e7d4f; }
.bk-row.bk-work { border-left-color: #4a7ba7; }
.bk-date { text-align: center; font-size: 1.05rem; font-weight: 700; line-height: 1; }
.bk-date small { display: block; font-size: .64rem; font-weight: 400; color: var(--muted); }
.bk-what { min-width: 0; }
.bk-what b { display: block; font-size: .9rem; }
.bk-what small { display: block; font-size: .76rem; color: var(--muted); }
.bk-amt { font-size: .98rem; font-weight: 700; white-space: nowrap; text-align: right; }
.bk-amt small { display: block; font-size: .64rem; font-weight: 600; color: #c26a1c; }
.bk-row.bk-in .bk-amt { color: #2e7d4f; }
.bk-row.bk-out .bk-amt { color: #c05a2e; }
.bk-ops { display: flex; gap: 2px; }
.bk-ops .icon-btn { width: 28px; height: 28px; font-size: .8rem; }

.buy-tier {
    font-size: .64rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; padding: 1px 7px; border-radius: 999px;
    vertical-align: middle; white-space: nowrap;
}
.bt-must  { background: color-mix(in srgb, #d64545 18%, transparent); }
.bt-good  { background: color-mix(in srgb, #d9a300 20%, transparent); }
.bt-later { background: color-mix(in srgb, #7a8896 18%, transparent); }

@media (max-width: 640px) {
    .bf-wide { grid-column: span 2; }
    .bk-block { grid-template-columns: 1fr; gap: 6px; }
    .bk-row { grid-template-columns: 40px 1fr auto; }
    .bk-ops { grid-column: 2 / -1; justify-content: flex-end; }
    .book-listhead { align-items: flex-start; }
    .prio-top { flex-direction: column; gap: 2px; }
}

/* --- round 14 tidy-up ---------------------------------------------------- */
.prio-phases { margin-top: 18px; }
.bk-edit, .bk-del { font-size: .82rem; padding: 2px 6px; line-height: 1; opacity: .7; }
.bk-edit:hover, .bk-del:hover { opacity: 1; }

/* --- plot too small to draw as blocks ------------------------------------ */
.layout-empty {
    display: flex; flex-direction: column; gap: 8px; justify-content: center;
    min-height: 180px; padding: 22px; text-align: center;
    border: 1px dashed var(--line, #cfd8cf); border-radius: 12px;
    background: var(--plan-ground, #f4f7f3);
}
.layout-empty b { font-size: 1.02rem; }
.layout-empty span { font-size: .9rem; line-height: 1.55; opacity: .8; max-width: 46ch; margin: 0 auto; }

.tag.warn { background: #fdf1e3; border-color: #e6c79a; color: #8a5a1c; }
html[data-theme="dark"] .tag.warn { background: #3a2c17; border-color: #6b4f24; color: #f0c98a; }

/* ---- timber comparison table (round 16) ---- */
.timber-tbl { width: 100%; }
.timber-tbl td.num, .timber-tbl th.num { text-align: right; white-space: nowrap; }
.timber-tbl td.neg { color: var(--clay-500); }
.timber-tbl tr.is-picked { background: rgba(46, 94, 58, .07); }
.timber-tbl tr.is-picked b { color: var(--forest-700, #2E5E3A); }
.timber-note { display: block; font-size: .78rem; opacity: .72; line-height: 1.45; margin-top: 2px; }
.score-pill { display: inline-block; min-width: 30px; padding: 2px 7px; border-radius: 999px;
  color: #fff; font-size: .78rem; font-weight: 600; text-align: center; }
html[data-theme="dark"] .timber-tbl tr.is-picked { background: rgba(120, 190, 140, .12); }

/* ---- live fence (round 16) ---- */
.fence-how { margin-top: 18px; }
.fence-how h4 { margin: 16px 0 6px; font-size: .96rem; }
.fence-how ul { margin: 0 0 4px; padding-left: 20px; }
.fence-how li { margin-bottom: 5px; line-height: 1.55; }
.fence-how p { line-height: 1.6; margin: 0 0 10px; }

/* ---- round 17: booster arithmetic and scope ---- */
.boost-basis {
    font-size: .82rem;
    color: var(--ink-faint);
    background: var(--surface-2);
    border-left: 3px solid var(--line);
    padding: .4rem .6rem;
    border-radius: 0 6px 6px 0;
    margin: .35rem 0 .5rem;
}
.boost-on {
    font-size: .78rem;
    color: var(--ink-faint);
    margin: .45rem 0 .5rem;
}
.boost-on span {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .68rem;
    opacity: .75;
    margin-right: .3rem;
}
.boost-on em {
    font-style: normal;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .1rem .5rem;
    display: inline-block;
    margin: .1rem .15rem;
}

/* ---- round 18: labour mix comparison ---- */
.hire-intro {
    margin: -.2rem 0 .8rem;
    font-size: .85rem;
    color: var(--ink-faint);
}
.hire-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .2rem; }
.hire-tag.yours {
    background: var(--earth-500);
    color: #fff;
}
.hire-tag.bad {
    background: var(--clay-500);
    color: #fff;
}
.hire-card.hire-yours {
    border-color: var(--earth-500);
    box-shadow: 0 0 0 2px rgba(185,122,60,.18);
}
.hire-card.hire-blocked {
    opacity: .72;
    border-style: dashed;
}
.hire-mathy {
    font-size: .78rem;
    color: var(--ink-faint);
    margin: .3rem 0 .1rem;
}
.hire-delta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--clay-500);
}
.hire-block {
    font-size: .82rem;
    color: var(--clay-500);
    background: rgba(194,90,60,.09);
    border-radius: 6px;
    padding: .35rem .5rem;
    margin: .2rem 0;
}

/* ---- round 19: act on the suggestions instead of only reading them ---- */
button.wmethod { font: inherit; text-align: left; width: 100%; cursor: pointer; color: inherit; }
button.wmethod:disabled { cursor: default; }
button.wmethod:not(:disabled):hover { border-color: var(--green-600); transform: translateY(-1px); }
button.wmethod:not(:disabled):focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.wm-cost { margin-top: 6px; font-size: .78rem; color: var(--ink-soft); }
.wm-pick { margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--green-600); }
html[data-theme="dark"] .wm-pick { color: #8fce9f; }

.sup-drop, .sup-add {
  font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  background: var(--surface); color: var(--ink-soft);
}
.sup-drop { margin-top: 10px; justify-self: start; }
.sup-drop:hover { border-color: var(--clay-500); color: var(--clay-500); }
.sup-add { color: var(--green-600); border-color: var(--green-600); flex: 0 0 auto; }
.sup-add:hover { background: var(--green-600); color: #fff; }
.sup-drop:focus-visible, .sup-add:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.sup-left li { display: flex; align-items: flex-start; gap: 8px; }
.sup-left-body { flex: 1 1 auto; }
.sup-left li em.sup-win { margin-left: 6px; }
.pick-btn {
  font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--green-600); border-radius: 999px; padding: 5px 12px;
  background: var(--surface); color: var(--green-600);
}
.pick-btn:hover { background: var(--green-600); color: #fff; }
.pick-btn.is-off { border-color: var(--line); color: var(--ink-soft); }
.pick-btn.is-off:hover { background: transparent; border-color: var(--clay-500); color: var(--clay-500); }
.pick-btn:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.rec-body .pick-btn { margin-top: 12px; }
html[data-theme="dark"] .pick-btn { color: #8fce9f; border-color: #8fce9f; }
html[data-theme="dark"] .pick-btn:hover { background: #8fce9f; color: #10240f; }
#recDropped { margin-top: 16px; }

/* ---- round 20: buildings dropped because their enterprise went away ---- */
.sup-stale li{
  border-left:3px solid var(--clay-500);
  background:var(--surface-2);
  opacity:.9;
}
.sup-stale .sup-left-body strong{ text-decoration:line-through; text-decoration-thickness:1px; }
.sup-stale em{ color:var(--green-600); font-style:normal; font-weight:600; }