/* Komistry Farm. Tokens follow komistry-mockup/css/system.css (night, midnight, sky, cloud, yellow). */
:root {
  --night:#0B1330; --midnight:#16245A; --sky:#4FA3FF; --cloud:#E8EDF5; --yellow:#F9E129; --ink:#231F20;
  --bg:#FAFAF8; --fg:#231F20; --accent:#16245A; --line:#d3d9e4; --panel:#fff; --muted:#4f5a6e; --danger:#8a1c1c;
  --font:"Noto Sans","Noto Sans Thai","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Leelawadee UI","Tahoma","PingFang SC","Microsoft YaHei",sans-serif;
  --gutter:16px; --max:1180px;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.55 var(--font); color:var(--fg); background:var(--bg); overflow-x:hidden; }
img, canvas, svg { max-width:100%; }
h1, h2, h3, p { margin:0; }
a { color:inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline:3px solid var(--midnight); outline-offset:2px; }
.site-header :focus-visible, .hero :focus-visible, .sec--cta :focus-visible, .site-footer :focus-visible { outline-color:var(--sky); }
.skip-link { position:absolute; left:8px; top:-100px; z-index:3000; background:var(--yellow); color:var(--night); padding:10px 16px; border-radius:6px; font-weight:700; text-decoration:none; outline:3px solid var(--night); }
.skip-link:focus { top:8px; }
.skip-link:focus-visible { outline-color:var(--yellow); }
main:focus { outline:none; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.wrap--narrow { max-width:760px; }

/* header */
.site-header { position:relative; z-index:2000; background:var(--night); color:#fff; padding:8px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.site-header__row { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:var(--max); margin:0 auto; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.06em; text-decoration:none; }
.brand__mark { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:4px; background:var(--yellow); color:var(--night); font-weight:800; }
.lang select { font:inherit; font-size:.95rem; min-height:44px; padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.4); background:var(--midnight); color:#fff; max-width:9.5em; }
.site-nav { display:flex; flex-wrap:wrap; gap:2px 14px; max-width:var(--max); margin:4px auto 0; font-size:.9rem; }
.site-nav a { display:inline-flex; align-items:center; min-height:44px; padding:0; text-decoration:none; opacity:.85; }
.site-nav a:hover { opacity:1; color:var(--yellow); }
@media (min-width:760px) {
  .site-header { position:sticky; top:0; display:flex; align-items:center; gap:24px; }
  .tool { scroll-margin-top:64px; } /* sticky header is 60px tall here */
  .site-header__row { display:contents; }
  .site-nav { margin:0 0 0 auto; gap:22px; order:1; }
  .lang { order:2; }
}

/* hero */
.hero { background:linear-gradient(180deg,var(--night),var(--midnight)); color:#fff; padding:48px 0 56px; }
.hero__badge { display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.04em; padding:4px 12px; border-radius:999px; background:rgba(249,225,41,.16); color:var(--yellow); margin-bottom:16px; }
.hero h1 { font-size:clamp(1.9rem,6.5vw,3.4rem); line-height:1.15; font-weight:800; max-width:20ch; overflow-wrap:anywhere; }
.hero__sub { font-size:clamp(1.02rem,2.4vw,1.25rem); max-width:56ch; margin-top:16px; opacity:.9; }
.hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.hero__note { margin-top:20px; font-size:.9rem; opacity:.75; max-width:56ch; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 22px; border-radius:999px; font-weight:700; text-decoration:none; border:2px solid transparent; }
.btn--primary { background:var(--yellow); color:var(--night); }
.btn--primary:hover { background:#fff; }
.btn--ghost { border-color:rgba(255,255,255,.7); color:#fff; }
.btn--ghost:hover { background:rgba(255,255,255,.12); }

/* tool */
.tool { background:var(--cloud); padding-bottom:16px; } /* scroll-margin-top is set in the min-width:760px block */
.tool__bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px var(--gutter); max-width:var(--max); margin:0 auto; position:relative; }
.tool__bar h2 { font-size:1.2rem; flex:1 1 100%; }
.tool__bar select, .tool__bar input, .tool__bar button, .viewer button, .viewer select, .mode-tabs button { font:inherit; padding:8px 12px; min-height:44px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--fg); }
.tool__bar button, .viewer button { cursor:pointer; }
.tool__bar select { max-width:100%; }
.search { display:flex; gap:6px; flex:1 1 260px; min-width:0; }
.search input { flex:1; min-width:0; }
.search-results { position:absolute; z-index:1000; background:#fff; border:1px solid var(--line); border-radius:6px; list-style:none; margin:0; padding:0; max-width:calc(100% - 2 * var(--gutter)); }
.search-results button { display:block; width:100%; text-align:left; border:0; }
.coords { flex:1 1 100%; margin-bottom:0; }
.tool__bar .coords summary { padding:8px 12px; }
.coords__form { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; padding:0 12px 4px; }
.coords__form label { display:grid; gap:2px; font-size:.9rem; }
.coords__form input { width:9em; }
.tool__bar .coords__form .fld-err { flex:1 1 100%; padding:0; margin:0; }
.banner { background:#dbe7fb; padding:6px var(--gutter); font-size:.85rem; }
.map-status { min-height:1.4em; padding:2px var(--gutter); color:var(--danger); font-size:.9rem; }
.tool-layout { display:grid; grid-template-columns:minmax(0,1fr) 400px; max-width:var(--max); margin:0 auto; background:var(--panel); border:1px solid var(--line); }
.map { min-height:70vh; min-width:0; z-index:0; }
.tool-side { border-left:1px solid var(--line); max-height:80vh; overflow:auto; min-width:0; }
.mode-tabs { display:flex; gap:6px; padding:8px 16px 0; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:5; }
.mode-tabs button { border-bottom:0; border-radius:6px 6px 0 0; cursor:pointer; background:#f1f4f9; }
.mode-tabs button[aria-selected="true"] { background:var(--midnight); color:#fff; border-color:var(--midnight); font-weight:700; }
.viewer { padding:12px 16px; background:var(--panel); }
.viewer[hidden], .field-panel[hidden] { display:none; }
.viewer h3 { font-size:1.05rem; margin:0 0 6px; } .viewer h4 { font-size:.95rem; margin:14px 0 4px; }
.viewer__hint { font-size:.85rem; color:var(--muted); margin:4px 0; }
.viewer__scenes { list-style:none; padding:0; margin:0; max-height:180px; overflow:auto; }
.viewer__scene { width:100%; text-align:left; margin:2px 0; }
.viewer__scene.is-selected { background:var(--cloud); border-color:var(--accent); }
.viewer__legend { display:flex; align-items:center; gap:6px; font-size:.8rem; } .viewer__legend i { flex:1; height:10px; border-radius:5px; }
.viewer__old { color:#8a5a00; background:#fff4d6; padding:6px 8px; border-radius:6px; }
.viewer__status { min-height:1.2em; color:var(--danger); }
.viewer label { display:block; margin:6px 0; } .viewer input[type=range] { width:100%; }
.viewer__export { display:flex; flex-direction:column; gap:6px; }
.viewer details { margin-top:10px; } .viewer summary { cursor:pointer; font-weight:600; }

/* My Field panel (field.js) */
.field-panel { padding:12px 16px; }
.fld h3 { font-size:1.05rem; margin:0 0 6px; } .fld h4 { font-size:.95rem; margin:12px 0 4px; }
.fld-form { display:grid; gap:8px; max-width:420px; } .fld-form label { display:grid; gap:2px; }
.fld-form input, .fld-form select, .fld select, .fld-actions button, .fld-form button { font:inherit; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; max-width:100%; }
.fld-form button, .fld-actions button { cursor:pointer; } .fld-form .fld-check { display:flex; align-items:center; gap:8px; }
.fld-err, .fld-warn { color:var(--danger); margin:4px 0; } .fld-warn { background:#fdecea; padding:6px 8px; border-radius:6px; }
.fld-muted { color:var(--muted); }
.fld-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-top:12px; border-bottom:1px solid var(--line); }
.fld-tabs button { font:inherit; min-height:44px; padding:8px 12px; border:1px solid transparent; border-bottom:0; background:none; cursor:pointer; border-radius:6px 6px 0 0; }
.fld-tabs button[aria-selected="true"] { background:var(--panel); border-color:var(--line); font-weight:600; color:var(--accent); }
.fld-panel { background:var(--panel); padding:8px 12px 12px; border:1px solid var(--line); border-top:0; }
.fld-chart { width:100%; max-width:640px; display:block; color:var(--fg); }
.fld-stages { display:flex; flex-wrap:wrap; gap:4px; list-style:none; padding:0; margin:6px 0; }
.fld-stages li { flex:1 1 90px; text-align:center; padding:6px 4px; font-size:.8rem; background:#eef1f7; border-radius:4px; }
.fld-stages li.is-done { background:#cfe0f7; } .fld-stages li.is-current { background:var(--accent); color:#fff; font-weight:600; }
.fld-bars { display:flex; gap:6px; align-items:flex-end; list-style:none; padding:0; margin:8px 0; height:150px; max-width:560px; }
.fld-bars li { flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; font-size:.8rem; min-width:0; }
.fld-bar { display:block; width:70%; background:#1f77b4; border-radius:3px 3px 0 0; min-height:2px; } .fld-bar-val { margin-bottom:2px; }
.fld-bars li.is-skip .fld-bar { background:transparent; } .fld-bars li.is-skip .fld-bar-val { color:#2e7d32; font-weight:600; }
.fld-list { padding-left:18px; } .fld-list li { margin:6px 0; }
.fld-soil { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; max-width:320px; } .fld-soil dd { margin:0; font-weight:600; }
.fld-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px; } .fld-link { flex:1 1 200px; min-width:0; padding:6px; }
.fld-disclaimer { font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); padding-top:8px; }
.fld-print-head, .fld-print-title { display:none; }
.fld-print-head h2 { font-size:1.3rem; font-weight:800; line-height:1.25; margin:0 0 4px; }
.fld-print-head p { font-size:.9rem; color:#000; }
.fld-print-title { font-size:1.05rem; margin:10px 0 4px; }

/* marketing sections */
.sec { padding:48px 0; }
.sec--alt { background:var(--cloud); }
.sec h2 { font-size:clamp(1.5rem,4.5vw,2.2rem); line-height:1.2; font-weight:800; margin-bottom:20px; }
.sec h3 { font-size:1.1rem; margin-bottom:6px; }
.sec__sub, .sec__note { color:var(--muted); max-width:64ch; }
.sec__sub { margin:-8px 0 20px; } .sec__note { margin-top:20px; font-size:.9rem; }
.steps, .cards, .crop-grid { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.steps { grid-template-columns:1fr; } .cards { grid-template-columns:1fr; }
.steps li, .cards li { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; }
.sec--alt .steps li, .sec--alt .cards li { border-color:transparent; }
.steps li { border-top:4px solid var(--yellow); }
.crop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.crop-grid li { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; text-align:center; font-weight:600; overflow-wrap:anywhere; }
details { background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
summary { cursor:pointer; padding:14px 16px; font-weight:600; min-height:44px; }
details p { padding:0 16px 16px; color:var(--muted); }
.sec--cta { background:var(--night); color:#fff; text-align:center; }
.sec--cta p { max-width:56ch; margin:0 auto 24px; opacity:.9; }
.site-footer { background:#070c20; color:#cfd6e6; padding:32px 0 40px; font-size:.9rem; }
.site-footer h3 { font-size:.95rem; color:#fff; margin:16px 0 6px; }
.site-footer ul { margin:0 0 12px; padding-left:18px; }
.site-footer p { margin-top:8px; }
.site-footer__tag { color:#fff; font-weight:600; }

@media (min-width:640px) {
  .steps { grid-template-columns:repeat(2,1fr); } .cards { grid-template-columns:repeat(2,1fr); }
  .crop-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:960px) {
  .steps { grid-template-columns:repeat(4,1fr); } .cards { grid-template-columns:repeat(3,1fr); }
  .crop-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .sec { padding:72px 0; } .hero { padding:80px 0 88px; }
}
@media (max-width:800px) {
  .tool-layout { grid-template-columns:1fr; }
  .tool-side { border-left:0; border-top:1px solid var(--line); max-height:none; }
  .map { min-height:55vh; }
}
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

@media print {
  .site-header, .hero, .tool__bar, .banner, .map-status, .map, .mode-tabs, .viewer, .sec, .sec--cta, .site-footer,
  .fld-form, .fld-tabs, .fld-actions, .fld-note, #field-panel [data-el="form"] { display:none !important; }
  body { background:#fff; }
  .tool, .tool-layout, .tool-side { display:block; border:0; background:#fff; max-height:none; overflow:visible; }
  .field-panel, #field-panel { padding:0; display:block !important; }
  .fld-print-head, .fld-print-title { display:block !important; }
  .fld-panel[hidden] { display:block !important; } .fld-panel { border:0; padding:0 0 6px; break-inside:avoid; }
  .fld-disclaimer { color:#000; }
}