/* Building with a buddy: the sidebar card, the Buddy tab (how it works and your invite, or the two of you) and
   someone's invite. */
@layer sections {
  /* Two faces, overlapping: you in red, your buddy in purple, a dashed + while there's no one. */
  .buddy-card__faces {
    flex: none;
    display: flex;
  }

  .buddy-face {
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--white);
    font: 700 13px var(--font-cell);
    color: var(--white);

    & + & {
      margin-inline-start: -6px;
    }

    &[data-empty],
    &[data-pending] {
      border: 2px dashed var(--grey-500);
      background: var(--white);
      box-shadow: none;
      font: 400 18px var(--font-chrome);
      color: var(--grey-600);
    }

    &[data-pending] {
      border-color: #b06000;
      color: #b06000;
    }

    .buddy-card__faces--large & {
      inline-size: 40px;
      block-size: 40px;
      font-size: 16px;

      & + & {
        margin-inline-start: -8px;
      }
    }
  }

  .buddy-face--large {
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    box-shadow: none;
    font-size: 14px;
  }

  /* The sidebar card */
  .buddy-card {
    gap: 12px;
    padding: 16px;

    > .project__card-title {
      padding: 0;
    }
  }

  .buddy-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .buddy-card__head--spread {
    justify-content: space-between;
  }

  .buddy-card__who {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .buddy-card__title {
    font: 700 15px var(--font-cell);
    color: var(--text-primary);
    text-decoration: none;

    &:is(a):hover {
      text-decoration: underline;
    }
  }

  .buddy-card__note {
    overflow: hidden;
    font: 13px/1.4 var(--font-cell);
    color: var(--text-secondary);
    text-overflow: ellipsis;
    text-wrap: pretty;
  }

  .buddy-card__streak {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;

    b {
      font: 700 17px var(--font-cell);
    }

    span {
      font: 11px var(--font-cell);
      color: var(--grey-600);
    }
  }

  .buddy-card__badge {
    padding: 3px 8px;
    border-radius: 3px;
    background: #fef7e0;
    font: 600 11px var(--font-mono);
    color: #b06000;
  }

  .buddy-card__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--border-grid);
  }

  .buddy-card__caption {
    font: 12px var(--font-cell);
    color: var(--grey-600);
  }

  .buddy-card__rewards {
    padding: 0;
    border: 0;
  }

  .buddy-card__ladder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      align-items: center;
      gap: 10px;
      font: 13px/1.3 var(--font-cell);
    }
  }

  .buddy-card__ladder-key {
    flex: none;
    inline-size: 50px;
    block-size: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-header);
    border-radius: 3px;
    font: 600 11px var(--font-mono);
    color: var(--text-secondary);
  }

  .buddy-card__fine {
    font: 12px/1.4 var(--font-cell);
    color: var(--grey-600);
  }

  .buddy-card__fine--padded {
    padding-block-start: 10px;
    border-block-start: 1px solid var(--border-grid);
  }

  .buddy-card__shot {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    object-fit: cover;
  }

  /* The invite link: a read-only field and Copy, or a compact Copy invite link button. */
  .buddy-link {
    align-self: stretch;
    max-inline-size: 560px;
    display: flex;
    align-items: center;
    gap: 8px;

    .project__step-button {
      --icon-size: 18px;

      flex: none;
      gap: 6px;
      padding-inline: 20px;
    }
  }

  .buddy-link__input {
    flex: 1;
    min-inline-size: 0;
    block-size: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-header);
    border-radius: 6px;
    background: var(--grey-75);
    font: 14px var(--font-mono);
    color: var(--text-primary);
  }

  .buddy-link__compact {
    --icon-size: 18px;

    block-size: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px 0 12px;
    border: 1px solid var(--border-control);
    border-radius: 18px;
    background: var(--white);
    font: 500 14px var(--font-chrome);
    color: var(--text-primary);
    cursor: pointer;

    &:hover {
      background: #f1f4f9;
    }
  }

  /* The Buddy tab, before you're paired */
  .buddy-invite {
    max-inline-size: 1040px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 56px 56px;
  }

  .buddy-rules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border-header);
  }

  .buddy-rules__cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 18px 16px;

    & + & {
      border-inline-start: 1px solid var(--border-grid);
    }
  }

  /* The column letters, like a sheet's header row. */
  .buddy-rules__column {
    margin: 0 -18px 10px;
    padding: 5px 0;
    border-block-end: 1px solid var(--border-header);
    background: var(--grey-75);
    font: 12px var(--font-cell);
    color: var(--text-secondary);
    text-align: center;
  }

  .buddy-rules__formula {
    font: 12px var(--font-mono);
    color: var(--grey-600);
  }

  .buddy-rules__title {
    font: 700 17px var(--font-cell);
  }

  .buddy-rules__text {
    font: 14px/1.45 var(--font-cell);
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  .buddy-invite__ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .buddy-invite__way {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--border-header);
    border-radius: 8px;
  }

  /* A sticky note on the sheet. */
  .buddy-sticky {
    align-self: flex-start;
    max-inline-size: 440px;
    padding: 10px 14px;
    border: 1px solid #e0d68a;
    background: #fff8c4;
    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
    font: 13px/1.45 var(--font-cell);
  }

  .buddy-pair__soon {
    font: 14px/1.45 var(--font-cell);
    color: var(--grey-600);
  }

  /* This week's hours for each of you, against the weekly goal. */
  .buddy-hours {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .buddy-hours__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    font: 14px var(--font-cell);
  }

  .buddy-hours__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .buddy-hours__bar {
    block-size: 10px;
    border-radius: 5px;
    background: var(--grey-75);
    box-shadow: inset 0 0 0 1px var(--border-grid);
    overflow: hidden;

    > span {
      display: block;
      block-size: 100%;
      background: var(--blue-600);
    }

    [data-done] > & > span {
      background: var(--green);
    }
  }

  .buddy-hours__value {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }

  /* The Buddy tab, paired */
  .buddy-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 44px;
    padding: 28px 48px 48px;
  }

  .buddy-pair__main {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .buddy-pair__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }

  .buddy-pair__who {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .buddy-pair__streak {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .buddy-pair__streak-label {
    font: 12px var(--font-cell);
    color: var(--grey-600);
  }

  .buddy-pair__streak-value {
    font: 700 34px/1.1 var(--font-cell);
    letter-spacing: -1px;
  }

  .buddy-pair__streak-note {
    font: 13px var(--font-cell);
    color: #b06000;
  }

  .buddy-pair__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .buddy-reward {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    margin-inline: -16px;
    border-block-start: 1px solid var(--border-grid);
  }

  .buddy-reward__text {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 16px;
    font: 14px var(--font-cell);
  }

  .buddy-reward__key {
    font: 11px var(--font-mono);
    color: var(--grey-600);
  }

  .buddy-reward__status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    background: #fef7e0;
    font: 600 11px var(--font-mono);
    color: #b06000;
    text-align: end;

    [data-state="earned"] > & {
      background: var(--green-50);
      color: #137333;
    }
  }

  /* Someone's invite */
  .buddy-invited {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 48px 24px;
  }

  .buddy-invited > .buddy-sticky {
    align-self: center;
  }

  .buddy-invited__card {
    inline-size: 100%;
    max-inline-size: 560px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border-radius: 8px;
    background: var(--white);
    box-shadow: 0 1px 3px rgb(60 64 67 / 30%), 0 4px 8px 3px rgb(60 64 67 / 15%);
  }

  .buddy-invited__title {
    margin-block-end: 6px;
    font: 700 24px/1.2 var(--font-cell);
    letter-spacing: -0.4px;
  }

  .buddy-invited__project,
  .buddy-invited__get {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-grid);
    border-radius: 8px;
  }

  .buddy-invited__shot {
    inline-size: 100%;
    block-size: 190px;
    border-block-end: 1px solid var(--border-grid);
    object-fit: cover;
  }

  .buddy-invited__about {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }

  .buddy-invited__tool {
    flex: none;
    font: 600 11px var(--font-mono);
    color: var(--text-secondary);
  }

  .buddy-invited__get-title {
    padding: 10px 14px;
    border-block-end: 1px solid var(--border-grid);
    font: 700 14px var(--font-cell);
  }

  .buddy-invited__reward {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    font: 14px var(--font-cell);

    & + & {
      border-block-start: 1px solid var(--border-grid);
    }

    > span {
      padding: 8px 14px;
    }
  }

  .buddy-invited__reward-key {
    border-inline-end: 1px solid var(--border-grid);
    background: var(--grey-75);
    font: 12px var(--font-mono);
    color: var(--grey-600);
  }

  .buddy-invited__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  /* Your buddy started a pomodoro: join it. */
  .project__buddy-live {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 16px;
    padding: 10px 10px 10px 14px;
    border: 1px solid #d3e3fd;
    border-radius: 8px;
    background: #e8f0fe;

    &[hidden] {
      display: none;
    }
  }

  .project__buddy-live-text {
    flex: 1;
    min-inline-size: 0;
    font: 500 14px/1.4 var(--font-chrome);
  }

  /* The Buddy tab's count, when you have one. */
  .sheet-tab__count {
    margin-inline-start: 6px;
    font: 600 11px var(--font-mono);
  }

  @media (width <= 900px) {
    .buddy-rules {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width <= 600px) {
    .buddy-invite,
    .buddy-pair {
      padding: 24px 16px;
    }

    .buddy-rules,
    .buddy-invite__ways,
    .buddy-pair {
      grid-template-columns: minmax(0, 1fr);
    }

    .buddy-rules__cell + .buddy-rules__cell {
      border-inline-start: 0;
      border-block-start: 1px solid var(--border-grid);
    }

    .buddy-pair__header {
      flex-direction: column;
      align-items: flex-start;
    }

    .buddy-pair__streak {
      align-items: flex-start;
    }
  }
}