/* ==========================================================================
   Shipment Detail (order-shipment.html) — page-specific rules
   Shared Orders vocabulary lives in css/pages/orders.css (.ord-*); this file
   says only what this one page needs: the detail header (quote.html's shape,
   under its own prefix because quotes.css is not loaded here), the figure bar,
   the sea chart, and how the one card's subsections fold on a narrow screen.
   Tokens only, radius never past 7px, nothing under 10px.
   ========================================================================== */

/* ---------- Header: crumb, number + status, settable chips ---------------- */
.shp-head > :first-child { flex: 1 1 0; min-width: 0; }
.shp-crumb {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px; font-size: 12px; color: var(--color-text-subtle);
}
.shp-crumb a { color: var(--color-text-muted); text-decoration: none; }
.shp-crumb a:hover { color: var(--color-primary-700); }
.shp-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shp-title-row .page-title { display: inline-flex; align-items: baseline; flex-wrap: wrap; }
.shp-title-row .page-title .shp-box::after {
  content: "|"; margin: 0 9px; color: var(--color-text-subtle); font-weight: 400;
}
.shp-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.shp-fields .subtle { font-size: 12px; }
.shp-field {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; text-align: left;
  padding: 2px 6px; margin-left: -6px;
  font: inherit; font-size: 12px; color: inherit;
}
.shp-field + .shp-field { margin-left: 0; }
.shp-field:hover { border-color: var(--color-border); background: var(--color-surface); }
.shp-field svg { width: 12px; height: 12px; color: var(--color-text-subtle); }
.shp-field .shp-edit { opacity: 1; }
.shp-field--static { cursor: default; }
.shp-field--static:hover { border-color: transparent; background: none; }
.shp-field--static a { color: var(--color-primary-700); font-weight: 500; text-decoration: none; }
.shp-field--static a:hover { color: var(--color-primary-600); }
/* The Export PDF image is a button here (it opens the document-set dialog): strip the button chrome. */
.shp-export { background: none; border: 0; padding: 0; }

/* ---------- Figure bar: one box, hairlines between readings -------------- */
.shp-stats {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  margin-bottom: var(--page-gap);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.shp-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 14px; min-width: 0;
}
.shp-stat + .shp-stat { border-left: 1px solid var(--color-border); }
.shp-stat .v { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.shp-stat .l { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.shp-stat-line { display: inline-flex; align-items: baseline; gap: 6px; }
.shp-stat--wait .v { color: var(--color-warn-ink); }
.shp-stat--ok .v { color: var(--color-success-ink); }

/* ---------- The one card, subsections with dividers ---------------------- */
.shp-sec { padding: 16px; border-top: 1px solid var(--color-border); }
.shp-sec:first-child { border-top: 0; }
/* Inside the tab shell the shell is the white box and its padding the inset,
   so a section gives up its own sides, the first its top, the last its foot
   (order-claim.css, same words). The load plan table gives up its bleed too. */
.tab-shell .shp-card > .shp-sec { padding-left: 0; padding-right: 0; }
.tab-shell .shp-card > .shp-sec:first-child { padding-top: 0; }
.tab-shell .shp-card > .shp-sec:last-child { padding-bottom: 0; }
.tab-shell .shp-sec > .table-wrap { margin-inline: 0; padding-inline: 0; }
.shp-sec__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.shp-sec__head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.shp-sec__head .sub { color: var(--color-text-subtle); font-size: 12px; margin-top: 2px; }
.shp-sec__acts { display: inline-flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.shp-sec .ord-path { margin-bottom: 10px; }
.shp-note { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); }
.shp-note strong { color: var(--color-text); font-weight: 600; }
.shp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; align-items: start; }
.shp-cols .ord-kv { align-content: start; }
.shp-kv-title { margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); }
.shp-kv-title:not(:first-child) { margin-top: 14px; }

/* ---------- Tracking at sea: chart beside the milestones ----------------- */
.shp-track { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.shp-map {
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); overflow: hidden;
}
.shp-map__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 12px; border-top: 1px solid var(--color-control-border);
  font-size: 12px; color: var(--color-text-muted);
}
.shp-map__foot .ord-reading { font-size: 12px; }
.shp-miles { min-width: 0; }
.shp-miles .ord-timeline { row-gap: 12px; }
.shp-miles .ord-timeline__text .where { display: block; font-size: 11px; color: var(--color-text-subtle); }
.shp-miles .est { font-size: 11px; color: var(--color-text-subtle); }
.shp-eta { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }
.shp-eta strong { color: var(--color-text); font-weight: 600; }
.shp-eta .late { color: var(--color-warn-ink); font-weight: 600; }

/* ---------- Load plan table ---------------------------------------------- */
.shp-sec > .table-wrap { margin: 0 -16px; border-top: 0; }
.shp-sec > .table-wrap .data-table thead th { border-top: 0; }
.shp-plan th.col-material { width: 40%; }
.shp-plan th.col-slabs    { width: 12%; }
.shp-plan th.col-frames   { width: 20%; }
.shp-plan th.col-area     { width: 14%; }
.shp-plan th.col-weight   { width: 14%; }
.shp-plan td.col-slabs, .shp-plan th.col-slabs,
.shp-plan td.col-area,  .shp-plan th.col-area { text-align: right; font-variant-numeric: tabular-nums; }
.shp-plan tfoot td { padding: 10px 12px; font-weight: 600; font-size: 13px; border-top: 1px solid var(--color-border-strong); color: var(--color-text); }
.shp-plan tfoot td.col-area, .shp-plan tfoot td.col-weight, .shp-plan tfoot td.col-slabs { text-align: right; font-variant-numeric: tabular-nums; }
.shp-plan tfoot td .sub { display: block; font-size: 11px; color: var(--color-text-subtle); font-weight: 400; }
.shp-plan .cell-media { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shp-plan .thumb { width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--color-border); object-fit: cover; flex: none; }
.shp-fill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: start; margin-top: 14px; }
.shp-fill-row .ord-fill { max-width: 520px; }

/* ---------- Loading record + photos -------------------------------------- */
.shp-loading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.shp-photos-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 12px; color: var(--color-text-muted); }
.shp-photos-head strong { color: var(--color-text); font-weight: 600; }
.shp-match { color: var(--color-success-ink); font-weight: 600; }

/* ---------- Documents: the release gate ---------------------------------- */
.shp-gate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); font-size: 13px;
}
.shp-gate svg { width: 16px; height: 16px; flex: none; color: var(--color-danger-ink); }
.shp-gate__text { flex: 1 1 320px; min-width: 0; }
.shp-gate__text strong { font-weight: 600; }
.shp-gate__text .held { color: var(--color-danger-ink); font-weight: 600; }
.shp-gate__acts { display: inline-flex; gap: 6px; flex: none; }
.shp-docs .ord-doc__name .num { color: var(--color-text-muted); font-weight: 400; }
.shp-docs .shp-doc-sent { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.shp-docs .shp-doc-sent.is-not { color: var(--color-warn-ink); }
.shp-docs .ord-doc__acts .btn-ghost { padding: 3px 7px; }
.shp-docs-sub { margin: 16px 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); }
/* A document row is a fixed grid: name over version, then the status, the
   sent line in its own wrapping cell, and the actions in a right column of
   four slots, so every row's icons stand at the same x and a missing action
   leaves its slot blank. */
.shp-docs .ord-doc {
  display: grid; align-items: center; column-gap: 12px; row-gap: 2px;
  grid-template-columns: 24px minmax(0, 1fr) 84px 260px 132px;
  grid-template-areas: "ico name badge sent acts" "ico ver badge sent acts";
}
.shp-docs .ord-doc > .ord-doc__ico { grid-area: ico; }
.shp-docs .ord-doc > .ord-doc__name { grid-area: name; }
.shp-docs .ord-doc > .ord-doc__ver { grid-area: ver; }
.shp-docs .ord-doc > .badge { grid-area: badge; justify-self: start; }
.shp-docs .ord-doc > .shp-doc-sent { grid-area: sent; white-space: normal; }
.shp-docs .ord-doc > .ord-doc__acts {
  grid-area: acts; margin-left: 0;
  display: grid; grid-template-columns: repeat(4, 30px); gap: 4px; justify-content: end;
}
.shp-docs .ord-doc__acts .btn { justify-content: center; }
.shp-docs .ord-doc__acts .ord-doc__ico { width: 16px; height: 16px; }
.shp-link-hint { flex-basis: 100%; font-size: 11px; color: var(--color-text-subtle); }

/* ---------- Client updates: one event, one switch ------------------------ */
.shp-notify { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px 32px; margin-top: 12px; }
.shp-notify .switch-field { color: var(--color-text); }
.shp-notify .switch-field .when { font-size: 11px; color: var(--color-text-subtle); margin-left: 2px; }
.shp-updates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.shp-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--color-text-muted); }
.shp-link-row code {
  font-family: inherit; font-size: 12px; padding: 3px 8px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); color: var(--color-text);
}

/* ---------- Dialog bits -------------------------------------------------- */
.shp-sides-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.shp-doc-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.shp-drop {
  padding: 22px 16px; text-align: center; font-size: 13px; color: var(--color-text-muted);
  background: var(--color-control); border: 1px dashed var(--color-control-border);
  border-radius: var(--radius);
}
.shp-drop svg { width: 20px; height: 20px; display: block; margin: 0 auto 6px; color: var(--color-text-subtle); }
.shp-preview {
  padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--color-text);
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); white-space: pre-line;
}
.shp-danger-note { color: var(--color-danger-ink); font-weight: 600; }
.btn-ghost.is-danger { color: var(--color-danger-ink); }
.btn-ghost.is-danger:hover { background: var(--color-danger-50); color: var(--color-danger-ink); }

/* ---------- Narrow screens ----------------------------------------------- */
@media (max-width: 1200px) {
  .shp-docs .ord-doc {
    grid-template-columns: 24px minmax(0, 1fr) 84px 132px;
    grid-template-areas: "ico name badge acts" "ico ver badge acts" "ico sent badge acts";
  }
  .shp-track { grid-template-columns: 1fr; }
  .shp-notify { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 768px) {
  .shp-stat { flex: 1 1 33%; }
  .shp-stat + .shp-stat { border-left: 0; }
  .shp-stat:nth-child(n+4) { border-top: 1px solid var(--color-border); }
  .shp-stat:not(:nth-child(3n+1)) { border-left: 1px solid var(--color-border); }
  .shp-cols, .shp-loading, .shp-updates, .shp-fill-row, .shp-doc-pick { grid-template-columns: 1fr; }
  .shp-sec__head { flex-wrap: wrap; }
  .shp-sec__acts { justify-content: flex-start; }
  .shp-sec__acts .btn { min-height: 44px; }
  .shp-gate__acts .btn { min-height: 44px; }
  .shp-docs .ord-doc { grid-template-columns: 24px minmax(0, 1fr) 84px 188px; }
  .shp-docs .ord-doc > .ord-doc__acts { grid-template-columns: repeat(4, 44px); }
}
@media (max-width: 480px) {
  .shp-docs .ord-doc {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "ico name" "ico ver" "ico badge" "ico sent" ". acts";
  }
  .shp-docs .ord-doc > .ord-doc__acts { justify-content: start; margin-top: 4px; }
  .shp-docs .ord-doc > .ord-doc__ico { align-self: start; }
  /* Box and number stay on one bar, tighter, as on the other detail pages. */
  .shp-title-row .page-title .shp-box::after { margin: 0 7px; }
}
@media (max-width: 480px) {
  .shp-stat { flex: 1 1 50%; }
  .shp-stat:nth-child(n+4) { border-top: 0; }
  .shp-stat:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .shp-stat:not(:nth-child(3n+1)) { border-left: 0; }
  .shp-stat:nth-child(even) { border-left: 1px solid var(--color-border); }
  .shp-notify { grid-template-columns: 1fr; }
  .shp-sec { padding: 12px; }
  .shp-sec > .table-wrap { margin: 0 -12px; }
}
.shp-late { color: var(--color-warn-ink); font-weight: 600; }
.shp-urgent, .ord-view .sub.shp-urgent { color: var(--color-danger-ink); font-weight: 600; }
.shp-sec > .table-wrap { overflow-x: auto; }
@media (max-width: 768px) {
  .shp-plan { min-width: 640px; }
  .shp-plan th.col-material { width: 32%; }
  .shp-plan th.col-slabs    { width: 10%; }
  .shp-plan th.col-frames   { width: 22%; }
  .shp-plan th.col-area     { width: 18%; }
  .shp-plan th.col-weight   { width: 18%; }
}
@media (max-width: 480px) {
  .shp-stat .v { font-size: 14px; }
  .shp-stat-line { flex-wrap: wrap; }
}
/* A <figure> brings 40px side margins of its own; the chart fills its column. */
.shp-map { margin: 0; }
.shp-photos-head { display: block; }
.shp-docs .ord-doc__ver { white-space: normal; }
@media (max-width: 768px) {
  .shp-sec__acts, .shp-gate__acts { flex: 1 1 100%; display: flex; flex-wrap: wrap; }
  .shp-docs .shp-doc-sent { white-space: normal; }
}
@media (max-width: 480px) {
  .shp-stat .l { white-space: normal; }
}