/* Small product fragments — no rail, no top bar, no browser window.

   The full screen recreations answer "what is this product". These answer
   "what does THAT sentence mean", which is a different question and needs a
   different object: one card, one row, one state, sitting inside the text
   column beside the paragraph that makes the claim.

   They borrow the mock palette so a fragment and a full screen are visibly
   the same application, but they carry it themselves rather than depending on
   an .ac-app ancestor — that is the whole point of extracting them. */

.frag {
  --ac-ink: #16162a;
  --ac-mut: #64647a;
  --ac-dim: #9494a6;
  --ac-line: #e9e9f1;
  --ac-faint: #f4f4f8;
  --ac-canvas: #fbfbfd;
  --ac-blue: #2f5fd0;
  --ac-good: #16a34a;
  --ac-warn: #b8730c;
  --ac-bad: #cf3355;

  margin: var(--space-10, 40px) auto;
  max-width: 660px;
  padding: 0 var(--space-6, 24px);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ac-ink);
}

/* A fragment inside a page that already constrains its column should not
   fight that column's padding. */
.frag-body {
  background: var(--surface, #fff);
  border: 1px solid var(--ac-line);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgb(16 22 42 / 4%), 0 8px 24px -18px rgb(16 22 42 / 30%);
}

/* The words the shape is saying. Present for a screen reader and for anyone
   who cannot see it; the shape itself is aria-hidden. */
.frag-alt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- shared atoms ---------- */

.frag-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ac-dim);
  margin-bottom: 3px;
}

.frag-dim { color: var(--ac-mut); }
.frag-good { color: var(--ac-good); font-weight: 600; }
.frag-bad { color: var(--ac-bad); font-weight: 600; }
.frag-money { font-size: 0.82em; font-weight: 600; color: var(--ac-mut); letter-spacing: 0.02em; }
.frag-sep { color: var(--ac-dim); }

.frag-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.frag-chip.is-info { background: #eaf0fd; color: var(--ac-blue); }
.frag-chip.is-warn { background: #fdf2e3; color: var(--ac-warn); }
.frag-chip.is-bad { background: #fdecf0; color: var(--ac-bad); }
.frag-chip.is-quiet { background: var(--ac-faint); color: var(--ac-mut); }

.frag-avatar {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6e9f5;
  color: #3d4a7a;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.frag-owner { font-weight: 600; }

.frag-i {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--ac-mut);
}

.frag-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.frag-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.frag-actions span {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--ac-line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ac-mut);
}
.frag-actions .is-primary { background: #101a3d; border-color: #101a3d; color: #fff; }

.frag-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--ac-dim); }

/* ---------- deal ---------- */

.frag-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.frag-card header strong { font-size: 14px; letter-spacing: -0.01em; }
.frag-amount { margin: 10px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.frag-next {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--ac-line);
}
.frag-next strong { font-size: 12.5px; font-weight: 600; }

/* ---------- forecast ---------- */

.frag-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.frag-trio > div { padding: 10px 12px; border-radius: 10px; background: var(--ac-faint); }
.frag-trio > div.is-lead { background: #eaf0fd; }
.frag-trio strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2px; }
.frag-trio .frag-dim { font-size: 11px; }
.frag-spark { margin-top: 12px; height: 26px; }

/* ---------- proposal ---------- */

.frag-table { width: 100%; border-collapse: collapse; }
.frag-table td { padding: 9px 0; border-bottom: 1px solid var(--ac-line); vertical-align: top; font-size: 12.5px; }
.frag-table td .frag-dim { display: block; font-size: 11px; margin-top: 2px; }
.frag-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.frag-table tr.is-discount td { color: var(--ac-good); }
.frag-table tfoot td { padding-top: 11px; border-bottom: 0; font-size: 14px; font-weight: 700; }

/* ---------- invoice ---------- */

.frag-invoice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.frag-invoice-head strong { font-size: 14px; }

.frag-timeline, .frag-log { list-style: none; margin: 0; padding: 0; }
.frag-timeline li, .frag-log li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 8px 0; position: relative; }
.frag-timeline li + li { border-top: 1px solid var(--ac-line); }
.frag-when { font-size: 11px; color: var(--ac-dim); font-variant-numeric: tabular-nums; padding-top: 1px; }
.frag-timeline strong, .frag-log strong { font-size: 12.5px; font-weight: 600; display: inline; }
.frag-timeline .frag-dim, .frag-log .frag-dim { display: block; font-size: 11.5px; margin-top: 1px; }
.frag-timeline li.is-open strong { color: var(--ac-warn); }

.frag-log li { grid-template-columns: 46px minmax(0, 1fr); }
.frag-log li + li { border-top: 1px solid var(--ac-line); }
.frag-log div { font-size: 12.5px; }

/* ---------- split (portal boundary / handover) ---------- */

.frag-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.frag-split > div { padding: 4px 16px; }
.frag-split > div:first-child { border-right: 1px solid var(--ac-line); padding-left: 0; }
.frag-split > div:last-child { padding-right: 0; }
.frag-split ul { list-style: none; margin: 0; padding: 0; }
.frag-split li { padding: 6px 0 6px 20px; position: relative; font-size: 12.5px; border-bottom: 1px solid var(--ac-faint); }
.frag-split li:last-child { border-bottom: 0; }
.frag-split li::before {
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 12px;
  font-weight: 700;
}
.frag-split .is-shared li::before, .frag-split .is-after li::before { content: "✓"; color: var(--ac-good); }
.frag-split .is-private li::before, .frag-split .is-before li::before { content: "✕"; color: var(--ac-bad); }
.frag-split .is-private li, .frag-split .is-before li { color: var(--ac-mut); }

/* ---------- approval / undo ---------- */

.frag-approval header, .frag-undo header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.frag-approval header .frag-label, .frag-undo header .frag-label { margin: 0; }
.frag-approval header .frag-chip, .frag-undo header .frag-chip { margin-left: auto; }
.frag-approval > strong, .frag-undo > strong { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.frag-undo .frag-dim { display: block; margin-top: 5px; font-size: 12px; }

.frag-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.frag-kv dt { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-dim); }
.frag-kv dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; }

/* ---------- citation ---------- */

.frag-quote {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--ac-blue);
  font-size: 13.5px;
  line-height: 1.6;
}
.frag-source { display: flex; gap: 9px; align-items: flex-start; padding-top: 11px; border-top: 1px solid var(--ac-line); }
.frag-source strong { display: block; font-size: 12.5px; }
.frag-source .frag-dim { font-size: 11.5px; }

/* ---------- phase ---------- */

.frag-phase { display: flex; align-items: center; gap: 22px; }
.frag-phase .pn-donut { width: 78px; height: 78px; flex: none; }
.frag-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.frag-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.frag-legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.frag-legend i.is-good { background: var(--ac-good); }
.frag-legend i.is-info { background: var(--ac-blue); }
.frag-legend i.is-bad { background: var(--ac-bad); }
.frag-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.frag-phase-next { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ac-line); }
.frag-phase-next strong { font-size: 13px; font-weight: 600; }

/* ---------- ticket ---------- */

.frag-ticket header { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.frag-ticket > strong { display: block; font-size: 14px; letter-spacing: -0.01em; }

/* ---------- cash ---------- */

.frag-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.frag-pair strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2px; }
.frag-pair span:last-child { font-size: 11.5px; }
.frag-cash { height: 84px; }
.frag-cash .pn-cash { width: 100%; height: 84px; }

/* ---------- currency ---------- */

.frag-currency { display: grid; gap: 12px; }
.frag-select { padding: 9px 12px; border: 1px solid var(--ac-line); border-radius: 9px; background: var(--ac-faint); }
.frag-select strong { font-size: 13px; font-weight: 600; }
.frag-echo { list-style: none; margin: 2px 0 0; padding: 0; }
.frag-echo li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ac-faint); font-size: 12.5px; color: var(--ac-mut); }
.frag-echo li:last-child { border-bottom: 0; }
.frag-echo b { color: var(--ac-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .frag-trio,
  .frag-kv { grid-template-columns: minmax(0, 1fr); }
  .frag-split { grid-template-columns: minmax(0, 1fr); }
  .frag-split > div:first-child { border-right: 0; border-bottom: 1px solid var(--ac-line); padding: 0 0 12px; }
  .frag-split > div:last-child { padding: 12px 0 0; }
  .frag-phase { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* On a 320px screen the article's own padding, the fragment's, and the card's
   stack up to 152px — nearly half the width — and the shapes inside were left
   with 166px. The article column is already margin enough down here; the
   fragment gives up its own and the card keeps only what the border needs. */
/* ---------- second wave ----------
   Twelve more shapes so a page can show three or four things instead of one.
   Every grid here declares `minmax(0, 1fr)` rather than `1fr`: an `auto` floor
   is what let a track refuse to shrink and pushed a card off the side of the
   phone, which is the bug this whole stylesheet family was just repaired for. */

/* ---------- board ---------- */

.frag-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.frag-board > div { padding: 10px; border-radius: 10px; background: var(--ac-faint); }
.frag-board > div.is-lead { background: #eaf0fd; }
.frag-board b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.frag-board .frag-dim { font-size: 11px; }

/* ---------- record ---------- */

.frag-record > header { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }
.frag-record > header > div { min-width: 0; flex: 1 1 11rem; }
.frag-record > header strong { display: block; font-size: 15px; letter-spacing: -0.015em; }
.frag-record > header .frag-dim { font-size: 11.5px; }
.frag-avatar.is-lg { width: 34px; height: 34px; font-size: 12px; }
.frag-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--ac-line); }
.frag-tags li { padding: 3px 9px; border-radius: 999px; background: var(--ac-faint); color: var(--ac-mut); font-size: 11.5px; font-weight: 600; }

/* ---------- list (my day) / files ---------- */

.frag-list, .frag-files { list-style: none; margin: 0; padding: 0; }
.frag-list li, .frag-files li { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.frag-list li + li, .frag-files li + li { border-top: 1px solid var(--ac-line); }
/* A real basis, not `flex: 1`. With basis zero the row divides itself by who
   refuses to shrink, and the chip on the right — a fixed phrase like "El
   cliente lo ve" — always wins: the sentence it labels was left 154px on a
   phone. Given a basis the chip wraps to its own line instead, and keeps its
   right edge there. */
.frag-list li, .frag-files li { flex-wrap: wrap; }
.frag-list li > div, .frag-files li > div { flex: 1 1 11rem; min-width: 0; }
.frag-list li > .frag-chip, .frag-files li > .frag-chip { margin-left: auto; }
.frag-list strong, .frag-files strong { display: block; font-size: 12.5px; font-weight: 600; }
.frag-list .frag-dim, .frag-files .frag-dim { display: block; font-size: 11.5px; margin-top: 1px; }

/* ---------- thread ---------- */

.frag-thread { list-style: none; margin: 0; padding: 0; }
.frag-thread li { display: flex; gap: 10px; padding: 10px 0; }
.frag-thread li + li { border-top: 1px solid var(--ac-line); }
.frag-thread li > div { min-width: 0; }
.frag-thread strong { font-size: 12px; font-weight: 700; }
.frag-thread .frag-dim { font-weight: 400; }
.frag-thread p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; }
.frag-thread li.is-internal { background: var(--ac-faint); border-radius: 10px; padding: 10px 12px; }
.frag-thread li.is-internal .frag-chip { margin-top: 7px; }

/* ---------- roles matrix ---------- */

.frag-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.frag-matrix th { padding: 0 0 8px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-dim); }
.frag-matrix td { padding: 9px 0; border-top: 1px solid var(--ac-line); }
.frag-matrix td:first-child { font-weight: 600; }
.frag-matrix td.is-yes { color: var(--ac-good); font-weight: 600; }
.frag-matrix td.is-no { color: var(--ac-dim); }
.frag-matrix td.is-part { color: var(--ac-blue); font-weight: 600; }

/* ---------- migration preview ---------- */

.frag-import > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.frag-import > header .frag-label { margin: 0; }
.frag-import > header .frag-chip { margin-left: auto; }
.frag-import ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.frag-import li { padding: 10px; border-radius: 10px; background: var(--ac-faint); }
.frag-import strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.frag-import span { display: block; font-size: 11px; color: var(--ac-mut); margin-top: 1px; }
.frag-import i { display: block; font-style: normal; font-size: 11px; margin-top: 5px; }

/* ---------- reminder ---------- */

.frag-remind > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.frag-remind > header .frag-label { margin: 0; }
.frag-remind > header .frag-chip { margin-left: auto; }
.frag-remind > strong { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.frag-remind > .frag-dim { display: block; margin-top: 4px; font-size: 12px; }

/* ---------- plan meters ---------- */

.frag-meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.frag-meters b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.frag-meters .frag-dim { font-weight: 400; font-size: 12px; }
.frag-meters i { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--ac-line); position: relative; }
.frag-meters i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill); border-radius: 999px; background: var(--ac-blue); }

/* ---------- search ---------- */

.frag-searchbox { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--ac-line); border-radius: 9px; background: var(--ac-faint); font-size: 13px; color: var(--ac-mut); }
.frag-search ul { list-style: none; margin: 10px 0 0; padding: 0; }
.frag-search li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12.5px; }
.frag-search li + li { border-top: 1px solid var(--ac-line); }
.frag-search .frag-chip { flex: none; width: 74px; justify-content: center; }
.frag-search strong { font-weight: 600; }
.frag-search .frag-dim { margin-left: auto; font-size: 11.5px; text-align: right; }

/* ---------- week ---------- */

.frag-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.frag-week > div { padding: 10px 8px; border-radius: 10px; background: var(--ac-faint); min-height: 78px; }
.frag-week > div.is-today { background: #eaf0fd; }
.frag-week i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--ac-line); margin-bottom: 6px; }
.frag-week i.is-info { background: var(--ac-blue); }
.frag-week i.is-good { background: var(--ac-good); }
.frag-week i.is-bad { background: var(--ac-bad); }
.frag-week b { font-size: 11px; font-weight: 600; line-height: 1.35; }

@media (max-width: 620px) {
  /* Four and five across is a desktop reading; on a phone these become two,
     which is still a comparison and still fits a formatted amount. */
  .frag-board, .frag-import ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frag-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frag-search .frag-chip { width: auto; }
  .frag-search li { flex-wrap: wrap; }
  .frag-search .frag-dim { margin-left: 0; width: 100%; text-align: left; }
}

@media (max-width: 400px) {
  /* The timestamp column is 46px of a 230px row once the article's own margins
     have taken their share, and what is left cannot hold a sentence. The date
     goes above the line it dates instead of beside it. */
  .frag-log li, .frag-timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  /* Two figures side by side is the whole statement of this shape, right up to
     the point where each cell is 117px and the amount inside it breaks across
     lines. Stacked they still read as a pair, and the numbers stay whole. */
  .frag-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 380px) {
  .frag { padding: 0; }
  .frag-body { padding: 14px; }
}

@media print {
  .frag-body { box-shadow: none; }
}