/* Directory pages: compact, readable library surfaces. */
.library-page,
.tool-directory {
  max-width: 1080px;
  margin: 0 auto;
  padding: 112px 24px 80px;
}
.library-hero { max-width: 760px; margin-bottom: 34px; }
.library-kicker { color: var(--color-link, #60a5fa); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.library-title { font-family: Outfit, Inter, sans-serif; font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.045em; line-height: 1.02; margin: 10px 0 16px; }
.library-lede { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.65; max-width: 680px; }
.library-controls { background: var(--surface-subtle, rgba(255,255,255,.05)); border: 1px solid var(--border-card); border-radius: 16px; padding: 18px; margin: 28px 0 16px; }
.library-control-grid { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.library-field { display: grid; gap: 6px; }
.library-field label { color: var(--text-secondary); font-size: .78rem; font-weight: 700; }
.library-field input, .library-field select { width: 100%; min-height: 46px; border: 1px solid var(--border-subtle, var(--border-card)); border-radius: 10px; background: var(--surface-elevated, var(--bg-card)); color: var(--text-primary); padding: 10px 12px; font: inherit; }
.library-field input:focus, .library-field select:focus { outline: 3px solid var(--color-focus-ring, #fbbf24); outline-offset: 2px; }
.library-control-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.library-count { color: var(--text-secondary); font-size: .9rem; }
.library-clear { min-height: 44px; border: 1px solid var(--border-subtle, var(--border-card)); border-radius: 9px; background: transparent; color: var(--text-primary); cursor: pointer; padding: 8px 14px; font: inherit; font-weight: 700; }
.library-clear:hover { background: var(--surface-subtle, rgba(255,255,255,.08)); }
.library-list { display: grid; gap: 10px; }
.guide-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px; padding: 20px 22px; transition: border-color .2s ease, transform .2s ease; }
.guide-row:hover { border-color: var(--border-card-hover, #60a5fa); transform: translateY(-1px); }
.guide-row h2 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 6px; }
.guide-row h2 a { color: var(--text-primary); text-decoration: none; }
.guide-row h2 a:hover { color: var(--color-link-hover, #bfdbfe); }
.guide-row p { color: var(--text-secondary); font-size: .91rem; line-height: 1.55; margin: 0 0 11px; max-width: 700px; }
.guide-row-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-row-meta span { color: var(--badge-neutral-text, var(--text-secondary)); background: var(--badge-neutral-bg, var(--surface-subtle)); border: 1px solid var(--badge-neutral-border, var(--border-card)); border-radius: 999px; font-size: .72rem; padding: 3px 8px; }
.guide-row-action { white-space: nowrap; color: var(--color-link, #60a5fa); font-weight: 700; font-size: .88rem; text-decoration: none; }
.guide-row-action:focus, .guide-row h2 a:focus, .library-clear:focus { outline: 3px solid var(--color-focus-ring, #fbbf24); outline-offset: 3px; }
.library-empty { border: 1px dashed var(--border-subtle, var(--border-card)); border-radius: 14px; color: var(--text-secondary); padding: 32px 20px; text-align: center; }
.tool-directory .library-hero { margin-bottom: 28px; }
.tool-directory .tool-grid { gap: 16px; }
.guide-row[hidden] { display: none; }
.directory-tool-card { display: flex; flex-direction: column; min-height: 230px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px; padding: 23px; }
.directory-tool-card:hover { border-color: var(--border-card-hover, #60a5fa); }
.directory-tool-icon { font-size: 1.9rem; line-height: 1; margin-bottom: 16px; }
.directory-tool-card h2 { font-size: 1.25rem; margin: 0 0 8px; }
.directory-tool-card p { color: var(--text-secondary); line-height: 1.6; margin: 0 0 20px; }
.directory-tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.directory-tool-primary { background: var(--interactive-primary, #2563eb); border-radius: 9px; color: var(--color-on-accent, #fff); font-weight: 700; padding: 10px 14px; text-decoration: none; }
.directory-tool-secondary { color: var(--color-link, #60a5fa); font-size: .88rem; font-weight: 700; text-decoration: none; }
.directory-tool-primary:focus, .directory-tool-secondary:focus { outline: 3px solid var(--color-focus-ring, #fbbf24); outline-offset: 3px; }
@media (max-width: 800px) { .library-control-grid { grid-template-columns: 1fr 1fr; } .library-field:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .library-page, .tool-directory { padding: 96px 16px 56px; } .library-control-grid, .tool-grid { grid-template-columns: 1fr; } .library-field:first-child { grid-column: auto; } .guide-row { grid-template-columns: 1fr; gap: 12px; padding: 17px; } .guide-row-action { justify-self: start; } .library-control-footer { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .guide-row { transition: none; } .guide-row:hover { transform: none; } }