aside {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: 310px;
  min-width: 270px;
  max-width: 50vw;
  height: 100vh;
  overflow: auto;
  resize: horizontal;
  direction: rtl;
  border-left: 1px solid var(--line);
  background: var(--panel);

  > * {
    direction: ltr;
  }

  > div[role="tablist"] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 46px;
    padding: 0 8px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);

    button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 10px 6px;
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--muted);
      font-size: 10px;
      font-weight: 750;

      &:hover {
        background: transparent;
      }

      &.active {
        border-bottom-color: var(--accent);
        color: var(--accent-dark);
      }
    }

    small {
      min-width: 18px;
      padding: 2px 5px;
      border-radius: 9px;
      background: var(--panel-soft);
      font-size: 9px;
    }
  }

  section {
    .people-search {
      position: relative;
      padding: 12px 12px 4px;

      &::before {
        position: absolute;
        top: 29px;
        left: 23px;
        z-index: 1;
        width: 11px;
        height: 11px;
        border: 1.5px solid var(--muted);
        border-radius: 50%;
        content: "";
        opacity: 0.8;
        pointer-events: none;
        transform: translateY(-50%);
      }

      &::after {
        position: absolute;
        top: 33px;
        left: 33px;
        width: 5px;
        height: 1.5px;
        border-radius: 1px;
        background: var(--muted);
        content: "";
        opacity: 0.8;
        pointer-events: none;
        transform: rotate(45deg);
      }

      input {
        width: 100%;
        height: 34px;
        padding: 0 10px 0 32px;
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        outline: none;
        background: var(--input);
        color: var(--ink);
        font-size: 11px;
        transition: border-color 140ms ease, box-shadow 140ms ease;

        &::placeholder {
          color: var(--muted);
          opacity: 0.85;
        }

        &:hover {
          border-color: var(--accent);
        }

        &:focus {
          border-color: var(--accent);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
        }

        &::-webkit-search-cancel-button {
          cursor: pointer;
        }
      }
    }

    > header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 42px;
      padding: 0 18px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    > nav {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 8px 9px 12px;

      > .person {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        box-shadow: none;
        text-align: left;

        &:hover {
          background: var(--panel-soft);
        }

        &.active {
          background: var(--panel-active);
        }

        > span:last-child {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
        }

        strong {
          font:
            600 12px Georgia,
            serif;
        }

        .secondary {
          overflow: hidden;
          color: var(--muted);
          font:
            500 9px Georgia,
            serif;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        small {
          overflow: hidden;
          color: var(--muted);
          font-size: 9px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .avatar {
          display: grid;
          flex: none;
          place-items: center;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: var(--avatar-neutral);
          color: var(--avatar-neutral-ink);
          font:
            600 12px Georgia,
            serif;
        }

        &.female .avatar {
          background: var(--avatar-female);
          color: var(--avatar-female-ink);
        }

        &.male .avatar {
          background: var(--avatar-male);
          color: var(--avatar-male-ink);
        }
      }
    }
  }

  .themes {
    padding: 18px;

    > header {
      height: auto;
      padding: 0 0 14px;
    }

    .theme-list {
      display: grid;
      gap: 8px;
    }

    .theme-option {
      --swatch-1: #f7f4ec;
      --swatch-2: #fffdf8;
      --swatch-3: #6d7c55;
      --swatch-4: #aa6048;
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px;
      text-align: left;

      &[data-theme-preview="solarized-light"] {
        --swatch-1: #fdf6e3;
        --swatch-2: #eee8d5;
        --swatch-3: #268bd2;
        --swatch-4: #2aa198;
      }

      &[data-theme-preview="solarized-dark"] {
        --swatch-1: #002b36;
        --swatch-2: #073642;
        --swatch-3: #2aa198;
        --swatch-4: #cb4b16;
      }

      &[data-theme-preview="gruvbox-light"] {
        --swatch-1: #fbf1c7;
        --swatch-2: #fff9dc;
        --swatch-3: #79740e;
        --swatch-4: #af3a03;
      }

      &[data-theme-preview="gruvbox-dark"] {
        --swatch-1: #282828;
        --swatch-2: #3c3836;
        --swatch-3: #b8bb26;
        --swatch-4: #d65d0e;
      }

      &[data-theme-preview="nord-light"] {
        --swatch-1: #eceff4;
        --swatch-2: #ffffff;
        --swatch-3: #5e81ac;
        --swatch-4: #8d5f89;
      }

      &[data-theme-preview="nord-dark"] {
        --swatch-1: #2e3440;
        --swatch-2: #3b4252;
        --swatch-3: #88c0d0;
        --swatch-4: #b48ead;
      }

      &.active {
        border-color: var(--accent);
        outline: 2px solid color-mix(in srgb, var(--accent) 24%, transparent);
      }

      > span:last-child {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      strong {
        font-size: 11px;
      }

      small {
        color: var(--muted);
        font-size: 9px;
        line-height: 1.35;
      }
    }

    .swatches {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      height: 34px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 5px;

      i:nth-child(1) { background: var(--swatch-1); }
      i:nth-child(2) { background: var(--swatch-2); }
      i:nth-child(3) { background: var(--swatch-3); }
      i:nth-child(4) { background: var(--swatch-4); }
    }
  }

  .export {
    padding: 18px;

    &.rendering,
    &.rendering * {
      cursor: progress !important;
    }

    > header {
      height: auto;
      padding: 0 0 14px;
    }

    .options {
      display: grid;
      gap: 10px;
    }

    label.option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      background: var(--input);
      color: var(--ink);
      font-size: 10px;
      font-weight: 650;
      cursor: pointer;

      input[type="checkbox"] {
        flex: none;
        width: 15px;
        height: 15px;
        padding: 0;
        accent-color: var(--accent);
        cursor: pointer;
      }
    }

    .format-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 14px 0 0;
      padding: 0;
      border: 0;

      legend {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-bottom: 9px;
        padding: 0;
        color: var(--muted);
        font-size: 9px;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.12em;

        &::before,
        &::after {
          flex: 1;
          height: 1px;
          background: var(--line);
          content: "";
        }
      }

      label {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        border: 1px solid var(--line-strong);
        border-radius: 5px;
        background: var(--input);
        color: var(--muted);
        font-size: 10px;
        font-weight: 750;
        cursor: pointer;

        &:has(input:checked) {
          border-color: var(--accent);
          background: var(--accent-soft);
          color: var(--ink);
        }

        input {
          position: absolute;
          width: 1px;
          height: 1px;
          opacity: 0;
        }
      }
    }

    .export-theme-section {
      margin: 14px 0 0;
      padding: 0;
      border: 0;

      > legend {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-bottom: 9px;
        padding: 0;
        color: var(--muted);
        font-size: 9px;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.12em;

        &::before,
        &::after {
          flex: 1;
          height: 1px;
          background: var(--line);
          content: "";
        }
      }

      .export-theme-picker {
        margin-top: 8px;
        padding: 0;

        .theme-option {
          position: relative;
          border: 1px solid var(--line-strong);
          border-radius: 6px;
          background: var(--button);
          box-shadow: 0 1px 1px var(--shadow);
          color: var(--ink);
          cursor: pointer;

          &:hover {
            border-color: var(--accent);
            background: var(--button-hover);
          }

          input[type="radio"] {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
          }
        }
      }
    }

    .export-section-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin: 14px 0 9px;
      padding: 0;
      color: var(--muted);
      font-size: 9px;
      font-weight: 750;
      text-transform: uppercase;
      letter-spacing: 0.12em;

      &::before,
      &::after {
        flex: 1;
        height: 1px;
        background: var(--line);
        content: "";
      }
    }

    .dpi-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 38px;
      margin-top: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      background: var(--input);
      color: var(--ink);
      font-size: 10px;
      font-weight: 650;

      .dpi-option-copy {
        display: grid;
        gap: 2px;

        small {
          color: var(--muted);
          font-size: 9px;
          font-weight: 500;
        }
      }

      input {
        width: 72px;
        padding: 6px 7px;
        border: 1px solid var(--line-strong);
        border-radius: 4px;
        background: var(--paper);
        color: var(--ink);
        text-align: right;
      }
    }

    .export-error {
      margin: 12px 0 0;
      padding: 9px 10px;
      border: 1px solid color-mix(in srgb, #b34d42 55%, var(--line));
      border-radius: 5px;
      background: color-mix(in srgb, #b34d42 10%, var(--input));
      color: var(--ink);
      font-size: 10px;
      line-height: 1.45;
    }

    .export-resolution {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.4;
    }

    .export-progress-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--canvas-frame) 28%, transparent);
      cursor: progress;
    }

    .export-progress-card {
      display: grid;
      grid-template-columns: minmax(180px, 280px) auto;
      gap: 9px 12px;
      align-items: center;
      min-width: 300px;
      padding: 16px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--panel);
      box-shadow: 0 12px 32px var(--shadow-strong);

      strong {
        grid-column: 1 / -1;
        color: var(--ink);
        font-size: 11px;
      }

      progress {
        width: 100%;
        height: 9px;
        accent-color: var(--accent);
      }

      span {
        min-width: 34px;
        color: var(--muted);
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        text-align: right;
      }
    }

    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 18px;

      .primary {
        color: var(--paper);
      }
    }

    .surname-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 4px;

      button:first-child {
        grid-column: 1 / -1;
      }
    }

    .surname-options {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    p {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 4px 18px 28px;

    label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 750;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    input,
    textarea,
    select {
      width: 100%;
      padding: 8px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      outline: none;
      background: var(--input);
      color: var(--ink);
      font-size: 11px;
      text-transform: none;
      letter-spacing: normal;

      &:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
      }
    }

    > .pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    > .date-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;

      .toggle {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 7px 8px;
        border: 1px solid var(--line-strong);
        border-radius: 5px;
        background: var(--input);
        color: var(--ink);
        font-size: 9px;
        line-height: 1.25;
        text-transform: none;
        letter-spacing: normal;
        cursor: pointer;

        input {
          flex: none;
          width: 15px;
          height: 15px;
          padding: 0;
          accent-color: var(--accent);
        }
      }
    }

    > .sheet-assignment {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 72px;
      align-items: stretch;
      gap: 8px;

      .toggle {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 7px 8px;
        border: 1px solid var(--line-strong);
        border-radius: 5px;
        background: var(--input);
        color: var(--ink);
        font-size: 9px;
        line-height: 1.25;
        text-transform: none;
        letter-spacing: normal;
        cursor: pointer;

        input {
          flex: none;
          width: 15px;
          height: 15px;
          padding: 0;
          accent-color: var(--accent);
        }
      }

      > .sheet-number {
        height: 100%;
        min-height: 38px;
        text-align: center;
        font-weight: 750;

        &:disabled {
          background: var(--disabled);
          color: var(--disabled-ink);
        }
      }
    }

    > .sheet-note {
      margin: -4px 0 0;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.45;
    }

    > .toggle {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 7px 8px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      background: var(--input);
      color: var(--ink);
      font-size: 9px;
      line-height: 1.25;
      text-transform: none;
      letter-spacing: normal;
      cursor: pointer;

      input {
        flex: none;
        width: 15px;
        height: 15px;
        padding: 0;
        accent-color: var(--accent);
      }
    }

    > h3 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 3px 0 0;
      color: var(--muted);
      font: 700 9px sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.12em;

      &::before,
      &::after {
        flex: 1;
        height: 1px;
        background: var(--line);
        content: "";
      }
    }

    > .danger {
      width: 100%;
      margin-top: 8px;
      border-color: var(--danger-line);
      background: var(--danger-bg);
      color: var(--danger);

      &:hover {
        border-color: var(--danger-line-hover);
        background: var(--danger-bg-hover);
      }
    }
  }

  .current {
    display: flex;
    flex-direction: column;
    gap: 5px;

    > p {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }
  }

  .quick {
    display: grid;
    gap: 8px;

    button {
      width: 100%;
      padding: 7px 10px;
    }

    &.new {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      button {
        min-height: 38px;
        min-width: 0;
        padding-right: 4px;
        padding-left: 4px;
        font-size: 9px;
        line-height: 1.25;
        white-space: normal;
      }
    }
  }

  .quick-group {
    border-bottom: 1px solid var(--line);

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 32px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      &::after {
        content: "›";
        font-size: 17px;
        font-weight: 500;
        transform: rotate(0deg);
        transition: transform 120ms ease;
      }
    }

    &[open] {
      padding-bottom: 8px;

      summary::after {
        transform: rotate(90deg);
      }
    }
  }

  .co-parents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;

    &:empty {
      display: none;
    }

    button {
      min-height: 38px;
      min-width: 0;
      padding: 7px 4px;
      font-size: 9px;
      line-height: 1.25;
      white-space: normal;
    }
  }

  .align {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    button {
      width: 100%;
      padding: 7px 8px;
      font-size: 9px;
    }

    > label {
      grid-column: 1 / -1;
    }
  }

  .relations {
    > .form {
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);

      > .primary {
        width: 100%;
      }
    }

    > .list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 9px;
    }
  }

  .relation {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel-soft);

    .icon {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent-dark);
      font-size: 15px;
    }

    > span:nth-child(2) {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    strong {
      font:
        600 11px Georgia,
        serif;
    }

    small {
      overflow: hidden;
      color: var(--muted);
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    > .actions {
      display: flex;
      align-items: center;
      gap: 2px;

      button {
        padding: 2px 4px;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--rust);
        font-size: 10px;

        &:last-child {
          font-size: 17px;
        }
      }
    }

    &.relative {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 3px;
      padding: 3px;
      width: 100%;
      color: inherit;
      text-align: left;

      &:hover {
        border-color: var(--accent);
        background: var(--button-hover);
      }

      > .person-link {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 6px 5px;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: inherit;
        text-align: left;

        > span:last-child {
          display: flex;
          flex-direction: column;
          gap: 3px;
          min-width: 0;
        }
      }

      > .remove {
        align-self: stretch;
        padding: 2px 8px;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--rust);
        font-size: 17px;
      }
    }
  }
}