/* ==========================================================================
   Order — the client's page (order-share.html)

   Spec: build/pages.md → "16. order-share.html"; model: css/pages/quote-share.css

   A public, credential-free page: no sidebar, no portal header, no account
   chrome. The shell is the one quote-share.html set — sticky tenant strip,
   centred column, hero — and what an order adds that a quote does not is a
   second column: the money. A buyer waiting on a box opens this page to find
   out two things, where the container is and what is still owed before the
   documents come loose, so the balance rides beside the page while the rest
   of it scrolls.

   Everything here is `osh-`. The module's shared vocabulary (a reading as
   words, the status path, a key–value grid, a document row, the fill gauge)
   comes from css/pages/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).
   ========================================================================== */

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

/* ---------- Shell -------------------------------------------------------- */
.osh-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.osh-tenant { display: flex; align-items: center; gap: 10px; }
/* The seller's mark is a company's, so it keeps its initials: app.js paints a
   face on any avatar whose neighbouring text carries a first name, and "San
   Juan" in the strip is one. The image is set inline, hence the !important. */
.osh-tenant .avatar { background: var(--brand-gradient) !important; color: var(--color-surface); font-size: 12px; }
.osh-tenant .n { font-weight: 600; font-size: 14px; }
.osh-tenant .s { font-size: 12px; color: var(--color-text-muted); }
.osh-powered {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--color-text-subtle);
}

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

/* The page is two columns: the order on the left, the balance on the right.
   The right column sticks under the tenant strip, so the amount still owed
   and the way to pay it stay in view down the whole length of the order. */
.osh-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 312px;
  column-gap: 22px; align-items: start;
}
.osh-main { min-width: 0; }
.osh-aside { position: sticky; top: 76px; }

/* ---------- Hero --------------------------------------------------------- */
.osh-hero {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.osh-hero-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.osh-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);
}
.osh-ro svg { width: 13px; height: 13px; }
.osh-hero-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.osh-hero h1 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 8px; }
/* The status line: the badge, the hold word, the ETA and who prepared it,
   each a reading, joined by the module's dot. */
.osh-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.osh-status .osh-prepared { color: var(--color-text-muted); }
.osh-status .osh-prepared strong { color: var(--color-text); font-weight: 600; }
/* Figures read number first, then the word (memory.md §6): "81 slabs". */
.osh-figs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; }
.osh-fig { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.osh-fig b { font-size: 16px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; margin-right: 4px; letter-spacing: -0.01em; }
.osh-path-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.osh-path-note { margin: 8px 0 0; font-size: 11px; color: var(--color-text-subtle); }
/* The way down the page: one row of anchors, a word each, joined by the dot. */
.osh-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 14px; font-size: 12px; }
.osh-nav a { color: var(--color-primary-700); text-decoration: none; font-weight: 500; white-space: nowrap; }
.osh-nav a:hover { color: var(--color-primary-600); }
.osh-nav a:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--color-text-subtle); font-weight: 400; }

/* ---------- The order card ----------------------------------------------- */
/* One white card, the sections inside it divided by hairlines (owner: one big
   card with subsections, never a stack of separate cards). */
.osh-card {
  margin-top: 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.osh-sec { padding: 20px 24px 22px; }
.osh-sec + .osh-sec { border-top: 1px solid var(--color-border); }
.osh-sec__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.osh-sec__head h2 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
.osh-sec__sub { margin-left: auto; font-size: 12px; color: var(--color-text-muted); }
.osh-sec__sub strong { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.osh-sec__intro { margin: -6px 0 14px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.osh-sec--quiet { padding-top: 16px; padding-bottom: 16px; }
.osh-sec--quiet h2 { font-size: 14px; }
.osh-muted { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.osh-muted svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--color-text-subtle); }
/* A nested box inside the white card stands on the control ground (memory.md §13). */
.osh-box {
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); padding: 14px 16px;
}
.osh-box h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
/* Fields on a control-coloured box invert back to white (memory.md §13, the
   third readable level). */
.osh-box .input, .osh-box .select, .osh-box .textarea { background-color: var(--color-surface); }

/* ---------- Your Order: lines by material --------------------------------- */
/* The shape showroom-workspace.html's On Water block draws: a shelf per
   material family, each line a photo, what it is, and what it costs. No verbs. */
.osh-shelf + .osh-shelf { margin-top: 18px; }
.osh-shelf__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.osh-shelf__head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.osh-shelf__head span { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.osh-lines { list-style: none; margin: 0; padding: 0; }
.osh-line { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.osh-line__img {
  width: 72px; height: 54px; flex: none; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--color-border);
  background: var(--color-control);
}
.osh-line__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osh-line__what { flex: 1; min-width: 0; }
.osh-line__name { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.osh-line__meta { display: block; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; font-variant-numeric: tabular-nums; }
.osh-line__meta b { font-weight: 500; color: var(--color-text); }
.osh-line__end { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.osh-line__price { display: block; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.osh-line__price b { font-weight: 600; color: var(--color-text); }
.osh-line__sum { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; white-space: nowrap; }
/* Totals under the lines, the way quote-share.css draws them. */
.osh-totals { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.osh-trow { display: flex; align-items: baseline; gap: 12px; font-size: 13px; padding: 3px 0; }
.osh-trow .l { color: var(--color-text-muted); }
.osh-trow .v { margin-left: auto; font-variant-numeric: tabular-nums; }
.osh-trow .v.is-paid { color: var(--color-success-ink); }
.osh-trow--grand { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 10px; font-size: 17px; font-weight: 600; }
.osh-trow--grand .l { color: var(--color-text); }
.osh-terms { margin: 14px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.55; }
.osh-terms strong { color: var(--color-text); font-weight: 600; }
/* The container, as the buyer sees it: the gauge from orders.css inside a
   two-column block with the box's own facts beside it. */
.osh-load { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; margin-top: 16px; }
.osh-load .ord-fill { max-width: none; }
.osh-sub-h { margin: 0 0 10px; font-size: 13px; font-weight: 600; }

/* ---------- Approval ------------------------------------------------------ */
.osh-approvals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.osh-approval { display: flex; flex-direction: column; gap: 10px; }
.osh-approval__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.osh-approval__head h3 { margin: 0; }
.osh-approval__head .badge { margin-left: auto; }
.osh-approval .ord-kv { font-size: 12px; }
/* The signature as it was drawn: a stroke in the hand font the site ships,
   on a white strip inside the control box, with the record of the signing
   under it. Nothing here is a control, so the strip may be white: it is the
   paper the signature went on. */
.osh-sign {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.osh-sign__hand { font-family: 'Caveat', 'Allura', cursive; font-size: 28px; line-height: 1; color: var(--color-text); white-space: nowrap; }
.osh-sign__meta { font-size: 11px; color: var(--color-text-muted); line-height: 1.5; }
.osh-sign__meta strong { color: var(--color-text); font-weight: 600; }
.osh-sign svg { width: 16px; height: 16px; color: var(--color-success); flex: none; margin-left: auto; }
.osh-policy { margin: 12px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.55; }
.osh-policy strong { color: var(--color-text); font-weight: 600; }

/* ---------- Tracking ------------------------------------------------------ */
.osh-track { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 22px; }
.osh-map {
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); overflow: hidden;
}
.osh-map__note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 11px; color: var(--color-text-subtle); }
.osh-map__note svg { width: 13px; height: 13px; flex: none; }
.osh-track__facts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.osh-track__facts .osh-map__note { margin: 0; }
.osh-track__arrival { margin-top: 14px; }
.osh-track__arrival h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.osh-eta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.osh-eta b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.osh-eta span { font-size: 12px; color: var(--color-text-muted); }
.osh-eta .is-ok { color: var(--color-success-ink); font-weight: 500; }
/* The milestones, estimated or actual, told apart by the dot and by the word. */
.osh-milestones { margin-top: 18px; }
.osh-milestones h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.osh-milestones .ord-timeline__text .est { color: var(--color-text-subtle); font-size: 12px; }
.osh-milestones .ord-timeline__text .src { font-size: 11px; color: var(--color-text-subtle); }
.osh-photos-row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 14px; }
.osh-photos-row .ord-photos { grid-template-columns: repeat(6, 60px); flex: none; }
.osh-photos-row .ord-photos img, .osh-photos-row .ord-photos__more { width: 60px; height: 60px; }
.osh-photos-row p { margin: 0; flex: 1 1 240px; min-width: 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
/* Which messages the buyer gets: a switch, then its word (memory.md §5), in
   a row that wraps. Nothing boxed behind a switch. */
.osh-notify { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.osh-notify h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.osh-notify__row { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.osh-notify__row .switch-field { font-size: 12px; color: var(--color-text); }
.osh-notify__to { margin: 10px 0 0; font-size: 11px; color: var(--color-text-subtle); }

/* ---------- Documents ----------------------------------------------------- */
.osh-docs .ord-doc { gap: 12px; padding: 10px 0; flex-wrap: nowrap; }
.osh-docs .ord-doc__name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.osh-docs .ord-doc__ref { font-size: 11px; color: var(--color-text-subtle); font-weight: 400; }
.osh-docs .ord-doc__ref a { color: var(--color-primary-700); text-decoration: none; }
.osh-docs .ord-doc--held .ord-doc__ico { opacity: .45; }
.osh-docs .ord-doc--held .ord-doc__name { color: var(--color-text-muted); }
.osh-held { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.osh-held svg { width: 13px; height: 13px; }
.osh-docs__note { margin: 12px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.55; }
.osh-docs__note strong { color: var(--color-text); font-weight: 600; }

/* ---------- Invoices & Payments ------------------------------------------- */
.osh-invoices { list-style: none; margin: 0; padding: 0; }
.osh-inv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 13px; }
.osh-inv:first-child { border-top: 0; padding-top: 0; }
.osh-inv .cell-stack { flex: 1; min-width: 180px; }
.osh-inv__amt { text-align: right; font-variant-numeric: tabular-nums; min-width: 120px; }
.osh-inv__amt b { display: block; font-weight: 600; }
.osh-inv__amt span { display: block; font-size: 11px; color: var(--color-text-muted); }
.osh-inv__acts { display: inline-flex; gap: 6px; flex: none; }
.osh-inv .badge { flex: none; }
.osh-pay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.osh-pay .ord-kv { font-size: 12px; }
.osh-pay .ord-kv dd { font-variant-numeric: tabular-nums; }
.osh-pay .ord-kv dd.is-ref { font-weight: 600; }
.osh-copy { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; color: var(--color-primary-700); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.osh-copy svg { width: 12px; height: 12px; }
.osh-copy:hover { color: var(--color-primary-600); }
/* The report-a-transfer form: fields sized to what goes in them (memory.md §9). */
.osh-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.osh-form .field--wide { grid-column: 1 / -1; }
.osh-form .field--amount .input { max-width: 170px; }
.osh-form .field--date .input { max-width: 170px; }
.osh-form .field--short .input { max-width: 220px; }
.osh-form .field--short .select { max-width: 270px; }
.osh-form .field--pick .select { max-width: 300px; }
/* Proof of transfer: the native file input is hidden (its own text clips);
   a house button opens it and the chosen file's name reads beside it. */
.osh-file { display: flex; align-items: center; gap: 8px; min-width: 0; }
.osh-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.osh-file .btn { flex: none; }
.osh-file__name { min-width: 0; font-size: 11px; line-height: 1.35; color: var(--color-text-muted); overflow-wrap: anywhere; }
.osh-form__acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.osh-form__acts .osh-hint { margin: 0; }
.osh-hint { margin: 6px 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.5; }
.osh-hint strong { color: var(--color-text-muted); font-weight: 500; }
/* A method the tenant does not offer this client is drawn and said to be
   unavailable, not left out: the buyer should see the choice exists. */
.osh-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.osh-methods .btn[disabled] { opacity: .5; cursor: not-allowed; }
.osh-methods__why { font-size: 12px; color: var(--color-text-muted); }
.osh-promise { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.osh-promise .field { width: 170px; }
.osh-promise p { margin: 0 0 0 auto; font-size: 12px; color: var(--color-text-muted); flex-basis: 100%; }
.osh-promise .btn { margin-bottom: 0; }
/* The thread about this invoice, kept against it. The rep's words on the
   card's white, the buyer's on the control ground and banked right. */
.osh-thread { margin-top: 16px; padding: 12px; background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius); }
.osh-thread h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.osh-msgs { display: flex; flex-direction: column; gap: 8px; }
.osh-msg { max-width: 86%; padding: 8px 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.osh-msg--you { margin-left: auto; background: var(--color-primary-50); border-color: var(--color-border-strong); }
.osh-msg-head { display: flex; align-items: baseline; gap: 7px; font-size: 11px; }
.osh-msg-head strong { font-weight: 600; }
.osh-msg-when { color: var(--color-text-subtle); }
.osh-msg-text { margin: 3px 0 0; font-size: 12px; line-height: 1.5; }
.osh-compose { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.osh-compose textarea { flex: 1; resize: vertical; font: inherit; font-size: 12px; background-color: var(--color-surface); }

/* ---------- Report a Problem ---------------------------------------------- */
.osh-claim { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.osh-claim__policy { font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }
.osh-claim__policy h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.osh-claim__policy ul { margin: 0; padding-left: 16px; }
.osh-claim__policy li + li { margin-top: 4px; }
.osh-claim__policy strong { color: var(--color-text); font-weight: 600; }
/* Qualifying questions: each a two-sided choice, Yes | No, both sides
   labelled, the one in force dark and bold (memory.md §5 exception). */
.osh-qa { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px 16px; align-items: center; font-size: 13px; }
.osh-qa__q { color: var(--color-text); }
/* The lines the claim is about: a check, the material, a count of pieces. */
.osh-pick { display: flex; flex-direction: column; gap: 6px; }
/* A row is a <label> inside a .field, so the field's uppercase label type is
   undone here: these are the record's own words, not a field caption. */
.field .osh-pick__row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 150px; gap: 10px; align-items: center;
  padding: 6px 0; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-text);
}
.osh-pick__row .ord-check { width: 15px; height: 15px; margin: 0; accent-color: var(--color-primary); }
.osh-pick__row .cell-stack .sub { font-size: 11px; }
.osh-pick__qty { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.osh-pick__qty .input { width: 56px; padding: 5px 8px; text-align: right; }
.osh-pick__row.is-final { opacity: .6; }
.osh-pick__row.is-final .sub { color: var(--color-text-muted); }
/* The photo well: a dashed box on the control ground. */
.osh-drop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  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);
}
.osh-drop svg { width: 18px; height: 18px; color: var(--color-text-subtle); flex: none; }
.osh-drop .btn { margin-left: auto; }
.osh-drop__req { flex-basis: 100%; font-size: 11px; color: var(--color-text-subtle); }
.osh-lang { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--color-text-muted); }
.osh-lang .select { width: auto; padding: 4px 26px 4px 9px; font-size: 12px; background-position: right 8px center; }

/* ---------- Join Vava ----------------------------------------------------- */
.osh-join { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 14px 24px; align-items: center; }
.osh-join p { margin: 0; font-size: 13px; line-height: 1.55; }
.osh-join p strong { font-weight: 600; }
.osh-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); }
.osh-join__gets li { display: flex; align-items: center; gap: 7px; }
.osh-join__gets svg { width: 14px; height: 14px; flex: none; color: var(--color-primary); }
.osh-join__act { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.osh-join__act .ord-linked { font-size: 12px; }

/* ---------- The balance (right column) ------------------------------------ */
.osh-bal {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.osh-bal h2 { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); }
.osh-bal__due { margin: 6px 0 2px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.osh-bal__when { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.osh-bal__when .ord-hold { font-size: 12px; }
.osh-bal .ord-fill { margin-top: 14px; max-width: none; }
.osh-bal__rows { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border); }
.osh-bal__rows .osh-trow { font-size: 12px; padding: 2px 0; }
.osh-bal__acts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.osh-bal__note { margin: 12px 0 0; font-size: 11px; color: var(--color-text-subtle); line-height: 1.5; }
.osh-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; }
.osh-bal__rep .avatar { width: 28px; height: 28px; font-size: 11px; }
.osh-bal__rep .n { font-weight: 600; color: var(--color-text); }
.osh-bal__rep .s { color: var(--color-text-muted); }
.osh-bal__rep a { color: var(--color-primary-700); text-decoration: none; margin-left: auto; white-space: nowrap; }

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

/* The balance as a bar across the bottom on narrow screens, where the right
   column has folded under the hero and scrolled away. */
.osh-sticky { display: none; }

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

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
  /* One column: the main column dissolves so the balance can take its place
     straight under the hero, ahead of the order card, and the bottom bar
     carries the figure once it has scrolled away. */
  .osh-layout { display: flex; flex-direction: column; }
  .osh-main { display: contents; }
  .osh-hero { order: 0; }
  .osh-aside { order: 1; position: static; margin-top: 16px; }
  .osh-card { order: 2; }
  .osh-footer { order: 3; }
  .osh-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: 0 -2px 12px rgba(0, 0, 0, 0.06);
  }
  .osh-sticky-in { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 12px; }
  .osh-sticky__amt { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .osh-sticky__amt span { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
  .osh-sticky .btn { margin-left: auto; }
  .osh-wrap { padding-bottom: 96px; }
}
@media (max-width: 768px) {
  .osh-top { padding: 10px 16px; }
  .osh-wrap { padding: 16px 16px 96px; }
  .osh-hero { padding: 18px 16px; }
  .osh-sec { padding: 16px; }
  .osh-track, .osh-claim, .osh-pay, .osh-approvals, .osh-load, .osh-form { grid-template-columns: 1fr; }
  .osh-join { grid-template-columns: 1fr; }
  .osh-join__act { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .field .osh-pick__row { grid-template-columns: 16px minmax(0, 1fr); }
  .osh-pick__qty { grid-column: 2; }
  .osh-inv__acts .btn, .osh-form__acts .btn, .osh-bal__acts .btn, .osh-drop .btn { min-height: 44px; }
  /* Every document row breaks the same way: the name on its own line, the
     version, state and action on the next. One shape beats a random one. */
  .osh-docs .ord-doc { flex-wrap: wrap; }
  .osh-docs .ord-doc__name { flex-basis: calc(100% - 36px); }
  .osh-docs .ord-doc__ver { margin-left: 36px; }
}
@media (max-width: 480px) {
  .osh-hero h1 { font-size: 23px; }
  .osh-hero-actions { margin-left: 0; width: 100%; }
  .osh-figs { gap: 6px 16px; }
  .osh-fig b { font-size: 15px; }
  .osh-line { flex-wrap: wrap; }
  .osh-line__end { flex-basis: 100%; display: flex; justify-content: space-between; text-align: left; padding-left: 86px; }
  .osh-line__sum { margin-top: 0; }
  .osh-sec__sub { margin-left: 0; flex-basis: 100%; }
  .osh-join__gets { grid-template-columns: 1fr; }
  .osh-qa { grid-template-columns: 1fr; gap: 4px; }
  .osh-qa .ord-sides { margin-bottom: 6px; }
  .osh-inv__amt { text-align: left; min-width: 0; }
  .osh-bal__rep { flex-wrap: wrap; }
  .osh-bal__rep a { margin-left: 0; flex-basis: 100%; padding-left: 38px; }
  .osh-photos-row .ord-photos { grid-template-columns: repeat(3, 60px); }
  .osh-powered span { white-space: nowrap; }
  .osh-sticky-in { padding: 10px 16px; }
  .osh-lang { margin-left: 0; }
}

/* ---------- Small resets ---------------------------------------------------- */
/* The "+35" cell of the photo grid is a button here (it opens the gallery), so
   it drops the browser's button face and keeps the grid's own drawing. */
.osh-more { font: inherit; cursor: pointer; padding: 0; }
.osh-more:hover { border-color: var(--color-border-strong); color: var(--color-text); }

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