/* ═══════════════════════════════════════════════════════════════════════
   .app — faithful recreations of the real software

   Values lifted directly from cleaver-and-oak/src/app/globals.css so these
   panels read as the product rather than as an illustration of it.

   The page around them is square butcher paper. These are ROUNDED, because
   the actual app is: 24px cards, 16px option tiles, 999px pill badges, an
   oxblood tick circle on the chosen tile. Do not harmonise them with the
   page. The whole point is that a prospect sees the thing they would run.
   ═══════════════════════════════════════════════════════════════════════ */

.app{background:var(--paper-light);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 18px 50px -18px rgba(40,26,15,.45);overflow:hidden;color:var(--ink-text)}
/* An .app panel is a light card that usually sits INSIDE a dark section (the
   hero, the gallery). Without this it inherits .on-ink and paints its labels
   in the dark section's pale tone on cream, around 2.5:1. Same trap the
   .ledger cards hit. Anything on the app's own dark header is handled
   separately below. */
.app .micro,.app-foot .micro,.app-body .micro{color:var(--m4)}
.app-head .micro{color:var(--brass-soft)}
.app-head{background:var(--ink);color:#F7EEDD;padding:18px 22px;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.app-head h4{font-family:var(--sig);font-weight:700;font-size:20px;color:var(--paper);margin:0}
.app-head p{margin:3px 0 0;font-size:13px;color:var(--brass-soft)}
.app-body{padding:22px}
.app-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;padding:16px 22px;border-top:1px solid var(--line);background:var(--paper-2)}

/* step dots in the dark header */
.steps{display:flex;gap:7px;flex-wrap:wrap}
.step-dot{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:rgba(251,245,234,.5);font-family:var(--label)}
.step-dot b{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(251,245,234,.3);
  display:grid;place-items:center;font-family:var(--label);font-size:12px;font-weight:700}
.step-dot.active{color:var(--paper)}
.step-dot.active b{background:var(--brass);color:#2A1D08;border-color:var(--brass)}
.step-dot.done b{background:var(--green-ok);border-color:var(--green-ok);color:#fff}

/* the brass banner carrying the real hanging weight */
.animal-banner{margin:0 0 16px;padding:11px 15px;background:var(--brass-soft);color:#1A1204;
  border:1px solid var(--brass);border-radius:10px;font-size:14px;line-height:1.45}

/* primal rows */
.ap{padding:18px 0;border-top:1px solid var(--line)}
.ap:first-of-type{border-top:0;padding-top:3px}
.ap-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ap-head h5{font-family:var(--sig);font-weight:700;font-size:18px;margin:0}
.ap-lbs{font-family:var(--label);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--brass-ink);background:rgba(192,145,63,.12);
  padding:4px 10px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ap-blurb{margin:4px 0 13px;font-size:14px;color:var(--m2)}

/* option tiles */
.og{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:6px}
.o{border:1.5px solid var(--line-strong);border-radius:16px;padding:16px 17px;background:var(--paper-2);
  cursor:pointer;transition:.18s;position:relative;text-align:left;font:inherit;color:inherit;display:block}
.o:hover{border-color:var(--oxblood);transform:translateY(-3px)}
.o[aria-pressed="true"]{border-color:var(--oxblood);background:#fff;box-shadow:0 0 0 3px rgba(123,45,42,.12)}
.o h5{font-family:var(--sig);font-weight:700;font-size:16px;margin:0 0 4px;padding-right:22px}
.o span{display:block;font-size:13px;color:var(--m2);line-height:1.4}
.o .tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  background:var(--oxblood);color:#fff;display:none;place-items:center;font-size:12px;font-weight:700}
.o[aria-pressed="true"] .tick{display:grid}

/* trim budget, as an app panel */
.app-trim{background:rgba(192,145,63,.1);border:1px solid rgba(192,145,63,.32);
  border-radius:16px;padding:18px;margin:18px 0}
.app-trim .bar{height:7px;background:rgba(26,22,19,.1);border-radius:999px;overflow:hidden;margin-bottom:14px}
.app-trim .bar span{display:block;height:100%;background:var(--oxblood);border-radius:999px;transition:width .18s}
.app-step{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.app-step label{font-size:14px;font-weight:600}
.app-stepper{display:flex;align-items:center;border:1px solid var(--line-strong);
  border-radius:999px;overflow:hidden;background:#fff}
.app-stepper button{width:32px;height:30px;background:transparent;border:0;cursor:pointer;
  font-family:var(--label);font-size:15px;font-weight:700;color:var(--ink-text);border-radius:0}
.app-stepper button:hover:not(:disabled){background:var(--oxblood);color:#fff}
.app-stepper button:disabled{color:var(--disabled);cursor:not-allowed}
.app-stepper .v{width:54px;text-align:center;font-family:var(--label);font-size:12px;
  font-weight:700;font-variant-numeric:tabular-nums;line-height:30px}

.yield-note{font-size:14px;color:var(--m1)}
.yield-note b{font-family:var(--sig);color:var(--oxblood);font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums}

/* generic app bits reused across the gallery */
.a-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--label);font-size:11px;
  font-weight:700;padding:4px 11px;border-radius:999px;background:rgba(192,145,63,.14);
  color:var(--brass-ink);white-space:nowrap}
.a-chip.live{background:rgba(86,96,67,.16);color:var(--green-ok)}
.a-chip.due{background:rgba(123,45,42,.1);color:var(--oxblood)}
.a-chip.flat{background:var(--paper-2);color:var(--m2);border:1px solid var(--line)}
/* Chips also appear in the dark .app-head, where brass-ink on translucent
   brass lands around 2:1. On ink they take the light brass instead. */
.app-head .a-chip{background:rgba(230,201,138,.18);color:var(--brass-soft)}
.app-head .a-chip.live{background:rgba(155,196,155,.2);color:var(--green)}
.app-head .a-chip.flat{background:rgba(244,235,219,.12);color:#E4D8C4;border-color:rgba(244,235,219,.22)}
.a-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--label);
  font-size:12px;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid var(--line-strong);
  background:#fff;color:var(--ink-text);white-space:nowrap}
.a-btn.p{background:var(--oxblood);color:#fff;border-color:var(--oxblood)}
.a-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.a-row:last-child{border-bottom:0}
.a-row b{font-family:var(--sig);font-weight:700;font-size:15px}
.a-row .sub{font-size:13px;color:var(--m2);margin-top:2px}
.a-grow{flex:1;min-width:0}

.a-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.a-tbl td{padding:9px 0;border-bottom:1px dashed var(--line-strong);vertical-align:top}
.a-tbl tr:last-child td{border-bottom:0}
.a-tbl td:first-child{color:var(--m2);font-weight:600;padding-right:14px}
.a-tbl td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-tbl thead td{font-family:var(--label);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--m2);border-bottom:1px solid var(--line-strong)}
.a-tbl thead td:last-child{text-align:right}
.a-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:14px;padding-top:14px;border-top:2px solid var(--oxblood)}
.a-total b{font-family:var(--sig);font-size:26px;font-weight:700;color:var(--oxblood);
  font-variant-numeric:tabular-nums}
.nfs{background:var(--ink);color:var(--brass-soft);border-radius:10px;padding:9px 14px;
  font-family:var(--label);font-size:11px;font-weight:700;text-align:center;
  letter-spacing:.04em;margin:14px 0}

.a-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,92px),1fr));
  gap:10px;margin:14px 0}
.a-f{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.a-f.hot{background:var(--brass-soft);border-color:var(--brass)}
.a-f .k{display:block;font-family:var(--label);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--m2);margin-bottom:5px}
.a-f.hot .k{color:#6B4A0C}
.a-f .v{font-family:var(--sig);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.a-f.hot .v{color:#3A2408}

.a-prog{height:7px;background:rgba(26,22,19,.1);border-radius:999px;overflow:hidden;margin:10px 0 8px}
.a-prog span{display:block;height:100%;background:var(--oxblood);border-radius:999px}

.a-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));gap:12px}
.a-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper-2)}
.a-card .ph{height:62px;background:linear-gradient(135deg,#7A4B37,#3A2418)}
.a-card .bd{padding:11px 12px}
.a-card h5{font-family:var(--sig);font-size:14px;font-weight:700;margin:0 0 3px;line-height:1.2}
.a-card .pr{font-family:var(--label);font-size:13px;font-weight:700;color:var(--oxblood);
  font-variant-numeric:tabular-nums}

.a-label{background:#fff;border:1px solid var(--line-strong);border-radius:12px;padding:15px;text-align:center}
.a-label .nm{font-family:var(--sig);font-size:16px;font-weight:700}
.a-label .sh{font-family:var(--label);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--m2);margin-top:3px}
.a-label .bc{height:36px;margin:12px 0 6px;background:repeating-linear-gradient(90deg,
  var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px)}
.a-label .mono{font-family:var(--label);font-size:10px;letter-spacing:.1em;color:var(--m2);
  font-variant-numeric:tabular-nums}

.a-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.a-cal div{aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:var(--paper-2);
  font-family:var(--label);font-size:11px;font-weight:600;color:var(--m2);
  display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 5px}
.a-cal div.on{background:var(--brass-soft);border-color:var(--brass);color:#3A2408}
.a-cal div.ox{background:rgba(123,45,42,.12);border-color:rgba(123,45,42,.3);color:var(--oxblood)}
.a-cal .hd{aspect-ratio:auto;border:0;background:none;justify-content:center;padding:0 0 4px;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}

/* the gallery grid */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  gap:30px;margin-top:44px}
.gal-cap{margin:16px 0 0}
.gal-cap b{display:block;font-family:var(--sig);font-size:17px;font-weight:700;margin-bottom:4px}
.gal-cap p{margin:0;font-size:15px;color:var(--m2)}
.s-ink .gal-cap b{color:var(--paper)}
.s-ink .gal-cap p{color:var(--d2)}

/* The chicken pre sale panel: what they ordered beside which day they want it.
   Collapses to one column well before the gallery breakpoint because the
   table inside it needs the room. */
.chick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:34px}

/* The chicken case sale: the offer beside the report it produces. */
.chick-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:30px}
.a-tbl td.k{color:var(--ink-text);font-weight:600}
.a-tbl td.p,.a-tbl td.n{text-align:right;font-family:var(--label);font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink-text);white-space:nowrap}
.a-tbl thead td{text-align:left}
.a-tbl thead td:not(:first-child){text-align:right}

/* segmented control for the report views */
.seg{display:flex;gap:0;border:1px solid var(--line-strong);border-radius:999px;
  overflow:hidden;background:var(--paper-2);margin-bottom:18px;width:fit-content;max-width:100%;flex-wrap:wrap}
.seg-b{font-family:var(--label);font-size:12px;font-weight:600;padding:9px 16px;border:0;
  background:transparent;color:var(--m2);cursor:pointer;border-radius:0;white-space:nowrap}
.seg-b:hover{color:var(--ink-text)}
.seg-b[aria-pressed="true"]{background:var(--oxblood);color:#fff}

.day-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 0 8px;border-bottom:2px solid var(--line-strong);margin-top:10px}
.day-head b{font-family:var(--sig);font-size:16px;font-weight:700}

/* The public reserve page, mirroring cleaver-and-oak's checkout:
   .checkout-grid 1.2fr/.85fr, .co-card at the app's 18px radius, .qty pill
   steppers, .totline rows with a serif .grand. */
.co-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.co-card{background:var(--paper-light);border:1px solid var(--line);border-radius:18px;padding:18px}
.co-card h5{font-family:var(--sig);font-size:17px;font-weight:700;margin:0 0 14px}
.co-f{margin-bottom:11px}
.co-f .k{display:block;font-family:var(--label);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--m2);margin-bottom:5px}
.co-f .box{border:1px solid var(--line-strong);border-radius:10px;background:#fff;
  padding:10px 12px;font-size:14px;color:var(--m4)}
.qty-line{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.qty-line:last-of-type{border-bottom:0}
.qty-line b{font-family:var(--sig);font-size:14px;font-weight:700;display:block}
.qty-line .sub{font-size:12px;color:var(--m2)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);
  border-radius:999px;overflow:hidden;background:#fff;flex:none}
.qty button{width:28px;height:28px;font-family:var(--label);font-weight:700;font-size:14px;
  color:var(--ink-text);background:var(--paper-2);border:0;border-radius:0}
.qty span{min-width:32px;text-align:center;font-family:var(--label);font-weight:700;
  font-size:13px;font-variant-numeric:tabular-nums}
.qty.on{border-color:var(--oxblood);box-shadow:0 0 0 3px rgba(123,45,42,.1)}
.totline{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:14px;color:var(--m2)}
.totline.grand{font-family:var(--sig);font-size:20px;font-weight:700;color:var(--ink-text);
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums}
@media (max-width:640px){.co-grid{grid-template-columns:1fr}}