/* Portal-only rules. Everything else comes from the shared /assets/site.css;
   do not redefine its classes here. */

/* The shared focus ring is the flag gold, which is faint on white. */
:focus-visible{outline-color:var(--ink);}
/* The dark closing band would swallow an ink ring (1:1): use paper there. The consent.css footer button
   sets a gold ring (0,2,0) that is 2.25:1 on white: this (0,3,0) rule wins whatever the load order. */
.closing :focus-visible{outline-color:var(--paper);}
.site-footer .link-button:focus-visible{outline-color:var(--ink);}

/* The trade index in the hero's second column: a boxed list of jump links with live counts.
   The offset shadow is a hard edge on purpose. */
nav.index{
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--radius);
  box-shadow:10px 10px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.index__bar{padding:0.9rem 1.25rem;font-weight:600;border-bottom:1px solid var(--line);}
.index__list li{border-top:1px solid var(--line);}
.index__list li:first-child{border-top:0;}
.index__list a{display:flex;justify-content:space-between;gap:1rem;padding:0.8rem 1.25rem;text-decoration:none;}
.index__list a:hover{text-decoration:underline;}
.index__count{color:var(--muted);font-variant-numeric:tabular-nums;}

/* Tool tiles: the button sits at the bottom so a row of tiles lines up, and the grid keeps its empty
   tracks (auto-fill, not the shared auto-fit) so a trade with one tool does not stretch it page-wide. */
.tiles--tools > li{display:flex;flex-direction:column;}
@media (min-width:44rem){.tiles--tools{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));}}
.tiles--tools .btn{margin-top:auto;align-self:flex-start;}
.tile__symbol{width:36px;height:36px;display:block;margin-bottom:0.7rem;}
.tile__label,.tile__facts{font-size:var(--step--1);color:var(--muted);}
.tile__facts{margin:0.8rem 0 1rem;}
.tile__facts li{border:0;border-radius:0;padding:0.45rem 0 0;margin-top:0.45rem;border-top:1px solid var(--line);}

/* A tool that is not live yet: name and headline only, so it reads as a placeholder. */
.chip--soon{background:var(--wash);color:var(--muted);border:1px solid var(--line);cursor:default;}
.chip--soon:hover{border-color:var(--line);}
.tile--soon{border-style:dashed;}

/* The shared stylesheet sets html{scroll-behavior:smooth}; the index jump links must not animate here. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto !important;}
}

/* The cookie policy names cookies in <code>; keep them in the page font, not the browser default. */
code{font:inherit;}