/* =========================
   ✿ PINKCREDIBLE — style.css
   ========================= */
@import url('https://fonts.cdnfonts.com/css/superbly');
   @import url('https://fonts.cdnfonts.com/css/kosugi-maru');
:root{
  --pink-0:#ffe9f5; /* page bg */
  --pink-1:#ffd4ec; /* light */
  --pink-2:#ffb0db; /* mid */
  --pink-3:#ff89c7; /* bold */
  --pink-4:#ff5aa9; /* pop */
  --ink:#5a2a45;
  --link:#b1007f;
  --link-visited:#6f0062;
  --glow:0 0 0 2px var(--pink-2),0 0 0 4px #fff,0 0 12px var(--pink-4);
}
/* ------- MUSIC PLAYER — Pinkcredible ------- */
#glenplayer02{
  position: fixed;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  z-index:99;
}
#glenplayer02{
  /* ...center styles above... */
  padding: 6px 10px;
  background: #fff;                  /* white */
  border: 2px ridge #ff89c7;         /* var(--pink-3) */
  border-radius: 10px;
  box-shadow: 0 0 0 2px #ffb0db, 0 0 0 4px #fff, 0 0 12px #ff5aa9; /* glow */
}
/* Size + layout (card-style) */
#glenplayer02{
  /* keep it centered — use the bottom-center block if you prefer */
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);

  width: 120px;   /* ← requested width */
  height: 80px;   /* ← requested height */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* cute sticker box */
  padding: 8px;
  background: #fff;
  border: 2px ridge #ff89c7;           /* var(--pink-3) */
  border-radius: 16px;
  box-shadow:
    0 0 0 2px #ffb0db,                 /* var(--pink-2) */
    0 0 0 4px #fff,
    0 0 16px #ff5aa9,                  /* var(--pink-4) */
    0 0 32px rgba(255, 90, 169, .35);
  z-index: 99;
  margin: 0;
}

/* stack items and remove old left margins */
.music-controls,
.sonata,
.labeltext{
  display: block;
  margin-left: 0 !important;
}

/* scale controls + note */
.music-controls{ width: 18px; font-size: 18px; }   /* play/pause size */
.sonata{ font-size: 20px; }                         /* music note */

/* title sizing */
.labeltext{
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* (optional) bottom-center instead of center-center
#glenplayer02{
  top: auto; bottom: 20px; left: 50%;
  transform: translateX(-50%);
}
*/

#glenplayer02 a{ text-decoration:none; }

#glenplayer02 > div{
  align-self:center; -webkit-align-self:center;
}

.music-controls{
  user-select:none; -webkit-user-select:none;
  width:13px; font-size:13px; cursor:pointer;
}

/* Play / Pause buttons */
.playy, .pausee{
  color: var(--pink-4); /* #ff5aa9 */
  text-shadow: 0 0 0.5px rgba(0,0,0,.15);
}
.pausee{ display:none; }

/* Music note icon */
.sonata{
  margin-left:10px;
  color: var(--pink-3); /* #ff89c7 */
}

/* Song title text */
.labeltext{
  margin-left:8px;
 font-family: 'superbly_10_01', sans-serif;
  font-size:9px;
  color: var(--ink); /* #5a2a45 */
}

/* Nice hovers/focus that match the theme */
#glenplayer02 a:hover .playy,
#glenplayer02 a:hover .pausee,
#glenplayer02 a:hover .sonata{
  color: var(--pink-4); /* #ff5aa9 */
}
#glenplayer02 a:hover .labeltext{
  color: #a10078; /* berry accent */
}
#glenplayer02 a:focus-visible{
  outline: 2px solid var(--pink-4); /* #ff5aa9 */
  outline-offset: 2px;
}



/* Subtle tiled vibe */
body{
  margin:0; padding:0; height:100%; max-height:100%;
 font-family: 'superbly_10_02', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10px 10px, #ffdff1 20%, transparent 21%) 0 0/24px 24px,
    radial-gradient(circle at 0 0, #fff 25%, transparent 26%) 0 0/24px 24px,
    var(--pink-0);
  overflow:hidden;
  line-height:1.5em;
  font-size:12px;
}

/* Frame layout */
main{
  position:fixed; top:64px; bottom:64px; left:220px; right:220px; overflow:auto;
  background:#fff; border:3px double var(--pink-3); box-shadow:var(--glow);
}
#header, #footer{
  position:absolute; left:0; width:100%; height:64px; overflow:hidden;
  background:linear-gradient(180deg, var(--pink-2), var(--pink-1));
  border-bottom:3px double var(--pink-3);
}
#header{ top:0; }
#footer{
  bottom:0; border-top:3px double var(--pink-3); border-bottom:none;
}
#left, #right{
  position:absolute; top:64px; bottom:64px; width:220px; overflow:auto;
}
#left{
  left:0;
  background:repeating-linear-gradient(45deg, var(--pink-1), var(--pink-1) 10px, var(--pink-0) 10px, var(--pink-0) 20px);
  border-right:3px dotted var(--pink-3);
}
#right{
  right:0;
  background:repeating-linear-gradient(-45deg, var(--pink-1), var(--pink-1) 10px, var(--pink-0) 10px, var(--pink-0) 20px);
  border-left:3px dotted var(--pink-3);
}

.innertube{ margin:12px; }

/* Pinkcredible textareas (global) */
textarea{
  width: 100%;
  min-height: 120px;
  padding: 8px 10px;

  background: #fff;
  color: var(--ink, #5a2a45);

  border: 1px solid var(--pink-3, #ff89c7);
  border-radius: 10px;

  box-shadow: 0 0 0 2px var(--pink-2, #ffb0db),
              0 0 0 4px #fff,
              0 0 12px var(--pink-4, #ff5aa9);

 font-family: 'superbly_10_02', sans-serif;
  resize: vertical;             /* change to none if you don’t want resizing */
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

textarea:focus{
  outline: 2px solid var(--pink-4, #ff5aa9);
  outline-offset: 2px;
  border-color: var(--pink-4, #ff5aa9);
  box-shadow: 0 0 0 2px var(--pink-3, #ff89c7),
              0 0 0 4px #fff,
              0 0 14px var(--pink-4, #ff5aa9);
}

textarea::placeholder{
  color: color-mix(in oklab, var(--ink, #5a2a45) 55%, #fff);
  opacity: .8;
}

/* Optional states */
textarea:disabled{
  background: var(--pink-1, #ffd4ec);
  color: color-mix(in oklab, var(--ink, #5a2a45) 60%, #fff);
  cursor: not-allowed;
  box-shadow: none;
}

/* Utility: remove resize handle if desired */
/* .no-resize textarea { resize: none; } */


h1, h2, h3{font-family: 'Kosugi Maru', sans-serif; letter-spacing:0.5px; }
h1{ color:#a10078; text-shadow:0 1px 0 #fff; font-size:22px; }
h2{ color:#bf0078; font-size:18px; }
p{ color:#5a2a45; }

/* pixel divider */
hr.pixel{
  border:0; height:8px;
  background:linear-gradient(90deg, #fff 0 10px, var(--pink-3) 10px 12px, #fff 12px 22px, var(--pink-2) 22px 24px) repeat-x;
  background-size:24px 8px; margin:10px 0;
}

/* nav */
nav ul{ list-style:none; padding:0; margin:0; }
nav li{ margin:6px 0; }
nav a{
  text-decoration:none; color:var(--link); background:#fff; padding:4px 8px;
  border:1px solid var(--pink-3); border-radius:6px; box-shadow:0 1px 0 #fff inset;
}
nav a:hover{ background:var(--pink-1); box-shadow:var(--glow); }
nav .badge{ display:inline-block; margin:6px 0; }

/* Tooltip */
.tooltip{ position:relative; display:inline-block; }
.tooltip__content{
  opacity:0; pointer-events:none; position:absolute; bottom:100%; left:50%;
  transform:translate(-50%, -8px); background:#ff8fca; color:#450b2d;
  border:2px solid var(--pink-4); border-radius:8px; padding:8px 10px; z-index:10;
  min-width:120px; text-align:center; box-shadow:var(--glow);
}
.tooltip__arrow{
  opacity:0; pointer-events:none; position:absolute; bottom:100%; left:50%;
  transform:translate(-50%, 8px); width:0; height:0;
  border:8px solid transparent; border-top-color:var(--pink-4);
}
.tooltip:hover .tooltip__content,
.tooltip:hover .tooltip__arrow{ opacity:1; }

/* Old-web fun */
marquee{ color:#7f0059; font-weight:bold; }
.blink{ animation:blink 1s steps(2, start) infinite; }
@keyframes blink{ to{ visibility:hidden; } }
.sticker{
  display:inline-block; padding:6px 10px; background:linear-gradient(#fff, var(--pink-1));
  border:2px ridge var(--pink-3); border-radius:10px; box-shadow:var(--glow);
}

/* Footer */
.footer-grid{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:100%; padding:0 14px;
}
.counter{ font-family:"Lucida Console", monospace; background:#fff; border:2px inset var(--pink-3); padding:4px 8px; }
.webring a{ margin-right:8px; }

/* Accessibility */
a{ outline-color:var(--pink-4); }
a:visited{ color:var(--link-visited); }

/* IE6 fossil (for the bit) */
* html body{ padding:64px 220px; }
* html main{ height:100%; width:100%; }
/* Pinkcredible theme for Malihu tooltip */
#s-m-t-tooltip{
  /* layout */
  max-width: 300px;
  z-index: 9999;
  margin: 0;                /* Malihu positions it; we don't need offsets */
  padding: 8px 10px;

  /* look & feel (match .tooltip__content) */
  background: #ff8fca;
 font-family: 'superbly_10_02', sans-serif;
  color: #450b2d;
  border: 2px solid var(--pink-4, #ff5aa9);
  border-radius: 8px;
  box-shadow: var(--glow, 0 0 0 2px #ffb0db, 0 0 0 4px #fff, 0 0 12px #ff5aa9);

  /* typography (match site) */
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;

  /* interactions */
  pointer-events: none;     /* tooltip shouldn't block hover/links below */
  opacity: 1;               /* Malihu handles visibility */
}

/* Arrow to match .tooltip__arrow (points down by default) */
#s-m-t-tooltip::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;             /* sits just under the box */
  width: 0; height: 0;
  border: 8px solid transparent;
  border-top-color: var(--pink-4, #ff5aa9); /* border color matches box border */
}

/* Optional: if your Malihu instance flips tooltip ABOVE the target,
   add a class toggle in JS or use this heuristic to flip the arrow. */
#s-m-t-tooltip.top::after{
  bottom: auto;
  top: -8px;
  border-top-color: transparent;
  border-bottom-color: var(--pink-4, #ff5aa9);
}

/* Smooth pop (keeps old-web vibe light) */
#s-m-t-tooltip {
  transition: transform 120ms ease, opacity 120ms ease;
  transform: translateY(0);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #s-m-t-tooltip { transition: none; }
}
/* =========================
   Pinkcredible Link Styles
   ========================= */

/* Base links */
a{
  color: var(--link, #b1007f);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
font-family: 'superbly_10_02', sans-serif;
  text-decoration-color: color-mix(in oklab, var(--pink-3, #ff89c7) 70%, #fff);
  transition: color .12s ease, text-decoration-color .12s ease, outline-color .12s ease;
  outline-color: var(--pink-4, #ff5aa9);
}
a:visited{
  color: var(--link-visited, #6f0062);
  text-decoration-color: color-mix(in oklab, var(--pink-2, #ffb0db) 70%, #fff);
}
a:hover{
  color: var(--pink-4, #ff5aa9);
  text-decoration-color: var(--pink-4, #ff5aa9);
}
a:active{
  color: #a10078;
}

/* Focus ring that matches the theme */
a:focus-visible{
  outline: 2px solid var(--pink-4, #ff5aa9);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--pink-2, #ffb0db) 40%, transparent);
}

/* Cute animated underline option (add .link-sparkle to any <a>) */
a.link-sparkle{
  position: relative;
  text-decoration: none; /* we’ll draw our own */
}
a.link-sparkle::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--pink-2), var(--pink-3), var(--pink-4));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
  border-radius: 2px;
}
a.link-sparkle:hover::after{ transform: scaleX(1); }

/* Button-style links (use on nav or callouts) */
a.pink-btn{
  display: inline-block;
  text-decoration: none;
  color: #450b2d;
  background: linear-gradient(#fff, var(--pink-1));
  border: 2px ridge var(--pink-3);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: var(--glow);
}
a.pink-btn:hover{
  background: linear-gradient(#fff, var(--pink-2));
  border-color: var(--pink-4);
}

/* Link colors inside .sticker or sidebars for contrast */
.sticker a{ color: #8a0068; }
.sticker a:hover{ color: var(--pink-4); }

/* 88×31 button wall: remove outlines on imgs, keep focus on wrapper */
a img{
  border: 0;
  outline: none;
}
a:focus img,
a:focus-visible img{ outline: none; }

/* Utility: soft-underline variant for long lists */
a.link-soft{
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--pink-2);
}
a.link-soft:hover{
  text-decoration-color: var(--pink-4);
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #ff89c7 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #ff89c7;
    border-radius: 10px;
    border: 3px solid #b1007f;
  }
  /* Pinkcredible list bullets (image) */
:root{
  --pink-bullet-url: url("assets/icons/pink-bullet.png");
  --bullet-size: 13px; /* your image size */
}

/* Opt-in class for any UL you want pink bullets on */
ul.pink-bullets{
  list-style: none;                 /* hide default bullets */
  padding-left: 1.25rem;            /* room for the image */
  margin: 0;
}

ul.pink-bullets > li{
  margin: 6px 0;
}

ul.pink-bullets > li::before{
  content: "";
  display: inline-block;
  width: var(--bullet-size);
  height: var(--bullet-size);
  background: var(--pink-bullet-url) no-repeat center / contain;
  margin-right: .45rem;
  transform: translateY(0.12em);    /* align with text baseline */
}

/* Optional: a global style you can apply anywhere via a utility */
.pink-bullet { list-style: none; }
.pink-bullet > li::before{
  content: "";
  display: inline-block;
  width: var(--bullet-size);
  height: var(--bullet-size);
  background: var(--pink-bullet-url) no-repeat center / contain;
  margin-right: .45rem;
  transform: translateY(0.12em);
}
/* ========== Pinkcredible Buttons ========== */
:root{
  --btn-bg: var(--pink-4, #ff5aa9);
  --btn-bg-hover: var(--pink-3, #ff89c7);
  --btn-text: #fff;
  --btn-ring: var(--pink-4, #ff5aa9);
}

/* Base button styles (anchor or button) */
a.btn, button.btn, .btn {
  display: inline-block;
  font: 700 10px/1 'superbly_10_02', sans-serif; /* ← 10px as requested */
  color: var(--btn-text);
  background: var(--btn-bg);
  text-decoration: none;
  padding: 6px 10px;
  border: 2px ridge var(--pink-3, #ff89c7);
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--pink-2, #ffb0db),
              0 0 0 4px #fff,
              0 0 12px var(--pink-4, #ff5aa9);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  vertical-align: middle;
}

/* Hover/active/focus */
a.btn:hover, button.btn:hover, .btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--pink-4, #ff5aa9);
}
a.btn:active, button.btn:active, .btn:active {
  transform: translateY(1px);
}
a.btn:focus-visible, button.btn:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--btn-ring);
  outline-offset: 2px;
}
/* Resources filter buttons */
.filter-btn{
  position: relative;
  display: inline-block;
  cursor: pointer;

  /* Pinkcredible look (standard size) */
  font: 700 12px/1 'superbly_10_02', sans-serif; /* standard web size */
  color: #fff;
  background: var(--pink-4, #ff5aa9);
  text-decoration: none;
  padding: 6px 10px;                /* snug so they fit */
  border: 2px ridge var(--pink-3, #ff89c7);
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--pink-2, #ffb0db),
              0 0 0 4px #fff,
              0 0 12px var(--pink-4, #ff5aa9);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  z-index: 1;                        /* no need for 9999 here */
}

.filter-btn:hover{
  background: var(--pink-3, #ff89c7);
  border-color: var(--pink-4, #ff5aa9);
}
.filter-btn:active{ transform: translateY(1px); }
.filter-btn:focus-visible{
  outline: 2px solid var(--pink-4, #ff5aa9);
  outline-offset: 2px;
}

/* Active state */
.filter-btn.is-active,
.filter-btn[aria-pressed="true"]{
  background: #ff3f98;              /* slightly deeper */
  border-color: #ff2c8f;
  box-shadow: 0 0 0 2px #ff89c7,
              0 0 0 4px #fff,
              0 0 14px #ff5aa9;
}

/* Copy buttons on resources page */
.copy-btn{
  position: relative;          /* enables z-index */
  z-index: 9999;               /* sits above textareas */
  display: inline-block;
  cursor: pointer;

  /* Pinkcredible button look (10px) */
  font: 700 10px/1 'superbly_10_02', sans-serif;
  color: #fff;
  background: var(--pink-4, #ff5aa9);
  text-decoration: none;
  padding: 6px 10px;
  border: 2px ridge var(--pink-3, #ff89c7);
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--pink-2, #ffb0db),
              0 0 0 4px #fff,
              0 0 12px var(--pink-4, #ff5aa9);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

/* Hover/active/focus */
.copy-btn:hover{
  background: var(--pink-3, #ff89c7);
  border-color: var(--pink-4, #ff5aa9);
}
.copy-btn:active{ transform: translateY(1px); }
.copy-btn:focus-visible{
  outline: 2px solid var(--pink-4, #ff5aa9);
  outline-offset: 2px;
}


/* Size variants (optional) */
.btn-xs { font-size: 9px;  padding: 4px 8px;  border-radius: 8px;  }
.btn-sm { font-size: 10px; padding: 6px 10px; border-radius: 10px; } /* default */
.btn-md { font-size: 12px; padding: 8px 12px; border-radius: 12px; }

/* If buttons live on dark/pink areas, keep white text crisp */
.btn * { color: inherit; }