/* Home server site styles: the same translucent "glass" look as the music player.
   body.hub      the front page, login and server pages (photo + waves behind the glass)
   Every glass surface uses the same tint (--glass) and blur (28px, saturate 1.2), here and in the player.
   body.bedrock  the Minecraft page (night sky, pixel font, grass and dirt at the bottom) */

/* ---- Shared ------------------------------------------------------------------------ */

:root {
  --ink: #f4f5f8;
  --muted: rgb(244 245 248 / 0.68);
  --faint: rgb(244 245 248 / 0.14);
  --glass: rgb(18 18 26 / 0.46);
  --glass-strong: rgb(18 18 26 / 0.78);
  --inner: rgb(255 255 255 / 0.05);      /* surfaces inside a glass panel */
  --line: rgb(255 255 255 / 0.1);        /* dividers inside panels */
  --edge: rgb(255 255 255 / 0.2);        /* the outline of every glass surface and button */
  --btn: rgb(255 255 255 / 0.12);        /* button fill */
  --btn-hover: rgb(255 255 255 / 0.2);
  --radius: 24px;
  --ok: #72d86e;
  --bad: #ff7d71;
  --warn: #f2bb52;
  --unknown: #98a1b2;
  --focus: #9db8ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* No rubber-band "bounce" past the top or bottom of the page (on phones it showed the page's edge). */
html { min-height: 100%; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }

body {
  position: relative;
  margin: 0;
  overscroll-behavior: none;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #101014;
  color: var(--ink);
  font: 400 1.0625rem/1.5 "Atkinson Hyperlegible", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* The backdrop the glass panels blur. Sized to the *largest* screen height (lvh), so it doesn't
   stretch and jump when a phone's address bar slides away while scrolling. */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; }

[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
p[data-b]:empty { display: none; }

.glass, .card, .hub-panel, .panel, .hero, .login, .v-tile, .sheet-head, .sheet-box {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.3);
}

.wrap {
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0.5rem calc(1rem + env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
}
.wrap.narrow > * { max-width: 27rem; margin-left: auto; margin-right: auto; }

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  width: 100%; max-width: 68rem; margin: 0 auto;
  padding: calc(0.75rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 0.25rem calc(1rem + env(safe-area-inset-left));
  font-size: 0.95rem;
}
.home { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.25rem; color: var(--muted); text-decoration: none; }
.home:hover { color: var(--ink); }
.home svg { width: 1.25rem; height: 1.25rem; }
a.auth:hover { background: rgb(255 255 255 / 0.2); }
.auth { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0 auto; color: var(--muted); }
@media (max-width: 30rem) { .auth span { display: none; } }   /* phones: just the Log out button */
a.auth { padding: 0.45rem 0.9rem; border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--faint); }
.link-button {
  padding: 0.45rem 0.9rem; border: 0; border-radius: 999px;
  background: var(--faint); color: var(--ink);
  font: inherit; cursor: pointer;
}
.link-button:hover { background: rgb(255 255 255 / 0.2); }
a.link-button { text-decoration: none; }

.pill, .button, .copy, .action-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--faint); color: var(--ink);
  font: 700 0.95rem/1.2 "Atkinson Hyperlegible", system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
}
.pill:hover, .copy:hover, .action-button:hover { background: rgb(255 255 255 / 0.2); }
.button, .action-button.primary { border-color: transparent; background: var(--ink); color: #111; }
.button:hover, .action-button.primary:hover { background: #fff; }
.action-button:disabled { opacity: 0.45; cursor: wait; }

/* ---- Hub (front page, login, server) ------------------------------------------------- */

/* The photo (set with `sudo hub-photo <file>`), with the ripple dots (ripples.js) on top.
   Without a photo, the soft glow below shows instead. */
.hub-bg, .ripples { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; }
.hub-bg { background-size: cover; background-position: center; }
.ripples { width: 100%; pointer-events: none; }
/* The light under the waves: a tiny canvas (one pixel per dot), stretched smoothly over the screen,
   so crests brighten the photo and troughs darken it. */
.ripple-light {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1;
  pointer-events: none; image-rendering: auto;
}

body.hub::before {
  background:
    radial-gradient(42rem 32rem at 12% 8%, rgb(110 90 255 / 0.42), transparent 70%),
    radial-gradient(38rem 30rem at 92% 22%, rgb(40 190 200 / 0.32), transparent 70%),
    radial-gradient(46rem 32rem at 55% 100%, rgb(255 140 90 / 0.28), transparent 70%),
    #101014;
}

.hub-title {
  margin: 2rem 0 1.5rem;
  font: 700 clamp(2.4rem, 7vw, 3.5rem)/1.05 "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Phones: one column, in the page's own order (Bedrock, Java, Music, Videos, Assistant, Wiki, Health,
   Server, Backups). From tablet width: a grid arranged per role, every card the same height.
     admin  (3×3): Bedrock, Java, Wiki / Music, Videos, Assistant / Health, Server, Backups
     member and logged out (3×2): Bedrock, Java, Health / Music, Videos, Assistant                   */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 1rem; }
@media (min-width: 46rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards[data-role="admin"] .card-bedrock { order: 1; }
  .cards[data-role="admin"] .card-java    { order: 2; }
  .cards[data-role="admin"] .card-wiki    { order: 3; }
  .cards[data-role="admin"] .card-music   { order: 4; }
  .cards[data-role="admin"] .card-video   { order: 5; }
  .cards[data-role="admin"] .card-ai      { order: 6; }
  .cards[data-role="admin"] .card-health  { order: 7; }
  .cards[data-role="admin"] .card-server  { order: 8; }
  .cards[data-role="admin"] .card-backups { order: 9; }
  .cards[data-role="member"] .card-bedrock,.cards[data-role="public"] .card-bedrock{ order: 1; }
  .cards[data-role="member"] .card-java,   .cards[data-role="public"] .card-java   { order: 2; }
  .cards[data-role="member"] .card-health, .cards[data-role="public"] .card-health { order: 3; }
  .cards[data-role="member"] .card-music,  .cards[data-role="public"] .card-music  { order: 4; }
  .cards[data-role="member"] .card-video,  .cards[data-role="public"] .card-video  { order: 5; }
  .cards[data-role="member"] .card-ai,     .cards[data-role="public"] .card-ai     { order: 6; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 11.5rem;
  padding: calc(20px + 1rem) 1.4rem 1.4rem;   /* 20px band on top for each card's signature */
  overflow: hidden;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
a.card:hover { border-color: rgb(255 255 255 / 0.25); transform: translateY(-2px); }
.card::before { content: ""; position: absolute; inset: 0 0 auto; }   /* each service's signature strip */

.card-title { margin: 0 0 0.6rem; font: 700 1.4rem/1.2 "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif; }
.card-text, .card-meta { margin: 0; color: var(--muted); }
.card-text { max-width: 30ch; }

.status { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.35rem; font-weight: 700; }
.dot { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--unknown); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.06); }
[data-b-state="online"] .dot, [data-s-state="ok"] .dot, [data-bk-state="ok"] .dot { background: var(--ok); }
[data-b-state="offline"] .dot { background: var(--bad); }
[data-s-state="problem"] .dot, [data-bk-state="problem"] .dot { background: var(--warn); }
.update, .problem-text { color: var(--warn); }
.card-lock { margin-top: auto; padding-top: 0.6rem; font-size: 0.9rem; }
.update { font-weight: 700; }

/* Card signatures */
.card-bedrock::before { height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='16' fill='%234e3622'/%3E%3Crect x='0' y='0' width='16' height='4' fill='%233c6a22'/%3E%3Crect x='0' y='4' width='3' height='1' fill='%233c6a22'/%3E%3Crect x='6' y='4' width='2' height='2' fill='%233c6a22'/%3E%3Crect x='11' y='4' width='3' height='1' fill='%233c6a22'/%3E%3Crect x='15' y='4' width='1' height='2' fill='%233c6a22'/%3E%3Crect x='2' y='0' width='2' height='1' fill='%234f8a2e'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%234f8a2e'/%3E%3Crect x='13' y='0' width='1' height='1' fill='%234f8a2e'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%232f541b'/%3E%3Crect x='12' y='2' width='2' height='1' fill='%232f541b'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232f541b'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%233a2818'/%3E%3Crect x='9' y='9' width='2' height='1' fill='%233a2818'/%3E%3Crect x='13' y='12' width='1' height='1' fill='%233a2818'/%3E%3Crect x='5' y='13' width='1' height='1' fill='%233a2818'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%233a2818'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%23604431'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23604431'/%3E%3Crect x='2' y='14' width='2' height='1' fill='%23604431'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%23604431'/%3E%3Crect x='10' y='14' width='1' height='1' fill='%233a2818'/%3E%3C/svg%3E") 0 0 / 40px 40px repeat-x; image-rendering: pixelated; }
.card-bedrock .card-title { font-family: "Pixelify Sans", "Atkinson Hyperlegible", system-ui, sans-serif; font-weight: 600; }
.card-bedrock .dot { border-radius: 0; }
.card-java::before { height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='16' fill='%233b3d45'/%3E%3Crect x='0' y='4' width='16' height='1' fill='%2333353c'/%3E%3Crect x='0' y='9' width='16' height='1' fill='%2333353c'/%3E%3Crect x='0' y='14' width='16' height='1' fill='%2333353c'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%234a4c55'/%3E%3Crect x='9' y='2' width='3' height='1' fill='%234a4c55'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%234a4c55'/%3E%3Crect x='12' y='7' width='2' height='1' fill='%234a4c55'/%3E%3Crect x='1' y='11' width='3' height='1' fill='%234a4c55'/%3E%3Crect x='10' y='12' width='2' height='1' fill='%234a4c55'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%235fe3d6'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%233fb8ad'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%235fe3d6'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%235fe3d6'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%233fb8ad'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%235fe3d6'/%3E%3Crect x='14' y='13' width='1' height='1' fill='%233fb8ad'/%3E%3C/svg%3E") 0 0 / 40px 40px repeat-x; image-rendering: pixelated; }
.card-java .card-title { font-family: "Pixelify Sans", "Atkinson Hyperlegible", system-ui, sans-serif; font-weight: 600; }
.card-java .dot { border-radius: 0; }
[data-j-state="online"] .dot { background: var(--ok); }
[data-j-state="offline"] .dot { background: var(--bad); }

.card-ai::before {
  height: 12px; top: 4px; left: 1.4rem; right: 1.4rem;
  background: radial-gradient(circle, #f0a6ff 0 3px, transparent 3.5px) 0 50% / 16px 12px repeat-x;
  -webkit-mask: linear-gradient(90deg, #000, #000 60%, transparent); mask: linear-gradient(90deg, #000, #000 60%, transparent);
}

/* Videos: a strip of film */
.card-video::before {
  height: 18px; top: 1px;
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgb(240 240 248 / 0.85) 5px 11px, transparent 11px 16px) 0 3px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5px, rgb(240 240 248 / 0.85) 5px 11px, transparent 11px 16px) 0 11px / 100% 4px no-repeat,
    #23232e;
}

.card-wiki::before {
  height: 8px; top: 6px;
  background: linear-gradient(#c8cfdc 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(#c8cfdc 0 0) 0 100% / 100% 1px no-repeat;
}
.card-wiki .card-title { font-family: "Gentium Book Plus", Georgia, serif; font-size: 1.55rem; }
.card-music::before { height: 14px; top: 3px; left: 1.4rem; right: 1.4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14'%3E%3Crect x='0' y='8' width='2.5' height='6' rx='0.6' fill='%23b28cff'/%3E%3Crect x='4' y='3' width='2.5' height='11' rx='0.6' fill='%23b28cff'/%3E%3Crect x='8' y='6' width='2.5' height='8' rx='0.6' fill='%23b28cff'/%3E%3Crect x='12' y='0' width='2.5' height='14' rx='0.6' fill='%23b28cff'/%3E%3Crect x='16' y='9' width='2.5' height='5' rx='0.6' fill='%23b28cff'/%3E%3Crect x='20' y='5' width='2.5' height='9' rx='0.6' fill='%23b28cff'/%3E%3Crect x='24' y='1' width='2.5' height='13' rx='0.6' fill='%23b28cff'/%3E%3Crect x='28' y='7' width='2.5' height='7' rx='0.6' fill='%23b28cff'/%3E%3Crect x='32' y='4' width='2.5' height='10' rx='0.6' fill='%23b28cff'/%3E%3Crect x='36' y='10' width='2.5' height='4' rx='0.6' fill='%23b28cff'/%3E%3Crect x='40' y='2' width='2.5' height='12' rx='0.6' fill='%23b28cff'/%3E%3Crect x='44' y='6' width='2.5' height='8' rx='0.6' fill='%23b28cff'/%3E%3Crect x='48' y='8' width='2.5' height='6' rx='0.6' fill='%23b28cff'/%3E%3Crect x='52' y='0' width='2.5' height='14' rx='0.6' fill='%23b28cff'/%3E%3C/svg%3E") 0 0 / 56px 14px repeat-x; opacity: 0.9; }
.card-server::before {
  height: 10px; top: 5px; left: 1.4rem; right: 1.4rem;
  background: repeating-linear-gradient(90deg, #66718a 0 14px, transparent 14px 20px);
  border-radius: 3px;
}
.card-health::before { height: 16px; top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M0 9H44l3-6 4 11 3-8 3 3h63' fill='none' stroke='%234fd1c5' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 120px 16px repeat-x; }
.card-backups::before {
  height: 13px; top: 3px; left: 1.4rem; right: 1.4rem;
  background:
    linear-gradient(#7ea6ff 0 0) 0 0 / 100% 2px no-repeat,
    linear-gradient(#7ea6ff 0 0) 8px 5px / calc(100% - 16px) 2px no-repeat,
    linear-gradient(#7ea6ff 0 0) 16px 10px / calc(100% - 32px) 2px no-repeat;
  opacity: 0.85;
}

.meters {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.45rem 0.75rem;
  margin: 0.6rem 0 0;
  color: var(--muted); font-size: 0.95rem;
}
.meter { height: 6px; overflow: hidden; border-radius: 3px; background: var(--faint); }
.meter > span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ink); transition: width 0.4s ease-out; }
.meter.high > span { background: var(--warn); }
.num { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* Login */
.login { display: grid; gap: 1rem; padding: 1.5rem; }
.login label { display: grid; gap: 0.35rem; font-size: 0.95rem; font-weight: 700; }
.login input {
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--inner); color: var(--ink);
  font: 400 1.0625rem/1.4 "Atkinson Hyperlegible", system-ui, sans-serif;
}
.login input:focus-visible { outline-offset: 1px; }
.login .button { justify-self: start; padding: 0.65rem 1.5rem; font-size: 1rem; }
.login-note { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.92rem; }
.form-error { margin: 0; padding: 0.7rem 0.95rem; border-radius: 14px; background: rgb(255 90 80 / 0.16); color: #ffd4ce; }

/* Server page */
.hub-panel { margin: 0 0 1rem; padding: 1.3rem 1.4rem 1.4rem; }
.hub-panel h2 { margin: 0 0 0.9rem; font: 700 1.4rem/1.2 "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif; }
.hub-lede { margin: 0 0 1rem; }
.hub-panel > .card-meta { margin: 0 0 0.75rem; }
.hub-panel code { font: 0.92em ui-monospace, "DejaVu Sans Mono", monospace; }

.meters.big { gap: 0.75rem 1rem; font-size: 1rem; }
.meters.big .meter { height: 10px; border-radius: 5px; }
.meters.big .meter > span { border-radius: 5px; }

.hub-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 1.25rem 0 0; }
@media (max-width: 40rem) { .hub-facts { grid-template-columns: 1fr; } }
.hub-facts div { padding: 0.75rem 1rem; border-radius: 16px; background: var(--inner); }
.hub-facts dt { color: var(--muted); font-size: 0.9rem; }
.hub-facts dd { margin: 0; font-weight: 700; }

.checks, .backup-list { margin: 0; padding: 0; list-style: none; border-radius: 16px; background: var(--inner); overflow: hidden; }
.checks li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.1rem 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
}
.checks li:first-child, .backup-list li:first-child { border-top: 0; }
.checks .dot { align-self: center; }
.checks .name, .checks .value { font-weight: 700; }
.checks .desc { grid-column: 2 / -1; color: var(--muted); font-size: 0.92rem; }
.checks [data-state="ok"] .dot { background: var(--ok); }
.checks [data-state="problem"] .dot { background: var(--warn); }
.checks [data-state="problem"] .value { color: var(--warn); }

.timeline { position: relative; height: 2.25rem; overflow: hidden; border-radius: 12px; background: var(--faint); }
.seg { position: absolute; top: 0; bottom: 0; cursor: pointer; }
.seg.problem, .seg.offline, .seg.nodata { z-index: 1; }   /* short outages stay on top of the green */
.timeline-info { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.92rem; min-height: 1.4em; }
.seg.ok, .legend .ok { background: var(--ok); }
.seg.problem, .legend .problem { background: var(--warn); }
.seg.offline, .legend .offline { background: var(--bad); }
.seg.nodata, .legend .nodata { background: var(--unknown); }
.timeline-axis { display: flex; justify-content: space-between; margin: 0.35rem 0 0; color: var(--muted); font-size: 0.88rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }
.legend i { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: -1px; }

.backup-list { margin-bottom: 1rem; }
.backup-list li { display: grid; grid-template-columns: 11rem 5.5rem 5.5rem 1fr auto; gap: 0.15rem 1rem; padding: 0.6rem 1rem; border-top: 1px solid var(--line); }
.backup-list .game { font-weight: 700; }
.backup-list .num { white-space: nowrap; }
.backup-list .game.bedrock { color: #7ed957; }   /* grass */
.backup-list .game.java { color: #5fe3d6; }      /* diamond */
.backup-list time { color: var(--muted); font-variant-numeric: tabular-nums; }
.backup-list .kept .kind { color: #9cb8ff; font-weight: 700; }
.backup-list .daily .kind { color: var(--muted); }
.backup-list .empty { display: block; color: var(--muted); }

.events { margin: 0; padding: 0; list-style: none; }
.events li { display: grid; grid-template-columns: 11rem 1fr; gap: 0.15rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.events li:first-child { border-top: 0; }
.events time { color: var(--muted); font-variant-numeric: tabular-nums; }
.events .offline span { color: var(--bad); }
.events .problem span { color: var(--warn); }
.events .empty { display: block; color: var(--muted); }

@media (max-width: 34rem) {
  .events li { grid-template-columns: 1fr; }
  .backup-list li { grid-template-columns: auto auto 1fr auto; column-gap: 0.7rem; }
  .backup-list time { grid-column: 1 / -1; }
}

/* ---- Bedrock page ---------------------------------------------------------------------- */

body.bedrock {
  --grass: #7ed957;
  --redstone: #ff7366;
  --dirt-ink: #f3e6d6;
}
/* The sky (sky.js sets the colours and moves the sun and moon with the time of day). */
.sky {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden;
  background: linear-gradient(var(--sky-top, #070b1e), var(--sky-mid, #111a40) 58%, var(--sky-low, #1d2a52));
}
.sky-stars {
  position: absolute; inset: 0;
  opacity: var(--sky-stars, 1);
  background:
    radial-gradient(2px 2px at 8% 14%, #fff, transparent 70%), radial-gradient(2px 2px at 19% 31%, #fff, transparent 70%),
    radial-gradient(1.5px 1.5px at 27% 8%, #fff, transparent 70%), radial-gradient(2px 2px at 36% 22%, #fff, transparent 70%),
    radial-gradient(1.5px 1.5px at 44% 40%, #fff, transparent 70%), radial-gradient(2px 2px at 53% 12%, #fff, transparent 70%),
    radial-gradient(1.5px 1.5px at 61% 29%, #fff, transparent 70%), radial-gradient(2px 2px at 69% 6%, #fff, transparent 70%),
    radial-gradient(1.5px 1.5px at 77% 35%, #fff, transparent 70%), radial-gradient(2px 2px at 85% 18%, #fff, transparent 70%),
    radial-gradient(1.5px 1.5px at 93% 27%, #fff, transparent 70%), radial-gradient(2px 2px at 4% 44%, #fff, transparent 70%),
    radial-gradient(1.5px 1.5px at 31% 52%, #fff, transparent 70%), radial-gradient(2px 2px at 72% 49%, #fff, transparent 70%);
}
.sky-glow {
  position: absolute; inset: 0;
  opacity: var(--sky-glow, 0);
  background: radial-gradient(80% 45% at 50% 100%, rgb(255 170 90 / 0.55), transparent 70%);
}
/* Square, like in Minecraft. */
.sky-sun, .sky-moon {
  position: absolute; top: 0; left: 0; opacity: 0;
  will-change: transform;
}
.sky-sun {
  width: clamp(48px, 8vmin, 84px); aspect-ratio: 1;
  background: #fff4c2;
  box-shadow: 0 0 0 6px rgb(255 236 160 / 0.35), 0 0 70px 20px rgb(255 214 120 / 0.45);
}
.sky-moon {
  width: clamp(40px, 6.5vmin, 68px); aspect-ratio: 1;
  background:
    linear-gradient(#c9cfdb 0 0) 22% 28% / 22% 22% no-repeat,
    linear-gradient(#c9cfdb 0 0) 66% 60% / 16% 16% no-repeat,
    linear-gradient(#c9cfdb 0 0) 34% 72% / 12% 12% no-repeat,
    #e9edf5;
  box-shadow: 0 0 50px 12px rgb(210 220 255 / 0.25);
}

/* Single-column pages: the "‹ Home" link, the Log out button and the panels share one width. */
body.bedrock .wrap, body.bedrock .topbar { max-width: 46rem; }
.layout-page .wrap, .layout-page .topbar { max-width: 54rem; }

body.bedrock h1, body.bedrock h2, .big-status, .facts dd {
  font-family: "Pixelify Sans", "Atkinson Hyperlegible", system-ui, sans-serif;
  font-weight: 600;
}

.page-title { margin: 1.25rem 0 0.75rem; font-size: 1.4rem; line-height: 1.2; }
.hero { margin: 0 0 1rem; padding: 1.5rem 1.5rem 1.4rem; }
.big-status { margin: 0 0 0.8rem; font-size: clamp(3.25rem, 13vw, 5.75rem); line-height: 1; color: var(--unknown); }
[data-b-state="online"]  .big-status, [data-j-state="online"]  .big-status { color: var(--grass); }
[data-b-state="offline"] .big-status, [data-j-state="offline"] .big-status { color: var(--redstone); }
.hero-top { display: flex; align-items: center; gap: 1rem; }
.server-icon { width: 64px; height: 64px; border-radius: 12px; image-rendering: pixelated; flex: none; }
.motd { margin-top: 0.35rem; font-style: italic; }
.lede { margin: 0 0 0.25rem; font-size: 1.3rem; line-height: 1.45; }
.sub { margin: 0; color: var(--muted); }

.panel { margin: 0 0 1rem; padding: 1.3rem 1.4rem 1.4rem; }
.panel h2 { margin: 0 0 0.9rem; font-size: 1.4rem; line-height: 1.2; }
.panel p { margin: 0 0 1rem; }
.panel p:last-child { margin-bottom: 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0 0 1rem; }
.facts.join { grid-template-columns: 1fr; }
.facts.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 34rem) { .facts.stack { grid-template-columns: 1fr; } }   /* phones: one box per row */
@media (min-width: 44rem) { .facts.join { grid-template-columns: minmax(0, 1fr) auto; } }
.facts div { padding: 0.75rem 1rem 0.85rem; border-radius: 16px; background: var(--inner); }
.facts dt { color: var(--muted); font-size: 0.9rem; }
.facts dd { margin: 0; font-size: 1.7rem; line-height: 1.25; }
.facts dd.plain {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.9rem;
  font: 700 1.15rem/1.4 "Atkinson Hyperlegible", system-ui, sans-serif;
}
.addr, .facts dd { overflow-wrap: anywhere; }
/* "How to join": the address and port in the pixel font too (the Copy buttons stay in the plain font). */
.facts.join dd.plain { font: 600 1.4rem/1.3 "Pixelify Sans", "Atkinson Hyperlegible", system-ui, sans-serif; }
.facts.join dd.plain .copy { font: 700 0.9rem/1.2 "Atkinson Hyperlegible", system-ui, sans-serif; }
.copy { padding: 0.35rem 0.9rem; font-size: 0.9rem; }

.note { margin: 0; }
.note.warn { padding: 0.75rem 1rem; border-radius: 16px; background: rgb(242 187 82 / 0.14); color: #ffe2a8; }
.small { color: var(--muted); font-size: 0.95rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.75rem; }
.action-button.primary { background: var(--grass); color: #0d1f07; }
.action-button.primary:hover { background: #95e874; }
.action-status { color: var(--ink); }

.hero .map-open { margin-top: 1.1rem; }
.map-open svg { width: 1.15rem; height: 1.15rem; }
.panel code { font: 0.92em ui-monospace, "DejaVu Sans Mono", monospace; }

/* World map overlay: the whole screen, with a slim glass bar on top. */
.map-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: #0a0f24;
}
.map-bar {
  display: flex; align-items: center; gap: 0.75rem;
  margin: calc(0.5rem + env(safe-area-inset-top)) calc(0.5rem + env(safe-area-inset-right)) 0.5rem calc(0.5rem + env(safe-area-inset-left));
  padding: 0.35rem 0.35rem 0.35rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass-strong);
}
.map-bar h2 { margin: 0; font-size: 1.15rem; }
.map-when { flex: 1; color: var(--muted); font-size: 0.9rem; }
.map-close {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--faint); color: var(--ink);
  cursor: pointer;
}
.map-close:hover { background: rgb(255 255 255 / 0.2); }
.map-close svg { width: 1.3rem; height: 1.3rem; }
.map-frame { flex: 1; display: flex; min-height: 0; }
.map-tool {
  display: inline-flex; align-items: center; gap: 0.35rem;
  height: 44px; padding: 0 0.9rem;
  border: 0; border-radius: 999px;
  background: var(--faint); color: var(--ink);
  font: 700 0.92rem/1 "Atkinson Hyperlegible", system-ui, sans-serif;
  cursor: pointer;
}
.map-tool:hover, .map-tool[aria-expanded="true"] { background: rgb(255 255 255 / 0.22); }
.map-tool svg { width: 1.15rem; height: 1.15rem; }

/* Markers panel: on the right on wide screens, a sheet at the bottom on phones. */
.marker-panel {
  position: absolute; z-index: 2;
  top: calc(4.25rem + env(safe-area-inset-top)); right: calc(0.5rem + env(safe-area-inset-right)); bottom: calc(0.5rem + env(safe-area-inset-bottom));
  width: min(24rem, calc(100% - 1rem));
  overflow-y: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2);
}
@media (max-width: 40rem) {
  .marker-panel { top: auto; left: calc(0.5rem + env(safe-area-inset-left)); width: auto; max-height: 62%; }
  .map-tool span { display: none; }
  .map-tool { width: 44px; padding: 0; justify-content: center; }
}
.marker-panel h3 { margin: 0 0 0.7rem; font-size: 1.05rem; }
.marker-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; margin-bottom: 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.marker-form label { display: grid; gap: 0.25rem; font-size: 0.9rem; font-weight: 700; }
.marker-form input:not([type="checkbox"]) {
  width: 100%; min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--inner); color: var(--ink);
  font: 400 1rem/1.3 "Atkinson Hyperlegible", system-ui, sans-serif;
}
.marker-xz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
.marker-buttons { display: flex; gap: 0.5rem; align-items: center; }
.marker-who { margin: -0.3rem 0 0; color: var(--muted); font-size: 0.88rem; }
.marker-form.is-shared .marker-who { color: #9be39a; }
.marker-hint { margin: 0; color: var(--muted); font-size: 0.85rem; }

.marker-form .switch { display: flex; align-items: center; gap: 0.65rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--faint); transition: background 0.15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: var(--ink); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--grass); }
.switch input:checked + .switch-track::after { transform: translateX(1.1rem); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }

.marker-list { margin: 0; padding: 0; list-style: none; }
.marker-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.65rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.marker-list li:first-child { border-top: 0; }
.marker-list li.marker-empty { display: block; color: var(--muted); }
.marker-icon svg { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; color: var(--muted); }
.marker-list .shared .marker-icon svg { color: #9be39a; }
.marker-list .private .marker-icon svg { color: #ffd36b; }
.marker-info { display: grid; min-width: 0; }
.marker-info strong { overflow-wrap: anywhere; }
.marker-info span { color: var(--muted); font-size: 0.88rem; }
.marker-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.marker-actions .pill { padding: 0.3rem 0.8rem; font-size: 0.85rem; }

.map-frame iframe { flex: 1; width: 100%; border: 0; background: #000; }



@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Assistant ------------------------------------------------------------------------- */
.ai-models { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.ai-models .pill span { color: var(--muted); font-weight: 400; }
.ai-models .pill[aria-pressed="true"] { background: var(--ink); color: #111; }
.ai-models .pill[aria-pressed="true"] span { color: #444; }
.ai-start .button { margin-top: 0.25rem; }
.ai-progress { margin-top: 1rem; }
.ai-progress .bar { height: 6px; border-radius: 3px; background: var(--faint); overflow: hidden; }
.ai-progress .bar span { display: block; width: 0; height: 100%; background: var(--ink); transition: width 0.3s; }
.ai-start .form-error { margin-top: 1rem; }
.ai-messages { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; max-height: 60svh; overflow-y: auto; }
.ai-msg { display: flex; }
.ai-msg.user { justify-content: flex-end; }
.ai-bubble { max-width: 85%; padding: 0.65rem 0.9rem; border-radius: 18px; background: var(--inner); line-height: 1.45; overflow-wrap: anywhere; }
.ai-msg.user .ai-bubble { background: var(--ink); color: #111; border-bottom-right-radius: 6px; }
.ai-msg.assistant .ai-bubble { border-bottom-left-radius: 6px; }
.ai-bubble code { font: 0.92em ui-monospace, "DejaVu Sans Mono", monospace; padding: 0.05rem 0.3rem; border-radius: 6px; background: rgb(255 255 255 / 0.08); }
.ai-ask { display: flex; gap: 0.5rem; }
.ai-ask input {
  flex: 1; min-width: 0;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--inner); color: var(--ink);
  font: 400 1.0625rem/1.4 "Atkinson Hyperlegible", system-ui, sans-serif;
}
.ai-ask .button:disabled { opacity: 0.5; cursor: wait; }

/* ---- Videos ------------------------------------------------------------------------------ */
/* Heart / check on a tile's picture */
.v-flags { position: absolute; top: 0.4rem; left: 0.4rem; display: flex; gap: 0.3rem; }
.v-flags > span { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: rgb(0 0 0 / 0.65); }
.v-flags svg { width: 0.9rem; height: 0.9rem; }
.v-flags .watched svg { color: var(--ok); }
.v-flags .liked svg { color: var(--bad); }

/* Search: a full-screen overlay like the music player's */
/* below the player (z-index 50), so a video opened from the results plays on top of them */
.sheet.v-search { z-index: 40; }
.v-search-inner { max-width: 64rem; }
.v-searchbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem; border-radius: 999px; background: var(--glass-strong);
}
.v-search-icon svg { display: block; width: 1.4rem; height: 1.4rem; color: var(--muted); }
.v-searchbar input {
  flex: 1; min-width: 0; padding: 0.6rem 0.4rem;
  border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 1.1rem; outline: none;
}
.v-searchbar input::-webkit-search-cancel-button { display: none; }
@media (max-width: 24rem) { .v-searchbar input { font-size: 1rem; } }   /* small phones: the placeholder stays whole */
.v-filter-toggle { position: relative; }
.v-filter-toggle[aria-expanded="true"] { background: rgb(255 255 255 / 0.12); }
.v-dot { position: absolute; top: 9px; right: 9px; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--focus); }
.v-filters { margin-top: 0.75rem; padding: 0.4rem 1.1rem 1.1rem; }
.v-group { margin-top: 0.85rem; }
.v-group h3 { margin: 0 0 0.4rem; color: var(--muted); font: 700 0.9rem/1.3 "Atkinson Hyperlegible", system-ui, sans-serif; }
.v-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.v-chip {
  min-height: 2.25rem; padding: 0.3rem 0.9rem;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--btn); color: var(--ink);
  font: 700 0.9rem/1.2 "Atkinson Hyperlegible", system-ui, sans-serif; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.v-chip:hover { background: var(--btn-hover); border-color: rgb(255 255 255 / 0.32); }
.v-chip[aria-pressed="true"] { background: var(--ink); color: #111; border-color: rgb(255 255 255 / 0.5); }
.v-filters > .btn { margin-top: 1.1rem; min-height: 2.25rem; padding: 0 1rem; }
.v-note { margin: 0.75rem 0.5rem 0.75rem; color: var(--muted); font-size: 0.9rem; }
.v-note:empty { display: none; }
.v-search .v-grid { margin-top: 0.25rem; }
/* Inside the overlay (already blurred) nothing blurs again: stacked blurs, with hundreds of tiles at once,
   made phones run out of memory and reload the page. */
.v-search .v-tile, .v-search .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.v-search .v-tile { background: rgb(255 255 255 / 0.07); }
.v-search .v-searchbar, .v-search .v-filters { background: var(--glass-strong); }
.v-more { display: flex; justify-content: center; margin: 1.25rem 0 0; }
.v-more .btn { min-height: 44px; padding: 0 1.25rem; }
.v-section { margin: 0 0 1.75rem; }
.v-section h2 { margin: 0 0 0.75rem; font: 700 1.3rem/1.2 "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif; }
.v-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }
.v-tile {
  display: grid; gap: 0.35rem; padding: 0.55rem 0.55rem 0.8rem;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass); color: var(--ink); text-align: left;
  -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2);
  font: inherit; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.v-tile:hover { border-color: rgb(255 255 255 / 0.25); transform: translateY(-2px); }
.v-tile.not-ready { opacity: 0.75; }
.v-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03)); }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-badge { position: absolute; top: 0.4rem; right: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 6px; background: rgb(0 0 0 / 0.65); font-size: 0.75rem; font-weight: 700; }
.v-badge + .v-badge { right: 3rem; }
.v-state { position: absolute; inset: auto 0 0; padding: 0.4rem 0.6rem; background: rgb(0 0 0 / 0.65); font-size: 0.85rem; }
.v-progress { position: absolute; inset: auto 0 0; height: 4px; background: rgb(255 255 255 / 0.25); }
.v-progress span { display: block; height: 100%; background: #ff5f57; }
.v-title { padding: 0 0.25rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.v-meta { padding: 0 0.25rem; color: var(--muted); font-size: 0.9rem; }

.v-manage-body { flex: 1; overflow-y: auto; padding: 0.5rem calc(0.75rem + env(safe-area-inset-right)) 2rem calc(0.75rem + env(safe-area-inset-left)); }
.v-manage-body .hub-panel { max-width: 46rem; margin: 0 auto 1rem; }
.v-drop {
  display: grid; justify-items: center; gap: 0.35rem; padding: 1.4rem 1rem;
  border: 2px dashed rgb(255 255 255 / 0.25); border-radius: 18px; text-align: center; cursor: pointer;
}
.v-drop:hover, .v-drop.over { border-color: var(--ink); background: rgb(255 255 255 / 0.05); }
.v-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.v-drop small { max-width: 34rem; color: var(--muted); }
.v-uploads { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.v-uploads li { padding: 0.55rem 0.25rem; border-top: 1px solid var(--line); }
.v-uploads li:first-child { border-top: 0; }
.v-uploads .name { display: block; font-weight: 700; overflow-wrap: anywhere; }
.v-uploads .state { display: block; color: var(--muted); font-size: 0.9rem; }
.v-uploads .error .state { color: #ff9b8f; }
.v-uploads .done .state { color: #9be39a; }
.v-uploads .bar { height: 4px; margin: 0.35rem 0 0.2rem; border-radius: 2px; background: var(--faint); overflow: hidden; }
.v-uploads .bar span { display: block; width: 0; height: 100%; background: var(--ink); }
.v-toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
  padding: 0.65rem 1.1rem; border-radius: 999px; background: var(--glass-strong); font-size: 0.95rem;
}

/* ---- One button style everywhere ---------------------------------------------------------
   Same finish as the music player's buttons: a light fill and a slightly brighter outline.
   Icon buttons (like the player's search and manage icons) stay plain icons. */
.btn, .pill, .copy, .action-button, .link-button, .map-close, .map-tool, a.auth {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  border: 1px solid var(--edge); border-radius: 999px;
  background: var(--btn); color: var(--ink);
  font: 700 0.92rem/1.2 "Atkinson Hyperlegible", system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn { padding: 0.45rem 0.95rem; }
.btn:hover, .pill:hover, .copy:hover, .action-button:hover, .link-button:hover, .map-close:hover, .map-tool:hover, a.auth:hover {
  background: var(--btn-hover); border-color: rgb(255 255 255 / 0.32);
}
.btn svg { width: 1.15rem; height: 1.15rem; }
.button, .action-button.primary { border-color: rgb(255 255 255 / 0.5); }   /* filled buttons keep their colour */
/* Top bars: every control is a button with the same finish. Icon-only ones (Home, page tools) are
   circles; ones with words (Log in, Log out) are pills. */
.topbar .icon-btn { border: 1px solid var(--edge); background: var(--btn); transition: background 0.15s, border-color 0.15s; }
.topbar .icon-btn:hover { background: var(--btn-hover); border-color: rgb(255 255 255 / 0.32); }
.topbar .icon-btn svg { width: 1.3rem; height: 1.3rem; }
.top-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.auth { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); }

/* Plain icon buttons, as in the music player's top bar */
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: rgb(255 255 255 / 0.08); }
.icon-btn svg { width: 1.5rem; height: 1.5rem; }

/* Toggles (like the player's High / Data saver, the assistant's Faster / Smarter): same outline */
.ai-models .pill[aria-pressed="true"] { border-color: rgb(255 255 255 / 0.5); }

/* ---- Sheets: full-screen panels like the music player's "Manage library" ------------------ */
.sheet {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background: rgb(10 10 14 / 0.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2);
  padding: calc(0.75rem + env(safe-area-inset-top)) calc(0.75rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(0.75rem + env(safe-area-inset-left));
}
.sheet-inner { max-width: 720px; margin: 0 auto; }
.sheet-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem; border-radius: 999px;
  background: var(--glass-strong);
}
.sheet-head h2, .sheet-box h3 { margin: 0; font: 700 1.25rem/1.2 "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif; }
.sheet-box { margin-top: 0.75rem; padding: 1.1rem 1.1rem 1.2rem; }
.sheet-box h3 { margin-bottom: 0.75rem; }
.sheet-box h4 { margin: 1.25rem 0 0.4rem; font-size: 0.95rem; color: var(--muted); }
.sheet-box p { margin: 0 0 0.85rem; }
.sheet-box .small { margin: 0.6rem 0 0; font-size: 0.9rem; }
.sheet-box .events li { grid-template-columns: 9.5rem 1fr; font-size: 0.92rem; padding: 0.35rem 0; }   /* longest dates: “May 30, 12:59 p.m.” (9 rem), « 30 sept., 23 h 59 » (8 rem) */
.sheet-box .events time { white-space: nowrap; }

/* The language button (FR / EN): a round button like the other icon buttons. */
.lang-btn { font: 700 0.85rem/1 "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: 0.03em; text-decoration: none; color: var(--ink); }

/* The page's title sits in the top bar, between the Home button and the tools. */
.top-title {
  flex: 1; min-width: 0; margin: 0;           /* the top bar's 16 px gap separates it from Home */
  font: 700 1.45rem/1.2 "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.bedrock .top-title { font: 600 1.5rem/1.2 "Pixelify Sans", "Atkinson Hyperlegible", system-ui, sans-serif; }
@media (max-width: 30rem) { .top-title { font-size: 1.15rem; } body.bedrock .top-title { font-size: 1.2rem; } }
.topbar { align-items: center; }
.wrap > :first-child { margin-top: 0.5rem; }

/* Pills in the top bar (Log in / Log out) are as tall as the round buttons. */
.top-tools .btn { min-height: 44px; padding: 0 1.15rem; }

/* Minecraft pages: "Playing now" and "Last played" boxes under the big status. */
.hero-facts { margin: 0 0 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Phones: boxes sit on top of each other, never side by side (the rule that .stack used to give some of them). */
@media (max-width: 34rem) { .facts, .facts.grid2, .hero-facts { grid-template-columns: minmax(0, 1fr); } }
.hero .sub:empty { display: none; }


/* Server page: columns sized to their values, so every box keeps its value on one line.
   Hardware: load average (long) | temperature | up for.   Software: long | medium | short values. */
@media (min-width: 40rem) {
  .hub-facts.hw { grid-template-columns: 1.5fr 1fr 1.2fr; }
  .hub-facts.sw { grid-template-columns: 1.45fr 1.3fr 0.85fr; }
}

/* ---- Videos page: like the music player ------------------------------------------------------
   The video's thumbnail, blurred, behind glass panels: the player on the left, the lists on the right.
   Phones and narrow windows: stacked (player, then lists). */
/* No video yet: a plain grey (lighter to darker), the same as the music player without a song. */
body.layout-videos::before { background: linear-gradient(160deg, #4f5057, #222327); }
.v-backdrop { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; pointer-events: none; }
.v-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.25); filter: blur(48px) saturate(1.35) brightness(0.5); transition: opacity 0.6s; }
.v-backdrop img:not([src]) { display: none; }   /* the artwork or the video's thumbnail is always set by the page */
.v-layout { display: grid; gap: 1rem; align-content: start; padding-top: 1rem; }
.v-layout > :first-child { margin-top: 0; }     /* both panels start at the same height, 20 px under the top bar */
@media (min-width: 60rem) {
  .v-layout { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); align-items: stretch; }
  .v-lists { height: 0; min-height: 100%; }        /* as tall as the player; longer lists scroll inside */
}
.v-now { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; padding: 1rem; }
/* Each panel draws on its own layer: hovering the tabs made Chrome redraw part of the player panel wrongly. */
.v-now, .v-lists, .v-screen { isolation: isolate; transform: translateZ(0); }
.v-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; }
.v-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.v-pick {      /* no video: the artwork (also the page's blurred background), with the message under its icon */
  position: absolute; inset: 0; display: grid; align-content: end; justify-items: center; gap: 0.6rem; padding: 1rem 1rem 9%;
  background: url("/assets/art-video.svg") center / cover; color: rgb(244 245 248 / 0.8); text-align: center;
}
.v-pick p { margin: 0; max-width: 24rem; }
@media (max-width: 30rem) { .v-pick { gap: 0.4rem; padding-bottom: 5%; } .v-pick p { font-size: 0.9rem; } }
.v-pick .btn { height: 2.33rem; padding: 0 1rem; }
.v-resume {
  position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.5rem 0.4rem 1rem;
  border-radius: 999px; background: var(--glass-strong); font-size: 0.95rem; white-space: nowrap;
}
.v-head { display: flex; align-items: center; gap: 0.75rem; }
.v-titles { flex: 1; min-width: 0; }
.v-titles h2 { margin: 0; font: 700 clamp(1.25rem, 4.5vw, 1.6rem)/1.15 "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif; overflow-wrap: anywhere; }
.v-titles h2:empty { display: none; }
.v-titles p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; }
.v-titles p:empty { display: none; }
.v-like { flex: none; }
.v-like:disabled { opacity: 0.35; cursor: default; }
.v-like[aria-pressed="true"] { color: var(--bad); }
.v-like[aria-pressed="true"] svg path { fill: currentColor; }
.v-now > .v-note { margin: -0.4rem 0 0; color: var(--warn); font-size: 0.9rem; }
.v-now > .v-note:empty { display: none; }
.v-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.v-lang button { min-width: 2.6rem; padding: 0 0.7rem; font-weight: 700; letter-spacing: 0.03em; }
.v-extras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.v-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.v-actions .pill { height: 2.33rem; padding: 0 0.95rem; line-height: 1; }   /* the site's button height (37 px), as in Music */
.v-actions .pill svg { width: 1.1rem; height: 1.1rem; }
.v-actions .pill[aria-disabled="true"], .v-actions .pill:disabled { opacity: 0.4; pointer-events: none; }
.v-quality { display: inline-flex; height: 2.33rem; padding: 3px; border: 1px solid var(--edge); border-radius: 999px; background: var(--btn); }
.v-quality button {
  height: 100%; padding: 0 0.85rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font: 400 0.9rem/1 "Atkinson Hyperlegible", system-ui, sans-serif; cursor: pointer;
}
.v-quality button[aria-pressed="true"] { background: var(--ink); color: #111; font-weight: 700; }
.v-quality button:disabled { opacity: 0.4; cursor: not-allowed; }    /* no data saver copy of this video (yet) */

.v-lists { display: flex; flex-direction: column; min-width: 0; padding: 0.75rem; max-height: calc(100svh - 1.5rem); }
.v-tabs { display: flex; gap: 0.25rem; padding: 0.25rem; margin-bottom: 0.25rem; }
.v-tabs button {
  flex: 1 1 auto; padding: 0.6rem 0.5rem; border: 0; border-radius: 12px; background: transparent; color: var(--muted);
  font: 700 0.95rem/1.2 "Atkinson Hyperlegible", system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
.v-tabs button:hover { color: var(--ink); }
.v-tabs button[aria-selected="true"] { background: var(--faint); color: var(--ink); }
.v-list-note { margin: 0.5rem 0.75rem; color: var(--muted); font-size: 0.9rem; }
.v-list-note:empty { display: none; }
.v-rows { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.v-item > button {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.4rem; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font: inherit;
}
.v-item > button:hover { background: rgb(255 255 255 / 0.07); }
.v-item.playing > button { background: rgb(255 255 255 / 0.1); }
.v-row-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: rgb(255 255 255 / 0.08); }
.v-row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-row-info { min-width: 0; }
.v-row-info .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.v-row-info .s { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }