/* Producers & processors, Harvest version (roles/producers.html). Sits on top of
   persona-producers.css (hero, clock rail, hours, ledger) and adds: the plant picker, a photo per
   plant, the short screens with a note on what each one is, and the full-screen view. */

/* ---------- Which plant is shown (html[data-plant], set by js/harvest-producers.js; meat without JS) ---------- */
html:not([data-plant]) .p-hproducers .hp-v:not([data-trade="meat"]),
html[data-plant="meat"] .p-hproducers .hp-v:not([data-trade="meat"]),
html[data-plant="seafood"] .p-hproducers .hp-v:not([data-trade="seafood"]),
html[data-plant="dairy"] .p-hproducers .hp-v:not([data-trade="dairy"]),
html[data-plant="fruit"] .p-hproducers .hp-v:not([data-trade="fruit"]),
html[data-plant="dry"] .p-hproducers .hp-v:not([data-trade="dry"]) { display: none; }

/* ---------- Hero: a photo per plant, and the picker ---------- */
.p-hproducers .hp-hero__img { opacity: 0; transition: opacity .9s ease; }
.p-hproducers .hp-hero__img.is-on { opacity: 1; }
.p-hproducers .hp-hero__img:not([data-trade="meat"]) { object-position: 50% 40%; }
.p-hproducers .hp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--space-2); }
.p-hproducers .hp-pick__k { width: 100%; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(246,245,242,.7); }
.p-hproducers .hp-pick__b { height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid rgba(246,245,242,.4); background: rgba(18,18,17,.18);
  color: var(--on-photo); font: 500 15px/1 var(--font-sans); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.p-hproducers .hp-pick__b:hover { border-color: var(--on-photo); }
.p-hproducers .hp-pick__b.is-on { background: var(--on-photo); border-color: var(--on-photo); color: var(--photo-shade); }
.p-hproducers .hp-pick__b:focus-visible { outline: 2px solid var(--on-photo); outline-offset: 3px; }
.p-hproducers .hp-change { display: block; margin: 4px 0 0; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 12px; }
.p-hproducers .hp-change:hover { color: var(--ink); }

/* ---------- A screen: what it is, the short version, and the way into the full one ---------- */
.p-hproducers .hp-screen { margin: 0; display: grid; gap: var(--space-4); justify-items: start; }
.p-hproducers .hp-screen > .hp-v { width: 100%; }
.p-hproducers .hp-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.p-hproducers .hp-what__k { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--carmine); white-space: nowrap; }
.p-hproducers .hp-win { width: 100%; font-size: 16px; line-height: 1.45; }
.p-hproducers .hp-win .mb-window__crumb { font-size: 14px; }
.p-hproducers .hp-body { padding: var(--space-6); display: grid; gap: var(--space-4); }
.p-hproducers .hp-body p { margin: 0; }
.p-hproducers .hp-open { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 15px/1 var(--font-sans); cursor: pointer; transition: border-color .15s ease; }
.p-hproducers .hp-open:hover { border-color: var(--ink); }
.p-hproducers .hp-open .mb-arrow { display: inline-block; transition: transform .2s ease; }
.p-hproducers .hp-open:hover .mb-arrow { transform: translateX(3px); }
[dir=rtl] .p-hproducers .hp-open:hover .mb-arrow { transform: translateX(-3px); }
.p-hproducers .hp-plant { font-size: 13px; color: var(--muted); }

/* ---------- Screen parts ---------- */
.p-hproducers .hp-lang { display: inline-grid; place-items: center; flex: none; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--surface-sunk); font: 500 12px/1 var(--font-mono); color: var(--ink-2); }
.p-hproducers .hp-tag { justify-self: end; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 8px; background: var(--surface-sunk); font-size: 14px; line-height: 1.3; color: var(--ink-2); text-align: right; }
.p-hproducers .hp-tag--ok { background: var(--ok-soft); color: var(--ok); }
.p-hproducers .hp-tag--warn { background: var(--warn-soft); color: var(--warn); font-weight: 500; }
.p-hproducers .hp-sub { font-size: 14px; color: var(--muted); }
.p-hproducers .hp-warn { color: var(--warn); font-weight: 600; }
.p-hproducers .hp-ok { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ok); }
.p-hproducers .hp-ok svg { width: 16px; height: 16px; flex: none; }
.p-hproducers .hp-pill { display: inline-flex; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-sunk); font-size: 14px; }
.p-hproducers .hp-more { font-size: 14px; color: var(--muted); }

/* rows: one thing per line, generous */
.p-hproducers .hp-rows { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--line); }
.p-hproducers .hp-rows > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.p-hproducers .hp-msg { display: grid; gap: 2px; min-width: 0; color: var(--ink); }
.p-hproducers .hp-msg small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.p-hproducers .hp-msg b { font-weight: 600; }
.p-hproducers .hp-counts { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.p-hproducers .hp-counts li { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.p-hproducers .hp-counts b { font: 500 30px/1 var(--font-mono); letter-spacing: -0.03em; color: var(--ink); }

/* the message and what it became */
.p-hproducers .hp-flow { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.1fr); gap: var(--space-4); align-items: center; }
.p-hproducers .hp-flow__arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink-2); }
.p-hproducers .hp-flow__arrow svg { width: 18px; height: 18px; }
.p-hproducers .hp-chat { display: grid; gap: 10px; }
.p-hproducers .hp-chat__who { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.p-hproducers .hp-bubble { padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--surface-sunk); font-size: 17px; line-height: 1.45; color: var(--ink); }
.p-hproducers .hp-read { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 15px; color: var(--ink-2); }
.p-hproducers .hp-read svg { width: 16px; height: 16px; margin-top: 3px; color: var(--carmine); }
.p-hproducers .hp-read b { color: var(--ink); font-weight: 600; }
.p-hproducers .hp-card { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.p-hproducers .hp-card__k { font: 500 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.p-hproducers .hp-prod { display: grid; gap: 2px; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.p-hproducers .hp-prod small { font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.p-hproducers .hp-kv { margin: 0; display: grid; }
.p-hproducers .hp-kv > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.p-hproducers .hp-kv dt { color: var(--muted); }
.p-hproducers .hp-kv dd { margin: 0; color: var(--ink); font-weight: 500; }
.p-hproducers .hp-names { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.p-hproducers .hp-names li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-sunk); font-size: 16px; color: var(--ink); }
.p-hproducers .hp-names li.is-this { background: var(--carmine-soft); }
.p-hproducers .hp-names q { quotes: "“" "”"; }

/* a meter: how much of something, at a glance */
.p-hproducers .hp-meter { display: grid; gap: 10px; }
.p-hproducers .hp-meter__k { font-size: 14px; color: var(--muted); }
.p-hproducers .hp-meter__big { font-size: 20px; color: var(--ink-2); }
.p-hproducers .hp-meter__big b { font: 500 38px/1 var(--font-mono); letter-spacing: -0.04em; color: var(--ink); }
.p-hproducers .hp-meter__big b.hp-warn { color: var(--warn); }
.p-hproducers .hp-meter__bar { position: relative; height: 12px; border-radius: 6px; background: var(--surface-sunk); overflow: hidden; }
.p-hproducers .hp-meter__bar i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 6px; background: var(--ink); }
.p-hproducers .hp-meter__bar.is-over i { background: linear-gradient(90deg, var(--ink) 0 92%, var(--warn) 92%); }

/* a flag: something that needs a person */
.p-hproducers .hp-flag, .p-hproducers .hp-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 14px; background: var(--carmine-soft); color: var(--ink); }
.p-hproducers .hp-flag > span:nth-child(2) { display: grid; gap: 2px; flex: 1 1 220px; }
.p-hproducers .hp-flag small { font-size: 14px; color: var(--ink-2); }
.p-hproducers .hp-ask > span:nth-child(2) { flex: 1 1 260px; font-size: 16px; }
.p-hproducers .hp-flag__mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--carmine); color: var(--on-carmine); }
.p-hproducers .hp-flag__mark svg { width: 15px; height: 15px; }
.p-hproducers .hp-acts { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.p-hproducers .hp-ask .hp-acts { width: auto; }
.p-hproducers .hp-acts em { font-style: normal; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; font-weight: 500; }
.p-hproducers .hp-acts em.is-main { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* credit */
.p-hproducers .hp-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.p-hproducers .hp-choice span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.p-hproducers .hp-choice .is-picked { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.p-hproducers .hp-choice svg { width: 14px; height: 14px; color: var(--ok); }
.p-hproducers .hp-late { margin: 0; padding: 0; list-style: none; display: flex; align-items: flex-end; gap: 8px; height: 76px; }
.p-hproducers .hp-late li { flex: 1; display: grid; align-content: end; justify-items: center; gap: 4px; height: 100%; }
.p-hproducers .hp-late li::before { content: ""; width: 100%; height: calc(6px + var(--d) * 7px); border-radius: 4px; background: var(--line-strong); order: 1; }
.p-hproducers .hp-late li.is-late::before { background: var(--warn); }
.p-hproducers .hp-late span { order: 2; font: 500 12px/1 var(--font-mono); color: var(--muted); }

/* production plan */
.p-hproducers .hp-rows > li.hp-plan { grid-template-columns: minmax(0, 1fr) auto; }
.p-hproducers .hp-rows--plan > li { grid-template-columns: minmax(0, 1.6fr) .8fr .8fr auto !important; }
.p-hproducers .hp-rows__h { font-size: 13px; color: var(--muted); padding: 8px 0 !important; }

/* carrier quotes */
.p-hproducers .hp-rows > li.hp-quote { grid-template-columns: 30px minmax(0, 1fr) minmax(110px, 160px) auto; }
.p-hproducers .hp-quote__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-sunk); font: 500 13px/1 var(--font-mono); color: var(--ink-2); }
.p-hproducers .hp-quote.is-pick .hp-quote__n { background: var(--ink); color: var(--paper); }
.p-hproducers .hp-quote__who { display: grid; gap: 2px; }
.p-hproducers .hp-quote__who small { font-size: 13.5px; color: var(--muted); }
.p-hproducers .hp-quote__on { display: grid; gap: 4px; }
.p-hproducers .hp-quote__on small { font-size: 13px; color: var(--muted); }
.p-hproducers .hp-onbar { position: relative; height: 6px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; }
.p-hproducers .hp-onbar i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--ok); }
.p-hproducers .hp-onbar.is-low i { background: var(--warn); }
.p-hproducers .hp-quote em, .p-hproducers .hp-offers em { font: 500 17px/1 var(--font-mono); font-style: normal; color: var(--ink); }
.p-hproducers .hp-job { font-size: 16px; color: var(--ink-2); }

/* offers */
.p-hproducers .hp-offers > li { grid-template-columns: minmax(0, 1fr) auto auto; }
.p-hproducers .hp-offers > li:has(> .hp-sub:nth-child(2)) { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.p-hproducers .hp-checked { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); }
.p-hproducers .hp-checked svg { width: 12px; height: 12px; }

/* papers */
.p-hproducers .hp-docs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.p-hproducers .hp-docs li { display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.p-hproducers .hp-docs b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.p-hproducers .hp-doc__page { display: grid; gap: 4px; width: 34px; padding: 6px; border-radius: 4px; background: var(--surface-sunk); }
.p-hproducers .hp-doc__page i { height: 2px; border-radius: 1px; background: var(--line-strong); }
.p-hproducers .hp-doc__page i:nth-child(2n) { width: 70%; }
.p-hproducers .hp-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.p-hproducers .hp-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--ink); }
.p-hproducers .hp-checks svg { width: 16px; height: 16px; margin-top: 4px; flex: none; color: var(--ok); }

/* dock */
.p-hproducers .hp-dock time { font: 500 15px/1 var(--font-mono); color: var(--ink-2); min-width: 86px; }

/* ---------- The full-screen view ---------- */
.p-hproducers .hp-dlg { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: 0; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink-2); box-shadow: var(--shadow-window); }
.p-hproducers .hp-dlg::backdrop { background: rgba(18,18,17,.55); backdrop-filter: blur(2px); }
.p-hproducers .hp-dlg[open] { animation: hp-dlg-in .28s cubic-bezier(.2,.7,.2,1); }
@keyframes hp-dlg-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.p-hproducers .hp-dlg__in { display: grid; gap: var(--space-6); padding: var(--space-8); }
.p-hproducers .hp-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.p-hproducers .hp-dlg__head h2 { margin-top: 8px; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.p-hproducers .hp-dlg__head .hp-what__k { white-space: normal; line-height: 1.4; }
.p-hproducers .hp-dlg__x { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.p-hproducers .hp-dlg__x svg { width: 16px; height: 16px; }
.p-hproducers .hp-dlg__x:hover { border-color: var(--ink); }
.p-hproducers .hp-dlg .hp-win--full { box-shadow: none; border: 1px solid var(--line); }

/* ---------- Smaller screens ---------- */
@media (max-width: 760px) {
  .p-hproducers .hp-body { padding: var(--space-4); }
  .p-hproducers .hp-flow { grid-template-columns: minmax(0, 1fr); }
  .p-hproducers .hp-flow__arrow { justify-self: center; transform: rotate(90deg); }
  .p-hproducers .hp-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-hproducers .hp-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-hproducers .hp-rows > li { grid-template-columns: auto minmax(0, 1fr); }
  .p-hproducers .hp-rows > li > .hp-tag, .p-hproducers .hp-rows > li > .mb-status { grid-column: 2; justify-self: start; }
  .p-hproducers .hp-rows > li.hp-quote { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .p-hproducers .hp-quote__on { grid-column: 2 / -1; }
  .p-hproducers .hp-offers > li, .p-hproducers .hp-offers > li:has(> .hp-sub:nth-child(2)) { grid-template-columns: minmax(0, 1fr) auto; }
  .p-hproducers .hp-rows--plan > li { grid-template-columns: minmax(0, 1fr) auto !important; }
  .p-hproducers .hp-rows--plan > li > span:not(.hp-tag) { display: none; }
  .p-hproducers .hp-dlg__in { padding: var(--space-6) var(--space-4); }
  .p-hproducers .hp-pick__b { height: 36px; padding: 0 13px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-hproducers .hp-hero__img { transition-duration: .3s; }
  .p-hproducers .hp-dlg[open] { animation: none; }
}