/* styles/sections/trace-figure.css
 * Source-to-proposal trace (Personas "Figure" ZDxss, zvL9r, dTIeS): the interview notes (Source
 * Doc grSDN, 560) beside the proposed persona (awfg6, 584), 136 apart, joined by the Trace Lines
 * (mrBU0), a Pencil export placed at the figure's 1280 x 870 geometry. The lines are measured
 * to that geometry, so the pair keeps it: at full size from 1440 (centred in the 1680 container
 * at 1920), scaled whole below that (container trace: 0.9, 0.8, 0.75), and below a 960 container
 * the figure is the M frame's card (FNQVn): each highlighted line with the need it feeds on a
 * return arrow, no connectors. The windows are product UI transcribed from the frame. */
@layer sections {
  .trace {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    margin: 0;
    container: trace / inline-size;
  }

  .trace p,
  .trace ol,
  .trace ul {
    margin: 0;
  }

  .trace__frame {
    position: relative;
    width: 1280px;
    height: 870px;
    font-family: var(--font-body);
    line-height: 1.2;
    color: var(--app-ink);
  }

  .trace__pair {
    display: flex;
    gap: 136px;
    height: 100%;
  }

  .trace__lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .trace__caption {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 18px;
    color: var(--ink-55);
  }

  /* ---------- Source notes ---------- */
  .trace__doc {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--space-6);
    width: 560px;
    padding: 36px var(--space-32) var(--space-32);
  }

  .src-star {
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: 5px;
    padding-bottom: var(--space-14);
    font-size: 12px;
    color: var(--shot-text-2);
  }

  .src-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: -0.5px;
  }

  .src-subtitle {
    font-size: 14px;
    line-height: 21px;
    color: var(--app-subtitle);
  }

  .src-quotes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-10) 0 0;
    list-style: none;
  }

  .src-quote {
    display: flex;
    gap: var(--space-10);
    padding: 5px var(--space-8);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 19px;
    color: var(--app-quote-text);
  }

  .src-num {
    flex: none;
    width: 20px;
    text-align: right;
    color: var(--shot-text-2);
  }

  .src-text {
    flex: 1;
  }

  .src-quote--traced {
    background: var(--app-quote-mark);
  }

  .src-quote--traced .src-num {
    font-weight: 700;
    color: var(--fern);
  }

  /* ---------- Proposal ---------- */
  .trace__proposal {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .prop-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--app-sidebar-edge);
  }

  .prop-crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 13px;
    color: var(--shot-text-2);
  }

  .prop-crumbs__current {
    color: var(--app-ink-strong);
  }

  .prop-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    font-size: 13px;
  }

  .prop-chat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px var(--space-10);
    color: var(--app-ink-2);
  }

  .prop-btn {
    padding: 7px var(--space-14);
    border-radius: 5px;
    font-weight: 700;
    color: var(--white);
  }

  .prop-btn--reject { background: var(--app-reject); }
  .prop-btn--accept { background: var(--app-brand); }

  .prop-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    padding: 28px var(--space-40) var(--space-32);
  }

  .prop-name {
    font-size: 22px;
    font-weight: 700;
  }

  .prop-desc {
    font-size: 15px;
    line-height: 23px;
    color: var(--app-body);
  }

  .prop-priority {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-size: 13px;
    color: var(--app-ink-2);
  }

  .prop-select {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: var(--space-8) var(--space-12);
    border-radius: 6px;
    outline: 1px solid var(--app-field-edge);
    outline-offset: -1px;
    color: var(--app-ink-strong);
  }

  .prop-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .prop-list__head {
    font-size: 14px;
    font-weight: 700;
  }

  .prop-list ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: 0;
    list-style: none;
  }

  .prop-list li {
    display: flex;
    gap: var(--space-10);
    font-size: 14px;
    line-height: 21px;
    color: var(--app-body);
  }

  .prop-list li::before {
    content: "•";
  }

  .prop-list--needs li::before {
    font-weight: 700;
    color: var(--fern);
  }

  .prop-related {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-16);
    border-top: 1px solid var(--app-sidebar-edge);
  }

  .prop-related__label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 14px;
    font-weight: 700;
  }

  .prop-related__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--app-ink-2);
  }

  /* ---------- M card ---------- */
  /* The card fills its column; from a 700 card (900 to about 1120 viewports) the pairs run in
     two columns, as the D figure sets the notes and the proposal side by side */
  .trace__card {
    display: flex;
    flex-direction: column;
    container: trace-card / inline-size;
    padding: var(--space-24) var(--space-20) var(--space-8);
    font-family: var(--font-body);
    line-height: 1.2;
    color: var(--app-ink);
  }

  .trace-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
  }

  .trace-card__head .src-title {
    font-size: 17px;
    line-height: normal;
    letter-spacing: 0;
  }

  .trace-card__into {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--app-ink-2);
  }

  .trace-card__pairs {
    padding: 0;
    list-style: none;
  }

  .trace-card__pairs > li {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-block: var(--space-16);
    box-shadow: inset 0 1px 0 var(--line-2);
  }

  .trace-card__pairs .src-num {
    text-align: left;
  }

  .trace-card__need {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding-left: var(--space-10);
    font-size: 14px;
    line-height: 21px;
    color: var(--app-body);
  }

  .trace-card__need > img {
    margin-block: 3.5px;
  }

  @container trace-card (width >= 700px) {
    .trace-card__pairs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-32);
    }
  }

  /* ---------- Which figure, at what scale ---------- */
  @container trace (width >= 960px) {
    .trace__m { display: none; }
  }

  @container trace (width < 960px) {
    .trace__frame { display: none; }
  }

  @container trace (width < 1280px) {
    .trace__frame { zoom: 0.9; }
  }

  @container trace (width < 1152px) {
    .trace__frame { zoom: 0.8; }
  }

  @container trace (width < 1024px) {
    .trace__frame { zoom: 0.75; }
  }

  @media (min-width: 1680px) {
    .trace {
      align-items: center;
    }
  }

  @media (forced-colors: active) {
    .trace-card__pairs > li {
      border-top: 1px solid CanvasText;
    }
  }
}