/* Grazing Planner: the page's own look, on top of the suite's shared suite.css (colors, buttons, header). */
:root {
  --grass: #1baf7a;      /* more grass than normal */
  --short: #eb6834;      /* less grass, running short */
  --blue: #2a78d6;       /* forecast marks */
}
* { box-sizing: border-box; }
/* The footer sits at the bottom of the window even when a page is short (sign-in, My Ranch empty):
   the page is a column as tall as the window, and main takes the spare height. */
body { margin: 0; line-height: 1.45; min-height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

header.top { padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
header.top h1 { margin: 0; font-size: 1.35rem; }
header.top .spacer { flex: 1; }
/* The header's own links, like the company site's menu: white, bold, gold underline on hover. v0.16.1: only the bar's
   own links (">"): the Farm Apps menu sits inside this nav too, and these rules turned its app names white on cream. */
.head-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.suite-bar .head-nav > a { color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent; }
.suite-bar .head-nav > a:hover { border-bottom-color: var(--suite-gold); color: #fff; }
/* Learn and your-name menus: the words look like the links beside them, with a small arrow, and open a
   white panel like Farm Apps. <details> elements, so they work without JavaScript (session.js closes them
   on a click elsewhere, a chosen item or Escape). */
.head-menu { position: relative; }
.head-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  color: #fff; font-weight: 600; font-size: .9rem; padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.head-menu > summary::-webkit-details-marker { display: none; }
.head-menu > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 2px 0 1px; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }   /* a small down arrow */
.head-menu[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.head-menu > summary:hover, .head-menu[open] > summary { border-bottom-color: var(--suite-gold); }
.head-menu > summary:focus-visible { outline: 2px solid var(--suite-gold); outline-offset: 3px; border-radius: 2px; }
#me-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.head-menu:has([aria-current="page"]) > summary { border-bottom-color: var(--suite-gold); }   /* on the Account page (gold since v0.13.2, suite v8) */
.head-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 190px; padding: 6px;
  display: flex; flex-direction: column; background: var(--suite-surface); border: 1px solid var(--suite-line);
  border-radius: var(--suite-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.suite-bar .head-nav .head-menu-panel a, .head-menu-panel button { display: block; width: 100%; box-sizing: border-box;
  text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--suite-ink) !important;
  font: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer; }
/* !important: suite.css makes every header link white with a long :not() chain that outranks this one. */
.suite-bar .head-nav .head-menu-panel a:hover, .head-menu-panel button:hover,
.suite-bar .head-nav .head-menu-panel a:focus-visible, .head-menu-panel button:focus-visible { background: var(--suite-gold-tint); color: var(--suite-ink); }
.suite-bar .head-nav .head-menu-panel a[aria-current="page"] { text-decoration: none; box-shadow: inset 3px 0 0 var(--suite-gold); }
.head-menu-panel button { border-top: 1px solid var(--suite-line); border-radius: 0 0 8px 8px; margin-top: 4px; }
/* The Admin list (v0.20.0, M1): every admin page, in every app, from My Farm. */
.head-menu-panel .me-admin-title { margin: 6px 0 0; padding: 8px 12px 2px; border-top: 1px solid var(--suite-line); font-size: .74rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suite-muted); }
.suite-bar .head-nav .head-menu-panel a.me-admin-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; white-space: nowrap; }
.me-admin-here { font-size: .78rem; font-weight: 600; color: var(--suite-muted); }
/* On a phone the panel spans the screen (like Farm Apps), so it can't run off either edge. */
@media (max-width: 600px) {
  .head-menu { position: static; }
  .head-menu-panel { left: 16px; right: 16px; top: auto; margin-top: 8px; }
}
/* On a phone (v0.14.0; Scott, 2026-10-13: one phone header for every app, Herd Planner's, from
   herd-planner/notes/phone-headers-now-and-proposed-2026-10-13.png): the name on the left, Sign In and Menu on the
   right, and Menu opens a white list, one thing to a row with a grey note: Planner, Season Map, My Ranch, My Herd,
   Learn's links, Farm Apps, then Account and Sign Out. Before, the links wrapped onto two more lines of the header.
   Tablets and computers keep the row of links. */
.menu-btn, .signin-bar { display: none; }
@media (max-width: 640px) {
  header.top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: center; }
  header.top > .spacer { display: none; }
  header.top .suite-crumbs { grid-column: 1; grid-row: 1; min-width: 0; }
  header.top h1 { font-size: 1.2rem; }
  .suite-bar a.signin-bar { display: inline-flex; align-items: center; grid-column: 2; grid-row: 1; min-height: 40px;
    box-sizing: border-box; padding: 8px 12px; border: 2px solid var(--suite-gold); border-radius: var(--suite-button-radius);
    color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 6px; grid-column: 3; grid-row: 1; min-height: 40px;
    padding: 8px 12px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); border-radius: 8px;
    font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
  .menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
  .head-nav { display: none; grid-column: 1 / -1; }
  header.top.menu-open .head-nav { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    margin-top: 2px; background: var(--suite-surface); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    overflow: hidden; }
  /* Learn and the menu under your name: Menu opens them (session.js) and their links become rows. No Learn button:
     the Menu already is a menu. Sign In is on the bar, so not in the list. */
  .head-nav .head-menu, .head-nav .head-menu-panel { display: contents; }
  .head-nav .head-menu > summary, .suite-bar .head-nav a.signin { display: none; }
  .suite-bar .head-nav > a, .suite-bar .head-nav .head-menu-panel a, .head-nav .head-menu-panel button,
  .head-nav .suite-apps > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; box-sizing: border-box; min-height: 52px; margin: 0; padding: 12px 16px; border: 0;
    border-bottom: 1px solid var(--suite-line); border-radius: 0; background: transparent; color: var(--suite-ink) !important;
    font: inherit; font-size: 1rem; font-weight: 600; text-align: left; text-decoration: none; box-shadow: none; }
  .suite-bar .head-nav > a[aria-current="page"], .suite-bar .head-nav .head-menu-panel a[aria-current="page"] {
    text-decoration: none; box-shadow: inset 4px 0 0 var(--suite-gold); }
  .head-nav .me-admin-here { display: none; }   /* the phone row's note says it */
  .suite-bar .head-nav .head-menu-panel a.me-admin-row { white-space: normal; }
  .head-nav a[data-note]::after { content: attr(data-note) " \203A"; color: var(--suite-muted); font-size: .9rem;
    font-weight: 400; text-align: right; }
  .suite-bar .head-nav > a:active, .head-nav .head-menu-panel button:active { background: var(--suite-bg); }
  .head-nav .suite-apps > summary::before { content: none; }
  .head-nav .suite-apps > summary::after { content: "Our other apps \203A"; color: var(--suite-muted); font-size: .9rem;
    font-weight: 400; width: auto; height: auto; margin: 0; border: 0; transform: none; transition: none; }
  .head-nav .head-menu-panel button { color: var(--suite-deep-green) !important; font-weight: 700; border-bottom: 0; }
}

/* The season strip under the header: the logo's cream, so it stands apart from the green header
   (a second green beside it looked like a mismatch) and gold still means "you can click this". */
.banner { background: #f3ead8; color: var(--suite-deep-green); border-bottom: 1px solid #e2d3ac; padding: 9px 20px; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.banner-tag { background: var(--suite-deep-green); color: #fff; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.banner-tag.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1baf7a; margin-right: 6px; vertical-align: 1px; }
main { flex: 1 0 auto; width: 100%; box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: 18px 20px 40px; }
.intro { margin: 0 0 16px; max-width: 70ch; }
.lead { margin: 0 0 8px; color: var(--suite-ink); font-size: 1.05rem; font-weight: 600; }
.steps { margin: 0 0 8px; padding-left: 1.4em; color: var(--suite-ink); }
.steps li { margin: 2px 0; }

.card { padding: 16px 18px; margin-bottom: 16px; }
.inputs .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; font-weight: 600; color: var(--suite-muted); }
input, select { font: inherit; font-weight: 400; color: var(--suite-ink); padding: 8px 10px; border: 1px solid var(--suite-line);
  border-radius: var(--suite-button-radius); background: var(--suite-surface); min-width: 0; }
/* Show / hide password: the eye in every password box is suite.css's since suite version 11 (v0.16.5). */
.toggle { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.toggle legend { font-size: .88rem; font-weight: 600; color: var(--suite-muted); padding: 0; margin-bottom: 6px; }
.toggle label { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; color: var(--suite-ink); font-size: .95rem; }

.dates-row { margin: 14px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dates-label { font-size: .88rem; font-weight: 600; color: var(--suite-muted); }
.dates { display: flex; flex-wrap: wrap; gap: 6px; }
.dates button { font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--suite-gold-line); background: var(--suite-surface); color: var(--suite-deep-green); }
.dates button[aria-checked="true"] { background: var(--suite-gold); border-color: var(--suite-gold); font-weight: 600; }

.error { background: #fdecea; border: 1px solid #f3b8ae; color: #7a1f12; padding: 10px 14px; border-radius: var(--suite-radius); margin-bottom: 16px; }

.card h2 { margin: 0; font-size: 1rem; color: var(--suite-deep-green); }
.big { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--suite-ink); }
.big small { font-size: .95rem; font-weight: 400; color: var(--suite-muted); }
.card p { margin: 0; }
.muted { color: var(--suite-muted); font-size: .9rem; }
.up { color: #127a55; } .down { color: #b54a1c; }


/* The range bar: normal marked, the 80% range shaded, the forecast a dot */
.range { position: relative; height: 34px; margin: 8px 0 2px; }
.range .track { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: 3px; background: var(--suite-line); }
.range .span { position: absolute; top: 12px; height: 10px; border-radius: 5px; background: rgba(42, 120, 214, .28); }
.range .normal { position: absolute; top: 6px; width: 2px; height: 22px; background: var(--suite-muted); }
.range .dot { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; }
.range .actual { position: absolute; top: 8px; width: 4px; height: 18px; margin-left: -2px; background: var(--short); border-radius: 2px; }
.range-labels { display: flex; justify-content: space-between; font-size: .78rem; color: var(--suite-muted); }

.about summary { cursor: pointer; font-weight: 600; color: var(--suite-deep-green); }
.about p { color: var(--suite-muted); font-size: .92rem; margin: 10px 0 0; max-width: 75ch; }

@media (max-width: 600px) {
  header.top { padding: 10px 16px; }
  main { padding: 14px 16px 32px; }
  .big { font-size: 1.6rem; }
}

/* The form's button, and the one-line summary it folds into */
.inputs .form-go { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }   /* two classes: beats ".card p { margin: 0 }" */
.summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; }
.summary p { margin: 0; }

/* The answer: what to do, in a sentence, then the three numbers behind it */
.results { display: block; }
/* The edge is the same color as the "What to do" label: one color per kind of answer. */
.answer { border-left: 6px solid #8a6418; padding: 20px 22px; display: block; margin-bottom: 16px; }
.answer.sell { border-left-color: #b54a1c; }
.answer.keep { border-left-color: #0d6b4a; }
.answer.more { border-left-color: #1d5aa3; }
.answer.watch { border-left-color: #8a6418; }
.answer h2 { margin: 0 0 10px; font-size: 1.02rem; color: var(--suite-deep-green); }
.pill { display: inline-block; padding: 5px 14px; border-radius: 999px; font-weight: 800; font-size: 1.25rem; }
/* Solid, with white words: a pale pill in the same hue as the card's edge read as "red on red". */
.pill.sell { background: #b54a1c; color: #fff; }
.pill.keep { background: #0d6b4a; color: #fff; }
.pill.more { background: #1d5aa3; color: #fff; }
.pill.plain { background: var(--suite-gold-tint); color: var(--suite-deep-green); }
.answer .story { margin: 16px 0 0; font-size: 1.05rem; max-width: 75ch; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-top: 1px solid var(--suite-line); }
.col { padding: 14px 16px 4px 0; }
.col + .col { border-left: 1px solid var(--suite-line); padding-left: 16px; }
.col p { margin: 2px 0; }
.lbl { font-size: .78rem; font-weight: 700; color: var(--suite-muted); text-transform: uppercase; letter-spacing: .04em; }
.fold { margin-top: 14px; border-top: 1px solid var(--suite-line); padding-top: 10px; }
.fold summary { cursor: pointer; font-weight: 600; color: var(--suite-deep-green); }
.fold h3 { font-size: .95rem; margin: 16px 0 4px; color: var(--suite-deep-green); }
.fold p { margin: 4px 0; max-width: 75ch; }
.outcome { background: #faf9f5; }
.outcome h2 { margin: 0 0 6px; font-size: 1rem; color: var(--suite-deep-green); }
.outcome p { margin: 4px 0; }

@media (max-width: 700px) {
  .cols { grid-template-columns: 1fr; }
  .col + .col { border-left: 0; border-top: 1px solid var(--suite-line); padding-left: 0; }
  .answer { padding: 16px; }
  .pill { font-size: 1.1rem; }
}
.btn.small { padding: 5px 12px; font-size: .88rem; }
.answer .warn { margin: 14px 0 0; padding: 8px 12px; background: var(--suite-gold-tint); border: 1px solid #e2d3ac; border-radius: 8px; max-width: 75ch; }
.hay { border: 0; padding: 0; margin: 14px 0 0; }
.hay legend { font-size: .88rem; font-weight: 600; color: var(--suite-muted); padding: 0; margin-bottom: 6px; }
.price { display: flex; gap: 6px; }
/* v0.33.0: this week's Nebraska hay price under the hay box, with a button for each kind (Milestone 10) */
.hay-now { margin: 10px 0 0; padding: 10px 12px; background: #f3f6f3; border-radius: 10px; font-size: .9rem; max-width: 88ch; }
.hay-now[hidden] { display: none; }
.hay-now p { margin: 0; }
.hay-now b { color: var(--suite-ink); }
.hay-now .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hay-now .chips button { font: inherit; font-size: .85rem; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--suite-gold-line); background: #fff; color: var(--suite-ink); }
.hay-now .chips button:hover { border-color: var(--suite-deep-green); }
.hay-now .chips button[aria-pressed="true"] { background: var(--suite-deep-green); border-color: var(--suite-deep-green); color: #fff; }
.price input { flex: 1; min-width: 0; }
/* Your move: the ways through to October 31 as side-by-side choices; the first (the headline's) has the gold edge */
.pick { margin: 18px 0 0; max-width: 88ch; }
.pick-head { display: block; padding-top: 14px; border-top: 1px solid var(--suite-line); }
.pick-head .verdict-label { color: var(--suite-deep-green); }
.pick-words { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--suite-ink); }
@media (max-width: 700px) { .pick-words { font-size: 1.1rem; } }
.pick .ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; }
.pick .ways.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick .way { border: 1px solid var(--suite-line); border-radius: 10px; padding: 12px 14px; background: var(--suite-surface); }
.pick .way.first { border: 2px solid var(--suite-gold); padding: 11px 13px; }
.pick .way-tag { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--suite-muted); }
.pick .way h3 { margin: 3px 0 8px; font-size: 1.05rem; color: var(--suite-ink); }
.pick dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: .9rem; }
.pick dt { color: var(--suite-muted); }
.pick dd { margin: 0; }
.pick .way-warn { margin: 8px 0 0; font-size: .85rem; color: #7a3b12; }
.pick > p { margin: 8px 0 0; font-size: .88rem; }
@media (max-width: 800px) { .pick .ways.n3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pick .ways { grid-template-columns: 1fr; } }

/* The answer's headline: a small colored "What to do" label over large dark words (option B, 2026-09-29).
   The color says the kind of answer; the words stay dark and easy to read. */
.verdict { display: block; }
.verdict-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.verdict-words { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: var(--suite-ink); }
.verdict.sell .verdict-label { color: #b54a1c; }
.verdict.keep .verdict-label { color: #0d6b4a; }
.verdict.more .verdict-label { color: #1d5aa3; }
.verdict.watch .verdict-label { color: #8a6418; }
.verdict.plain .verdict-label { color: #8a6418; }
.answer .before { margin: 12px 0 0; font-size: .95rem; }
.before input { width: 5.5em; padding: 4px 8px; margin: 0 4px; }
.inputs .hint { margin: 6px 0 0; font-size: .85rem; color: var(--suite-muted); max-width: 75ch; }
@media (max-width: 700px) { .verdict-words { font-size: 1.35rem; } }

/* A mixed herd: one row per kind */
.herd { margin-top: 14px; }
.inputs .herd-title { margin: 0 0 6px; font-size: .88rem; font-weight: 600; color: var(--suite-muted); }
.herd-table { border-collapse: collapse; width: 100%; max-width: 720px; }
.herd-table th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--suite-muted); padding: 0 8px 4px 0; }
.herd-table td { padding: 3px 8px 3px 0; }
.herd-table select, .herd-table input { width: 100%; }
.herd-table td:nth-child(2) { width: 110px; } .herd-table td:nth-child(3) { width: 190px; } .herd-table td:nth-child(4) { width: 36px; }
/* On a phone the three boxes side by side left the Kind list about 33 px wide: an arrow with no words, so a row
   couldn't be told from another (pairs or ewes?). Each row is now two lines: the kind across the top, then how
   many, the weight and the remove button. The column headings go; the boxes say what they are (v0.11.0). */
@media (max-width: 720px) {
  .herd-table, .herd-table tbody { display: block; }
  .herd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .herd-table tr { display: grid; grid-template-columns: 1fr 1fr 36px; gap: 6px 8px; padding: 8px 0; border-top: 1px solid var(--suite-line, #ddd); }
  .herd-table tbody tr:first-child { border-top: 0; padding-top: 2px; }
  .herd-table td, .herd-table td:nth-child(2), .herd-table td:nth-child(3), .herd-table td:nth-child(4) { width: auto; padding: 0; }
  .herd-table td:first-child { grid-column: 1 / -1; }
  .herd-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--suite-muted); margin-bottom: 2px; }
  .herd-table td:nth-child(4) { align-self: end; }
}
.drop { border: 1px solid var(--suite-line); background: #fff; border-radius: 6px; width: 32px; height: 34px; cursor: pointer; font-size: 1.1rem; }
.inputs .herd-tools { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.inputs .herd-total { margin: 8px 0 0; font-size: .92rem; }
.file-note { color: var(--suite-muted); }
/* A line under one box saying what is wrong with it (v0.10.3): a weight over 5,000 lb, a county that is gone. */
.box-note { display: block; margin-top: 2px; font-size: .85rem; font-weight: 600; color: #b3261e; }
input[aria-invalid="true"] { border-color: #b3261e; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table-scroll { overflow-x: auto; }

/* Accounts: Sign In in the header (a gold outline, like the company site), the saved-pasture bar */
.suite-bar .head-nav a.signin { border: 2px solid var(--suite-gold); border-radius: var(--suite-button-radius); padding: 3px 12px; }
.suite-bar .head-nav a.signin:hover { background: rgba(224, 172, 69, .15); }
.linkish { background: none; border: 0; color: #fff; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; padding: 4px 0; }
.linkish:hover { text-decoration: underline; }
/* Signed in: the pasture's name sits at the top of the form, the Save buttons beside "Show my plan". */
.name-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--suite-line); }
.name-row label { min-width: 240px; }
.name-row .hint { font-size: .88rem; color: var(--suite-muted); padding-bottom: 8px; }
.save-actions { display: contents; }
.inputs .saved-note { margin: 12px 0 0; }   /* two classes: beats ".card p { margin: 0 }" */
.saved-note { flex-basis: 100%; font-size: .95rem; color: var(--suite-muted); }
.saved-note:empty { display: none; }
.saved-note.hint { color: var(--suite-ink); }
/* After a save: a green confirmation across the bar, the same green as "you're fine". */
.saved-note.done { color: var(--suite-ink); background: #e8f3ee; border-left: 4px solid #0d6b4a;
  border-radius: 6px; padding: 8px 12px; }
.saved-note.done strong { color: #0d6b4a; }
.auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.auth-grid form { display: flex; flex-direction: column; gap: 12px; }
.auth-grid h2 { margin: 0; font-size: 1.15rem; color: var(--suite-deep-green); }
.auth-grid .btn { align-self: flex-start; }
.ranch-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; }
.ranch-totals .col + .col { border-left: 1px solid var(--suite-line); padding-left: 16px; }
.pastures { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pasture-card { display: flex; flex-direction: column; gap: 6px; border-left: 6px solid #8a6418; }
.pasture-card h3 { margin: 0; font-size: 1.05rem; }
.pasture-card.sell { border-left-color: #b54a1c; } .pasture-card.keep { border-left-color: #0d6b4a; }
.pasture-card.more { border-left-color: #1d5aa3; } .pasture-card.watch { border-left-color: #8a6418; }
.fill { height: 10px; background: var(--suite-line); border-radius: 5px; overflow: hidden; margin: 4px 0; }
.fill span { display: block; height: 100%; background: #2a78d6; }
.fill.over span { background: #b54a1c; }
.moves li { margin: 6px 0; }
@media (max-width: 700px) {
  .ranch-totals .col + .col { border-left: 0; border-top: 1px solid var(--suite-line); padding-left: 0; }
}

/* Your saved pastures, above the form: one button each (the one on screen in gold) and "+ New pasture". */
.mine { margin: 4px 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mine-label { font-size: .88rem; font-weight: 600; color: var(--suite-muted); }
.mine-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mine .chip { font: inherit; font-size: .95rem; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--suite-surface); color: var(--suite-ink); border: 1px solid var(--suite-line); }
.mine .chip:hover { border-color: var(--suite-gold-line); }
.mine .chip[aria-checked="true"] { background: var(--suite-gold); border-color: var(--suite-gold); font-weight: 600;
  color: var(--suite-deep-green); }
.mine .chip.new { border-style: dashed; border-color: var(--suite-gold-line); }

/* The app's name in the header goes back to the planner; the page you're on is underlined in the menu. */
.suite-bar h1 a.home-link { color: inherit; text-decoration: none; }
/* v0.13.2 (suite v8, Scott: "also the underlined links"): gold, like the company site and the Yield Predictor. On a
   computer suite.css draws it as a gold bar; on a phone it stays an underline, now gold. */
.head-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
  text-decoration-color: var(--suite-gold); }
/* My Ranch: the title with its two ways back to the planner. */
.title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.title-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.title-actions .btn { text-decoration: none; }

/* While the page works out what to show (a first visit's form or a return visit's answer), show nothing
   but the banner's "Loading the season...", so nothing appears and then disappears. */
main.starting > *:not(.error):not(#intro) { visibility: hidden; }

/* The pasture being shown: its name in large type on the summary card and above the answer. */
.summary .summary-name { font-size: 1.3rem; font-weight: 700; color: var(--suite-deep-green); margin: 0 0 2px; }
.summary .summary-name.unsaved { font-size: 1.05rem; font-weight: 600; color: var(--suite-muted); }
.answer .pasture-tag { margin: 0 0 4px; font-size: 1.3rem; font-weight: 700; color: var(--suite-deep-green); }
.summary .summary-body { flex: 1 1 300px; min-width: 0; }

/* The page reads as four numbered steps (Scott: "not immediately clear what the steps are"); since v0.23.0 the step
   row at the top names them, as Herd Planner's does. */
.intro .lead { text-wrap: balance; }            /* no single word ("carry?") alone on the last line */
.n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--suite-gold); color: var(--suite-deep-green); font-size: .95rem; font-weight: 700; }
.step-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 1.08rem;
  font-weight: 700; color: var(--suite-deep-green); }
.dates-row .step-head { margin: 0; }
.dates-hint { font-size: .88rem; color: var(--suite-muted); flex-basis: 100%; margin: -4px 0 2px 38px; }

/* Smaller pasture buttons (the gold one was big). */
.mine .chip { font-size: .88rem; padding: 4px 12px; }
.intro > * { max-width: 78ch; }
.intro > .muted { max-width: none; }   /* v0.22.0: the note on one line where it fits ("worse." sat alone) */
/* The question on one line wherever the window is wide enough (Scott); it wraps evenly on phones. */
.intro > .lead { max-width: none; }
@media (min-width: 900px) { .intro > .lead { white-space: nowrap; } }

/* The page's heading: the question the Grazing Planner answers, large, above the instructions box. */
.page-q { margin: 10px 0 14px; font-size: 1.3rem; line-height: 1.25; font-weight: 700; color: var(--suite-deep-green);
  text-wrap: balance; }
@media (min-width: 1080px) { .page-q { white-space: nowrap; } }

/* The pasture's name as a dark green label, so it stands out from the answer's own headline. */
.answer .pasture-tag, .summary .summary-name:not(.unsaved) { display: inline-block; background: var(--suite-deep-green);
  color: #fff; font-size: 1.05rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; margin: 0 0 10px; }
.summary .summary-name:not(.unsaved) { margin: 0 0 6px; }
.saved-note { margin: 10px 0 0; }

/* Remove sits apart, at the far right, in red: low-key until pressed, then plainly a warning. */
.danger-zone { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; }
.btn.danger { background: var(--suite-surface); color: #a23b12; border: 1px solid #d9a58f; }
.btn.danger:hover:not(:disabled) { background: #fbeee8; border-color: #a23b12; }
.btn.danger.armed { background: #a23b12; color: #fff; border-color: #a23b12; }

/* Your Account page: narrow column of cards; the danger zone in red. */
.narrow { max-width: 620px; }
.stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.stack h2, .stack h3 { margin: 0; color: var(--suite-deep-green); }
.stack .btn { align-self: flex-start; }
.small-link { font-size: .9rem; }
.note { background: #e8f3ee; border-left: 4px solid #0d6b4a; border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; }
.danger-title { color: #a23b12; margin: 24px 0 8px; font-size: 1.05rem; }
.danger-card { border-color: #d9a58f; }

/* ---- The season map (v0.10.0): map.js draws, these rules dress it ---------------------------------------- */
.map-holder { position: relative; }
svg.nemap { display: block; width: 100%; height: auto; }
svg.nemap path { stroke: #fff; stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
svg.nemap path.hover { stroke: var(--suite-ink, #1d1d1b); stroke-width: 2px; }
svg.nemap.pickable path[data-fips] { cursor: pointer; }
svg.nemap .nemap-ring { fill: none; stroke: #243b2f; stroke-width: 3.5px; pointer-events: none; }
.map-tip { position: absolute; transform: translate(12px, -120%); background: #fff; color: var(--suite-ink, #1d1d1b);
  border: 1px solid rgba(0,0,0,.18); border-radius: 6px; padding: 6px 9px; font-size: .85rem; line-height: 1.3;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); pointer-events: none; max-width: 260px; z-index: 2; }
.map-tip.left { transform: translate(calc(-100% - 12px), -120%); }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: .82rem; color: var(--suite-muted); }
.map-legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 5px; vertical-align: -2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* In the planner's step 1 */
.inputs .map-pick { margin: 0 0 14px; border-bottom: 1px solid var(--suite-line, #e3e1da); padding-bottom: 12px; }
.inputs .map-pick summary { cursor: pointer; font-weight: 600; color: var(--suite-link, #2a78d6); }
.inputs .map-pick .map-holder { max-width: 640px; margin-top: 6px; }
.inputs .map-caption { margin: 6px 0 0; font-size: .88rem; color: var(--suite-muted); }

/* The Season Map page */
.map-page .title-row { align-items: center; }
.season-pick { font-size: .9rem; font-weight: 600; color: var(--suite-muted); }
.season-pick select { margin-left: 6px; font: inherit; padding: 4px 8px; }
.map-lede { margin: 4px 0 4px; max-width: 75ch; }
.map-pair { display: grid; gap: 16px; }
.map-pair.pair { grid-template-columns: 1fr 1fr; }
.map-card { margin: 0; }
.map-card figcaption { font-weight: 700; margin: 0 0 8px; }
.map-score { margin-top: 14px; }
.map-score p + p { margin-top: 6px; }
.map-note { margin: 10px 0 14px; max-width: 80ch; font-size: .9rem; }
.map-table summary { cursor: pointer; font-weight: 600; }
.map-table table { border-collapse: collapse; margin-top: 10px; font-size: .9rem; min-width: 420px; }
.map-table th, .map-table td { text-align: left; padding: 4px 14px 4px 0; border-bottom: 1px solid var(--suite-line, #e3e1da); }
.map-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .map-pair.pair { grid-template-columns: 1fr; } }

/* Season Map on phones (v0.10.0): one map at a time with a switch; the picked county's numbers below */
.map-switch { display: none; gap: 0; margin: 10px 0 0; }
.map-switch button { flex: 1; font: inherit; font-weight: 600; padding: 8px 10px; border: 1px solid var(--suite-gold);
  background: #fff; color: var(--suite-ink); cursor: pointer; }
.map-switch button:first-child { border-radius: 999px 0 0 999px; }
.map-switch button:last-child { border-radius: 0 999px 999px 0; border-left: 0; }
.map-switch button[aria-pressed="true"] { background: var(--suite-gold); }
.picked { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.picked h3 { margin: 0; font-size: 1.05rem; flex-basis: 100%; }
.picked dl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; }
.picked dt { color: var(--suite-muted); font-size: .9rem; }
.picked dd { margin: 0; font-weight: 600; }
@media (max-width: 760px) {
  .map-switch:not(.hidden) { display: flex; }
  .map-pair.pair[data-show="forecast"] #actual-card { display: none; }
  .map-pair.pair[data-show="actual"] .map-card:first-child { display: none; }
  .map-card { padding: 10px; }
}

/* Steps 1 and 2: the pasture and the herd as two steps, each its own card and folded summary (v0.10.0) */
.steps-form { margin: 0; }
.inputs .card-lede { margin: 0 0 10px; color: var(--suite-muted); }
.mine .chip .chip-herd { font-weight: 400; color: var(--suite-muted); }
.mine .chip[aria-checked="true"] .chip-herd { color: inherit; }

/* My Herd (v0.10.0) */
.page-lede { margin: 6px 0 14px; max-width: 75ch; }
.herd-total-card { margin-bottom: 18px; }
.herd-total-card p { margin: 0; }
.herd-total-label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suite-muted); }
.herd-total-number { font-size: 1.8rem; font-weight: 800; color: var(--suite-deep-green); }
.herd-card { margin-bottom: 16px; }
.herd-card .herd-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.herd-card h3 { margin: 0; font-size: 1.15rem; }
.herd-card .herd-card-head p { margin: 2px 0 0; }
.herd-card .herd-now { margin: 10px 0; }
.herd-card .herd-now .label { color: var(--suite-muted); }
.herd-card .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.herd-card label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; }
.herd-card .herd { margin-top: 10px; }
.herd-card .herd-total { margin: 8px 0 0; font-size: .92rem; }
.herd-card .herd-save { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.save-status.good { color: #006300; font-weight: 600; }
.save-status.bad { color: #b3261e; font-weight: 600; }
.herd-card .fields { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* The welcome (v0.10.1): what the planner is, before the steps */
.welcome { margin: 6px 0 18px; }
.welcome-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.welcome-title { margin: 0; font-size: 1.6rem; color: var(--suite-deep-green); }
.welcome-lede { margin: 6px 0 12px; font-size: 1.05rem; line-height: 1.5; max-width: 72ch; }
.welcome-source { margin: 4px 0 0; font-size: .9rem; color: var(--suite-muted); max-width: 90ch; }
.welcome-try { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.welcome-folded { margin: 6px 0 14px; color: var(--suite-muted); }
/* v0.22.0: the greeting, Herd Planner's sizes (its .hello rules) */
.hello { margin: 0 0 16px; }
.hello-day { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--suite-muted); }
.hello-title { margin: 4px 0 0; font-size: 2rem; font-weight: 800; line-height: 1.15; color: var(--suite-ink); }
.hello-lede { margin: 4px 0 0; color: var(--suite-muted); font-size: 1.02rem; }
@media (max-width: 600px) { .hello-title { font-size: 1.5rem; } }
.link-btn { font: inherit; font-size: .9rem; background: none; border: 0; padding: 0; color: var(--suite-link); text-decoration: underline; cursor: pointer; }
/* v0.19.1: the welcome as a headline, a real answer and what's free (notes/gp-intro-B-desk-2026-10-17.png) */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }   /* v0.26.1: even halves (Scott: the corners didn't line up) */
.hero-eyebrow { margin: 0 0 6px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #2f5d5a; }
.hero .welcome-title { font-size: 2rem; line-height: 1.2; margin: 0 0 10px; }
.hero .welcome-lede { font-size: 1.08rem; line-height: 1.55; margin: 0 0 16px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 10px; }
.hero-cta .btn { font-size: 1rem; padding: 10px 20px; }
.hero-small { margin: 0; font-size: .92rem; color: var(--suite-muted); }
.hero-answer { background: #fff; border: 1px solid var(--suite-line); border-left: 6px solid var(--suite-line); border-radius: 14px; padding: 14px 16px; }
.hero-answer.keep { border-left-color: #0d6b4a; }
.hero-answer.more { border-left-color: #1d5aa3; }
.hero-answer.watch, .hero-answer.plain { border-left-color: #8a6418; }
.hero-answer.sell { border-left-color: #b54a1c; }  /* the answer card's own edges */
.hero-ex { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--suite-muted); }
.hero-answer .verdict { margin: 0 0 8px; }
.hero-answer .story { margin: 0 0 6px; font-size: .92rem; line-height: 1.5; }
.hero-answer .cols { margin-top: 8px; }
.hero-answer .col { padding-top: 10px; }
.hero-answer .big { font-size: 1.3rem; }
.hero-answer .col > p { font-size: .82rem; }
.hero-answer .col > p ~ p { display: none; }          /* one line under each number; the full answer has the rest */
.hero-answer .hero-small { margin-top: 8px; }
/* v0.19.3: the cards as a little price table (B, colors 3: wheat and gold). The subscription sits higher, with a shadow. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 28px; line-height: 1.4; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #2f5d5a; }
.ticks li::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* v0.26.1: free and the subscription in one card, a table (Scott chose B, then: "there is so much white space"): the
   heading in the empty corner, close rows, the subscription a gold column with a deep-green button. */
.plans { margin: 40px 0 14px; background: #fff; border: 1px solid var(--suite-line); border-radius: 14px;
  box-shadow: 0 6px 20px rgba(36, 59, 47, .08); padding: 0 20px; }
.plans-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }   /* widths from the head row */
.plans-table th, .plans-table td { padding: 7px 14px; border-bottom: 1px solid #eee9dc; text-align: center; vertical-align: middle; }
.plans-table tbody th { text-align: left; font-weight: 400; font-size: .95rem; padding-left: 4px; }
.plans-table thead th, .plans-table thead td { border-bottom: 2px solid #e3dccb; padding-top: 18px; padding-bottom: 12px; vertical-align: bottom; }
.plans-table .plans-head { width: 46%; } .plans-table thead th { width: 24%; } .plans-table thead th.paid { width: 30%; }
.plans-table .plans-head { text-align: left; padding-left: 4px; }
.plans-head h3 { margin: 0; font-size: 1.35rem; color: var(--suite-deep-green); }
.plans-head p { margin: 4px 0 0; color: var(--suite-muted); font-size: .92rem; font-weight: 400; }
.plans-table h4 { margin: 2px 0 0; font-size: 1.1rem; color: var(--suite-deep-green); }
.plans-table th.paid h4 { font-size: 1.3rem; }
.plans-table th.paid small { display: block; font-weight: 400; font-size: .82rem; }
.plans-table .paid { background: #fdf3dc; }
.plans-table thead .paid { background: linear-gradient(160deg, #e0ac45, #f0c35a); border-radius: 0 0 0 0; border-bottom-color: #d9a441; }
.plans-table tfoot td { border-bottom: 0; padding-top: 12px; padding-bottom: 16px; }
.plans-table tfoot .paid { border-radius: 0 0 12px 12px; }
.plans-table .plans-foot { text-align: left; padding-left: 4px; font-size: .88rem; color: var(--suite-muted); }
.plan-tag { display: block; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; color: var(--suite-muted); }
.plan-pill { display: inline-block; background: var(--suite-deep-green); color: #f3ead8; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; font-size: .7rem; padding: 3px 10px; border-radius: 99px; }
.plans-table .yes { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #2f5d5a; position: relative; vertical-align: middle; }
.plans-table .paid .yes { background: var(--suite-deep-green); }
.plans-table .yes::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plans-table .no { color: #a9a69c; }
.plans-table .btn { text-decoration: none; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn.dark { background: var(--suite-deep-green); border-color: var(--suite-deep-green); color: #fff; font-size: 1.02rem; padding: 11px 22px; }
.btn.dark:hover { background: #2f5d4a; border-color: #2f5d4a; color: #fff; }
/* v0.19.2: the green band between the welcome and the planner, full width (the shadow and clip carry the colour to
   the window's edges without widening the page) */
.try-band { margin: 28px 0 18px; padding: 18px 0; background: var(--suite-deep-green); color: #fff;
  box-shadow: 0 0 0 100vmax var(--suite-deep-green); clip-path: inset(0 -100vmax); scroll-margin-top: 12px; }
.try-band h2 { margin: 0 0 4px; font-size: 1.45rem; color: #fff; }
.try-band p { margin: 0; color: #e8efe9; }
.try-band a { color: #f0c35a; }
/* v0.26.2: the gold arrow from the plans card into the band (the band's clip lets it rise above the band's top) */
.try-band { position: relative; clip-path: inset(-30px -100vmax 0); margin-top: 34px; padding-top: 26px; }
.try-arrow { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: var(--suite-gold); color: var(--suite-deep-green); font: 800 22px/40px sans-serif; text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.plans .welcome-source { margin: 0 -20px; max-width: none; padding: 10px 24px 14px; font-size: .85rem; background: #faf9f5;
  border-top: 1px solid #eee9dc; border-radius: 0 0 14px 14px; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 16px; } .hero .welcome-title { font-size: 1.5rem; }
  .plans { padding: 0 8px; } .plans .welcome-source { margin: 0 -8px; padding: 10px 14px 14px; } .plans-table th, .plans-table td { padding: 7px 4px; }
  .plans-table .plans-head { width: 44%; } .plans-table thead th { width: 26%; } .plans-table thead th.paid { width: 30%; }
  .plans-table tbody th { font-size: .86rem; }
  .plans-table h4, .plans-table th.paid h4 { font-size: .86rem; } .plans-table th.paid small, .plans-head p, .plans-table thead th:not(.paid) h4 { display: none; }
  .plan-tag { font-size: .8rem; color: var(--suite-deep-green); }
  .plans-head h3 { font-size: 1rem; } .plan-pill { font-size: .58rem; padding: 2px 6px; letter-spacing: .02em; white-space: normal; }
  .plans-table .btn { white-space: normal; } .plans-table .btn.dark { font-size: .82rem; padding: 7px 8px; } .plans-table .btn.small { padding: 6px 8px; font-size: .8rem; }
  .plans-table .plans-foot { font-size: .76rem; } }
.answer .season-note { margin: 12px 0 0; font-size: .85rem; color: var(--suite-muted); }

/* Admin (v0.12.0) */
.admin-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th { text-align: left; font-size: .78rem; color: var(--suite-muted, #5e5c57); padding: 0 8px 6px 0; }
.admin-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--suite-line, #e3dfd5); vertical-align: top; }
.admin-table td .btn { margin: 0 4px 4px 0; }
.admin-tag { font-size: .72rem; font-weight: 700; border: 1px solid #b9dcc4; background: #e6f3ea; color: #1f5a33; border-radius: 999px; padding: 0 6px; }
.admin-settings dt { font-weight: 700; margin-top: 10px; }
.admin-settings dd { margin: 2px 0 0; font-size: .9rem; color: var(--suite-muted, #5e5c57); }
.admin-settings code { font-size: .8rem; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .admin-table tr:first-child { display: none; }
  .admin-table tr { display: block; padding: 8px 0; border-top: 1px solid var(--suite-line, #e3dfd5); }
  .admin-table td { display: block; border: 0; padding: 2px 0; }
  .admin-table td[data-label]::before { content: attr(data-label) ": "; color: var(--suite-muted, #5e5c57); }
}

/* Bring In From My Farm (v0.15.0; notes/bring-*-2026-10-13.png): a table on a computer, one card per pasture on a phone. */
.bring { border-top: 4px solid var(--suite-gold); }
.bring-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bring-head h2 { margin: 0; }
.linked { font-size: .8rem; font-weight: 700; color: #2f5d1e; background: #eef7e9; border: 1px solid #9cc48a; border-radius: 99px; padding: 2px 10px; }
.bring-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.bring-table th, .bring-table td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--suite-line); vertical-align: middle; }
.bring-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suite-muted); }
.bring-table .num { text-align: right; }
.bring-table .why { display: block; font-size: .82rem; color: var(--suite-muted); }
.bring-table tr.off td { color: var(--suite-muted); }
.bring-acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.bring-foot { font-size: .88rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--suite-link, #2a78d6); text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .bring-table thead { display: none; }
  .bring-table, .bring-table tbody { display: block; }
  .bring-table tr { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 8px; padding: 10px 0; border-top: 1px solid var(--suite-line); }
  .bring-table td { border: 0; padding: 0; }
  .bring-table td:nth-child(1) { grid-row: span 2; padding-top: 2px; }
  .bring-table td.county { grid-column: 2; font-size: .88rem; color: var(--suite-muted); }
  .bring-table td:nth-child(5) { grid-column: 2 / -1; }
  .title-actions { flex-wrap: wrap; }
}

/* v0.16.0, two rows (Scott, 2026-10-14: "keep the green header for site links, and then put page specific links
   underneath them but in the white body area"; farm-account/notes/app-menus-two-rows-2026-10-14.png). The green bar
   is the same in every app: My Farm, Farm Apps, Learn, a thin line, then your name. The white row under it holds this
   app's own pages, the one you're on underlined in gold. On a phone the white row stays one line you can swipe. */
.bar-sep { display: none; }
@media (min-width: 641px) {   /* the phone Menu is below 641 px */
  .bar-sep { display: inline-block; width: 1px; height: 20px; background: rgba(255, 255, 255, .3); align-self: center; }
  .head-nav .suite-apps > summary { font-size: .9rem; }   /* the same size as My Farm and Learn beside it */
}
/* v0.16.3: lined up with the page under it (main's 1,080 px column), as My Farm's row is with its own: the first
   name starts where the page's words start. */
.app-nav { display: flex; align-items: stretch; min-height: 44px; padding: 0 max(10px, calc((100% - 1080px) / 2 + 10px));
  background: #fff; border-bottom: 1px solid var(--suite-line); overflow-x: auto; scrollbar-width: none; }
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a { display: flex; align-items: center; padding: 0 10px; color: var(--suite-deep-green); font-weight: 600;
  font-size: .93rem; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.app-nav a:hover { border-bottom-color: var(--suite-line); }
.app-nav a[aria-current="page"] { border-bottom-color: var(--suite-gold); }
.app-nav a:focus-visible { outline: 2px solid var(--suite-gold); outline-offset: -4px; border-radius: 4px; }
@media (max-width: 640px) {
  .app-nav { padding: 0 6px; }
  .app-nav a { font-size: .9rem; padding: 0 8px; }
}
/* Suite version 12 (2026-10-15): every green bar is 68 px tall from 641 px up (suite.css). On a narrow tablet the name
   and the links sit a little closer and smaller so they stay on one line. */
@media (max-width: 767px) and (min-width: 641px) {
  header.top { flex-wrap: nowrap; }                  /* the links never drop to a second line... */
  header.top .suite-crumbs { flex: 0 1 auto; min-width: 0; }
  header.top h1 { font-size: 1.15rem; line-height: 1.15; }   /* ...the name may take two short ones */
  .head-nav { gap: 4px 10px; flex-wrap: nowrap; flex: none; }
  .suite-bar .head-nav > a, .head-nav .head-menu > summary, .head-nav .suite-apps > summary { font-size: .85rem; }
}

/* The Drought Monitor this date (v0.18.0): its own colors, D0 to D4, which ranchers know from the map */
.dm { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--suite-line); border-radius: 8px; background: var(--suite-bg); }
.dm-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.dm-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suite-muted); }
.dm-head a { font-size: .85rem; }
.dm-words { font-size: 1.02rem; margin: 4px 0 8px; }
.dm-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: #eceae3; }
.dm-bar span { display: block; height: 100%; }
.dm-bar span + span { box-shadow: inset 2px 0 0 #fff; }
.dm-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--suite-muted); margin-top: 6px; }
.dm-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, .15); }
.dm-0 { background: #ffff00; } .dm-1 { background: #fcd37f; } .dm-2 { background: #ffaa00; } .dm-3 { background: #e60000; } .dm-4 { background: #730000; }
.dm-note { font-size: .86rem; color: var(--suite-muted); margin: 8px 0 0; }
.dm-credit { font-size: .76rem; color: var(--suite-muted); margin: 4px 0 0; }

/* Season Map: Grass or Drought (v0.18.1) */
.layer-switch { display: inline-flex; margin: 10px 0 0; }
.layer-switch button { font: inherit; font-weight: 600; padding: 6px 16px; border: 1px solid var(--suite-gold); background: var(--suite-surface); color: var(--suite-deep-green); cursor: pointer; }
.layer-switch button:first-child { border-radius: 999px 0 0 999px; }
.layer-switch button:last-child { border-radius: 0 999px 999px 0; border-left: 0; }
.layer-switch button[aria-pressed="true"] { background: var(--suite-gold); }
.map-legend-note { flex-basis: 100%; font-size: .78rem; }
.map-legend.dm i { border: 1px solid rgba(0, 0, 0, .15); }
#credit { margin-top: 6px; }
.picked .dm-shares { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; color: var(--suite-muted); margin: 6px 0 10px; padding: 0; list-style: none; }
.picked .dm-shares i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, .15); }

/* v0.21.0 Help (help.html): My Farm's Help layout (Scott chose B of farm-account/notes/help-B-desk-2026-10-17.png),
   the contents down the left and in view while you scroll; on a phone they sit across the top. */
/* v0.21.1: no "Grazing Planner ›" line over the title (Scott: Planner in the white row already goes back); the title
   starts at main's own 18 px below the white row, like the app's other pages. */
.help-view { max-width: 1060px; margin: 0 auto; padding-bottom: 40px; }
.help-view .page-title { margin: 0 0 6px; }
.help-view .lede { margin: 0 0 16px; max-width: 72ch; }
.help-split { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.help-toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; border-left: 3px solid var(--suite-gold); padding-left: 12px; font-size: .95rem; }
.help-part { margin: 0 0 14px; padding: 16px 20px; scroll-margin-top: 16px; }
.help-part h2 { margin: 0 0 10px; font-size: 1.2rem; color: var(--suite-deep-green); }
.help-steps, .help-list { margin: 0; padding-left: 22px; line-height: 1.55; }
.help-steps li, .help-list li { margin: 6px 0; }
.help-part details { border-top: 1px solid var(--suite-line); padding: 8px 0; }
.help-part details:first-of-type { border-top: 0; padding-top: 0; }
.help-part summary { cursor: pointer; font-weight: 700; color: var(--suite-deep-green); }
.help-part details p { margin: 6px 0 2px; }
.help-part .small { margin: 10px 0 0; font-size: .9rem; color: var(--suite-muted); }
.help-ask { margin: 8px 0 0; }
@media (max-width: 760px) {
  .help-split { display: block; }
  .help-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; border-left: 0; padding-left: 0; margin: 0 0 14px; }
}

/* v0.21.2 Close on the open pasture and herd cards (Scott: "an X to close the windows"): top right, "× Close" on a
   computer (an X alone can read as "delete"), the X alone on a phone. v0.23.0: always there; it folds just its card. */
#pasture-card, #herd-card { position: relative; }
.card-close { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--suite-line); border-radius: 8px; background: #fff; color: var(--suite-deep-green); font: inherit;
  font-size: .88rem; font-weight: 700; cursor: pointer; }
.card-close:hover, .card-close:focus-visible { background: var(--suite-gold-tint); border-color: var(--suite-gold-line); }
@media (max-width: 600px) { .card-close span { display: none; } .card-close { padding: 2px 9px; font-size: 1.1rem; }
}

/* v0.23.0 (Scott chose A of notes/gp-like-hp-A-desk-2026-10-18.png: "make the 4-5 step menus for herd and grazing planners
   look the same"): Herd Planner's step row in place of the four step cards, and each step's heading inside its card
   with a gold left edge (green once filled in), as Herd Planner's step cards. */
.intro { background: none; border: 0; padding: 0; margin: 0 0 6px; max-width: none; }
.steps-row { display: flex; gap: 6px; border-bottom: 1px solid var(--suite-line); margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.steps-row button { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 14px 12px; border: 0;
  border-bottom: 3px solid transparent; background: none; font: inherit; font-size: 1.12rem; color: #6f766f; cursor: pointer; white-space: nowrap; }
.steps-row button .n { width: 24px; height: 24px; background: #e3e8e3; color: #4d5a51; font-size: .82rem; }
.steps-row button:hover:not(:disabled) { color: var(--suite-deep-green); }
.steps-row button.on { color: var(--suite-deep-green); font-weight: 700; border-bottom-color: var(--suite-gold); }
.steps-row button.on .n { background: var(--suite-deep-green); color: #fff; }
.steps-row button:disabled { opacity: .5; cursor: default; }
.steps-row button:focus-visible { outline: 2px solid var(--suite-gold); outline-offset: -2px; }
.intro > .muted { margin: 0 0 4px; color: var(--suite-ink); }
.step-card { border-left: 5px solid var(--suite-gold); scroll-margin-top: 12px; }
.step-card.filled { border-left-color: var(--suite-deep-green); }
.step-card > .step-head { margin: 0 0 2px; padding-right: 96px; }
.step-what { margin: 0 0 12px !important; color: var(--suite-muted); font-size: .92rem; }
.sum-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px !important; font-weight: 700; color: var(--suite-deep-green); }
.sum-head .n { width: 22px; height: 22px; font-size: .78rem; }
.step-next { margin: 14px 0 0 !important; }
#dates-row, #step3 { scroll-margin-top: 12px; }
.intro > .steps-row { max-width: none; }
.steps-row .narrow-in { display: none; }
@media (max-width: 600px) { .steps-row { gap: 0; } .steps-row button { font-size: .92rem; padding: 8px 6px 10px; gap: 5px; } .step-card > .step-head { padding-right: 44px; }
  .steps-row .wide-in { display: none; } .steps-row .narrow-in { display: inline; } }   /* Herd Planner's short names on a phone */

/* v0.25.0: the step numbers in a column of their own (Scott: "I would like the icons for 1-4 to line up vertically. It
   looks messy when they are not lined up", then "Maybe make a column just for the numbers so they stand out?").
   Each step's card or heading sits to the right of a gutter, and its number sits in the gutter, all four at one x
   and one size, beside their headings. Absolutely placed: a number keeps its line (top: auto) and leaves no gap. */
:root { --step-col: 46px; }
.steps-form .step-card, .dates-row, #step3, #results { margin-left: var(--step-col); position: relative; }
.steps-form .step-card .step-head .n, .steps-form .step-card .sum-head .n, .dates-row .step-head .n, #step3 .n {
  position: absolute; width: 32px; height: 32px; font-size: .95rem; }
.steps-form .step-card .step-head .n, .steps-form .step-card .sum-head .n { left: calc(-1 * var(--step-col) - 5px); }   /* past the card's 5px edge */
.dates-row .step-head .n, #step3 .n { left: calc(-1 * var(--step-col)); }
@media (max-width: 600px) {
  :root { --step-col: 36px; }
  .steps-form .step-card .step-head .n, .steps-form .step-card .sum-head .n, .dates-row .step-head .n, #step3 .n { width: 28px; height: 28px; font-size: .85rem; }
}
.dates-row .dates-hint { margin-left: 0; }       /* v0.25.0: under its heading's words, now the number has its column */
/* v0.26.1 (Scott: the note under step 2 "should slide to the right and line up with the content, not the numbers"): past
   the number column, the cards' 5px edge and their 18px padding, so it starts where the cards' words start. */
#saved-note { margin-left: calc(var(--step-col) + 23px); margin-bottom: 12px; }
#saved-note.done { margin-left: var(--step-col); }   /* the green "Saved" box lines up with the cards' edge */

.farm-herd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 4px; }   /* v0.26.0 */
.farm-herd-row .muted { font-size: .88rem; }
.ps-key { margin: 0 0 4px; font-size: 8pt; color: #5d5c58; }

/* v0.26.0 Print This Answer: two letter pages (Scott: "B with the charts added ... a two-page minimum printout"), and a
   promo under the answer that can't be missed, with the pages themselves small (blurred without a subscription). */
.print-sheet { display: none; }
.ps-page { width: 8.5in; height: 11in; padding: .55in .6in .9in; position: relative; overflow: hidden; background: #fff;
  color: #1d1d1b; font-size: 10.5pt; line-height: 1.4; text-align: left; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #243b2f; padding-bottom: 10px; gap: 16px; }
.ps-brand { display: flex; align-items: center; gap: 10px; }
.ps-brand img { width: 40px; height: 40px; }
.ps-brand b { display: block; font-size: 15pt; color: #243b2f; line-height: 1.1; }
.ps-brand span, .ps-place span { color: #5d5c58; font-size: 9pt; }
.ps-place { text-align: right; }
.ps-place b { display: block; font-size: 13pt; color: #243b2f; }
.ps-page h1 { font-size: 20pt; margin: 16px 0 6px; color: #243b2f; }
.ps-page h2 { font-size: 10pt; margin: 14px 0 6px; color: #243b2f; text-transform: uppercase; letter-spacing: .06em; }
.ps-page h3 { font-size: 10.5pt; margin: 12px 0 2px; color: #243b2f; }
.ps-meta { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 18px; font-size: 9.5pt; margin: 4px 0 10px; }
.ps-meta b { display: block; font-size: 7.8pt; color: #5d5c58; text-transform: uppercase; letter-spacing: .06em; }
.ps-est { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 10pt; }
.ps-est th, .ps-est td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e3e0d6; vertical-align: top; }
.ps-est th { font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: #5d5c58; background: #f3f6f3; }
.ps-est .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-est td.down { color: #b0391b; } .ps-est td.up { color: #1c5cab; }
.ps-est tr.total td { font-weight: 800; border-top: 2px solid #243b2f; border-bottom: 0; font-size: 11pt; }
.ps-verdict { border: 2px solid #1a8f66; border-left-width: 8px; border-radius: 8px; padding: 10px 16px; margin: 0 0 10px; }
.ps-verdict.sell { border-color: #b0391b; } .ps-verdict.watch { border-color: #b8862b; } .ps-verdict.more, .ps-verdict.plain { border-color: #2a78d6; }
.ps-verdict > small { display: block; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 8pt; color: #3a3a38; }
.ps-verdict > b { display: block; font-size: 17pt; margin: 2px 0 4px; }
.ps-verdict > p { margin: 0; }
.ps-verdict .down, .ps-page .down { color: #b0391b; } .ps-verdict .up, .ps-page .up { color: #1c5cab; }
.ps-cols { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #d9d6cc; border-radius: 8px; margin: 0 0 8px; }
.ps-cols .col { padding: 8px 12px; border-left: 1px solid #d9d6cc; }
.ps-cols .col:first-child { border-left: 0; }
.ps-cols .lbl { font-weight: 700; font-size: 7.8pt; letter-spacing: .07em; text-transform: uppercase; color: #5d5c58; }
.ps-cols .big { font-size: 20pt; font-weight: 800; line-height: 1.15; }
.ps-cols .big small { font-size: 9.5pt; font-weight: 400; color: #5d5c58; }
.ps-cols p { margin: 2px 0 0; font-size: 8.8pt; }
.ps-turn { color: #5d5c58; font-size: 9pt; font-style: italic; margin: 6px 0 0; }
.ps-chart { margin: 0 0 6px; }
.ps-chart svg text { font: 9pt "Segoe UI", system-ui, sans-serif; fill: #3a3a38; }
.ps-key { margin: 0; font-size: 8.3pt; color: #5d5c58; }
.ps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ps-small { font-size: 9pt; margin: 0; }
.ps-next { list-style: none; margin: 0; padding: 0; }
.ps-next li { margin: 3px 0; padding-left: 20px; position: relative; }
.ps-next li i { position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border: 1.5px solid #243b2f; border-radius: 2px; }
.ps-dm { background: #f7f6f2; border-radius: 6px; padding: 8px 12px; font-size: 9pt; }
.ps-credit { display: block; margin-top: 4px; font-size: 7.5pt; color: #5d5c58; }
.ps-notes { border-top: 1px solid #c9c6bc; margin-top: 10px; }
.ps-notes div { border-bottom: 1px solid #d9d6cc; height: 22px; }
.ps-foot { position: absolute; left: .6in; right: .6in; bottom: .35in; border-top: 1px solid #d9d6cc; padding-top: 6px; font-size: 7.6pt;
  color: #5d5c58; display: flex; justify-content: space-between; gap: 18px; }
.ps-foot span:last-child { white-space: nowrap; }
.ps-sample { position: absolute; inset: 0; display: grid; place-items: center; font: 800 110pt/1 "Segoe UI", sans-serif;
  color: rgba(176, 57, 27, .14); transform: rotate(-30deg); pointer-events: none; letter-spacing: .1em; }
/* the promo under the answer */
.print-promo { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 16px 0; padding: 16px;
  border: 2px solid var(--suite-gold, #e0ac45); border-radius: 10px; background: #fffaf0; }
.print-promo h3 { margin: 0 0 4px; font-size: 1.15rem; color: var(--suite-deep-green, #243b2f); }
.print-promo .pp-words p { margin: 0 0 10px; }
.print-promo .print-btn { font-size: 1.05rem; padding: 10px 20px; }
.print-promo .pp-paid { margin: 8px 0 0 !important; font-size: .88rem; }
.pp-thumbs { display: flex; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; }
.pp-thumb { display: block; width: 136px; height: 176px; overflow: hidden; border: 1px solid #d9d6cc; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); background: #fff; position: relative; }
.pp-thumb .ps-page { transform: scale(.1667); transform-origin: top left; position: absolute; top: 0; left: 0; }
.pp-thumbs.blurred .pp-thumb .ps-page { filter: blur(6px); }
.pp-thumbs:hover .pp-thumb, .pp-thumbs:focus-visible .pp-thumb { box-shadow: 0 0 0 3px var(--suite-gold, #e0ac45); }
@media (max-width: 640px) {
  .print-promo { grid-template-columns: 1fr; }
  .pp-thumb { width: 102px; height: 132px; } .pp-thumb .ps-page { transform: scale(.125); }
}
/* the sample, in its preview */
.print-preview { width: min(980px, 96vw); max-height: 92vh; border: 0; border-radius: 10px; padding: 16px 20px; }
.print-preview::backdrop { background: rgba(20, 30, 24, .55); }
.pp-top { display: flex; justify-content: space-between; align-items: center; }
.pp-top h2 { margin: 0; }
.pp-body { overflow: auto; background: #e9e7e1; padding: 16px; border-radius: 8px; display: grid; gap: 16px; justify-content: center; }
.pp-body .ps-page { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
@media print {
  @page { size: letter; margin: 0; }
  body > *:not(main), main > *:not(.print-sheet), .print-preview { display: none !important; }
  main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .print-sheet { display: block !important; }
  .print-sheet .ps-page { page-break-after: always; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-sheet .ps-page:last-child { page-break-after: auto; break-after: auto; }
}

/* v0.27.1, Scott: Barn Prices in the green bar, as on the company site (notes in herd-planner/notes/barn-prices-header-*).
   On a computer (1000 px and up) it sits between Farm Apps and Learn and leaves Learn; narrower, there's no room in the
   bar, so it stays in Learn as before. */
@media (max-width: 999px) { .bar-barns { display: none !important; } }
@media (min-width: 1000px) { .learn-barns { display: none !important; } }

/* v0.29.0 Plan Next Season (Scott: "I like B" of notes/gp-outlook-*-2026-10-21.png), under the answer October to March */
.ol { margin: 22px 0 8px; }
.ol-title { font-size: 1.25rem; margin: 0 0 2px; color: var(--suite-deep-green, #243b2f); }
.ol-sub { color: var(--suite-muted); margin: 0 0 12px; font-size: .95rem; }
.ol-card { position: relative; background: #fcfbf7; border: 1px solid var(--suite-line); border-top: 5px solid var(--suite-gold, #e0ac45);
  border-radius: 10px; padding: 16px 18px; }
.ol-card p { margin: 6px 0 0; font-size: .92rem; }
.ol-card h3 { font-size: 1rem; margin: 0 0 4px; color: var(--suite-deep-green, #243b2f); }
.ol-pill { position: absolute; top: 12px; right: 12px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--suite-gold, #e0ac45); color: var(--suite-deep-green, #243b2f); }
.ol-tag { font-size: .72rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suite-muted); margin: 0 !important; }
.ol-year { font-size: 1.15rem !important; font-weight: 700; margin: 2px 0 8px !important; color: var(--suite-deep-green, #243b2f); }
.ol-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; }
.ol-big { font-size: 1.7rem !important; font-weight: 700; line-height: 1.1; margin: 0 !important; }
.ol-big small { font-size: .9rem; font-weight: 600; color: var(--suite-muted); }
.ol-stamp { display: inline-block; border: 1.5px dashed #8a8f98; color: #5e5c57; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; padding: 1px 6px; border-radius: 4px; margin-bottom: 6px; }
.ol-card.sample .ol-dim { opacity: .6; }
.ol-band, .ol-ladder { display: block; width: 100%; height: auto; margin-top: 8px; }
.ol-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 4px; }
.ol-table th { text-align: right; font-weight: 600; color: var(--suite-muted); font-size: .8rem; padding: 4px 6px; border-bottom: 1px solid var(--suite-line); }
.ol-table td { text-align: right; padding: 5px 6px; border-bottom: 1px solid #efede7; font-variant-numeric: tabular-nums; }
.ol-table th:first-child, .ol-table td:first-child { text-align: left; }
.ol-table tr.you td { font-weight: 700; background: #f3f6f3; }
.ol-when { margin-top: 14px !important; }
.ol-offer { margin-top: 10px !important; }
.ol-src { color: var(--suite-muted); font-size: .8rem; margin: 10px 0 0; }
.ol-narrow-only { display: none; }
@media (max-width: 760px) {
  .ol-cols { grid-template-columns: 1fr; }
  .ol-wide-only { display: none; }
  .ol-narrow-only { display: block; }
}
@media print { .ol { display: none; } }

/* v0.30.0: Your Pasture Compared With the County (Scott chose A of notes/gp-vs-county-A-desk-2026-10-22.png) */
.vs-county { border: 1px solid var(--suite-line); border-radius: 10px; padding: 12px 16px 6px; margin: 16px 0 0; background: #fbfaf6; }
.vs-county legend { font-weight: 700; color: var(--suite-deep-green); padding: 0 6px; font-size: 1rem; }
.vs-normal { margin: 2px 0; font-size: 1rem; }
.vs-ways { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
.vs-county label.vs-way { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 8px; font-weight: 400;
  color: var(--suite-ink); font-size: .95rem; }
.vs-way > input[type=radio] { width: auto; flex: none; margin: 4px 0 0; padding: 0; }
.vs-way > span { flex: 1; min-width: 0; }
.vs-way select, .vs-way input[type=number] { width: auto; margin: 0 4px; }
.vs-way input[type=number] { width: 7.5em; }
.vs-result { margin: 4px 0 6px; font-weight: 600; color: var(--suite-deep-green); min-height: 1.3em; }
.adjust-line { margin: 6px 0 0; font-size: .86rem; }
@media (max-width: 640px) { .vs-county { padding: 10px 10px 4px; } }

/* v0.32.0: why you're on the free version or signed out, with Ask for Access (session.js accessBand;
   farm-account/notes/access-notice-*-2026-10-22.png) */
.access-band { background: #fff; border-bottom: 1px solid var(--line, #e3dfd3); }
.access-band .in { max-width: 1040px; margin: 0 auto; padding: 14px 20px; display: flex; gap: 12px 16px; align-items: center;
  flex-wrap: wrap; border-left: 5px solid var(--suite-gold, #e0ac45); }
.access-band.sent .in { border-left-color: #1baf7a; }
.access-band .words { flex: 1 1 420px; min-width: 0; }
.access-band h2 { margin: 0 0 4px; font-size: 1.12rem; color: var(--suite-deep-green, #243b2f); }
.access-band p { margin: 0; line-height: 1.45; font-size: .97rem; }
.access-band .acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.access-band .btn { margin: 0; }
.access-band .linklike { background: none; border: 0; padding: 0; font: inherit; font-size: .95rem; color: var(--muted, #5b625d);
  text-decoration: underline; cursor: pointer; }

/* v0.34.0 the free taste (A of notes/free-taste-*-2026-10-25.png): a note on answers 1 to 3, and on the 4th the
   headline stays and the rest is blurred under a card asking for a free My Farm account */
.taste-note { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 12px 0 0; padding: 8px 12px;
  background: #f3f6f3; border-radius: 10px; font-size: .9rem; max-width: 88ch; }
.taste-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.taste-wrap { position: relative; }
.taste-blur { filter: blur(6px); opacity: .75; pointer-events: none; user-select: none; }
.taste-over { position: absolute; left: 0; right: 0; top: 0; }
.taste-gate { margin: 14px auto 0; max-width: 520px; background: var(--suite-surface, #fff); border: 2px solid var(--suite-gold);
  border-radius: 12px; padding: 14px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.taste-gate h3 { margin: 2px 0 6px; font-size: 1.2rem; }
.taste-gate p { margin: 0 0 8px; font-size: .95rem; }
.taste-gate .taste-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a6418; }
@media print { .taste-note, .taste-gate { display: none; } }
.plans-table .plan-words { font-size: .85rem; font-weight: 600; color: var(--suite-ink); }
#taste { margin-top: 10px; }   /* v0.34.4: Admin's free-taste table, clear of the words above it */