.if-shell { max-width: 1320px; }
.if-guide { margin-top: 24px; padding: clamp(18px, 3vw, 30px); }
.if-guide h2 { font-size: 22px; }
.if-guide h3 { margin: 0 0 8px; font-size: 16px; }
.if-guide p { font-size: 14px; line-height: 1.75; margin: 0; }
.if-guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-left: 24px; margin: 24px 0; }
.if-guide-steps li { padding-left: 5px; overflow-wrap: anywhere; }
.if-guide-steps li::marker { color: var(--green); font-weight: 600; }
.if-guide-example { background: var(--soft); border-left: 3px solid var(--green); padding: 18px; }
.if-guide-example p + p { margin-top: 10px; }
@media (max-width: 780px) { .if-guide-steps { grid-template-columns: 1fr; gap: 18px; } }
.if-shell *, .if-shell *::before, .if-shell *::after { box-sizing: border-box; }
.if-shell .brand img { display:block; width:178px; height:auto; }
.if-hero { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:45px 0 34px; }
.if-hero .page-title { font-family: var(--font, sans-serif); font-size:clamp(29px, 3.3vw, 45px); line-height:1.3; letter-spacing:-.045em; margin:10px 0 15px; }
.if-lead { color:var(--muted); font-size:16px; line-height:1.9; margin:0; }
.if-field-mark { display:flex; gap:18px; align-items:center; width:280px; color:var(--green); position:relative; padding:20px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.if-pixel-number {font-family:"Jersey 10",monospace; font-size:96px; line-height:.9; }
.if-field-mark > span:last-of-type {font-family:"IBM Plex Mono",monospace; font-size:12px; line-height:1.8; letter-spacing:.05em; }
.if-field-mark i { position:absolute; bottom:-4px; right:0; width:7px; height:7px; background:var(--accent); box-shadow:-12px 0 0 var(--accent),0 -12px 0 var(--accent); }
.if-workspace {display:grid; grid-template-columns:minmax(0, 1fr) 346px; gap:24px; align-items:start; }
.if-main-column {min-width:0; }
.if-steps { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.if-step {display:flex; align-items:center; gap:7px; color:var(--muted); background:transparent; border:1px solid transparent; padding:7px 9px; font:inherit; font-size:12px; cursor:pointer; border-radius:3px; }
.if-step span { width:21px; height:21px; background:#e8ecdf; color:var(--ink); display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:11px; }
.if-step[aria-current="step"] { border-color:var(--green); background:var(--soft); color:var(--ink); font-weight:600; }
.if-step[aria-current="step"] span { background:var(--green); color:white; }
.if-check-panel { padding:30px; min-height:620px; }
.if-section-kicker { font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--green); margin:0 0 11px; }
.if-check-panel h2 {font-size:25px; line-height:1.4; letter-spacing:-.035em; margin:0 0 11px; }
.if-intro {font-size:14px; color:var(--muted); line-height:1.8; margin:0 0 25px; max-width:56ch; }
.if-check-panel fieldset {border:0; margin:0 0 22px; padding:0; min-width:0; }
.if-check-panel legend, .if-field > label {display:block; font-size:14px; font-weight:600; margin-bottom:10px; line-height:1.5; }
.if-form-grid {display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:21px; }
.if-form-grid .if-field {margin:0; }
.if-field {margin:0 0 21px; min-width:0; }
.if-field small {display:block; color:var(--muted); font-size:12px; line-height:1.7; margin-top:6px; }
.if-field input, .if-field textarea, .if-field select {width:100%; min-width:0; min-height:46px; border:1px solid #b6c1ad; border-radius:3px; background:#fffffb; color:var(--ink); padding:11px 12px; font-family:inherit; font-size:14px; line-height:1.5; }
.if-field textarea {resize:vertical; min-height:88px; }
.if-choices {display:flex; flex-wrap:wrap; gap:8px; }
.if-choice {display:flex; align-items:center; gap:8px; border:1px solid #c7d0bc; background:#f9faf1; border-radius:3px; padding:11px 12px; min-height:44px; cursor:pointer; font-size:13px; line-height:1.5; flex:1 1 auto; }
.if-choice:has(input:checked) {background:var(--soft); border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.if-choice input {accent-color:var(--green); width:15px; height:15px; min-height:15px; padding:0; margin:0; flex:0 0 auto; }
.if-choice small {color:var(--muted); display:block; font-size:12px; margin-top:4px; }
.if-choice-stack {display:grid; gap:9px; }
.if-choice-stack .if-choice {align-items:flex-start; padding:14px; }
.if-choice-stack .if-choice input { margin-top:3px; }
.if-choice-stack strong {font-size:14px; font-weight:600; }
.if-helper {border-left:3px solid var(--accent); padding:12px 15px; background:#f4f0e1; font-size:13px; line-height:1.8; margin:18px 0 22px; }
.if-helper strong {color:var(--ink); }
.if-helper p {margin:3px 0 0; }
.if-scope-box {background:#f0f3e7; border:1px solid var(--line); padding:14px 16px; font-size:13px; line-height:1.8; margin:20px 0; }
.if-scope-box p {margin:4px 0 0; color:var(--muted); }
.if-step-footer {border-top:1px solid var(--line); padding-top:21px; margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.if-step-footer .muted {font-family:"IBM Plex Mono",monospace; font-size:11px; white-space:nowrap; }
.if-sidebar {display:grid; gap:16px; padding-top:0; }
.if-notebook {padding:23px 22px; background:#f1f4e8; }
.if-notebook h2 {font-size:17px; margin:7px 0 10px; }
.if-badge {display:inline-flex; align-items:center; font-size:11px; padding:3px 7px; border:1px solid #b8c7a5; color:var(--green); border-radius:2px; }
.if-badge[data-kind="unknown"], .if-badge[data-kind="outside"] {color:#8a571d; border-color:#d7c298; background:#f9f1dd; }
.if-scope-detail {font-size:12px; color:var(--muted); line-height:1.8; margin:11px 0 17px; }
.if-chain {padding:0; margin:0 0 21px; list-style:none; border-top:1px solid #d4ddc8; }
.if-chain li {display:grid; grid-template-columns:15px 1fr auto; align-items:center; gap:8px; padding:9px 0; font-size:12px; border-bottom:1px solid #d4ddc8; }
.if-chain .if-dot {width:9px; height:9px; border:1px solid #96a38c; background:transparent; }
.if-chain [data-status="seen"] .if-dot {background:var(--green); border-color:var(--green); }
.if-chain [data-status="not-seen"] .if-dot {background:var(--accent); border-color:var(--accent); }
.if-chain .if-chain-status {color:var(--muted); font-size:11px; }
.if-small-label {font-size:11px; color:var(--green); }
.if-next-action h3 {font-size:16px; margin:8px 0; line-height:1.6; }
.if-next-action p {font-size:13px; line-height:1.9; margin:0 0 13px; }
.if-note {color:var(--muted); font-size:12px; line-height:1.8; margin:16px 0 0; }
.if-save-panel {padding:23px 22px; }
.if-save-panel h2 {font-size:17px; margin:0 0 10px; }
.if-save-panel .muted {font-size:12px; line-height:1.8; }
.if-save-panel > .button {width:100%; }
.if-save-state {font-size:12px; margin:15px 0; color:var(--green); }
.if-save-grid {display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.if-save-grid .button {padding-left:6px; padding-right:6px; }
.if-text-button {border:0; background:none; padding:8px 0; color:var(--green); text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:12px; cursor:pointer; line-height:1.6; }
.if-reset-row {border-top:1px solid var(--line); margin-top:8px; padding-top:3px; display:flex; justify-content:space-between; gap:10px; }
.if-reset-row > button:first-child {color:var(--muted); }
.if-notice {display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 20px; border:1px solid #becbad; background:#edf3df; margin:0 0 20px; font-size:13px; }
.if-notice p {margin:6px 0 0; color:var(--muted); }
.if-actions {display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.if-message {font-size:13px; line-height:1.8; padding:0; color:var(--green); margin:0 0 12px; }
.if-message:empty {display:none; }
.if-message[data-error="true"] {color:#9f3c2c; padding:11px 14px; background:#fff0e7; border:1px solid #dcb5a5; }
.if-validation {color:#9f3c2c; font-size:12px; line-height:1.6; }
.if-summary-heading {padding:18px 20px; background:var(--soft); border-left:4px solid var(--green); margin:20px 0 24px; }
.if-summary-heading h3 {font-size:17px; margin:0 0 8px; line-height:1.6; }
.if-summary-heading p {font-size:13px; line-height:1.85; margin:0; }
.if-summary-group {border-bottom:1px solid var(--line); padding:0 0 18px; margin-bottom:21px; }
.if-summary-group h3 {font-size:14px; margin:0 0 10px; display:flex; justify-content:space-between; }
.if-summary-group ul {padding-left:18px; margin:0; font-size:13px; line-height:1.9; }
.if-summary-group li {padding:2px 0; overflow-wrap:anywhere; }
.if-summary-group .if-text-button {font-size:11px; padding:0; }
.if-summary-empty {font-size:13px; color:var(--muted); margin:0; }
.if-history {margin-top:20px; border:1px solid var(--line); padding:12px 14px; font-size:13px; }
.if-history summary {cursor:pointer; font-weight:600; line-height:1.7; }
.if-history article {border-top:1px solid var(--line); margin-top:13px; padding-top:13px; }
.if-history h4 {font-size:13px; margin:0 0 5px; }
.if-history p {font-size:12px; line-height:1.8; color:var(--muted); }
.if-history ul {font-size:12px; line-height:1.8; padding-left:18px; }
.if-footer {border-top:1px solid var(--line); margin-top:40px; padding:21px 0 35px; color:var(--muted); font-size:11px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.if-footer > span {font-family:"IBM Plex Mono",monospace; letter-spacing:.04em; }
.if-footer p {margin:0; line-height:1.8; }
.if-footer p span {display:inline-block; }
.if-skip {position:absolute; left:12px; top:-70px; z-index:99; color:var(--ink); background:var(--paper); padding:12px; }
.if-skip:focus {top:12px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {outline:3px solid var(--accent); outline-offset:3px; }
#current-check:focus {outline:0; }
[hidden] {display:none !important; }
#import-dialog {border:1px solid var(--ink); border-radius:5px; background:var(--paper); color:var(--ink); width:min(520px, calc(100% - 32px)); padding:0; font-family:inherit; box-shadow:6px 6px 0 #173f341a; }
#import-dialog::backdrop {background:#173f3466; }
.if-dialog-inner {padding:28px; }
.if-dialog-inner h2 {font-size:23px; margin:10px 0 18px; }
.if-dialog-inner .if-actions {justify-content:flex-end; margin-top:22px; }
#import-preview {font-size:14px; line-height:1.9; overflow-wrap:anywhere; }
#import-preview p {margin:5px 0; }
.if-counts {grid-template-columns:repeat(3, 1fr); }
@media (max-width:1000px) { .if-workspace {grid-template-columns:minmax(0,1fr) 300px; gap:18px; } .if-check-panel {padding:24px;} .if-steps {gap:3px;} .if-step {padding:6px;} }
@media (max-width:780px) { .if-hero {padding:30px 0 25px;} .if-field-mark {display:none;} .if-workspace {grid-template-columns:1fr;} .if-sidebar {grid-template-columns:1fr 1fr; align-items:start;} .if-check-panel {min-height:0;} .if-footer {align-items:flex-start; flex-direction:column;} .if-notice {align-items:flex-start; flex-direction:column;} }
@media (max-width:520px) { .if-shell .brand img {width:147px;} .if-shell .topbar {gap:10px;} .if-shell .beta-tag {font-size:10px;} .if-hero .page-title {font-size:29px;} .if-lead {font-size:14px;} .if-check-panel {padding:22px 18px;} .if-check-panel h2 {font-size:23px;} .if-form-grid {grid-template-columns:1fr; gap:17px;} .if-counts {grid-template-columns:repeat(3,1fr); gap:8px;} .if-counts .if-field > label {font-size:12px;} .if-counts input {padding:10px 8px;} .if-sidebar {grid-template-columns:1fr;} .if-choices {gap:7px;} .if-choice {font-size:12px; padding:10px;} .if-step {font-size:11px; padding:5px 6px; gap:5px;} .if-step span {width:19px;height:19px;} .if-step-footer {gap:8px;} .if-step-footer .button {padding:11px 12px;} .if-step-footer .muted {font-size:10px;} .if-notebook, .if-save-panel {padding:22px;} }
@media (prefers-reduced-motion:reduce) { * {scroll-behavior:auto!important;} }

/* Original illustrated field guide; the form and map share the same record. */
.if-workspace{grid-template-columns:minmax(0,1fr) 460px}
.if-hero{padding:26px 0 24px}
.if-visual-panel{padding:18px;position:sticky;top:12px;z-index:2}
.if-visual-panel header{display:flex;align-items:start;justify-content:space-between;gap:8px}
.if-visual-panel h2{font-size:18px;margin:5px 0 0}
.if-visual-panel .if-badge{font-size:10px;white-space:nowrap}
.if-visual-context{font-size:12px;color:var(--muted);margin:10px 0}
.if-farm-map{display:block;width:100%;height:auto;overflow:visible}
.if-flow-arrow{fill:none;stroke:#78957d;stroke-width:5;stroke-linejoin:round}
.if-map-area{font:14px 'IBM Plex Sans','PingFang SC',sans-serif;text-anchor:middle;fill:#596c56}
.if-map-zone{cursor:pointer;outline:none}
.if-zone-halo{fill:transparent;stroke:transparent;stroke-width:3;transition:fill .16s,stroke .16s}
.if-map-zone:hover .if-zone-halo{fill:#fffef899;stroke:#91a681}
.if-map-zone[data-active=true] .if-zone-halo,.if-map-zone:focus-visible .if-zone-halo{fill:#fffbee;stroke:#ad682e}
.if-map-zone[data-next=true] .if-zone-halo{stroke:#397529;stroke-dasharray:5 3}
.if-zone-number{fill:#315e43;stroke:#fffef8;stroke-width:2}
.if-zone-numeral{font:bold 13px 'IBM Plex Mono',monospace;text-anchor:middle;fill:white}
.if-zone-badge{fill:#fffef8;stroke:#b7c4a9;stroke-width:1}
.if-zone-value{font:bold 17px 'IBM Plex Mono','PingFang SC',monospace;text-anchor:middle;fill:#375641}
.if-map-zone[data-status=seen] .if-zone-badge,.if-map-zone[data-status=observed] .if-zone-badge{fill:#deecd2;stroke:#5d8642}
.if-map-zone[data-status=not-seen] .if-zone-badge{fill:#f3e4ca;stroke:#b67b3e}
.if-map-zone[data-status=unknown] .if-zone-badge{stroke-dasharray:3 2}
.if-map-next{stroke:#397529;stroke-width:4;fill:none;stroke-linecap:round}
.if-map-legend{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:11px;color:#59695e;padding:9px 0}
.if-map-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.if-zone-link{display:flex;align-items:center;justify-content:flex-start;position:relative;gap:6px;padding:8px 6px;min-height:44px;background:#fffef8;border:1px solid #d0d7c5;color:var(--ink);font-size:12px;font-weight:400}
.if-zone-link b{font:11px 'IBM Plex Mono',monospace;color:var(--green)}
.if-zone-link[aria-pressed=true]{border-color:#ad682e;background:#f6eddc}
.if-zone-link i{font-size:8px;font-style:normal;position:absolute;top:-3px;right:1px;padding:0 3px;background:#397529;color:#fff}
.if-map-detail{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.if-detail-art svg{width:56px;height:56px;display:block}
.if-map-detail strong{font-size:13px}
.if-map-detail strong span{font-family:'IBM Plex Mono',monospace;margin-left:8px}
.if-map-detail p{font-size:12px;color:var(--muted);line-height:1.7;margin:4px 0 0;min-height:40px}
.if-visual-note{font-size:11px;color:var(--muted);line-height:1.7;margin:10px 0 0}
@media(min-width:781px){.if-notebook{position:relative}.if-visual-panel{position:static}}
@media(max-width:1080px) and (min-width:781px){.if-workspace{grid-template-columns:minmax(0,1fr) 370px;gap:18px}.if-visual-panel{padding:14px}.if-visual-panel .if-badge{display:none}.if-zone-link{font-size:11px}}
@media(max-width:780px){.if-workspace{display:flex;flex-direction:column;gap:16px}.if-main-column,.if-sidebar{display:contents}.if-steps{order:0;width:100%;margin-bottom:0}.if-visual-panel{order:1;width:100%;position:static}.if-check-panel{order:2;width:100%}.if-notebook{order:3;width:100%}.if-save-panel{order:4;width:100%}.if-map-detail p{min-height:0}}
@media(max-width:520px){.if-visual-panel{padding:14px}.if-visual-panel h2{font-size:17px}.if-visual-panel .if-badge{display:none}.if-zone-link{font-size:11px}.if-map-area{font-size:16px}.if-map-legend{font-size:10px;gap:4px 10px}.if-map-detail{grid-template-columns:44px 1fr;gap:9px}.if-detail-art svg{width:44px;height:50px}}

.if-inline-pictures{display:flex;gap:12px;border:1px solid var(--line);background:#f1f4e8;padding:12px 16px;border-radius:5px;margin:0 0 22px}
.if-inline-object{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.if-inline-object svg{width:56px;height:64px;flex-shrink:0}
.if-inline-object span,.if-inline-object small{display:block;font-size:11px;color:var(--muted)}
.if-inline-object strong{display:block;font-size:18px;font-family:'IBM Plex Mono','PingFang SC',sans-serif;line-height:1.5}
.if-conditions-panel{padding:22px}
.if-conditions-panel h2{font-size:18px;margin:6px 0 10px}
.if-conditions-summary{font-size:12px;color:var(--green);line-height:1.7;margin:0}
.if-conditions-panel>.if-note{margin:8px 0 16px}
.if-condition{border-top:1px solid var(--line);font-size:12px;overflow-wrap:anywhere}
.if-condition:last-child{border-bottom:1px solid var(--line)}
.if-condition summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:10px 0}
.if-condition summary::-webkit-details-marker{display:none}
.if-condition summary>span:first-child::before{content:'+';display:inline-block;width:16px;color:var(--green);font-family:monospace}
.if-condition[open] summary>span:first-child::before{content:'−'}
.if-condition p{margin:0 0 6px;line-height:1.8;color:var(--muted)}
.if-condition-status{flex-shrink:0;border:1px solid #bdc7b4;padding:3px 6px;font-size:10px;border-radius:3px;color:#526047;background:#f2f5eb}
.if-condition[data-status=attention] .if-condition-status{color:#83521f;background:#fff1d9;border-color:#cdaa72}
.if-condition[data-status=recorded] .if-condition-status{color:#285f38;background:#e7f0df;border-color:#a3bd94}
.if-condition[data-status=not-applicable] .if-condition-status{color:#62695e;background:#eceee8;border-color:#c7ccbf}
.if-condition-sources{padding-left:17px;margin:4px 0 12px;font-size:11px;line-height:1.7}
.if-condition-sources a{color:var(--green);text-underline-offset:3px}
.if-chain-details{margin-bottom:18px;font-size:12px}
.if-chain-details>summary{cursor:pointer;padding:10px 0;min-height:44px}
.if-chain-details .if-chain{margin-bottom:0}
@media(max-width:780px){.if-check-panel{order:1}.if-visual-panel{order:2}.if-conditions-panel{order:3;width:100%}.if-notebook{order:4}.if-save-panel{order:5}}
@media(max-width:1080px){.if-inline-pictures{gap:8px;padding:12px}.if-inline-object{flex-wrap:wrap;gap:3px}.if-inline-object svg{width:50px;height:54px}}
@media(max-width:520px){.if-inline-object{justify-content:center;text-align:center}.if-inline-object div{width:100%}.if-inline-pictures{margin-bottom:16px}}

/* Translated step names may be much wider than the original Chinese labels. */
.if-step-footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.if-step-footer #step-count { grid-column:1 / -1; grid-row:1; white-space:normal; overflow-wrap:anywhere; text-align:center; }
.if-step-footer #back { grid-column:1; grid-row:2; min-width:0; }
.if-step-footer #next { grid-column:2; grid-row:2; min-width:0; }