/* ============================================================
   ProDesk Apps — Free Tools
   Layered on top of style.css; reuses its tokens.
   ============================================================ */

.tool-hero{
  padding:calc(var(--nav-h) + 72px) 0 44px;
  text-align:center;position:relative;overflow:hidden;
}
.tool-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(59,130,246,.10) 0%,transparent 70%);
}
.tool-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;margin:0 0 16px}
.tool-hero__desc{
  max-width:720px;margin:0 auto;font-size:1.075rem;line-height:1.7;color:var(--text-dim);
}
.tool-body{padding-bottom:96px}

/* ---------- Ad slots ---------- */
.ad-slot{display:block;margin:36px auto;min-height:0;text-align:center}

/* Collapsing an ad slot: max-height, never display:none, never height.
   ------------------------------------------------------------------
   Two constraints pull against each other here, and getting either one
   wrong costs real money.

   1. NOT display:none. A display:none slot has ZERO WIDTH, and AdSense
      measures the container's width before it will request anything.
      ads.js appends the <ins> and calls push() immediately, so a slot
      hidden that way failed with "No slot size for availableWidth=0" —
      the ad was never asked for, on every load, on every page. The
      failure was silent, because the slot then stayed hidden and left
      no gap for anyone to notice.

   2. NOT height:0 either. Once a unit is requested AdSense writes
      `height: auto !important` as an INLINE style on the container, so
      a stylesheet height is simply overridden and the slot reopens to
      ~304px of empty labelled space.

   max-height satisfies both: nothing overrides it, it takes the vertical
   space back, and it leaves the width intact so a slot requested lazily
   later is still measurable. Verified against a live unit. */
.ad-slot:empty{max-height:0;margin:0;overflow:hidden}

/* Set by ads.js when a unit comes back with no ad. Same technique and
   the same reason: the observer stays connected and drops this class if
   an ad arrives later, and that late fill needs a measurable width. */
.ad-slot--unfilled{max-height:0;margin:0;overflow:hidden}
.ad-slot::before{
  content:'Advertisement';display:block;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;
}
.ad-slot:empty::before{display:none}

/* ---------- Calculator shell ---------- */
.calc{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:clamp(20px,3vw,34px);box-shadow:var(--shadow-soft);
}
.calc__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,38px)}
.calc__grid--wide{grid-template-columns:1.3fr .7fr}
@media(max-width:860px){.calc__grid,.calc__grid--wide{grid-template-columns:1fr}}

.calc__inputs{display:flex;flex-direction:column;gap:16px}
.calc__section{border-top:1px solid var(--line);padding-top:18px;margin-top:4px}
.calc__section h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:600}

/* The [hidden] attribute is a UA rule, so ANY class that sets `display`
   (.field-row, .result, ...) silently overrides it and the element stays
   visible. This guard makes `hidden` actually hide. Do not remove: the
   instrument-type field switching and the conditional result panels both
   depend on it. */
[hidden]{display:none !important}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:.82rem;font-weight:600;color:var(--text-dim);letter-spacing:-.005em}
.field .opt{font-weight:400;color:var(--muted-2);font-size:.76rem}
.field input,.field select{
  font-family:var(--ff);font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--text);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:11px 13px;width:100%;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);
}
.field input::placeholder{color:var(--muted-2)}

/* ---------- Results ---------- */
.calc__results{display:flex;flex-direction:column;gap:10px}
.result{
  display:flex;flex-direction:column;gap:2px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 15px;
}
.result--primary{
  background:linear-gradient(160deg,rgba(59,130,246,.14),rgba(59,130,246,.04));
  border-color:rgba(59,130,246,.32);padding:16px 18px;
}
.result__label{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.result__value{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.result--primary .result__value{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.result__value--good{color:var(--green)}
.result__value--bad{color:var(--red)}
.result__sub{font-size:.82rem;color:var(--text-dim);margin-top:3px}
.calc__noscript{
  font-size:.9rem;color:#ffc470;background:rgba(255,196,112,.08);
  border:1px solid rgba(255,196,112,.28);border-radius:var(--radius-sm);
  padding:13px 15px;margin-bottom:18px;line-height:1.55;
}
.calc__warn{
  font-size:.85rem;color:#ffc470;background:rgba(255,196,112,.08);
  border:1px solid rgba(255,196,112,.28);border-radius:var(--radius-sm);padding:10px 13px;
}

/* ---------- Payoff chart ---------- */
.payoff{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.payoff figcaption{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:14px;
}
#op-chart svg{width:100%;height:auto;display:block}

/* ---------- Greeks ---------- */
.greeks{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.greeks h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:600}
.greeks__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.greek{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.greek__k{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.greek__v{font-size:1.12rem;font-weight:700}
.greeks__note{margin-top:12px;font-size:.85rem;color:var(--text-dim)}

/* ---------- Position rows (hedge tool) ---------- */
.positions{display:flex;flex-direction:column;gap:9px}
.positions__head,.position-row{display:grid;grid-template-columns:1.1fr 1.3fr .9fr 34px;gap:9px;align-items:center}
.positions__head span{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.position-row input{
  font-family:var(--ff);font-size:.95rem;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--text);background:var(--card);border:1px solid var(--line-2);
  border-radius:10px;padding:9px 11px;width:100%;
}
.position-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.position-row__del{
  background:transparent;border:1px solid var(--line-2);border-radius:9px;
  color:var(--muted);width:34px;height:34px;cursor:pointer;font-size:1.1rem;line-height:1;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.position-row__del:hover{color:var(--red);border-color:rgba(240,82,106,.5)}
@media(max-width:520px){
  .positions__head{display:none}
  .position-row{grid-template-columns:1fr 1fr 70px 34px}
}

/* ---------- Disclaimer ---------- */
.disclaimer{
  margin-top:18px;font-size:.83rem;line-height:1.65;color:var(--muted);
  border-left:2px solid var(--line-2);padding-left:14px;
}

/* ---------- Editorial ---------- */
.prose{max-width:760px;margin:56px auto 0}
.prose h2{font-size:clamp(1.5rem,3vw,2.05rem);margin:44px 0 16px;font-weight:700}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--text-dim);margin-bottom:16px;line-height:1.75}
.prose ul{margin:0 0 20px;padding-left:0}
.prose li{
  color:var(--text-dim);line-height:1.7;margin-bottom:9px;padding-left:20px;position:relative;
}
.prose li::before{content:'';position:absolute;left:4px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--blue-bright);border-bottom:1px solid rgba(91,155,255,.3)}
.prose a:hover{border-bottom-color:var(--blue-bright)}
/* Currently unused: every tool page had its formula section removed on
   2026-08-25. Kept because a future calculator may want a code block. */
.formula{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.88rem;line-height:1.7;color:var(--text);
  background:var(--panel-alt);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:16px 18px;margin:0 0 20px;overflow-x:auto;white-space:pre;
}

/* ---------- FAQ ---------- */
.faq details{
  border-bottom:1px solid var(--line);padding:16px 0;
}
.faq summary{
  cursor:pointer;font-weight:600;color:var(--text);font-size:1.03rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--blue);font-weight:400;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details p{margin:12px 0 0;color:var(--text-dim);line-height:1.75}

/* ---------- App CTA ---------- */
.tool-cta{
  margin:56px auto 0;max-width:760px;text-align:center;
  background:linear-gradient(160deg,var(--card-2),var(--panel));
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px);
}
.tool-cta h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}
.tool-cta p{color:var(--text-dim);max-width:560px;margin:0 auto 24px;line-height:1.7}
.tool-cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Hub grid ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.tool-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;transition:border-color .22s var(--ease),transform .22s var(--ease),background .22s var(--ease);
}
.tool-card:hover{border-color:rgba(59,130,246,.42);transform:translateY(-3px);background:var(--card-2)}
.tool-card__app{
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-bright);font-weight:700;
}
.tool-card h3{font-size:1.22rem;font-weight:700;letter-spacing:-.02em}
.tool-card p{color:var(--text-dim);font-size:.94rem;line-height:1.65;flex:1}
.tool-card__go{font-size:.86rem;font-weight:600;color:var(--blue-bright)}

/* Breadcrumb trail + related-tools block (v20) */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:18px;font-size:.84rem;color:var(--text-dim);
}
.crumbs a{color:var(--text-dim)}
.crumbs a:hover{color:var(--blue-bright)}
.crumbs span[aria-hidden]{opacity:.45}
.crumbs span[aria-current]{color:var(--text)}

.tool-related{margin-top:56px}
.tool-related h2{
  font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:20px;
}

/* Instrument picker (v21) */
.field-row--3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:700px){.field-row--3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.field-row--3{grid-template-columns:1fr}}
.field__hint{
  font-size:.78rem;line-height:1.55;color:var(--muted-2);margin:2px 0 0;
}
.field select optgroup{
  background:#13161a;color:var(--muted-2);
  font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;
}
.field select optgroup option{
  color:var(--text);font-weight:400;font-size:.92rem;
  text-transform:none;letter-spacing:0;
}

/* House promo banner above a tool's CTA (v25).
   Own-product ad, not an AdSense unit — no "Advertisement" label by design. */
.tool-promo{
  display:block;max-width:760px;margin:56px auto 0;
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--panel);
  transition:border-color .2s,transform .2s var(--ease);
}
.tool-promo:hover{border-color:rgba(59,130,246,.42);transform:translateY(-2px)}
.tool-promo:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px}
.tool-promo img{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:reduce){
  .tool-promo{transition:none}
  .tool-promo:hover{transform:none}
}

/* Borrowing power calculator (v31) — a denser input panel than the other
   tools, so it needs group headings and a three-up ratio row. */
.calc__grouphead{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin:18px 0 2px;
}
.calc__grouphead:first-child{margin-top:0}
.result-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.result-trio .result{padding:12px 14px}
.result-trio .result__value{font-size:1.25rem}
@media(max-width:520px){.result-trio{grid-template-columns:1fr}}
.result.is-warn{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.07)}
.result--target{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)}
.result--target.is-good{border-color:rgba(34,197,94,.42);background:rgba(34,197,94,.07)}
.calc__why{
  font-size:.88rem;line-height:1.65;color:var(--text-dim);margin:2px 0 0;
}
.calc__notes{margin-top:22px}
.calc__notes ul{margin:0;padding-left:0;list-style:none}
.calc__notes li{
  position:relative;padding-left:20px;margin-bottom:10px;
  font-size:.86rem;line-height:1.6;color:var(--text-dim);
}
.calc__notes li::before{
  content:'';position:absolute;left:4px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--blue);
}
.calc__notes li:last-child{margin-bottom:0}

/* Asset picker (v32) — icon tiles instead of a dropdown.
   Real radio inputs under the tiles, so arrow-key navigation, focus and
   screen-reader semantics all come for free; the input itself is hidden and
   the sibling span is what gets styled. */
.asset-picker{border:0;padding:0;margin:0 0 4px;min-width:0}
.asset-picker legend{
  font-size:.82rem;font-weight:600;color:var(--text-dim);
  letter-spacing:-.005em;padding:0;margin-bottom:9px;
}
.asset-picker__row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
@media(max-width:700px){.asset-picker__row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.asset-picker__row{grid-template-columns:repeat(2,1fr)}}

.asset-pick{display:block;cursor:pointer}
.asset-pick input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.asset-pick__face{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 6px 12px;border-radius:12px;text-align:center;
  background:var(--panel-alt);border:1px solid var(--line);
  color:var(--muted);
  transition:border-color .18s var(--ease),background .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease);
}
.asset-pick__icon{
  width:30px;height:30px;
  /* Amber by default. Not a token elsewhere in the system, so it is declared
     here rather than added to the global palette for one component. */
  color:#f5b83d;
  transition:color .18s var(--ease);
}
.asset-pick__label{font-size:.8rem;line-height:1.25;font-weight:500}

/* Hover and keyboard focus both go blue, so the pointer and the keyboard tell
   the same story. */
.asset-pick:hover .asset-pick__face,
.asset-pick input:focus-visible + .asset-pick__face{
  border-color:rgba(59,130,246,.45);background:var(--card);
  color:var(--text);transform:translateY(-2px);
}
.asset-pick:hover .asset-pick__icon,
.asset-pick input:focus-visible + .asset-pick__face .asset-pick__icon{
  color:var(--blue-bright);
}
.asset-pick input:focus-visible + .asset-pick__face{
  outline:2px solid var(--blue-bright);outline-offset:2px;
}

/* Selected stays blue. Pure CSS — no JS involvement, so the state survives
   even if the script fails to load. */
.asset-pick input:checked + .asset-pick__face{
  border-color:rgba(59,130,246,.55);background:var(--blue-soft);color:var(--text);
}
.asset-pick input:checked + .asset-pick__face .asset-pick__icon{color:var(--blue-bright)}

@media(prefers-reduced-motion:reduce){
  .asset-pick__face{transition:none}
  .asset-pick:hover .asset-pick__face{transform:none}
}

/* Country picker — which jurisdiction's lending rules the test runs under.
   Same construction as the asset picker: a real radio group, hidden input,
   the label's span carries the visible state so a failed script still shows
   the selection. */
.country-picker{border:0;padding:0;margin:0 0 4px;min-width:0}
.country-picker legend{
  font-size:.82rem;font-weight:600;color:var(--text-dim);
  letter-spacing:-.005em;padding:0;margin-bottom:9px;
}
.country-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
@media(max-width:820px){.country-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.country-row{grid-template-columns:repeat(2,1fr)}}

.country-pick{cursor:pointer;min-width:0}
.country-pick input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.country-pick span{
  display:block;text-align:center;padding:10px 8px;
  font-size:.86rem;font-weight:600;color:var(--text-dim);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.country-pick:hover span{border-color:var(--line-2);color:var(--text)}
.country-pick input:focus-visible + span{
  outline:2px solid var(--blue-bright);outline-offset:2px;
}
.country-pick input:checked + span{
  border-color:rgba(59,130,246,.55);background:var(--blue-soft);color:var(--text);
}

@media(prefers-reduced-motion:reduce){
  .country-pick span{transition:none}
}

/* The selected country's rules, sitting under the verdict rather than under
   the picker. It is the small print behind the number, so it belongs beside
   the number and not in the middle of the form. */
.calc__rules{
  font-size:.78rem;line-height:1.6;color:var(--muted-2);
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
}

/* The fallback sits below the five countries and reads as a different KIND of
   choice, not a sixth country. Full width, quieter, and its own label rather
   than a place name. */
.country-row--global{
  grid-template-columns:1fr;margin-top:8px;
}
.country-pick--global span{
  font-weight:500;font-size:.8rem;color:var(--muted-2);
  border-style:dashed;
}
.country-pick--global:hover span{color:var(--text-dim)}
.country-pick--global input:checked + span{
  border-style:solid;font-weight:600;
}