@layer pages {
  .pnl-title {
    margin: 0;
  }


  .receipt {
    max-width: 28rem;
    padding: var(--s-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: var(--font-mono);

    .headline {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--s-4);
      padding-bottom: var(--s-4);
      border-bottom: 1px dashed var(--border);

      .label {
        font-family: var(--font-sans);
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.8125rem;
      }

      .amount {
        font-size: 2rem;
        font-weight: 650;
        color: var(--positive);
      }

      &.is-loss .amount {
        color: var(--negative);
      }
    }

    .lines {
      display: grid;
      gap: var(--s-3);
      margin: var(--s-4) 0;

      .line {
        display: flex;
        align-items: baseline;
        gap: var(--s-2);

        dt {
          display: flex;
          align-items: baseline;
          flex: 1;
          color: var(--muted);

          &::after {
            content: "";
            flex: 1;
            margin-left: var(--s-2);
            border-bottom: 2px dotted color-mix(in oklab, var(--muted) 45%, transparent);
            transform: translateY(-0.25em);
          }
        }

        dd {
          margin: 0;
          font-variant-numeric: tabular-nums;
        }
      }
    }

    .margin {
      padding-top: var(--s-4);
      border-top: 1px dashed var(--border);
      font-size: 0.8125rem;
      text-align: right;
    }
  }

  .compact-wrap {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .receipt-compact {
    max-width: 64rem;
    margin-inline: auto;
    padding: var(--s-3) var(--s-5);
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    font-family: var(--font-mono);

    .label {
      font-family: var(--font-sans);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 0.75rem;
    }

    .amount {
      font-size: 1.25rem;
      color: var(--positive);

      &.in-the-red {
        color: var(--negative);
      }
    }

    .period {
      margin-left: auto;
      color: var(--muted);
      font-size: 0.8125rem;
    }
  }

  .period-nav {
    display: inline-flex;
    gap: var(--s-1);
    margin: var(--s-3) 0 var(--s-6);
    padding: var(--s-1);
    background: var(--surface-2);
    border-radius: var(--radius-sm);

    .seg {
      padding: var(--s-1) var(--s-3);
      border-radius: var(--radius-sm);
      color: var(--muted);

      &:hover {
        text-decoration: none;
        color: var(--ink);
      }

      &.is-active {
        background: var(--surface);
        color: var(--ink);
        box-shadow: var(--shadow);
      }
    }
  }

  .pnl-transactions {
    width: 100%;
    border-collapse: collapse;

    th.actions,
    td.actions {
      text-align: center;
      white-space: nowrap;
    }

    thead th {
      padding: var(--s-2);
      border-bottom: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 600;
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 0.0em;
      
      &.amount {
        text-align: right;
      }
    }

    td {
      padding: var(--s-3) var(--s-2);
      border-bottom: 1px solid var(--border);
      vertical-align: top;

      &.date {
        white-space: nowrap;
        color: var(--muted);
        font-size: 0.875rem;
      }

      &.amount {
        text-align: right;
        white-space: nowrap;
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;

        &.is-negative {
          color: var(--negative);
        }
      }

      &.actions {
        width: 1%;

        .switch {
          display: inline-flex;
          align-items: center;
          gap: var(--s-2);
          font-size: 0.8125rem;
          color: var(--muted);
          cursor: pointer;
          white-space: nowrap;

          input {
            appearance: none;
            inline-size: 2.2rem;
            block-size: 1.25rem;
            border-radius: 999px;
            background: var(--surface-2);
            border: 1px solid var(--border);
            position: relative;
            cursor: pointer;
            transition: background 0.15s ease;

            &::after {
              content: "";
              position: absolute;
              inset-block-start: 50%;
              inset-inline-start: 2px;
              inline-size: 0.95rem;
              block-size: 0.95rem;
              border-radius: 50%;
              background: var(--surface);
              transform: translateY(-50%);
              transition: inset-inline-start 0.15s ease;
            }

            &:checked {
              background: var(--accent);

              &::after {
                inset-inline-start: calc(100% - 0.95rem - 2px);
              }
            }
          }
        }
      }
    }
  }
}