:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1c2420;
  background: #f5f7f6;
  --ink: #1c2420;
  --field: #254f22;
  --soil: #254f22;
  --paper: #f5f7f6;
  --surface: #fff;
  --surface-variant: #eef1ef;
  --line: #68746c;
  --line-soft: #d9dfdb;
  --bs-primary: #254f22;
  --bs-primary-rgb: 37, 79, 34;
  --bs-secondary: #4b6253;
  --bs-secondary-rgb: 75, 98, 83;
  --bs-body-color: #1c2420;
  --bs-body-bg: #f5f7f6;
  --bs-border-color: #d9dfdb;
  --bs-link-color: #254f22;
  --bs-link-hover-color: #1c3d1a;
  --bs-focus-ring-color: rgba(37, 79, 34, .35);
  --bs-border-radius: 6px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
.app-page .btn-primary { --bs-btn-bg: var(--field); --bs-btn-border-color: var(--field); --bs-btn-hover-bg: #1c3d1a; --bs-btn-hover-border-color: #1c3d1a; --bs-btn-active-bg: #1c3d1a; --bs-btn-active-border-color: #1c3d1a; --bs-btn-focus-shadow-rgb: 37, 79, 34; }
.app-page .btn-outline-secondary { --bs-btn-color: #45534b; --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: #e7ede9; --bs-btn-hover-border-color: var(--field); --bs-btn-active-color: var(--ink); --bs-btn-active-bg: #e7ede9; --bs-btn-active-border-color: var(--field); --bs-btn-focus-shadow-rgb: 37, 79, 34; }
.site-header {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 1rem;
  padding: .75rem 2rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { display: inline-flex; min-height: 48px; align-items: center; }
.brand-wordmark { display: block; width: 172px; height: auto; }
.brand-descriptor { color: #45534b; font-size: .85rem; }
.header-actions { display: flex; margin-left: auto; align-items: center; gap: .75rem; }
.language-selector { align-items: center; margin: 0; }
.app-shell--admin { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.app-navigation {
  display: flex;
  min-height: calc(100vh - 73px);
  flex-direction: column;
  gap: .25rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--line-soft);
  background: var(--surface);
}
.app-navigation a { min-height: 48px; display: flex; align-items: center; padding: .5rem .75rem; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.app-navigation a[aria-current="page"] { border-left-color: var(--field); background: #e8f1e9; font-weight: 700; }
.app-navigation a:hover { background: var(--surface-variant); color: var(--ink); }
.app-navigation .nav-group-label { padding: .75rem .75rem .25rem; color: #45534b; font-size: .875rem; font-weight: 600; }
.app-navigation .nav-section, .app-navigation .nav-group { display: flex; flex-direction: column; gap: .25rem; }
.app-navigation .nav-child { padding-left: 1.75rem; }
.master-page .master-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.master-page .master-heading h1 { margin: 0; }
.master-page .btn, .master-page button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; }
.master-page .btn:focus-visible, .master-page a:focus-visible, .master-page input:focus-visible, .master-page button:focus-visible { outline: 3px solid var(--field); outline-offset: 2px; box-shadow: none; }
.master-page .encoding-confirm label { display: inline-flex; min-height: 48px; align-items: center; gap: .5rem; }
.master-page { --bs-link-color-rgb: 37, 79, 34; --bs-link-hover-color-rgb: 28, 61, 26; --bs-code-color: var(--ink); }
.master-page .table-scroll {
  /* Positioned so visually hidden labels inside the scroll region cannot widen the page. */
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  /* Edge shadows show that the region scrolls horizontally; they disappear at either end. */
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(245, 247, 246, 0)) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgba(245, 247, 246, 0)) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28, 36, 32, .25), transparent) left center / .75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 36, 32, .25), transparent) right center / .75rem 100% no-repeat scroll;
}
.master-page .wrap-cell { min-width: 14rem; max-width: 28rem; white-space: normal; overflow-wrap: anywhere; }
.master-page .check-cell { min-width: 11rem; max-width: 16rem; }
@media (max-width: 760px) {
  /* Narrow screens stack each mapping row so its destination choice never sits in a horizontal scroll. */
  .master-page .stack-table, .master-page .stack-table tbody, .master-page .stack-table tr, .master-page .stack-table th, .master-page .stack-table td { display: block; width: 100%; max-width: none; min-width: 0; }
  .master-page .table-scroll table.stack-table { width: 100%; min-width: 0; }
  .master-page .stack-table caption { display: block; padding: .5rem .75rem; }
  .master-page .stack-table td.number { text-align: left; }
  .master-page .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .master-page .stack-table td[data-label]::before { content: attr(data-label); display: block; color: #45534b; font-size: .875rem; font-weight: 600; }
  .master-page .stack-table td, .master-page .stack-table th { border-bottom: 0; padding: .35rem .75rem; }
  .master-page .stack-table tr { border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .master-page .stack-table select { width: 100%; }
}
.master-page .table-scroll table { width: max-content; min-width: 100%; }
/* Master import diff (#936): the table fits its panel and long check-result notices wrap inside their cell instead of running past the scroll edge. Contents and check result share the width left by the fixed columns; below the minimum width the table scrolls inside .table-scroll. */
.master-page .table-scroll table.master-diff-table { width: 100%; min-width: 40rem; table-layout: fixed; }
.master-page .master-diff-table th, .master-page .master-diff-table td { overflow-wrap: anywhere; }
.master-page .master-diff-table .wrap-cell { min-width: 0; max-width: none; }
/* The 小分類 label-fit indicator wraps inside its cell; its nowrap parts would otherwise overflow a fixed column and cover the next one. */
.master-page .master-diff-table .label-fit > * { min-width: 0; }
.master-page .master-diff-table .label-fit__counts, .master-page .master-diff-table .label-fit__kept, .master-page .master-diff-table .label-fit__width { white-space: normal; }
.master-page .master-diff-table .master-diff-col-approve { width: 5.75rem; }
.master-page .master-diff-table .master-diff-col-row { width: 4.5rem; }
.master-page .master-diff-table .master-diff-col-action { width: 7rem; }
.master-page .master-diff-table .master-diff-col-key { width: 9rem; }
/* The major category tax settings list fills its container and wraps, so the applied rate and 変更 never sit off-screen (#935). */
.master-page .table-scroll table.tax-settings-table { width: 100%; font-size: .875rem; }
.master-page .tax-settings-table th, .master-page .tax-settings-table td { padding: .75rem .5rem; }
/* Headers break only between words, so a Japanese header stays whole while a Korean or English one can wrap. */
.master-page .tax-settings-table th { word-break: keep-all; }
.master-page .tax-settings-table .tax-nowrap { white-space: nowrap; }
.master-page .tax-settings-table td { overflow-wrap: anywhere; }
.master-page caption { caption-side: top; color: var(--ink); font-weight: 600; }
.master-page .status-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.master-page .status-badge { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-weight: 600; }
.master-page .status-badge--error { border-color: #ba1a1a; color: #410002; background: #ffdad6; }
.master-page .status-badge--warning { border-color: #7a5800; color: #261a00; background: #ffe08a; }
.master-page .status-badge--info { border-color: var(--line); color: var(--ink); background: var(--surface-variant); }
.master-page .filter-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.master-page .filter-links a { display: inline-flex; min-height: 48px; align-items: center; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; background: var(--surface); }
.master-page .filter-links a[aria-current="page"] { border-color: var(--field); background: #e8f1e9; font-weight: 700; }
.master-page .row-check { width: 24px; height: 24px; min-height: 24px; }
.master-page .row-select-label { display: inline-flex; min-width: 48px; min-height: 48px; align-items: center; justify-content: center; }
.master-page tr.row-has-error { background: #fff5f4; }
.master-page tr.row-has-error > :first-child { box-shadow: inset 4px 0 0 #ba1a1a; }
.master-page tr.row-has-warning { background: #fff8e1; }
.master-page tr.row-has-warning > :first-child { box-shadow: inset 4px 0 0 #7a5800; }
.master-page .row-flag { font-size: .875rem; }
/* A crop row (#1088) under its product's code row: a text marker, never colour alone. */
.master-page .crop-marker { display: inline-block; padding: 0 .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-variant); font-size: .875rem; font-weight: 600; }
.master-page tr:focus-visible { outline: 3px solid var(--field); outline-offset: -3px; }
.master-page tr:target { outline: 3px solid var(--field); outline-offset: -3px; }
.master-page .diff-before { text-decoration: line-through; color: #45534b; }
.master-page .review-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.master-page .stacked-form { max-width: 760px; }
.master-page fieldset { margin: 0; padding: 0; border: 0; }
.master-page .row-choice { display: flex; min-height: 48px; align-items: center; gap: .5rem; white-space: nowrap; }
.master-page .row-choice input { width: 20px; height: 20px; min-height: 0; }
.master-page .browse-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; align-items: end; }
.master-page .browse-filters label, .master-page .browse-filters input, .master-page .browse-filters select { width: 100%; min-width: 0; }
.app-content { width: 100%; max-width: 1100px; margin: 0 auto; padding: 2rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; padding: 1.25rem; margin-bottom: 1rem; }
.panel h2 { margin-top: 0; }
.panel strong { display: block; font-size: 2rem; }
.panel strong.metric-warning { color: #7a5800; }
.readiness-warning { color: #261a00; }
.readiness-warning strong { color: #7a5800; }
/* A product that cannot be output (#1030) uses the error colour with the ⚠ mark. */
.readiness-warning.readiness-held strong { color: #ba1a1a; }
/* Product tables (#937): the cause of a held product sits on a row spanning the product row.
   Inline-size containment keeps that sentence from sizing or squeezing the columns; sticky keeps it in view when the table scrolls. */
.readiness-table-scroll { position: relative; container-type: inline-size; }
.readiness-table-scroll thead th { white-space: nowrap; }
.readiness-table-scroll th, .readiness-table-scroll td { padding-inline: .5rem; }
.readiness-table-scroll tr.has-readiness-detail > * { border-bottom: 0; }
.readiness-table-scroll tr.readiness-detail > td { padding-top: 0; }
.readiness-detail .readiness-warning { contain: inline-size; position: sticky; left: .5rem; max-width: calc(100cqi - 1rem); }
.readiness-summary .metric-warning { color: #7a5800; font-weight: 600; }
.dashboard-heading { margin-bottom: 1rem; }
.dashboard-heading h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.dashboard-summary { margin: 0 0 1.5rem; border-block: 1px solid var(--line); background: var(--surface); }
.dashboard-summary section { min-height: 104px; padding: 1rem; border-right: 1px solid var(--line-soft); }
.dashboard-summary section:last-child { border-right: 0; }
.dashboard-summary h2 { margin: 0; color: #45534b; font-size: .875rem; font-weight: 600; }
.dashboard-summary strong { display: block; margin-top: .35rem; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.dashboard-summary .metric-warning { color: #7a5800; }
.dashboard-section { margin-bottom: 1.5rem; }
.dashboard-section > h2 { margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--line); font-size: 1rem; font-weight: 600; }
.dashboard-section .btn { width: 100%; min-height: 48px; text-align: left; }
.dashboard-history { margin-bottom: 0; }
.master-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.master-status-card { min-width: 0; padding: .75rem 1rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); }
.master-status-card h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }
.master-status-card h3 a { display: inline-flex; min-height: 48px; align-items: center; color: var(--field); }
.master-status-card a:focus-visible { outline: 3px solid var(--field); outline-offset: 2px; box-shadow: none; }
.master-status-card dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .25rem .75rem; margin: 0; }
.master-status-card dt { color: #45534b; font-size: .875rem; font-weight: 600; }
.master-status-card dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.master-status-card .metric-warning { color: #7a5800; font-weight: 600; }
.master-status-card p { margin-bottom: .75rem; }
.master-status-card .btn { display: inline-flex; width: auto; align-items: center; }
.narrow { max-width: 520px; }
form { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin: .75rem 0; }
label { display: grid; gap: .35rem; }
input, select, button { min-height: 48px; box-sizing: border-box; font: inherit; }
input, select { border: 1px solid var(--line); border-radius: 6px; padding: .5rem; }
button { border: 1px solid var(--field); border-radius: 6px; padding: .5rem 1rem; background: var(--surface); color: var(--field); cursor: pointer; }
.primary { background: var(--field); color: white; }
:focus-visible { outline: 3px solid var(--soil); outline-offset: 2px; }
.error { border-left: 4px solid #ba1a1a; padding: .75rem; color: #410002; background: #ffdad6; }
.message { border-left: 4px solid var(--field); background: var(--surface); padding: .75rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; }
dt { font-weight: 700; }
.stacked-form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.stacked-form > div { min-width: 0; }
.stacked-form label, .stacked-form input, .stacked-form select, .stacked-form button { width: 100%; min-width: 0; max-width: 100%; }
.field-error { color: #ba1a1a; margin: -.35rem 0 .25rem; }
.notice { border-left: 4px solid #7a5800; background: #ffe08a; color: #261a00; padding: .75rem; }
.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem; border-bottom: 1px solid var(--line); text-align: left; }
thead { background: var(--surface-variant); }
.number { text-align: right; font-variant-numeric: tabular-nums; }
.molus-import { min-width: 0; }
.molus-import dl > dd { min-width: 0; }
.molus-import .molus-checksum { overflow-wrap: anywhere; word-break: break-word; }
.molus-import .btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--field); border-radius: 6px; padding: .5rem 1rem; background: var(--surface); color: var(--field); text-decoration: none; }
.molus-import .btn-primary { background: var(--field); color: white; }
.molus-import .btn-outline-secondary { border-color: var(--line); }
.molus-import .btn-outline-danger { border-color: #ba1a1a; color: #ba1a1a; }
.molus-import .molus-import-alert { margin: 1rem 0; padding: .75rem; border-left: 4px solid var(--field); background: #eef5e9; }
.molus-import .alert-danger { border-color: #ba1a1a; color: #410002; background: #ffdad6; }
.molus-import .molus-import-alert p:first-child { margin-top: 0; }
.molus-import .molus-import-alert p:last-child, .molus-import .molus-import-alert ul:last-child { margin-bottom: 0; }
.molus-import .molus-review-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); }
.molus-import .molus-review-table .table { width: max-content; min-width: 100%; }
.molus-import .molus-review-table th { white-space: nowrap; }
.button-link { display: inline-flex; min-height: 48px; align-items: center; box-sizing: border-box; border: 1px solid var(--field); border-radius: 6px; padding: .5rem 1rem; color: var(--field); background: var(--surface); }
.button-link.secondary { border-color: var(--line); }
.action-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.printer-status { border: 1px solid #7a5800; background: #ffe08a; color: #261a00; border-radius: 6px; }
.printer-status summary { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 .75rem; cursor: pointer; font-weight: 700; }
.printer-status summary span { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: #fff; background: #7a5800; }
.printer-status p { margin: 0; padding: 0 .75rem .75rem; }
.product-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.product-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: end; padding: 1rem; background: #fff; border: 1px solid #625f50; border-radius: 8px; }
.product-card h2, .product-card dl { margin: 0; min-width: 0; }
.product-card dl { grid-column: 1; }
.product-card .button-link { grid-column: 2; grid-row: 1 / span 2; justify-content: center; min-width: 6rem; }
.product-search { margin-bottom: 1rem; }
.pagination-nav { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
/* Both columns and the label mock share one 20rem minimum, so the layout fits the content area at 1024 px without page-level overflow (#939). */
.preview-layout { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 520px); gap: 1.5rem; align-items: start; }
.label-preview { min-width: 20rem; overflow: auto; background: white; border: 1px solid #625f50; padding: 2rem; box-sizing: border-box; }
.label-page { position: relative; width: 40mm; height: 40mm; box-sizing: border-box; overflow: hidden; flex: none; color: #000; background: #fff; border: .25mm solid #625f50; font-family: system-ui, sans-serif; }
.shipment-title, .shipment-date, .barcode-text, .base-title, .base-price, .tax-title, .tax-price { position: absolute; white-space: nowrap; }
.shipment-title { left: 6mm; top: .5mm; font-size: 8.5pt; }
.shipment-date { left: 18mm; top: .75mm; font-size: 7.5pt; }
.label-fields { position: absolute; left: 2mm; top: 5mm; width: 36mm; height: 15mm; table-layout: fixed; border: .25mm solid #000; }
.label-fields th, .label-fields td { box-sizing: border-box; height: 4.25mm; padding: .5mm; border: 0; border-bottom: .25mm solid #000; font-size: 5.5pt; line-height: 1; overflow: hidden; white-space: nowrap; }
.label-fields th { width: 9.5mm; border-right: .25mm solid #000; font-weight: 400; }
.label-fields .product-row th, .label-fields .product-row td { height: 6.5mm; border-bottom: 0; }
.label-fields .product-row td { font-size: 7.5pt; }
.barcode-bars { position: absolute; left: 2.2mm; top: 20.5mm; width: 29.2mm; height: 5.5mm; fill: #000; shape-rendering: crispEdges; }
.barcode-text { left: 2.2mm; top: 26mm; width: 29.2mm; height: 2.5mm; text-align: center; font: 5.5pt ui-monospace, monospace; letter-spacing: .35mm; }
.plastic-mark { position: absolute; left: 32mm; top: 20.5mm; width: 6mm; height: 6mm; display: grid; place-items: center; font-size: 4.5pt; }
.plastic-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #000; stroke-width: 10; stroke-linecap: square; stroke-linejoin: round; }
.plastic-mark b { z-index: 1; }
.base-title { left: 4.5mm; top: 28.5mm; font-size: 5pt; font-weight: 700; }
.base-price { left: 2mm; top: 31mm; width: 30mm; height: 8mm; text-align: center; font-size: 15pt; line-height: 8mm; }
.tax-title { left: 25mm; top: 28.5mm; font-size: 4.5pt; }
.tax-price { right: 2mm; top: 31.5mm; width: 11.5mm; height: 6.5mm; text-align: right; font-size: 9.5pt; line-height: 6.5mm; }
.print-pages { display: flex; flex-wrap: wrap; gap: 1rem; }
.destination-page { --bs-body-color: var(--ink); --bs-body-bg: var(--paper); --bs-border-color: var(--line-soft); --bs-secondary-bg: var(--surface-variant); }
.destination-settings { color: var(--ink); }
.destination-settings a { color: var(--field); }
.destination-settings .table { --bs-table-color: var(--ink); --bs-table-bg: var(--surface); --bs-table-striped-color: var(--ink); --bs-table-striped-bg: var(--paper); --bs-table-border-color: var(--line-soft); }
.destination-settings .table thead th { color: var(--ink); background: var(--surface-variant); }
.destination-settings .btn { min-height: 48px; display: inline-flex; align-items: center; }
.destination-settings .btn-outline-secondary { --bs-btn-color: #45534b; --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: #e7ede9; --bs-btn-hover-border-color: var(--field); --bs-btn-active-color: var(--ink); --bs-btn-active-bg: #e7ede9; --bs-btn-active-border-color: var(--field); --bs-btn-focus-shadow-rgb: 37, 79, 34; }
.destination-settings .alert-secondary { --bs-alert-color: var(--ink); --bs-alert-bg: var(--surface-variant); --bs-alert-border-color: var(--line-soft); }
.destination-settings .btn:focus-visible { outline: 3px solid var(--field); outline-offset: 2px; box-shadow: none; }
/* Output check tables (#934, #956): every table title reads before its rows, and every group shares one column grid, so short headers never collapse to one character per line. When the table area is narrower than 40rem (2x zoom, narrow windows) the table switches to automatic layout: the column percentages stay as hints, but no column is squeezed below its narrowest content, so text wraps instead of the table scrolling sideways. */
.readiness-table-wrap { container-type: inline-size; }
.readiness-table { table-layout: fixed; }
.readiness-table caption, .readiness-overview caption { caption-side: top; color: var(--ink); font-weight: 600; }
.readiness-table th, .readiness-table td { overflow-wrap: break-word; }
.readiness-table .readiness-col-row-id { width: 11%; }
.readiness-table .readiness-col-product { width: 15%; }
.readiness-table .readiness-col-producer { width: 13%; }
.readiness-table .readiness-col-major { width: 10%; }
.readiness-table .readiness-col-action { width: 20%; }
/* Upcoming tax-rate changes (#1031): eight columns, so the product and producer columns narrow to leave room for the current and from-date states, whose cause wraps under ⚠ 出力不可; the remaining column is その日から. At 1024 px the MLS ID and each part of the start date still fit on one line; the date may wrap only between 2026年 and 11月13日. */
.readiness-upcoming-table .readiness-col-row-id { width: 11%; }
.readiness-upcoming-table .readiness-col-product { width: 11%; }
.readiness-upcoming-table .readiness-col-producer { width: 10%; }
.readiness-upcoming-table .readiness-col-major { width: 9%; }
.readiness-upcoming-table .readiness-col-now { width: 15%; }
.readiness-upcoming-table .readiness-col-start-date { width: 13%; }
.readiness-upcoming-table .readiness-col-action { width: 15%; }
.readiness-upcoming-table .tax-nowrap { white-space: nowrap; }
.readiness-crop-rate-table .readiness-col-row-id { width: 11%; }
.readiness-crop-rate-table .readiness-col-product { width: 11%; }
.readiness-crop-rate-table .readiness-col-producer { width: 10%; }
.readiness-crop-rate-table .readiness-col-crop { width: 11%; }
.readiness-crop-rate-table .readiness-col-major { width: 12%; }
.readiness-crop-rate-table .readiness-col-rate { width: 12%; }
.readiness-crop-rate-table .readiness-col-action { width: 18%; }
.readiness-crop-rate-table .tax-nowrap { white-space: nowrap; }
@container (max-width: 40rem) { .readiness-table { table-layout: auto; } }
@media (max-width: 760px) { .site-header, .header-actions { flex-wrap: wrap; } .site-header { padding: .75rem 1rem; } .brand-descriptor { display: none; } .app-shell--admin { display: block; } .app-navigation { min-height: 0; flex-direction: row; flex-wrap: wrap; padding: .75rem 1rem; border-right: 0; border-bottom: 1px solid var(--line-soft); } .app-navigation .nav-section, .app-navigation .nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; } .app-navigation .nav-section { flex-basis: 100%; } .app-navigation .nav-group-label { padding: .5rem .75rem; } .app-navigation .nav-child { padding-left: .75rem; } .app-content { padding: 1rem; } .preview-layout { grid-template-columns: 1fr; } .dashboard-summary section:nth-child(2) { border-right: 0; } .dashboard-summary section:nth-child(-n + 2) { border-bottom: 1px solid var(--line-soft); } .label-preview { min-width: 0; } .product-card { grid-template-columns: 1fr; align-items: stretch; } .product-card dl, .product-card .button-link { grid-column: 1; grid-row: auto; } }

/* Device-admin portal (#639) and portal switcher. */
.portal-switcher { display: flex; gap: .25rem; }
.portal-switcher a { display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 6px; color: var(--field); background: var(--surface); }
.portal-switcher a[aria-current="page"] { border-color: var(--field); background: #e5f4ed; font-weight: 700; }
.device-page .device-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; margin-bottom: 1rem; }
.device-page .device-filters > div { display: grid; gap: .25rem; }
.device-page .device-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.device-page .device-filters > .device-filter-check, .device-page .device-filter-check { display: flex; align-items: center; gap: .5rem; min-height: 48px; }
.device-page .device-filter-check input { width: 1.25rem; height: 1.25rem; }
.device-page .device-status { display: inline-block; padding: .125rem .5rem; border: 1px solid currentColor; border-radius: 6px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.device-page .device-status--active { color: #116b55; }
.device-page .device-status--revoked { color: #b42318; }
.device-page .device-status--replaced { color: #405463; }
.device-page .device-status--warning { color: #261a00; background: #ffe08a; border-color: #7a5800; }
/* Error-code severity (#650): text badges, never color alone. */
.device-page .error-severity { display: inline-block; padding: .125rem .5rem; border: 1px solid currentColor; border-radius: 6px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.device-page .error-severity--error { color: #b42318; }
.device-page .error-severity--warning { color: #261a00; background: #ffe08a; border-color: #7a5800; }
.device-page .error-severity--info { color: #405463; }
/* Codes and categories never break inside; at narrow widths the table scrolls instead. */
.device-page .error-code-table .error-code-key { white-space: nowrap; }
.device-page .error-code-table th, .device-page .error-code-table td:nth-child(n+4) { min-width: 8em; }
/* Stuck-state badges and update timeline (#700): each badge has its own text; times and versions never break. */
.device-page .device-issues { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.device-page .device-list-table th { min-width: 5em; }
.device-page .device-issue-cell { min-width: 16em; }
.device-page .update-event-table .update-event-key { white-space: nowrap; }
.device-page .update-event-table th { white-space: nowrap; }
.device-page .update-event-table td:last-child { min-width: 14em; }
.device-page .device-facts { margin: 0; }
.device-page .device-facts dd { margin: 0; overflow-wrap: anywhere; }
/* Per-app unsent history and sync (#759): each value carries its app name. */
.device-page .device-app-counts { display: block; font-size: .875rem; white-space: nowrap; }
.device-page .device-app-counts span { display: block; }
.device-page .device-app-table th, .device-page .device-app-table td { white-space: nowrap; }
.device-page .action-list { grid-auto-flow: column; justify-content: start; }
.device-page button, .device-page .button-link { min-height: 48px; }
.device-page button.danger { border-color: #b42318; background: #b42318; color: #fff; }
.device-page .enrollment-sheet-body { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.device-page .enrollment-qr { margin: 0; text-align: center; }
.device-page .enrollment-qr svg { width: 220px; height: 220px; }
.device-page .enrollment-code { font-size: 1.75rem; letter-spacing: .08em; white-space: nowrap; }
@media print {
  .device-page .site-header, .device-page .app-navigation, .device-page .no-print { display: none; }
  .device-page .app-shell--admin { display: block; }
  .device-page .enrollment-sheet { border: 0; }
}
.device-page code { color: inherit; }
/* Brother label fit indicator (#691): icon and text carry the state; colour only repeats it. */
.label-fit { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem; margin-top: .125rem; font-size: .8125rem; line-height: 1.4; color: #45534b; }
.label-fit__status { padding: 0 .375rem; border: 1px solid var(--line); border-radius: 4px; font-weight: 600; color: var(--ink); background: var(--surface); white-space: nowrap; }
.label-fit--shrinks .label-fit__status { background: var(--surface-variant); }
.label-fit--ellipsis .label-fit__status { border-color: #7a5800; color: #261a00; background: #ffe08a; }
.label-fit__estimate { padding: 0 .25rem; border: 1px dashed var(--line); border-radius: 4px; }
.label-fit__counts, .label-fit__kept, .label-fit__width { white-space: nowrap; }

/* Print history search (#646). */
.history-page .history-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; margin-bottom: 1rem; }
.history-page .history-filters > div { display: grid; grid-template-columns: minmax(0, auto); min-width: 0; max-width: 100%; gap: .25rem; }
/* A long farmer, destination or center name must not widen the page (#925); the open list still shows it in full. */
.history-page .history-filters select { max-width: 100%; }
.history-page .history-filters .field-error { margin: 0; }
.history-page .history-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.history-page .history-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 0 1rem; }
.history-page .nowrap { white-space: nowrap; }
/* Only the history table scrolls, in both directions, so its column headers stay visible (#925). */
.history-page .history-table-scroll { position: relative; max-width: 100%; max-height: 75vh; overflow: auto; }
/* Columns keep their natural width instead of breaking Japanese text one character per line. */
.history-page .history-table-scroll table { width: max-content; min-width: 100%; }
.history-page .history-table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-variant); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
/* Edge shadows show that columns continue off-screen, also where scrollbars are hidden; each disappears at its end (#966).
   Same pattern as .master-page .table-scroll, with covers in the panel colour. */
.history-page .history-table-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28, 36, 32, .25), transparent) left center / .75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 36, 32, .25), transparent) right center / .75rem 100% no-repeat scroll;
}
/* Free-text names wrap between words past 16rem, so one long name cannot stretch every row; short names keep their natural width. */
.history-page .history-table-scroll .history-text { max-width: 16rem; white-space: normal; overflow-wrap: anywhere; }
/* A reprint's link to its original record (#1097) marks the target row with an outline, not color alone. */
.history-page tr:target { outline: 3px solid var(--field); outline-offset: -3px; scroll-margin-top: 4rem; }

/* Public launcher download (#699): one primary action; the checksum wraps instead of widening the page. */
.launcher-download-page .launcher-facts dd { margin: 0; min-width: 0; }
.launcher-download-page .launcher-checksum { color: inherit; overflow-wrap: anywhere; word-break: break-all; }
.launcher-download-page .launcher-download-button { display: inline-flex; min-height: 48px; min-width: 12rem; align-items: center; justify-content: center; }
.device-page .launcher-setup h2 { margin-top: 1.5rem; }
.device-page .launcher-setup figcaption strong { display: block; font-size: 1rem; }
.device-page .launcher-setup .enrollment-qr { max-width: 240px; }