/* Inventory module page (design node fFsz8). Builds on /styles.css + /module.css; values mirror the
   1440px design. Light page with a sun "replenish loop" band and a dark "ask" band.
   Unlike Recipes, the mockups are real HTML (not exported crops), so they stay crisp and readable. */
:root {
  --spec-line: #2E2C1F;
  --spec-text: #B9B6A6;
  --warn: #E0B800;
  --bad: #FF5A3C;
  --ok: #3DAA6A;
}

/* ---------- Shared bits ---------- */
.inv-ic { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--paper-2); }
.inv-ic .lucide { width: 17px; height: 17px; }
.inv-ic-lg { width: 44px; height: 44px; border-radius: 12px; }
.inv-ic-lg .lucide { width: 22px; height: 22px; }
/* State pills: one per item state. Low and Expiring share the sun tint, like the app. */
.st { flex-shrink: 0; padding: 4px 9px; border-radius: 999px; font: 700 10px/1.3 var(--font-mono); letter-spacing: .5px; white-space: nowrap; }
.st-lg { font-size: 11px; font-weight: 600; letter-spacing: 0; }
.st-sm { padding: 3px 8px; letter-spacing: 0; }
.st-low { background: #FFDF0055; color: #6B5A00; }
.st-empty { background: #12110014; color: var(--ink); }
.st-exp { background: #FF5A3C22; color: #B23A22; }
.st-unk { background: #E8E4D6; color: var(--muted); }
.st-good { background: #5BD38A26; color: #1F7A45; }
/* Stock bar: track + fill, width set inline from the item's level. */
.bar { display: block; height: 4px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--warn); }
.bar-8 { height: 8px; border-radius: 4px; }
.bar-good i { background: var(--ok); }
.inv-head-800 { width: 800px; }
.inv-lede-400 { width: 400px; color: var(--ink); }

/* ---------- Hero ---------- */
.inv-hero { overflow: hidden; }
.inv-hero-in { position: relative; max-width: 1440px; margin-inline: auto; min-height: 840px; }
.inv-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; width: 620px; padding: 120px 0 96px 64px; box-sizing: content-box; }
.inv-hero-art { position: absolute; top: 0; right: 0; width: min(720px, 50vw); aspect-ratio: 720 / 840; }
.inv-sun { position: absolute; left: 54.17%; top: 0; width: 45.83%; height: 71.43%; background: var(--sun); }
.inv-photo { position: absolute; left: 11.11%; top: 10%; width: 80%; height: 80.95%; }
.inv-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.inv-need-l { position: absolute; left: 0; top: 45.24%; width: 380px; }
.inv-toast-l { position: absolute; right: 13.89%; top: 15.48%; width: 320px; }
.motion .inv-hero-art .layer > * { opacity: 0; }

.inv-need { border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px #12110029; overflow: hidden; }
.inv-need-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.inv-need-head h2 { font: 700 18px/1.2 var(--font-display); letter-spacing: -.4px; }
.inv-need-head p { margin-top: 2px; font: 400 11px/1.3 var(--font-mono); color: var(--muted); }
.inv-addall { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.inv-addall .lucide { width: 13px; height: 13px; color: var(--sun); }
.inv-need li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.inv-need li + li { border-top: 1px solid var(--line); }
.inv-need li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.inv-need strong { font-size: 14px; font-weight: 600; line-height: 1.2; }
.inv-need .d { font: 400 11px/1.3 var(--font-mono); color: var(--muted); }

.inv-toast { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--ink); box-shadow: 0 12px 30px #12110040; }
.inv-toast > span { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--sun); }
.inv-toast > span .lucide { width: 17px; height: 17px; }
.inv-toast div { display: flex; flex-direction: column; gap: 2px; }
.inv-toast strong { font-size: 13px; font-weight: 600; color: #fff; }
.inv-toast em { font: 400 11px/1.3 var(--font-mono); font-style: normal; color: var(--spec-text); }

/* ---------- Spec bar ---------- */
.inv-specs { background: var(--ink); }
.inv-specs-in { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 48px; }
.inv-specs-in li { display: flex; flex-direction: column; gap: 8px; padding-inline: 32px; }
.inv-specs-in li:first-child { padding-left: 0; }
.inv-specs-in li + li { border-left: 1px solid var(--spec-line); }
.inv-specs-in strong { font: 700 40px/1.3 var(--font-mono); letter-spacing: -1px; color: var(--sun); white-space: nowrap; }
.inv-specs-in b { font-size: 15px; font-weight: 600; line-height: 1.2; color: #fff; }
.inv-specs-in span { font-size: 14px; line-height: 1.45; color: var(--spec-text); }

/* ---------- States: six labels standing on one shelf ---------- */
.inv-states { padding-block: 120px; }
.inv-shelf { overflow-x: auto; }
.inv-shelf:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.inv-shelf-in { min-width: 1120px; }
/* Each label is a card with its description under the shelf board. The card face is a ::before
   154px tall (the design's label height) and the board runs across the whole grid at that line,
   so card, board and description stay aligned at any width. */
.inv-tags { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 16px; padding-inline: 24px; }
.inv-tags::before { content: ""; position: absolute; left: 0; right: 0; top: 154px; height: 14px; border-radius: 3px; background: var(--ink); }
.inv-tags li { --edge: var(--line); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 0; }
.inv-tags li::before { content: ""; position: absolute; inset: 0 0 auto; height: 154px; border-radius: 14px 14px 4px 4px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--edge); }
.inv-tags li > * { position: relative; }
.inv-tags .h { display: flex; align-items: center; justify-content: space-between; }
.inv-tags .inv-ic { width: 32px; height: 32px; border-radius: 8px; }
.inv-tags .inv-ic .lucide { width: 16px; height: 16px; }
.inv-tags strong { font-size: 15px; font-weight: 700; line-height: 1.2; }
.inv-tags .bar { height: 6px; border-radius: 3px; }
.inv-tags .q { margin-bottom: -10px; font: 600 11px/1.3 var(--font-mono); color: var(--ink-2); }  /* 2px to the line below */
.inv-tags .s { font: 400 11px/1.3 var(--font-mono); color: var(--muted); }
/* 16px card padding + 14px board + 18px gap below it, minus the flex gap. */
.inv-tags p { margin: 36px -16px 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.inv-tags .t-exp { --edge: var(--bad); }
.inv-tags .t-empty { --edge: var(--ink); }
.inv-tags .t-warn { --edge: var(--warn); }
.inv-tags .t-unk { --edge: var(--muted); }
.t-exp .bar i { background: var(--bad); }
.t-good .bar i { background: var(--ok); }
.inv-urgency { display: flex; justify-content: space-between; padding: 24px 24px 0; font: 600 11px/1.3 var(--font-mono); letter-spacing: 1px; color: var(--muted); }

/* ---------- The replenish loop ---------- */
.inv-loop { background: var(--sun); padding-block: 120px; }
.inv-loop .kicker { color: var(--ink-2); }
.inv-flow { display: grid; grid-template-columns: 1fr 72px 1fr 72px 1fr; align-items: center; }
.inv-step { border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); overflow: hidden; }
.inv-step-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--ink); font-size: 13px; font-weight: 600; color: #fff; }
.inv-step-h b { font: 700 12px/1.3 var(--font-mono); color: var(--sun); }
.inv-step-h .lucide { width: 15px; height: 15px; }
.inv-step-b { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.inv-item { display: flex; align-items: center; gap: 12px; }
.inv-item div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-item strong { font-size: 16px; font-weight: 700; line-height: 1.2; }
.inv-item div span { font: 400 11px/1.3 var(--font-mono); color: var(--muted); }
.inv-levels { display: flex; justify-content: space-between; margin: 0; }
.inv-levels div { display: flex; flex-direction: column; gap: 2px; }
.inv-levels dt { font: 600 10px/1.3 var(--font-mono); letter-spacing: .5px; color: var(--muted); }
.inv-levels dd { margin: 0; font: 700 15px/1.3 var(--font-mono); }
.inv-list-h { display: flex; align-items: center; justify-content: space-between; }
.inv-list-h strong { font: 700 20px/1.2 var(--font-display); letter-spacing: -.4px; }
.inv-list-h span, .inv-rows .q, .inv-log em { font: 400 11px/1.3 var(--font-mono); font-style: normal; color: var(--muted); }
.inv-rows li, .inv-log li { display: flex; align-items: center; gap: 12px; padding-block: 11px; border-top: 1px solid var(--line); }
.inv-log li { gap: 10px; padding-block: 9px; }
.inv-rows strong { flex: 1; font-size: 14px; font-weight: 600; }
.inv-rows .is-done strong { color: var(--muted); text-decoration: line-through; }
.inv-box { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.is-done .inv-box { background: var(--ink); box-shadow: none; color: var(--sun); }
.inv-box .lucide { width: 13px; height: 13px; stroke-width: 3; }
.inv-av { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #3E6E8E; color: #fff; font-size: 11px; font-weight: 700; }
.inv-note { font: 400 11px/1.4 var(--font-mono); color: var(--muted); }
.inv-log b { width: 34px; font: 700 13px/1.3 var(--font-mono); color: var(--ink-2); }
.inv-log b.plus { color: #1F7A45; }
.inv-log span { flex: 1; font-size: 13px; font-weight: 500; }
.inv-conn { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 700 10px/1.3 var(--font-mono); text-align: center; }
.inv-conn span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--ink); color: var(--sun); }
.inv-conn .lucide { width: 18px; height: 18px; }
.inv-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.inv-rules li { display: flex; gap: 16px; }
.inv-rules div { display: flex; flex-direction: column; gap: 6px; }
.inv-rules h3 { font-size: 16px; font-weight: 700; line-height: 1.2; }
.inv-rules p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Rooms ---------- */
.inv-rooms { padding-block: 120px; }
.inv-rooms-in { display: flex; align-items: flex-start; gap: 72px; }
.inv-rooms-copy { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.inv-rooms-copy h2 { font: 800 52px/1 var(--font-display); letter-spacing: -1.8px; }
.inv-kinds { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.inv-kinds > p { font: 600 11px/1.3 var(--font-mono); letter-spacing: 1px; color: var(--muted); }
.inv-kinds ul { display: flex; flex-wrap: wrap; gap: 12px 8px; max-width: 390px; }
/* Tinted pill per kind: the colour at ~12% for the background, full for the icon. */
.inv-kinds li { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 13px; font-weight: 600; }
.inv-kinds .lucide { width: 14px; height: 14px; color: var(--c); }

.inv-plan { flex: 1; min-width: 0; border-radius: 20px; background: var(--card); border: 2px solid var(--ink); overflow: hidden; }  /* a real border: the tinted rooms would paint over an inset shadow */
/* Room borders sit on the inner edges only; the outer 2px is the plan's own border. */
.inv-plan-row { display: grid; grid-template-columns: 340fr 260fr 220fr; height: 300px; }
.inv-plan-row + .inv-plan-row { grid-template-columns: 300fr 320fr 200fr; height: 230px; }
.room { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 20px; border-right: 1.5px solid var(--ink); }
.inv-plan-row:first-child .room { border-bottom: 1.5px solid var(--ink); }
.r-cold { display: grid; grid-template-rows: 1fr 1fr; }
.r-cold .room { border-right: 0; }
.r-kitchen { background: var(--sun-soft); }
.rh { display: flex; align-items: center; gap: 8px; }
.rh .lucide { width: 18px; height: 18px; }
.rh strong { flex: 1; font: 700 18px/1.2 var(--font-display); letter-spacing: -.4px; }
.r-kitchen .rh strong { font-size: 22px; }
.rh span, .ri { font: 400 11px/1.5 var(--font-mono); color: var(--muted); }
.ri { margin-top: 8px; }
.ra { display: flex; gap: 6px; }
.ra.ok { font: 600 11px/1.3 var(--font-mono); color: #1F7A45; }
.r-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; background: var(--paper); text-align: center; }
.r-add span { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.r-add strong { font-size: 14px; font-weight: 600; }
.r-add em { font: 400 11px/1.3 var(--font-mono); font-style: normal; color: var(--muted); }

/* ---------- Ask ---------- */
.inv-ask { background: var(--ink); padding-block: 120px; }
.inv-ask-in { display: flex; align-items: center; gap: 80px; }
.inv-chat { width: 600px; flex-shrink: 0; border-radius: 20px; background: #fff; overflow: hidden; color: #1F1F1F; }
.inv-chat-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #ECECEC; }
.inv-claude { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.inv-claude .lucide { color: #D97757; }
.inv-fw { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--sun-soft); font-size: 12px; font-weight: 600; color: var(--ink); }
.inv-fw span { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--sun); }
.inv-fw .lucide { width: 11px; height: 11px; }
.inv-chat-b { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
.inv-bubble { align-self: flex-end; max-width: 400px; padding: 12px 16px; border-radius: 18px; background: #F0EEE6; font-size: 15px; line-height: 1.5; }
.inv-tool { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #F6F6F4; font: 400 11px/1.3 var(--font-mono); color: #6B6B6B; }
.inv-tool .lucide { width: 13px; height: 13px; }
.inv-tool .ok { color: var(--ok); }
.inv-answer { font-size: 15px; line-height: 1.55; }
.inv-widget { align-self: stretch; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; color: var(--ink); }
.inv-widget-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--paper); }
.inv-widget-h strong { font-size: 13px; font-weight: 700; }
.inv-widget-h span, .inv-widget .q { font: 400 11px/1.3 var(--font-mono); color: var(--muted); }
.inv-widget li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.inv-widget li strong { font-size: 14px; font-weight: 600; }
.inv-widget li em { padding: 2px 6px; border-radius: 4px; background: var(--sun); font: 700 9px/1.3 var(--font-mono); font-style: normal; }
.inv-widget .q { margin-left: auto; }
.inv-composer { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px #E4E4E4; font-size: 14px; color: #8A8A8A; }
.inv-composer span { flex: 1; }
.inv-composer .lucide { width: 18px; height: 18px; }
.inv-ask-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.inv-ask-copy h2 { font: 800 56px/1 var(--font-display); letter-spacing: -2px; color: #fff; }
.inv-body-dark { font-size: 17px; line-height: 1.55; color: var(--spec-text); }
.inv-nudges { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.inv-nudges > p { margin-bottom: 4px; font: 600 11px/1.3 var(--font-mono); letter-spacing: 1px; color: var(--spec-text); }
.inv-nudges ul { display: flex; flex-direction: column; gap: 10px; }
.inv-nudges li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #1A1910; box-shadow: inset 0 0 0 1px var(--spec-line); }
.inv-push-ic { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--sun); }
.inv-push-ic .lucide { width: 17px; height: 17px; }
.inv-nudges div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-nudges strong { font-size: 14px; font-weight: 600; color: #fff; }
.inv-nudges div span { font-size: 13px; line-height: 1.4; color: var(--spec-text); }
.inv-nudges time { align-self: flex-start; padding-top: 12px; font: 400 11px/1.3 var(--font-mono); color: var(--spec-text); }

/* ================= Responsive ================= */
@media (max-width: 1320px) {
  .inv-hero-copy { width: calc(100% - min(720px, 50vw) - 88px); }
  .inv-head-800 { width: auto; flex: 1; }
  .inv-flow { grid-template-columns: 1fr 56px 1fr 56px 1fr; }
  .inv-step-b { padding: 18px; }
  .inv-rooms-in { gap: 48px; }
  .inv-rooms-copy { width: 360px; }
  .inv-rooms-copy h2 { font-size: 44px; }
  .inv-ask-in { gap: 56px; }
  .inv-chat { width: 520px; }
  .inv-ask-copy h2 { font-size: 46px; }
}

@media (max-width: 1180px) {
  /* Three steps no longer fit side by side: stack them, arrows point down. */
  .inv-flow { grid-template-columns: minmax(0, 520px); justify-content: center; row-gap: 12px; }
  .inv-conn { flex-direction: row; justify-content: center; }
  .inv-conn .lucide { rotate: 90deg; }
}

@media (max-width: 1080px) {
  .inv-hero-in { min-height: 0; }
  .inv-hero-copy { width: auto; padding: 72px var(--gutter) 40px; }
  .inv-hero-art { position: relative; width: min(600px, 100%); margin-inline: auto; }
  .inv-states, .inv-loop, .inv-rooms, .inv-ask { padding-block: 96px; }
  .inv-specs-in { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .inv-specs-in li:nth-child(3) { border-left: 0; padding-left: 0; }
  .inv-lede-400 { width: 100%; max-width: 620px; }
  .inv-rules { grid-template-columns: 1fr; gap: 28px; }
  .inv-rooms-in { flex-direction: column; align-items: stretch; }
  .inv-rooms-copy { width: auto; max-width: 620px; }
  .inv-ask-in { flex-direction: column-reverse; align-items: stretch; }
  .inv-chat { width: min(600px, 100%); margin-inline: auto; }
}

@media (max-width: 640px) {
  .inv-hero-copy { padding: 48px var(--gutter) 32px; gap: 22px; }
  /* Phone: drop the sun block and toast; the card sits over the bottom of the photo, two rows. */
  .inv-hero-art { aspect-ratio: auto; padding: 0 var(--gutter) 24px; }
  .inv-sun, .inv-toast-l { display: none; }
  .inv-photo { position: relative; left: auto; top: auto; width: 100%; height: 320px; }
  .inv-need-l { position: relative; left: auto; top: auto; width: auto; margin: -120px 16px 0; }
  .inv-need li:nth-child(n+3) { display: none; }
  .inv-specs-in { padding-block: 32px; }
  .inv-specs-in li { padding-inline: 16px; }
  .inv-specs-in li:nth-child(odd) { padding-left: 0; }
  .inv-specs-in strong { font-size: 30px; }
  .inv-states, .inv-loop, .inv-rooms, .inv-ask { padding-block: 72px; }
  .inv-step-b { padding: 16px; }
  .inv-rooms-copy h2 { font-size: 38px; letter-spacing: -1.2px; line-height: 1.04; }
  /* Floor plan: one room per row. */
  .inv-plan-row, .inv-plan-row + .inv-plan-row { display: flex; flex-direction: column; height: auto; }
  .room, .r-cold .room { border-right: 0; border-bottom: 1.5px solid var(--ink); min-height: 120px; }
  .r-add { min-height: 140px; }
  .inv-ask-copy h2 { font-size: 38px; letter-spacing: -1.2px; line-height: 1.04; }
  .inv-ask-copy h2 br { display: none; }
  .inv-body-dark { font-size: 16px; }
  .inv-chat-b { padding: 16px; }
  .inv-tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .inv-tool { max-width: 100%; }
  .inv-widget-h span, .inv-widget li em { display: none; }
}