:root{
    --black: #1a1a1a;
    --near-black: #141414;
    --panel-line: #1a1a1a;
    --gray-line: #d9d9d9;
    --gray-text: #6b6b6b;
    --white: #ffffff;
    --off-white: #f6f6f5;
    --neg: #b23b2e;
    --pos: #3b6b3f;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--off-white);
    color:var(--black);
    font-family:'Inter',sans-serif;
  }
  .wrap{max-width:1220px;margin:0 auto;}
  /* The Buyer's Card page runs wider so the full Breakeven Detail table fits in the
     right column without horizontal scrolling on a desktop — the directory pages stay
     at the narrower cap since they're single-column. */
  .wrap.wrap-wide{max-width:1400px;}

  /* Header bar */
  .topbar{
    background:var(--white);
    border-bottom:1px solid var(--gray-line);
    padding:16px 24px;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:12px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand-logo-img{height:26px;width:auto;display:block;}
  .hero-logo-img{height:56px;width:auto;display:block;margin:0 auto 20px;}
  .topbar-tag{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.7rem;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-text);
  }
  .reset-btn{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.72rem;
    letter-spacing:1px;text-transform:uppercase;color:var(--black);
    background:none;border:1px solid var(--black);border-radius:2px;
    padding:9px 18px;cursor:pointer;
  }
  .reset-btn:hover{background:var(--black);color:var(--white);}

  /* Hero */
  .hero{
    background:var(--near-black);
    color:var(--white);
    padding:56px 24px 48px;
    text-align:center;
  }
  .hero-eyebrow{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.78rem;
    letter-spacing:2px;text-transform:uppercase;color:var(--white);margin-bottom:12px;
  }
  .hero-desc{
    max-width:640px;margin:0 auto;color:#cfcfcf;font-size:0.98rem;line-height:1.6;
  }

  .content{padding:32px 24px 70px;}

  .grid{
    display:grid;
    grid-template-columns: 340px 1fr;
    gap:24px;
    align-items:start; /* let .right size to its own content instead of stretching to match .left, so position:sticky below has somewhere to stick */
  }
  .grid > div{ min-width:0; } /* let grid tracks shrink below content's natural width (e.g. the wide table) instead of forcing the whole page wider */
  .right{
    position:sticky;
    top:20px;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
  }
  @media (max-width:900px){
    .grid{grid-template-columns:1fr;}
    /* side-by-side sticky only makes sense in the 2-column layout — once the columns
       stack on narrower screens, pin it back into normal document flow */
    .right{ position:static; max-height:none; overflow-y:visible; }
  }

  .panel{
    background:var(--white);
    border:1px solid var(--black);
    border-radius:2px;
    padding:20px 20px 22px;
    margin-bottom:18px;
  }
  .panel h2{
    font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.76rem;text-transform:uppercase;letter-spacing:1.5px;
    color:var(--black);margin:0 0 16px;padding-bottom:10px;
    border-bottom:2px solid var(--black);
  }

  label{
    display:block;font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.68rem;letter-spacing:0.6px;text-transform:uppercase;
    margin:14px 0 6px;color:#333;
  }
  label:first-of-type{margin-top:0;}
  .row2 > div > label{ line-height:1.3; min-height:2.6em; }
  select, input[type=number], input[type=text], input[type=password], input[type=date]{
    width:100%;padding:9px 10px;border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;font-size:0.9rem;background:var(--off-white);color:var(--black);
  }
  select:focus, input:focus{outline:2px solid var(--black);outline-offset:0;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .hint{font-size:0.72rem;color:var(--gray-text);margin-top:5px;line-height:1.5;}

  /* Buyer's card display */
  .board{
    background:var(--near-black);
    color:var(--white);
    border-radius:2px;
    padding:28px 28px 24px;
    margin-bottom:22px;
  }
  .board-top{
    display:flex;justify-content:space-between;align-items:flex-start;
    margin-bottom:4px;flex-wrap:wrap;gap:8px;
    border-bottom:1px solid #3a3a3a;padding-bottom:16px;
  }
  .board-sale{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.5rem;}
  .board-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .share-btn{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.7rem;
    letter-spacing:1px;text-transform:uppercase;color:var(--white);
    background:none;border:1px solid var(--white);border-radius:2px;
    padding:8px 16px;cursor:pointer;flex:none;
  }
  .share-btn:hover{background:var(--white);color:var(--near-black);}
  .share-status{
    font-family:'Inter',sans-serif;font-size:0.74rem;color:#a8a8a8;
    margin-top:14px;min-height:1em;
  }
  .manual-fallback{
    margin-top:14px;padding-top:14px;border-top:1px solid #3a3a3a;
  }
  .manual-fallback-label{
    font-family:'Inter',sans-serif;font-size:0.72rem;color:#8a8a8a;margin-bottom:6px;line-height:1.4;
  }
  #manualCopyBox{
    width:100%;min-height:90px;resize:vertical;
    background:#0d0d0d;color:var(--white);border:1px solid #3a3a3a;border-radius:2px;
    font-family:'Inter',sans-serif;font-size:0.8rem;line-height:1.5;padding:10px;
  }
  .cards{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:16px;
    background:#3a3a3a;
  }
  .card{
    background:var(--near-black);
    padding:16px 12px 14px;
    text-align:center;
  }
  .card .wt{font-family:'Archivo',sans-serif;font-weight:600;font-size:0.9rem;color:#cfcfcf;}
  .card .price{
    font-family:'Archivo',sans-serif;font-weight:800;color:var(--white);font-size:1.7rem;margin:6px 0 2px;
  }
  .card .cwt{font-family:'Archivo',sans-serif;font-weight:700;color:#8a8a8a;font-size:0.62rem;text-transform:uppercase;letter-spacing:1px;}
  .empty{color:#8a8a8a;font-family:'Inter',sans-serif;font-size:0.85rem;padding:10px 0;}

  table{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;font-size:0.78rem;}
  th{
    text-align:right;font-family:'Archivo',sans-serif;font-weight:700;color:var(--black);text-transform:uppercase;
    font-size:0.62rem;letter-spacing:0.5px;padding:8px 8px;border-bottom:2px solid var(--black);
    white-space:normal;line-height:1.3;vertical-align:bottom;
  }
  th:first-child, td:first-child{text-align:left;}
  td{text-align:right;padding:8px 8px;border-bottom:1px solid var(--gray-line);white-space:nowrap;}
  /* The Breakeven Detail packs 15 columns — slightly tighter cells so the whole table
     fits the right column without a horizontal slider on ordinary desktop widths. */
  #detailTable th, #detailTable td{ padding:8px 5px; }
  tr:hover td{background:var(--off-white);}
  .neg{color:var(--neg);font-weight:600;}
  .pos{color:var(--pos);font-weight:600;}

  .footnote{font-size:0.74rem;color:var(--gray-text);line-height:1.6;margin-top:6px;}

  .panel-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .panel-head-row h2{margin:0;}
  .download-btn{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.7rem;
    letter-spacing:1px;text-transform:uppercase;color:var(--black);
    background:none;border:1px solid var(--black);border-radius:2px;
    padding:8px 16px;cursor:pointer;flex:none;
  }
  .download-btn:hover{background:var(--black);color:var(--white);}
  .print-header{display:none;}
  #printArea{display:none;}
  .table-scroll{overflow-x:auto;}
  .warn{
    background:var(--black);color:var(--white);border-radius:2px;
    padding:12px 16px;font-size:0.8rem;margin-bottom:0;line-height:1.5;
  }
  .warn strong{font-family:'Archivo',sans-serif;letter-spacing:0.5px;}

  .basis-block{
    margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-line);
  }
  .basis-stepper{
    display:flex;align-items:stretch;gap:6px;margin-top:4px;
  }
  .basis-stepper input{text-align:center;font-weight:700;}
  .dollar-input-wrap{
    flex:1;display:flex;align-items:center;justify-content:center;gap:2px;
    border:1px solid var(--gray-line);border-radius:2px;background:var(--off-white);
  }
  .dollar-input-wrap .dollar-prefix{ font-family:'Archivo',sans-serif;font-weight:800;font-size:1.3rem;color:var(--black); }
  .basis-stepper .dollar-input-wrap input{
    border:none;background:none;padding:9px 2px;width:auto;max-width:90px;text-align:left;
  }
  #targetProfit{
    font-family:'Archivo',sans-serif !important;font-weight:800 !important;font-size:1.3rem !important;
  }
  .step-btn{
    width:38px;flex:0 0 38px;border:1px solid var(--black);border-radius:2px;background:var(--white);
    font-family:'Archivo',sans-serif;font-size:1.1rem;font-weight:700;color:var(--black);
    cursor:pointer;line-height:1;
  }
  .step-btn:hover{background:var(--black);color:var(--white);}
  .step-btn:active{transform:translateY(1px);}

  /* Searchable checkbox multi-select (Source/Region/Buyer/Feedyard filters) */
  .multiselect{ position:relative; }
  .multiselect-toggle{
    width:100%;text-align:left;padding:9px 26px 9px 10px;border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;font-size:0.9rem;background:var(--off-white);color:var(--black);
    cursor:pointer;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .multiselect-toggle::after{
    content:'▾';position:absolute;right:10px;top:50%;transform:translateY(-50%);
    font-size:0.7rem;color:var(--gray-text);
  }
  .multiselect-panel{
    display:none;flex-direction:column;position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:260px;
    background:var(--white);border:1px solid var(--black);border-radius:2px;
    padding:10px;box-shadow:0 4px 14px rgba(0,0,0,0.18);max-height:320px;
  }
  .multiselect-panel.open{ display:flex; }
  .multiselect-search{
    width:100%;padding:7px 8px;border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;font-size:0.85rem;margin-bottom:8px;background:var(--off-white);color:var(--black);
  }
  .multiselect-actions{ display:flex;gap:8px;margin-bottom:8px;flex:0 0 auto; }
  .multiselect-actions button{
    flex:1;font-family:'Archivo',sans-serif;font-weight:700;font-size:0.62rem;letter-spacing:0.4px;
    text-transform:uppercase;border:1px solid var(--black);border-radius:2px;background:var(--white);
    padding:6px 4px;cursor:pointer;
  }
  .multiselect-actions button:hover{ background:var(--black);color:var(--white); }
  .multiselect-list{ overflow-y:auto; }
  .multiselect-option{
    display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:0.82rem;
    font-family:'Inter',sans-serif;cursor:pointer;
  }
  .multiselect-option:hover{ background:var(--off-white); }
  .multiselect-option .ms-check{
    width:16px;flex:0 0 16px;text-align:center;font-weight:700;color:var(--black);visibility:hidden;
  }
  .multiselect-option.checked .ms-check{ visibility:visible; }
  .multiselect-option.checked .ms-label{ font-weight:600; }
  .multiselect-option .ms-label{ overflow-wrap:anywhere; }

  .location-search-wrap{ position:relative; }
  .location-suggestions{
    display:none;position:absolute;z-index:20;top:calc(100% + 2px);left:0;right:0;
    background:var(--white);border:1px solid var(--black);border-radius:2px;
    max-height:220px;overflow-y:auto;box-shadow:0 4px 14px rgba(0,0,0,0.18);
  }
  .location-suggestions.open{ display:block; }
  .location-suggestion{
    padding:8px 10px;font-family:'Inter',sans-serif;font-size:0.85rem;cursor:pointer;
  }
  .location-suggestion:hover{ background:var(--off-white); }

  /* Advanced Filters: toggle checklist + the (hidden-until-toggled) controls it reveals */
  .filter-toggle-list{
    display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:12px;
  }
  .filter-toggle-list label{
    display:flex;align-items:center;gap:6px;margin:0;font-weight:600;text-transform:none;
    letter-spacing:0;font-size:0.8rem;color:var(--black);cursor:pointer;
  }
  .filter-toggle-list input{ width:auto;margin:0; }
  .adv-filter-row{ display:none;margin-top:14px; }
  .adv-filter-row.on{ display:block; }
  .adv-filter-row label:first-of-type{ margin-top:0; }

  .settings-toggle{
    background:none;border:none;color:var(--black);font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.72rem;letter-spacing:0.4px;text-decoration:underline;cursor:pointer;padding:0;margin-top:12px;
  }
  .settings-panel{display:none;}
  .settings-panel.open{display:block;}

  .delete-feedyard-btn{
    background:none;border:none;color:var(--gray-text);cursor:pointer;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.3px;
  }
  .delete-feedyard-btn:hover{ color:var(--neg); }

  /* Transposed lot viewer: metrics run down a fixed label rail on the left, one column
     per lot scrolling horizontally beside it. The rail is its own table (not a sticky
     column - position:sticky inside this nested scroll container hit a Chrome
     compositing bug that blank-painted the whole page); fixed row heights keep the two
     tables aligned. */
  .lot-flip{
    display:flex;align-items:flex-start;border:1px solid var(--gray-line);border-radius:2px;
    margin-top:8px;background:var(--white);overflow:hidden;
  }
  .lot-flip-scroll{ overflow-x:auto;flex:1 1 auto;min-width:0; }
  .lot-table{
    width:auto; /* override the global table{width:100%} — the label rail must hug its content */
    border-collapse:collapse;font-family:'Inter',sans-serif;font-size:0.72rem;white-space:nowrap;
  }
  .lot-table td{
    height:30px;padding:0 10px;border-bottom:1px solid var(--gray-line);
    text-align:right;vertical-align:middle;
  }
  .lot-flip-labels{ flex:0 0 auto;border-right:2px solid var(--black); }
  .lot-flip-labels td{
    background:var(--black);color:var(--white);text-align:left;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.62rem;text-transform:uppercase;
    letter-spacing:0.5px;cursor:pointer;user-select:none;border-bottom:1px solid #3a3a3a;
  }
  .lot-table .lot-outlier{ color:var(--neg);font-weight:700; }
  .lot-table .lot-outlier-good{ color:var(--pos);font-weight:700; }
  /* Blend-average column: locked beside the labels, visually part of the rail but
     readable as data — the yardstick each lot column gets compared against. */
  .lot-flip-labels td.lot-avg{
    background:var(--off-white);color:var(--black);cursor:default;
    font-family:'Inter',sans-serif;font-weight:700;font-size:0.72rem;
    text-transform:none;letter-spacing:0;text-align:right;
    border-bottom:1px solid var(--gray-line);
  }
  .lot-x-btn{
    background:none;border:1px solid var(--gray-line);border-radius:2px;color:var(--neg);
    font-size:0.7rem;line-height:1;padding:3px 7px;cursor:pointer;
  }
  .lot-x-btn:hover{ background:var(--neg);color:var(--white);border-color:var(--neg); }

  .rate-loc-list{
    max-height:200px;overflow-y:auto;border:1px solid var(--gray-line);border-radius:2px;
    background:var(--off-white);padding:8px 10px;margin-top:6px;
  }
  .rate-loc-list label{
    display:flex;align-items:center;gap:8px;margin:0 0 4px;
    font-family:'Inter',sans-serif;font-weight:400;font-size:0.8rem;
    text-transform:none;letter-spacing:0;color:var(--black);cursor:pointer;
  }
  .rate-loc-list input[type="checkbox"]{ width:auto;margin:0;accent-color:var(--black); }
  .rate-loc-list .rate-loc-current{ font-weight:700; }

  .save-profile-btn{
    background:var(--black);color:var(--white);border:1px solid var(--black);border-radius:2px;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.4px;
    padding:6px 12px;cursor:pointer;
  }
  .save-profile-btn:hover{ background:var(--white);color:var(--black); }
  .delete-profile-btn{
    background:none;border:none;padding:0;color:var(--gray-text);cursor:pointer;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.4px;
  }
  .delete-profile-btn:hover{ color:var(--neg); }

  .research-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px; }
  .research-stat{ background:var(--off-white);border:1px solid var(--gray-line);border-radius:2px;padding:8px 10px; }
  .research-stat .rs-label{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.54rem;
    text-transform:uppercase;letter-spacing:0.3px;color:var(--gray-text);
  }
  .research-stat .rs-value{ font-family:'Archivo',sans-serif;font-weight:800;font-size:1rem;color:var(--black);margin-top:2px; }
  @media (max-width:600px){
    .research-grid{ grid-template-columns:repeat(2,1fr); }
  }
  .settings-row{
    display:grid;grid-template-columns:1fr 90px 1fr;gap:8px;align-items:center;
    margin-bottom:6px;
  }
  .settings-row input, .settings-row select{
    padding:5px 6px;font-size:0.74rem;border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;background:var(--off-white);
  }
  .settings-row .period-label{
    font-size:0.76rem;font-family:'Inter',sans-serif;font-weight:600;color:#333;
  }
  .settings-head{
    display:grid;grid-template-columns:1fr 90px 1fr;gap:8px;
    font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.6rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray-text);margin-bottom:6px;
  }

  .futures-row{
    display:grid;grid-template-columns:1fr 90px;gap:8px;align-items:center;
    margin-bottom:6px;font-size:0.78rem;font-family:'Inter',sans-serif;font-weight:500;color:#333;
  }
  .futures-row input{padding:5px 6px;font-size:0.78rem;}

  .ration-block{ margin-top:16px; padding-top:14px; border-top:1px solid var(--gray-line); }
  .ration-block:first-of-type{ margin-top:14px; }
  .ration-block-title{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.72rem;
    text-transform:uppercase;letter-spacing:0.6px;color:#333;margin-bottom:8px;
  }
  .ingredient-head{
    display:grid;grid-template-columns:1fr 34px 38px 42px 14px;gap:4px;
    font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.56rem;text-transform:uppercase;letter-spacing:0.3px;color:var(--gray-text);margin-bottom:5px;
  }
  .ingredient-row{
    display:grid;grid-template-columns:1fr 34px 38px 42px 14px;gap:4px;align-items:center;
    margin-bottom:5px;min-width:0;
  }
  .ingredient-row input{
    min-width:0;width:100%;
    padding:4px 3px;font-size:0.68rem;border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;background:var(--off-white);
  }
  .ingredient-row input[type=number]::-webkit-outer-spin-button,
  .ingredient-row input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0;
  }
  .ingredient-row input[type=number]{
    -moz-appearance:textfield;appearance:textfield;
  }
  .ingredient-row input[type=text]{ text-align:left; }
  .ingredient-row input[type=number]{ text-align:right; }
  .ingredient-row .rm-btn{
    background:none;border:none;color:#b6ab8f;cursor:pointer;font-size:0.9rem;line-height:1;padding:0;
  }
  .ingredient-row .rm-btn:hover{ color:var(--neg); }

  .feedyard-head{
    display:grid;grid-template-columns:44px 1.1fr 1.8fr 0.9fr 0.5fr 40px 1.1fr 0.9fr 40px 40px 24px;gap:6px;
    font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.6rem;text-transform:uppercase;letter-spacing:0.3px;color:var(--gray-text);margin-bottom:16px;
    min-width:910px;
  }
  .feedyard-row{
    display:grid;grid-template-columns:44px 1.1fr 1.8fr 0.9fr 0.5fr 40px 1.1fr 0.9fr 40px 40px 24px;gap:6px;align-items:center;
    margin-bottom:14px;min-width:910px;
  }
  .feedyard-row .icon-link{
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--gray-line);border-radius:2px;background:var(--off-white);
    height:100%;min-height:34px;text-decoration:none;font-size:1rem;
  }
  .feedyard-row .icon-link:hover{ background:var(--black); }
  .feedyard-row .icon-link.disabled{ pointer-events:none;opacity:0.3; }
  .feedyard-row input{
    min-width:0;width:100%;
    padding:6px 6px;font-size:0.76rem;border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;background:var(--off-white);color:var(--black);
  }
  .feedyard-row .text-btn{
    border:1px solid var(--black);border-radius:2px;background:var(--white);color:var(--black);
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.6rem;text-transform:uppercase;
    letter-spacing:0.3px;padding:6px 2px;cursor:pointer;
  }
  .feedyard-row .text-btn:hover{ background:var(--black);color:var(--white); }
  .feedyard-row .rm-btn{
    background:none;border:none;color:#b6ab8f;cursor:pointer;font-size:0.9rem;line-height:1;padding:0;
  }
  .feedyard-row .rm-btn:hover{ color:var(--neg); }

  .avail-pen-head{
    display:grid;grid-template-columns:22px 1.3fr 0.6fr 0.8fr 1fr 0.9fr 24px;gap:6px;
    font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.6rem;text-transform:uppercase;letter-spacing:0.3px;color:var(--gray-text);margin-bottom:6px;
    min-width:620px;
  }
  .avail-pen-row{
    display:grid;grid-template-columns:22px 1.3fr 0.6fr 0.8fr 1fr 0.9fr 24px;gap:6px;align-items:center;
    margin-bottom:6px;min-width:620px;font-family:'Inter',sans-serif;font-size:0.82rem;
    padding:6px 0;border-bottom:1px solid var(--gray-line);
  }
  .avail-pen-row.dragging{ opacity:0.4; }
  .avail-pen-total{
    font-weight:700;border-bottom:none;border-top:2px solid var(--black);
    font-family:'Archivo',sans-serif;
  }

  /* Shipping Schedule table */
  .ship-head{
    display:grid;grid-template-columns:1.2fr 70px 70px 0.9fr 100px 140px 90px 24px 24px;gap:6px;
    font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.56rem;text-transform:uppercase;letter-spacing:0.3px;color:var(--gray-text);
    margin-bottom:6px;border-bottom:2px solid var(--black);padding-bottom:6px;
    min-width:910px;
  }
  .ship-row{
    display:grid;grid-template-columns:1.2fr 70px 70px 0.9fr 100px 140px 90px 24px 24px;gap:6px;align-items:center;
    margin-bottom:6px;min-width:910px;font-family:'Inter',sans-serif;font-size:0.82rem;
    padding:4px 0;border-bottom:1px solid var(--gray-line);
  }
  .ship-row .ship-select{
    width:18px;height:18px;justify-self:center;cursor:pointer;accent-color:var(--black);
  }
  .ship-row input{
    min-width:0;width:100%;padding:6px 6px;font-size:0.78rem;
    border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;background:var(--off-white);color:var(--black);
  }
  .ship-total{
    font-weight:700;border-bottom:none;border-top:2px solid var(--black);
    font-family:'Archivo',sans-serif;
  }

  .upload-btn{
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--black);border-radius:2px;background:var(--white);
    color:var(--black);font-family:'Archivo',sans-serif;font-weight:700;font-size:0.72rem;
    text-transform:uppercase;letter-spacing:0.4px;padding:10px 16px;cursor:pointer;
    line-height:1;text-align:center;
    margin:0; /* the global form-label margin (14px top) skews these out of line otherwise */
  }
  .upload-btn:hover{ background:var(--black);color:var(--white); }
  .avail-pen-row .drag-handle{
    cursor:grab;color:var(--gray-text);font-size:0.9rem;user-select:none;text-align:center;
  }
  .avail-pen-row .rm-btn{
    background:none;border:none;color:#b6ab8f;cursor:pointer;font-size:0.9rem;line-height:1;padding:0;
  }
  .avail-pen-row .rm-btn:hover{ color:var(--neg); }
  .avail-pen-row .avail-notes-input{
    min-width:0;width:100%;padding:5px 6px;font-size:0.8rem;
    border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;background:var(--off-white);color:var(--black);
  }

  .pen-feedyard-group{ margin-top:18px;padding-top:14px;border-top:1px solid var(--gray-line); }
  .pen-feedyard-group:first-child{ margin-top:0;padding-top:0;border-top:none; }
  .pen-feedyard-group .panel-head-row{ margin-bottom:10px; }
  .pen-feedyard-group .feedyard-name-wrap{ display:flex;align-items:center;gap:8px; }
  .pen-feedyard-group .feedyard-name-input{
    border:none;background:none;padding:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:0.72rem;
    text-transform:uppercase;letter-spacing:0.6px;color:#333;width:auto;min-width:120px;
  }
  .pen-feedyard-group .edit-feedyard-name-btn{
    background:none;border:none;color:var(--gray-text);cursor:pointer;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.3px;
  }
  .pen-feedyard-group .edit-feedyard-name-btn:hover{ color:var(--black); }
  .pen-feedyard-group .delete-feedyard-btn{
    background:none;border:none;color:var(--gray-text);cursor:pointer;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.3px;
  }
  .pen-feedyard-group .delete-feedyard-btn:hover{ color:var(--neg); }
  .pen-row-head{
    display:grid;grid-template-columns:90px 90px 1fr 150px 24px;gap:6px;
    font-family:'Archivo',sans-serif;font-weight:700;
    font-size:0.56rem;text-transform:uppercase;letter-spacing:0.3px;color:var(--gray-text);margin-bottom:5px;
    min-width:520px;
  }
  .pen-row{
    display:grid;grid-template-columns:90px 90px 1fr 150px 24px;gap:6px;align-items:center;
    margin-bottom:5px;min-width:520px;
  }
  .pen-row input{
    min-width:0;width:100%;
    padding:6px 6px;font-size:0.76rem;border:1px solid var(--gray-line);border-radius:2px;
    font-family:'Inter',sans-serif;background:var(--off-white);color:var(--black);
  }
  .pen-row .rm-btn{
    background:none;border:none;color:#b6ab8f;cursor:pointer;font-size:0.9rem;line-height:1;padding:0;
  }
  .pen-row .rm-btn:hover{ color:var(--neg); }

  .ration-total{
    font-family:'Space Mono','Inter',monospace;font-size:0.74rem;color:#333;
    margin-top:8px;padding-top:8px;border-top:1px solid var(--gray-line);line-height:1.6;
  }
  .ration-total .warn-inline{ color:var(--neg); font-weight:600; }
  .ration-total .result{ font-weight:700; font-size:0.82rem; }

  .brand-footnote{
    font-size:0.7rem;color:var(--gray-text);text-align:center;padding:18px 24px 0;line-height:1.6;
  }

  .scroll-hint{
    display:none;
    font-family:'Inter',sans-serif;font-size:0.7rem;color:var(--gray-text);
    margin-bottom:6px;
  }

  @media (max-width:600px){
    /* iOS Safari auto-zooms the page when a focused input's font is under 16px — keep every
       editable field at 16px on phones so tapping into one doesn't jolt the whole layout. */
    input, select, textarea{ font-size:16px !important; }
    .basis-stepper input{ font-size:16px !important; }

    .topbar{ padding:12px 16px; }
    .content{ padding:20px 14px 50px; }
    .hero{ padding:36px 16px 32px; }
    .hero-logo-img{ height:auto; width:min(320px, 85vw); margin-bottom:16px; }
    .brand-logo-img{ height:22px; }
    .hero-desc{ font-size:0.9rem; }

    .panel{ padding:16px 14px 18px; }
    .board{ padding:18px 16px 16px; }
    .board-sale{ font-size:1.2rem; }
    .card .price{ font-size:1.35rem; }

    .row2{ grid-template-columns:1fr 1fr; gap:8px; }
    .settings-row, .settings-head{ grid-template-columns:1fr 64px 1fr; gap:5px; font-size:0.68rem; }
    .settings-row .period-label{ font-size:0.68rem; }
    .settings-row select{ font-size:12px !important; padding:4px; }

    table{ font-size:0.72rem; }
    th, td{ padding:7px 6px; }

    .scroll-hint{ display:block; }
  }

  /* #printArea is a plain body-level div, deliberately outside .right's sticky/scroll
     ancestry — printing #detailTable in place there caused Chrome to emit blank extra
     pages, so the button clones the header + table into this isolated container instead. */
  @media print{
    @page{ size: landscape; margin: 12mm; }

    body > *:not(#printArea){ display:none !important; }
    #printArea{ display:block !important; }

    #printArea .print-header{
      display:flex; flex-direction:column; align-items:flex-start; gap:6px;
      margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--black);
    }
    #printArea .print-label{
      font-family:'Archivo',sans-serif;font-weight:700;font-size:0.76rem;
      text-transform:uppercase;letter-spacing:1.5px;color:var(--black);
    }
    /* Explicit width + flex:none: an image given only a height inside a flex column can
       be laid out at zero width by some print engines (iOS Safari especially), which is
       how this logo kept vanishing from the PDF while the rest of the header printed.
       print-color-adjust keeps the artwork from being dropped by "background graphics
       off" style print settings. */
    #printArea .print-logo{
      height:32px; width:auto; max-width:none; flex:0 0 auto; display:block;
      -webkit-print-color-adjust:exact; print-color-adjust:exact;
    }
    #printArea .print-sub{ font-family:'Inter',sans-serif; font-size:0.8rem; color:#333; }

    #printArea table{ width:100%; font-size:8.5px; }
    #printArea th, #printArea td{ padding:4px 5px; }

    #printArea .print-ration-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
    #printArea .print-ration-title{
      font-family:'Archivo',sans-serif;font-weight:700;font-size:0.72rem;
      text-transform:uppercase;letter-spacing:0.6px;color:#333;margin-bottom:8px;
    }
    #printArea .print-ration-total{
      font-family:'Inter',sans-serif;font-size:9.5px;color:#333;
      margin-top:8px;padding-top:8px;border-top:1px solid var(--gray-line);line-height:1.6;
    }
  }