/* Tools layout */
.tools-page {
    display: grid;
    gap: var(--brand-space-64);
}

.tools-section-header {
    display: grid;
    gap: var(--brand-space-12);
    max-width: 720px;
    margin-bottom: var(--brand-space-24);
}

.tools-section-header h2 {
    margin: 0;
    color: var(--brand-text);
    font-size: var(--brand-text-section-title);
    line-height: 1.1;
}

.tools-filter-note,
.tools-summary {
    max-width: 640px;
    margin: 0 0 var(--brand-space-16);
    color: var(--brand-text-muted);
    line-height: 1.7;
}

/* Category Labels */
.tools-category-rail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--brand-space-8);
}

.tools-category-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding-inline: var(--brand-space-12);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-small);
    color: var(--brand-text-muted);
    background: transparent;
    font-size: var(--brand-text-caption);
    font-weight: 700;
}

.tools-category-label:first-child {
    color: var(--brand-accent-ink);
    border-style: solid;
    border-color: var(--brand-border);
    background: var(--brand-accent-soft);
}

/* Tool Tile */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--brand-space-16);
}

.tool-tile {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto;
    gap: var(--brand-space-12);
    min-width: 0;
    min-height: 230px;
    padding: var(--brand-space-24);
    border: 1px solid var(--brand-border);
    background: var(--brand-surface);
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.tool-tile:hover {
    border-color: var(--brand-border-strong);
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--brand-surface) 86%, var(--brand-accent-soft));
}

.tool-icon {
    display: grid;
    place-items: center;
    width: 48px;
    aspect-ratio: 1;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-medium);
    color: var(--brand-accent-ink);
    background: var(--brand-accent-soft);
    font-weight: 800;
}

.tool-category {
    color: var(--brand-accent);
    font-size: var(--brand-text-caption);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tool-tile h3 {
    margin: 0;
    color: var(--brand-text);
    font-size: var(--brand-text-card-title);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.tool-description {
    margin: 0;
    color: var(--brand-text-muted);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.tool-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--brand-space-8);
}

.tool-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding-inline: var(--brand-space-8);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    background: var(--brand-surface-subtle);
    font-size: var(--brand-text-caption);
}

.tool-launch {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 var(--brand-space-20);
    border: 1px solid var(--brand-accent);
    border-radius: var(--brand-radius-medium);
    color: #ffffff;
    background: var(--brand-accent);
    font-size: var(--brand-text-caption);
    font-weight: 700;
    text-decoration: none;
}

.tool-launch:hover {
    background: var(--brand-accent-ink);
}

.tool-launch.is-unavailable {
    color: var(--brand-text-muted);
    border-color: var(--brand-border);
    background: var(--brand-surface-subtle);
}

/* Empty State */
.tools-empty-state {
    position: relative;
    display: grid;
    gap: var(--brand-space-12);
    grid-column: 1 / -1;
    padding: var(--brand-space-48);
    border: 1px dashed var(--brand-border-strong);
    background: var(--brand-surface-subtle);
}

/* Tool studio visual layer */
.tools-page { gap: clamp(64px, 9vw, 124px); }
.tools-page .brand-page-heading h1 { font-size: clamp(3.4rem, 7vw, 6.6rem); }
.tools-workbench { display:grid; grid-template-columns:minmax(0, .85fr) minmax(340px, 1.15fr); gap:clamp(28px,6vw,76px); align-items:center; padding:clamp(28px,5vw,70px); border:1px solid var(--brand-editorial-line); background:var(--brand-surface); }
.tools-workbench__copy h2 { margin:12px 0 16px; font-family:Georgia,"Noto Serif JP",serif; font-size:clamp(2rem,3.6vw,3.9rem); font-weight:500; letter-spacing:-.04em; line-height:1.1; }
.tools-workbench__copy p:not(.section-label) { max-width:430px; margin:0; color:var(--brand-text-muted); line-height:1.85; }
.tools-workbench__mock { position:relative; min-height:290px; overflow:hidden; border:1px solid var(--brand-border-strong); background:linear-gradient(135deg,var(--brand-bg-soft),var(--brand-surface)); }
.tools-workbench__mock::before { position:absolute; inset:22px; border:1px solid var(--brand-border); content:""; }
.tools-workbench__line { position:absolute; top:42px; height:10px; border-radius:999px; background:var(--brand-accent); }
.tools-workbench__line--one { left:42px; width:34%; }.tools-workbench__line--two { left:42px; top:70px; width:48%; background:var(--brand-warm); }.tools-workbench__line--three { left:42px; top:98px; width:25%; background:var(--brand-border-strong); }
.tools-workbench__orbit { position:absolute; right:10%; bottom:16%; width:30%; aspect-ratio:1; border:1px solid var(--brand-accent); border-radius:50%; }.tools-workbench__orbit--small { right:25%; bottom:29%; width:18%; border-color:var(--brand-warm); }
.tools-workbench__mock b { position:absolute; right:12%; bottom:20%; width:52%; height:1px; background:var(--brand-accent); transform:rotate(-24deg); transform-origin:right; }
.tool-tile { position:relative; overflow:hidden; min-height:280px; border-color:var(--brand-editorial-line); }.tool-tile::before { display:block; width:72px; height:72px; margin-bottom:12px; border:1px solid var(--brand-border-strong); background:linear-gradient(90deg,transparent 48%,var(--brand-accent) 49% 51%,transparent 52%),linear-gradient(0deg,transparent 48%,var(--brand-accent) 49% 51%,transparent 52%); content:""; }.tool-icon { position:absolute; top:24px; right:24px; opacity:.8; }.tool-tile:hover { transform:translateY(-4px); box-shadow:8px 10px 0 var(--brand-accent-soft); }
@media(max-width:760px){.tools-workbench{grid-template-columns:1fr}.tools-workbench__mock{min-height:230px}}

.tools-empty-state h3,
.tools-empty-state p {
    margin: 0;
}

.tools-empty-state h3 {
    color: var(--brand-text);
    font-size: var(--brand-text-card-title);
}

.tools-empty-state p:not(.section-label) {
    color: var(--brand-text-muted);
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 900px) {
    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tools-page {
        gap: var(--brand-space-48);
    }

    .tool-grid {
        grid-template-columns: 1fr;
    }

    .tool-tile,
    .tools-empty-state {
        padding: var(--brand-space-20);
    }
}

.tools-empty-state::before {
    display: block;
    width: min(100%, 220px);
    aspect-ratio: 5 / 2;
    border: 1px solid var(--brand-border);
    background: url("../../assets/brand/relmua-toolkit.svg") center / cover no-repeat, var(--brand-surface);
    content: "";
}