/* ==========================================================================
   Supplier Order Page (purchase-order-share.html) — PO-2026-0227 as
   Denizli Traverten reads it

   Spec: build/po/pages.md → "18. purchase-order-share.html";
   model: css/pages/order-share.css

   A credential-free page for a supplier that is not on Vava: no sidebar, no
   portal header, no account chrome. The shell is order-share.html's — sticky
   tenant strip, centred column, hero, one card of sections, a sticky right
   column — turned round: the tenant is the BUYER, the reader is the supplier,
   and the right column holds the money owed TO the reader and the things the
   buyer is waiting on from them.

   Everything here is `posh-`. The module's shared vocabulary (the status path,
   the key–value grid, a document row, the fill gauge, the photo grid, the
   thread, the empty state, the Vava link reading) comes from
   css/pages/purchase-orders.css and is used on its own markup, never
   redefined. Tokens only, light theme only (a client surface is never
   repainted: js/app.js, data-client-surface). Radius ≤ 7px, nothing under
   10px, no `style` attribute.
   ========================================================================== */

html, body { height: auto; overflow: visible; }
body { background: var(--color-bg); }

/* ---------- Tenant strip -------------------------------------------------- */
.posh-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 10px 24px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.posh-tenant { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The buyer's mark is a company's, so it keeps its initials (app.js paints a
   face on an avatar whose neighbouring text carries a first name). */
.posh-tenant .avatar { background: var(--brand-gradient) !important; color: var(--color-surface); font-size: 12px; }
.posh-tenant .n { font-weight: 600; font-size: 14px; }
.posh-tenant .s { font-size: 12px; color: var(--color-text-muted); }
/* The supplier's own language, number format and clock: controls on the
   control ground (memory.md §13), each sized to its widest option (§9). */
.posh-prefs { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.posh-pref { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.posh-pref svg { width: 14px; height: 14px; flex: none; color: var(--color-text-subtle); }
.posh-pref .select { width: auto; padding: 4px 26px 4px 9px; font-size: 12px; background-position: right 8px center; }
.posh-pref--word { color: var(--color-text-subtle); }
.posh-powered { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-text-subtle); }

.posh-wrap { max-width: 1180px; margin: 0 auto; padding: 18px 24px 60px; }

/* ---------- Email strip ----------------------------------------------------- */
.posh-mail {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin-bottom: 14px; font-size: 12px; color: var(--color-text-muted);
}
.posh-mail svg { width: 15px; height: 15px; flex: none; color: var(--color-text-subtle); }
.posh-mail > span { flex: 0 1 auto; min-width: 0; }
.posh-nowrap { white-space: nowrap; }
.posh-mail strong { color: var(--color-text); font-weight: 600; }
.posh-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--color-primary-700);
}
.posh-link:hover { color: var(--color-primary-600); }
.posh-mail-preview {
  margin: -4px 0 14px; padding: 14px 16px;
  background: var(--color-surface); border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius); max-width: 720px;
}
.posh-mail-preview[hidden] { display: none; }
.posh-mail-preview__body { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.posh-mail-preview__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.posh-mail-preview__acts .posh-hint { margin: 0; }

/* ---------- Two columns ----------------------------------------------------- */
.posh-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 312px;
  column-gap: 22px; align-items: start;
}
.posh-main { min-width: 0; }
.posh-aside { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Hero ------------------------------------------------------------ */
.posh-hero {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.posh-hero-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.posh-ro {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-subtle);
}
.posh-ro svg { width: 13px; height: 13px; }
.posh-hero-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.posh-hero h1 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 8px; }
.posh-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.posh-status strong { font-weight: 600; }
.posh-status .posh-prepared { color: var(--color-text-muted); }
.posh-status .posh-prepared strong { color: var(--color-text); }
/* Figures read number first, then the word (memory.md §6). */
.posh-figs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; }
.posh-fig { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.posh-fig b { font-size: 16px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; margin-right: 4px; letter-spacing: -0.01em; }
.posh-path-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.posh-path-note { margin: 8px 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.5; }
.posh-free { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.posh-free svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--color-text-subtle); }
.posh-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 14px; font-size: 12px; }
.posh-nav a { color: var(--color-primary-700); text-decoration: none; font-weight: 500; white-space: nowrap; }
.posh-nav a:hover { color: var(--color-primary-600); }
.posh-nav a:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--color-text-subtle); font-weight: 400; }

/* ---------- The order card: one white card, sections divided by hairlines --- */
.posh-card {
  margin-top: 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.posh-sec { padding: 20px 24px 22px; scroll-margin-top: 72px; }
.posh-sec + .posh-sec { border-top: 1px solid var(--color-border); }
.posh-sec__head { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.posh-sec__head h2 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
.posh-sec__sub { margin-left: auto; font-size: 12px; color: var(--color-text-muted); }
.posh-sec__sub strong { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.posh-sec__acts { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.posh-sec__intro { margin: -6px 0 14px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.posh-muted { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.posh-hint { margin: 6px 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.5; }
.posh-sub-h { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
/* A nested box inside the white card stands on the control ground (§13);
   fields on it invert back to white (the third readable level). */
.posh-box {
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); padding: 14px 16px; min-width: 0;
}
.posh-box h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.posh-box h3 svg { width: 15px; height: 15px; flex: none; color: var(--color-text-muted); }
.posh-box .input, .posh-box .select, .posh-box .textarea { background-color: var(--color-surface); }

/* ---------- Your Order ------------------------------------------------------ */
.posh-lines { list-style: none; margin: 0; padding: 0; }
.posh-line { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.posh-line__img {
  width: 72px; height: 54px; flex: none; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--color-border);
  background: var(--color-control);
}
.posh-line__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.posh-line__what { flex: 1; min-width: 0; }
.posh-line__name { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.posh-line__meta { display: block; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; font-variant-numeric: tabular-nums; }
.posh-line__meta b { font-weight: 500; color: var(--color-text); }
.posh-line__end { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.posh-line__price { display: block; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.posh-line__price b { font-weight: 600; color: var(--color-text); }
.posh-line__alt { display: block; font-size: 11px; color: var(--color-text-subtle); white-space: nowrap; }
.posh-line__sum { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; white-space: nowrap; }
/* Our item beside the supplier's own code and name: the two fields the buyer
   opened for the supplier, sized to what goes in them (§9). */
.posh-code {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px;
  padding: 12px 14px; margin-top: 4px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.posh-code .input { background-color: var(--color-surface); }
.posh-code__ours { display: flex; flex-direction: column; gap: 6px; padding-bottom: 7px; }
.posh-code__k { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.posh-code__v { font-size: 13px; font-weight: 500; }
.posh-code__f--code { width: 160px; }
.posh-code__f--name { width: 200px; }
.posh-code__note { flex-basis: 100%; margin: 0; }
.posh-totals { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.posh-trow { display: flex; align-items: baseline; gap: 12px; font-size: 13px; padding: 3px 0; }
.posh-trow .l { color: var(--color-text-muted); }
.posh-trow .v { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.posh-trow .v.is-paid { color: var(--color-success-ink); }
.posh-trow--grand { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 10px; font-size: 17px; font-weight: 600; }
.posh-trow--grand .l { color: var(--color-text); }
.posh-terms { margin: 14px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.55; }
.posh-terms strong { color: var(--color-text); font-weight: 600; }
.posh-load { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.posh-load .po-fill { max-width: none; }
.posh-load .po-kv { align-self: end; }

/* ---------- Ship To --------------------------------------------------------- */
.posh-ship { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.posh-changed p { margin: 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.55; }

/* ---------- Confirmation ---------------------------------------------------- */
.posh-versions { list-style: none; margin: 0 0 14px; padding: 0; }
.posh-version { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.posh-version:first-child { padding-top: 0; }
.posh-version .cell-stack { flex: 1; }
.posh-version .badge { flex: none; }
.posh-decide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.posh-decide__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.posh-decide__row .btn[disabled] { opacity: .5; cursor: not-allowed; }
.posh-decide__reason { width: 220px; }
.posh-decide__reason .select[disabled] { opacity: .7; cursor: not-allowed; }

/* ---------- Checklist & photos ---------------------------------------------- */
.posh-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.posh-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.posh-check > svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--color-text-subtle); }
.posh-check.is-done > svg { color: var(--color-success); }
.posh-check .cell-stack .sub { font-size: 11px; }
.posh-photos-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin-top: 16px; }
.posh-photos-row .po-photos { flex: 1 1 320px; min-width: 0; }

/* ---------- Tasks ----------------------------------------------------------- */
.posh-tasks { list-style: none; margin: 0; padding: 0; }
.posh-task { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.posh-task:first-child { padding-top: 0; }
.posh-task:last-child { border-bottom: 0; padding-bottom: 0; }
.posh-task > .dot-status { flex: none; margin-top: 6px; }
.posh-task__body { flex: 1; min-width: 0; }
.posh-task__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.posh-task__name { font-size: 13px; font-weight: 600; }
.posh-task__due { font-size: 12px; color: var(--color-text-muted); }
.posh-task__due.is-due { color: var(--color-warn-ink); font-weight: 600; }
.posh-task.is-done .posh-task__name { font-weight: 500; color: var(--color-text-muted); }
.posh-task__form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }
.posh-task__form .posh-hint { flex-basis: 100%; margin: 0; }
.posh-task__form .btn[disabled] { opacity: .5; cursor: not-allowed; }
.posh-f-cont { width: 190px; }
/* The packing-list well: a dashed box on the control ground. */
.posh-drop {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 14px;
  background: var(--color-control); border: 1px dashed var(--color-control-border);
  border-radius: var(--radius); font-size: 12px; color: var(--color-text-muted);
}
.posh-drop > svg { width: 18px; height: 18px; color: var(--color-text-subtle); flex: none; }
.posh-drop > span:first-of-type { flex: 1 1 240px; min-width: 0; }
.posh-drop .btn { flex: none; }
.posh-drop__req { flex-basis: 100%; font-size: 11px; color: var(--color-text-subtle); }
.posh-drop__req .posh-link { font-size: 11px; }

/* ---------- Documents ------------------------------------------------------- */
.posh-docs .po-doc { flex-wrap: nowrap; gap: 10px 12px; }
.posh-docs .po-doc__name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.posh-doc__ref { font-size: 11px; font-weight: 400; color: var(--color-text-subtle); }
.posh-doc--old .po-doc__ico { opacity: .45; }
.posh-doc--old .po-doc__name { color: var(--color-text-muted); }
.posh-upload { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.posh-upload .posh-hint { flex-basis: 100%; margin: 0; }
.posh-f-type { width: 220px; }

/* ---------- Messages -------------------------------------------------------- */
/* The supplier's own words bank right and take the primary's pale ground, as
   the buyer's own words do on order-share.html. */
.posh-msg--you { margin-left: auto; max-width: 86%; background: var(--color-primary-50); border-color: var(--color-border-strong); }
.po-thread .po-thread__msg:not(.posh-msg--you) { max-width: 86%; }
.posh-compose { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.posh-compose .textarea { resize: vertical; font-size: 13px; }
.posh-compose__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.posh-compose__row .posh-hint { margin: 0; }
.posh-compose__row .btn-primary { margin-left: auto; }

/* ---------- Your Quotes ----------------------------------------------------- */
.posh-quote {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) max-content max-content;
  align-items: center; gap: 10px 18px; font-size: 13px;
}
.posh-quote__state { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.posh-quote__state .posh-hint { margin: 0; }
.posh-quote__acts { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Claims ------------------------------------------------------------ */
.po-empty .posh-hint { margin: 0; }

/* ---------- Your Company Details --------------------------------------------- */
.posh-company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.posh-company .po-kv dd { overflow-wrap: anywhere; }

/* ---------- Join Vava --------------------------------------------------------- */
.posh-join { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 14px 24px; align-items: center; }
.posh-join p { margin: 0; font-size: 13px; line-height: 1.55; }
.posh-join__gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--color-text-muted); }
.posh-join__gets li { display: flex; align-items: center; gap: 7px; }
.posh-join__gets svg { width: 14px; height: 14px; flex: none; color: var(--color-primary); }
.posh-join__act { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* ---------- Payment to you (right column) -------------------------------------- */
.posh-bal,
.posh-reqs {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.posh-bal h2,
.posh-reqs h2 { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); }
.posh-bal__due { margin: 6px 0 2px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.posh-bal__when { margin: 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.posh-bal__fill { margin-top: 12px; max-width: none; }
.posh-bal__rows { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border); }
.posh-bal__rows .posh-trow { font-size: 12px; padding: 2px 0; }
.posh-bal__pay { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); }
.posh-bal__pay svg { width: 14px; height: 14px; flex: none; color: var(--color-text-subtle); }
.posh-bal__pay a { color: var(--color-primary-700); text-decoration: none; font-weight: 500; }
.posh-bal__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.posh-bal__acts .btn { justify-content: center; padding-left: 8px; padding-right: 8px; }
.posh-bal__rep { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 12px; }
.posh-bal__rep .avatar { width: 28px; height: 28px; font-size: 11px; }
.posh-bal__rep .n { font-weight: 600; color: var(--color-text); }
.posh-bal__rep .s { color: var(--color-text-muted); }
.posh-bal__rep a { color: var(--color-primary-700); text-decoration: none; margin-left: auto; white-space: nowrap; }
.posh-reqs { padding: 16px 20px; }
.posh-reqs ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.posh-reqs li { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; }
.posh-reqs li > .dot-status { flex: none; margin-top: 6px; }
.posh-reqs .cell-stack .main a { color: var(--color-primary-700); text-decoration: none; }
.posh-reqs .posh-hint { margin-top: 10px; }

.posh-footer { margin-top: 26px; text-align: center; color: var(--color-text-subtle); font-size: 12px; line-height: 1.6; }

/* The next task as a bar on narrow screens, once the right column has folded
   under the hero and scrolled away. */
.posh-sticky { display: none; }

/* ---------- Dialogs ------------------------------------------------------------ */
.posh-dlg-h { margin: 18px 0 10px; font-size: 13px; font-weight: 600; }
.posh-dlg-h:first-child { margin-top: 0; }
.posh-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.modal-body .posh-fgrid > .field + .field { margin-top: 0; }
.posh-f-wide { grid-column: 1 / -1; }
.posh-f-phone { max-width: 200px; }
.posh-f-swift { max-width: 170px; }
.posh-f-cur { width: auto; min-width: 96px; }
.posh-pline { padding: 10px 12px; background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius); font-size: 13px; }
.posh-pgrid { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; }
.modal-body .posh-pgrid > .field + .field { margin-top: 0; }
.modal-body .posh-pgrid + .field { margin-top: 14px; }
.posh-unit { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.posh-unit .input { width: 84px; text-align: right; }
.posh-date { width: 160px; }
.posh-split { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.posh-split .switch-field { color: var(--color-text); }
.posh-split__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.posh-split__rows[hidden] { display: none; }
.posh-split__row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 8px 12px; background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius);
}
.posh-split__row .input { background-color: var(--color-surface); }
.posh-split__n { font-size: 12px; font-weight: 600; min-width: 76px; }
.posh-split__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.posh-split__foot .posh-hint { margin: 0; }

/* ---------- Print --------------------------------------------------------------- */
@media print {
  .posh-top, .posh-mail, .posh-hero-actions, .posh-nav, .posh-aside, .posh-sticky,
  .posh-compose, .posh-drop, .posh-upload, .btn { display: none !important; }
  body { background: var(--color-surface); }
  .posh-wrap { max-width: none; padding: 0; }
  .posh-layout { display: block; }
  .posh-hero, .posh-card { box-shadow: none; }
  .posh-sec { break-inside: avoid; }
}

/* ---------- Responsive ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .posh-prefs { margin-left: 0; order: 3; flex-basis: 100%; }
  .posh-powered { margin-left: auto; }
  .posh-aside { top: 104px; }
  .posh-sec { scroll-margin-top: 104px; }
}
@media (max-width: 1000px) {
  /* One column: the right column takes its place straight under the hero,
     ahead of the order card, and the bottom bar carries the next task. */
  .posh-layout { display: flex; flex-direction: column; align-items: stretch; }
  .posh-main { display: contents; }
  .posh-hero { order: 0; }
  .posh-aside { order: 1; position: static; margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .posh-card { order: 2; }
  .posh-footer { order: 3; }
  .posh-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }
  .posh-sticky-in { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 12px; }
  .posh-sticky__what { font-size: 14px; font-weight: 600; min-width: 0; }
  .posh-sticky__what span { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
  .posh-sticky .btn { margin-left: auto; min-height: 44px; flex: none; }
  .posh-wrap { padding-bottom: 96px; }
}
@media (max-width: 768px) {
  /* On a phone the strip scrolls away: three rows of chrome held at the top
     would cost a fifth of the screen. The sections anchor to the top edge. */
  .posh-top { padding: 10px 16px; position: static; }
  .posh-mail { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: start; gap: 4px 10px; }
  .posh-mail svg { margin-top: 2px; }
  .posh-mail .posh-link { grid-column: 2; justify-self: start; }
  .posh-wrap { padding: 14px 16px 96px; }
  .posh-hero { padding: 18px 16px; }
  .posh-sec { padding: 16px; }
  .posh-load, .posh-ship, .posh-decide, .posh-company, .posh-join, .posh-fgrid { grid-template-columns: 1fr; }
  .posh-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .posh-quote__acts { grid-column: 1 / -1; }
  .posh-join__act { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .posh-pref .select { min-height: 36px; }
  .posh-hero-actions .btn, .posh-decide__row .btn, .posh-task__form .btn, .posh-drop .btn,
  .posh-upload .btn, .posh-compose__row .btn, .posh-quote__acts .btn, .posh-bal__acts .btn,
  .posh-sec__acts .btn, .posh-photos-row .btn, .posh-code .btn, .posh-join__act .btn,
  .posh-mail-preview__acts .btn { min-height: 44px; }
  .posh-link { min-height: 32px; }
  /* Every document row breaks the same way: the name on its own line, the
     version, source and actions on the next. */
  .posh-docs .po-doc { flex-wrap: wrap; }
  .posh-docs .po-doc__name { flex-basis: calc(100% - 36px); }
  .posh-docs .po-doc__ver { margin-left: 34px; }
  .posh-sec { scroll-margin-top: 12px; }
}
@media (max-width: 480px) {
  .posh-aside { grid-template-columns: 1fr; }
  .posh-hero h1 { font-size: 23px; }
  .posh-hero-actions { margin-left: 0; width: 100%; }
  .posh-figs { gap: 6px 16px; }
  .posh-fig b { font-size: 15px; }
  .posh-line { flex-wrap: wrap; }
  .posh-line__end { flex-basis: 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; text-align: left; padding-left: 86px; }
  .posh-line__sum { margin: 0 0 0 auto; }
  .posh-sec__sub, .posh-sec__acts { margin-left: 0; flex-basis: 100%; }
  .posh-code__f--code, .posh-code__f--name, .posh-f-type, .posh-decide__reason, .posh-f-cont { width: 100%; }
  .posh-join__gets { grid-template-columns: 1fr; }
  .posh-quote { grid-template-columns: 1fr; }
  .posh-bal__rep { flex-wrap: wrap; }
  .posh-bal__rep a { margin-left: 0; flex-basis: 100%; padding-left: 38px; }
  .posh-msg--you, .po-thread .po-thread__msg:not(.posh-msg--you) { max-width: 100%; }
  .posh-compose__row .btn-primary { margin-left: 0; }
  .posh-sticky-in { padding: 10px 16px; }
  .posh-pref--word { white-space: normal; }
  .posh-pgrid { flex-direction: column; }
  /* A document row: the name, then version, source and actions on one line. */
  .posh-docs .po-doc__acts { flex-basis: auto; margin-left: auto; }
}

/* Flex items in the one-column layout may never grow past the column. */
.posh-hero, .posh-card, .posh-aside, .posh-footer { min-width: 0; max-width: 100%; }