/* ai4bp product mockups: HTML and CSS stand-ins for future product screens. Built from the tokens in site.css only.
   Rules: dark surfaces; white text; --soft for secondary text; cyan for scan labels, the AI mark and focus;
   pink for the one primary action and the selected mark; outcome states are a word plus an icon, never hue alone.
   Every mockup's outermost element carries class "mockup". Mockups size themselves from their own width
   (container queries), so the same markup works full width, beside text, or in a three-up.
   Do not put h1-h4 inside a mockup: the section heading styles would reach them. */

.mockup {
  /* A step lighter than the charcoal page, as the founder's reference sets its panels (2026-11-11). */
  --m-0: var(--panel);      /* frame and main surface */
  --m-1: var(--elev);       /* cards */
  --m-2: var(--hair);       /* raised: pills, chips, selected rows */
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
  background: var(--m-0);
  color: var(--white);
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  font: 400 14px/1.5 var(--sans);
  letter-spacing: 0;
  text-align: left;
  box-shadow: var(--shadow);
}
.band-dark .mockup, .cta-band .mockup { box-shadow: none; }
.mockup *, .mockup *::before, .mockup *::after { box-sizing: border-box; }
.mockup :where(p) { margin: 0; }
.mockup :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.mockup a { color: var(--white); text-decoration-color: var(--pink); }
.mockup a:hover { text-decoration-color: var(--white); }
.mockup code, .mockup pre, .m-mono { font-family: var(--mono); font-size: 12.5px; }
.mockup i { font-style: normal; }
.m-soft { color: var(--soft); }
.m-strong { font-weight: 600; }

/* ---------- App window ---------- */

.m-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--m-0); border-bottom: 1px solid var(--hair); }
.m-dots { display: flex; gap: 6px; flex: none; }
.m-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--hair); border: 1px solid var(--edge); }
.m-title { font-weight: 500; font-size: 13.5px; color: var(--white); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-title span { color: var(--soft); font-weight: 400; }
.m-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto;
  padding: 2px 10px; border: 1px solid var(--soft); border-radius: 999px;
  font: 500 12px/1.5 var(--mono); color: var(--soft); white-space: nowrap;
}
.m-chip.is-plain { margin-left: 0; }

.m-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.m-body.has-rail { grid-template-columns: 176px minmax(0, 1fr); }
.m-rail { padding: 12px 8px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 2px; }
.m-rail li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--soft); font-size: 13.5px; }
.m-rail li i { width: 16px; text-align: center; color: var(--soft); flex: none; }
.m-rail li.is-active { background: var(--m-2); color: var(--white); box-shadow: inset 3px 0 0 var(--pink); }
.m-rail li.is-active i { color: var(--white); }
.m-main { min-width: 0; }
.m-pad { padding: 18px; }
.m-stack { display: grid; gap: 14px; }

@container (max-width: 760px) {
  .m-body.has-rail { grid-template-columns: 52px minmax(0, 1fr); }
  .m-rail .m-l { display: none; }
  .m-rail li { justify-content: center; padding: 9px 4px; }
}
/* Narrow mockups drop the right-hand chip so the title does not truncate. */
@container (max-width: 440px) {
  .m-bar .m-chip { display: none; }
}
@container (max-width: 460px) {
  .m-body.has-rail { grid-template-columns: minmax(0, 1fr); }
  .m-rail { display: none; }
}

/* ---------- Shared parts ---------- */

.m-card { background: var(--m-1); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; }
.m-label { font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.m-head { font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.m-big { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.m-sub { color: var(--soft); font-size: 13px; }
.m-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.m-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; background: var(--m-1); border-top: 1px solid var(--hair); }
.m-foot p { color: var(--soft); font-size: 13px; }
.m-foot p b { color: var(--white); font-weight: 600; }

/* Clause id chip, always monospace. */
.m-clause-id {
  display: inline-block; padding: 0 6px; border: 1px solid var(--soft); border-radius: 6px; background: var(--m-2);
  font: 500 12px/1.6 var(--mono); color: var(--white); white-space: nowrap;
}
.m-tool { font: 500 14px/1.4 var(--mono); color: var(--cyan); overflow-wrap: anywhere; }

/* Buttons are spans: mockups are pictures of a screen, not controls. */
.m-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--soft); border-radius: 9px; background: transparent; color: var(--white);
  font: 500 13px/1.25 var(--sans); white-space: nowrap;
}
.m-btn.is-primary { background: var(--pink); border-color: var(--pink); color: var(--charcoal); font-weight: 600; }
.m-btn.is-quiet { border-color: var(--hair); background: var(--m-2); }
.m-btn.is-locked { border-style: dashed; border-color: var(--soft); background: var(--m-1); color: var(--soft); }

/* ---------- Status pill: word plus icon, neutral fill, border style as a second cue ---------- */

.m-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px;
  border: 1px solid var(--soft); border-radius: 999px; background: var(--m-2); color: var(--white);
  font: 500 12.5px/1.5 var(--sans); white-space: nowrap;
}
.m-pill i { font-size: 12px; line-height: 1; width: 1em; text-align: center; }
.m-pill.is-match { border-color: var(--soft); }
.m-pill.is-conflict { border: 2px solid var(--white); padding: 0 9px 0 7px; }
.m-pill.is-ai { border: 1px dashed var(--cyan); }
.m-pill.is-ai i { color: var(--cyan); }
.m-pill.is-enforced { border: 2px solid var(--soft); padding: 0 9px 0 7px; }
.m-pill.is-ref { border: 1px dotted var(--white); }
.m-pill.is-missing { border: 2px dashed var(--white); padding: 0 9px 0 7px; }
.m-pill.is-held { border: 3px double var(--white); padding: 0 8px 0 6px; }
.m-pill.is-approved { border-color: var(--soft); background: var(--veil-2); }
.m-pill.is-sent { border-color: var(--soft); }
.m-pill.is-waiting { border: 1px dotted var(--soft); }
.m-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* A state that is not one of the ten words above is an icon and a word with no capsule. The pill shape belongs to the spec's section 4 words. */
.m-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--white); font: 500 12.5px/1.5 var(--sans); }
.m-mark i { flex: none; font-size: 12px; line-height: 1; width: 1em; text-align: center; font-style: normal; }

/* ---------- AI provenance: a cyan icon and the letters AI; AI-made items get a dashed border ---------- */

.m-ai { display: inline-flex; align-items: baseline; gap: 5px; color: var(--cyan); font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.m-ai i { font-size: 13px; line-height: 1; }
.is-ai-made { border: 1px dashed var(--cyan-line) !important; }

/* ---------- Two-checklist review ---------- */

.m-summary { display: flex; flex-wrap: wrap; gap: 14px 40px; padding: 16px 18px; border-bottom: 1px solid var(--hair); }
.m-summary .m-grp { display: grid; gap: 8px; }
.m-counts { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.m-count { display: flex; align-items: center; gap: 8px; }
.m-count b { font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.m-count span { color: var(--soft); font-size: 13px; }
/* The same icon and border vocabulary as the status pill, so a conflict or a missing count reads as a problem. */
.m-count i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--soft); border-radius: 50%; background: var(--m-2); font-size: 11px; line-height: 1; }
.m-count.is-conflict i { border: 2px solid var(--white); }
.m-count.is-ai i { border: 1px dashed var(--cyan); color: var(--cyan); }
.m-count.is-enforced i { border: 2px solid var(--soft); }
.m-count.is-ref i { border: 1px dotted var(--white); }
.m-count.is-missing i { border: 2px dashed var(--white); }

.m-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--hair); gap: 1px; }
.m-col { background: var(--m-0); padding: 16px 18px 6px; min-width: 0; }
.m-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.m-col-head .m-head { font-size: 15px; }
.m-col-head .m-sub { white-space: nowrap; }
.m-rows { display: grid; }
.m-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hair); }
.m-row:first-child { border-top: 0; }
.m-row-t { font-size: 14px; line-height: 1.4; }
.m-row-s { margin-top: 3px; font-size: 12.5px; color: var(--soft); line-height: 1.45; }
.m-row-s .m-clause-id { margin-right: 4px; }
.m-row .m-fix { grid-column: 1 / -1; }
.m-fix { display: grid; gap: 8px; padding: 11px 12px; background: var(--m-1); border: 1px dashed var(--cyan-line); border-radius: 10px; }
.m-fix p { font-size: 13px; line-height: 1.45; }
.m-fix p b { font-weight: 600; }
.m-fix .m-actions { gap: 6px; }
.m-fix .m-btn { padding: 5px 10px; font-size: 12.5px; }

@container (max-width: 820px) {
  .m-cols { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 520px) {
  /* Two columns, so no count wraps onto a line of its own. */
  .m-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .m-row { grid-template-columns: minmax(0, 1fr); }
  .m-row > .m-pill { justify-self: start; }
  .m-col-head { flex-direction: column; gap: 2px; }
}

/* ---------- Case list and timeline ---------- */

.m-list { display: grid; }
.m-case { display: grid; grid-template-columns: 78px minmax(0, 1.1fr) minmax(0, 1.3fr) 112px; gap: 6px 16px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--hair); }
.m-case:first-child { border-top: 0; }
.m-case.is-selected { background: var(--m-2); box-shadow: inset 3px 0 0 var(--pink); }
.m-case .m-pill, .m-clause .m-pill, .m-case .m-mark { justify-self: end; }
.m-case .m-id { font: 500 12.5px/1.4 var(--mono); color: var(--soft); }
.m-case .m-who { font-weight: 500; }
.m-case .m-who span, .m-case .m-step span { display: block; color: var(--soft); font-size: 12.5px; font-weight: 400; }
.m-list-head { display: grid; grid-template-columns: 78px minmax(0, 1.1fr) minmax(0, 1.3fr) 112px; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--hair); font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.m-list-head span:last-child { visibility: hidden; }
@container (max-width: 620px) {
  .m-list-head { display: none; }
  /* Two equal columns. The ID and the pill share the first line; the client and the step share the second,
     both left-aligned. A row without a step lets the client use the full line. */
  .m-case { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .m-case .m-id { grid-column: 1; grid-row: 1; }
  .m-case .m-pill, .m-case .m-mark { grid-column: 2; grid-row: 1; justify-self: end; }
  .m-case .m-who, .m-case .m-step { text-align: left; }
  .m-case .m-who:nth-last-child(2) { grid-column: 1 / -1; }
}

.m-timeline { position: relative; }
.m-timeline li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 14px; padding: 0 0 18px; }
.m-timeline li:last-child { padding-bottom: 0; }
.m-timeline li::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--hair); }
.m-timeline li:last-child::before { display: none; }
.m-node { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; line-height: 1; border: 2px solid var(--soft); background: var(--m-0); color: var(--white); }
.m-timeline .is-done .m-node { background: var(--white); border-color: var(--white); color: var(--charcoal); font-weight: 700; }
.m-timeline .is-now .m-node { border-color: var(--pink); background: var(--m-2); }
.m-timeline .is-next .m-node { border-style: dashed; color: var(--soft); }
.m-step-t { font-weight: 500; line-height: 1.35; padding-top: 3px; }
.m-step-s { display: block; color: var(--soft); font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.m-when { color: var(--soft); font: 400 12.5px/1.4 var(--mono); padding-top: 4px; text-align: right; white-space: nowrap; }
.m-due { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; padding: 1px 9px; border: 1px solid var(--white); border-radius: 6px; font: 500 12px/1.6 var(--mono); color: var(--white); }
@container (max-width: 440px) {
  .m-timeline li { grid-template-columns: 26px minmax(0, 1fr); }
  .m-when { grid-column: 2; text-align: left; padding-top: 0; }
}

/* ---------- Exception card ---------- */

.m-exc { display: grid; gap: 14px; padding: 18px; }
.m-exc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.m-exc-top .m-label, .m-exc-top .m-ai { margin-right: auto; }
.m-exc .m-big { font-size: 20px; }
.m-ask { display: grid; gap: 10px; padding: 14px 16px; background: var(--m-1); border: 1px dashed var(--cyan-line); border-radius: 12px; }
.m-ask-t { font-size: 15px; font-weight: 500; line-height: 1.4; }
.m-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 13px; }
.m-meta dt { color: var(--soft); }
.m-meta dd { margin: 0; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chips span { padding: 1px 9px; border: 1px solid var(--hair); border-radius: 6px; background: var(--m-2); font: 400 12px/1.6 var(--mono); }

/* ---------- Approval envelope ---------- */

.m-env-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.m-env-head .m-label { margin-right: auto; }
.m-env-meta { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 14px; padding: 16px 18px 0; font-size: 13.5px; }
.m-env-meta dt { color: var(--soft); }
.m-env-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.m-env-body { padding: 16px 18px; display: grid; gap: 14px; }
.m-paper { background: var(--white); color: var(--charcoal); border-radius: 8px; padding: 18px 20px; font-size: 13.5px; line-height: 1.6; }
.m-paper p + p { margin-top: 0.8em; }
/* On the white letter, links and the focus ring are charcoal: cyan and white would fail on white. */
.m-paper a { color: var(--charcoal); }
.m-paper a:hover { text-decoration-color: var(--charcoal); }
.m-paper :focus-visible { outline-color: var(--charcoal); }
.m-paper .m-sig { margin-top: 1em; font-weight: 600; }
.m-paper mark { background: transparent; color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.m-sources { display: grid; gap: 6px; font-size: 13px; }
.m-sources li { display: flex; gap: 10px; align-items: baseline; }
.m-sources li::before { content: "\201C"; color: var(--soft); flex: none; }
.m-sources span { color: var(--soft); }
@container (max-width: 440px) {
  .m-env-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .m-env-meta dd { margin-bottom: 8px; }
}

/* ---------- Rule table and clause coverage ---------- */

.m-scroll { overflow-x: auto; }
/* In a narrow mockup the table scrolls sideways: fade its right edge until it is scrolled to the end (site.js sets data-end). */
@container (max-width: 560px) {
  .m-scroll:not([data-end]) { -webkit-mask-image: linear-gradient(to right, var(--charcoal) calc(100% - 44px), transparent); mask-image: linear-gradient(to right, var(--charcoal) calc(100% - 44px), transparent); }
}
.m-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13.5px; }
.m-table caption { text-align: left; padding: 0 0 10px; }
.m-table th, .m-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--hair); }
.m-table thead th { border-top: 0; border-bottom: 1px solid var(--soft); font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); background: var(--m-1); }
.m-table tbody th { font-weight: 500; }
.m-table td.m-res { font-weight: 600; }
.m-table .m-else td, .m-table .m-else th { color: var(--soft); }
.m-table tr.is-hit { background: var(--m-2); box-shadow: inset 3px 0 0 var(--pink); }
/* Opt-in stacked layout: a table with class m-table-cards turns each row into a card in a narrow mockup, so no column
   is cut off. site.js copies each column header into a data-label on the cells; the label prints before the value.
   The row header (th scope="row") is the card's title. The long selectors outrank page-level widths and nowrap rules. */
@container (max-width: 560px) {
  .mockup .m-scroll .m-table.m-table-cards, .mockup .m-scroll .m-table.m-table-cards tbody,
  .mockup .m-scroll .m-table.m-table-cards tr, .mockup .m-scroll .m-table.m-table-cards th,
  .mockup .m-scroll .m-table.m-table-cards td { display: block; width: auto; min-width: 0; white-space: normal; }
  .mockup .m-scroll .m-table.m-table-cards caption { display: block; width: auto; caption-side: top; }
  /* The header row stays in the page for screen readers; its words now sit in each cell's label. */
  .mockup .m-scroll .m-table.m-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mockup .m-scroll .m-table.m-table-cards tbody tr { margin: 0 0 10px; border: 1px solid var(--hair); border-radius: 10px; background: var(--m-1); overflow: hidden; }
  .mockup .m-scroll .m-table.m-table-cards tbody tr:last-child { margin-bottom: 0; }
  .mockup .m-scroll .m-table.m-table-cards tbody tr.is-hit { background: var(--m-2); box-shadow: inset 3px 0 0 var(--pink); }
  .mockup .m-scroll .m-table.m-table-cards tbody th[scope="row"] { padding: 10px 14px; border-top: 0; font-weight: 600; background: var(--m-2); }
  .mockup .m-scroll .m-table.m-table-cards tbody td { display: grid; grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr); gap: 4px 12px; padding: 8px 14px; border-top: 1px solid var(--hair); }
  .mockup .m-scroll .m-table.m-table-cards tbody td:first-child { border-top: 0; }
  .mockup .m-scroll .m-table.m-table-cards tbody td::before { content: attr(data-label); font: 500 11px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
  .mockup .m-scroll .m-table.m-table-cards tbody td:not([data-label])::before, .mockup .m-scroll .m-table.m-table-cards tbody td[data-label=""]::before { content: none; }
  .mockup .m-scroll .m-table.m-table-cards tbody td:not([data-label]), .mockup .m-scroll .m-table.m-table-cards tbody td[data-label=""] { display: block; }
}

.m-clause { display: grid; grid-template-columns: 96px minmax(0, 1.8fr) minmax(0, 1.2fr) 140px; gap: 6px 16px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--hair); }
.m-clause:first-child { border-top: 0; }
.m-clause .m-clause-id { justify-self: start; }
.m-clause .m-text { line-height: 1.4; }
.m-clause .m-by { font: 400 12.5px/1.4 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.m-clause .m-by b { display: block; font-weight: 500; color: var(--white); }
@container (max-width: 620px) {
  .m-clause { grid-template-columns: minmax(0, 1fr) auto; }
  .m-clause .m-clause-id { grid-column: 1; grid-row: 1; }
  .m-clause .m-pill { grid-column: 2; grid-row: 1; }
  .m-clause .m-text, .m-clause .m-by { grid-column: 1 / -1; }
}

/* ---------- MCP call trace ---------- */

.m-trace-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.m-trace-head .m-tool { font-size: 15px; }
.m-trace-head .m-sub { margin-right: auto; }
.m-io { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 1.05fr); gap: 14px; padding: 16px 18px 18px; align-items: start; }
.m-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.m-code { margin: 0; padding: 12px 14px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 10px; color: var(--soft); font: 400 12.5px/1.65 var(--mono); white-space: pre; overflow-x: auto; max-width: 100%; }
.m-code b { font-weight: 500; color: var(--white); }
.m-gates { display: grid; gap: 0; padding: 4px 14px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 10px; }
.m-gates li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.m-gates li:first-child { border-top: 0; }
.m-gates li i { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--soft); border-radius: 50%; font-size: 11px; line-height: 1; }
.m-gates li > span:last-child { font: 500 12px/1.4 var(--mono); color: var(--soft); }
.m-gates .is-pass i { background: var(--white); border-color: var(--white); color: var(--charcoal); font-weight: 700; }
.m-gates .is-held i { border: 3px double var(--white); }
.m-gates .is-held { box-shadow: inset 3px 0 0 var(--white); padding-inline: 8px 6px; background: var(--m-2); border-radius: 6px; }
.m-gates .is-wait i { border-style: dotted; }
.m-gates .is-skip i { border-style: dashed; color: var(--soft); }
@container (max-width: 820px) {
  .m-io { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Calendar strip ---------- */

.m-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 16px 18px 12px; }
.m-day { min-width: 0; min-height: 132px; padding: 10px 9px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 10px; display: grid; align-content: start; gap: 8px; }
.m-day.is-today { border-color: var(--soft); box-shadow: inset 0 3px 0 var(--pink); background: var(--m-2); }
.m-dn { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 6px; font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.m-dn b { font: 600 20px/1 var(--sans); letter-spacing: -0.02em; color: var(--white); text-transform: none; }
.m-ev { padding: 5px 7px; border-radius: 6px; font-size: 12px; line-height: 1.35; border: 1px solid var(--soft); background: var(--m-0); overflow-wrap: anywhere; }
.m-ev i { margin-right: 4px; }
.m-ev.is-deadline { border: 1px solid var(--white); border-left: 4px solid var(--white); }
.m-ev.is-follow { border-style: dashed; }
.m-ev span { display: block; color: var(--soft); font-size: 11.5px; }
.m-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0 18px 16px; font-size: 12.5px; color: var(--soft); }
@container (max-width: 700px) {
  .m-cal { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .m-day { min-height: 0; grid-template-columns: 74px minmax(0, 1fr); align-items: start; }
  .m-day .m-dn { display: grid; gap: 2px; }
  .m-day .m-none { color: var(--soft); font-size: 12px; }
}

/* ---------- Replay result ---------- */

.m-replay { display: grid; gap: 16px; padding: 18px; }
.m-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.m-score b { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.m-score span { color: var(--soft); }
.m-seg { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.m-seg i { height: 12px; border-radius: 3px; border: 1.5px solid var(--white); }
.m-seg i.is-on { background: var(--white); }
.m-seg i.is-off { border-style: dashed; background: transparent; }
.m-diffs { display: grid; gap: 8px; }
.m-diffs li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 12px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.m-diffs li > i { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--white); border-radius: 50%; font-size: 11px; line-height: 1; margin-top: 1px; }
.m-diffs li span { display: block; color: var(--soft); font-size: 12.5px; }

/* ---------- Version diff ---------- */

.m-diff-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.m-diff-head .m-big { font: 600 18px/1.2 var(--mono); }
.m-diff-head .m-sub { margin-right: auto; }
.m-diff { font: 400 12.5px/1.55 var(--mono); }
.m-file { padding: 8px 18px; background: var(--m-1); border-block: 1px solid var(--hair); color: var(--cyan); font: 500 12px/1.4 var(--mono); }
.m-dl { display: grid; grid-template-columns: 18px 64px minmax(0, 1fr); gap: 6px 10px; padding: 6px 18px; border-left: 3px solid transparent; }
.m-dl .m-w { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.m-dl.is-add { background: var(--veil); border-left-color: var(--white); }
.m-dl.is-chg { background: var(--veil); border-left: 3px dashed var(--white); }
.m-dl.is-del { border-left-color: var(--soft); color: var(--soft); }
.m-dl.is-del .m-v { text-decoration: line-through; text-decoration-thickness: 1px; }
.m-dl .m-v { overflow-wrap: anywhere; }
.m-dl .m-v s { color: var(--soft); }
@container (max-width: 460px) {
  .m-dl { grid-template-columns: 18px minmax(0, 1fr); }
  .m-dl .m-w { grid-column: 2; }
  .m-dl .m-v { grid-column: 2; }
}

/* ---------- Chat-style drafting panel ---------- */

.m-chat { display: grid; gap: 14px; padding: 18px; }
.m-msg { display: grid; gap: 8px; max-width: 94%; }
.m-msg.is-user { justify-self: end; }
.m-bubble { padding: 12px 14px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 14px; }
.m-msg.is-user .m-bubble { background: var(--m-2); border-top-right-radius: 4px; }
.m-msg.is-ai .m-bubble { border: 1px dashed var(--cyan-line); border-top-left-radius: 4px; }
.m-msg .m-who { font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.m-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.m-files span { display: inline-flex; gap: 6px; padding: 2px 9px; border: 1px solid var(--soft); border-radius: 8px; background: var(--m-0); font: 400 12px/1.6 var(--mono); }
.m-steps { display: grid; gap: 8px; margin-top: 12px; }
.m-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 13.5px; line-height: 1.4; }
.m-steps li i { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--soft); border-radius: 50%; font-size: 11px; line-height: 1; margin-top: 1px; }
.m-steps .is-done i { background: var(--white); border-color: var(--white); color: var(--charcoal); font-weight: 700; }
.m-steps .is-now i { border-color: var(--cyan); color: var(--cyan); }
.m-steps .is-todo i { border-style: dashed; }
.m-steps li span { display: block; color: var(--soft); font-size: 12.5px; }
.m-input { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--soft); border-radius: 12px; background: var(--m-0); color: var(--soft); font-size: 13.5px; }
.m-input span:first-child { flex: 1; min-width: 0; }
.m-send { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 8px; background: var(--pink); color: var(--charcoal); font-weight: 700; }

/* ---------- Acting as: the role an approver holds. Every approval names one. ---------- */

.m-role { display: inline-flex; align-items: center; gap: 7px; padding: 1px 10px 1px 8px; border: 1px solid var(--soft); border-radius: 6px; background: var(--m-1); font: 400 12.5px/1.5 var(--sans); white-space: nowrap; }
.m-role i { font-size: 12px; line-height: 1; }
.m-role span { color: var(--soft); }
.m-role b { font-weight: 600; color: var(--white); }
.m-why { font-size: 12.5px; line-height: 1.4; color: var(--soft); }

/* ---------- Compact variant for small mockups in a three-up ---------- */

.m-compact .m-pad, .m-compact .m-chat, .m-compact .m-replay { padding: 14px; }
.m-compact .m-case { padding: 11px 14px; }
.m-compact .m-list-head { padding-inline: 14px; }
.m-compact { box-shadow: var(--shadow-sm); }