/* Shared presentation layer. Keep business layouts, values and semantic colours
   in their existing modules. Loaded after every page stylesheet. */
:root {
  --ui-font: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-body: 14px;
  --ui-small: 12px;
  --ui-section: 16px;
  --ui-title: 27px;
  --ui-line-height: 1.6;
  --ui-control: 42px;
  --ui-control-compact: 36px;
  --ui-control-radius: 7px;
  --ui-card-radius: 12px;
  --ui-card-gap: 14px;
  --ui-card-padding-y: 18px;
  --ui-card-padding-x: 22px;
  --ui-form-width: 1080px;
  --ui-text: #25364d;
  --ui-heading: #25364d;
  --ui-border: #dfe5ed;
  --ui-muted: #61738a;
  --ui-focus: #3774cf;
  font-family: var(--ui-font);
  line-height: var(--ui-line-height);
}

body { font-family: var(--ui-font); font-size: var(--ui-body); line-height: var(--ui-line-height); }
button, input, select, textarea { font-family: var(--ui-font); }
small { font-size: var(--ui-small); }

/* The signed-in shell remains the source of navigation, roles and counters. */
.sidebar .nav-item,
.sidebar .nav-item > span.nav-label { font-size: var(--ui-body); line-height: 1.5; }
.sidebar .nav-group-title { font-size: var(--ui-small); line-height: 1.5; }
.sidebar .nav-item > .ui-icon { width: 20px; height: 20px; }
#main > .page-heading { min-height: 76px; padding: 18px 0; gap: 16px; }
#main.new-products-page > .page-heading { max-width: var(--ui-form-width); margin-inline: auto; }
#page-title { font-family: var(--ui-font); font-size: var(--ui-title); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ui-heading); }
.page-heading .muted, .page-edition { font-size: var(--ui-small); line-height: 1.6; }
.table-heading h2, .section-caption h2, .section-icon-title,
.transport-heading h2, .calc-card-head h2, .calc-decision-heading h2,
.np-heading h2 { font-size: var(--ui-section); line-height: 1.5; font-weight: 600; }

/* One outer-card rhythm; existing compact table-cell density is deliberate. */
.work-surface, .transport-panel, .calc-card, .calc-focus-layout, .np-card {
  border-color: var(--ui-border);
  border-radius: var(--ui-card-radius);
}
.transport-panel, .np-card { margin-bottom: var(--ui-card-gap); }
.np-card { padding: var(--ui-card-padding-y) var(--ui-card-padding-x); }
.table-heading, .inbound-page .table-heading,
.calc-card-head, .calc-focus-layout .calc-card-head {
  padding: 14px 18px;
  min-height: 52px;
}
.toolbar, .inbound-tools, .inbound-page .inbound-tools,
.calc-history-panel .toolbar { padding: 12px 18px; gap: 12px; }
.table-footer, .inbound-page .table-footer,
.calc-history-panel .calc-history-foot { padding: 10px 18px; font-size: var(--ui-small); line-height: 1.6; }
.calc-focus-layout .calc-inputs > .calc-card { border-radius: var(--ui-card-radius) 0 0 0; }
.calc-decision { border-radius: 0 var(--ui-card-radius) 0 0; }
.calc-result-actions { border-radius: 0 0 var(--ui-card-radius) var(--ui-card-radius); }

/* Compact controls for table tools; regular controls for forms. */
.download, .secondary, .calc-button, .filter-tabs button,
.inbound-page .filter-tabs button, .date-shortcuts button {
  min-height: var(--ui-control-compact);
  border-radius: var(--ui-control-radius);
  font-size: var(--ui-body);
  line-height: 1.5;
  padding: 7px 12px;
}
.search { min-height: var(--ui-control-compact); border-radius: var(--ui-control-radius); padding: 7px 10px; }
.search input { font-size: var(--ui-body); line-height: 20px; }
.select-label select, .manifest-picker select,
.transport-overview .manifest-picker select, .tracking-entry-label select,
.returns-pagination select, .np-list-tools select {
  min-height: var(--ui-control-compact);
  border-radius: var(--ui-control-radius);
  font-size: var(--ui-body);
  line-height: 1.5;
}
.container-inputs input, .container-inputs .download { height: var(--ui-control-compact); }
.container-inputs input, .container-inputs .download,
.calc-confirm-row select { border-radius: var(--ui-control-radius); }
.calc-focus-layout .calc-field input, .calc-assumptions-body .calc-field input,
.login-fields input, .np-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.np-page textarea, .np-page select {
  min-height: var(--ui-control);
  border-radius: var(--ui-control-radius);
  line-height: 1.5;
}
.login-fields input { height: var(--ui-control); }
.login-fields .download, .np-actions > .calc-primary { min-height: var(--ui-control); }
.np-list-tools select { min-height: var(--ui-control-compact); }
.calc-field label, .login-fields label, .np-field { font-size: var(--ui-body); }
.text-button { font-size: var(--ui-body); line-height: 1.5; border-radius: var(--ui-control-radius); }

/* Key results and the deliberate large Save action retain their hierarchy. */
.calc-result-actions .calc-primary { min-height: 52px; font-size: 18px; padding: 11px 20px; }
.calc-focus-layout .calc-money-grid input { font-size: 18px; font-weight: 600; }
.numeric, .calc-field input, .refund-rate-label { font-variant-numeric: tabular-nums; }

/* Auxiliary copy stays readable; chart/result meaning is not recoloured. */
.product-image-empty, .calc-chart-caption, .calc-source-note,
.calc-field > small, .np-page small, .np-detail small,
.sku, .basis-line, .field-note { font-size: var(--ui-small); }
.calc-chart-caption { line-height: 1.5; }
.np-heading > span, .np-note, .calc-rate-note, .calc-storage-note,
.calc-source-note, .calc-reference-notes, .calc-result-disclaimer,
.login-security-note, .password-note { line-height: 1.6; }
.error, .calc-alert, .np-error {
  padding: 12px 14px;
  border-radius: var(--ui-control-radius);
  font-size: var(--ui-body);
  line-height: 1.6;
}
.auth-feedback, .calc-field-error { font-size: var(--ui-small); line-height: 1.6; }
.empty, .calc-history-empty, .np-empty { font-size: var(--ui-body); line-height: 1.6; }
.empty { padding: 36px 20px; }
.calc-history-empty { padding: 30px 18px; }
.np-empty { padding: 30px 18px !important; }

/* Use the existing SVG system; do not restyle all SVGs (charts are not icons). */
.section-icon-title > .ui-icon, .table-heading h2 > .ui-icon,
.calc-card-head .ui-icon { width: 18px; height: 18px; }
.ui-icon { stroke-linecap: round; stroke-linejoin: round; }
body :is(button, a, input, select, textarea, summary):focus-visible,
.np-page :is(input, select, textarea):focus-visible,
.calc-entry-button:focus-visible, .calc-disclosure-action:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
.search:focus-within { border-color: var(--ui-focus); outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.search input:focus-visible { outline: none; }
button:disabled { cursor: not-allowed; }

@media (max-width: 1000px) {
  .calc-focus-layout .calc-inputs > .calc-card { border-radius: var(--ui-card-radius) var(--ui-card-radius) 0 0; }
  .calc-decision { border-radius: 0; }
}
@media (max-width: 850px) {
  :root { --ui-title: 24px; }
  #main > .page-heading { min-height: 68px; padding: 16px 0; }
  .sidebar .nav-item, .sidebar .nav-item > span.nav-label { font-size: var(--ui-body); }
  .sidebar .nav-item > .ui-icon { width: 18px; height: 18px; }
  .table-heading, .inbound-page .table-heading, .calc-card-head,
  .calc-focus-layout .calc-card-head { padding: 12px 14px; }
  .toolbar, .inbound-tools, .inbound-page .inbound-tools,
  .calc-history-panel .toolbar { padding: 12px 14px; }
}
@media (max-width: 620px) {
  .np-card { padding: 17px; }
  #main > .page-heading { gap: 12px; }
  .table-footer, .inbound-page .table-footer,
  .calc-history-panel .calc-history-foot { padding: 10px 14px; }
}