/* The bin tally and its yard (public/bin-tally.js), shared by the production
   report page and the bin inventory page. Uses each page's colour tokens. */
.prov { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.due { margin-top: 14px; font-size: 15px; color: var(--muted); }
.due strong { color: var(--ink); }
.bin { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 12px; background: var(--paper); }
.bin-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; }
.bin-top strong { font-size: 15px; }
.bin-out { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bin-out b { color: var(--ink); }
.bin .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bin .wide2 { grid-column: span 2; }
.adds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.err { color: var(--alert); font-size: 14px; margin-top: 10px; }
.totals td small { display: block; color: var(--muted); font-size: 12.5px; }
.totals td.n, .totals th.n { white-space: nowrap; }
@media (max-width: 560px) { .totals { font-size: 14px; } .totals th, .totals td { padding: 8px 7px; } .bin select { padding: 0 6px; font-size: 15px; } }
.totals tr.field td { font-size: 14px; color: var(--muted); padding-top: 6px; padding-bottom: 6px; }
.totals tr.field td:first-child { padding-left: 26px; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.acts button, .acts a.btn { min-height: 46px; padding: 0 18px; border-radius: 9px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.acts .primary { border: 0; background: var(--forest); color: var(--on-forest); }
.acts .ghost { border: 1px solid var(--line); background: transparent; color: var(--ink); }

.yard-wrap h2 { margin-top: 36px; }
.due-card { display: none; }
.for { margin: -6px 0 10px; font-size: 15px; color: var(--muted); }
.for strong { color: var(--ink); }
.due-left { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--wheat-soft); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.due-left.late { background: color-mix(in srgb, var(--alert) 18%, transparent); color: var(--alert); }
.yard-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; font-size: 14px; color: var(--muted); }
.yard-jump { display: none; align-items: center; padding: 9px 4px; font-size: 13px; font-weight: 700; color: var(--forest-2); }
@media (max-width: 1099px) { .yard-wrap.empty { display: none; } .yard-jump:not([hidden]) { display: inline-flex; } }
/* on a computer: the form on the left, the yard beside it, in view while the farmer types */
@media (min-width: 1100px) {
  main.wrap { width: min(1220px, calc(100% - 48px)); }
  main.wrap > h1, main.wrap > .lede, main.wrap > .byline, main.wrap > .nudge, main.wrap > .acts, main.wrap > .hint, main.wrap > .note,
    main.wrap > .guide, main.wrap > .sources-method, main.wrap > .setup { max-width: 860px; }
  .work { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
  .yard-wrap { position: sticky; top: 88px; margin-top: 22px; }
  .yard-wrap h2 { margin-top: 0; }
  .due-card { display: block; margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: var(--forest); color: var(--on-forest); font-size: 14px; line-height: 1.45; }
  .due-card strong { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: 22px; font-weight: 400; }
  .due-card a { color: inherit; }
  .due-card .due-left { margin: 6px 0 0; }
  .yard-map { height: 460px; }
}

.yard-map { position: relative; height: 300px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; touch-action: none;
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, color-mix(in srgb, var(--good) 8%, var(--surface)), color-mix(in srgb, var(--wheat) 10%, var(--surface))); }
.ybin { position: absolute; transform: translate(-50%, -50%); border: 0; padding: 0; background: none; font: inherit; color: var(--ink); cursor: grab; touch-action: none; display: flex; flex-direction: column; align-items: center; gap: 4px; -webkit-user-select: none; user-select: none; }
.ybin:active { cursor: grabbing; }
.ybin.dragging { z-index: 5; filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
.ybin:focus-visible .silo { outline: 3px solid var(--wheat); outline-offset: 3px; }
.silo { position: relative; width: var(--w); height: calc(var(--w) * 1.12); border: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 46% 46% 6px 6px / 26% 26% 6px 6px; background: var(--surface); overflow: hidden; }
.silo i { position: absolute; left: 0; right: 0; bottom: 0; top: 18%; background: var(--crop); background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 5px, transparent 5px 10px); }
.ybin.bag .silo { width: calc(var(--w) * 1.7); height: calc(var(--w) * .5); border-radius: 999px; }
.ybin.bag .silo i, .ybin.pile .silo i { top: 0; }
.ybin.pile .silo { width: calc(var(--w) * 1.5); height: calc(var(--w) * .7); border-radius: 50% 50% 4px 4px / 100% 100% 4px 4px; }
.ybin.rect .silo { border-radius: 6px; width: calc(var(--w) * 1.3); }
.ybin-name { font-size: 12px; font-weight: 700; line-height: 1.1; text-align: center; max-width: 120px; background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 1px 5px; border-radius: 6px; }
.ybin-qty { font-size: 11px; color: var(--muted); line-height: 1; font-variant-numeric: tabular-nums; }
.yard-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.yard-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
@media (max-width: 720px) { .bin .grid { grid-template-columns: 1fr 1fr; } .prov { grid-template-columns: 1fr; } }
@media print {
  header, footer, .setup, .nudge, .cta, .acts, .adds, .panel-inputs, .sources-method, .guide, .byline, .lede, .yard-wrap { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border: 0; padding: 0; }
}
.totals input.owed { width: 92px; min-height: 38px; text-align: right; padding: 0 8px; }
@media (max-width: 560px) { .totals input.owed { width: 64px; padding: 0 6px; } .totals th { font-size: 12px; white-space: normal; } }
.totals input.acres { width: 84px; }
.totals .fname { display: inline-block; min-width: 7em; }
.totals .yield { white-space: nowrap; font-weight: 600; color: var(--ink, inherit); }
.totals td.short { color: var(--alert); font-weight: 700; }