/* Shared tool header styles — consistent across all tool pages */

/* Ticker links: underline on hover across all tools */
a[href*="/tickers/"]:hover { text-decoration: underline !important; }
.ticker-link:hover { text-decoration: underline !important; }
.highcharts-title a:hover, .highcharts-subtitle a:hover { text-decoration: underline !important; }

.input-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 2px solid rgba(184,92,30,0.12);
  position: sticky; top: 56px; z-index: 90;
  background: var(--charcoal);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,0.6);
}
.input-label {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 900;
  color: var(--brand); letter-spacing: -0.02em;
  line-height: 1.15; margin-bottom: 0.25rem;
  position: relative; display: inline-flex; align-items: baseline; gap: 0.45rem;
}
.input-label-text {
  background: linear-gradient(135deg, var(--brand) 0%, #d4541e 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle, .hero-sub {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  color: var(--text-muted); margin-bottom: 0.5rem; letter-spacing: 0.01em;
}
.hero-controls-card {
  margin-top: 0.5rem; padding: 0.85rem 1.5rem 0.75rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03),
    0 8px 24px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem;
}
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--brand, #B85C1E);
  cursor: help; position: relative; top: -1px;
  transition: background 0.15s; flex-shrink: 0;
}
.help-icon svg { width: 10px; height: 10px; fill: var(--brand, #B85C1E); transition: fill 0.15s; }
.help-icon:hover { background: var(--brand, #B85C1E); }
.help-icon:hover svg { fill: #fff; }
.help-tooltip {
  position: absolute; left: 50%; top: calc(100% + 10px);
  transform: translateX(-50%); background: #1A1714; color: #f5f0eb;
  border-radius: 8px; padding: 0.65rem 0.85rem; font-family: var(--sans);
  font-size: 0.72rem; font-weight: 400; line-height: 1.5;
  width: 280px; text-align: left; letter-spacing: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
  transform: translateX(-50%) translateY(4px); z-index: 1000;
}
.help-tooltip::before {
  content: ''; position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid #1A1714;
}
.help-icon:hover + .help-tooltip, .help-tooltip:hover {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ─── TICKER PILLS (segmented button style) ─── */
.ticker-pills {
  display: flex; gap: 0; flex-wrap: nowrap;
  justify-content: center;
  margin: 0.5rem auto 0;
  width: 100%; max-width: 800px;
}
.ticker-pill {
  font-family: var(--sans, 'DM Sans', sans-serif); font-size: 0.78rem; font-weight: 600;
  padding: 0.4rem 0.85rem; flex: 1; text-align: center;
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--card-bg, #fff);
  color: var(--text);
  cursor: pointer; transition: all 0.15s;
}
.ticker-pill:first-child { border-radius: 6px 0 0 6px; }
.ticker-pill:not(:first-child) { border-left: none; }
.ticker-pill.ticker-dropdown-trigger { border-radius: 0 6px 6px 0; border-left: none; }
.ticker-pill.active {
  background: var(--brand); color: #fff;
  border-color: var(--brand);
}
.ticker-pill:hover:not(.active) { background: rgba(0,0,0,0.04); }
.ticker-pill:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── Custom ticker pill ─── */
.ticker-pill.custom {
  border-style: dashed; position: relative; padding-right: 1.6rem; border-radius: 0;
}
.ticker-pill.custom.active { border-style: solid; }
.ticker-pill.custom .pill-x {
  position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%);
  font-size: 0.6rem; opacity: 0.5; line-height: 1;
}
.ticker-pill.custom .pill-x:hover { opacity: 1; }

/* ─── Custom ticker input ─── */
.custom-ticker-input {
  font-family: var(--sans, 'DM Sans', sans-serif); font-size: 0.72rem; font-weight: 600;
  padding: 0.4rem 0.7rem; border-radius: 20px; width: 8rem;
  border: 2px dashed var(--brand);
  background: rgba(184,92,30,0.03); color: var(--text);
  outline: none; text-align: center;
  transition: all 0.2s;
}
.custom-ticker-input::placeholder { color: var(--brand); font-weight: 500; opacity: 0.5; }
.custom-ticker-input:focus { border-style: solid; box-shadow: 0 0 0 3px rgba(184,92,30,0.15); background: rgba(249,248,246,0.88); }

/* ─── More/Other dropdown ─── */
.other-dropdown-wrap, .ticker-dropdown-wrap, .ticker-more-wrap { position: relative; display: inline-flex; }
.other-dropdown-trigger, .ticker-more-btn {
  font-family: var(--sans, 'DM Sans', sans-serif); font-size: 0.78rem; font-weight: 600;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.12); border-left: none;
  border-radius: 0 6px 6px 0;
  background: var(--card-bg, #fff); color: var(--text);
  cursor: pointer; transition: all 0.15s;
}
.other-dropdown-trigger:hover, .ticker-more-btn:hover { background: rgba(0,0,0,0.04); }
.other-dropdown-trigger.active, .ticker-more-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.other-dropdown-menu, .ticker-more-menu, .ticker-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--card-bg, #fff); border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 140px; z-index: 100; overflow: hidden;
}
.other-dropdown-menu.open, .ticker-more-menu.open, .ticker-dropdown-menu.open { display: block; }
.other-dropdown-item, .ticker-more-item, .ticker-dropdown-item {
  display: block; width: 100%; text-align: left;
  font-family: var(--sans, 'DM Sans', sans-serif); font-size: 0.75rem; font-weight: 600;
  padding: 0.5rem 0.85rem; border: none; background: none;
  color: var(--text); cursor: pointer; transition: background 0.15s;
}
.other-dropdown-item:hover, .ticker-more-item:hover, .ticker-dropdown-item:hover { background: rgba(0,0,0,0.04); }
.other-dropdown-item.active, .ticker-more-item.active, .ticker-dropdown-item.active { background: var(--brand); color: #fff; }

/* ─── Stepper controls ─── */
.tool-stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: 8px; overflow: hidden;
  background: var(--surface, #F9F8F6);
}
.tool-stepper-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  cursor: pointer; color: var(--text);
  transition: background 0.15s, color 0.15s;
}
.tool-stepper-btn:hover { background: var(--brand); color: #fff; }
.tool-stepper-btn:active { background: var(--brand-light, #A0510F); color: #fff; }
.tool-stepper-btn:disabled { opacity: 0.25; cursor: default; }
.tool-stepper-btn svg { width: 14px; height: 14px; }
.tool-stepper-input {
  font-family: var(--sans, 'DM Sans', sans-serif); font-size: 1rem; font-weight: 700;
  color: var(--brand); width: 50px; text-align: center;
  padding: 0 0.1rem; border: none; outline: none;
  border-left: 1px solid rgba(0,0,0,0.1);
  border-right: 1px solid rgba(0,0,0,0.1);
  height: 32px; background: transparent;
  -moz-appearance: textfield;
}
.tool-stepper-input::-webkit-outer-spin-button,
.tool-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tool-stepper-input::placeholder { color: rgba(184,92,30,0.25); font-weight: 400; }

/* ─── Title animation ─── */
/* ─── Dropdown (More ▾) ─── */
.ticker-dropdown-wrap, .ticker-more-wrap, .other-dropdown-wrap { position: relative; display: inline-flex; }
.ticker-dropdown-menu, .ticker-more-menu, .other-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--card-bg, #fff); border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 140px; z-index: 100; overflow: hidden;
}
.ticker-dropdown-menu.open, .ticker-more-menu.open, .other-dropdown-menu.open { display: block; }
.ticker-dropdown-item, .ticker-more-item, .other-dropdown-item {
  display: block; width: 100%; text-align: left;
  font-family: var(--sans, 'DM Sans', sans-serif); font-size: 0.75rem; font-weight: 600;
  padding: 0.5rem 1rem; border: none; background: transparent;
  color: var(--text, #3D352E); cursor: pointer; transition: all 0.15s;
}
.ticker-dropdown-item:hover, .ticker-more-item:hover, .other-dropdown-item:hover {
  background: rgba(184,92,30,0.08); color: var(--brand, #B85C1E);
}
.ticker-dropdown-item.active, .ticker-more-item.active, .other-dropdown-item.active {
  color: var(--brand, #B85C1E); font-weight: 700;
}

/* ─── Custom Ticker Input ─── */
.custom-ticker-slot { display: inline-flex; gap: 0.35rem; align-items: center; }
.custom-ticker-input {
  font-family: var(--sans, 'DM Sans', sans-serif); font-size: 0.72rem; font-weight: 600;
  padding: 0.4rem 0.7rem; border-radius: 20px; width: 8rem;
  border: 2px dashed var(--brand, #B85C1E);
  background: rgba(184,92,30,0.03); color: var(--text, #3D352E);
  outline: none; text-align: center; transition: all 0.2s;
}
.custom-ticker-input::placeholder { color: var(--brand, #B85C1E); font-weight: 500; opacity: 0.5; }
.custom-ticker-input:focus { border-style: solid; box-shadow: 0 0 0 3px rgba(184,92,30,0.15); background: rgba(249,248,246,0.88); }

@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.input-label .anim-word, .input-label-text .anim-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpIn 0.65s ease-out both;
}
.input-label-text .anim-word {
  background: linear-gradient(135deg, var(--brand) 0%, #d4541e 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .input-hero { padding: 1rem 0.75rem 0.75rem; }
  .input-label { font-size: 1.3rem; }
  .ticker-pills { flex-wrap: wrap; gap: 0; }
  .ticker-pill { flex: none; font-size: 0.68rem; padding: 0.3rem 0.6rem; border-radius: 0 !important; border-left: 1px solid rgba(0,0,0,0.12) !important; }
  .other-dropdown-trigger, .ticker-more-btn, .ticker-dropdown-trigger { border-left: 1px solid rgba(0,0,0,0.12) !important; border-radius: 0 !important; }
}