/* ---------------------------------------------------------------------------
   ribbon.css — Ribbon, a handheld console's home (assets/js/dash/ribbon.js):
   soft and light (dark when the device is), one row of big rounded tiles,
   the one in focus ringed in a pulsing blue, round buttons below.
--------------------------------------------------------------------------- */

body.dash[data-theme='ribbon'] {
  --dash-bg: #ececef;
  --dash-ink: #26272c;
  --dash-dim: rgba(38, 39, 44, 0.62);
  --dash-line: rgba(0, 0, 0, 0.1);
  --dash-panel: #fff;
  --dash-accent: #00a7e8;
  --dash-accent-ink: #fff;
  --dash-radius: 18px;
  --rb-ring: #00b2f2;
  --rb-tile: #fff;
  --rb-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  body.dash[data-theme='ribbon'] {
    --dash-bg: #2b2c31;
    --dash-ink: #f2f2f5;
    --dash-dim: rgba(242, 242, 245, 0.64);
    --dash-line: rgba(255, 255, 255, 0.12);
    --dash-panel: #3a3b41;
    --rb-tile: #3a3b41;
    --rb-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

html:has(body[data-theme='ribbon']) {
  background: var(--dash-bg);
}

.rb-home {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

/* --- the top ---------------------------------------------------------------- */

.rb-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 4vw 0;
}

.rb-top .dash-hub {
  --views-bg: var(--rb-tile);
  --views-line: var(--dash-line);
  --views-ink: var(--dash-ink);
  --views-on-bg: var(--dash-ink);
  --views-on-ink: var(--dash-bg);
}

.rb-top .dash-hub .views__button,
.rb-top .dash-hub .settings-button {
  box-shadow: var(--rb-shadow);
}

.rb-top__side {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-inline-start: auto;
  font-size: 1.15rem;
}

/* --- the ribbon ----------------------------------------------------------- */

.rb-main {
  display: grid;
  align-content: center;
  gap: 1rem;
  min-width: 0;
}

.rb-heading {
  padding-inline: 6vw;
  min-height: 4.6rem;
}

.rb-name {
  margin: 0;
  overflow: hidden;
  color: var(--dash-ink);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-detail {
  margin: 0.3rem 0 0;
  color: var(--dash-dim);
  font-weight: 600;
}

.rb-ribbon {
  --rb-size: clamp(9.5rem, 26vh, 17.5rem);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 6vw 1.8rem;
  overflow-x: auto;
  scroll-padding-inline: 6vw;
  scrollbar-width: none;
}

.rb-ribbon::-webkit-scrollbar {
  display: none;
}

.rb-tile {
  position: relative;
  flex: none;
  inline-size: var(--rb-size);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--dash-radius);
  background: var(--rb-tile);
  color: var(--dash-ink);
  box-shadow: var(--rb-shadow);
  cursor: pointer;
  transition: transform 0.16s ease;
}

.rb-tile__art {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rb-tile.is-on {
  transform: scale(1.04);
}

.rb-tile.is-on::after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 5px solid var(--rb-ring);
  border-radius: calc(var(--dash-radius) + 7px);
  box-shadow: 0 0 1.4rem color-mix(in oklab, var(--rb-ring) 60%, transparent);
  animation: rb-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

.rb-tile:focus,
html.is-pad .rb-tile:focus {
  outline: none;
}

.rb-tile:not(.is-on):hover {
  transform: translateY(-3px);
}

.rb-tile--all {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.6rem;
  font: inherit;
  font-weight: 750;
}

.rb-tile--all:focus-visible::after,
html.is-pad .rb-tile--all:focus::after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 5px solid var(--rb-ring);
  border-radius: calc(var(--dash-radius) + 7px);
  animation: rb-pulse 1.6s ease-in-out infinite;
}

@keyframes rb-pulse {
  50% {
    border-color: color-mix(in oklab, var(--rb-ring) 45%, white);
  }
}

/* --- the dock --------------------------------------------------------------- */

.rb-foot {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 0 4vw 1.6rem;
}

.rb-dock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

.rb-round {
  display: grid;
  place-items: center;
  inline-size: 4.2rem;
  block-size: 4.2rem;
  border: 0;
  border-radius: 50%;
  background: var(--rb-tile);
  box-shadow: var(--rb-shadow);
  cursor: pointer;
  transition: transform 0.14s ease;
}

.rb-round--news { color: #ef4b4b; }
.rb-round--faves { color: #e7a800; }
.rb-round--surprise { color: #1fb35a; }
.rb-round--pad { color: #3b7ff0; }
.rb-round--settings { color: var(--dash-dim); }

.rb-round:hover {
  transform: translateY(-2px);
}

.rb-round:focus,
html.is-pad .rb-round:focus {
  outline: 4px solid var(--rb-ring);
  outline-offset: 4px;
}

.rb-dock__label {
  min-block-size: 1.4rem;
  margin: 0;
  color: var(--dash-ink);
  font-weight: 700;
}

/* --- the sheet over the home ---------------------------------------------- */

.rb-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: auto;
  padding: 1.6rem 5vw 4rem;
  background: var(--dash-bg);
}

.rb-sheet[hidden] {
  display: none;
}

.rb-sheet__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1.4rem;
}

.rb-sheet__head h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
}

.rb-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  block-size: 2.6rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--rb-tile);
  box-shadow: var(--rb-shadow);
  color: var(--dash-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

[dir='rtl'] .rb-back svg {
  transform: scaleX(-1);
}

.rb-sheet .dash-grid__tab {
  background: var(--rb-tile);
  box-shadow: var(--rb-shadow);
  border-color: transparent;
}

.rb-sheet .dash-grid__tab[aria-selected='true'] {
  background: var(--dash-ink);
  color: var(--dash-bg);
}

.rb-cell {
  display: grid;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dash-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.rb-cell__art {
  aspect-ratio: 1;
  border-radius: 14px;
  box-shadow: var(--rb-shadow);
}

.rb-cell__name {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-cell:focus,
html.is-pad .rb-cell:focus {
  outline: none;
}

.rb-cell:focus-visible .rb-cell__art,
html.is-pad .rb-cell:focus .rb-cell__art {
  outline: 4px solid var(--rb-ring);
  outline-offset: 3px;
}

.rb-night {
  display: grid;
  gap: 1.2rem;
}

.rb-friends {
  --dash-panel: var(--rb-tile);
  box-shadow: var(--rb-shadow);
  border-color: transparent;
}

.rb-sheet__sub {
  margin: 0.6rem 0 0;
  font-size: 1.1rem;
  font-weight: 750;
}

.rb-night__all {
  color: var(--dash-ink);
  font-weight: 700;
}

/* --- a phone ------------------------------------------------------------- */

@media (max-width: 760px) {
  .rb-top {
    padding: 1rem 1rem 0;
  }

  .rb-top__side {
    font-size: 1rem;
  }

  .rb-top .views__label {
    display: none;
  }

  .rb-heading {
    padding-inline: 1.2rem;
  }

  .rb-ribbon {
    --rb-size: 44vw;
    padding-inline: 1.2rem;
    scroll-padding-inline: 1.2rem;
  }

  .rb-dock {
    gap: 0.55rem;
  }

  .rb-round {
    inline-size: 3.05rem;
    block-size: 3.05rem;
  }

  .rb-round svg {
    inline-size: 22px;
    block-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-tile.is-on::after,
  .rb-tile--all:focus::after {
    animation: none;
  }

  .rb-tile,
  .rb-round {
    transition: none;
  }
}