/* === GRASSLAND GRAZING CHECKER === */

.grazing-hero {
    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-xl);
    background: var(--color-bg);
}
.grazing-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--color-primary-800); margin-bottom: var(--space-sm); }
.grazing-hero p { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 640px; line-height: 1.6; }
.grazing-back { display: inline-block; font-size: 0.9rem; color: var(--color-primary-500); text-decoration: none; margin-bottom: var(--space-md); font-weight: 500; }
.grazing-back:hover { color: var(--color-primary-600); }

.grazing-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
}
.grazing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.grazing-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.grazing-field label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.grazing-select, .grazing-field input {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-bg);
}
.grazing-select:focus, .grazing-field input:focus { outline: none; border-color: var(--color-primary-400); }
.grazing-form .btn { padding: 12px 24px; border: none; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-600); }

.grazing-result {
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
    border: 1px solid var(--color-border);
}
.grazing-result h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--space-sm); }
.grazing-result p { font-size: 1rem; opacity: 0.9; max-width: 640px; margin: 0 auto; }
.verdict-good { background: #C6F6D5; color: #22543D; border-color: #9AE6B4; }
.verdict-marginal { background: #FEFCBF; color: #744210; border-color: #F6E05E; }
.verdict-bad { background: #FED7D7; color: #742A2A; border-color: #FEB2B2; }

.grazing-detail {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
}
.grazing-detail h3 { font-family: var(--font-display); color: var(--color-primary-800); margin-bottom: var(--space-md); }
.grazing-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--space-lg); margin: 0; }
.grazing-detail dt { font-weight: 600; color: var(--color-text-secondary); }
.grazing-detail dd { margin: 0; color: var(--color-text); line-height: 1.5; }
.grazing-detail a { color: var(--color-primary-500); font-weight: 600; }

.grazing-disclaimer { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; background: var(--color-bg-alt); padding: var(--space-md); border-radius: var(--radius-sm); }
.grazing-disclaimer a { color: var(--color-primary-500); }

@media (max-width: 600px) {
    .grazing-grid { grid-template-columns: 1fr; }
    .grazing-detail dl { grid-template-columns: 1fr; gap: 2px var(--space-lg); }
    .grazing-detail dt { margin-top: var(--space-sm); }
}