:root {
  color-scheme: dark;
  --tool-bg: #0d1017;
  --tool-panel: #151a25;
  --tool-panel-soft: #1a2030;
  --tool-border: rgba(255, 255, 255, 0.12);
  --tool-text: #f7f8fb;
  --tool-muted: #a9b0bf;
  --tool-blue: #67b8ff;
  --tool-blue-strong: #2d8fe5;
  --tool-success: #49d49d;
  --tool-error: #ff8585;
  --tool-radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.tool-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 5%, rgba(45, 143, 229, 0.16), transparent 32rem),
    linear-gradient(180deg, #10141d 0%, var(--tool-bg) 48%, #090c12 100%);
  color: var(--tool-text);
  font-family: Tahoma, Arial, sans-serif;
  line-height: 1.75;
}

.tool-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

.tool-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--tool-border);
  background: rgba(13, 16, 23, 0.88);
  backdrop-filter: blur(14px);
}

.tool-header__inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.tool-brand { display: inline-flex; align-items: center; text-decoration: none; }
.tool-brand img { width: 170px; max-width: 42vw; height: auto; display: block; }

.tool-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-nav a {
  color: var(--tool-muted);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.tool-nav a:hover, .tool-nav a:focus-visible { color: white; border-color: var(--tool-border); outline: none; }

.tool-hero { padding: 76px 0 42px; text-align: center; }
.tool-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 12px;
  border: 1px solid rgba(103, 184, 255, 0.32);
  border-radius: 999px;
  color: var(--tool-blue);
  background: rgba(103, 184, 255, 0.08);
  font-size: 0.9rem;
}
.tool-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tool-blue); }
.tool-hero h1 { max-width: 850px; margin: 0 auto 14px; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.25; }
.tool-hero p { max-width: 760px; margin: 0 auto; color: var(--tool-muted); font-size: clamp(1rem, 2vw, 1.15rem); }

.tool-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 74px;
}

.tool-card {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  background: linear-gradient(145deg, rgba(26, 32, 48, 0.96), rgba(17, 22, 32, 0.96));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
  padding: clamp(20px, 4vw, 34px);
}
.tool-card h2 { margin: 0 0 8px; font-size: clamp(1.35rem, 3vw, 1.85rem); }
.tool-card > p { color: var(--tool-muted); margin: 0 0 22px; }

.tool-field { margin-bottom: 18px; }
.tool-field label, .tool-field legend { display: block; margin-bottom: 7px; color: #eef3fb; font-weight: 700; }
.tool-field small { display: block; margin-top: 6px; color: var(--tool-muted); }
.tool-field input, .tool-field textarea, .tool-field select {
  width: 100%;
  border: 1px solid var(--tool-border);
  border-radius: 12px;
  background: #0e131d;
  color: white;
  padding: 13px 14px;
  font: inherit;
  line-height: 1.65;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tool-field textarea { min-height: 190px; resize: vertical; }
.tool-field textarea.tool-output { min-height: 220px; direction: ltr; text-align: left; font-family: Consolas, monospace; }
.tool-field input:focus, .tool-field textarea:focus, .tool-field select:focus {
  outline: none;
  border-color: var(--tool-blue);
  box-shadow: 0 0 0 3px rgba(103, 184, 255, 0.12);
}

.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tool-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tool-options { display: grid; gap: 10px; margin: 16px 0 22px; padding: 0; border: 0; }
.tool-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--tool-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}
.tool-check input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--tool-blue-strong); }

.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tool-button {
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.tool-button:hover { transform: translateY(-1px); }
.tool-button:focus-visible { outline: 3px solid rgba(103, 184, 255, 0.3); outline-offset: 2px; }
.tool-button--primary { background: var(--tool-blue); color: #07111d; }
.tool-button--secondary { background: transparent; border-color: var(--tool-border); color: white; }
.tool-button--ghost { background: rgba(255, 255, 255, 0.04); color: var(--tool-muted); }

.tool-status { min-height: 29px; margin-top: 14px; font-weight: 700; }
.tool-status[data-state="success"] { color: var(--tool-success); }
.tool-status[data-state="error"] { color: var(--tool-error); }

.tool-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }
.tool-metric { border: 1px solid var(--tool-border); background: rgba(255, 255, 255, 0.035); border-radius: 13px; padding: 15px; }
.tool-metric strong { display: block; font-size: 1.55rem; color: var(--tool-blue); line-height: 1.2; }
.tool-metric span { color: var(--tool-muted); font-size: 0.92rem; }

.tool-preview { border: 1px solid var(--tool-border); border-radius: 14px; background: white; color: #202124; padding: 22px; direction: rtl; }
.tool-preview__url { color: #202124; font-size: 0.88rem; direction: ltr; text-align: left; overflow-wrap: anywhere; }
.tool-preview__title { color: #1a0dab; font-size: 1.25rem; line-height: 1.35; margin: 7px 0 4px; }
.tool-preview__description { color: #4d5156; font-size: 0.95rem; margin: 0; }
.tool-counter { font-size: 0.86rem; color: var(--tool-muted); margin-top: 6px; }
.tool-counter[data-limit="over"] { color: var(--tool-error); }

.faq-row { border: 1px solid var(--tool-border); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.faq-row__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.faq-row__head strong { color: var(--tool-blue); }
.faq-remove { border: 0; background: transparent; color: var(--tool-error); cursor: pointer; font: inherit; }

.tool-related { padding: 18px 0 82px; }
.tool-related h2 { text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 22px; }
.tool-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.tool-related a {
  display: flex;
  min-height: 105px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--tool-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  padding: 18px;
  color: white;
  text-decoration: none;
}
.tool-related a:hover, .tool-related a:focus-visible { border-color: rgba(103, 184, 255, 0.58); outline: none; }
.tool-related a span { color: var(--tool-muted); font-size: 0.9rem; }

.tool-footer { border-top: 1px solid var(--tool-border); color: var(--tool-muted); text-align: center; padding: 25px 0 32px; }
.tool-footer a { color: var(--tool-blue); }
.tool-hidden { display: none !important; }

@media (max-width: 820px) {
  .tool-workspace { grid-template-columns: 1fr; }
  .tool-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-header__inner { min-height: 68px; }
  .tool-nav a:first-child { display: none; }
}

@media (max-width: 560px) {
  .tool-shell { width: min(100% - 20px, 1120px); }
  .tool-header__inner { align-items: center; }
  .tool-nav { gap: 2px; }
  .tool-nav a { padding: 7px 9px; font-size: 0.88rem; }
  .tool-hero { padding-top: 48px; }
  .tool-card { padding: 18px; border-radius: 14px; }
  .tool-grid, .tool-grid--three, .tool-results, .tool-related__grid { grid-template-columns: 1fr; }
  .tool-actions { display: grid; grid-template-columns: 1fr; }
  .tool-button { width: 100%; }
}


/* === AL SHOHAB: focus indicators (button/contrast repair) ===
   The rules above set `outline: none` on the tool nav and related links even in
   :focus-visible, which left keyboard users with no indicator at all. The ring
   is restored here (this file loads after main.css, so it has to be fixed at
   source rather than overridden from there) and the tool button's own ring is
   raised from 30% alpha to a solid colour so it is actually visible on #0d1017. */
.tool-nav a:focus-visible,
.tool-related a:focus-visible,
.tool-button:focus-visible,
.tool-faq-item summary:focus-visible {
  outline: 3px solid #7cc4ff;
  outline-offset: 2px;
}
/* Buttons rendered by tools-phase1.js (row remove, etc.) need the ring too. */
.faq-remove:focus-visible,
.tool-panel button:focus-visible,
.tool-form button:focus-visible {
  outline: 3px solid #7cc4ff;
  outline-offset: 2px;
}
/* The JS-built row buttons do not reliably match :focus-visible (they are
   created after load), so a plain :focus ring backs it up on these utility
   pages rather than leaving the control with no indicator at all. */
.faq-remove:focus,
.tool-panel button:focus,
.tool-form button:focus {
  outline: 3px solid #7cc4ff;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   AL SHOHAB: article/tool specialised CTA.
   Tool pages load this sheet instead of main.css, so the same repair has to
   live here too: <style id="ct-specialized-cta"> paints the button with
   linear-gradient(135deg,#227EFF,#5cc8ff), and white on the #5cc8ff stop is
   1.88:1 in every state. Matching the element type as well as the class wins
   on specificity rather than order. The hover lift is dropped so the control
   does not move under the pointer.
   --------------------------------------------------------------------------- */
a.ct-spec-cta__btn,
a.ct-spec-cta__btn:hover,
a.ct-spec-cta__btn:focus-visible,
a.ct-spec-cta__btn:active {
  background-image: none;
  background-color: #1565d8; /* 5.41:1 with white */
  color: #ffffff;
  transform: none;
}
@media (hover: hover) {
  a.ct-spec-cta__btn:hover {
    background-color: #1257bf; /* 6.69:1 with white */
  }
}

/* Legal links appended to the one-line tool footer. */
.tool-footer__legal a { color: #9fd0ff; text-decoration: none; }
.tool-footer__legal a:hover,
.tool-footer__legal a:focus-visible { color: #ffffff; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Legacy tool pages now carry the standard site header (fixed) and main.css,
   whose base layer resets heading sizes. These rules restore the tool content's
   own rhythm and clear the fixed header. Scoped to .tool-page only.
   --------------------------------------------------------------------------- */
.tool-page .tool-hero { padding-top: 128px; }
@media (min-width: 768px) { .tool-page .tool-hero { padding-top: 148px; } }
.tool-page .tool-guide h2,
.tool-page .tool-related h2 { font-size: 1.375rem; line-height: 1.5; margin: 28px 0 10px; color: #f7f8fb; }
.tool-page .tool-guide h3 { font-size: 1.0625rem; line-height: 1.6; margin: 18px 0 6px; color: #eef2f8; }
.tool-page .tool-guide p,
.tool-page .tool-guide li { color: var(--tool-muted); line-height: 1.9; }
.tool-page .tool-guide ol { list-style: decimal; padding-inline-start: 24px; margin-top: 10px; }
.tool-page .tool-guide ol li { margin-top: 6px; }
.tool-page .tool-card h2 { font-size: 1.25rem; line-height: 1.5; }
.tool-page .tool-related__grid strong { font-size: 1rem; }