/* ==========================================================================
   SwedenCoin x SWEDEN CODES skin (2026-10-06, owner: "similar style design as
   Sweden Code ... polish every button every corner").
   Loaded LAST on every coin page; <html data-sc-skin> scopes it, so removing the
   <link> (or the attribute) restores the previous look exactly.
   Language of the main site: midnight void, ice-white text, Chakra Petch display
   caps, Inter copy, JetBrains Mono figures, 16px chamfered panels, 7px controls,
   glass + gradients, CRT grain. The coin keeps its gold as its node accent.
   ========================================================================== */

/* ---------- fonts: the main site's self-hosted files (same origin) ---------- */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/chakra-petch-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/chakra-petch-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/chakra-petch-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/chakra-petch-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/chakra-petch-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/chakra-petch-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens: SWEDEN CODES values poured into the coin's variables ----------
   The coin pages are token driven (--ground, --surface, --gold ...). !important
   on the custom properties beats the light theme, the prefers-color-scheme block
   and any stored "light" choice: SWEDEN CODES is dark only (the toggle is hidden). */
@media screen{
  html[data-sc-skin]{
    --ground:#060A12 !important; --surface:#0B1220 !important; --raised:#0E1729 !important;
    --royal:#0F1A30 !important; --rule:#1B2840 !important; --rule-strong:#2C3E5E !important;
    --grid:#1B2840 !important; --gold:#E6B14B !important; --gold-hi:#F6D27C !important;
    --text:#EAF0F7 !important; --dim:#B9C6D8 !important; --muted:#8295AC !important;
    --up:#46D6A0 !important; --down:#FF5B66 !important; --warn:#F2B64A !important; --bad:#FF5B66 !important;
    --wash:rgba(230,177,75,.12) !important;
    color-scheme:dark;
  }
}
html[data-sc-skin]{
  --sc-void:#060A12; --sc-void-2:#03060C; --sc-panel:#0B1220; --sc-panel-2:#0E1729;
  --sc-grid:#1B2840; --sc-grid-soft:rgba(140,170,255,.06); --sc-line:rgba(160,190,235,.14); --sc-line-strong:rgba(190,215,250,.26);
  --sc-hot:#F7FAFF; --sc-white:#EAF0F7; --sc-body:#B9C6D8; --sc-gray:#8295AC; --sc-gray-dim:#5C6B82;
  --sc-brand:#E9F2FA; --sc-brand-glow:rgba(214,234,255,.45);
  --sc-coin:#E6B14B; --sc-coin-hi:#F6D27C; --sc-coin-deep:#B9862C; --sc-coin-glow:rgba(230,177,75,.42);
  --sc-ice:#4DA3FF; --sc-good:#46D6A0;
  --sc-display:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --sc-copy:"Inter SWC",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sc-mono:'JetBrains Mono','Cascadia Code',Consolas,ui-monospace,monospace;
  --sc-clip:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  --sc-clip-sm:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  --sc-glass:linear-gradient(180deg,rgba(16,26,46,.86),rgba(9,15,28,.86));
  --sc-ease:cubic-bezier(.2,.7,.2,1);
  background:var(--sc-void);
  scrollbar-color:var(--sc-grid) var(--sc-void-2);
}

/* ---------- page canvas: void + coin/ice glows + CRT grain (as the main site) ---------- */
html[data-sc-skin] body{
  background:
    radial-gradient(1100px 640px at 86% -6%, rgba(230,177,75,.11), transparent 62%),
    radial-gradient(960px 600px at -8% 14%, rgba(77,163,255,.085), transparent 62%),
    radial-gradient(900px 700px at 50% 112%, rgba(77,163,255,.06), transparent 60%),
    var(--sc-void) !important;
  color:var(--sc-white);
  font-family:var(--sc-copy);
  -webkit-font-smoothing:antialiased;
}
html[data-sc-skin] body::after{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.09;
}
html[data-sc-skin] ::selection{background:var(--sc-brand);color:var(--sc-void)}
html[data-sc-skin] :focus-visible{outline:2px solid var(--sc-brand);outline-offset:3px}
html[data-sc-skin] ::-webkit-scrollbar{width:10px;height:10px}
html[data-sc-skin] ::-webkit-scrollbar-track{background:var(--sc-void-2)}
html[data-sc-skin] ::-webkit-scrollbar-thumb{background:var(--sc-grid);border:2px solid var(--sc-void-2)}
html[data-sc-skin] ::-webkit-scrollbar-thumb:hover{background:var(--sc-gray-dim)}

/* ---------- type: display caps / Inter copy / mono figures ---------- */
html[data-sc-skin] :is(h1,h2,h3,h4){font-family:var(--sc-display);color:var(--sc-hot);font-style:normal}
html[data-sc-skin] h1{
  font-weight:700; text-transform:uppercase; letter-spacing:.025em; line-height:.98;
  font-size:clamp(2.2rem,5.1vw,4.35rem); text-wrap:balance;
}
html[data-sc-skin] h2{font-weight:700;letter-spacing:.015em;line-height:1.04;text-wrap:balance}
html[data-sc-skin] h3{font-weight:600;letter-spacing:.03em;line-height:1.15}
html[data-sc-skin] :is(h1,h2,h3) em{font-style:normal;color:var(--sc-coin);
  background:linear-gradient(180deg,var(--sc-coin-hi),var(--sc-coin) 70%,var(--sc-coin-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-sc-skin] main p{color:var(--sc-body)}
html[data-sc-skin] :is(strong,b){color:var(--sc-white)}
html[data-sc-skin] :is(.mono,code,kbd,samp,.tv,.value-number,.timeline-label,.royal-date){font-family:var(--sc-mono);font-variant-numeric:tabular-nums}

/* overlines = HUD micro-labels: mono caps, wide tracking, coin accent, square bullet */
html[data-sc-skin] :is(.overline,.eyebrow,.royal-kicker,.hero-label,.photo-viewer-overline,.nl-chapter-label,.section-meta,.living-chapter,.then-now-chapter){
  font-family:var(--sc-mono)!important; font-weight:400!important; font-size:.68rem!important;
  letter-spacing:.18em!important; text-transform:uppercase; color:var(--sc-coin)!important;
}
html[data-sc-skin] :is(.overline,.eyebrow,.royal-kicker)::before{
  content:""; display:inline-block; width:6px; height:6px; margin:0 .7em .12em 0;
  background:var(--sc-coin); box-shadow:0 0 10px var(--sc-coin-glow); vertical-align:middle;
}

/* ---------- header: the main site's topbar ---------- */
html[data-sc-skin] .site-header{
  background:rgba(5,9,17,.86)!important; border-bottom:1px solid var(--sc-line)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
html[data-sc-skin] .site-header::after{ /* tri-colour hairline: coin -> ice -> blue */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sc-coin) 18%,var(--sc-brand) 50%,var(--sc-ice) 82%,transparent);
  opacity:.55;
}
html[data-sc-skin] .site-header .brand{gap:11px}
html[data-sc-skin] .site-header .brand img{filter:drop-shadow(0 0 10px rgba(230,177,75,.35))}
html[data-sc-skin] .site-header .brand span{
  font-family:var(--sc-display)!important; font-weight:700!important; text-transform:uppercase;
  letter-spacing:.26em!important; font-size:.92rem!important; color:var(--sc-hot)!important;
}
html[data-sc-skin] .site-header .brand small{
  font-family:var(--sc-mono)!important; font-weight:400!important; letter-spacing:.14em!important;
  text-transform:uppercase; font-size:.56rem!important; color:var(--sc-gray)!important; margin-top:3px;
}
html[data-sc-skin] .navlinks a{
  font-family:var(--sc-display)!important; font-weight:600!important; font-size:.76rem!important;
  letter-spacing:.09em!important; text-transform:uppercase; color:var(--sc-body)!important;
  border:1px solid transparent!important; border-radius:7px!important; padding:9px 12px!important;
  transition:color .18s,border-color .18s,background-color .18s;
}
html[data-sc-skin] .navlinks a::after{display:none!important}
html[data-sc-skin] .navlinks a:hover{color:var(--sc-hot)!important;background:rgba(233,242,250,.05)!important;border-color:var(--sc-line)!important}
html[data-sc-skin] .navlinks a[aria-current]{
  color:var(--sc-coin-hi)!important; border-color:rgba(230,177,75,.45)!important;
  background:linear-gradient(180deg,rgba(230,177,75,.14),rgba(230,177,75,.05))!important;
  box-shadow:inset 0 -2px 0 var(--sc-coin), 0 0 18px -8px var(--sc-coin-glow);
}
html[data-sc-skin] .theme-toggle{display:none!important} /* SWEDEN CODES is dark-only */
html[data-sc-skin] .site-menu-toggle{
  font-family:var(--sc-display)!important; font-weight:600!important; text-transform:uppercase;
  letter-spacing:.1em!important; font-size:.74rem!important; color:var(--sc-hot)!important;
  border:1px solid var(--sc-line-strong)!important; border-radius:7px!important;
  background:rgba(11,18,32,.7)!important;
}

/* ---------- buttons: .cta language (display caps, 7px, sweep) ---------- */
html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview,.go,.future-card-market,.then-now-guide,.living-browse,.heritage-record-link,.royal-source-link,.story-text-link,.nl-back-top){
  font-family:var(--sc-display)!important; font-weight:600!important; text-transform:uppercase;
  letter-spacing:.12em!important; font-size:.78rem!important; font-style:normal;
}
html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview){
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; padding:14px 24px!important; border-radius:7px!important; overflow:hidden; isolation:isolate;
  color:var(--sc-hot)!important; border:1px solid var(--sc-line-strong)!important;
  background:rgba(11,18,32,.66)!important; box-shadow:none!important; text-decoration:none!important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .2s var(--sc-ease),border-color .2s,box-shadow .25s,color .2s,background-color .2s;
}
html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview)::before{ /* sweep */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .55s var(--sc-ease);
}
html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview):hover::before{transform:translateX(120%)}
html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview):hover{
  transform:translateY(-1px); border-color:var(--sc-coin)!important; color:var(--sc-coin-hi)!important;
  box-shadow:0 0 22px -6px var(--sc-coin-glow), inset 0 0 14px -8px var(--sc-coin-glow)!important;
}
html[data-sc-skin] .story-button.primary,
html[data-sc-skin] .official-add{
  color:#141006!important; border-color:rgba(255,226,160,.75)!important;
  background:linear-gradient(180deg,#F8D88A 0%,#E9B852 48%,#D29A35 100%)!important;
  box-shadow:0 10px 26px -12px rgba(230,177,75,.75), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(120,80,10,.35)!important;
  text-shadow:0 1px 0 rgba(255,240,200,.35);
}
html[data-sc-skin] .story-button.primary:hover,
html[data-sc-skin] .official-add:hover{
  color:#0E0A03!important; border-color:#FFE7B0!important;
  background:linear-gradient(180deg,#FFE29E 0%,#F2C462 50%,#DCA43C 100%)!important;
  box-shadow:0 14px 32px -12px rgba(230,177,75,.9), 0 0 0 1px rgba(255,214,120,.25), inset 0 1px 0 rgba(255,255,255,.55)!important;
}
html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview):active{transform:translateY(0)}
html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview) [aria-hidden="true"]{font-family:var(--sc-copy);letter-spacing:0;transition:transform .2s var(--sc-ease)}
html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview):hover [aria-hidden="true"]{transform:translate(2px,-1px)}

/* text-style actions: coin-gold caps + growing underline */
html[data-sc-skin] :is(.story-text-link,.future-card-market,.then-now-guide,.living-browse,.heritage-record-link,.royal-source-link,.card-action){
  color:var(--sc-coin)!important; text-decoration:none!important; background-image:linear-gradient(currentColor,currentColor)!important;
  background-repeat:no-repeat!important; background-size:0 1px!important; background-position:0 100%!important;
  transition:background-size .3s var(--sc-ease),color .2s; padding-bottom:2px;
}
html[data-sc-skin] :is(.story-text-link,.future-card-market,.then-now-guide,.living-browse,.heritage-record-link,.royal-source-link):hover,
html[data-sc-skin] a:hover .card-action{background-size:100% 1px!important;color:var(--sc-coin-hi)!important}
html[data-sc-skin] .photo-full-link{color:var(--sc-coin)!important}
html[data-sc-skin] .photo-full-link:hover{color:var(--sc-coin-hi)!important}
html[data-sc-skin] .nl-back-top{color:var(--sc-hot)!important;border-radius:7px!important;border:1px solid var(--sc-line-strong)!important;background:rgba(8,13,24,.82)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-sc-skin] .nl-back-top:hover{border-color:var(--sc-coin)!important;color:var(--sc-coin-hi)!important}
html[data-sc-skin] .card-action{font-family:var(--sc-display)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.12em!important;font-size:.72rem!important}

/* small square icon buttons (open image, viewer controls) */
html[data-sc-skin] :is(.then-now-open,.future-card-open,.living-open,.photo-viewer-close,.photo-viewer-previous,.photo-viewer-next){
  border-radius:7px!important; border:1px solid var(--sc-line-strong)!important; color:var(--sc-hot)!important;
  background:rgba(8,13,24,.72)!important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:border-color .2s,color .2s,box-shadow .2s,transform .2s;
}
html[data-sc-skin] :is(.then-now-open,.future-card-open,.living-open,.photo-viewer-close,.photo-viewer-previous,.photo-viewer-next):hover{
  border-color:var(--sc-coin)!important; color:var(--sc-coin-hi)!important; box-shadow:0 0 18px -6px var(--sc-coin-glow)!important;
}

/* ---------- panels: the 16px chamfer, hairline, glass ---------- */
html[data-sc-skin] :is(.directory-card,.story-block,.editorial-story,.then-now-panel,.future-card-feature,.living-scene,.tile,.band,.flow-step,.campaign-film,.campaign-feature,.page-directory .directory-heading + .directory-grid > a){
  border-radius:0!important; clip-path:var(--sc-clip);
}
html[data-sc-skin] :is(.directory-card,.story-block,.then-now-panel,.future-card-feature,.living-scene,.tile,.flow-step){
  background:var(--sc-glass)!important; border:1px solid var(--sc-grid)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 18px 40px -28px rgba(0,0,0,.8)!important;
  transition:border-color .25s,transform .25s var(--sc-ease),box-shadow .25s;
}
html[data-sc-skin] .directory-card:hover{
  border-color:rgba(230,177,75,.5)!important; transform:translateY(-2px);
  box-shadow:0 22px 46px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(230,177,75,.12), 0 0 30px -14px var(--sc-coin-glow)!important;
}
html[data-sc-skin] .directory-card img{transition:transform .6s var(--sc-ease),filter .4s}
html[data-sc-skin] .directory-card:hover img{transform:scale(1.03);filter:saturate(1.08) contrast(1.04)}

/* photos: hairline frame + corner brackets like the main site's HUD art */
html[data-sc-skin] :is(.hero-photo,.story-photo,.campaign-photo,.server-photo,.then-now-photo){border-radius:0!important;clip-path:var(--sc-clip)}
html[data-sc-skin] :is(.hero-photo,.story-photo,.campaign-photo,.server-photo,.then-now-photo) img{border-radius:0!important}

/* ---------- every big container: square corners (radius by role: 0 for panels) ---------- */
html[data-sc-skin] :is(.story-hero,.nl-chapter-nav,.site-next,main article,.step,.campaign-screen-header,.campaign-scope,
  .then-now-footer,.future-card-art,.heritage-now,.royal-modern,.mast,.coin-art,.market-chart,.backing,.split,.reserve-monitor,
  .official,.side,.notice,.infra-specs,.guide-art,.phone-guide-note,.campaign-vertical,.campaign-transcript,.campaign-principles,
  main figure,main section[class],.photo-viewer){border-radius:0!important}

/* chamfered glass panels (no popups inside, so clip-path is safe) */
html[data-sc-skin] :is(.story-hero,.site-next,.mast,.market-chart,.split,.reserve-monitor,.infra-specs,.campaign-principles,
  .then-now-footer,.heritage-now,.phone-guide-note,.campaign-vertical,.campaign-transcript,main article){
  clip-path:var(--sc-clip);
}
html[data-sc-skin] :is(.story-hero,.site-next,.mast,.market-chart,.split,.reserve-monitor,.infra-specs,.campaign-principles,
  .then-now-footer,.heritage-now,.phone-guide-note,.campaign-vertical,.campaign-transcript,.nl-chapter-nav,.side,.official){
  background:
    linear-gradient(rgba(230,177,75,.75),rgba(230,177,75,.75)) left top/14px 1px no-repeat,
    linear-gradient(rgba(230,177,75,.75),rgba(230,177,75,.75)) left top/1px 14px no-repeat,
    linear-gradient(rgba(190,215,250,.35),rgba(190,215,250,.35)) right bottom/14px 1px no-repeat,
    linear-gradient(rgba(190,215,250,.35),rgba(190,215,250,.35)) right bottom/1px 14px no-repeat,
    var(--sc-glass)!important;
  border:1px solid var(--sc-grid)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 24px 60px -36px rgba(0,0,0,.9)!important;
}
/* the trade panel and the official links hold popups / copy toasts: no clip, brackets only */
html[data-sc-skin] :is(.campaign-scope,.notice){clip-path:var(--sc-clip-sm)}
html[data-sc-skin] :is(main figure,.coin-art,.guide-art,.future-card-art){clip-path:var(--sc-clip)}

/* form controls inside panels: 7px, hairline, glass */
html[data-sc-skin] :is(.field,.tabs,.net,.pills){border-radius:7px!important}
html[data-sc-skin] :is(.field){background:rgba(4,8,15,.6)!important;border:1px solid var(--sc-grid)!important}
html[data-sc-skin] .field:focus-within{border-color:rgba(230,177,75,.6)!important;box-shadow:0 0 0 3px rgba(230,177,75,.12)!important}

/* ---------- home: hero details, identity strip, chapter tabs ---------- */
html[data-sc-skin] .hero-bottom span{font-family:var(--sc-mono)!important;font-size:.62rem!important;letter-spacing:.16em!important;color:var(--sc-gray)!important}
html[data-sc-skin] .hero-bottom span+span::before{content:"/";margin:0 .9em 0 0;color:var(--sc-gray-dim)}
html[data-sc-skin] .hero-label > span:first-child{background:var(--sc-coin)!important;box-shadow:0 0 0 3px rgba(230,177,75,.18),0 0 12px var(--sc-coin-glow)!important;border-radius:50%!important}
html[data-sc-skin] .identity-strip span{font-family:var(--sc-mono)!important;font-size:.6rem!important;letter-spacing:.18em!important;text-transform:uppercase;color:var(--sc-gray)!important}
html[data-sc-skin] .identity-strip strong{font-family:var(--sc-display)!important;font-weight:600!important;letter-spacing:.04em!important;font-size:1.05rem!important;color:var(--sc-hot)!important}
html[data-sc-skin] .identity-strip small{font-family:var(--sc-mono)!important;font-size:.66rem!important;letter-spacing:.1em!important;color:var(--sc-coin)!important}
html[data-sc-skin] .identity-strip>div+div{border-left-color:var(--sc-grid)!important}
html[data-sc-skin] .nl-chapter-link{
  font-family:var(--sc-display)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.09em!important;
  font-size:.72rem!important;color:var(--sc-body)!important;border-radius:7px!important;
}
html[data-sc-skin] :is(.nl-chapter-link:hover,.nl-chapter-link.is-current,.nl-chapter-link[aria-current="location"]){
  color:var(--sc-coin-hi)!important;background:linear-gradient(180deg,rgba(230,177,75,.14),rgba(230,177,75,.05))!important;
  border-color:rgba(230,177,75,.45)!important;box-shadow:inset 0 -2px 0 var(--sc-coin)!important;
}
html[data-sc-skin] .photo-caption{flex-wrap:wrap;gap:6px 16px}
html[data-sc-skin] .photo-caption span{font-family:var(--sc-display);font-weight:600;letter-spacing:.04em;color:var(--sc-hot)}
/* .photo-full-link is icon-only in some frames (text hidden by its own font-size):
   never force a size on it - only the face, colour and the 7px icon frame */
html[data-sc-skin] .photo-full-link{font-family:var(--sc-mono)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.12em}
html[data-sc-skin] .hero-photo .photo-full-link{border-radius:7px!important;border-color:var(--sc-line-strong)!important;background:rgba(8,13,24,.72)!important;background-image:none!important}
html[data-sc-skin] .hero-photo .photo-full-link:hover{border-color:var(--sc-coin)!important;box-shadow:0 0 18px -6px var(--sc-coin-glow)}

/* ---------- market: no empty right column ----------
   #data held every section in one column beside the trade panel, so everything below
   the panel left a 380px hole. #data becomes display:contents; the three sections that
   sit beside the panel stay in column 1 and the rest span the full width. Same
   breakpoint as the page's own two-column layout (min-width 1020px). */
@media (min-width:1020px){
  html[data-sc-skin] #market.market{row-gap:24px}
  html[data-sc-skin] #market > #data{display:contents}
  html[data-sc-skin] #market > #data > .band{display:none}
  html[data-sc-skin] #market > #data > *{margin-top:0!important;margin-bottom:0!important}
  html[data-sc-skin] #market > #data > :is(.monitor-tiles,.market-chart,#band1 + section){grid-column:1}
  html[data-sc-skin] #market > #swap-panel{grid-column:2;grid-row:1 / span 3}
  html[data-sc-skin] #market > #data > :is(#token,.reserve-monitor,.reserve-monitor + section,#official){grid-column:1 / -1}
  html[data-sc-skin] #official .official-links{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (min-width:1020px) and (max-width:1190px){
  html[data-sc-skin] #official .official-links{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* history: the coin image rides along the 2,200px public-record timeline instead of
   leaving a tall empty column under it */
@media (min-width:1020px){
  html[data-sc-skin] #history.history-block > figure.craft-photo{position:sticky;top:96px;align-self:start}
}

/* the two class-less market sections (liquidity overview, public records) join the panel set */
html[data-sc-skin] #data > section:not([class]):not([id]){
  border-radius:0!important; clip-path:var(--sc-clip);
  background:
    linear-gradient(rgba(230,177,75,.75),rgba(230,177,75,.75)) left top/14px 1px no-repeat,
    linear-gradient(rgba(230,177,75,.75),rgba(230,177,75,.75)) left top/1px 14px no-repeat,
    linear-gradient(rgba(190,215,250,.35),rgba(190,215,250,.35)) right bottom/14px 1px no-repeat,
    linear-gradient(rgba(190,215,250,.35),rgba(190,215,250,.35)) right bottom/1px 14px no-repeat,
    var(--sc-glass)!important;
  border:1px solid var(--sc-grid)!important;
}
/* market tiles: HUD caps labels over mono figures */
html[data-sc-skin] .tile .tk{font-family:var(--sc-display)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.1em!important;font-size:.7rem!important;color:var(--sc-body)!important}
html[data-sc-skin] .tile .tsub{color:var(--sc-gray)!important}
/* trade panel controls */
html[data-sc-skin] #trade-slot .tabs .tab{font-family:var(--sc-display)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.1em!important;font-size:.74rem!important;border-radius:6px!important}
html[data-sc-skin] #trade-slot .tabs .tab[aria-selected="true"]{color:var(--sc-coin-hi)!important;background:linear-gradient(180deg,rgba(230,177,75,.17),rgba(230,177,75,.06))!important;box-shadow:inset 0 -2px 0 var(--sc-coin)!important}
html[data-sc-skin] #trade-slot .mini{font-family:var(--sc-mono)!important;font-weight:400!important;border-radius:6px!important;transition:border-color .18s,color .18s}
html[data-sc-skin] #trade-slot .mini:hover{border-color:var(--sc-coin)!important;color:var(--sc-coin-hi)!important}
html[data-sc-skin] #go.go{
  border-radius:7px!important; min-height:48px; color:#141006!important; border:1px solid rgba(255,226,160,.75)!important;
  background:linear-gradient(180deg,#F8D88A 0%,#E9B852 48%,#D29A35 100%)!important;
  box-shadow:0 10px 26px -12px rgba(230,177,75,.75), inset 0 1px 0 rgba(255,255,255,.45)!important;
  transition:filter .2s,transform .2s var(--sc-ease),box-shadow .25s;
}
html[data-sc-skin] #go.go:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 14px 32px -12px rgba(230,177,75,.9), inset 0 1px 0 rgba(255,255,255,.55)!important}
html[data-sc-skin] #go.go:disabled{color:var(--sc-gray)!important;border-color:var(--sc-grid)!important;background:rgba(11,18,32,.72)!important;box-shadow:none!important;cursor:not-allowed}
html[data-sc-skin] #official .official-links > li{border-radius:0!important;clip-path:var(--sc-clip-sm);background:rgba(4,8,15,.5)!important;border:1px solid var(--sc-grid)!important;transition:border-color .2s,background-color .2s}
html[data-sc-skin] #official .official-links > li:hover{border-color:rgba(230,177,75,.5)!important;background:rgba(230,177,75,.06)!important}

/* ---------- footer: main site footer ---------- */
html[data-sc-skin] .site-footer{border-top:1px solid var(--sc-line)!important;position:relative}
html[data-sc-skin] .site-footer::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--sc-coin) 20%,var(--sc-brand) 50%,var(--sc-ice) 80%,transparent); opacity:.4;
}
html[data-sc-skin] .site-footer .footer-brand{
  font-family:var(--sc-display)!important; font-weight:700!important; text-transform:uppercase;
  letter-spacing:.28em!important; color:var(--sc-hot)!important;
}
html[data-sc-skin] .site-footer nav{column-gap:16px!important;row-gap:8px!important}
html[data-sc-skin] .site-footer nav a{
  font-family:var(--sc-display)!important; font-weight:600!important; text-transform:uppercase;
  letter-spacing:.07em!important; font-size:.66rem!important; color:var(--sc-body)!important;
  white-space:nowrap; transition:color .18s;
}
html[data-sc-skin] .site-footer nav a:hover{color:var(--sc-coin-hi)!important}
html[data-sc-skin] .site-footer .site-disclosure{color:var(--sc-gray)!important;font-size:.78rem!important}

/* ---------- SWEDEN CODES home link in the header (the main site's </> mark) ---------- */
html[data-sc-skin] .sc-home{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; margin-right:16px; padding:6px 12px 6px 6px;
  border:1px solid var(--sc-line); border-radius:7px; background:rgba(8,13,24,.55);
  font-family:var(--sc-mono); font-size:.6rem; letter-spacing:.16em; color:var(--sc-gray); text-decoration:none; white-space:nowrap;
  transition:border-color .18s,color .18s,background-color .18s;
}
html[data-sc-skin] .sc-home__mark{width:24px;height:24px;display:block;flex:none}
html[data-sc-skin] .sc-home:hover{border-color:var(--sc-line-strong);color:var(--sc-hot);background:rgba(233,242,250,.05)}
html[data-sc-skin] .sc-home + .brand{position:relative;padding-left:16px}
html[data-sc-skin] .sc-home + .brand::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--sc-line)}

/* ---------- live dot on the hero label ---------- */
@keyframes scPulse{0%{box-shadow:0 0 0 0 rgba(230,177,75,.55)}70%{box-shadow:0 0 0 7px rgba(230,177,75,0)}100%{box-shadow:0 0 0 0 rgba(230,177,75,0)}}
html[data-sc-skin] .hero-label > span:first-child{animation:scPulse 2.4s ease-out infinite}

/* ---------- phones ---------- */
@media (max-width:560px){
  html[data-sc-skin] .story-actions{flex-direction:column;align-items:stretch;gap:10px}
  html[data-sc-skin] .story-actions .story-button{width:100%}
  html[data-sc-skin] .sc-home{width:38px;height:38px;padding:0;gap:0;justify-content:center;margin-right:10px;justify-self:start}
  html[data-sc-skin] .sc-home span{display:none}
  html[data-sc-skin] .sc-home + .brand{padding-left:10px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html[data-sc-skin] *{transition:none!important}
  html[data-sc-skin] :is(.story-button,.official-add,.monitor-small-preview)::before{display:none}
  html[data-sc-skin] .hero-label > span:first-child{animation:none}
}
