/* ============================================================
   /download — page-local layout only.

   Chrome (header, nav, footer, legal), the container/content skeleton,
   the token palette and the FAQ all live in `style/marketing.css`. What
   remains here is the download card: the terminal frame, its tabs and the
   per-platform rows. Dead blocks for the commented-out hero, desktop
   banner, `cli-row` and section scaffolding were removed.
   ============================================================ */

[data-page="download"] {
  [data-component="terminal-card"] {
    --terminal-padding: 3rem;
    --terminal-vpadding: 1.5rem;

    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-soft);
    overflow: hidden;

    @media (max-width: 30rem) {
      --terminal-padding: 1rem;
      --terminal-vpadding: 0.75rem;
    }

    [data-component="terminal-header"] {
      padding: var(--terminal-padding);
      color: #fff;
      font-size: var(--mk-text-xl);
      line-height: 1.25;
      font-weight: 500;

      span {
        color: var(--mk-text-3);
      }
    }

    [data-component="sub-block"] {
      + [data-component="sub-block"] {
        border-top: 1px solid var(--mk-border);
      }
    }

    /* 「标签行 + 命令面板」这一套外观由下面这个作用域提供。它同时覆盖两种东西：
       真正的 Tabs（curl、平台三选一），以及 `[data-slot="npm-block"]`——npm 不是可切换的
       标签（页面里只有那一条 npm 命令），但**格式与 curl 完全一致**，所以共用同一套规则，
       而不是各写一份。 */
    [data-component="tabs"],
    [data-slot="npm-block"] {
      [data-slot="tablist"] {
        display: flex;
        gap: 40px;
        align-items: center;
        border-top: 1px solid var(--mk-border);
        border-bottom: 1px solid var(--mk-border-muted);
        background: var(--mk-bg-inset);
        padding: 0 20px;

        @media (max-width: 60rem) {
          gap: 32px;
          overflow-x: auto;
          width: 100%;
        }
      }

      [data-slot="tab"] {
        appearance: none;
        background: transparent;
        border: 0;
        padding: 16px 0;
        margin: 0;
        cursor: pointer;
        color: var(--mk-text-3);
        line-height: 1;
        border-bottom: 2px solid transparent;
        font-family: var(--mk-sans);
        font-size: 1rem;
        white-space: nowrap;
        transition: color var(--mk-fast);
      }

      [data-slot="tab"]:hover {
        color: var(--mk-text-2);
      }

      [data-slot="tab"] [data-slot="tab-note"] {
        font-family: var(--mk-mono);
        color: var(--mk-text-3);
      }

      [data-slot="tab"][aria-selected="true"] {
        color: #fff;
        border-bottom-color: var(--mk-accent);
      }

      [data-slot="panels"] {
        background: var(--mk-bg-inset);
        padding: 16px;
      }

      [data-slot="panel"] {
        display: block;
        margin: 0;
        overflow: auto;
        white-space: pre-wrap;
        font-size: 1rem;
        font-family: var(--mk-mono);
        width: 100%;

        button {
          max-width: 100%;
        }

        [data-slot="command"] {
          all: unset;
          display: flex;
          max-width: 100%;
          cursor: pointer;
          align-items: center;
          color: var(--mk-text-2);
          gap: 16px;
          padding: 8px 16px 8px 8px;
          border-radius: var(--mk-radius-sm);
          transition: background var(--mk-fast);

          [data-slot="command-script"] {
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;

            @media (max-width: 34rem) {
              width: calc(100% - 40px) !important;
            }
          }

          [data-slot="highlight"] {
            font-weight: 500;
            color: #fff;
          }

          [data-component="copy-status"] {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            margin-left: auto;

            svg {
              width: 16px;
              height: 16px;
            }

            [data-slot="copy"] {
              display: block;
              color: var(--mk-text-3);
            }

            [data-slot="check"] {
              display: none;
              color: var(--mk-green);
            }
          }

          &[data-copied] [data-component="copy-status"] {
            [data-slot="copy"] {
              display: none;
            }

            [data-slot="check"] {
              display: block;
            }
          }
        }

        [data-slot="command"]:hover {
          background: var(--mk-card-hover);
        }
      }
    }

    /* npm 那一行复用了上面的外观，但它**不是标签**，所以只做两处修正：
       去掉标签才有的手型光标，并把「被选中」的观感（白字 + 强调色下划线）固定下来。
       选择器要写在共享作用域**之后**：与 `[data-slot="tab"]:hover`、
       `[data-slot="tab"][aria-selected="true"]` 同为 (0,2,0)，靠先后顺序取胜。 */
    [data-slot="npm-block"] [data-slot="tab"] {
      cursor: default;
      color: #fff;
      border-bottom-color: var(--mk-accent);
    }
  }

  /* 段首的标题 + 副标题。terminal-header 自身有 3rem 四周内边距，
     因此这里不再补上间距，只留与下方说明段之间的间隔。 */
  [data-slot="download-intro"] {
    margin: 0;
    padding: 0 var(--terminal-padding, 3rem) var(--terminal-vpadding, 1.5rem);

    h2 {
      margin: 0 0 8px;
      font-size: var(--mk-text-page);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      color: #fff;
    }

    p {
      margin: 0;
      max-width: 60ch;
      font-size: var(--mk-text-md);
      line-height: 1.65;
      color: var(--mk-text-2);
    }

    @media (max-width: 30rem) {
      padding-inline: 1rem;
    }
  }

  [data-slot="download-note"] {
    margin: 0;
    padding: 0 var(--terminal-padding, 3rem) var(--terminal-vpadding, 1.5rem);
    font-size: var(--mk-text-sm);
    line-height: 1.7;
    color: var(--mk-text-3);

    a {
      color: var(--mk-accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    @media (max-width: 30rem) {
      padding-inline: 1rem;
    }
  }

  [data-component="download-row"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0.75rem 1rem;
    margin: 0;
    border-radius: var(--mk-radius-sm);
    transition: background var(--mk-fast);

    &:hover {
      background: var(--mk-card-hover);
    }

    [data-component="download-info"] {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;

      [data-slot="icon"] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mk-text-3);

        svg,
        img {
          width: 20px;
          height: 20px;
        }
      }

      span {
        color: var(--mk-text-2);
      }
    }

    [data-component="action-button"] {
      flex-shrink: 0;
      padding: 6px 16px;
      background: transparent;
      color: var(--mk-text-2);
      border: 1px solid var(--mk-border);
      border-radius: var(--mk-radius-sm);
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: background var(--mk-fast), border-color var(--mk-fast), color var(--mk-fast);

      &:hover {
        background: var(--mk-card);
        border-color: var(--mk-border-strong);
        color: #fff;
      }
    }
  }

  @media (max-width: 40rem) {
    [data-component="download-row"] {
      padding: 0.75rem 0;

      [data-component="download-info"] span {
        font-size: 0.875rem;
      }

      [data-component="action-button"] {
        font-size: 0.875rem;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }
}