/* ==========================================================================
   All Beginner, Trading Tools (/trading-tools/ and the six calculator pages under it)
   Loaded only on the Trading Tools pages, after the main /style.css. The file itself stays at
   /tools/assets/tools.css, together with the scripts in /tools/assets/js/.

   Every rule is scoped under .tools-main (the <main> element of these pages),
   so nothing here can change the main website's pages. Typography, theme
   switch, header, footer, buttons and container come from /style.css; this
   file only styles what the tools add: tool cards, calculator layouts, results,
   market-hours clock, checklist, psychology check and explanations.
   Theme: the main site's [data-theme] switch only (dark by default).
   ========================================================================== */

.tools-main {
  --calc-max: 780px;
  /* Tool-only status colours (dark theme, the default). */
  --tl-warn: #e5484d;
  --tl-warn-dim: rgba(229, 72, 77, 0.12);
  --tl-warn-border: rgba(229, 72, 77, 0.3);
  --tl-warn-strong: #ffb3b5;
  /* Text-only red for small messages inside cards (4.5:1 needed on the card colour). --tl-warn stays for borders. */
  --tl-warn-text: #f26d71;
  /* Muted text on tinted surfaces; same as the site's tertiary text in Dark. */
  --tl-tint-text: var(--text-tertiary-readable);
  --tl-positive: #34d399;
  --tl-positive-dim: rgba(52, 211, 153, 0.1);
  --tl-positive-border: rgba(52, 211, 153, 0.28);
  --tl-caution-dim: rgba(244, 196, 48, 0.12);
  --tl-caution-border: rgba(244, 196, 48, 0.35);
  --tl-caution-text: #ffe368;
  --tl-overlay-4: rgba(255, 255, 255, 0.04);
  --tl-overlay-5: rgba(255, 255, 255, 0.05);
  --tl-shadow-hover: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .tools-main {
  --tl-warn: #c2262b;
  --tl-warn-dim: rgba(194, 38, 43, 0.08);
  --tl-warn-border: rgba(194, 38, 43, 0.3);
  --tl-warn-strong: #a11e23;
  --tl-warn-text: #c2262b;
  /* Slightly darker slate for small text on pale tinted surfaces (was #64748b, 4.08 to 4.30:1). */
  --tl-tint-text: #5c6b81;
  --tl-positive: #157347;
  --tl-positive-dim: rgba(21, 115, 71, 0.1);
  --tl-positive-border: rgba(21, 115, 71, 0.3);
  --tl-caution-dim: rgba(184, 134, 11, 0.1);
  --tl-caution-border: rgba(184, 134, 11, 0.4);
  --tl-caution-text: #7a5901;
  --tl-overlay-4: rgba(15, 23, 42, 0.04);
  --tl-overlay-5: rgba(0, 0, 0, 0.05);
  --tl-shadow-hover: rgba(15, 23, 42, 0.12);
}

/* The hidden attribute must win over component display rules. */
.tools-main [hidden] { display: none !important; }

.tools-main ol,
.tools-main ul { list-style: none; }

.tools-main input,
.tools-main select,
.tools-main textarea,
.tools-main button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.tools-main .accent { color: var(--accent-text); }

/* Gap from the last content block to the footer's top divider: the same 96px
   (var(--space-9)) as the Home page, from its closing call-to-action card. The
   last block on each page carries no bottom padding of its own, so it is not doubled. */
.tools-main {
  padding-bottom: var(--space-9);
}

/* v132: calculator pages use the same 48px gap as the rest of the site at 720px and below (the Trading Tools hub keeps its own .tools-landing value). */
@media (max-width: 720px) {
  .tools-main:not(.tools-landing) { padding-bottom: var(--space-7); }
}

.tools-main .tool-grid > .tool-card[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---- Top spacing under the sticky header: one value for all seven pages ---- */
.tools-main { --tl-top: 56px; }

@media (max-width: 768px) {
  .tools-main { --tl-top: 36px; }
}

/* ---- Tool page header, built on the shared section-title / section-sub ---- */
.tools-main .tool-header .section-title { margin-bottom: 10px; }
.tools-main .tool-header .section-sub { max-width: 620px; margin: 0 auto; }

/* ---- Section rhythm: the shared .section padding is tuned for marketing pages,
   the tools pages use a tighter rhythm ---- */
.tools-main .section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* ---- Landing hero: no separate band or divider. The heading and paragraph sit on the
   same tools-page background as the grid below, so the page reads as one surface in
   both themes. The gap to the grid is the grid section's own top padding. ---- */
.tools-main .tools-hero {
  padding-top: var(--space-9);
  padding-bottom: 0;
  text-align: center;
}

.tools-main .tools-hero .section-sub {
  max-width: 680px;
  margin: 0 auto;
}

/* Landing page: the heading sits the same distance below the header as on the Contact page (96px, 48px on small screens). */
@media (max-width: 720px) {
  .tools-main .tools-hero { padding-top: var(--space-7); }
}

/* Landing page: the tool grid is the last block, so the main's own bottom padding is the whole gap to the footer.
   120px on desktop and tablet, 64px on small screens. A little more than Contact because a grid of bordered cards looks heavier than text. */
.tools-main.tools-landing { padding-bottom: 120px; }
.tools-main.tools-landing > #all-tools:last-child { padding-bottom: 0; }
@media (max-width: 720px) {
  .tools-main.tools-landing { padding-bottom: 64px; }
}

/* ---- Buttons: the pill buttons come from /style.css; only sizing is tool-specific ---- */
.tools-main .btn-primary { color: #fff; }

/* ==========================================================================
   Tool components (from Tools v23)
   ========================================================================== */

.tools-main .calc-actions .btn { min-width: 0; padding-left: 14px; padding-right: 14px; }

.tools-main .tool-header {
  padding-top: var(--tl-top);
  padding-bottom: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tools-main .cta-title {
  position: relative;
  font-size: clamp(28px, 4vw, 42px);
  max-width: 700px;
  margin: 0 auto 16px;
}

.tools-main .cta-desc {
  position: relative;
  color: var(--text-secondary);
  font-size: 17px;
  max-width: 640px;
  margin: 0 auto 28px;
}

.tools-main .cta-actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tools-main .cta-actions .btn {
  min-width: 232px;
}

@media (min-width: 769px) {
.tools-main .cta-title {
  max-width: none;
}
}

@media (max-width: 430px) {
.tools-main .cta-actions {
  flex-direction: column;
}

.tools-main .cta-actions .btn {
  width: 100%;
}
}

/* Trading Tools directory: one grid of six cards. 3 columns (2 rows) on desktop, 2 columns on tablet,
   1 column on narrow phones. Grid rows stretch every card to the same height. */
.tools-main .tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
.tools-main .tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 600px) {
.tools-main .tool-grid {
  grid-template-columns: minmax(0, 1fr);
}
}

.tools-main a.tool-card {
  /* v154: card layout (icon left, text right, left-aligned) now comes from the shared Trading Tools card rule in style.css */
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-card) var(--ease), border-color var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease), background-color var(--dur-card) var(--ease);
}

@media (hover:hover) {.tools-main a.tool-card:hover {
  transform: translateY(var(--lift-card));
  border-color: var(--border-strong);
  box-shadow: 0 8px 20px var(--tl-shadow-hover);
}
}

.tools-main a.tool-card:active {
  transform: translateY(calc(var(--lift-card) / 3));
  background: var(--bg);
}

.tools-main a.tool-card:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.tools-main .tool-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tools-main .tool-card-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tl-tint-text);
  background: var(--tl-overlay-5);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 4px 10px;
}

.tools-main .tool-card .tool-icon {
  /* Neutral icon treatment: glyph, tile fill and border use no accent colour.
     Dark theme: near-white glyph on a faint white tile. Light theme: near-black glyph on a faint dark tile. */
  --ico-bg: rgba(255, 255, 255, 0.06);
  --ico-bg-hover: rgba(255, 255, 255, 0.11);
  --ico-border: rgba(255, 255, 255, 0.22);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--ico-bg);
  border: 1px solid var(--ico-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: transform var(--dur-card) var(--ease), background-color var(--dur-card) var(--ease);
  flex-shrink: 0;
}

@media (hover:hover) {.tools-main a.tool-card:hover .tool-icon {
  transform: scale(var(--icon-scale));
  background: var(--ico-bg-hover);
}
}

:root[data-theme="light"] .tools-main .tool-card .tool-icon {
  --ico-bg: rgba(0, 0, 0, 0.05);
  --ico-bg-hover: rgba(0, 0, 0, 0.09);
  --ico-border: rgba(0, 0, 0, 0.22);
}

.tools-main .tool-card .tool-icon svg {
  width: 22px;
  height: 22px;
}

.tools-main .tool-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  /* The title is an h2 for the page's heading order. These lines keep it looking exactly as the
     earlier span did, so the global h2 line height, letter spacing and line balancing do not change the card. */
  line-height: inherit;
  letter-spacing: normal;
  text-wrap: wrap;
}

.tools-main .tool-card-desc {
  color: var(--text-secondary);
  font-size: 14.5px;
  flex-grow: 1;
}

.tools-main .tool-card .card-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
}

.tools-main .tool-card .card-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-ctl) var(--ease);
}

@media (hover:hover) {.tools-main a.tool-card:hover .card-link svg {
  transform: translateX(var(--nudge));
}
}

.tools-main .field {
  margin-bottom: 14px;
}

.tools-main .field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.tools-main .field input[type="text"],
.tools-main .field input[type="number"],
.tools-main .field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color var(--dur-ctl) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.tools-main .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23475569' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
  padding-right: 34px;
}

:root:not([data-theme="light"]) .tools-main .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23cbd5e1' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
}

.tools-main .field input:focus,
.tools-main .field select:focus {
  border-color: var(--accent-text);
}

.tools-main .field input:disabled,
.tools-main .field select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tools-main .field input:disabled {
  background: var(--tl-overlay-4);
}

.tools-main .field input.field-error {
  border-color: var(--tl-warn);
}

.tools-main .field-errormsg {
  display: none;
  color: var(--tl-warn-text);
  font-size: 12.5px;
  margin-top: 6px;
}

.tools-main .field-errormsg.is-visible {
  display: block;
}

.tools-main .mh-section {
  padding-top: 18px;
  padding-bottom: 69px;
}

@media (max-width: 768px) {
.tools-main .mh-section {
  padding-top: 14px;
}
}

.tools-main .mh-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  max-width: var(--calc-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.tools-main .mh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.tools-main .mh-localtime {
  font-size: 13.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.tools-main .mh-zone-select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 9px 12px;
  min-height: 44px;
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
}

/* The list is as wide as its longest zone name once filled in; reserve that width
   while the page still shows "Loading time zones", so the row does not re-wrap. */
.tools-main .mh-zone-select {
  min-width: 215px;
}

.tools-main .mh-zone-select:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.tools-main .mh-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 520px) {
.tools-main .mh-grid {
  grid-template-columns: minmax(0, 1fr);
}
}

.tools-main .mh-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  min-width: 0;
}

.tools-main .mh-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.tools-main .mh-city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
}

.tools-main .mh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.tools-main .mh-badge.is-open {
  background: var(--tl-positive-dim);
  border: 1px solid var(--tl-positive-border);
  color: var(--tl-positive);
}

.tools-main .mh-badge.is-closed {
  background: var(--tl-overlay-5);
  border: 1px solid var(--border-strong);
  color: var(--tl-tint-text);
}

.tools-main .mh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.tools-main .mh-countdown {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.tools-main .mh-at {
  font-size: 11.5px;
  color: var(--text-tertiary-readable);
}

.tools-main .mh-overlap {
  margin-top: 14px;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.tools-main .mh-overlap.is-open {
  background: var(--tl-positive-dim);
  border: 1px solid var(--tl-positive-border);
}

.tools-main .mh-overlap.is-closed {
  background: var(--tl-overlay-4);
  border: 1px solid var(--border-strong);
}

.tools-main .mh-overlap-title {
  font-weight: 700;
  font-size: 13.5px;
}

.tools-main .mh-overlap.is-open .mh-overlap-title,
.tools-main .mh-overlap.is-open .mh-overlap-sub {
  color: var(--tl-positive);
}

.tools-main .mh-overlap.is-closed .mh-overlap-title {
  color: var(--text-secondary);
}

.tools-main .mh-overlap-sub {
  font-size: 13px;
  color: var(--tl-tint-text);
}

.tools-main .mh-section-page {
  padding-bottom: 12px;
}

.tools-main .mh-zone-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.tools-main .mh-zone-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.tools-main .mh-grid:empty {
  display: none;
}

.tools-main .mh-nojs,
.tools-main .tool-nojs,
.tools-main .tool-notice {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--tl-overlay-4);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.tools-main .tool-notice {
  margin: 0 0 14px;
  border-color: var(--accent-border);
  color: var(--text-primary);
}

.tools-main .rule-new:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- Loading, ready and failed states of the Trade Checklist and the Forex Market Hours clock ----
   Both ship in data-abt-state="loading". Their scripts set "ready" (also after a late start);
   the load watch in /theme-init.js sets "failed". The failure notice is in the HTML and is
   shown by CSS only in "failed", so it needs no script and clears itself on a late start. */
.tools-main #checklist-form:not([data-abt-state="failed"]) #chkNotice,
.tools-main .mh-panel:not([data-abt-state="failed"]) .mh-fail {
  display: none;
}

.tools-main .mh-fail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 16px;
}

.tools-main .mh-fail p {
  margin: 0;
  flex: 1 1 220px;
}

.tools-main .mh-fail .btn {
  flex: 0 0 auto;
}

/* Failed clock: no card, no time and no status is drawn, so nothing can be mistaken for a result.
   The time zone list stays, disabled. */
.tools-main .mh-panel[data-abt-state="failed"] .mh-grid,
.tools-main .mh-panel[data-abt-state="failed"] .mh-localtime {
  display: none;
}

.tools-main .mh-zone-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Failed checklist: every control stays visibly unavailable. */
.tools-main #checklist-form[data-abt-state="failed"] .rule-row {
  opacity: 0.6;
}

.tools-main #checklist-form[data-abt-state="failed"] .rule-row input,
.tools-main #checklist-form[data-abt-state="failed"] .rule-row button,
.tools-main #checklist-form[data-abt-state="failed"] .rule-check,
.tools-main #checklist-form[data-abt-state="failed"] .rule-req {
  cursor: not-allowed;
}

.tools-main .learn-body p + .mh-table,
.tools-main .learn-body .mh-table + p {
  margin-top: 12px;
}

.tools-main .mh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

.tools-main .mh-table th,
.tools-main .mh-table td {
  padding: 10px 10px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--border);
}

.tools-main .mh-table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--border-strong);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-tertiary-readable);
}

.tools-main .mh-table tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}

.tools-main .mh-table td {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
.tools-main .mh-table {
  font-size: 13px;
}

.tools-main .mh-table th,
.tools-main .mh-table td {
  padding: 9px 5px;
}
}

@media (max-width: 380px) {
.tools-main .mh-table {
  font-size: 12.5px;
}

.tools-main .mh-table th,
.tools-main .mh-table td {
  padding: 8px 3px;
}

.tools-main .learn-body .mh-table {
  margin-left: -20px;
  width: calc(100% + 20px);
}

.tools-main .learn-body .mh-table tr > :first-child {
  padding-left: 0;
}
}

.tools-main .calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  width: 100%;
  max-width: var(--calc-max);
  margin: 20px auto 0;
}

@media (max-width: 760px) {
.tools-main .calc-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
}

.tools-main .calc-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  box-shadow: var(--card-shadow);
}

.tools-main .calc-box-title {
  font-size: 17px;
  margin-bottom: 12px;
}

.tools-main .calc-form-box .field:last-of-type {
  margin-bottom: 0;
}

.tools-main .calc-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.tools-main .calc-actions .btn {
  flex: 1;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.tools-main .calc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-tertiary-readable);
}

.tools-main .calc-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  background: transparent;
}

.tools-main .calc-status[data-state="done"] {
  color: var(--tl-positive);
}

.tools-main .calc-status[data-state="done"] .calc-status-dot {
  background: currentColor;
}

.tools-main .calc-status[data-state="invalid"] {
  color: var(--tl-warn-strong);
}

.tools-main .calc-status[data-state="invalid"] .calc-status-dot {
  background: currentColor;
}

.tools-main .calc-results .r-value.is-placeholder,
.tools-main .calc-results .result-row.is-primary .r-value.is-placeholder {
  color: var(--tl-tint-text);
  font-weight: 600;
}

.tools-main .calc-results .r-value.is-na,
.tools-main .calc-results .result-row.is-primary .r-value.is-na {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.tools-main .calc-results .result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.tools-main .calc-results .result-row:last-child {
  border-bottom: none;
}

.tools-main .calc-results .result-row.is-primary {
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin-bottom: 4px;
}

.tools-main .calc-results .r-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.tools-main .calc-results .result-row.is-primary .r-label {
  color: var(--text-primary);
  font-weight: 600;
}

.tools-main .calc-results .r-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin-left: auto;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.tools-main .calc-results .result-row.is-primary .r-value {
  font-size: 20px;
  color: var(--accent-text);
}

.tools-main .calc-feedback {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
}

.tools-main .field-help {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-tertiary-readable);
}

.tools-main .field-help .ch-line {
  display: block;
}

.tools-main .field-help .ch-line + .ch-line {
  margin-top: 4px;
}

.tools-main .calc-feedback p {
  margin: 0;
}

.tools-main .calc-feedback p + p {
  margin-top: 6px;
}

.tools-main .calc-feedback.is-info {
  background: var(--tl-overlay-4);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.tools-main .calc-feedback.is-warn {
  background: var(--tl-caution-dim);
  border: 1px solid var(--tl-caution-border);
  color: var(--tl-caution-text);
}

.tools-main .calc-feedback.is-danger {
  background: var(--tl-warn-dim);
  border: 1px solid var(--tl-warn-border);
  color: var(--tl-warn-strong);
}

.tools-main .calc-intro {
  margin: -4px 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-tertiary-readable);
}

.tools-main .tool-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--calc-max);
  margin: 20px auto 0;
}

@media (max-width: 760px) {
.tools-main .tool-stack {
  gap: 16px;
}
}

.tools-main .tool-stack .calc-intro {
  margin: -4px 0 14px;
}

.tools-main .btn-sm {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 13.5px;
  white-space: normal;
  text-align: center;
}

.tools-main .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tools-main .seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

.tools-main .seg-opt {
  position: relative;
  display: block;
}

.tools-main .seg-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tools-main .seg-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-ctl) var(--ease), border-color var(--dur-ctl) var(--ease), color var(--dur-ctl) var(--ease);
}

@media (hover:hover) {.tools-main .seg-opt:hover input:not(:checked) + span {
  background: var(--input-bg-hover);
}
}

.tools-main .seg-opt input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

:root:not([data-theme="light"]) .tools-main .seg-opt input:checked + span {
  border-color: var(--accent-text);
}

.tools-main .seg-opt input:focus-visible + span {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.tools-main .check-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--tl-overlay-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.tools-main .check-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-primary);
}

.tools-main .check-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-secondary);
}

.tools-main .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-secondary);
  background: var(--bg);
}

.tools-main .status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.tools-main .status-pill.is-required {
  background: var(--tl-warn-dim);
  border-color: var(--tl-warn-border);
  color: var(--tl-warn-strong);
}

.tools-main .status-pill.is-open {
  background: var(--tl-caution-dim);
  border-color: var(--tl-caution-border);
  color: var(--tl-caution-text);
}

.tools-main .status-pill.is-done {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

/* Light: the accent text on the tinted pill measured 4.29:1; this blue is 5.7:1 or more. */
:root[data-theme="light"] .tools-main .status-pill.is-done {
  color: #1d4ed8;
}

.tools-main .rule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tools-main .rule-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 44px;
  grid-template-areas: "check text req remove";
  align-items: center;
  gap: 4px 8px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.tools-main .rule-row.is-required {
  border-color: var(--accent-border);
}

.tools-main .rule-row.is-checked {
  background: var(--accent-dim);
}

.tools-main .rule-check {
  grid-area: check;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.tools-main .rule-check input,
.tools-main .rule-req input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.tools-main .rule-text {
  grid-area: text;
  display: block;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  line-height: 1.4;
}

.tools-main .rule-text,
.tools-main .rule-new {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color var(--dur-ctl) var(--ease);
}

/* Inert preview rows shipped in the HTML before the script starts: same box as the
   real text area, wrapping the same way. */
.tools-main div.rule-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

.tools-main .rule-text:focus,
.tools-main .rule-new:focus {
  border-color: var(--accent-text);
}

.tools-main .rule-text:focus-visible,
.tools-main .rule-new:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.tools-main .rule-text.field-error {
  border-color: var(--tl-warn);
}

.tools-main .rule-req {
  grid-area: req;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.tools-main .rule-remove {
  grid-area: remove;
  width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

@media (hover:hover) {.tools-main .rule-remove:hover {
  border-color: var(--tl-warn-border);
  color: var(--tl-warn);
}
}

.tools-main .rule-remove:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

@media (max-width: 520px) {
.tools-main .rule-row {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas:
  "check text text"
  ". req remove";
}

.tools-main .rule-req {
  justify-self: start;
}
}

.tools-main .rule-add-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.tools-main .rule-add {
  display: flex;
  gap: 8px;
}

.tools-main .rule-add .rule-new {
  flex: 1 1 auto;
}

.tools-main .rule-add .btn {
  flex: 0 0 auto;
}

.tools-main .list-msg {
  min-height: 20px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-tertiary-readable);
}

@media (max-width: 560px) {
.tools-main #ruleMsg {
  min-height: 38px;
}
}

.tools-main .check-actions {
  margin-top: 8px;
}

.tools-main .save-box p {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.tools-main .save-box p.field-help {
  margin-top: -4px;
  font-size: 13.5px;
  color: var(--text-tertiary-readable);
}

.tools-main .psy-item {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.tools-main .psy-item:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.tools-main .psy-q {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tools-main .psy-q legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-primary);
}

@media (min-width: 561px) {
.tools-main .psy-q {
  display: flow-root;
}

.tools-main .psy-q legend {
  float: left;
  width: calc(100% - 184px);
  margin: 0;
  padding: 11px 0;
}

.tools-main .psy-q .seg {
  float: right;
  width: 168px;
}
}

.tools-main .psy-summary {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.tools-main .psy-summary.is-idle {
  color: var(--text-tertiary-readable);
}

.tools-main .psy-summary p + p,
.tools-main .psy-summary p + ul,
.tools-main .psy-summary ul + p {
  margin-top: 8px;
}

.tools-main .psy-summary ul {
  padding-left: 18px;
}

.tools-main .psy-summary li {
  list-style: disc;
  margin-bottom: 2px;
}

.tools-main .psy-summary strong {
  color: var(--text-primary);
}

.tools-main .unit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 132px);
  gap: 8px;
}

.tools-main .unit-row.unit-first {
  grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
}

.tools-main .field input::placeholder {
  color: var(--text-tertiary-readable);
  opacity: 1;
}

@media (max-width: 420px) {
.tools-main .unit-row,
.tools-main .unit-row.unit-first {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}

.tools-main .equiv {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.tools-main .equiv.is-empty {
  color: var(--text-tertiary-readable);
}

.tools-main .calc-results .r-values {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-left: auto;
  max-width: 100%;
}

.tools-main .calc-results .r-values .r-value {
  margin-left: 0;
}

.tools-main .calc-results .r-values .r-pct {
  min-width: 5.5ch;
}

.tools-main .calc-results .result-row.is-primary .r-values .r-pct {
  font-size: 16px;
}

.tools-main .calc-results .r-value.is-negative,
.tools-main .calc-results .result-row.is-primary .r-value.is-negative {
  color: var(--tl-warn-strong);
}

.tools-main .calc-results .result-row.result-status {
  display: block;
}

.tools-main .calc-results .result-row.result-status .r-label {
  display: block;
  margin-bottom: 4px;
}

.tools-main .calc-results .result-row.result-status .r-value.is-placeholder {
  display: block;
  margin-left: 0;
  text-align: left;
  font-size: 15px;
}

.tools-main .verdict {
  padding: 10px 12px;
  background: var(--tl-overlay-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.tools-main .verdict-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-primary);
}

.tools-main .verdict-text {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tools-main .verdict.is-fits {
  background: var(--accent-dim);
  border-color: var(--accent-border);
}

.tools-main .verdict.is-fits .verdict-title {
  color: var(--accent-text);
}

.tools-main .verdict.is-exceeds {
  background: var(--tl-warn-dim);
  border-color: var(--tl-warn-border);
}

.tools-main .verdict.is-exceeds .verdict-title {
  color: var(--tl-warn-strong);
}

.tools-main .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tools-main .learn {
  margin-top: 48px;
}

.tools-main .learn-wrap {
  width: 100%;
  max-width: var(--calc-max);
  margin: 0 auto;
}

.tools-main .learn-box {
  padding-bottom: 6px;
}

.tools-main .learn-item {
  border-top: 1px solid var(--border);
}

.tools-main .learn-item summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-primary);
  list-style: none;
}

.tools-main .learn-item summary::-webkit-details-marker {
  display: none;
}

.tools-main .learn-item summary::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 12px;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
  transition: transform var(--dur-faq) var(--ease);
  flex-shrink: 0;
}

.tools-main .learn-item[open] summary::before {
  transform: rotate(45deg);
}

.tools-main .learn-item summary:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.tools-main .learn-body {
  padding: 0 0 16px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.tools-main .learn-body p + p,
.tools-main .learn-body ul + p,
.tools-main .learn-body p + ul {
  margin-top: 10px;
}

.tools-main .learn-body ul {
  padding-left: 20px;
}

.tools-main .learn-body li {
  list-style: disc;
  margin-bottom: 4px;
}

.tools-main .learn-next-title {
  margin: 32px 0 12px;
  font-size: 17px;
}

.tools-main .next-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 560px) {
.tools-main .next-grid {
  grid-template-columns: minmax(0, 1fr);
}
}

.tools-main .next-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  transition: border-color var(--dur-card) var(--ease), transform var(--dur-card) var(--ease);
}

@media (hover:hover) {.tools-main .next-card:hover {
  border-color: var(--accent-border);
  transform: translateY(var(--lift-card));
}
}

.tools-main .next-card:focus-visible {
  border-radius: var(--radius-md);
}

.tools-main .next-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
}

.tools-main .next-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tools-main .next-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-text);
}

.tools-main .next-go svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-ctl) var(--ease);
}

@media (hover:hover) {.tools-main .next-card:hover .next-go svg {
  transform: translateX(var(--nudge));
}
}

/* Mobile and touch: text fields at 16px so iOS Safari does not zoom the page on focus.
   The Market Hours select is already 16px. Desktop sizes are unchanged. */
@media (max-width: 768px), (pointer: coarse) {
  .tools-main .field input[type="text"],
  .tools-main .field input[type="number"],
  .tools-main .field select,
  .tools-main .rule-text,
  .tools-main .rule-new {
    font-size: 16px;
  }
}

/* The Percent / Amount unit selects at 16px: trim their side padding a little and give the
   column enough room on narrow phones so "Percent (%)" is not cut off. The "Loss / Profit"
   rows are unchanged. */
@media (max-width: 768px), (pointer: coarse) {
  .tools-main .unit-row:not(.unit-first) select {
    padding-left: 10px;
    padding-right: 28px;
  }
}

@media (max-width: 420px) {
  .tools-main .unit-row:not(.unit-first) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 130px);
  }
}

/* Trading Psychology Check, narrowest phones: "Check Answers" is the longest button label and
   did not fit the two equal-width buttons (the label stuck out by 7px at 320px). The buttons
   now size to their label first and share what is left. Wording and other widths are unchanged. */
@media (max-width: 360px) {
  .tools-main #psy-form .calc-actions .btn {
    flex: 1 1 auto;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   v63: Trading Tools field surfaces and states, calculator cards, CTA card.
   Uses the --input-bg / --fade-line tokens defined in /style.css. Appended last.
   ========================================================================== */

/* Cards: a little more room inside, and the same soft shadow as the other cards */
.tools-main .calc-box { padding: 22px; }
.tools-main .mh-panel { padding: 22px; box-shadow: var(--card-shadow); }
@media (max-width: 430px) {
  .tools-main .calc-box,
  .tools-main .mh-panel { padding: 18px; }
}

/* Field surface */
.tools-main .field input[type="text"],
.tools-main .field input[type="number"],
.tools-main .field select,
.tools-main .mh-zone-select,
.tools-main .rule-text,
.tools-main .rule-new {
  background-color: var(--input-bg);
  transition: border-color var(--dur-ctl) var(--ease), background-color var(--dur-ctl) var(--ease);
}
.tools-main .seg-opt span { background: var(--input-bg); }

/* Hover: neutral surface change only, no blue border or glow (not on error, disabled or inert elements).
   The border keeps its normal colour; keyboard focus below is unchanged and still blue. */
@media (hover:hover) {.tools-main .field input[type="text"]:hover:not(:disabled):not(.field-error):not([readonly]),
.tools-main .field input[type="number"]:hover:not(:disabled):not(.field-error):not([readonly]),
.tools-main .field select:hover:not(:disabled):not(.field-error),
.tools-main .mh-zone-select:hover:not(:disabled),
.tools-main .rule-text:not(div):hover:not(:disabled):not(.field-error),
.tools-main .rule-new:hover:not(:disabled):not(.field-error) {
  background-color: var(--input-bg-hover);
}
}

/* Keyboard focus: blue border plus the same 2px outline everywhere */
.tools-main .field input:focus-visible,
.tools-main .field select:focus-visible,
.tools-main .mh-zone-select:focus-visible,
.tools-main .rule-text:focus-visible,
.tools-main .rule-new:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-color: var(--accent-border);
}
.tools-main .field input.field-error:focus-visible,
.tools-main .rule-text.field-error:focus-visible { border-color: var(--tl-warn); }

/* Error: red border and a faint red tint */
.tools-main .field input.field-error,
.tools-main .field input[aria-invalid="true"],
.tools-main .rule-text.field-error,
.tools-main .rule-text[aria-invalid="true"] {
  border-color: var(--tl-warn);
  background-color: var(--tl-warn-dim);
}

/* Disabled: faded, dashed, not-allowed. Read-only: full strength, dashed, no hover colour. */
.tools-main .field input:disabled,
.tools-main .field select:disabled,
.tools-main .mh-zone-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
  background-color: var(--tl-overlay-4);
}
.tools-main .field input[readonly] {
  background-color: var(--tl-overlay-4);
  border-style: dashed;
  cursor: default;
}

.tools-main .cta-desc { margin: 0 auto; }
.tools-main .cta-desc::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 28px;
  background: linear-gradient(90deg, transparent 0%, var(--fade-line) 50%, transparent 100%);
}
.tools-main .cta-actions { margin-top: 28px; }
@media (max-width: 430px) {
  .tools-main .cta-desc::after { margin-top: 24px; }
  .tools-main .cta-actions { margin-top: 24px; }
}

/* ---- Fail-closed forms: Position Size, Risk Reward, Daily Risk and Trading Psychology Check ----
   Each form ships with every control disabled and data-abt-state="loading". Its script enables the
   controls as the last step of a successful start and sets "ready". The load watch in /theme-init.js
   sets "failed" when a script does not load or run, and /tools/assets/js/calc-common sets
   "unsupported" when the browser has no BigInt. Until "ready" no control can be used, so the
   browser's own form submission can never start. The notices are in the HTML and CSS shows the one
   that matches the state; the <noscript> note covers JavaScript turned off. */
.tools-main .calc-gated .gate-notice {
  display: none;
  margin: 0;
}

.tools-main .calc-gated[data-abt-state="failed"] .gate-failed,
.tools-main .calc-gated[data-abt-state="unsupported"] .gate-unsupported {
  display: block;
}

.tools-main .calc-gated > noscript .tool-nojs {
  margin: 0;
}

/* The calculator form is a two-column grid: the notices span both columns. */
.tools-main .calc-layout.calc-gated > .gate-notice,
.tools-main .calc-layout.calc-gated > noscript {
  grid-column: 1 / -1;
}

/* While the script is starting, the disabled controls keep their normal look, so nothing flickers.
   When start-up fails, or JavaScript is off, the usual faded disabled look is shown. */
.js .tools-main .calc-gated[data-abt-state="loading"] .field input:disabled,
.js .tools-main .calc-gated[data-abt-state="loading"] .field select:disabled {
  opacity: 1;
  border-style: solid;
  background-color: var(--input-bg);
}

.js .tools-main .calc-gated[data-abt-state="loading"] .field input:disabled { cursor: text; }
.js .tools-main .calc-gated[data-abt-state="loading"] .field select:disabled { cursor: default; }

.js .tools-main .calc-gated[data-abt-state="loading"] .btn:disabled {
  opacity: 1;
  cursor: pointer;
}

.tools-main .calc-gated[data-abt-state="failed"] .btn:disabled,
.tools-main .calc-gated[data-abt-state="unsupported"] .btn:disabled,
.tools-main .calc-gated[data-abt-state="failed"] .seg-opt,
.tools-main .calc-gated[data-abt-state="unsupported"] .seg-opt,
html:not(.js) .tools-main .calc-gated[data-abt-state="loading"] .btn:disabled,
html:not(.js) .tools-main .calc-gated[data-abt-state="loading"] .seg-opt {
  opacity: 0.55;
  cursor: not-allowed;
}

/* v71 accessibility fix: light theme placeholder colour, 4.5:1 or better on normal and hover field surfaces. Dark theme unchanged. */
:root[data-theme=light] .tools-main .field input::placeholder { color: #5b6a80; opacity: 1; }

/* ==========================================================================
   v72: Forex Market Hours readability. Typography only: same fonts, same theme colours,
   same layout and the same countdown size. The clock, zone list and open/closed logic are untouched.
   ========================================================================== */
/* Clock line: "Current time: 9:59:30 AM • Asia / Karachi". One text node written by the script, so it is sized as a whole. */
.tools-main .mh-localtime { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
/* "Time zone" label sits between the clock line (16px) and the select (16px). */
.tools-main .mh-zone-label { font-size: 15px; line-height: 1.4; }
/* Session names a step larger than before (14.5px), still below nothing else: the countdown stays 16px bold. */
.tools-main .mh-city { font-size: 18px; line-height: 1.3; }
/* Open / Closed pill */
.tools-main .mh-badge { font-size: 13px; line-height: 1.4; padding: 3px 10px; }
.tools-main .mh-dot { width: 7px; height: 7px; }
/* "Opens at 9:00 PM local time" / "Closes at 4:00 PM local time" */
.tools-main .mh-at { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text-secondary); margin-top: 2px; }
.tools-main .mh-card { padding: 14px 16px; }
/* Shared overlap note */
.tools-main .mh-overlap-title { font-size: 15px; line-height: 1.4; }
.tools-main .mh-overlap-sub { font-size: 14px; line-height: 1.5; }
/* Phones: nothing in the card or head is smaller than 14px */
@media (max-width: 520px) {
  .tools-main .mh-badge { font-size: 14px; }
  .tools-main .mh-zone-label { font-size: 15px; }
}

/* ==========================================================================
   v73: Forex Market Hours session dots, same behaviour as the home page status dot.
   Open   = green, continuously blinking with the ring (keyframes status-blink / status-ring from style.css).
   Closed = red and static, no blink and no ring.
   "Checking" (before the clock script has run, or if it never does) stays neutral and static.
   The badge text (Open / Closed) is unchanged. The script already swaps .is-open / .is-closed on every tick,
   so the dots follow the sessions with no refresh.
   Reduced motion: the global rule in style.css ends these animations at once, so the dots stay static.
   ========================================================================== */
.tools-main .mh-dot { background: var(--tl-warn); }
.tools-main .mh-badge.is-open .mh-dot {
  background: var(--tl-positive);
  animation: 1.4s ease-in-out infinite status-blink;
  position: relative;
  --ring-scale: 2.71; /* (7px dot + 2 x 6px ring) / 7px */
}
.tools-main .mh-badge.is-open .mh-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #34d399; /* hollow, so it never paints over the dot itself */
  opacity: 0;
  pointer-events: none;
  animation: 1.4s ease-out infinite status-ring;
}
.tools-main .mh-panel:not([data-abt-state="ready"]) .mh-dot { background: currentColor; animation: none; }
.tools-main .mh-panel:not([data-abt-state="ready"]) .mh-dot::after { animation: none; }


/* ==========================================================================
   v76 motion: Trading Tools
   Tokens (--dur-*, --ease*, --lift-*) come from /style.css.
   ========================================================================== */

/* A field in the error state shows it immediately; only clearing it is eased. */
.tools-main .field-error {
  transition-duration: 0s;
}

/* "About this tool" boxes: open and close with the same 350ms as the FAQ.
   Native <details> keeps all of its behaviour; browsers without ::details-content
   or interpolate-size simply open and close instantly, as before. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .tools-main { interpolate-size: allow-keywords; }
    .tools-main .learn-item::details-content {
      height: 0;
      overflow: clip;
      opacity: 0;
      transition: height var(--dur-faq) var(--ease-panel), opacity var(--dur-faq) var(--ease-panel), content-visibility var(--dur-faq) allow-discrete;
    }
    .tools-main .learn-item[open]::details-content {
      height: auto;
      opacity: 1;
    }
  }
}

/* v112: Trading Tools hub groups, per-tool facts and the suggested order */
.tools-main .tool-group { margin-bottom: var(--space-8); }
.tools-main .tool-group:last-child { margin-bottom: 0; }
.tools-main .tool-group-title { font-size: clamp(22px, 2.6vw, 28px); text-align: center; margin-bottom: var(--space-2); }
.tools-main .tool-group-intro { color: var(--text-secondary); text-align: center; max-width: 640px; margin: 0 auto var(--space-5); font-size: var(--fs-body-lg); line-height: 1.7; }
.tools-main .tool-group .tool-grid { margin-bottom: var(--space-5); }
.tools-main .tool-facts { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); margin: 0 auto var(--space-4); max-width: 780px; box-shadow: var(--card-shadow); }
.tools-main .tool-facts h3 { font-size: var(--fs-card-h); margin-bottom: var(--space-3); }
.tools-main .tool-facts dl { display: grid; gap: var(--space-3); }
.tools-main .tool-facts dt { color: var(--text-tertiary-readable); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.tools-main .tool-facts dd { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.65; }
.tools-main .tool-flow .svc-steps { max-width: 780px; margin: 0 auto var(--space-5); }
.tools-main .tool-note { color: var(--text-tertiary-readable); max-width: 780px; margin: 0 auto; font-size: 14px; line-height: 1.7; text-align: center; }
@media (width <= 640px) { .tools-main .tool-facts { padding: var(--space-4); } }

/* In-text links inside the About boxes of the tool pages: visible, same treatment as .svc-block links. */
.tools-main .learn-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.tools-main .learn-body a:hover { text-decoration-thickness: 2px; }