/* The back-office frame, drawn in CSS.
 *
 * Every label, number, badge and price in here is real HTML text. Only the
 * photographs inside the cards are generated.
 *
 * That split exists because three attempts at having an image model draw a
 * whole screen all failed on the same thing: small text. Text-to-image put
 * "Avaliable" and "Avaiiable" in one column. Image-to-image, handed the real
 * Good Yield screen as reference, carried the layout across beautifully and
 * still wrote "VEHICILS", "Fane" and "INVVENTOREY", stacked a garbled second
 * price row under every card, and cropped the sidebar off. A back office is
 * mostly small text, so the model never gets to draw it.
 *
 * Everything is driven by custom properties, so each industry is a palette and
 * a data set, not a copy of Good Yield in different colours. A Bangkok used-car
 * forecourt and a watch consignment desk do not run the same way and should not
 * look like they do.
 */

.os {
  --os-rail: #1D2B26;          /* sidebar */
  --os-rail-ink: rgba(255,255,255,.62);
  --os-rail-on: #fff;
  --os-rail-hit: rgba(255,255,255,.07);
  --os-paper: #FBF9F4;         /* page */
  --os-card: #fff;
  --os-line: #E7E3DA;
  --os-ink: #16201B;
  --os-mute: #6B7269;
  --os-accent: #0B6B62;        /* the one saturated colour */
  --os-warn: #B4791C;
  --os-serif: 'Trirong', Georgia, serif;

  position: relative;
  display: flex;
  background: var(--os-paper);
  color: var(--os-ink);
  font-size: 12px;
  line-height: 1.45;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}

/* ── rail ────────────────────────────────────────────────────────────────── */
.os-rail {
  flex: 0 0 158px;
  background: var(--os-rail);
  color: var(--os-rail-ink);
  padding: 12px 0 10px;
  display: flex;
  flex-direction: column;
}
.os-brand {
  display: flex; align-items: center; gap: 8px; padding: 0 13px 14px;
}
.os-brand i {
  width: 24px; height: 24px; border-radius: 6px; flex: 0 0 24px;
  background: var(--os-accent); color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: -.02em;
}
.os-brand b { color: var(--os-rail-on); font-size: 12.5px; font-weight: 600; display: block; }
.os-brand small {
  display: block; font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.38); margin-top: 1px;
}
.os-grp {
  font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.3); padding: 10px 13px 5px;
}
.os-rail a {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 13px; color: var(--os-rail-ink); text-decoration: none; font-size: 11.5px;
}
.os-rail a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-rail a em {
  font-style: normal; font-size: 10px; color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
}
.os-rail a.on {
  background: var(--os-rail-hit); color: var(--os-rail-on); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--os-accent);
}
.os-rail a.on em { color: var(--os-rail-on); }
.os-user {
  margin-top: auto; padding: 10px 13px 0; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 7px;
}
.os-user i {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  background: rgba(255,255,255,.14); display: grid; place-items: center;
  font-style: normal; font-size: 9px; color: #fff;
}
.os-user b { color: rgba(255,255,255,.8); font-size: 10.5px; font-weight: 500; display: block; }
.os-user small { display: block; font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.3); }

/* ── main ────────────────────────────────────────────────────────────────── */
.os-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.os-top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--os-line); background: #fff;
}
.os-top h4 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.os-search {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--os-line); border-radius: 7px;
  padding: 4px 10px; color: var(--os-mute); font-size: 11px; min-width: 180px;
}
.os-chip {
  border: 1px solid var(--os-line); border-radius: 999px; padding: 2px 9px;
  font-size: 10px; color: var(--os-mute); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.os-tools {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--os-line); background: #fff;
  font-size: 11px; color: var(--os-mute);
}
.os-tools b { color: var(--os-ink); font-weight: 600; position: relative; padding-bottom: 7px; }
.os-tools b:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--os-ink); border-radius: 2px;
}

.os-hero { padding: 16px 16px 12px; }
.os-eyebrow {
  font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--os-mute); margin-bottom: 7px;
}
.os-hero-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.os-hero h3 {
  font-family: var(--os-serif); font-size: 23px; line-height: 1.16;
  font-weight: 500; letter-spacing: -.01em; flex: 1 1 260px;
}
.os-hero h3 em { font-style: italic; }
.os-stats { display: flex; gap: 22px; }
.os-stats div { white-space: nowrap; }
.os-stats b {
  font-family: var(--os-serif); font-size: 21px; font-weight: 500;
  display: block; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.os-stats b i { font-style: normal; color: var(--os-mute); }
.os-stats small {
  display: block; font-size: 8px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--os-mute); margin-top: 1px;
}

/* ── the gallery. this is the part that does the emotional work ──────────── */
.os-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px;
  padding: 4px 16px 16px;
}
.os-c {
  background: var(--os-card); border: 1px solid var(--os-line);
  border-radius: 9px; overflow: hidden; display: flex; flex-direction: column;
}
.os-ph { position: relative; aspect-ratio: 4 / 3; background: #EFEDE7; }
.os-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.os-badge {
  position: absolute; left: 7px; top: 7px;
  background: rgba(22,32,27,.82); color: #fff;
  font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 2.5px 7px; border-radius: 4px; backdrop-filter: blur(3px);
}
.os-badge.hold { background: rgba(180,121,28,.92); }
.os-badge.gone { background: rgba(107,114,105,.88); }
.os-ref {
  position: absolute; right: 7px; top: 7px;
  background: rgba(255,255,255,.94); color: var(--os-ink);
  font-family: ui-monospace, Menlo, monospace; font-size: 8px;
  padding: 2.5px 6px; border-radius: 4px;
}
.os-tag {
  position: absolute; left: 7px; bottom: 7px;
  background: rgba(255,255,255,.94); color: var(--os-ink);
  font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2.5px 7px; border-radius: 4px;
}
.os-body { padding: 8px 9px 9px; display: flex; flex-direction: column; flex: 1; }
.os-loc {
  font-size: 7.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--os-mute); line-height: 1.5; margin-bottom: 4px;
}
.os-name {
  font-family: var(--os-serif); font-size: 12.5px; font-weight: 500;
  line-height: 1.24; margin-bottom: 5px;
}
.os-spec {
  display: flex; flex-wrap: wrap; gap: 7px; font-size: 9px; color: var(--os-mute);
  margin-bottom: 6px;
}
.os-pill {
  align-self: flex-start; font-size: 8px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  background: #F6EFDD; color: var(--os-warn); margin-bottom: 7px;
}
.os-foot {
  margin-top: auto; padding-top: 7px; border-top: 1px solid var(--os-line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.os-price { font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.os-price sup { font-size: 8px; font-weight: 400; color: var(--os-mute); }
.os-upd { font-size: 8px; color: var(--os-mute); white-space: nowrap; }

@media (max-width: 1000px) { .os-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .os-rail { display: none; }
  .os-grid { grid-template-columns: repeat(2, 1fr); }
  .os-hero h3 { font-size: 19px; }
  /* The stat row is the summary of the whole screen, so it must WRAP rather
     than run off the side. At 390px the fifth stat was being clipped by the
     frame's overflow:hidden and silently lost. */
  .os-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px;
    width: 100%; }
  .os-stats div { white-space: normal; }
  .os-stats b { font-size: 18px; }
  .os-stats small { font-size: 7.5px; letter-spacing: .1em; }
  .os-hero-row { gap: 14px; }
  .os-tools { gap: 10px; font-size: 10.5px; }
}
@media (max-width: 430px) {
  .os-grid { grid-template-columns: 1fr; }
  .os-stats { grid-template-columns: repeat(2, 1fr); }
}