/* styles/sections/faux-app-panel.css
 * Faux app side panel: sync line, Launches roadmap, dependency arrows, Recent decisions. */
@layer sections {

  /* Sync status above the roadmap. */
  .fa-sync {
    margin-bottom: 18px;
    color: var(--fa-muted);
    font-size: 12px;
  }

  .fa-refresh {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fa-fern);
    font-size: 12px;
    font-weight: 500;
    vertical-align: bottom;
  }

  .fa-refresh::before {
    content: "";
    position: absolute;
    inset: -16px -10px;
  }

  .fa-refresh .fa-icon {
    width: 12px;
    height: 12px;
  }

  .fa-rm {
    --fa-c1: 168px;
    --fa-c2: 52px;
    --fa-gap: 24px;

    display: flex;
    flex-direction: column;
  }

  .fa-rm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .fa-rm-top .fa-rm-title {
    margin: 0;
    color: var(--fa-ink);
    font-family: var(--fa-serif);
    font-size: 18px;
    font-weight: 900;
  }

  .fa-legend {
    display: flex;
    gap: 14px;
    color: var(--fa-muted);
    font-size: 11px;
  }

  .fa-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .fa-key {
    width: 14px;
    height: 7px;
    border-radius: 2px;
  }

  .fa-key--plan {
    box-shadow: inset 0 0 0 1.5px var(--fa-track);
  }

  .fa-key--done {
    background: var(--fa-done);
  }

  .fa-key--latest {
    width: 7px;
    height: 7px;
    margin: 0 3px;
    border-radius: 0;
    background: var(--fa-ink);
    transform: rotate(45deg);
  }

  .fa-key--added {
    background: var(--fa-amber);
  }

  .fa-key--reopen {
    width: 7px;
    height: 7px;
    margin: 0 3px;
    border: 1.5px solid var(--fa-ink);
    border-radius: 0;
    transform: rotate(45deg);
  }

  /* ── Grid ──────────────────────────────────────────────────────────────── */

  .fa-rm-grid {
    position: relative;
  }

  .fa-rm-axis,
  .fa-rm-row {
    display: grid;
    grid-template-columns: var(--fa-c1) 1fr var(--fa-c2);
    gap: var(--fa-gap);
  }

  .fa-rm-axis {
    height: 36px;
    margin-top: 16px;
    border-bottom: 1px solid var(--fa-line-strong);
  }

  .fa-lane {
    position: relative;
  }

  .fa-month {
    position: absolute;
    z-index: 3;
    bottom: 8px;
    padding: 0 4px;
    background: var(--fa-surface);
    color: var(--fa-ink-2);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .fa-delta-head {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    border-left: 1px solid var(--fa-line);
    padding-bottom: 8px;
    color: var(--fa-muted);
    font-size: 11px;
    font-weight: 500;
    text-align: right;
  }

  /* Month gridlines and the today rule span the lane column of every row. */
  .fa-rm-guides {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--fa-c1) + var(--fa-gap));
    right: calc(var(--fa-c2) + var(--fa-gap));
    pointer-events: none;
  }

  .fa-rm-guides > span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--fa-line);
  }

  .fa-rm-guides > .fa-today {
    z-index: 2;
    top: 0;
    background: var(--black-35);
  }

  .fa-today em {
    position: absolute;
    top: -8px;
    left: 50%;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--fa-fern);
    color: var(--fa-on-fern);
    font-size: 9.5px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
    transform: translateX(-50%);
  }

  /* ── Rows ──────────────────────────────────────────────────────────────── */

  .fa-rm-row {
    position: relative;
    height: 44px;
    border-bottom: 1px solid var(--fa-line);
    cursor: pointer;
  }

  .fa-rm-row:hover {
    background: var(--fa-hover);
  }

  .fa-rm-row.is-selected {
    background: var(--fa-amber-soft);
    box-shadow: inset 2px 0 0 var(--fa-amber);
  }

  .fa-rm-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .fa-rm-row.is-selected .fa-rm-name {
    padding-left: 10px;
  }

  /* The button is static so its ::after reaches the row (position: relative) and is not clipped
     by the ellipsis overflow: the whole row is a 44px target. */
  .fa-row-btn::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .fa-row-btn {
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    color: var(--fa-ink);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fa-rm-row.is-selected .fa-row-btn {
    font-weight: 700;
  }

  .fa-row-btn:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .fa-status {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--fa-line-strong);
    vertical-align: 1px;
  }

  .fa-status--late,
  .fa-status--open {
    background: var(--fa-amber);
  }

  .fa-status--early {
    background: var(--fa-fern);
  }

  .fa-rm-name span {
    padding-left: 14px;
    overflow: hidden;
    color: var(--fa-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fa-rm-section {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    height: 32px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--fa-line);
    background: var(--fa-surface);
    color: var(--fa-muted);
    font-size: 11px;
    font-weight: 600;
  }

  .fa-delta {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-left: 1px solid var(--fa-line);
    color: var(--fa-muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  .fa-delta.is-late {
    color: var(--fa-amber-ink);
    font-weight: 600;
  }

  .fa-delta.is-early {
    color: var(--fa-fern);
    font-weight: 600;
  }

  /* ── Bars ──────────────────────────────────────────────────────────────── */

  .fa-seg {
    position: absolute;
    z-index: 1;
    top: 50%;
    height: 10px;
    margin-top: -5px;
  }

  .fa-seg--track {
    border-radius: 3px;
    box-shadow: inset 0 0 0 1.5px var(--fa-track);
  }

  .fa-seg--done {
    border-radius: 3px 0 0 3px;
    background: var(--fa-done);
  }

  .fa-seg--added {
    border-radius: 0 3px 3px 0;
    background: var(--fa-amber);
  }

  /* The decision row: each reopen is a diamond sitting on its own track. */
  .fa-diamond {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--fa-ink);
    background: var(--fa-surface);
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .fa-diamond--latest {
    background: var(--fa-ink);
  }

  /* Dependency arrows (drawn by drawLinks in js/faux-app.js). */
  .fa-links {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
  }

  .fa-arrow-dot {
    fill: color-mix(in srgb, var(--fa-fern) 50%, transparent);
  }

  .fa-arrow,
  .fa-arrow-head {
    fill: none;
    stroke: color-mix(in srgb, var(--fa-fern) 50%, transparent);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ── Recent decisions ──────────────────────────────────────────────────── */

  .fa-block {
    margin-top: 26px;
  }

  .fa-block .fa-rm-top {
    margin-bottom: 10px;
  }

  .fa-dec-list {
    border-top: 1px solid var(--fa-line-strong);
  }

  .fa-dec {
    display: grid;
    grid-template-columns: 64px 1fr 92px 48px;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 38px;
    border-bottom: 1px solid var(--fa-line);
    color: var(--fa-ink-2);
    font-size: 11.5px;
    text-align: left;
  }

  .fa-dec:hover {
    background: var(--fa-hover);
  }

  .fa-dec strong {
    overflow: hidden;
    color: var(--fa-ink);
    font-size: 12.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fa-dec-status {
    color: var(--fa-muted);
  }

  .fa-dec.is-open .fa-dec-status {
    color: var(--fa-amber-ink);
    font-weight: 600;
  }

  .fa-dec-date {
    color: var(--fa-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* Narrow main pane: keep names, drop subtitles and slip. */
  @container (max-width: 520px) {
    .fa-rm {
      --fa-c1: 128px;
      --fa-c2: 40px;
      --fa-gap: 16px;
    }

    .fa-rm-name span,
    .fa-legend {
      display: none;
    }

    .fa-rm-row {
      height: 36px;
    }

    .fa-row-btn {
      font-size: 12px;
    }

    /* Months shrink to their initial so seven fit the narrow lane. */
    .fa-month {
      font-size: 0;
    }

    .fa-month::after {
      content: attr(data-initial);
      font-size: 10px;
    }

    .fa-diamond {
      width: 7px;
      height: 7px;
      border-width: 1.25px;
    }

    /* Decisions keep status, title and date; the owner drops out. */
    .fa-dec {
      grid-template-columns: 54px minmax(0, 1fr) 44px;
    }

    .fa-dec > span:not([class]) {
      display: none;
    }
  }

  /* Narrowest panel: drop the source list so the sync line stays on one row. */
  @container (max-width: 359px) {
    .fa-sync-from {
      display: none;
    }
  }
}