/* Larger type and room for the operational questions people use every day. */
:root { --sidebar: 274px; --muted: #5d6b62; }
body { font-size: 16px; line-height: 1.5; }
.sidebar { overflow-y: auto; padding: 24px 16px 0; }
.brand { padding-bottom: 18px; }
.workspace { margin-bottom: 18px; }
.nav-item { min-height: 44px; height: auto; padding: 10px 12px; line-height: 1.35; text-align: left; }
.nav-item svg { width: 19px; height: 19px; }
.nav-heading { margin-top: 16px; }
.sidebar-bottom { margin-top: 24px; }
.nav-count { margin-left: auto; }
.profile { margin-top: auto; }
main { max-width: 1700px; }
.page-heading { align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.page-heading h1 { font-size: 36px; line-height: 1.2; margin: 8px 0 12px; }
.page-heading p { max-width: 750px; line-height: 1.6; }
.heading-actions { flex-wrap: wrap; }
.button { font-size: 16px; min-height: 44px; padding: 10px 16px; white-space: normal; line-height: 1.4; }
.button.compact { font-size: 14px; padding: 8px 12px; min-height: 40px; }
.icon-button { min-width: 40px; min-height: 40px; }
input, select, textarea { font-size: 16px; min-height: 44px; }
textarea { font-family: inherit; }
.confirm-recipe input { min-height: 0; width: 19px; height: 19px; flex-shrink: 0; }
.confirm-recipe { align-items: flex-start; font-size: 16px; line-height: 1.5; }
.field small, .field-note, .source-caption, .unit, .item-meta { font-size: 14px; line-height: 1.5; }
.content-grid { grid-template-columns: minmax(0, 1fr); }
.right-column { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
table { font-size: 16px; }
th { font-size: 14px; padding: 16px; line-height: 1.4; }
td { padding: 16px; }
td.number { font-size: 17px; }
th small { font-size: 13px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; margin-top: 5px; }
.table-controls { flex-wrap: wrap; gap: 14px; }
.filter-tabs { flex-wrap: wrap; gap: 8px; }
.filter-tabs button { min-height: 44px; font-size: 15px; }
.item-name { font-size: 16px; line-height: 1.5; white-space: normal; }
.item-button { text-align: left; }
.input-banner { align-items: flex-start; flex-wrap: wrap; gap: 14px; font-size: 16px; }
.input-banner p { font-size: 15px; line-height: 1.6; }
.input-banner button { min-height: 44px; font-size: 15px; text-align: left; }
.input-banner > div { flex: 1; min-width: 220px; }
.status-badge { font-size: 13px; line-height: 1.4; white-space: normal; }
.unknown, .unit { color: #627066; }
.drawer { width: min(680px, 100vw); }
.drawer h2, .info-dialog h2 { font-size: 26px; line-height: 1.4; overflow-wrap: anywhere; }
.recipe-row { grid-template-columns: minmax(0,1fr) 100px 40px; }
.recipe-row select { width: 100%; }
.info-body { font-size: 16px; }
.info-body p { line-height: 1.65; }
.connection-disclaimer { font-size: 14px; line-height: 1.6; }
.workspace-view { display: grid; gap: 24px; min-width: 0; }
.workflow-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.workflow-intro > div { max-width: 810px; }
.workflow-intro h2 { font-size: 24px; line-height: 1.4; margin-bottom: 10px; }
.workflow-intro p { color: var(--muted); line-height: 1.65; }
.workflow-intro .button { flex-shrink: 0; }
.readiness-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.readiness-grid > button { border: 1px solid var(--line); border-radius: 14px; background: white; padding: 24px; text-align: left; }
.readiness-grid > button:hover { border-color: var(--green); }
.readiness-grid strong { display: block; font-size: 32px; color: var(--forest); line-height: 1.2; margin-bottom: 12px; }
.readiness-grid span { display: block; font-weight: 600; font-size: 17px; }
.readiness-grid small { color: var(--muted); font-size: 14px; margin-top: 8px; }
.demand-stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0 24px 18px; }
.demand-stages button { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 15px; text-align: left; font-weight: 600; }
.demand-stages svg { flex-shrink: 0; width: 24px; height: 24px; }
.demand-stages button.selected { background: var(--forest); border-color: var(--forest); color: white; }
.demand-stages small { font-size: 14px; font-weight: 400; margin-top: 5px; }
.demand-table { min-width: 900px; }
.demand-table td:first-child { min-width: 185px; }
.demand-table td.number { white-space: normal; min-width: 120px; }
.demand-table .demand-value { background: #f1f5ee; font-weight: 700; }
.demand-table .status-badge { display: block; width: fit-content; margin: 6px 0 0 auto; }
.explanation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.explanation { padding: 24px; }
.explanation h3 { font-size: 20px; margin-bottom: 12px; }
.explanation p { margin-bottom: 14px; color: var(--muted); line-height: 1.65; }
.explanation strong { color: var(--ink); }
.recipe-map-table { min-width: 850px; }
.recipe-map-table td { vertical-align: top; width: 25%; }
.component-list { list-style: none; padding: 0; margin: 0; }
.component-list li { margin-bottom: 12px; }
.component-list small { font-size: 14px; color: var(--muted); margin-top: 3px; }
.inline-link { color: var(--forest); text-align: left; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.mapping-missing { color: var(--muted); font-size: 14px; margin: 12px 0; overflow-wrap: anywhere; }
.seller-code { overflow-wrap: anywhere; max-width: 280px; }
.seller-code small { color: var(--muted); font-size: 13px; margin-top: 8px; }
.upload-panel { padding: 28px; }
.upload-steps { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-bottom: 28px; color: var(--forest); }
.upload-steps b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); margin-right: 8px; }
.upload-panel select { max-width: 560px; }
#upload-description { color: var(--muted); line-height: 1.65; margin: 16px 0; max-width: 850px; }
.upload-file { margin-top: 28px; }
.upload-file input { border: 1px dashed #9cae9f; padding: 18px; background: var(--paper); width: 100%; }
#upload-preview { margin-top: 24px; }
#upload-preview h3 { font-size: 22px; margin-bottom: 12px; }
#upload-preview p { margin: 12px 0; }
.preview-scroll { max-height: 470px; margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; }
.upload-errors { color: #9a2f26; line-height: 1.65; }
.upload-success { background: var(--mint); padding: 24px; border-radius: 12px; }
.upload-success > strong { font-size: 22px; }
.sheets-panel { padding: 28px; display: grid; gap: 20px; }
.sheets-panel h2 { font-size: 26px; margin: 8px 0 12px; }
.sheets-panel .button { width: fit-content; }
.sheets-panel p, .sheets-panel li { line-height: 1.7; }
.sheets-panel ol { margin: 0; padding-left: 24px; }
.sheets-panel a:not(.button) { color: var(--forest); text-decoration: underline; }
.mapping-explanation { padding: 6px 24px 22px; }
.mapping-explanation p { margin-top: 8px; color: var(--muted); }
.ingredient-table { min-width: 880px; }
.ingredient-table td { vertical-align: top; min-width: 175px; }
.sku-dialog { width: min(1080px, calc(100vw - 32px)); max-width: none; }
.sku-summary { display: grid; gap: 16px; margin-bottom: 28px; }
.sku-summary .button, .sku-summary .status-badge { width: fit-content; }
.sku-structure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.sku-structure-grid h3 { font-size: 21px; margin-bottom: 18px; }
.sku-structure-grid > section { min-width: 0; }
.recipe-tree, .recipe-tree ul { list-style: none; padding-left: 18px; margin: 14px 0; border-left: 2px solid #cbd8cc; }
.recipe-tree { padding-left: 14px; }
.recipe-tree li { margin: 16px 0; overflow-wrap: anywhere; }
.recipe-tree strong, .recipe-tree small { display: block; font-size: 14px; margin-top: 6px; }
.recipe-tree small { color: var(--muted); }
.tree-gap { padding: 12px; background: var(--amber-bg); border-radius: 8px; }
.source-evidence { padding: 16px; background: var(--paper); border-radius: 10px; margin-bottom: 16px; }
.source-evidence summary { cursor: pointer; font-weight: 600; }
.source-evidence ol { padding-left: 24px; line-height: 1.7; }
@media(max-width: 800px) { .sku-structure-grid { grid-template-columns: 1fr; } .sheets-panel { padding: 20px; } }
@media(min-width: 1400px) { main { padding: 36px 42px; } }
@media(max-width: 1190px) { :root { --sidebar: 252px; } .workflow-intro { flex-direction: column; gap: 16px; } .explanation-grid { grid-template-columns: 1fr; } .stage-card-legend { flex-wrap: wrap; } .stage-cards { gap: 12px; } .stage-card { padding: 18px; } }
@media(max-width: 900px) { .sidebar { display: none; } .app-shell { margin-left: 0; } .mobile-views { display: flex; flex-wrap: wrap; gap: 8px; } .mobile-views button, .mobile-views a { min-height: 42px; font-size: 14px; padding: 8px 12px; } main { padding: 24px; } .readiness-grid { gap: 12px; } .readiness-grid > button { padding: 18px; } }
@media(max-width: 600px) {
  body { font-size: 16px; } main { padding: 20px 14px; } .topbar { padding: 0 16px; }
  .page-heading h1 { font-size: 30px; } .page-heading { gap: 18px; } .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1; padding: 10px 12px; font-size: 15px; } .right-column { grid-template-columns: 1fr; }
  .readiness-grid { grid-template-columns: 1fr; } .readiness-grid > button { padding: 18px 20px; } .readiness-grid strong { font-size: 28px; }
  .demand-stages { grid-template-columns: 1fr; padding: 0 16px 16px; } .demand-stages button { min-height: 62px; padding: 12px 16px; }
  .demand-stages span { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 12px; } .demand-stages small { margin: 0; }
  .panel-heading { padding: 20px 16px; } .panel-heading h2 { font-size: 21px; } .panel-heading p { font-size: 14px; }
  .table-controls { padding: 0 16px 18px; } .input-banner { padding: 18px; } .input-banner > div { min-width: 0; flex-basis: calc(100% - 42px); }
  .workflow-intro h2 { font-size: 22px; } .upload-panel { padding: 18px; } .upload-file input { padding: 12px; font-size: 14px; }
  .upload-steps { flex-direction: column; gap: 12px; } .recipe-row { grid-template-columns: minmax(0,1fr) 80px 36px; }
  .drawer-body, .drawer-header, .info-body { padding: 20px; } .drawer-tabs { padding: 0 20px; }
  .stage-card-legend { font-size: 13px; } .connection-disclaimer { padding: 18px; }
}

/* Phone layouts keep secondary tasks readable and their controls touchable. */
@media (max-width:700px) {
  #mappings-view > .input-banner { display:flex; align-items:center; }
  #mappings-view > .input-banner > span { display:none; }
  #mappings-view > .input-banner > div { flex:1; min-width:0; }
  #mappings-view > .input-banner > button { flex:0 1 125px; min-height:48px; font-size:14px; }
  #mappings-view .filter-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:8px 12px 4px; }
  #mappings-view .filter-tabs button { min-height:48px; padding:10px 6px; text-align:center; font-size:15px; line-height:1.35; }
  #mappings-view #mapping-table .button,
  #mappings-view #mapping-table .inline-link,
  #mappings-view #mapping-table .item-button { min-height:48px; }
  #mappings-view #mapping-table .item-button > span { min-width:0; }
  #mappings-view #mapping-table .item-meta { font-size:14px; }
  #mappings-view #mapping-table td[data-label]::before { font-size:14px; margin-bottom:6px; }
  #mappings-view #mapping-table td.number { font-size:18px; }
  #mappings-view #mapping-table .component-list li { padding-bottom:8px; border-bottom:1px solid #edf0e9; margin-bottom:4px; }
  #mappings-view #mapping-table .component-list li:last-child { padding-bottom:0; border:0; }
  #mappings-view #mapping-table .component-list small { margin-top:0; line-height:1.45; }
  #mappings-view #mapping-table .seller-code { font-size:17px; font-weight:600; }
  #mappings-view #mapping-table .seller-code small { font-size:14px; font-weight:400; }
  #mappings-view #mapping-table td:last-child > div + div { margin-top:8px; }
  #sku-dialog .sku-structure-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  #sku-dialog .sku-summary .button { width:100%; }
  #sku-dialog .recipe-tree { padding-left:10px; }
  #sku-dialog .recipe-tree ul { padding-left:10px; margin-left:0; }
  #sku-dialog .recipe-tree .inline-link,
  #sku-dialog .source-evidence summary,
  #sku-dialog .button { min-height:48px; }
  #sku-dialog .recipe-tree .inline-link { white-space:normal; overflow-wrap:anywhere; }
  #sku-dialog .source-evidence { padding:12px; }
  #sku-dialog .source-evidence summary { display:flex; align-items:center; }
  #sku-dialog .sku-summary { gap:12px; margin-bottom:18px; }
  #item-dialog .drawer-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px; }
  #item-dialog .drawer-tabs button { min-height:48px; padding:10px 6px; font-size:16px; }
  #item-dialog .recipe-row { grid-template-columns:minmax(0,1fr) 48px; gap:10px; }
  #item-dialog .recipe-row > div:first-child { grid-column:1/-1; }
  #item-dialog .recipe-row select, #item-dialog .recipe-row input { min-height:48px; min-width:0; width:100%; max-width:100%; font-size:16px; }
  #item-dialog .recipe-row .remove-component { width:48px; min-height:48px; align-self:end; margin-top:0; }
  #item-dialog .field-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  #item-dialog .quick-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  #item-dialog .quick-actions .button, #item-dialog .drawer-actions .button,
  #item-dialog #add-component, #item-dialog #create-component,
  #info-dialog #channel-form button { min-height:48px; }
  #item-dialog #add-component, #item-dialog #create-component { width:100%; margin:4px 0; }
  #item-dialog .confirm-recipe, #channel-form .checkbox-field { min-height:48px; padding:10px 0; gap:12px; }
  #channel-form .checkbox-field { display:flex; align-items:center; }
  #channel-form .checkbox-field input { flex:0 0 22px; width:22px; height:22px; min-height:0; }
  #channel-form .field, #channel-form .field > * { min-width:0; max-width:100%; }
  #channel-form select, #channel-form input:not([type=checkbox]), #channel-form textarea { width:100%; min-height:48px; font-size:16px; }
  #channel-form #save-channel, #channel-form #channel-check-saved { width:100%; margin-top:8px; }
  #channel-form > p { overflow-wrap:anywhere; font-size:15px; }
  #channel-form #channel-create-product { width:100%; justify-content:flex-start; margin-top:6px; }
}
@media(max-width:700px){
  #mappings-view .workflow-intro .button,#mappings-view #mapping-search{min-height:48px}
  #mappings-view #mapping-table .inline-link,#sku-dialog .recipe-tree .inline-link{min-width:48px}
  #item-dialog button,#sku-dialog button,#sourcing-dialog button{min-height:48px;min-width:48px}
  #item-dialog .icon-button,#sku-dialog .icon-button,#sourcing-dialog .icon-button{width:48px;height:48px;flex-shrink:0}
}
@media(max-width:700px){
  #item-dialog .item-photo{padding-bottom:12px;margin-bottom:16px;gap:12px;flex-wrap:nowrap}
  #item-dialog .item-photo img{width:64px;height:64px;flex-shrink:0}
  #item-dialog .item-photo>div{min-width:0}
  #item-dialog .recipe-intro p{display:none}
  #item-dialog .source-includes{margin:12px 0}
}
@media(max-width:700px){
  #item-dialog input:not([type=checkbox]),#item-dialog select,#item-dialog textarea{min-height:48px;min-width:0;max-width:100%;font-size:16px}
  #item-dialog .drawer-body,#sku-dialog .info-body{scroll-padding-bottom:24px}
}