/* Instruments page (/resources/) and the header account link.
   Claude Design "Resource Library Page" after Prompt C2, 2026-09-10. Tokens and
   shell from screen.css; the spec rows and signup band reuse resource.css. */

/* ------------------------------------------------------------ header */

.header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 22px;
}

.header-divider {
    width: 1px;
    height: 14px;
    background: var(--rule);
}

.header-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    color: var(--vermilion);
    font: 600 11px/1 'IBM Plex Mono', monospace;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

.header-account.is-member { color: var(--ink); }

.header-account:hover,
.header-account:focus-visible { border-bottom-color: currentColor; }

.header-square,
.instrument-square {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--vermilion);
}

.mobile-nav-account { display: none; }

@media (max-width: 899px) {
    .header-actions { display: none; }
    .mobile-nav-account {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid #3A3A36;
        color: var(--paper);
        font: 600 11px/1 'IBM Plex Mono', monospace;
        letter-spacing: 0.16em;
        text-decoration: none;
        text-transform: uppercase;
    }
}

/* -------------------------------------------------------------- head */

.instruments {
    padding: 76px 0 96px;
}

.instruments-kicker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 24px;
}

.instruments .instruments-kicker-row .eyebrow { margin: 0; }
.instruments .instruments-kicker { color: var(--vermilion); }
.instruments .instruments-count { color: var(--grey); font-weight: 500; }

.instruments-title {
    margin: 32px 0 0;
    font: 900 clamp(44px, 5.3vw, 76px)/0.96 var(--gh-font-heading, Archivo), Arial, sans-serif;
    letter-spacing: -0.042em;
}

.instruments-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 72px;
    margin-top: 32px;
    padding-top: 26px;
    border-top: 2px solid var(--ink);
}

.instruments-lede h2 {
    margin: 0;
    max-width: 22ch;
    font: 800 30px/1.16 var(--gh-font-heading, Archivo), Arial, sans-serif;
    letter-spacing: -0.028em;
}

.instruments-lede p {
    margin: 18px 0 0;
    max-width: 54ch;
    color: #4A4A46;
    font-size: 17px;
    line-height: 1.5;
}

.instruments-spec { align-self: start; }

.instruments-account-box {
    padding: 16px 18px;
    border: 2px solid var(--ink);
}

.instruments-account-label,
.instruments-account-tier {
    margin: 0;
    color: var(--grey);
    font: 600 9.5px/1.5 'IBM Plex Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.instruments-account-tier { margin-top: 12px; font-weight: 500; letter-spacing: 0.1em; }

.instruments-account-name {
    margin: 4px 0 0;
    font: 800 17px/1.25 var(--gh-font-heading, Archivo), Arial, sans-serif;
    letter-spacing: -0.015em;
}

.instruments-account-email {
    margin: 4px 0 0;
    color: #4A4A46;
    font: 500 11px/1.4 'IBM Plex Mono', monospace;
    letter-spacing: 0.04em;
}

.instruments-account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    min-height: 48px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}

.instruments-account-actions .text-link { margin: 0; }
.instruments-account-actions .instruments-signout { color: var(--grey); }

/* -------------------------------------------------------------- list */

.instruments-list {
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ink);
}

.instrument-row {
    display: grid;
    grid-template-columns: 56px 220px minmax(0, 1fr) 240px;
    grid-template-areas: "number preview body rail";
    gap: 36px;
    align-items: stretch;
    padding: 34px 0;
    border-bottom: 1px solid var(--rule);
}

.instrument-number {
    grid-area: number;
    margin: 0;
    font: 900 34px/0.9 var(--gh-font-heading, Archivo), Arial, sans-serif;
    letter-spacing: -0.045em;
}

.instrument-preview {
    grid-area: preview;
    align-self: start;
    display: block;
    border: 1px solid var(--ink);
    background: var(--paper-deep);
    line-height: 0;
}

.instrument-preview img { display: block; width: 100%; height: auto; }

.instrument-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

.instruments .instrument-category { margin: 0; color: var(--vermilion); }

.instrument-title {
    margin: 0;
    font: 900 32px/1.04 var(--gh-font-heading, Archivo), Arial, sans-serif;
    letter-spacing: -0.034em;
}

.instrument-title a { color: inherit; text-decoration: none; }
.instrument-title a:hover { color: var(--vermilion); }

.instrument-line {
    margin: 0;
    max-width: 46ch;
    color: #4A4A46;
    font-size: 17px;
    line-height: 1.5;
}

.instrument-source {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    margin-top: 5px;
    padding: 9px 0;
    border-top: 1px solid var(--rule);
}

.instrument-source-label {
    color: var(--grey);
    font: 500 10px/1.4 'IBM Plex Mono', monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.instrument-source-text {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.4;
}

.instrument-read {
    color: var(--vermilion);
    font: 600 10px/1 'IBM Plex Mono', monospace;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.instrument-read:hover { color: var(--ink); }

.instrument-example {
    display: block;
    margin-top: 5px;
    color: var(--grey);
    font: 600 9px/1.2 'IBM Plex Mono', monospace;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.instrument-rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    text-align: right;
}

.instrument-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.instrument-access,
.instrument-version {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: 600 10px/1 'IBM Plex Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.instrument-access { color: var(--vermilion); }
.instrument-access.is-unlocked { color: var(--ink); }

.instrument-version { color: var(--grey); font-weight: 500; letter-spacing: 0.1em; }

.instrument-updated {
    padding: 3px 5px;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-weight: 600;
}

.instrument-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 2px solid var(--ink);
    color: var(--ink);
    font: 600 11px/1 'IBM Plex Mono', monospace;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

.instrument-action:hover,
.instrument-action:focus-visible { background: var(--ink); color: var(--paper); }

/* A member's only filled control, so the eye runs straight down the actions. */
.instruments-member .instrument-action { background: var(--ink); color: var(--paper); }
.instruments-member .instrument-action:hover,
.instruments-member .instrument-action:focus-visible { background: var(--vermilion); border-color: var(--vermilion); }

/* Deliberately the quietest row: an instrument nobody can have yet should not
   compete with the ones they can. */
.instrument-next {
    display: grid;
    grid-template-columns: 56px 220px minmax(0, 1fr) 240px;
    gap: 36px;
    align-items: center;
    padding: 26px 0 30px;
    border-top: 2px solid var(--ink);
    margin-top: -1px;
}

.instrument-next .instrument-number { color: #A9A8A2; }

.instrument-next-label,
.instrument-next-state {
    margin: 0;
    color: var(--grey);
    font: 500 10px/1.4 'IBM Plex Mono', monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.instrument-next-state { text-align: right; }

.instrument-next-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }

.instrument-next-body h2 {
    margin: 0;
    color: var(--grey);
    font: 800 22px/1.1 var(--gh-font-heading, Archivo), Arial, sans-serif;
    letter-spacing: -0.026em;
}

.instrument-next-body span { color: var(--grey); font-size: 15px; }

/* -------------------------------------------------------------- foot */

.instruments-gate { margin-top: 56px; scroll-margin-top: 96px; }

.instruments-advisory {
    margin: 40px 0 0;
    color: var(--ink-soft);
    font-size: 15px;
}

.instruments-advisory .text-link { margin-left: 10px; color: var(--vermilion); }

/* ------------------------------------------------------ small screens */

@media (max-width: 960px) {
    .instruments { padding: 48px 0 72px; }
    .instruments .instruments-kicker-row { flex-direction: column; align-items: flex-start; }
    .instruments-title { margin-top: 20px; }
    .instruments-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; padding-top: 22px; }
    .instruments-lede h2 { font-size: 23px; }
    .instruments-lede p { font-size: 16px; }
    .instruments-list { margin-top: 36px; }

    .instrument-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "number  number"
            "body    body"
            "preview preview"
            "rail    rail";
        gap: 16px;
        padding: 28px 0;
    }

    .instrument-title { font-size: 26px; }
    .instrument-line { font-size: 16px; }
    .instrument-source { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .instrument-preview { max-width: 100%; }

    .instrument-rail { flex-direction: column; align-items: stretch; text-align: left; }
    .instrument-status { flex-direction: row; justify-content: space-between; align-items: center; }

    .instrument-next {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 16px;
    }
    .instrument-next-body { grid-column: 1 / -1; }
    .instrument-next-state { grid-column: 1 / -1; text-align: left; }

    .instruments-gate { margin-top: 44px; }
}