/* /discord-bots/study-servers (stp-). Loaded after builtin_services.css
   (pa- tokens, hero type, buttons, closing band) and all_in_one.css (aio-
   sections, fact tiles, perks, steps, plans, FAQ, related links), both
   unchanged. Only what is new to this page lives here. */

.stp { --stp-ok: #34d399; --stp-bad: #f87171; --stp-blurple: #5865f2; --stp-grey: #4e5058; --stp-green: #248046; --stp-red: #da373c; --stp-gold: #f6c453; }

.stp-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stp-chev { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stp-av { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; color: #fff; background: hsl(var(--h, 220), 62%, 52%); }
.stp-hash { color: var(--yb-muted); font-weight: 700; margin-right: 0.2rem; }

/* Discord's button colours, the same in both themes as in the app. */
.stp-btn { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 500; line-height: 1; color: #fff; border-radius: 4px; padding: 0.42rem 0.66rem; white-space: nowrap; }
.stp-btn-primary { background: var(--stp-blurple); }
.stp-btn-secondary { background: var(--stp-grey); }
.stp-btn-success { background: var(--stp-green); }
.stp-btn-danger { background: var(--stp-red); }
.stp-btn-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }

/* A Discord window: channel header, one bot message, an embed. */
.stp-win { margin: 0; background: var(--yb-void); border: 1px solid var(--yb-border); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,0.28); min-width: 0; }
.stp-chan { display: flex; align-items: center; font-weight: 600; font-size: 0.84rem; color: var(--yb-text); padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--yb-border); background: var(--yb-overlay-soft); }
.stp-msg { padding: 0.7rem 0.85rem 0.85rem; min-width: 0; }
.stp-msg-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; margin-bottom: 0.45rem; }
.stp-msg-head b { font-weight: 600; color: var(--yb-text); }
.stp-msg-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--yb-depth); border: 1px solid var(--yb-gold-dim); overflow: hidden; flex: none; }
.stp-msg-av img { width: 76%; height: auto; display: block; }
.stp-embed { border-left: 4px solid var(--yb-border2); background: var(--yb-depth); border-radius: 4px; padding: 0.55rem 0.8rem 0.6rem; display: grid; gap: 0.4rem; }
.stp-embed-blurple { border-left-color: var(--stp-blurple); }
.stp-embed-gold { border-left-color: var(--stp-gold); }
.stp-embed-title { font-weight: 700; font-size: 0.9rem; color: var(--yb-text); }
.stp-embed-desc { font-size: 0.76rem; line-height: 1.5; color: var(--yb-muted); }
.stp-embed-foot { font-size: 0.62rem; color: var(--yb-muted2); }
.stp-ef { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.stp-ef-k { font-size: 0.7rem; font-weight: 700; color: var(--yb-text); }
.stp-ef-v { font-size: 0.74rem; line-height: 1.45; color: var(--yb-muted); overflow-wrap: anywhere; }
.stp-ef-v b { color: var(--yb-text); }
.stp-ts { color: var(--yb-text); background: var(--yb-overlay-soft); border-radius: 3px; padding: 0 3px; }
.stp-mention { color: #a5b4fc; background: rgba(88,101,242,0.16); border-radius: 3px; padding: 0 2px; }

/* ---- Hero stage: the study rooms, the session and the mascot ---- */
.stp-stage { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 540px; padding-top: 40px; }
.stp-bot { position: absolute; top: -40px; right: -18px; width: 250px; height: auto; z-index: 0; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.42)); }
.stp-side { position: relative; z-index: 1; width: 56%; background: var(--yb-void); border: 1px solid var(--yb-border); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,0.3); }
.stp-side-server { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 700; font-size: 0.88rem; color: var(--yb-text); padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--yb-border); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.stp-side-body { padding: 0.55rem 0.45rem 0.7rem; }
.stp-side-cat { display: flex; align-items: center; gap: 0.2rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--yb-muted); padding: 0.25rem 0.35rem 0.35rem; }
.stp-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.stp-ch { display: grid; gap: 0.1rem; }
.stp-ch-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.5rem; border-radius: 6px; font-size: 0.82rem; color: var(--yb-text); min-width: 0; }
.stp-ch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-ch-lobby .stp-ch-row { font-weight: 600; background: var(--yb-overlay-soft); }
.stp-ch-lobby .stp-ic { color: var(--stp-ok); }
.stp-ch-locked .stp-ic { color: var(--stp-bad); }
.stp-ch-cap { margin-left: 0.3rem; display: inline-flex; font-family: var(--mono); font-size: 0.6rem; border-radius: 4px; overflow: hidden; border: 1px solid var(--yb-border2); flex: none; }
.stp-ch-cap b { font-weight: 600; padding: 1px 4px; color: var(--yb-text); background: var(--yb-overlay-soft); }
.stp-ch-cap b + b { color: var(--yb-muted); background: transparent; }
.stp-ch-members { list-style: none; margin: 0 0 0.2rem; padding: 0 0 0 1.55rem; display: grid; gap: 0.12rem; }
.stp-ch-members:empty { display: none; }
.stp-ch-members li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.76rem; color: var(--yb-muted); padding: 0.08rem 0; }
.stp-ch-members .stp-av { width: 18px; height: 18px; font-size: 0.54rem; }
.stp-event { position: relative; z-index: 2; width: 66%; margin: -250px 0 0 auto; border-color: var(--yb-gold-dim); box-shadow: 0 0 0 1px rgba(59,130,246,0.1), 0 20px 50px rgba(37,99,235,0.22); }

/* Inline links in a section note. */
.stp .aio-sec-note a { color: var(--yb-cyan); text-decoration: underline; text-underline-offset: 2px; }

/* ---- 01 The life of a room ---- */
.stp-life { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; position: relative; }
.stp-life::before { content: ''; position: absolute; left: 12%; right: 12%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--yb-cyan-dim), var(--yb-gold-dim)); z-index: 0; }
.stp-life-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.stp-life-ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--yb-abyss); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); box-shadow: 0 0 0 6px var(--yb-void); margin-bottom: 0.45rem; }
.stp-life-ic svg { width: 22px; height: 22px; }
.stp-life-step:last-child .stp-life-ic { color: var(--stp-ok); border-color: rgba(52,211,153,0.45); }
.stp-life-n { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yb-muted2); }
.stp-life-t { font-family: var(--disp); font-weight: 700; font-size: 1.12rem; color: var(--yb-text); }
.stp-life-x { font-size: 0.88rem; line-height: 1.56; color: var(--yb-muted); }

/* ---- Cards ---- */
.stp-cards { display: grid; gap: 0.8rem; }
.stp-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stp-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stp-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stp-gap-top { margin-top: 1.6rem; }
.stp-card { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 1rem 1.05rem 1.1rem; }
.stp-card-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); margin-bottom: 0.2rem; }
.stp-card-ic svg { width: 17px; height: 17px; }
.stp-card-t { font-family: var(--disp); font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--yb-text); }
.stp-card-x { font-size: 0.86rem; line-height: 1.56; color: var(--yb-muted); }
.stp-subhead { margin: 1.8rem 0 0.9rem; color: var(--yb-text); }
.stp-split { align-items: start; }

/* ---- 04 The voice hours leaderboard ---- */
.stp-board { margin: 0; background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 12px; padding: 0.95rem 1rem 0.85rem; box-shadow: 0 22px 60px rgba(0,0,0,0.24); min-width: 0; }
.stp-board-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.stp-board-title { font-family: var(--disp); font-weight: 700; font-size: 1.05rem; color: var(--yb-text); }
.stp-board-days { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; color: #fff; background: var(--stp-blurple); border-radius: 5px; padding: 2px 7px; }
.stp-board-take { margin: 0 0 0.6rem; font-size: 0.8rem; line-height: 1.45; color: var(--yb-text); }
.stp-board-take b { font-weight: 700; }
.stp-board-chip { display: inline-flex; margin: 0.7rem 0 0.75rem; font-size: 0.74rem; font-weight: 600; color: var(--yb-text); background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); border-radius: 999px; padding: 0.22rem 0.7rem; }
.stp-board-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.stp-board-rows li { display: grid; grid-template-columns: 28px minmax(0, 0.9fr) minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.42rem 0.6rem; border-radius: 7px; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); }
.stp-board-top { background: rgba(246,196,83,0.08) !important; }
.stp-board-rank { text-align: center; font-size: 0.85rem; font-weight: 700; color: var(--yb-muted); font-family: var(--mono); }
.stp-board-top .stp-board-rank { color: var(--stp-gold); }
.stp-board-who { font-size: 0.86rem; font-weight: 600; color: var(--yb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-board-bar { display: block; height: 6px; border-radius: 4px; background: var(--yb-overlay-soft); overflow: hidden; }
.stp-board-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--yb-cyan-dim), var(--stp-gold)); }
.stp-board-v { font-family: var(--mono); font-size: 0.8rem; color: var(--yb-text); }
.stp-board-foot { font-size: 0.7rem; color: var(--yb-muted); margin-top: 0.7rem; text-align: right; }
.stp-board-foot code { font-family: var(--mono); font-size: 0.95em; padding: 0 4px; border-radius: 3px; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); color: var(--yb-text); }

/* ---- 06 Start Your Server templates ---- */
.stp-tpl { margin-top: 1.4rem; background: var(--yb-abyss); border: 1px dashed var(--yb-border2); border-radius: 12px; padding: 1rem 1.15rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem 1.4rem; align-items: center; }
.stp-tpl-lede { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--yb-muted); }
.stp-tpl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.stp-tpl-list li { display: grid; gap: 0.15rem; font-family: var(--disp); font-weight: 600; font-size: 0.95rem; color: var(--yb-text); background: var(--yb-void); border: 1px solid var(--yb-border); border-radius: 9px; padding: 0.6rem 0.8rem; }
.stp-tpl-x { font-family: inherit; font-weight: 400; font-size: 0.82rem; color: var(--yb-muted); }

/* ---- Closing band ---- */
.stp-close .aio-close-art { max-width: 300px; }

/* ---- Light theme ---- */
[data-theme="light"] .stp { --stp-ok: #0f9f6e; --stp-bad: #d63c3c; }
[data-theme="light"] .stp-win, [data-theme="light"] .stp-board, [data-theme="light"] .stp-side { box-shadow: 0 16px 40px rgba(30,41,80,0.12); }
[data-theme="light"] .stp-event { box-shadow: 0 0 0 1px rgba(37,99,235,0.08), 0 14px 34px rgba(37,99,235,0.14); }
[data-theme="light"] .stp-bot { filter: drop-shadow(0 14px 22px rgba(20,30,60,0.22)); }
[data-theme="light"] .stp-btn-secondary { background: #6d6f78; }
[data-theme="light"] .stp-mention { color: #4338ca; background: rgba(88,101,242,0.12); }
[data-theme="light"] .stp-life-ic { box-shadow: 0 0 0 6px var(--yb-abyss); }
[data-theme="light"] .stp-board-top { background: rgba(214,158,30,0.1) !important; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .stp-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .stp-stage { justify-self: center; max-width: 560px; }
  .stp-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp-life { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.4rem; }
  .stp-life::before { display: none; }
  .stp-tpl { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Mono labels: legible floor on a phone, nothing below ~10px. */
  .stp-life-n, .stp-side-cat, .stp-ch-cap, .stp-embed-foot, .stp-board-days { font-size: 0.64rem; }
}
@media (max-width: 560px) {
  .stp-stage { padding-top: 150px; }
  .stp-bot { width: 200px; top: -10px; right: -4px; }
  .stp-side { width: 88%; }
  .stp-event { width: 94%; margin: 14px 0 0 auto; }
  .stp-life, .stp-cards-4, .stp-cards-3, .stp-cards-2 { grid-template-columns: 1fr; }
  .stp-board-rows li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .stp-board-bar { display: none; }
}