/* Product mockups drawn with HTML and CSS. Fictional data. Widths and offsets come from classes (no inline styles: CSP). */
@layer mockups {
  .mock {
    --m-bg: #0f1a31; --m-panel: #16233f; --m-line: #26365a; --m-text: #dfe7fb; --m-dim: #8fa0c6; --m-accent: #7aa7ff;
    background: var(--m-bg); color: var(--m-text); border: 1px solid var(--m-line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); overflow: hidden; font-size: 0.78rem; text-align: start;
    container-type: inline-size;
  }
  .mock-bar { display: flex; align-items: center; gap: 6px; padding: 0.55rem 0.8rem; background: #0b1324; border-block-end: 1px solid var(--m-line); color: var(--m-dim); }
  .mock-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #34456b; }
  .mock-bar span { margin-inline-start: 0.5rem; font-weight: 600; }
  .mock-body { padding: 0.8rem; }
  .m-chip { display: inline-block; padding: 0.05rem 0.5rem; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 600; font-style: normal; }
  .m-chip.c1 { background: #17335f; color: #9dc0ff; }
  .m-chip.c2 { background: #1d3a2d; color: #86e0ad; }
  .m-chip.c3 { background: #3b2d14; color: #ffc978; }
  .m-line { display: block; block-size: 5px; border-radius: 3px; background: #2a3c63; margin-block-start: 0.45rem; }
  .w30 { inline-size: 30%; } .w35 { inline-size: 35%; } .w40 { inline-size: 40%; } .w50 { inline-size: 50%; }
  .w60 { inline-size: 60%; } .w70 { inline-size: 70%; } .w80 { inline-size: 80%; } .w90 { inline-size: 90%; }
  .s0 { margin-inline-start: 0; } .s10 { margin-inline-start: 10%; } .s30 { margin-inline-start: 30%; }
  .s40 { margin-inline-start: 40%; } .s65 { margin-inline-start: 65%; }

  /* Board */
  .board-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .board-col .col-title { display: block; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-dim); margin-block-end: 0.5rem; }
  .m-card { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 8px; padding: 0.55rem; margin-block-end: 0.5rem; display: grid; gap: 0.25rem; }
  .m-card b { font-size: 0.74rem; }
  .m-card.hot { border-color: var(--m-accent); box-shadow: 0 0 0 1px var(--m-accent) inset; }
  @container (max-width: 30rem) { .board-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Timeline */
  .tl-row { display: grid; grid-template-columns: 8rem 1fr; gap: 0.6rem; align-items: center; padding-block: 0.35rem; }
  .tl-row > span { color: var(--m-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-track { background: #0b1324; border-radius: 6px; block-size: 14px; position: relative; }
  .tl-bar { display: block; block-size: 14px; border-radius: 6px; background: #34578f; }
  .tl-bar.crit { background: linear-gradient(90deg, #7aa7ff, #a58bff); }
  .tl-legend { display: flex; align-items: center; gap: 0.4rem; margin-block-start: 0.5rem; color: var(--m-dim); }
  .tl-legend i { inline-size: 14px; block-size: 8px; border-radius: 4px; background: linear-gradient(90deg, #7aa7ff, #a58bff); }
  @media (max-width: 30rem) { .tl-row { grid-template-columns: 5.5rem 1fr; } }

  /* Data room */
  .room-cols { display: grid; grid-template-columns: 9rem 1fr; gap: 0.8rem; }
  .room-tree, .room-files, .access-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; align-content: start; }
  .room-tree li { padding: 0.3rem 0.5rem; border-radius: 6px; color: var(--m-dim); }
  .room-tree li.open { background: var(--m-panel); color: var(--m-text); font-weight: 600; }
  .room-tree li.sub { padding-inline-start: 1.2rem; }
  .room-files li, .access-list li { display: flex; align-items: center; gap: 0.6rem; background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 8px; padding: 0.5rem 0.6rem; }
  .room-files li span, .access-list li span:nth-child(2) { flex: 1; }
  .m-file { inline-size: 14px; block-size: 18px; border-radius: 3px; background: #34578f; flex: none; }
  .m-avatar { inline-size: 22px; block-size: 22px; border-radius: 50%; flex: none; }
  .m-avatar.a1 { background: #7aa7ff; } .m-avatar.a2 { background: #86e0ad; } .m-avatar.a3 { background: #ffc978; } .m-avatar.a4 { background: #c9a6ff; }
  .access-note { margin-block-start: 0.7rem; color: var(--m-dim); }
}