/* ===== Tools – Shared Stylesheet ===== */
/* Aligned with main site: Inter font, stone palette, amber accent */
/* Header & footer provided by Next.js layout (Header.tsx / Footer.tsx) */

/* --- Box Sizing Reset --- */
*,*::before,*::after{box-sizing:border-box}

/* --- CSS Variables --- */
:root{
  --t-bg:#fafaf9;
  --t-fg:#1c1917;
  --t-card:#ffffff;
  --t-border:#d6d3d1;
  --t-muted:#f5f5f4;
  --t-muted-fg:#78716c;
  --t-accent:#f59e0b;
  --t-accent-fg:#78350f;
  --t-link:#b45309;
  --t-link-hover:#92400e;
  --t-code-bg:#1e1e1e;
  --t-code-fg:#d4d4d4;
  --t-tag-bg:#fef3c7;
  --t-tag-fg:#92400e;
  --t-success-bg:#ecfdf5;--t-success-fg:#065f46;--t-success-border:#a7f3d0;
  --t-error-bg:#fef2f2;--t-error-fg:#991b1b;--t-error-border:#fca5a5;
  --t-info-bg:#eff6ff;--t-info-fg:#1e40af;--t-info-border:#bfdbfe;
  --t-warn-bg:#fffbeb;--t-warn-fg:#92400e;--t-warn-border:#fde68a;
  --t-diff-add-bg:#dcfce7;--t-diff-add-fg:#166534;
  --t-diff-rm-bg:#fee2e2;--t-diff-rm-fg:#991b1b;
}

.dark{
  --t-bg:#0c0a09;
  --t-fg:#fafaf9;
  --t-card:#1c1917;
  --t-border:#44403c;
  --t-muted:#292524;
  --t-muted-fg:#a8a29e;
  --t-accent:#f59e0b;
  --t-accent-fg:#fffbeb;
  --t-link:#fbbf24;
  --t-link-hover:#fcd34d;
  --t-code-bg:#1e1e1e;
  --t-code-fg:#d4d4d4;
  --t-tag-bg:#451a03;
  --t-tag-fg:#fbbf24;
  --t-success-bg:#052e16;--t-success-fg:#86efac;--t-success-border:#166534;
  --t-error-bg:#450a0a;--t-error-fg:#fca5a5;--t-error-border:#991b1b;
  --t-info-bg:#172554;--t-info-fg:#93c5fd;--t-info-border:#1e40af;
  --t-warn-bg:#451a03;--t-warn-fg:#fde68a;--t-warn-border:#92400e;
  --t-diff-add-bg:#052e16;--t-diff-add-fg:#86efac;
  --t-diff-rm-bg:#450a0a;--t-diff-rm-fg:#fca5a5;
}

/* --- Layout --- */
.tools-wrap{max-width:960px;margin:0 auto;padding:1.5rem 1rem 3rem;flex:1}

/* --- Breadcrumb --- */
.breadcrumb{font-size:.85rem;color:var(--t-muted-fg);margin-bottom:1.25rem}
.breadcrumb a{color:var(--t-link);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline;color:var(--t-link-hover)}
.breadcrumb .sep{margin:0 .35rem;color:var(--t-muted-fg)}

/* --- Headings --- */
.tools-wrap h1{font-size:1.85rem;font-weight:700;color:var(--t-fg);margin-bottom:.5rem;line-height:1.25}
.tools-wrap h2{font-size:1.35rem;font-weight:600;color:var(--t-fg);margin:2rem 0 .75rem;line-height:1.3}
.tools-wrap h3{font-size:1.1rem;font-weight:600;color:var(--t-fg);margin:1.5rem 0 .5rem}
.intro{font-size:1.05rem;color:var(--t-muted-fg);margin-bottom:1.5rem;max-width:720px}

/* --- Tool Panel --- */
.tool-panel{background:var(--t-card);border:1px solid var(--t-border);border-radius:10px;padding:1.5rem;margin-bottom:2rem}
.tool-panel label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--t-fg)}
.tool-panel .field-group{margin-bottom:1rem}
.tool-panel .field-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-start}
.tool-panel .field-row>*{flex:1 1 45%}

/* --- Inputs --- */
.tools-wrap textarea,.tools-wrap input[type="text"],.tools-wrap input[type="number"],.tools-wrap input[type="search"],.tools-wrap select{
  width:100%;padding:.55rem .7rem;font-size:.95rem;font-family:inherit;
  border:1px solid var(--t-border);border-radius:6px;
  background:var(--t-card);color:var(--t-fg);transition:border-color .15s;
}
.tools-wrap textarea:focus,.tools-wrap input[type="text"]:focus,.tools-wrap input[type="number"]:focus,.tools-wrap input[type="search"]:focus,.tools-wrap select:focus{
  outline:none;border-color:var(--t-accent);
  box-shadow:0 0 0 3px rgba(245,158,11,.15);
}
.tools-wrap textarea{resize:vertical;min-height:120px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88rem;line-height:1.5;tab-size:2}
.tools-wrap select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378716c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem}

/* --- Checkbox / Radio row --- */
.flag-row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.flag-row label{display:flex;align-items:center;gap:.3rem;font-weight:400;font-size:.88rem;cursor:pointer}
.flag-row input[type="checkbox"],
.flag-row input[type="radio"]{accent-color:var(--t-accent)}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.9rem;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:background .15s,transform .1s;font-family:inherit}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--t-accent);color:#1c1917}
.btn-primary:hover{background:#d97706}
.btn-secondary{background:var(--t-muted);color:var(--t-fg);border:1px solid var(--t-border)}
.btn-secondary:hover{background:var(--t-border)}
.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-sm{padding:.35rem .7rem;font-size:.82rem}
.btn-group{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}

/* --- Output --- */
.output-area{
  background:var(--t-muted);border:1px solid var(--t-border);border-radius:6px;
  padding:.75rem 1rem;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88rem;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;min-height:60px;position:relative;overflow-x:auto;
  color:var(--t-fg);
}
.output-area:empty::after{content:"Output will appear here…";color:var(--t-muted-fg);font-style:italic}

/* --- Status / Error --- */
.status{padding:.5rem .75rem;border-radius:6px;font-size:.88rem;margin-bottom:1rem;display:none}
.status.success{display:block;background:var(--t-success-bg);color:var(--t-success-fg);border:1px solid var(--t-success-border)}
.status.error{display:block;background:var(--t-error-bg);color:var(--t-error-fg);border:1px solid var(--t-error-border)}
.status.info{display:block;background:var(--t-info-bg);color:var(--t-info-fg);border:1px solid var(--t-info-border)}
.status.warn{display:block;background:var(--t-warn-bg);color:var(--t-warn-fg);border:1px solid var(--t-warn-border)}

/* --- Copy Button floating --- */
.copy-wrap{position:relative}
.tools-wrap .copy-btn{position:absolute;top:.5rem;right:.5rem;padding:.25rem .55rem;font-size:.78rem;font-weight:600;background:var(--t-accent);color:#1c1917;border:none;border-radius:5px;cursor:pointer;opacity:.85;transition:opacity .15s}
.tools-wrap .copy-btn:hover{opacity:1}
.tools-wrap .copy-btn.copied{background:#10b981;color:#fff}

/* --- Sections beneath tool --- */
.section-block{margin-bottom:2rem}
.section-block p,.section-block li{font-size:.95rem;color:var(--t-muted-fg);line-height:1.65}
.section-block ul,.section-block ol{padding-left:1.25rem;margin:.5rem 0}
.section-block li{margin-bottom:.35rem}
.section-block code{background:var(--t-muted);padding:.15rem .35rem;border-radius:3px;font-size:.85rem;color:var(--t-accent-fg);border:1px solid var(--t-border);font-family:"JetBrains Mono",ui-monospace,monospace}
.dark .section-block code{color:var(--t-accent)}
.section-block pre{background:var(--t-code-bg);color:var(--t-code-fg);padding:1rem;border-radius:6px;overflow-x:auto;font-size:.85rem;line-height:1.5;margin:.75rem 0;border:1px solid var(--t-border);font-family:"JetBrains Mono",ui-monospace,monospace}
.section-block a{color:var(--t-link);text-decoration:underline;text-underline-offset:4px}
.section-block a:hover{color:var(--t-link-hover)}

/* --- Examples --- */
.example-list{list-style:none;padding:0}
.example-list li{padding:.5rem .75rem;background:var(--t-card);border:1px solid var(--t-border);border-radius:6px;margin-bottom:.5rem;cursor:pointer;font-size:.9rem;transition:background .15s;color:var(--t-fg)}
.example-list li:hover{background:var(--t-muted);border-color:var(--t-accent)}
.example-list li code{background:transparent;color:var(--t-link);font-weight:600;border:none;padding:0}

/* --- FAQ --- */
.faq-item{border-bottom:1px solid var(--t-border);padding:.75rem 0}
.faq-item:last-child{border-bottom:none}
.faq-item h3{margin:0 0 .35rem;font-size:1rem;color:var(--t-fg)}
.faq-item p{margin:0;font-size:.93rem;color:var(--t-muted-fg)}

/* --- Related Tools Grid --- */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:.75rem;margin-top:.75rem}
.related-card{display:block;padding:.75rem 1rem;background:var(--t-card);border:1px solid var(--t-border);border-radius:8px;text-decoration:none;color:var(--t-fg);transition:border-color .15s,box-shadow .15s}
.related-card:hover{border-color:var(--t-accent);box-shadow:0 2px 8px rgba(245,158,11,.1)}
.related-card .rc-title{font-weight:600;font-size:.92rem;color:var(--t-link)}
.related-card .rc-desc{font-size:.82rem;color:var(--t-muted-fg);margin-top:.2rem}

/* --- Category Pills --- */
.cat-pills{
  display:flex;flex-wrap:wrap;gap:1rem;
  margin-bottom:2.5rem;
  position:sticky;top:60px;z-index:40;
  background:var(--t-bg);
  padding:1.15rem 0;
  border-bottom:1px solid var(--t-border);
}
.cat-pill{
  display:inline-flex;align-items:center;
  padding:.6rem 1.35rem;
  font-size:.85rem;font-weight:600;
  color:var(--t-muted-fg);
  background:var(--t-muted);
  border:1px solid var(--t-border);
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.cat-pill:hover{
  color:var(--t-fg);
  border-color:var(--t-accent);
  background:var(--t-card);
}
.cat-pill.active{
  background:var(--t-accent);
  color:#1c1917;
  border-color:var(--t-accent);
}

@media(max-width:640px){
  .cat-pills{
    gap:.65rem;
    top:56px;
    padding:1rem 0 1.15rem;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .cat-pills::-webkit-scrollbar{display:none}
  .cat-pill{font-size:.78rem;padding:.5rem 1rem}
}

/* --- Tools Index Grid --- */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:1rem;margin-top:1rem}
.tool-card{display:block;padding:1.25rem;background:var(--t-card);border:1px solid var(--t-border);border-radius:10px;text-decoration:none;color:var(--t-fg);transition:border-color .15s,box-shadow .15s}
.tool-card:hover{border-color:var(--t-accent);box-shadow:0 4px 12px rgba(245,158,11,.1)}
.tool-card .tc-title{font-weight:700;font-size:1.05rem;color:var(--t-link);margin-bottom:.3rem}
.tool-card .tc-desc{font-size:.9rem;color:var(--t-muted-fg);line-height:1.5}
.tool-card .tc-tag{display:inline-block;font-size:.72rem;font-weight:600;color:var(--t-tag-fg);background:var(--t-tag-bg);padding:.15rem .45rem;border-radius:4px;margin-top:.5rem}

/* --- Table --- */
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.75rem 0}
.data-table th,.data-table td{text-align:left;padding:.45rem .6rem;border:1px solid var(--t-border);color:var(--t-fg)}
.data-table th{background:var(--t-muted);font-weight:600}
.data-table tr:nth-child(even){background:var(--t-muted)}

/* --- Diff --- */
.diff-table{width:100%;border-collapse:collapse;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85rem}
.diff-table td{padding:.15rem .5rem;white-space:pre-wrap;word-break:break-word;vertical-align:top;border:none}
.diff-table .line-num{width:40px;text-align:right;color:var(--t-muted-fg);user-select:none;padding-right:.5rem}
.diff-add{background:var(--t-diff-add-bg);color:var(--t-diff-add-fg)}
.diff-remove{background:var(--t-diff-rm-bg);color:var(--t-diff-rm-fg)}
.diff-equal{background:var(--t-card);color:var(--t-fg)}

/* --- Colour preview --- */
.colour-preview{width:100%;height:64px;border-radius:8px;border:1px solid var(--t-border);margin:.75rem 0}

/* --- Responsive --- */
@media(max-width:640px){
  .tools-wrap{padding:1rem .75rem 2rem;overflow-x:hidden}
  .tool-panel{padding:1rem}
  .tool-panel .field-row{flex-direction:column}
  .tool-panel .field-row>*{flex:1 1 100%;min-width:0}
  .tools-wrap h1{font-size:1.45rem}
  .tools-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .tool-card{padding:1rem}
  .btn-group{gap:.4rem}
  .output-area{font-size:.82rem;padding:.6rem .75rem}
  .data-table{display:block;overflow-x:auto}
}