/* Breadwinner v3 prototype: fssai.html page-only styles. c-data-table and c-definition-list
   live in v3-port.css; this file only widens the reading column for the four-column table. */

.fssai-sec h2:focus-visible,
.fssai-sec h2:focus {
  outline: 2px solid var(--focus-ink);
  outline-offset: 4px;
}

/* This page's main reading column is the only place in the prototype that puts .wrap and
   .column on the same element. Both set `width` at the same (0,0,1,0) specificity, so
   .column's `width: 100%` (it loads after v3.css in the cascade) always wins over .wrap's
   gutter formula -- below the 54rem cap, every heading, paragraph and table here sat edge to
   edge with no side margin at all. A two-class selector outranks either single-class rule on
   specificity alone, so this restores the gutter without touching v3.css or v3-port.css. */
main .wrap.column {
  width: min(100% - 2 * (var(--gutter) + var(--art-gutter)), var(--page-max));
}

/* c-data-table's auto column layout (v3-port.css #15) let "Unit code" / "Location" /
   "Licensee" / "FSSAI licence no." take their share first and left the long address column
   whatever was left -- at 768-1366px that was under half the table, wrapping a 105-165
   character address to 4-6 lines. Give the address/premises cell its own full-width row
   below the compact fields instead, the same per-row CSS grid process.css's loaf-numbers
   ledger uses (.pr-num): one <tr> stays one semantic row (role="row" is already on it), it
   just reflows as two stacked grid lines. */
@media (min-width: 600px) {
  .fssai-table--mfg thead tr,
  .fssai-table--mfg tbody tr {
    display: grid;
    /* Each <tr> is its own grid context, so a content-sized ("max-content") track could
       settle at a different width per row. Fix "code" and "lic" and let "loc" take the
       (always-identical) remainder, so the three columns line up row to row and under the
       header. */
    grid-template-columns: 5.5rem minmax(8rem, 1fr) 10rem;
    grid-template-areas:
      "code loc  lic"
      "addr addr addr";
    column-gap: var(--s-md);
  }
  .fssai-table--mfg th:nth-child(1), .fssai-table--mfg td:nth-child(1) { grid-area: code; }
  .fssai-table--mfg th:nth-child(2), .fssai-table--mfg td:nth-child(2) { grid-area: loc; }
  .fssai-table--mfg th:nth-child(3), .fssai-table--mfg td:nth-child(3) { grid-area: addr; padding-top: var(--s-2xs); border-bottom: var(--line-w) solid var(--rule); }
  .fssai-table--mfg th:nth-child(4), .fssai-table--mfg td:nth-child(4) { grid-area: lic; }
  .fssai-table--mfg thead th:nth-child(3) { border-bottom: var(--line-w) solid var(--ink-text); }
  .fssai-table--mfg th:nth-child(1), .fssai-table--mfg td:nth-child(1),
  .fssai-table--mfg th:nth-child(2), .fssai-table--mfg td:nth-child(2),
  .fssai-table--mfg th:nth-child(4), .fssai-table--mfg td:nth-child(4) { border-bottom: 0; }

  .fssai-table--mkt thead tr,
  .fssai-table--mkt tbody tr {
    display: grid;
    /* "lic" fixed to the same width as the manufacturing table's, so the header row (whose
       longer "FSSAI licence no." label would otherwise size its own max-content track wider
       than the digits below it) lines up with the one data row. */
    grid-template-columns: minmax(10rem, 1fr) 10rem;
    grid-template-areas:
      "licensee lic"
      "premises premises";
    column-gap: var(--s-md);
  }
  .fssai-table--mkt th:nth-child(1), .fssai-table--mkt td:nth-child(1) { grid-area: licensee; }
  .fssai-table--mkt th:nth-child(2), .fssai-table--mkt td:nth-child(2) { grid-area: premises; padding-top: var(--s-2xs); border-bottom: var(--line-w) solid var(--rule); }
  .fssai-table--mkt th:nth-child(3), .fssai-table--mkt td:nth-child(3) { grid-area: lic; }
  .fssai-table--mkt thead th:nth-child(2) { border-bottom: var(--line-w) solid var(--ink-text); }
  .fssai-table--mkt th:nth-child(1), .fssai-table--mkt td:nth-child(1),
  .fssai-table--mkt th:nth-child(3), .fssai-table--mkt td:nth-child(3) { border-bottom: 0; }

  .fssai-table--mfg tbody tr:last-child td:nth-child(3),
  .fssai-table--mkt tbody tr:last-child td:nth-child(2) { border-bottom: 0; }
}

/* Below 600px the shared stacked layout (v3-port.css #15) prints each row's data-label
   caption inline before its value, so the value shares its first line with a ~9rem caption --
   on a column that's only ~300px wide that cost a whole extra wrap. Put the caption on its
   own line for every cell (one style for both tables, matching Company details) so
   the value starts fresh at the column's full width. */
@media (max-width: 599.98px) {
  /* Selectors carry the shared rule's weight (v3-port.css #15, two classes and a :not) so they win. */
  .ledger-table.fssai-table--mfg:not(.ledger-table--dense) td[data-label]::before,
  .ledger-table.fssai-table--mkt:not(.ledger-table--dense) td[data-label]::before {
    display: block;
    min-width: 0;
    padding-right: 0;
    margin-bottom: var(--s-2xs);
  }
  .ledger-table.fssai-table--mfg:not(.ledger-table--dense) td + td,
  .ledger-table.fssai-table--mkt:not(.ledger-table--dense) td + td {
    margin-top: var(--s-sm);
  }
}