@layer components {
  /* --- Home --- */

  .bento-list {
    list-style: none;
    padding: 0;

    li + li { border-block-start: 1px solid var(--color-border); }

    a {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--space-4);
      padding-block: var(--space-3);
      color: inherit;
      text-decoration: none;
      transition: color var(--duration-fast) var(--ease-standard);

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

  .bento-row-copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;

    strong { font-weight: 500; }

    .meta {
      font-size: var(--text-xs);
      color: var(--color-text-subtle);
    }
  }

  .bento {
    h1, h2 {
      margin: 0;
      font-weight: 400;
      line-height: inherit;
    }

    p { max-inline-size: none; }

    ul {
      padding: 0;
      list-style: none;
    }

    a { color: inherit; }

    .section-index {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-2) var(--space-4);
      font-family: var(--font-section);
      font-size: var(--text-section);
      font-weight: 400;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-muted);

      h2 { font: inherit; }

      .index-rule {
        flex: 1;
        align-self: center;
        min-inline-size: var(--space-6);
        block-size: 1px;
        background: var(--color-border);
      }
    }

    .unit-grid {
      display: grid;
      gap: var(--space-3);
    }

    .mastery {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding-block-start: var(--space-2);
    }

    .mastery-bar {
      flex: 1;
      block-size: 2px;
      background: var(--color-border);

      span {
        display: block;
        block-size: 100%;
        inline-size: calc(var(--value) * 1%);
        background: var(--color-accent);
      }
    }

    .mastery-value {
      min-inline-size: 4ch;
      font-size: var(--text-sm);
      font-variant-numeric: tabular-nums;
      text-align: end;

      &.is-empty { color: var(--color-text-muted); }
    }
  }

  .bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);
    padding-block: var(--space-4) var(--space-12);

    > * { grid-column: span var(--span, 12); }

    .left-off-card { --span: 12; }

    &:has(.exam-card) .left-off-card { --span: 7; }

    .exam-card { --span: 5; }

    &.has-score {
      .left-off-card { --span: 5; }

      .score-card { --span: 4; }

      .exam-card { --span: 3; }
    }

    .list-card:has(+ .list-card), .list-card + .list-card { --span: 6; }

    .svg-sprite {
      position: absolute;
      inline-size: 0;
      block-size: 0;
      overflow: hidden;
    }

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: var(--space-5);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sharp);
      background: var(--color-panel);
      color: var(--color-text);
      text-decoration: none;
      box-shadow:
        0 1px 2px var(--color-panel-shadow-near),
        0 6px 18px var(--color-panel-shadow-far);
      transition: background-color var(--duration-fill) var(--ease-out);

      &.has-rule::before {
        content: "";
        position: absolute;
        inset: -1px -1px auto;
        block-size: 2px;
        border-radius: var(--radius-sharp) var(--radius-sharp) 0 0;
        background: var(--logo-gradient-rule);
      }
    }

    a.card:hover, a.card:focus-visible { background: var(--color-panel-hover); }

    .card-arrow {
      position: absolute;
      inset-block-start: var(--space-5);
      inset-inline-end: var(--space-5);
      font-family: var(--font-mono);
      color: var(--color-accent);
      opacity: 0;
      transition: opacity var(--duration-fill) var(--ease-out);
    }

    a.card:hover .card-arrow, a.card:focus-visible .card-arrow { opacity: 1; }

    .card-title {
      font-size: var(--text-xl);
      font-weight: 300;
      letter-spacing: -0.01em;
      line-height: var(--line-height-tight);
    }

    .card-title-code { color: var(--color-text-muted); }

    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-1) var(--space-4);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    .card-actions {
      margin-block-start: auto;
      padding-block-start: var(--space-3);

      .cta, .button-wipe {
        max-inline-size: 100%;
        padding-block: var(--space-2);
        white-space: normal;
        text-align: center;
      }
    }

    .cta::after, .unit-tile::after {
      content: "";
      position: absolute;
      inset: -0.375rem;
      border: 1.5px solid var(--color-accent);
      pointer-events: none;
      mask:
        linear-gradient(#000 0 0) top left / var(--bracket) var(--bracket) no-repeat,
        linear-gradient(#000 0 0) top right / var(--bracket) var(--bracket) no-repeat,
        linear-gradient(#000 0 0) bottom left / var(--bracket) var(--bracket) no-repeat,
        linear-gradient(#000 0 0) bottom right / var(--bracket) var(--bracket) no-repeat;
      transition: scale var(--duration-wipe) var(--ease-in-out);
    }

    .cta {
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
      min-block-size: 3rem;
      padding-inline: var(--space-5);
      border: 0;
      border-radius: 0;
      background: none;
      color: var(--color-on-gradient);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      scale: none;
      filter:
        drop-shadow(0 2px 3px color-mix(in oklch, var(--color-accent) 0%, transparent))
        drop-shadow(0 6px 14px color-mix(in oklch, var(--color-accent) 0%, transparent));
      transition: filter var(--duration-wipe) var(--ease-in-out);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: var(--radius-sharp);
        background: var(--logo-gradient);
      }

      &:hover, &:focus-visible {
        filter:
          drop-shadow(0 2px 3px color-mix(in oklch, var(--color-accent) 10%, transparent))
          drop-shadow(0 6px 14px color-mix(in oklch, var(--color-accent) 16%, transparent));
      }
    }

    .button-wipe {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 3rem;
      padding-inline: var(--space-5);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      background: transparent;
      color: var(--color-text);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      scale: none;
      transition: border-color var(--duration-wipe) var(--ease-in-out);

      &::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: -1;
        inline-size: calc(100% + var(--wipe-feather));
        background: linear-gradient(90deg, var(--color-wipe-fill) calc(100% - var(--wipe-feather)), transparent);
        transform: translateX(-100%);
        transition: transform var(--duration-wipe) var(--ease-in-out);
      }

      &:hover, &:focus-visible { border-color: var(--color-wipe-border); }

      &:hover::before, &:focus-visible::before { transform: translateX(0); }
    }

    .text-link {
      font-size: var(--text-sm);
      color: var(--color-accent);
      text-decoration: none;
      white-space: nowrap;

      &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    }

    .left-off-card {
      gap: var(--space-4);
      padding: var(--space-6);
      background: color-mix(in oklch, var(--color-accent) 7%, var(--color-panel));

      .card-title { font-size: var(--text-2xl); }
    }

    .score-card {
      .figure {
        display: inline-flex;
        align-items: baseline;
        margin-block-start: var(--space-2);
        font-family: var(--font-display);
        font-size: var(--text-5xl);
        font-weight: 300;
        line-height: 1;
        letter-spacing: -0.03em;
      }

      .figure-number {
        display: inline-grid;
        justify-items: end;

        > span { grid-area: 1 / 1; }
      }

      .figure-ghost { visibility: hidden; }

      .figure-unit {
        margin-inline-start: 0.04em;
        font-size: 0.5em;
        color: var(--color-text-muted);
      }

      .meter {
        position: relative;
        display: block;
        block-size: 6px;
        margin-block-start: var(--space-6);
        background: var(--color-accent-soft);
      }

      .meter-fill {
        position: absolute;
        inset: 0;
        background: var(--color-accent);
        transform: scaleX(calc(var(--value) * var(--progress, 1)));
        transform-origin: left;
      }

      .meter-pass {
        position: absolute;
        inset-block: -6px;
        inset-inline-start: calc(var(--pass) * 100% - 1px);
        inline-size: 2px;
        background: var(--color-text);

        span {
          position: absolute;
          inset-block-end: calc(100% + var(--space-2));
          inset-inline-start: 50%;
          translate: -50% 0;
          white-space: nowrap;
          color: var(--color-text);
        }
      }

      .meter-scale {
        display: flex;
        justify-content: space-between;
        margin-block-start: var(--space-2);
        color: var(--color-text-muted);
      }

      .score-support {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-5);
        font-size: var(--text-sm);
        color: var(--color-text-muted);

        strong { color: var(--color-text); font-weight: 500; }
      }
    }

    .exam-card { container-type: inline-size; }

    .exam-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .exam-time {
      font-family: var(--font-display);

      strong { font-weight: 300; font-variant-numeric: tabular-nums; }
    }

    .list-card {
      gap: 0;
      padding: 0;
    }

    .list-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      min-block-size: 3rem;
      padding: 0 var(--space-5);
      white-space: nowrap;
    }

    .rows > li { border-block-start: 1px solid var(--color-border); }

    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding: 0 var(--space-5);
      color: inherit;
      text-decoration: none;
      transition: background-color var(--duration-fill) var(--ease-out);

      &:hover, &:focus-visible { background: var(--color-hover-wash); }

      &:focus-visible { outline-offset: -2px; }
    }

    .also-open .row { block-size: 2.5625rem; }

    .recent-list .row { block-size: 3.875rem; }

    .row-main {
      display: grid;
      gap: 0.125rem;
      min-inline-size: 0;
    }

    .row-title, .row-meta {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .row-title { font-size: var(--text-sm); line-height: var(--line-height-tight); }

    .row-code { color: var(--color-text-muted); }

    .row-meta { font-size: var(--text-xs); color: var(--color-text-muted); }

    .row-end {
      flex: none;
      font-size: var(--text-sm);
      font-variant-numeric: tabular-nums;
      text-align: end;
    }

    .row-arrow {
      font-family: var(--font-mono);
      color: var(--color-accent);
      opacity: 0;
      transition: opacity var(--duration-fill) var(--ease-out);
    }

    .row:hover .row-arrow, .row:focus-visible .row-arrow { opacity: 1; }

    .bento-curriculum {
      display: grid;
      gap: var(--space-4);
      padding-block-start: var(--space-5);
      container: curriculum / inline-size;
    }

    .status-legend {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-4);
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      white-space: nowrap;

      &::before {
        content: "";
        flex: none;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border: 1.5px solid var(--color-text-subtle);
      }

      &[data-status="doing"]::before {
        border-color: var(--color-accent);
        background: linear-gradient(90deg, var(--color-accent) 50%, transparent 50%);
      }

      &[data-status="mastered"]::before {
        border-color: var(--color-accent);
        background: var(--color-accent);
      }
    }

    .unit-grid { grid-template-columns: minmax(0, 1fr); }

    .unit-tile {
      gap: 0;
      padding: 0;
      filter:
        drop-shadow(0 2px 3px color-mix(in oklch, var(--color-accent) 0%, transparent))
        drop-shadow(0 6px 14px color-mix(in oklch, var(--color-accent) 0%, transparent));
      transition:
        filter var(--duration-wipe) var(--ease-in-out),
        background-color var(--duration-fill) var(--ease-out);

      &::after {
        inset: -0.25rem;
        opacity: 0;
        transition:
          scale var(--duration-wipe) var(--ease-in-out),
          opacity var(--duration-wipe) var(--ease-in-out);
      }

      &:hover, &:focus-within {
        filter:
          drop-shadow(0 2px 3px color-mix(in oklch, var(--color-accent) 10%, transparent))
          drop-shadow(0 6px 14px color-mix(in oklch, var(--color-accent) 16%, transparent));

        &::after { scale: 1.04 1.06; opacity: 1; }

        .unit-glyph { color: var(--color-accent); }
      }
    }

    .unit-tile-link {
      flex: 1;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: var(--space-2);
      padding: var(--space-4);
      color: inherit;
      text-decoration: none;
      transition: background-color var(--duration-fill) var(--ease-out);

      &:hover, &:focus-visible { background: var(--color-panel-hover); }

      &:focus-visible { outline-offset: -2px; }
    }

    .unit-tile-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
    }

    .unit-glyph {
      display: block;
      inline-size: 28px;
      block-size: 28px;
      color: var(--color-text-subtle);
      transition: color var(--duration-wipe) var(--ease-in-out);
    }

    .unit-name {
      font-size: var(--text-sm);
      line-height: var(--line-height-tight);
    }

    .unit-code {
      margin-inline-end: var(--space-1);
      color: var(--color-text-muted);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .bento .cta:is(:hover, :focus-visible)::after { scale: 1.04 1.13; }
  }

  @container curriculum (min-width: 21.75rem) {
    .bento .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @container curriculum (min-width: 33rem) {
    .bento .unit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @container curriculum (min-width: 44.25rem) {
    .bento .unit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  @container curriculum (min-width: 66.75rem) {
    .bento .unit-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }

  @container (min-width: 34rem) {
    .bento .exam-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "label action" "title action" "meta action";
      align-items: center;
      gap: var(--space-2) var(--space-8);

      .exam-label { grid-area: label; }

      .card-title { grid-area: title; }

      .card-meta { grid-area: meta; }

      .card-actions { grid-area: action; margin: 0; padding: 0; }
    }
  }

  @media (min-width: 48rem) and (max-width: 74.9375rem) {
    .bento.has-score {
      .left-off-card { grid-column: span 7; }

      .score-card { grid-column: span 5; }

      .exam-card { grid-column: 1 / -1; }
    }
  }

  @media (max-width: 47.9375rem) {
    .bento > * { grid-column: 1 / -1; }
  }

  @media (max-width: 23.6875rem) {
    .bento {
      .unit-tile-link {
        grid-template-columns: 28px auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: var(--space-1) var(--space-3);
      }

      .unit-tile-top, .mastery { display: contents; }

      .unit-glyph { grid-column: 1; grid-row: 1 / 3; }

      .unit-name { grid-column: 2 / 4; grid-row: 1; }

      .mastery-value { grid-column: 4; grid-row: 1; }

      .unit-tile .status { grid-column: 2; grid-row: 2; }

      .mastery-bar { grid-column: 3 / 5; grid-row: 2; }
    }
  }

  @media (max-width: 32rem) {
    .bento {
      grid-template-columns: minmax(0, 1fr);
      padding-block: 0 var(--space-10);

      .left-off-card { padding: var(--space-5); }

      .card-actions :is(a, button) { inline-size: 100%; }

      .unit-tile-link { padding: var(--space-3); }
    }
  }

  .bento {
    .upgrade-card .plan-form { display: grid; gap: var(--space-4); }

    :is(.locked-note, .lock-key, .lock-mark) .glyph {
      flex: none;
      inline-size: 14px;
      block-size: 14px;
    }

    :is(.lock-key, .lock-mark) {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      white-space: nowrap;
      color: var(--color-text-muted);
    }

    .locked-note {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      min-block-size: 3rem;
      font-size: var(--text-sm);
      color: var(--color-text-muted);

      .glyph { color: var(--color-text-subtle); }
    }

    .exam-body:has(.exam-mix) { display: flex; }

    .exam-mix {
      display: grid;
      gap: var(--space-3);

      figcaption { color: var(--color-text-subtle); }
    }

    .mix-bars {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: end;
      gap: var(--space-1);
      block-size: 8rem;
      padding: 0;
      list-style: none;

      li {
        display: grid;
        grid-template-rows: auto 1fr auto;
        justify-items: center;
        align-items: end;
        gap: var(--space-1);
        block-size: 100%;
      }
    }

    .mix-count {
      font-size: var(--text-xs);
      font-variant-numeric: tabular-nums;
      color: var(--color-text-muted);
    }

    .mix-bar {
      inline-size: 100%;
      block-size: calc(var(--count) / var(--max) * 100%);
      min-block-size: 2px;
      background: color-mix(in oklch, var(--color-accent) 55%, transparent);
    }

    .mix-code { font-size: 0.625rem; letter-spacing: 0; }

    .unit-facts {
      display: flex;
      flex-wrap: wrap;
      gap: 0 var(--space-3);
      padding-block-start: var(--space-2);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }
  }

  @media (max-width: 23.6875rem) {
    .bento {
      .lock-mark { grid-column: 4; grid-row: 1; justify-self: end; }

      .unit-facts { grid-column: 2 / 5; grid-row: 2; padding: 0; }
    }
  }
}