:root {
  --ink: #172033;
  --muted: #667085;
  --soft: #f6f8fb;
  --panel: #ffffff;
  --line: #d7dee8;
  --blue: #1f6fb2;
  --blue-dark: #154b79;
  --green: #0f766e;
  --gold: #8a5a00;
  --red: #b42318;
  --purple: #6d3fb1;
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #eef3f8;
  color: var(--ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  padding: 10px 11px;
}

label span {
  display: block;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.commerce-shell {
  min-height: 100vh;
  background: #f4f7fb;
}

.store-header {
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.store-brand {
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.store-brand span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #0b2545;
  color: #ffffff;
  font-weight: 800;
}

.store-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.store-nav button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 12px;
  background: transparent;
  color: #475467;
}

.store-nav button.active,
.store-nav button:hover {
  border-color: #b9d8f4;
  color: var(--blue-dark);
  background: #eef7ff;
}

.store-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.store-main {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 24px 28px 44px;
}

.assistant-widget {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 20;
  display: grid;
  justify-items: end;
  gap: 10px;
}

.assistant-tab {
  border: 1px solid #b9d8f4;
  border-radius: 999px;
  background: #0b2545;
  color: #ffffff;
  padding: 11px 15px;
  box-shadow: var(--shadow);
}

.assistant-panel {
  width: min(380px, calc(100vw - 36px));
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(16, 24, 40, 0.18);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.assistant-panel h3 {
  margin: 0;
}

.assistant-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.assistant-panel textarea {
  min-height: 106px;
  resize: vertical;
}

.ticket-created {
  border: 1px solid #b8e7df;
  border-radius: var(--radius);
  background: #ecfbf7;
  color: #0d625b;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.ticket-created span {
  line-height: 1.35;
  font-size: 13px;
}

.store-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.store-title h1 {
  margin: 0;
  font-size: 31px;
  line-height: 1.12;
}

.store-title p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

/* Hero: a storefront banner, not another white card in a stack of white cards.
   The dark panel is what separates "shop" from "console" at a glance. */
.shop-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b2545 0%, #14487f 55%, #1b6ca8 100%);
  border-radius: var(--radius);
  padding: 34px 32px;
  margin-bottom: 18px;
  color: #ffffff;
}

/* Soft light bloom, so the panel is not a flat rectangle of blue. */
.shop-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 211, 252, 0.35) 0%, rgba(125, 211, 252, 0) 70%);
  pointer-events: none;
}

.shop-hero .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.shop-hero .eyebrow {
  color: #7dd3fc;
  margin: 0 0 6px;
}

.shop-hero h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.shop-hero p {
  color: #c7dcf0;
  line-height: 1.5;
  max-width: 640px;
  margin: 10px 0 0;
}

.shop-hero .hero-stats strong {
  color: #ffffff;
}

.shop-hero .hero-stats span {
  color: #9fc3e4;
}

.shop-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* The global rule is `select { width: 100% }`, which makes a flex child demand a
   whole row and pushes the sort control under the search box. Opt out here. */
.shop-controls select {
  width: auto;
  flex: 0 0 auto;
  min-width: 190px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
}

.sidebar {
  background: #0b2545;
  color: #ffffff;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.brand {
  display: grid;
  gap: 8px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e5f4ff, #c6f6d5);
  color: #0b2545;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.brand h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.brand p {
  margin: 0;
  color: #bcd0e6;
  font-size: 12px;
  line-height: 1.45;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-section-title {
  color: #8fb3d9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 6px 4px 0;
  text-transform: uppercase;
}

.nav-button {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8f1fb;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius);
  padding: 12px 12px;
  text-align: left;
  display: grid;
  gap: 3px;
}

.nav-button strong {
  font-size: 14px;
}

.nav-button span {
  font-size: 11px;
  color: #bcd0e6;
}

.nav-button.active {
  background: #ffffff;
  color: #0b2545;
}

.nav-button.active span {
  color: #52677d;
}

.sidebar-note {
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 12px;
  color: #d8e6f7;
  font-size: 12px;
  line-height: 1.45;
}

.sidebar-link {
  margin-top: 8px;
  background: transparent;
  color: #ffffff;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

.sidebar-link.dark {
  color: var(--blue-dark);
}

.main {
  min-width: 0;
  padding: 22px 28px 42px;
}

.guide-shell {
  background: #f8fafc;
}

.guide-sidebar {
  background: #12305a;
}

.loading-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}

.loading-screen .brand-mark {
  margin: 0 auto;
}

.loading-screen h1 {
  margin: 0;
  font-size: 30px;
}

.loading-screen p {
  margin: 0 0 8px;
  color: var(--muted);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: #eef3f8;
}

.login-panel {
  width: min(980px, 100%);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}

.login-panel h1 {
  margin: 0;
  font-size: 30px;
}

.login-panel > p {
  color: var(--muted);
  line-height: 1.45;
}

/* Sign-in failure. Not .api-status: that one is a space-between flex row built
   around a trailing Retry button, which pushes a buttonless message to the far
   edge. This is plain flow text. */
.login-error {
  border-radius: var(--radius);
  border: 1px solid var(--danger-line, #f3c4c4);
  background: var(--danger-bg, #fdf1f1);
  color: var(--danger, #b42318);
  padding: 10px 12px;
  margin: 14px 0 4px;
  font-size: 13px;
}

.login-password {
  display: grid;
  gap: 6px;
  max-width: 340px;
  margin: 18px 0 4px;
}

.login-password label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.login-password input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdff;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
}

.login-password input:focus {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 1px;
}

.login-password input:disabled {
  opacity: 0.6;
}

.login-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 8px;
}

.login-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdff;
  padding: 15px;
  text-align: left;
  display: grid;
  gap: 9px;
}

.login-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #dceeff;
}

.login-card strong {
  font-size: 17px;
}

.login-card small,
.login-card em {
  color: var(--muted);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--blue-dark);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}

.topbar p {
  margin: 7px 0 0;
  color: var(--muted);
  max-width: 850px;
  line-height: 1.45;
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.badge.blue {
  border-color: #b9d8f4;
  color: var(--blue-dark);
  background: #eef7ff;
}

.badge.green {
  border-color: #b8e7df;
  color: #0d625b;
  background: #ecfbf7;
}

.badge.gold {
  border-color: #f3d487;
  color: #6f4700;
  background: #fff8e5;
}

.badge.red {
  border-color: #ffc9c3;
  color: var(--red);
  background: #fff1ef;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.api-status {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.api-status.ok {
  background: #ecfbf7;
  border-color: #b8e7df;
  color: #0d625b;
}

.api-status.error {
  background: #fff1ef;
  border-color: #ffc9c3;
  color: var(--red);
}

.metric-card,
.panel,
.product-card,
.cart-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.metric-card {
  padding: 14px;
}

.metric-card span {
  color: var(--muted);
  font-size: 12px;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: 25px;
}

.metric-card small {
  color: var(--muted);
}

.hero-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: 18px;
  align-items: center;
}

.hero-panel h3 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
}

.hero-panel p {
  color: var(--muted);
  line-height: 1.5;
  max-width: 920px;
}

.hero-proof {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fafc;
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mvp-flow {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.flow-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.flow-step span,
.flow-map span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--blue);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.architecture-diagram {
  display: grid;
  gap: 14px;
}

.architecture-layer {
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 7px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr) minmax(220px, 0.8fr);
  gap: 14px;
}

.architecture-layer:nth-child(2) {
  border-left-color: var(--green);
}

.architecture-layer:nth-child(3) {
  border-left-color: var(--purple);
}

.architecture-layer h3,
.architecture-layer h4 {
  margin: 8px 0;
}

.architecture-layer p {
  color: var(--muted);
  line-height: 1.45;
}

.architecture-layer ul {
  margin: 0;
  padding-left: 18px;
}

.flow-map {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
}

.flow-map div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdff;
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.flow-map p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 13px;
}

.stack-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdff;
  padding: 12px;
  line-height: 1.4;
}

.layout-two {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 390px;
  gap: 16px;
  align-items: start;
}

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.panel {
  padding: 16px;
}

/* Azure HR Demo bridge: simple stacked panels with breathing room. */
.azure-bridge {
  display: grid;
  gap: 16px;
}

/* HR Policy Assistant page: same stacked-panel rhythm as the bridge. */
.hr-assistant {
  display: grid;
  gap: 16px;
}

.hr-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.hr-field span {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.hr-question {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  resize: vertical;
}

/* Read-only provider selectors on the HR page. Display-only: the backend picks
   the provider from server config, so these selects are disabled and exist for
   demo clarity. Two columns on wide screens, stacked on narrow. */
.hr-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .hr-provider-grid {
    grid-template-columns: 1fr;
  }
}

.hr-provider-select:disabled {
  background: #f1f5f9;
  color: #334155;
  cursor: not-allowed;
  opacity: 1;
}

/* HR page "Details" architecture panel. UI-parity port of the Azure hr-portal
   lab .details-* rules, remapped onto the AWS design tokens. Collapsed by
   default (the [hidden] panel is display:none) and expands downward. */
.details-shell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.details-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.details-toggle-copy h3 {
  margin: 0;
  font-size: 18px;
}

.details-toggle-copy p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.details-toggle {
  min-width: 128px;
}

.details-panel {
  border-top: 1px solid var(--line);
  padding: 20px;
  background: var(--soft);
}

.details-panel[hidden] {
  display: none;
}

.details-headline {
  max-width: 980px;
}

.details-headline h3 {
  margin: 0;
  font-size: 18px;
}

.details-headline p:last-child {
  margin: 8px 0 0;
  color: var(--ink);
  line-height: 1.55;
}

.details-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.details-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid #b9d8f4;
  background: #eef7ff;
  color: var(--blue-dark);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 13px;
}

.details-step:not(:last-child)::after {
  content: "->";
  color: var(--muted);
  margin-left: 10px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
}

.details-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px;
}

.details-card h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.details-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel h3 {
  margin: 0;
  font-size: 18px;
}

.panel p {
  color: var(--muted);
  line-height: 1.45;
}

.product-grid {
  display: grid;
  /* auto-fill rather than a fixed count: the grid reflows on its own from phone
     to ultrawide instead of needing a breakpoint per column count. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.product-grid.product-grid-shop {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.product-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16, 42, 74, 0.13);
  border-color: #c7d7e8;
}

/* Square media well. Product photos arrive at different crops, so a fixed square
   with object-fit: cover is what keeps the grid from looking ragged. */
.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, #f7fafd 0%, #e9f1f8 100%);
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.product-card:hover .product-image {
  transform: scale(1.04);
}

.pill-save,
.pill-stock {
  position: absolute;
  top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 5px 9px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.pill-save {
  left: 10px;
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.35);
}

.pill-stock {
  right: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  color: #475467;
}

.pill-stock.low {
  color: #92400e;
  border-color: #fcd34d;
  background: rgba(254, 243, 199, 0.95);
}

.pill-stock.preorder {
  color: #1e40af;
  border-color: #bfdbfe;
  background: rgba(219, 234, 254, 0.95);
}

.product-brand {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.price-now {
  font-size: 21px;
  font-weight: 800;
  color: var(--blue-dark);
  letter-spacing: -0.02em;
}

.price-was {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
}

.price-sub {
  color: var(--muted);
  font-size: 12px;
}

.price-sub strong {
  color: #334155;
}

/* Category chips: a real storefront filter, not a dropdown you have to open. */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chip {
  border: 1px solid var(--line);
  background: #ffffff;
  color: #475467;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.chip:hover {
  border-color: #94b3d4;
  color: var(--blue-dark);
}

.chip.active {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #ffffff;
}

.result-count {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.hero-stats {
  display: flex;
  gap: 26px;
  margin-top: 18px;
}

.hero-stats div {
  display: grid;
  gap: 2px;
}

.hero-stats strong {
  font-size: 22px;
  color: var(--blue-dark);
  line-height: 1;
}

.hero-stats span {
  font-size: 12px;
  color: var(--muted);
}

.search-wrap {
  flex: 1;
  min-width: 240px;
}

.search-wrap input {
  width: 100%;
}

.back-button {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--blue-dark);
  border-radius: var(--radius);
  padding: 9px 11px;
  margin-bottom: 14px;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

.detail-image-panel,
.detail-content,
.confirmation-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.detail-image-panel img {
  width: 100%;
  border-radius: var(--radius);
  background: #eef3f8;
}

.detail-content h2,
.confirmation-panel h2 {
  margin: 10px 0;
  font-size: 30px;
  line-height: 1.15;
}

.detail-content p,
.confirmation-panel p {
  color: var(--muted);
  line-height: 1.5;
}

.detail-price {
  display: grid;
  gap: 4px;
  margin: 16px 0;
}

.detail-price strong {
  font-size: 28px;
  color: var(--blue-dark);
}

.detail-price span {
  color: var(--muted);
}

.product-body {
  padding: 13px;
  display: grid;
  gap: 9px;
}

.product-body h4 {
  margin: 0;
  font-size: 16px;
}

.product-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  min-height: 56px;
}

.product-body small {
  color: var(--muted);
  line-height: 1.35;
  min-height: 34px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-list span {
  background: #eef3f8;
  border: 1px solid var(--line);
  color: #475467;
  border-radius: 999px;
  font-size: 11px;
  padding: 4px 7px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.price {
  font-weight: 800;
  color: var(--blue-dark);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button {
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 9px 11px;
  min-height: 38px;
}

.primary-button {
  background: var(--blue);
  color: #ffffff;
}

.secondary-button {
  background: #475467;
  color: #ffffff;
}

.ghost-button {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line);
}

.danger-button {
  background: #fff1ef;
  color: var(--red);
  border-color: #ffc9c3;
}

.note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 10px 0 0;
}

.cart-panel {
  padding: 16px;
  position: sticky;
  top: 16px;
}

.cart-layout,
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}

.cart-product-line {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.cart-product-line:first-of-type {
  padding-top: 0;
}

.cart-product-line:last-child {
  border-bottom: 0;
}

.cart-product-line img {
  width: 82px;
  height: 62px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--line);
}

.cart-product-line span {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.line-total {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.summary-row span {
  color: var(--muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.qr-checkout {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdff;
  padding: 12px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.qr-checkout p {
  color: var(--muted);
  line-height: 1.4;
}

.payment-form {
  margin-top: 12px;
}

.proof-box {
  min-height: 96px;
  margin-top: 12px;
}

.cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.cart-line:last-child {
  border-bottom: 0;
}

.cart-line strong {
  display: block;
}

.cart-line span {
  color: var(--muted);
  font-size: 12px;
}

.cart-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.total-line {
  display: flex;
  justify-content: space-between;
  margin: 14px 0;
  font-size: 18px;
  font-weight: 800;
}

.checkout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.payment-option {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: #ffffff;
  text-align: left;
}

.payment-option.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #dceeff;
}

.payment-option h4 {
  margin: 0 0 8px;
}

.payment-option p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.qr-demo {
  width: 136px;
  height: 136px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  background: #ffffff;
  margin-top: 10px;
}

.qr-dot {
  background: #0b2545;
}

.qr-dot.light {
  background: #e7edf5;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.table th {
  color: #475467;
  background: #f8fafc;
  font-size: 12px;
}

.case-list {
  display: grid;
  gap: 10px;
}

.case-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: #ffffff;
  display: grid;
  gap: 8px;
}

.case-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #dceeff;
}

.case-card h4 {
  margin: 0;
}

.case-card p {
  margin: 0;
  color: var(--muted);
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  border-left: 3px solid var(--blue);
  padding: 4px 0 4px 12px;
}

.timeline-item strong {
  display: block;
}

.timeline-item span {
  color: var(--muted);
  font-size: 12px;
}

.schema-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.agent-status {
  border: 1px solid #f3d487;
  background: #fff8e5;
  color: #5c3a00;
  border-radius: var(--radius);
  padding: 12px;
  line-height: 1.45;
}

.result-card {
  border: 1px solid #b9d8f4;
  background: #eef7ff;
  border-radius: var(--radius);
  margin-top: 14px;
  padding: 14px;
}

.result-card p {
  color: var(--ink);
}

.compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.compact-grid h4 {
  margin: 0 0 8px;
}

.compact-grid ul {
  margin: 0;
  padding-left: 18px;
}

.stack-list {
  display: grid;
  gap: 12px;
}

.policy-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  padding: 14px;
}

.policy-card h4 {
  margin: 10px 0 8px;
}

.policy-card p {
  margin: 0 0 10px;
}

.policy-card small {
  color: var(--muted);
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.domain-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.domain-card h4 {
  margin: 0 0 8px;
}

.domain-card p {
  margin: 0;
  color: var(--muted);
}

.empty-state {
  border: 1px dashed #aebacc;
  border-radius: var(--radius);
  padding: 18px;
  color: var(--muted);
  background: #fbfdff;
}

@media (max-width: 1120px) {
  .store-header,
  .store-title,
  .shop-hero,
  .shop-controls,
  .product-detail,
  .cart-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .store-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .store-user {
    justify-content: flex-start;
  }

  .assistant-widget {
    right: 14px;
    bottom: 14px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .layout-two,
  .layout-split,
  .hero-panel,
  .architecture-layer,
  .checkout-grid,
  .payment-methods,
  .form-grid,
  .product-grid,
  .domain-grid,
  .dashboard-grid,
  .compact-grid,
  .details-grid,
  .flow-map,
  .login-grid {
    grid-template-columns: 1fr;
  }

  .details-toggle-row {
    flex-direction: column;
    align-items: stretch;
  }

  .details-toggle {
    width: 100%;
  }

  .cart-panel {
    position: static;
  }

  .cart-product-line {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .line-total {
    justify-items: start;
  }

  .topbar {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
 * Landing page and case catalog (public, pre-auth).
 *
 * Scoped entirely under .landing so no existing view can shift. Light theme
 * only, on the variables already defined at the top of this file: the rest of
 * the app has no dark mode, and a landing page that flipped to dark would only
 * make every page clicked into it look broken. Status is carried by label text
 * as well as tone, never by colour alone.
 * ------------------------------------------------------------------------- */

.landing {
  min-height: 100vh;
  background: #eef3f8;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.landing-brand strong {
  display: block;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.landing-brand small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--blue);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.landing-nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-session {
  color: var(--muted);
  font-size: 13px;
}

.landing-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.landing-hero {
  padding: 56px 0 34px;
  max-width: 70ch;
}

.landing-hero h1 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.landing-lede {
  margin: 16px 0 0;
  color: #33414f;
  font-size: 17px;
  line-height: 1.6;
}

.landing-cta {
  margin: 22px 0 0;
}

.landing-cta-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--blue);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.landing-cta-link:hover {
  background: var(--blue-dark);
}

.landing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.landing-chip {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
}

.landing-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 8px 0 20px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-size: 13.5px;
}

.landing-catalog {
  padding: 18px 0 40px;
  border-top: 1px solid var(--line);
}

.landing-catalog h2 {
  margin: 26px 0 0;
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -0.01em;
}

.landing-intro {
  margin: 10px 0 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.landing-group {
  margin: 34px 0 14px;
}

.landing-group h3 {
  display: inline;
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.landing-badge {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-group-sub {
  margin: 8px 0 0;
  color: #33414f;
  font-size: 14px;
}

.landing-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.landing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.landing-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.landing-card.flagship {
  border-color: var(--blue);
}

.landing-card-empty {
  padding: 18px;
  color: var(--muted);
  font-size: 13px;
}

.landing-thumb {
  position: relative;
  height: 118px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.landing-provider {
  position: absolute;
  right: 10px;
  top: 10px;
}

.landing-wire {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.landing-wl {
  height: 8px;
  border-radius: 3px;
  background: rgba(102, 112, 133, 0.26);
}

.landing-wl.s {
  width: 45%;
}

.landing-wl.m {
  width: 72%;
}

.landing-wl.l {
  width: 90%;
}

.landing-wrow {
  display: flex;
  gap: 7px;
}

.landing-wbox {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  background: rgba(31, 111, 178, 0.16);
}

.landing-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 15px 16px 17px;
}

.landing-card-body h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15.5px;
}

.landing-flagship {
  margin-left: 6px;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-card-brand {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.landing-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.landing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.landing-tag.live {
  background: #e3f2ef;
  color: var(--green);
}

.landing-tag.build {
  background: #f7ecd8;
  color: var(--gold);
}

.landing-tag.planned {
  background: var(--soft);
  color: var(--muted);
}

.landing-tag.accent {
  background: #e6effa;
  color: var(--blue-dark);
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.landing-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.landing-request {
  margin-top: 4px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
}

.landing-request p {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.landing-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 28px 54px;
  border-top: 1px solid var(--line);
}

.landing-footer p {
  margin: 0;
  max-width: 74ch;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.landing-honesty {
  margin-top: 10px;
}

.landing-honesty span {
  display: block;
}

.login-back {
  margin: 14px 0 0;
}

@media (max-width: 960px) {
  .landing-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-hero h1 {
    font-size: 32px;
  }
}

@media (max-width: 640px) {
  .landing-cards {
    grid-template-columns: 1fr;
  }

  .landing-main,
  .landing-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .landing-nav {
    padding: 12px 18px;
  }
}

/* ---------------------------------------------------------------------------
 * Public case walkthrough. Scoped under .landing like the catalog, reusing the
 * same tokens, so nothing existing shifts. Actor colour is always paired with
 * an actor label, never carried by colour alone.
 * ------------------------------------------------------------------------- */

.wt-head {
  padding: 42px 0 24px;
  max-width: 70ch;
}

.wt-head h1 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.wt-replay {
  margin: 16px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
}

.wt-run {
  padding: 8px 0 34px;
  border-top: 1px solid var(--line);
}

.wt-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
}

.wt-count {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.wt-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}

.wt-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
}

.wt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wt-step {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 13px 16px;
}

.wt-step.rule { border-left-color: var(--muted); }
.wt-step.ai { border-left-color: var(--purple); }
.wt-step.control { border-left-color: var(--green); }
.wt-step.human { border-left-color: var(--gold); }

.wt-step.current {
  box-shadow: var(--shadow);
}

.wt-step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.wt-n {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wt-step-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.wt-actor {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 5px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.wt-actor.ai { background: #efe9f8; color: var(--purple); }
.wt-actor.control { background: #e3f2ef; color: var(--green); }
.wt-actor.human { background: #f7ecd8; color: var(--gold); }

.wt-what {
  margin: 8px 0 0;
  color: #33414f;
  font-size: 14px;
  line-height: 1.55;
}

.wt-control {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.wt-control strong {
  color: var(--green);
}

.wt-flag {
  margin: 9px 0 0;
  padding: 7px 11px;
  border-radius: 6px;
  background: #f7ecd8;
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
}

.wt-outcome {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: #e3f2ef;
}

.wt-outcome h3 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: 19px;
}

.wt-outcome p {
  margin: 0;
  color: #33414f;
  font-size: 14px;
  line-height: 1.55;
}

.wt-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.wt-how {
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
}

.wt-how h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 24px;
  letter-spacing: -0.01em;
}

.wt-how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wt-how-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px 18px;
}

.wt-how-card h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 15px;
}

.wt-how-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .wt-how-grid {
    grid-template-columns: 1fr;
  }

  .wt-head h1 {
    font-size: 27px;
  }

  .wt-actor {
    margin-left: 0;
  }
}

/* --- Credit-invisible lending (P3) ---------------------------------------
 *
 * The one rule these styles exist to serve: computed figures and model
 * reasoning must READ as two different kinds of thing (FR-062). The server
 * already keeps them in separate objects; the left/right split and the two
 * accent colours are what make that separation visible to a person who has not
 * read the architecture.
 *
 * Green edge = computed by rule. Gold edge = produced by a model.
 * ---------------------------------------------------------------------- */

.lending-computed {
  border-left: 3px solid var(--good, #16a34a);
}

.lending-reasoning {
  border-left: 3px solid var(--warn, #d19a13);
}

.lending-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 10px 0 4px;
}

.lending-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  background: var(--surface-2, #f8fafc);
}

.lending-metric-label {
  font-size: 12px;
  color: var(--muted, #64748b);
}

.lending-metric strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.lending-subhead {
  margin: 16px 0 4px;
  font-size: 14px;
}

.lending-note {
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.6;
  margin: 8px 0;
}

.lending-reasoning-block {
  padding: 12px 0;
  border-top: 1px solid var(--line, #e2e8f0);
}

.lending-reasoning-block:first-of-type {
  border-top: 0;
}

.lending-reasoning-block h4 {
  margin: 0;
  font-size: 14px;
}

.lending-factors {
  margin: 8px 0;
  padding-left: 18px;
}

.lending-factors li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* An evidence citation is the anchor for every model claim, so it is styled to
 * be findable at a glance rather than buried in the sentence. */
.lending-cite {
  display: inline-block;
  font-size: 12px;
  color: var(--muted, #64748b);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lending-blurb {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #64748b);
  margin-top: 2px;
}

.lending-checks {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.lending-check {
  display: inline-block;
  padding: 1px 7px;
  margin: 2px 4px 0 0;
  border-radius: 999px;
  font-size: 11.5px;
}

.lending-check.ok {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.lending-check.bad {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.lending-gate {
  border-left: 3px solid var(--bad, #dc2626);
}

.lending-note-label {
  display: block;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--muted, #64748b);
}

.lending-note-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}

.lending-actions {
  margin-top: 10px;
}

.lending-nba {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
  line-height: 1.6;
}

.lending-steps .timeline-item {
  padding-bottom: 12px;
}

@media (max-width: 900px) {
  .lending-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Per-use-case entry page (A3.5) and design pack (A3.6) ---------------
 *
 * One structure serves every use case. Nothing here is per-case: a new case is
 * a content edit in apps/web/case-pages.js and nothing else.
 * ---------------------------------------------------------------------- */

.case-entry-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.case-entry-head h1 {
  margin: 8px 0 12px;
}

.case-entry-lede {
  max-width: 68ch;
  color: var(--muted, #5a6473);
}

.case-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  border-bottom: 1px solid var(--line, #dfe3ea);
}

.case-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--muted, #5a6473);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.case-tab:hover { color: var(--ink, #1c2430); }

.case-tab.active {
  color: var(--ink, #1c2430);
  border-bottom-color: var(--accent, #2f6bff);
}

.case-tab-panel {
  padding: 24px 0 0;
}

.case-tab-intro {
  max-width: 72ch;
  color: var(--muted, #5a6473);
}

.case-steps { list-style: none; margin: 20px 0 0; padding: 0; }

.case-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line, #eef1f5);
}

.case-step p { margin: 6px 0 0; color: var(--muted, #5a6473); }

.case-step-index {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--chip, #eef2f8);
  font-size: 13px;
  font-weight: 700;
}

.case-stack-group { margin-top: 24px; }

.case-stack-list { list-style: none; margin: 10px 0 0; padding: 0; }

.case-stack-list li {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line, #eef1f5);
}

.case-stack-list span { color: var(--muted, #5a6473); }

.case-layers { display: grid; gap: 12px; margin-top: 20px; }

.case-layer {
  padding: 14px 16px;
  border: 1px solid var(--line, #dfe3ea);
  border-radius: 10px;
}

.case-layer p { margin: 6px 0 0; color: var(--muted, #5a6473); }

.case-flow, .case-guarantees { max-width: 72ch; color: var(--muted, #5a6473); }

.login-trial, .login-demo {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #eef1f5);
  text-align: left;
}

.login-trial h3, .login-demo h3 { margin: 0 0 4px; }

/* The design pack (A3.6) is the same content at length. READ ONLY: there is no
   form, no submit control and no write action anywhere in this surface. */
.design-pack-shell { max-width: 900px; margin: 0 auto; padding: 32px 20px 64px; }

.design-pack-section { margin-top: 32px; }

.design-pack-note {
  margin-top: 24px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent, #2f6bff);
  background: var(--chip, #f4f7fc);
  color: var(--muted, #5a6473);
}

@media (max-width: 640px) {
  .case-stack-list li { grid-template-columns: 1fr; gap: 2px; }
  .case-tabs { gap: 2px; }
  .case-tab { padding: 10px 8px; font-size: 14px; }
}

/* --- Wide tables scroll inside their panel, not the page (B2.3) -----------
 *
 * Found by the Wave 6 browser pass at 375px: the AI Ops agent-runs table grew
 * an "Answered by" column in A3.4, which pushed the DOCUMENT to 471px and gave
 * the whole page a horizontal scrollbar. The column stays — naming the provider
 * that actually answered is the point of A3.4 — so the panel becomes the scroll
 * container instead, which is the right answer for any wide table rather than a
 * fix for this one.
 *
 * Scoped to small viewports so desktop layout is untouched.
 * ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  .panel {
    overflow-x: auto;
  }
}

/* --- Documents on file (layer 3) -----------------------------------------
 * A document card has to read as a DOCUMENT rather than as another data panel:
 * a reviewer is being asked to look at what was on a page. Hence the paper
 * ground, the ruled field list, and the specimen mark carried through from the
 * artifact itself so the card and the PDF say the same thing.
 * ---------------------------------------------------------------------- */

.lending-documents {
  border-left: 3px solid var(--accent, #b45309);
}

.lending-document-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.lending-document {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: var(--surface, #ffffff);
}

/* The same SPECIMEN mark the PDF carries, so the card cannot be screenshotted
 * and passed off as a record of a real document. */
.lending-document::after {
  content: "SPECIMEN";
  position: absolute;
  top: 14px;
  right: -28px;
  transform: rotate(35deg);
  padding: 2px 34px;
  background: rgba(180, 83, 9, 0.1);
  color: var(--accent, #b45309);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  pointer-events: none;
}

.lending-document h4 {
  margin: 8px 0 2px;
  font-size: 14px;
}

.lending-document-fields {
  margin: 10px 0 8px;
  font-size: 12.5px;
}

.lending-document-fields > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line, #e2e8f0);
}

.lending-document-fields dt {
  color: var(--muted, #64748b);
  flex: 0 0 auto;
}

.lending-document-fields dd {
  margin: 0;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-word;
}

/* One compared pair. Shown inline under a finding so the comparison and its
 * verdict are never more than a line apart. */
.lending-compared {
  display: inline-block;
  margin: 2px 10px 0 0;
}

.lending-compared em {
  font-style: normal;
  color: var(--muted, #64748b);
}

.lending-step-documents {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, #64748b);
}

/* A chip is a button because it performs an authenticated fetch; it is styled
 * as a link because that is what it behaves like to a reader. */
.lending-doc-chip {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 1px 8px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  background: transparent;
  color: var(--accent, #b45309);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.lending-doc-chip:hover {
  border-color: var(--accent, #b45309);
}

/* --- Workflow page tabs ---------------------------------------------------
 * The assessment is read in sections rather than one scroll. Buttons, not
 * links: selecting a section changes app state and issues no request, and a
 * link would imply a navigation that does not happen.
 * ---------------------------------------------------------------------- */

/* SECTION HEADINGS THAT HAPPEN TO BE SELECTABLE, not a row of small buttons.
 * Settled 2026-08-14 after two rejected attempts, and the reasoning is worth
 * keeping because both attempts were defensible and both were wrong.
 *
 * The original drew a bottom border under transparent buttons: on the console's
 * blue-grey background the five sections read as a line of prose. The next
 * attempt made them chips on a track, which fixed "are these clickable" and
 * created a new problem: five small controls competing with the real buttons on
 * the same screen, when these are not controls of that kind. They name the five
 * ways of reading one assessment. They are closer to a table of contents.
 *
 * So they are sized as headings. Big enough and heavy enough to be read as
 * topics, with the selected one carried by colour and a thick rule under it
 * rather than by a filled pill. The container's own rule is what makes the strip
 * a strip; the tabs need no borders of their own to look separate at this size.
 *
 * ON THE TOKEN NAMES. This block used to reference `--text`, `--surface` and
 * `--accent`, and NONE OF THE THREE IS DEFINED in :root. Every one of them was
 * silently falling through to its hardcoded fallback, which is why the strip did
 * not follow the rest of the page. The real tokens are used below. */
.lending-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  margin: 22px 0 0;
  /* The rule the selected heading sits on. 2px so the 3px active underline reads
   * as deliberately heavier than it rather than as a misalignment. */
  border-bottom: 2px solid var(--line);
}

.lending-tab {
  padding: 10px 18px 12px;
  border: none;
  /* Reserved on every tab so selecting one does not shift the row. */
  border-bottom: 3px solid transparent;
  border-radius: 7px 7px 0 0;
  background: transparent;
  /* Darker than --muted, 7.6:1 on the page rather than about 4.9:1. The active
   * heading still stands out because it carries three signals the others do not:
   * colour, a tint behind it, and the rule under it. */
  color: #475467;
  font: inherit;
  /* HEADING SIZED. The panel headings on this page are 17px; these sit just
   * under them, which is the relationship they have in the content. */
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* "Guardrails and governance" stays on one line and wraps to the next row
   * whole rather than breaking mid-phrase. This is also what keeps the strip
   * readable at mobile widths instead of collapsing into ragged fragments. */
  white-space: nowrap;
  cursor: pointer;
  /* Sits over the container's own rule, so the active underline replaces that
   * rule under the selected heading instead of doubling it. */
  margin-bottom: -2px;
}

.lending-tab:hover {
  color: var(--ink);
  background: rgba(31, 111, 178, 0.07);
  border-bottom-color: rgba(31, 111, 178, 0.35);
}

/* Keyboard users get the same "which one is selected" signal the pointer gets. */
.lending-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.lending-tab.active {
  color: var(--blue-dark);
  background: #e8f0f9;
  border-bottom-color: var(--blue);
}

.lending-tab.active:hover {
  color: var(--blue-dark);
  background: #dce8f5;
  border-bottom-color: var(--blue);
}

/* A retrieved passage the run actually cited, distinguished from one that was
 * retrieved and not used. Both are shown: what retrieval returned and what the
 * answer rested on are different facts, and hiding the unused ones would make
 * the retrieval look more decisive than it was. */
.policy-card.policy-cited {
  border-left: 3px solid var(--good, #16a34a);
  background: rgba(22, 163, 74, 0.04);
}

/* The "what is not claimed" block on the governance tab. Styled with the same
 * weight as the claims above it, not tucked away: a governance page that lists
 * only strengths is marketing, and a compliance reader finds the omissions
 * faster than the claims. */
.case-limits {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line, #e2e8f0);
  border-left: 3px solid var(--muted, #64748b);
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.04);
}

.case-limits h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.case-limits p {
  margin: 0 0 8px;
  color: var(--muted, #64748b);
  font-size: 13.5px;
}

.case-limits ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.7;
}

/* --- The AI / rules / human split (scope layer 4) --------------------------
 *
 * THE MODIFIER IS THE ID. `.step-kind--model` and `.step-status--halted` are
 * written by `lendingModifier()` straight from the value the server sent, with no
 * lookup table in JavaScript deciding which class a kind gets. That table was the
 * point of failure worth removing: it looks like styling, so nobody updates it
 * when the workflow gains a step kind, and the screen then draws a new kind in an
 * old kind's colours — a wrong claim rather than a missing one.
 *
 * A kind with no rule here falls back to the base `.badge`: plain, correctly
 * labelled, obviously unstyled. That is the safe direction to fail in.
 *
 * THREE TREATMENTS, NOT TWO, and they are not a severity scale. Rules are not
 * "good" and AI is not "warning". They are three different sources of an answer,
 * so they read as three different kinds of thing.
 * ---------------------------------------------------------------------- */

/* Computed by rules. The workflow's majority state, and its selling point:
 * figures are computed, never generated. Drawn calmly and confidently. */
.step-kind--deterministic {
  border-color: #b8e7df;
  color: var(--green);
  background: #ecfbf7;
}

/* Produced by a model. Marked out deliberately — a reader must be able to find
 * every sentence a model wrote without hunting for it. */
.step-kind--model {
  border-color: #d3c2ee;
  color: var(--purple);
  background: #f6f1ff;
}

/* Waiting on a person. The only state that asks the reader to do something, so
 * it is the only one drawn to pull the eye. */
.step-kind--human_gate {
  border-color: #b9d8f4;
  color: var(--blue-dark);
  background: #eef7ff;
  font-weight: 600;
}

/* Step outcomes. `halted` and `abstained` are DESIGNED BEHAVIOUR and are
 * deliberately not red: an honest stop drawn as a fault teaches an evaluator
 * that the system is fragile at exactly the moment it is being careful. Only
 * `failed` — the step that could not complete — is an error colour. */
.step-status--passed {
  border-color: #b8e7df;
  color: var(--green);
  background: #ecfbf7;
}

.step-status--halted,
.step-status--abstained {
  border-color: #f3d487;
  color: var(--gold);
  background: #fff8e5;
}

.step-status--failed {
  border-color: #ffc9c3;
  color: var(--red);
  background: #fff1ef;
}

.step-status--skipped {
  border-color: var(--line);
  color: var(--muted);
  background: var(--soft);
}

/* --- The run summary ---------------------------------------------------- */

.lending-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0 4px;
}

/* The cards reuse the kind modifiers above, so the summary card for AI steps and
 * the badge on an AI step are the same colour by construction rather than by two
 * people choosing the same hex twice. */
.lending-summary-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lending-summary-count {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.lending-summary-meaning {
  font-size: 12.5px;
  line-height: 1.6;
  opacity: 0.85;
}

.lending-summary-steps {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.7;
}

/* Who is about to sign the decision. Set apart from the trigger list above it,
 * because it is a statement about the reader rather than about the case. */
.lending-reviewer {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--soft);
  font-size: 13px;
  line-height: 1.7;
}

/* Run-level status. Same derived-modifier rule as the step badges, and for the
 * same reason: `awaiting_review` used to be drawn in the failure red because the
 * header asked "decided or not". A mandatory human gate doing its job is not a
 * fault, and the run header is the first thing an evaluator reads. */
.run-status--decided {
  border-color: #b8e7df;
  color: var(--green);
  background: #ecfbf7;
}

.run-status--awaiting_review,
.run-status--awaiting_evidence {
  border-color: #b9d8f4;
  color: var(--blue-dark);
  background: #eef7ff;
  font-weight: 600;
}

.run-status--running {
  border-color: var(--line);
  color: var(--muted);
  background: var(--soft);
}

.run-status--failed {
  border-color: #ffc9c3;
  color: var(--red);
  background: #fff1ef;
}

/* --- Cost bases (scope layer 5) -------------------------------------------
 *
 * Same derived-modifier rule as the step kinds: `.cost-basis--priced` is written
 * from the id the server sent, with no lookup table in JavaScript.
 *
 * ONLY `priced` IS DRAWN AS MONEY. The other four are all zero-cost outcomes and
 * they are deliberately NOT interchangeable: "a rule computed it", "a free model
 * answered", "the engine answered because no provider could", and "we could not
 * measure it" are four different facts, and the last one is the only one that is
 * a caveat rather than a feature.
 * ---------------------------------------------------------------------- */

.cost-basis--priced {
  border-color: #b9d8f4;
  color: var(--blue-dark);
  background: #eef7ff;
  font-weight: 600;
}

.cost-basis--free_provider {
  border-color: #b8e7df;
  color: var(--green);
  background: #ecfbf7;
}

.cost-basis--deterministic_engine,
.cost-basis--no_model_call {
  border-color: var(--line);
  color: var(--muted);
  background: var(--soft);
}

/* A caveat, not a feature. The only zero-cost basis drawn to be noticed. */
.cost-basis--unmeasured {
  border-color: #f3d487;
  color: var(--gold);
  background: #fff8e5;
}

.lending-cost-table td.cost-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* An em dash where a figure would be. Muted so it reads as "not applicable"
 * rather than as a missing value. */
.lending-cost-table td.cost-none {
  text-align: right;
  color: var(--muted);
}