/* ── Tool Page Chrome ─────────────────────────────────────────
   Styles for /tools/<slug> standalone pages.
   shell.css must be loaded first (provides CSS variables + tool component styles).
   ──────────────────────────────────────────────────────────── */

/* Base */
.tool-page {
  background: var(--bg, #FAF8F5);
  color: var(--text-1, #1C1917);
  font-family: 'Inter', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────── */
.tp-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white, #fff);
  border-bottom: 1px solid var(--border, #E7DDD4);
  box-shadow: 0 1px 4px rgba(28,25,23,.04);
}
.tp-header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo */
.tp-logo {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-1, #1C1917);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -.2px;
}
.tp-logo-accent { color: var(--accent, #C17F3A); }

/* Breadcrumb */
.tp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--text-3, #9C8478);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.tp-breadcrumb li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-breadcrumb li a {
  color: var(--text-2, #6B5E52);
  text-decoration: none;
}
.tp-breadcrumb li a:hover { color: var(--accent, #C17F3A); }
.tp-breadcrumb li:last-child {
  color: var(--text-3, #9C8478);
  font-weight: 500;
}
.tp-bc-sep { color: var(--border, #E7DDD4); user-select: none; flex-shrink: 0; }

.tp-header-blog-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2, #6B5E52);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid var(--border-soft, #EDE5DC);
  border-radius: 6px;
  transition: border-color 0.15s, color 0.15s;
}
.tp-header-blog-link:hover {
  border-color: var(--accent, #C17F3A);
  color: var(--accent, #C17F3A);
}

/* ── Main layout ────────────────────────────────────────────── */
.tp-main { flex: 1; padding-bottom: 72px; }
.tp-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Intro section ──────────────────────────────────────────── */
.tp-intro {
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--border-soft, #EDE5DC);
  margin-bottom: 28px;
}
.tp-h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1, #1C1917);
  margin: 0 0 10px;
  line-height: 1.25;
  letter-spacing: -.3px;
}
.tp-intro-para {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2, #6B5E52);
  margin: 0;
  max-width: 740px;
}

/* ── Tool embed ─────────────────────────────────────────────── */
.tp-tool-section {
  background: var(--white, #fff);
  border: 1px solid var(--border, #E7DDD4);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 48px;
}
#tool-mount {
  min-height: 480px;
}

/* ── FAQ section ────────────────────────────────────────────── */
.tp-faq-section { margin-bottom: 48px; }
.tp-section-h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1, #1C1917);
  margin: 0 0 18px;
  letter-spacing: -.2px;
}
.tp-faq-list { margin: 0; padding: 0; }
.tp-faq-item {
  border-bottom: 1px solid var(--border-soft, #EDE5DC);
  padding: 0;
}
.tp-faq-list .tp-faq-item:first-child {
  border-top: 1px solid var(--border-soft, #EDE5DC);
}
.tp-faq-q {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1, #1C1917);
  padding: 15px 0 4px;
  margin: 0;
  display: block;
}
.tp-faq-a {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2, #6B5E52);
  margin: 0;
  padding: 0 0 15px;
  display: block;
}

/* ── Related tools ──────────────────────────────────────────── */
.tp-related-section { margin-bottom: 48px; }
.tp-related-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tp-related-item a {
  display: block;
  padding: 14px 16px;
  background: var(--white, #fff);
  border: 1px solid var(--border-soft, #EDE5DC);
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1, #1C1917);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tp-related-item a:hover {
  border-color: var(--accent, #C17F3A);
  box-shadow: 0 2px 8px rgba(193,127,58,.10);
  background: var(--surface, #F3EDE5);
}
.tp-related-name {
  display: block;
  font-weight: 600;
  font-size: 13px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.tp-footer {
  background: var(--surface, #F3EDE5);
  border-top: 1px solid var(--border, #E7DDD4);
  padding: 18px 24px;
  margin-top: auto;
}
.tp-footer-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tp-footer .tp-logo { font-size: 14px; }
.tp-footer-sep { color: var(--border, #E7DDD4); }
.tp-footer-nav { display: flex; gap: 14px; }
.tp-footer-nav a {
  font-size: 12px;
  color: var(--text-2, #6B5E52);
  text-decoration: none;
}
.tp-footer-nav a:hover { color: var(--accent, #C17F3A); }
.tp-footer-copy {
  font-size: 11px;
  color: var(--text-3, #9C8478);
  margin-left: auto;
}

/* ── Workspace breadcrumb (inside shell layout) ─────────────── */
.ws-breadcrumb { margin-bottom: 8px; }
.ws-breadcrumb .tp-breadcrumb { overflow: visible; }

/* ── Category Hub Page ──────────────────────────────────────── */
.cat-hub-section { margin-bottom: 48px; }
.cat-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.cat-hub-card {
  background: var(--white, #fff);
  border: 1px solid var(--border-soft, #EDE5DC);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.cat-hub-card:hover {
  border-color: var(--accent, #C17F3A);
  box-shadow: 0 4px 16px rgba(27, 26, 23, 0.07);
}
.cat-hub-card-link {
  display: block;
  padding: 16px 20px;
  text-decoration: none;
}
.cat-hub-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1, #1C1917);
  line-height: 1.3;
  margin-bottom: 4px;
}
.cat-hub-card-cat {
  font-size: 12px;
  color: var(--text-3, #9E9380);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tp-header-inner { padding: 0 16px; gap: 8px; }
  .tp-header-blog-link { display: none; }
  .tp-breadcrumb { font-size: 11px; }
  .tp-container { padding: 0 16px; }
  .tp-h1 { font-size: 21px; }
  .tp-intro { padding: 24px 0 20px; }
  .tp-related-list { grid-template-columns: 1fr 1fr; }
  .tp-footer-copy { margin-left: 0; width: 100%; }
}
@media (max-width: 400px) {
  .tp-related-list { grid-template-columns: 1fr; }
}