/* public/styles/tools.css */

/* ── Tools index page ─────────────────────────────── */
.tools-index-hero {
  padding: 4rem 0 2.5rem;
}
.tools-index-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text);
  margin-bottom: .5rem;
}
.tools-index-sub {
  color: var(--text-2);
  font-size: .9375rem;
  margin-bottom: 2.5rem;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 4rem;
}

/* ── ToolCard ─────────────────────────────────────── */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  text-decoration: none;
  color: var(--text);
  transition: transform .15s, box-shadow .15s;
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow);
}
.tool-card-icon {
  font-size: 2rem;
  line-height: 1;
}
.tool-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.tool-card-desc {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
}
.tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .25rem;
}
.tool-card-count {
  font-size: .75rem;
  color: var(--text-3);
  font-weight: 500;
}
.tool-card-badge {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #16a34a;
  background: rgba(34,197,94,.12);
  padding: .2rem .5rem;
  border-radius: 99px;
}

/* ── SwiftUI reference page layout ───────────────── */
.tools-page {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  min-height: calc(100vh - 80px);
  padding: 1rem 0 3rem;
}

/* ── Sidebar ──────────────────────────────────────── */
.tools-sidebar {
  position: sticky;
  top: 72px;
  height: calc(100vh - 88px);
  overflow-y: auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border-radius: 14px;
  padding: 1rem .625rem;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}
.sidebar-heading {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 .5rem;
  margin-bottom: .75rem;
}
.sidebar-section-label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: .75rem .5rem .25rem;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .5rem;
  border-radius: 8px;
  font-size: .8125rem;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-left: 2px solid transparent;
}
.sidebar-item:hover {
  background: var(--accent-soft);
  color: var(--text);
}
.sidebar-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}
.sidebar-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
  transition: background .12s;
}
.sidebar-item.active .sidebar-dot { background: var(--accent); }

/* ── Detail panel ─────────────────────────────────── */
.tools-detail {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border-radius: 14px;
  overflow: hidden;
}
.control-panel {
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
}
.control-panel.active { display: flex; }

.panel-header {
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1.25rem;
}
.panel-tag {
  display: inline-block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: .1875rem .625rem;
  border-radius: 99px;
  margin-bottom: .5rem;
}
.panel-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text);
  margin-bottom: .375rem;
  font-family: 'JetBrains Mono', monospace;
}
.panel-desc {
  font-size: .9375rem;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 60ch;
}

/* ── iOS Preview box ──────────────────────────────── */
.preview-box {
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 12px;
  padding: 1rem;
}
[data-theme="dark"] .preview-box {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.preview-label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .75rem;
}
.preview-content {
  max-width: 320px;
  margin: 0 auto;
}

/* ── Code block ───────────────────────────────────── */
.panel-code-wrap {
  position: relative;
}
.panel-code-label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .5rem;
}
.panel-code {
  background: #161b22;
  border-radius: 10px;
  padding: 1.125rem 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8125rem;
  line-height: 1.65;
  color: #e1e4e8;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  border: 1px solid rgba(255,255,255,.07);
}
[data-theme="dark"] .panel-code {
  background: #090c10;
}
.copy-btn {
  position: absolute;
  top: 2rem;
  right: .75rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.55);
  font-size: .6875rem;
  padding: .25rem .625rem;
  border-radius: 5px;
  cursor: pointer;
  font-family: -apple-system, sans-serif;
  transition: color .12s, background .12s;
}
.copy-btn:hover {
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.18);
}
.copy-btn.copied {
  color: #34d399;
  border-color: #34d399;
}

/* ── Modifiers grid ───────────────────────────────── */
.modifiers-label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .625rem;
}
.modifiers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.modifier-chip {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 8px;
  padding: .625rem .875rem;
}
[data-theme="dark"] .modifier-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
.modifier-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: var(--accent);
  font-weight: 500;
}
.modifier-desc {
  font-size: .75rem;
  color: var(--text-2);
  margin-top: .1875rem;
  line-height: 1.4;
}

/* ── Mobile ───────────────────────────────────────── */
.tools-mobile-select {
  display: none;
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text);
  font-size: .9375rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
@media (max-width: 768px) {
  .tools-page {
    grid-template-columns: 1fr;
  }
  .tools-sidebar { display: none; }
  .tools-mobile-select { display: block; }
  .control-panel { padding: 1.25rem 1rem; }
  .modifiers-grid { grid-template-columns: 1fr; }
}