/* imp-layout.css — the app shell (Ink sidebar + Paper content), the sign-in page, and the
   phone layout. Below 900px the sidebar becomes a static top bar: brand row, then a
   horizontally scrollable nav strip. No off-canvas panel, no JS toggle. */

:root {
  --imp-rail-w: 248px;
  --page-pad: 40px;
  --page-max: 1080px;
}

/* ---- app shell ---- */
.app { min-height: 100vh; }
main.main {
  min-width: 0;
  max-width: calc(var(--page-max) + var(--imp-rail-w) + 2 * var(--page-pad));
  margin-left: var(--imp-rail-w);
  padding: 44px var(--page-pad) 64px;
}

/* ---- sidebar: the brand surface ---- */
.imp-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--imp-rail-w);
  display: flex;
  flex-direction: column;
  padding: 24px 0 20px;
  background: var(--imp-ink);
  color: var(--imp-side-text);
  overflow-y: auto;
  z-index: 10;
}
.imp-rail :focus-visible { outline-color: var(--imp-primary); }

.imp-rail__crest {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 24px 28px;
  color: var(--imp-side-text);
  text-decoration: none;
}
.imp-rail__seal { width: 32px; height: 32px; flex: 0 0 32px; display: block; }
.imp-rail__name {
  font-size: var(--fs-4);
  font-weight: 700;
  font-stretch: var(--imp-wide);
  letter-spacing: -0.01em;
  line-height: 1;
}

.imp-rail__menu { display: flex; flex-direction: column; }
.imp-rail__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px 0 21px;
  border-left: 3px solid transparent;
  color: var(--imp-side-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--imp-ease), background-color var(--imp-ease), border-color var(--imp-ease);
}
.imp-rail__link:hover { color: var(--imp-side-text); background: var(--imp-side-hover); }
.imp-rail__link--current {
  border-left-color: var(--imp-primary);
  color: var(--imp-side-strong);
  font-weight: 600;
  background: var(--imp-side-active);
}
.imp-rail__link:focus-visible { outline-offset: -2px; }

.imp-rail__base {
  margin-top: auto;
  padding: 16px 24px 0;
  border-top: 1px solid var(--imp-side-rule);
}
.imp-signout {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--imp-side-muted);
  font-size: var(--fs-2);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--imp-ease), text-decoration-color var(--imp-ease);
}
.imp-signout:hover { color: var(--imp-side-text); text-decoration-color: currentColor; }

/* the balance in the sidebar footer: quiet text, not the stamp (one bold element per screen) */
.imp-rail__funds { margin-bottom: 4px; color: var(--imp-side-muted); font-size: var(--fs-1); }
.imp-rail__funds-amount {
  display: block;
  color: var(--imp-side-text);
  font-size: var(--fs-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- form layouts ---- */
.address-pair { display: grid; gap: 24px; grid: auto-flow / repeat(2, minmax(0, 1fr)); }
.form-grid--address { grid: auto-flow / minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.2fr); }
.form-grid--address .field--full { grid-column: 1 / -1; }
.form-grid--package { grid: auto-flow / minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.form-grid--upload { grid: auto-flow / minmax(0, 1fr) minmax(0, 1fr); }
.form-grid--password { grid: auto-flow / repeat(3, minmax(0, 1fr)); }
.sample-link { color: var(--imp-muted); }

/* ---- sign in: Ink seal pane + Paper form pane ---- */
.imp-auth {
  min-height: 100vh;
  display: grid;
  grid: auto-flow / minmax(0, 5fr) minmax(0, 6fr);
}
.imp-auth__seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 32px;
  background: var(--imp-ink);
  color: var(--imp-side-text);
  text-align: center;
}
.seal-stage { position: relative; width: 280px; height: 280px; }
.seal-static { position: absolute; inset: 30px; width: 220px; height: 220px; }
.imp-seal-canvas { display: none; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.imp-seal-canvas:active { cursor: grabbing; }
.seal-stage.is-live .seal-static { display: none; }
.seal-stage.is-live .imp-seal-canvas { display: block; }
.imp-auth__wordmark {
  font-size: var(--fs-6);
  font-weight: 700;
  font-stretch: var(--imp-wide);
  letter-spacing: -0.01em;
  line-height: 1;
}
.imp-auth__tagline { margin-top: 10px; color: var(--imp-side-muted); font-size: var(--fs-3); }

.imp-auth__form { display: grid; place-items: center; padding: 48px 32px; }
.imp-auth-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.imp-auth-title { font-size: var(--fs-5); font-weight: 700; font-stretch: var(--imp-wide); line-height: 1.15; }
.imp-auth-card .imp-alert { margin: 0; }
.imp-auth-card .btn-imp-primary { margin-top: 4px; }

/* ---- medium: stack the address pair ---- */
@media (max-width: 1180px) {
  .address-pair { grid: auto-flow / minmax(0, 1fr); }
}

/* ---- phone / small tablet ---- */
@media (max-width: 900px) {
  :root { --page-pad: 16px; }

  .imp-rail {
    position: static;
    width: auto;
    display: grid;
    grid: "brand out" auto "nav nav" auto / minmax(0, 1fr) auto;
    padding: 0;
    overflow: visible;
  }
  .imp-rail__crest { grid-area: brand; margin: 0; padding: 12px 16px; }
  .imp-rail__name { font-size: var(--fs-3); }
  .imp-rail__seal { width: 28px; height: 28px; flex-basis: 28px; }
  .imp-rail__base { grid-area: out; margin: 0; padding: 0 16px 0 0; border: 0; display: flex; align-items: center; }
  .imp-rail__base { gap: 12px; }
  .imp-rail__funds { margin: 0; white-space: nowrap; }
  .imp-rail__funds-amount { display: inline; font-size: var(--fs-1); }
  .imp-signout { font-size: var(--fs-1); }

  .imp-rail__menu {
    grid-area: nav;
    position: relative;          /* offsetParent for js/nav.js */
    flex-direction: row;
    gap: 4px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--imp-side-rule);
    /* scroll hint: a soft light edge on the right while more links sit off-screen. The
       ink "cover" scrolls with the content and hides the hint once the end is reached. */
    background:
      linear-gradient(to left, var(--imp-ink) 60%, var(--imp-ink-clear)) right / 32px 100% no-repeat local,
      linear-gradient(to left, var(--imp-side-hint), var(--imp-side-hint-clear)) right / 20px 100% no-repeat scroll;
  }
  .imp-rail__menu::-webkit-scrollbar { display: none; }
  .imp-rail__link {
    flex: 0 0 auto;
    padding: 0 10px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    background: none;
  }
  .imp-rail__link:hover { background: none; }
  .imp-rail__link--current { border-bottom-color: var(--imp-primary); background: none; }

  main.main { margin-left: 0; padding: 24px var(--page-pad) 48px; }
  .page-title { font-size: var(--fs-4); }
  .page-header { margin-bottom: 20px; }

  .form-grid,
  .form-grid--package,
  .form-grid--upload,
  .form-grid--password { grid: auto-flow / minmax(0, 1fr); }
  .form-grid--address { grid: auto-flow / minmax(0, 1fr) minmax(0, 1fr); }
  .form-grid--address .field--city,
  .form-grid--address .field--state { grid-column: 1 / -1; }

  .section-card-head, .section-card-body, .section-card-foot, .fieldset-body { padding-left: 16px; padding-right: 16px; }
  .imp-fieldset > legend { padding-left: 16px; padding-right: 16px; }
  .fieldset-foot { padding: 0 16px 16px; }
  .imp-table th, .imp-table td { padding-left: 16px; padding-right: 16px; }

  .stamp-row { margin-bottom: 24px; }
  .stamp { min-width: 0; width: 100%; }
  .form-actions .btn-imp-primary, .section-card-foot .btn-imp-primary,
  .form-actions .btn-imp-danger, .section-card-foot .btn-imp-danger { width: 100%; }

  /* sign in: the seal pane shrinks to a short band above the form */
  .imp-auth { grid: auto 1fr / minmax(0, 1fr); }
  .imp-auth__seal { flex-direction: row; gap: 16px; padding: 16px; justify-content: flex-start; text-align: left; }
  .seal-stage { width: 96px; height: 96px; flex: 0 0 96px; }
  .seal-static { inset: 10px; width: 76px; height: 76px; }
  .imp-auth__wordmark { font-size: var(--fs-4); }
  .imp-auth__tagline { margin-top: 4px; font-size: var(--fs-2); }
  .imp-auth__form { place-items: start center; padding: 32px 16px; }
  .imp-auth-title { font-size: var(--fs-4); }
}

/* ---- phone: every table row becomes a small record. The first cell (tracking number or
   movement type) leads; the rest read as "Label  value" lines from each cell's data-label. */
@media (max-width: 640px) {
  .imp-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .imp-table, .imp-table tbody, .imp-table tr, .imp-table td { display: block; }
  .imp-table tr { padding: 14px 16px; border-bottom: 1px solid var(--imp-rule); }
  .imp-table tbody tr:last-child { border-bottom: 0; }
  .imp-table td,
  .imp-table td.action { padding: 2px 0; border: 0; text-align: left; white-space: normal; }
  .imp-table td[data-label] { display: flex; justify-content: space-between; gap: 16px; }
  .imp-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--imp-muted);
    font-size: var(--fs-1);
    font-weight: 600;
    line-height: 1.9;
  }
  .imp-table td[data-label] > * { text-align: right; }
  .imp-table td.num, .imp-table td.when { text-align: right; }
  .imp-table td.cell-empty { display: none; }
  .imp-table .cell-action { margin-top: 4px; }
  /* The tracking number leads the record; the select checkbox (the table's leading column
     on desktop) sorts to the end here instead of sitting above it. */
  .imp-table tbody tr { display: flex; flex-direction: column; }
  .imp-table .cell-primary { order: -1; margin-bottom: 4px; font-weight: 600; }
  .imp-table .select { width: auto; order: 1; margin-top: 8px; }
  .filter-bar .field, .filter-bar .filter-bar__search { flex: 1 1 100%; }
  .filter-bar__actions .btn-imp-secondary { flex: 1 1 auto; }
  /* the dashboard's four-column glance table stacks Today/Last 7 days/This month/All time
     as four value lines under one measure — a little more room between them than an
     ordinary two- or three-value record so the group reads as one stat, not a cramped list. */
  .imp-table.glance td[data-label] { padding: 4px 0; }
}

/* Phase 5c: the admin audit entry's before/after, side by side; stacked on a phone. The JSON
   wraps inside its own column, so a long value never pushes the page sideways. */
.audit-diff { display: grid; gap: 16px 24px; grid: auto-flow / repeat(2, minmax(0, 1fr)); }
.audit-diff__side { min-width: 0; }
.audit-json { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .audit-diff { grid: auto-flow / minmax(0, 1fr); }
}

/* ---- prices by weight (views/partials/brackets-editor.ejs): from lb, to lb, price, remove ---- */
.brackets { border: 1px solid var(--imp-rule); border-radius: 10px; padding: 12px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.brackets__legend { float: left; width: 100%; padding: 0; font-size: var(--fs-1); font-weight: 700; color: var(--imp-ink); }
.brackets__legend + * { clear: both; }
.brackets__head, .brackets__row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.brackets__head > span, .brackets__row > input { flex: 1 1 0; min-width: 0; }
.brackets__head > span:last-child, .brackets__row > .brackets__remove { flex: 0 0 auto; min-width: 64px; }
.brackets__head { font-size: var(--fs-1); color: var(--imp-muted); }
.brackets__rows { display: flex; flex-direction: column; gap: 8px; }
.brackets__row input { width: 100%; }
.brackets__add { align-self: flex-start; }
.brackets__add[hidden] { display: none; }
.brackets__remove[hidden] { display: inline-flex; visibility: hidden; }  /* keeps the columns lined up */
.brackets-list { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.brackets-list > .brackets { flex: 1 1 320px; }
.brackets-list > .field--full { flex: 1 1 100%; }
.weight-price { font-weight: 700; }
@media (max-width: 640px) {
  .brackets-list > .brackets { flex-basis: 100%; }
  .brackets__head, .brackets__row { gap: 6px; }
  .brackets__head > span:last-child, .brackets__row > .brackets__remove { min-width: 56px; }
  .brackets { padding: 10px; }
}