.inventory-demo {
  --demo-ink: #17231f;
  --demo-muted: #52635a;
  --demo-line: #cbd6ce;
  --demo-accent: #245c46;
  --demo-type-meta: 12px;
  --demo-type-ui: 14px;
  --demo-type-body: 16px;
  --demo-type-title: 20px;
  --demo-type-price: 24px;
  --demo-type-display: 32px;
  --demo-space-4: 4px;
  --demo-space-8: 8px;
  --demo-space-12: 12px;
  --demo-space-16: 16px;
  --demo-space-24: 24px;
  --demo-space-32: 32px;
  --demo-radius-control: 8px;
  --demo-radius-panel: 12px;
  --demo-floor-track: 24px;
  --demo-grid-gap: 8px;
  --demo-board-padding: 16px;
  --demo-available-fill: #e1ede5;
  --demo-available-ink: #214b35;
  --demo-available-border: #9cb6a3;
  --demo-held-fill: #f5e9ce;
  --demo-held-ink: #62491b;
  --demo-held-border: #9c7939;
  --demo-sold-fill: #e8eee7;
  --demo-sold-ink: #35463b;
  --demo-sold-border: #91a194;
  --demo-sold-pattern: repeating-linear-gradient(135deg, transparent 0 4px, #c6d0c8 4px 5px);
  container: inventory / inline-size;
  box-sizing: border-box;
  width: 100%;
  max-width: 780px;
  overflow: hidden;
  color: var(--demo-ink);
  background: #fff;
  border: 1px solid var(--demo-line);
  border-radius: var(--demo-radius-panel);
  box-shadow: 0 16px 48px rgb(24 48 37 / 7%), 0 2px 4px rgb(24 48 37 / 3%);
  font-family: inherit;
  font-size: var(--demo-type-ui);
  line-height: 1.5;
  text-align: left;
}
.inventory-demo *, .inventory-demo *::before, .inventory-demo *::after { box-sizing: border-box; }
.inventory-demo button { font-family: inherit; font-size: var(--demo-type-ui); cursor: pointer; letter-spacing: normal; }
.inventory-demo button:focus-visible, .inventory-demo h4:focus-visible { outline: 3px solid var(--demo-accent); outline-offset: 1px; }
.inventory-demo button:disabled { cursor: default; }
.inventory-demo h3, .inventory-demo h4, .inventory-demo h5, .inventory-demo p { margin: 0; }
.inventory-demo .demo-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--demo-space-8) var(--demo-space-16); padding: var(--demo-space-16); border-bottom: 1px solid var(--demo-line); }
.inventory-demo .demo-header > :first-child { flex: 1 1 190px; }
.inventory-demo .demo-project-label { display: block; color: var(--demo-muted); font-size: var(--demo-type-meta); font-weight: 450; }
.inventory-demo .demo-header h3 { margin-top: var(--demo-space-4); font-size: var(--demo-type-title); font-weight: 600; letter-spacing: -.5px; line-height: 1.2; }
.inventory-demo .demo-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--demo-space-8) var(--demo-space-16); }
.inventory-demo .demo-example-badge { display: inline-flex; align-items: center; gap: var(--demo-space-8); color: #496152; background: #f2f5ef; padding: var(--demo-space-4) var(--demo-space-8); border-radius: var(--demo-radius-control); font-size: var(--demo-type-meta); font-weight: 550; }
.inventory-demo .demo-example-badge > span { height: 4px; width: 4px; background: #7c956c; border-radius: 50%; }
.inventory-demo .demo-reset { min-height: 44px; padding: var(--demo-space-8) 0; border: 0; background: transparent; color: var(--demo-muted); font-size: var(--demo-type-ui); text-decoration: underline; text-underline-offset: 3px; }
.inventory-demo .demo-reset:hover { color: var(--demo-ink); }
.inventory-demo .demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--demo-space-12); list-style: none; margin: 0; padding: var(--demo-space-16); border-bottom: 1px solid var(--demo-line); }
.inventory-demo .demo-steps li { display: flex; align-items: center; gap: var(--demo-space-8); color: var(--demo-muted); font-size: var(--demo-type-meta); line-height: 1.4; }
.inventory-demo .demo-steps li > span { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border: 1px solid var(--demo-line); border-radius: 50%; font-size: var(--demo-type-meta); }
.inventory-demo .demo-steps li[aria-current="step"] { color: var(--demo-accent); font-weight: 600; }
.inventory-demo .demo-steps li[aria-current="step"] > span { background: var(--demo-accent); border-color: var(--demo-accent); color: #fff; }
.inventory-demo .demo-steps .demo-step-done > span { background: var(--demo-available-fill); border-color: var(--demo-available-border); color: var(--demo-accent); }
.inventory-demo .demo-context { display: flex; align-items: baseline; gap: var(--demo-space-12); padding: var(--demo-space-12) var(--demo-space-16); background: #f3f6ef; border-bottom: 1px solid var(--demo-line); }
.inventory-demo .demo-context strong { flex-shrink: 0; color: var(--demo-accent); font-size: var(--demo-type-ui); font-weight: 600; }
.inventory-demo .demo-context p { font-size: var(--demo-type-ui); color: var(--demo-muted); line-height: 1.5; }
.inventory-demo .demo-context-developer { background: #f6f1e4; }
.inventory-demo .demo-context-developer strong { color: var(--demo-held-ink); }
.inventory-demo .demo-inventory-view { display: grid; grid-template-columns: minmax(368px, 1.3fr) minmax(264px, 1fr); }
.inventory-demo .demo-board { padding: var(--demo-space-16) var(--demo-board-padding); }
.inventory-demo .demo-board-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--demo-space-8); min-height: 44px; margin-bottom: var(--demo-space-12); }
.inventory-demo .demo-board-heading > :first-child { font-size: var(--demo-type-ui); font-weight: 550; }
.inventory-demo .demo-board-heading > span:last-child { font-size: var(--demo-type-meta); color: var(--demo-muted); }
.inventory-demo .demo-filters { display: flex; flex-wrap: wrap; gap: var(--demo-space-4); margin: 0 0 var(--demo-space-16); }
.inventory-demo .demo-filters button { min-height: 44px; border: 1px solid transparent; border-radius: var(--demo-radius-control); padding: var(--demo-space-8); font-size: var(--demo-type-ui); line-height: 1.4; white-space: nowrap; background: transparent; color: var(--demo-muted); }
.inventory-demo .demo-filters button:hover { background: #f6f8f5; }
.inventory-demo .demo-filters button[aria-pressed="true"] { background: #f3f6f3; border-color: var(--demo-line); color: var(--demo-ink); }
.inventory-demo .demo-unit-grid { display: grid; grid-template-columns: var(--demo-floor-track) repeat(5, minmax(44px, 1fr)); gap: var(--demo-grid-gap); }
.inventory-demo .demo-floor-label { display: flex; justify-content: flex-start; align-items: center; color: var(--demo-muted); font-size: var(--demo-type-meta); font-weight: 550; line-height: 1.4; white-space: nowrap; }
.inventory-demo .demo-unit { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--demo-space-4); min-width: 44px; min-height: 64px; padding: var(--demo-space-8) var(--demo-space-4); border: 1px solid transparent; border-radius: var(--demo-radius-control); font-size: var(--demo-type-ui); line-height: 1.4; transition: box-shadow .15s; }
.inventory-demo .demo-unit-number { font-weight: 600; }
.inventory-demo .demo-unit small { font-size: var(--demo-type-meta); font-weight: 400; opacity: 1; }
.inventory-demo .demo-unit-available, .inventory-demo .demo-swatch-available { background: var(--demo-available-fill); border-color: var(--demo-available-border); color: var(--demo-available-ink); }
.inventory-demo .demo-unit-held, .inventory-demo .demo-swatch-held { background: var(--demo-held-fill); border-color: var(--demo-held-border); border-style: dashed; color: var(--demo-held-ink); }
.inventory-demo .demo-unit-sold, .inventory-demo .demo-swatch-sold { background-color: var(--demo-sold-fill); background-image: var(--demo-sold-pattern); border-color: var(--demo-sold-border); color: var(--demo-sold-ink); }
.inventory-demo .demo-unit:hover:not(:disabled) { box-shadow: 0 0 0 1px currentColor; }
.inventory-demo .demo-unit-selected { border-width: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--demo-accent); }
.inventory-demo .demo-unit-filtered { opacity: 1; }
.inventory-demo .demo-unit-filtered .demo-unit-number, .inventory-demo .demo-unit-filtered small { text-decoration: line-through; }
.inventory-demo .demo-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--demo-space-8) var(--demo-space-12); margin-left: calc(var(--demo-floor-track) + var(--demo-grid-gap)); padding-top: var(--demo-space-16); font-size: var(--demo-type-meta); color: var(--demo-muted); }
.inventory-demo .demo-legend > span { display: inline-flex; align-items: center; gap: var(--demo-space-8); }
.inventory-demo .demo-swatch { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 4px; }
.inventory-demo .demo-swatch-held { border-style: dashed; }
.inventory-demo .demo-detail { padding: var(--demo-space-16); border-left: 1px solid var(--demo-line); background: #fcfdfb; }
.inventory-demo .demo-detail-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--demo-space-8); color: var(--demo-muted); font-size: var(--demo-type-meta); }
.inventory-demo .demo-status { display: inline-flex; align-items: center; gap: var(--demo-space-8); font-size: var(--demo-type-meta); font-weight: 550; }
.inventory-demo .demo-status-available { color: var(--demo-available-ink); }
.inventory-demo .demo-status-held { color: var(--demo-held-ink); }
.inventory-demo .demo-status-sold { color: var(--demo-sold-ink); }
.inventory-demo .demo-detail h4 { margin: var(--demo-space-12) 0 var(--demo-space-4); font-size: var(--demo-type-title); font-weight: 550; line-height: 1.25; letter-spacing: -.45px; }
.inventory-demo .demo-unit-meta { display: flex; flex-wrap: wrap; gap: var(--demo-space-8); color: var(--demo-muted); font-size: var(--demo-type-meta); }
.inventory-demo .demo-plan { display: flex; justify-content: center; align-items: center; min-height: 96px; margin: var(--demo-space-12) 0; }
.inventory-demo .demo-plan svg { display: block; width: 100%; max-width: 208px; height: 112px; overflow: visible; }
.inventory-demo .demo-plan-fill { fill: #f6f7f1; }
.inventory-demo .demo-plan-wall { fill: none; stroke: #63786c; stroke-width: 3; }
.inventory-demo .demo-plan-door { fill: none; stroke: #b3beb3; stroke-width: 1; }
.inventory-demo .demo-plan-window { fill: none; stroke: #f5f8f2; stroke-width: 3.8; }
.inventory-demo .demo-plan-furniture { fill: #e7eddf; stroke: #b6c3ac; stroke-width: 1; }
.inventory-demo .demo-price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--demo-space-8); margin: 0 0 var(--demo-space-16); }
.inventory-demo .demo-price > span { font-size: var(--demo-type-meta); color: var(--demo-muted); }
.inventory-demo .demo-price strong { font-size: var(--demo-type-price); font-weight: 550; line-height: 1.2; letter-spacing: -.5px; }
.inventory-demo .demo-button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: var(--demo-space-8); padding: var(--demo-space-12); border: 1px solid transparent; border-radius: var(--demo-radius-control); font-size: var(--demo-type-ui); font-weight: 550; line-height: 1.4; }
.inventory-demo .demo-button svg, .inventory-demo .demo-approval svg, .inventory-demo .demo-back svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; }
.inventory-demo .demo-button-primary { background: var(--demo-accent); color: #fff; }
.inventory-demo .demo-button-primary:hover:not(:disabled) { background: #194632; }
.inventory-demo .demo-button-secondary { margin-top: var(--demo-space-8); border-color: #a5b7aa; color: var(--demo-accent); background: #fff; }
.inventory-demo .demo-button-secondary:hover:not(:disabled) { background: #f0f5ec; }
.inventory-demo .demo-button:disabled { color: var(--demo-muted); background: #edf0ea; border-color: #cbd6ce; }
.inventory-demo .demo-detail-note { margin: var(--demo-space-12) 0 0; font-size: var(--demo-type-meta); line-height: 1.5; color: var(--demo-muted); }
.inventory-demo .demo-detail-note-success { color: #346047; }
.inventory-demo .demo-approval { margin-top: var(--demo-space-12); padding: var(--demo-space-12); border: 1px solid var(--demo-held-border); border-radius: var(--demo-radius-control); background: #faf5e9; color: var(--demo-held-ink); }
.inventory-demo .demo-approval p { font-size: var(--demo-type-meta); line-height: 1.5; }
.inventory-demo .demo-approval-label { display: block; margin-bottom: var(--demo-space-4); font-size: var(--demo-type-meta); font-weight: 600; }
.inventory-demo .demo-approval strong { font-weight: 600; }
.inventory-demo .demo-approval button { display: flex; align-items: center; gap: var(--demo-space-4); width: 100%; min-height: 44px; padding: var(--demo-space-8) 0 0; border: 0; background: transparent; font-size: var(--demo-type-ui); font-weight: 600; color: var(--demo-held-ink); }
.inventory-demo .demo-approval button span { font-weight: 400; }
.inventory-demo .demo-approval button svg { margin-left: auto; }
.inventory-demo .demo-approval .demo-return-agent { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.inventory-demo .demo-caption { display: flex; align-items: center; gap: var(--demo-space-8); padding: var(--demo-space-12) var(--demo-space-16); border-top: 1px solid var(--demo-line); color: var(--demo-muted); background: #fff; font-size: var(--demo-type-meta); line-height: 1.5; }
.inventory-demo .demo-caption-dot { flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; background: #90a284; }
.inventory-demo .demo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.inventory-demo .demo-offer-view { padding: var(--demo-space-16); }
.inventory-demo .demo-offer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--demo-space-12); padding-bottom: var(--demo-space-16); }
.inventory-demo .demo-back { display: inline-flex; align-items: center; gap: var(--demo-space-8); min-height: 44px; color: var(--demo-muted); background: transparent; border: 0; padding: var(--demo-space-8) 0; font-size: var(--demo-type-ui); }
.inventory-demo .demo-back svg { transform: rotate(180deg); }
.inventory-demo .demo-offer-label { color: var(--demo-muted); font-size: var(--demo-type-meta); }
.inventory-demo .demo-offer-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--demo-space-24); }
.inventory-demo .demo-offer-property h4 { margin: var(--demo-space-12) 0 var(--demo-space-4); font-size: var(--demo-type-price); line-height: 1.2; font-weight: 550; letter-spacing: -.6px; }
.inventory-demo .demo-offer-property > p { color: var(--demo-muted); font-size: var(--demo-type-meta); }
.inventory-demo .demo-plan-large { flex-direction: column; min-height: 160px; padding: var(--demo-space-16) var(--demo-space-8); margin: var(--demo-space-16) 0; border-radius: var(--demo-radius-control); background: #f3f6ef; }
.inventory-demo .demo-plan-large svg { height: 112px; max-width: 240px; }
.inventory-demo .demo-plan-large > span { color: var(--demo-muted); font-size: var(--demo-type-meta); margin-top: var(--demo-space-8); }
.inventory-demo .demo-offer-specs { display: flex; flex-wrap: wrap; gap: var(--demo-space-8) var(--demo-space-24); padding-top: var(--demo-space-8); color: var(--demo-muted); font-size: var(--demo-type-meta); }
.inventory-demo .demo-offer-specs strong { color: var(--demo-ink); font-weight: 550; }
.inventory-demo .demo-offer-terms { padding: 0 0 0 var(--demo-space-24); border-left: 1px solid var(--demo-line); }
.inventory-demo .demo-offer-price { display: block; margin: var(--demo-space-4) 0 var(--demo-space-16); font-size: var(--demo-type-display); line-height: 1.2; font-weight: 550; letter-spacing: -1px; }
.inventory-demo .demo-offer-terms h5 { font-size: var(--demo-type-ui); font-weight: 550; }
.inventory-demo .demo-payments { margin: var(--demo-space-8) 0 0; }
.inventory-demo .demo-payments > div { display: flex; justify-content: space-between; align-items: center; gap: var(--demo-space-8); padding: var(--demo-space-12) 0; border-bottom: 1px solid var(--demo-line); }
.inventory-demo .demo-payments dt { color: var(--demo-muted); font-size: var(--demo-type-meta); }
.inventory-demo .demo-payments dt span { display: inline-block; min-width: 32px; margin-right: var(--demo-space-4); color: var(--demo-ink); font-size: var(--demo-type-meta); font-weight: 550; }
.inventory-demo .demo-payments dd { margin: 0; font-size: var(--demo-type-meta); white-space: nowrap; font-weight: 550; }
.inventory-demo .demo-offer-note { margin: var(--demo-space-16) 0; color: var(--demo-muted); font-size: var(--demo-type-meta); line-height: 1.5; }
.inventory-demo.demo-expanded { max-width: 1100px; }

@container inventory (max-width: 639px) {
  .inventory-demo .demo-inventory-view { grid-template-columns: minmax(0, 1fr); }
  .inventory-demo .demo-context { flex-direction: column; align-items: flex-start; gap: var(--demo-space-4); }
  .inventory-demo .demo-steps li { flex-direction: column; align-items: flex-start; }
  .inventory-demo .demo-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, .8fr); column-gap: var(--demo-space-16); border-left: 0; border-top: 1px solid var(--demo-line); }
  .inventory-demo .demo-detail-top, .inventory-demo .demo-detail h4, .inventory-demo .demo-unit-meta { grid-column: 1 / -1; }
  .inventory-demo .demo-detail-top { justify-content: flex-start; gap: var(--demo-space-16); }
  .inventory-demo .demo-detail .demo-plan { grid-column: 2; grid-row: 4; margin: var(--demo-space-8) 0; min-height: 80px; }
  .inventory-demo .demo-detail .demo-plan svg { height: auto; max-height: 96px; }
  .inventory-demo .demo-price { grid-column: 1; grid-row: 4; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--demo-space-4); margin: var(--demo-space-12) 0; }
  .inventory-demo .demo-detail > .demo-button, .inventory-demo .demo-detail-note, .inventory-demo .demo-approval { grid-column: 1 / -1; }
  .inventory-demo .demo-offer-layout { grid-template-columns: minmax(0, 1fr); gap: var(--demo-space-24); }
  .inventory-demo .demo-offer-terms { padding: var(--demo-space-16) 0 0; border-left: 0; border-top: 1px solid var(--demo-line); }
}
@container inventory (max-width: 379px) {
  .inventory-demo .demo-board { --demo-floor-track: 16px; --demo-grid-gap: 4px; --demo-board-padding: 8px; }
  .inventory-demo .demo-header { padding: var(--demo-space-12); }
  .inventory-demo .demo-steps, .inventory-demo .demo-context, .inventory-demo .demo-detail, .inventory-demo .demo-offer-view, .inventory-demo .demo-caption { padding-inline: var(--demo-space-12); }
}
@container inventory (max-width: 299px) {
  .inventory-demo .demo-board { --demo-board-padding: 4px; }
  .inventory-demo .demo-board-heading { align-items: flex-start; }
  .inventory-demo .demo-board-heading > :first-child { padding-top: var(--demo-space-8); }
  .inventory-demo .demo-unit { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .inventory-demo .demo-unit { transition: none; }
}