/* ============================================================
   ORBITAL RANCH STUDIOS — TOOLS WIDGET LAYER
   Shared styling for Scene Doctor / Character Doctor and future
   diagnostics. Built on the ors-* tokens from /styles.css — do not
   redefine colors/fonts here, only compose them.
   ============================================================ */

.tool-page { padding-bottom: 40px; }

/* ---- Hero ---- */
.tool-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 24px 40px;
  text-align: center;
}
.tool-hero .ors-eyebrow { justify-content: center; }
.tool-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 18px;
  background: linear-gradient(120deg, var(--ors-ink) 30%, var(--ors-cyan) 55%, var(--ors-magenta) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tool-hero .tool-dek {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ors-dim);
  max-width: 640px;
  margin: 0 auto;
}
.tool-hero .tool-dek strong { color: var(--ors-ink); }

/* ---- Widget shell ---- */
.tool-widget {
  max-width: 780px;
  margin: 0 auto 56px;
  padding: 28px;
  border-radius: 18px;
  border: 1px solid var(--ors-line);
  background:
    radial-gradient(ellipse at 80% -10%, rgba(255,255,255,0.06), transparent 50%),
    rgba(255,255,255,0.025);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}
@media (min-width: 640px) { .tool-widget { padding: 40px; } }

/* ---- Access gate (email) ---- */
.tool-gate h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--ors-ink);
}
.tool-gate p {
  font-family: var(--font-body);
  color: var(--ors-dim);
  margin: 0 0 20px;
  line-height: 1.6;
}
.tool-form { display: flex; gap: 10px; flex-wrap: wrap; }
.tool-input,
.tool-textarea {
  flex: 1;
  min-width: 200px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ors-ink);
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--ors-line-strong);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tool-input::placeholder,
.tool-textarea::placeholder { color: var(--ors-dim); }
.tool-input:focus,
.tool-textarea:focus {
  border-color: var(--ors-cyan);
  box-shadow: 0 0 0 3px rgba(37,99,255,0.18);
}
.tool-textarea {
  width: 100%;
  min-height: 260px;
  line-height: 1.6;
  resize: vertical;
}

/* ---- Buttons (extends .ors-btn) ---- */
.ors-btn-tool {
  background: linear-gradient(120deg, var(--ors-cyan), var(--ors-magenta));
  color: #fff;
  border: 0;
  padding: 13px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 14px rgba(37,99,255,0.28);
}
.ors-btn-tool:hover { box-shadow: 0 4px 20px rgba(168,85,247,0.35); }
.ors-btn-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ---- Logged-in status bar ---- */
.tool-userbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 22px;
  border-radius: 10px;
  border: 1px solid var(--ors-line);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.tool-userbar .email { color: var(--ors-ink); }
.tool-usage-badge {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ors-lime);
  color: var(--ors-lime);
}
.tool-usage-badge.is-limited { border-color: var(--ors-magenta); color: var(--ors-magenta); }
.tool-signout {
  background: none;
  border: 0;
  color: var(--ors-dim);
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
}
.tool-signout:hover { color: var(--ors-magenta); }

/* ---- Input footer / char count ---- */
.tool-input-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.tool-charcount {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ors-dim);
  letter-spacing: 0.04em;
}
.tool-charcount.is-warning { color: var(--ors-lime); }

/* ---- Loading ---- */
.tool-loading { display: none; text-align: center; padding: 40px 0 10px; }
.tool-loading.is-active { display: block; }
.tool-spinner {
  width: 34px; height: 34px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid var(--ors-line-strong);
  border-top-color: var(--ors-cyan);
  animation: toolSpin 0.9s linear infinite;
}
@keyframes toolSpin { to { transform: rotate(360deg); } }
.tool-loading-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ors-dim);
}

/* ---- Result / analysis panel ---- */
.tool-result { display: none; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--ors-line); }
.tool-result.is-active { display: block; }
.tool-result-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ors-lime);
}
.tool-result-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ors-lime); box-shadow: 0 0 8px var(--ors-lime); }
.tool-result-content {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ors-ink);
}
.tool-result-content > * + * { margin-top: 14px; }
.tool-result-content h4 {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ors-cyan);
  margin-top: 20px;
}
.tool-result-content h4:first-child { margin-top: 0; }
.tool-result-content strong { color: var(--ors-lime); }
.tool-result-content em { color: var(--ors-magenta); font-style: normal; }
.tool-result-content p { margin: 0; }

/* ---- Messages ---- */
.tool-message {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
}
.tool-message.is-active { display: block; }

.tool-privacy-note {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ors-dim);
}
.tool-privacy-note a { color: var(--ors-cyan); }

.tool-offline-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid rgba(190, 242, 100, 0.45);
  background: rgba(190, 242, 100, 0.08);
  color: var(--ors-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
}
.tool-offline-note strong { color: var(--ors-lime); }
.tool-message-error { background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.35); color: var(--ors-ink); }
.tool-message-success { background: rgba(190,242,100,0.08); border: 1px solid rgba(190,242,100,0.35); color: var(--ors-ink); }

/* ---- Methodology sections (reuse prose look from library posts) ---- */
.tool-methods {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ors-ink);
}
.tool-methods > * + * { margin-top: 20px; }
.tool-methods h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.01em;
  color: var(--ors-magenta);
  margin-top: 44px;
}
.tool-methods h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ors-cyan);
  margin-top: 28px;
}
.tool-methods p { margin: 0; color: var(--ors-ink); }
.tool-methods ul, .tool-methods ol { padding-left: 22px; margin: 0; }
.tool-methods li + li { margin-top: 8px; }
.tool-methods a {
  color: var(--ors-lime);
  text-decoration: none;
  border-bottom: 1px dotted var(--ors-lime);
}
.tool-methods a:hover { color: var(--ors-magenta); border-bottom-color: var(--ors-magenta); }

.tool-method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 720px) { .tool-method-grid { grid-template-columns: 1fr 1fr; } }
.tool-method-card {
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--ors-line);
  background: rgba(255,255,255,0.025);
}
.tool-method-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ors-lime);
  display: block;
  margin-bottom: 8px;
}
.tool-method-card h3 { margin: 0 0 8px; font-size: 17px; }
.tool-method-card p { color: var(--ors-dim); font-size: 14.5px; margin: 0; }

/* ---- Related references list ---- */
.tool-related {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}
.tool-related li {
  border: 1px solid var(--ors-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.tool-related a {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ors-ink);
  text-decoration: none;
  border-bottom: 0 !important;
}
.tool-related a:hover { color: var(--ors-lime); }
.tool-related .arrow { color: var(--ors-lime); margin-right: 8px; }

/* ---- CTA banner (author / other tool cross-link) ---- */
.tool-cta {
  max-width: 780px;
  margin: 48px auto 0;
  padding: 26px 28px;
  border-radius: 16px;
  border: 1px solid var(--ors-line);
  background: rgba(255,255,255,0.025);
  text-align: center;
}
.tool-cta p { color: var(--ors-dim); margin: 0 0 14px; }

/* ---- Guided reference hubs ---- */
.hub-page { padding-bottom: 0; }
.hub-breadcrumb {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ors-dim);
}
.hub-breadcrumb a { color: var(--ors-lime); text-decoration: none; }
.hub-hero { padding-top: 42px; }
.hub-main { max-width: 920px; margin: 0 auto; padding: 0 24px 72px; }
.hub-intro,
.hub-explore,
.hub-crosslink {
  padding: 28px;
  border: 1px solid var(--ors-line);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
}
.hub-intro h2,
.hub-explore h2,
.hub-crosslink h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.25;
  color: var(--ors-ink);
}
.hub-intro p,
.hub-crosslink p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ors-dim); }
.hub-label,
.hub-intro .hub-label,
.hub-crosslink .hub-label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ors-lime);
}
.hub-path { list-style: none; padding: 0; margin: 24px 0 48px; display: grid; gap: 14px; }
.hub-step {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--ors-line);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(37,99,255,0.045), rgba(168,85,247,0.04));
}
.hub-step-num {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  color: var(--ors-lime);
  border-right: 1px solid var(--ors-line-strong);
}
.hub-step-kicker { margin: 0 0 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ors-cyan); }
.hub-step h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(19px, 2.5vw, 25px); line-height: 1.25; color: var(--ors-ink); }
.hub-step-body > p:not(.hub-step-kicker) { margin: 0 0 17px; font-size: 15.5px; line-height: 1.7; color: var(--ors-dim); }
.hub-step-body strong { color: var(--ors-ink); }
.hub-primary-link {
  display: inline-block;
  color: var(--ors-lime);
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted var(--ors-lime);
}
.hub-primary-link:hover { color: var(--ors-magenta); border-bottom-color: var(--ors-magenta); }
.hub-primary-link span { margin-left: 4px; }
.hub-support { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 15px; font-size: 13px; line-height: 1.5; }
.hub-support span { color: var(--ors-dim); }
.hub-support a { color: var(--ors-cyan); text-decoration: none; border-bottom: 1px dotted var(--ors-cyan); }
.hub-step-diagnostic { border-color: rgba(190,242,100,0.38); background: linear-gradient(120deg, rgba(190,242,100,0.07), rgba(37,99,255,0.05)); }
.hub-tool-button { display: inline-block; text-decoration: none; border-radius: 999px; }
.hub-explore { margin-bottom: 24px; }
.hub-explore .tool-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-crosslink { border-color: rgba(37,99,255,0.32); }
.hub-crosslink .hub-primary-link { margin-top: 16px; }
.hub-index-heading a { color: inherit; text-decoration: none; border: 0; }
.hub-index-heading a:hover { color: var(--ors-lime); }
.hub-index-heading span { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ors-lime); }
.hub-index-dek { margin-top: 10px !important; color: var(--ors-dim) !important; }

@media (max-width: 640px) {
  .hub-main { padding-left: 16px; padding-right: 16px; }
  .hub-breadcrumb { padding-left: 16px; padding-right: 16px; }
  .hub-step { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .hub-step-num { border-right: 0; border-bottom: 1px solid var(--ors-line-strong); padding-bottom: 10px; }
  .hub-intro, .hub-explore, .hub-crosslink { padding: 22px 20px; }
  .hub-explore .tool-related { grid-template-columns: 1fr; }
}