/* The product frame — open.gismo's own espresso theme, fixed light in both
   report modes, because a mock of a product should look like the product.
   Tokens lifted from open.gismo site/src/style.css section 1 (D-APP1):
   #271810 rail · #faf6f1 paper · #c2410c accent. Namespaced --og-* so they
   never leak into the report chrome around them. */

.og {
  --og-side: #271810;
  --og-side-ink: #f5ede4;
  --og-side-soft: #c4a995;
  --og-paper: #faf6f1;
  --og-panel: #f5efe7;
  --og-card: #ffffff;
  --og-ink: #2a211b;
  --og-muted: #6b5d52;
  --og-faint: #a3958a;
  --og-accent: #c2410c;
  --og-accent-bright: #f97316;
  --og-rule: #ece2d7;
  --og-good: #166534; --og-good-bg: #dcfce7; --og-good-rule: #bbf7d0;
  --og-warn: #92400e; --og-warn-bg: #fef3c7; --og-warn-rule: #fde68a;
  --og-bad: #b91c1c; --og-bad-bg: #fee2e2; --og-bad-rule: #fecaca;
  --og-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --og-serif: "Iowan Old Style", "Palatino Linotype", Georgia, Cambria, serif;

  background: var(--og-paper);
  color: var(--og-ink);
  border: 1px solid #e0d5c8;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 1.2rem;
  box-shadow: 0 1px 2px rgba(39, 24, 16, .06), 0 14px 34px -20px rgba(39, 24, 16, .35);
  font-size: 15px;
  line-height: 1.55;
}

/* window chrome */
.og-chrome {
  display: flex; align-items: center; gap: .4rem;
  background: #efe6db; border-bottom: 1px solid #e0d5c8;
  padding: .4rem .7rem; font-family: var(--og-mono); font-size: .68rem;
  color: var(--og-muted);
}
.og-chrome i { width: .55rem; height: .55rem; border-radius: 50%; background: #cdbcab; display: block; }
.og-chrome .path { margin-left: .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* app frame */
.og-frame { display: grid; grid-template-columns: 12.5rem 1fr; min-height: 22rem; }
@media (max-width: 55rem) { .og-frame { grid-template-columns: 1fr; } }

.og-side { background: var(--og-side); color: var(--og-side-ink); padding: .9rem .8rem 1.2rem; }
.og-brand {
  font-family: var(--og-serif); font-size: 1.12rem; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: .3rem;
}
.og-brand span { color: var(--og-accent-bright); }
.og-study {
  font-family: var(--og-mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--og-side-soft); margin-top: .3rem;
}
.og-nav { list-style: none; margin: 1rem 0 0; padding: 0; }
.og-nav li { margin-top: .1rem; }
.og-nav span, .og-nav a {
  display: block; padding: .3rem .5rem; border-radius: 7px;
  font-size: .82rem; color: var(--og-side-soft); border: 0;
}
.og-nav .on { background: rgba(249, 115, 22, .16); color: #ffd9be; font-weight: 600; }
@media (max-width: 55rem) {
  .og-side { padding: .8rem .85rem; }
  .og-nav { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .7rem; }
  .og-nav li { margin-top: 0; }
  .og-nav span { font-size: .74rem; padding: .22rem .45rem; }
}

.og-main { padding: 1.1rem 1.05rem 1.4rem; min-width: 0; }
@media (max-width: 30rem) { .og-main { padding: .9rem .8rem 1.2rem; } }

.og-crumb {
  font-family: var(--og-mono); font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--og-faint);
}
.og-h1 {
  font-family: var(--og-serif); font-weight: 400; font-size: clamp(1.35rem, 4.6vw, 1.85rem);
  line-height: 1.15; margin-top: .3rem; letter-spacing: -.01em;
}
.og-sub { color: var(--og-muted); font-size: .87rem; margin-top: .45rem; }
.og-main h3 {
  font-size: .95rem; font-weight: 650; margin: 1.4rem 0 0;
  color: var(--og-ink); letter-spacing: -.005em;
}
.og-main p { margin: .55rem 0 0; }

/* the ledger */
.og-ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .55rem; margin-top: 1rem; }
.og-led {
  background: var(--og-card); border: 1px solid var(--og-rule); border-radius: 11px;
  padding: .7rem .75rem; border-left-width: 4px;
}
.og-led.ok { border-left-color: #16a34a; }
.og-led.warn { border-left-color: #d97706; }
.og-led.part { border-left-color: #0891b2; }
.og-led.bad { border-left-color: #a3a3a3; }
.og-led .n {
  font-family: var(--og-serif); font-size: 1.85rem; line-height: 1;
  display: flex; align-items: baseline; gap: .35rem;
}
.og-led .n em { font-style: normal; font-size: .95rem; font-family: var(--og-mono); }
.og-led .t { font-size: .78rem; font-weight: 650; margin-top: .4rem; }
.og-led .d { font-size: .74rem; color: var(--og-muted); margin-top: .2rem; line-height: 1.4; }

/* readiness verdict */
.og-verdict {
  margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem .75rem; border-radius: 10px; font-size: .82rem;
  background: var(--og-panel); border: 1px solid var(--og-rule);
}
.og-verdict .v {
  font-family: var(--og-mono); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: .12rem .45rem; border-radius: 5px;
}
.og-verdict.notrun .v { background: var(--og-warn-bg); color: var(--og-warn); border: 1px solid var(--og-warn-rule); }
.og-verdict.ran .v { background: var(--og-good-bg); color: var(--og-good); border: 1px solid var(--og-good-rule); }

/* findings */
.og-finding {
  background: var(--og-card); border: 1px solid var(--og-rule); border-radius: 12px;
  margin-top: .8rem; overflow: hidden;
}
.og-finding.blocking { border-color: var(--og-bad-rule); }
.og-fhead {
  display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .85rem;
  border-bottom: 1px solid var(--og-rule); flex-wrap: wrap;
}
.og-fhead .glyph {
  font-size: 1rem; width: 1.5rem; height: 1.5rem; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 6px;
}
.og-fhead .glyph.bad { background: var(--og-bad-bg); color: var(--og-bad); }
.og-fhead .glyph.warn { background: var(--og-warn-bg); color: var(--og-warn); }
.og-fhead .glyph.part { background: #cffafe; color: #155e75; }
.og-fhead .ftitle { flex: 1 1 14rem; min-width: 0; font-weight: 650; font-size: .92rem; line-height: 1.35; }
.og-fhead .fcost {
  font-family: var(--og-mono); font-size: .7rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: 5px; white-space: nowrap;
  background: var(--og-panel); border: 1px solid var(--og-rule); color: var(--og-muted);
}
.og-fbody { padding: .8rem .85rem; }
.og-fbody > p:first-child { margin-top: 0; }

.og-evidence {
  margin-top: .7rem; background: #2b1c12; color: #f2e6da; border-radius: 9px;
  padding: .7rem .75rem; font-family: var(--og-mono); font-size: .715rem;
  line-height: 1.62; overflow-x: auto; white-space: pre;
}
.og-evidence .g { color: #86efac; }
.og-evidence .r { color: #fca5a5; }
.og-evidence .y { color: #fcd34d; }
.og-evidence .d { color: #b39d8a; }
.og-evidence b { color: #fff; font-weight: 600; }

/* the four dispositions */
.og-ask { margin-top: .85rem; padding-top: .75rem; border-top: 1px dashed var(--og-rule); }
.og-ask .q { font-weight: 650; font-size: .87rem; }
.og-disp { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.og-btn {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  padding: .34rem .7rem; border-radius: 8px;
  border: 1px solid var(--og-rule); background: var(--og-card); color: var(--og-ink);
}
.og-btn:hover { border-color: var(--og-accent); color: var(--og-accent); }
.og-btn[aria-pressed="true"] {
  background: var(--og-accent); border-color: var(--og-accent); color: #fff;
}
.og-btn.ghost { color: var(--og-muted); }
.og-btn.ghost[aria-pressed="true"] { background: #57534e; border-color: #57534e; color: #fff; }
.og-outcome {
  margin-top: .6rem; font-size: .82rem; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid var(--og-rule); background: var(--og-panel); line-height: 1.5;
}
.og-outcome.ok { background: var(--og-good-bg); border-color: var(--og-good-rule); color: var(--og-good); }
.og-outcome.bad { background: var(--og-bad-bg); border-color: var(--og-bad-rule); color: var(--og-bad); }
.og-outcome.warn { background: var(--og-warn-bg); border-color: var(--og-warn-rule); color: var(--og-warn); }
.og-outcome b { font-weight: 700; }

.og-reason {
  margin-top: .5rem; width: 100%; font: inherit; font-size: .82rem;
  padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--og-rule);
  background: var(--og-card); color: var(--og-ink); font-family: var(--og-mono);
}

/* candidate list — ordered, never scored */
.og-cands { list-style: none; margin: .6rem 0 0; padding: 0; }
.og-cands li {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: baseline;
  padding: .4rem .55rem; border: 1px solid var(--og-rule); border-radius: 8px;
  margin-top: .35rem; background: var(--og-card); font-size: .82rem;
}
.og-cands .ord {
  font-family: var(--og-mono); font-size: .68rem; color: var(--og-faint);
  width: 1.1rem; flex: 0 0 auto;
}
.og-cands .col { font-family: var(--og-mono); font-weight: 600; }
.og-cands .why { color: var(--og-muted); font-size: .76rem; flex: 1 1 9rem; }
.og-cands .vals { font-family: var(--og-mono); font-size: .72rem; color: var(--og-faint); }

/* small tables inside the product */
.og-tw { overflow-x: auto; margin-top: .8rem; border: 1px solid var(--og-rule); border-radius: 10px; background: var(--og-card); }
.og-tw table { border-collapse: collapse; width: 100%; font-size: .82rem; min-width: 27rem; }
.og-tw thead th {
  text-align: left; font-family: var(--og-mono); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--og-muted); font-weight: 600;
  padding: .5rem .6rem; background: var(--og-panel); border-bottom: 1px solid var(--og-rule);
  white-space: nowrap;
}
.og-tw td { padding: .45rem .6rem; border-bottom: 1px solid var(--og-rule); vertical-align: top; }
.og-tw tr:last-child td { border-bottom: 0; }
.og-tw .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--og-mono); font-size: .78rem; }
.og-tw .mono { font-family: var(--og-mono); font-size: .78rem; }

.og-pill {
  display: inline-flex; align-items: baseline; gap: .25rem; font-size: .72rem;
  font-weight: 650; padding: .08rem .4rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.og-pill.ok { background: var(--og-good-bg); color: var(--og-good); border-color: var(--og-good-rule); }
.og-pill.warn { background: var(--og-warn-bg); color: var(--og-warn); border-color: var(--og-warn-rule); }
.og-pill.bad { background: var(--og-bad-bg); color: var(--og-bad); border-color: var(--og-bad-rule); }
.og-pill.part { background: #cffafe; color: #155e75; border-color: #a5f3fc; }
.og-pill.off { background: var(--og-panel); color: var(--og-muted); border-color: var(--og-rule); }

/* diff */
.og-diff {
  margin-top: .8rem; background: #2b1c12; border-radius: 9px; overflow: hidden;
}
.og-diff .fname {
  font-family: var(--og-mono); font-size: .7rem; color: #c4a995;
  padding: .45rem .7rem; background: #201409; border-bottom: 1px solid #3a281b;
  overflow-x: auto; white-space: nowrap;
}
.og-diff pre {
  margin: 0; padding: .65rem .7rem; overflow-x: auto; color: #f2e6da;
  font-family: var(--og-mono); font-size: .715rem; line-height: 1.62; white-space: pre;
}
.og-diff .plus { color: #86efac; }
.og-diff .minus { color: #fca5a5; }
.og-diff .ctx { color: #b39d8a; }
.og-diff .cmt { color: #93a8bd; }
.og-diff .empty { color: #b39d8a; font-style: italic; }

/* step navigation for the flow page */
.steps {
  display: flex; gap: .35rem; overflow-x: auto; padding: .25rem .1rem .5rem;
  margin-top: 1.2rem; scrollbar-width: thin;
}
.steps button {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; padding: .38rem .65rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.steps button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps button:hover { border-color: var(--accent); }
.steps button .sn { font-family: var(--f-mono); opacity: .75; margin-right: .3rem; }

.stepbar {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  margin-top: 1.2rem; flex-wrap: wrap;
}
.stepbar button {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: .45rem .9rem; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.stepbar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-deep); }
.stepbar button:disabled { opacity: .4; cursor: default; }
.stepbar .pos { font-family: var(--f-mono); font-size: .76rem; color: var(--faint); }

.step { display: none; }
.step.on { display: block; }
.step > .who {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-deep);
}
.step > h3 {
  font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.3rem, 4vw, 1.75rem);
  line-height: 1.15; margin-top: .25rem; letter-spacing: -.01em;
}
.step > .why { margin-top: .7rem; color: var(--muted); font-size: .95rem; max-width: 44rem; line-height: 1.6; }
.step > .after {
  margin-top: 1.1rem; padding: .8rem .9rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); font-size: .88rem; line-height: 1.55;
}
.step > .after .lbl {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .35rem;
}
.step > .after p { margin-top: .55rem; max-width: none; }
.step > .after p:first-of-type { margin-top: 0; }