/* ---- Demo section wrapper ---- */
.demo-section { padding: 30px 0 90px; display: flex; flex-direction: column; align-items: center; }
.demo-caption { max-width: 520px; text-align: center; color: var(--secondary); font-size: 15px; margin: 22px 0 0; }
.demo-caption strong { color: var(--text); }

/* ---- Phone frame ---- */
.phone-frame {
  position: relative;
}
.phone {
  width: 320px;
  height: 660px;
  border-radius: 42px;
  background: #050505;
  border: 1px solid #2a2a2a;
  box-shadow: 0 0 0 8px #050505, 0 30px 80px -20px rgba(33, 150, 243, 0.25), 0 0 60px rgba(0,0,0,0.6);
  padding: 14px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  overflow: hidden;
}
.phone .notch {
  /* Android punch-hole camera, not an iPhone notch -- a small circular cutout. */
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #000;
  border: 1px solid #1c1c1c;
  z-index: 30;
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #182232 0%, #0a0d12 55%, #0a0c10 100%);
  user-select: none;
}
.statusbar {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  padding: 10px 18px 0;
}

/* ---- Home content ---- */
.home-content {
  position: absolute;
  inset: 0;
  /* Right padding reserves the wave rail's gutter, same idea as the real
     app's contentPadding(end = 68.dp) in HomeGrid.kt -- section content
     shouldn't extend under the collapsed wave. */
  padding: 14px 42px 86px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Expanded sections (and the clock) take the full row via flex-basis:100%;
     collapsed ones shrink to pill width, so consecutive collapsed sections
     naturally wrap onto the same row together -- matches the real app's
     "collapsed neighbors merge into a single row" behavior, no JS needed. */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
}
.home-content::-webkit-scrollbar { display: none; }

.clock {
  flex: 1 0 100%;
  text-align: left;
  padding: 2px 10px 0;
}
.clock .time { font-size: 28px; font-weight: 300; letter-spacing: -1px; }
.clock .date { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 1px; }

/* ---- Sections ---- */
.section-card {
  flex: 1 0 100%;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background 0.2s, border-radius 0.2s;
}
/* Collapsed: shrink to a pill instead of staying a full-width row -- same
   look as the real app's collapsed section name pill. order:1 pushes all
   collapsed sections (regardless of where they sit in the original list)
   after every expanded one, so they all collect together at the bottom and
   wrap onto shared rows there -- expanded sections keep the default order:0. */
.section-card.collapsed {
  flex: 0 0 auto;
  border-radius: 999px;
  order: 1;
}
.section-card.collapsed .section-header {
  padding: 7px 14px;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
}
.section-header .name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}
.section-header .chev {
  color: var(--secondary);
  font-size: 11px;
  transition: transform 0.25s ease;
}
/* Collapsed pills don't get a dropdown arrow at all, not even rotated. */
.section-card.collapsed .chev { display: none; }

.section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 2px 8px 12px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}
.section-card.collapsed .section-grid {
  max-height: 0 !important;
  width: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* ---- App items ---- */
.mock-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 10px;
  cursor: default;
}
.mock-app .glyph {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  object-fit: cover;
}
.badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f44336;
  border: 2px solid #111;
  pointer-events: none;
  z-index: 5;
}
.mock-app .glyph .material-symbols-rounded {
  font-size: 22px;
  color: #fff;
}
.mock-app .label {
  font-size: 9.5px;
  color: rgba(255,255,255,0.78);
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* List, labels beside -- icon + name in a single row, one per line */
.section-grid.style-beside {
  grid-template-columns: 1fr;
  gap: 0;
}
.section-grid.style-beside .mock-app {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 7px 6px;
  width: 100%;
}
.section-grid.style-beside .label {
  font-size: 13px;
  max-width: none;
  text-align: left;
}
.section-grid.style-beside .glyph {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}
.section-grid.style-beside .glyph .material-symbols-rounded {
  font-size: 16px;
}

/* List, no labels -- bare icons, more per row since there's no text */
.section-grid.style-icononly {
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.section-grid.style-icononly .label {
  display: none;
}
.section-grid.style-icononly .glyph {
  width: 30px;
  height: 30px;
}

/* Tiles -- colored card per app, icon watermarked behind the name, same
   look as TileItem.kt: dominant color extracted from the icon, blended over
   white, with the icon faded on the right and the name left-aligned. */
.section-grid.style-tiles {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 2px 8px 2px;
}
.section-grid.style-tiles .mock-app {
  position: relative;
  flex-direction: row;
  align-items: center;
  height: 44px;
  border-radius: 12px;
  overflow: visible;
  padding: 0;
  width: 100%;
}
.tile-clip {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
}
.section-grid.style-tiles .tile-bg {
  position: absolute;
  inset: 0;
  background: #3a3a3a;
  z-index: 0;
}
.section-grid.style-tiles .tile-watermark {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 1;
  font-size: 46px;
  line-height: 1;
  opacity: 0.45;
  user-select: none;
  /* img fallback */
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.section-grid.style-tiles .tile-label {
  position: relative;
  z-index: 2;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Labels only -- text rows with no icon at all */
.section-grid.style-labelsonly {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.section-grid.style-labelsonly .mock-app {
  background: none;
  border-radius: 0;
  padding: 5px 8px;
  justify-content: flex-start;
}
.section-grid.style-labelsonly .glyph {
  display: none;
}
.section-grid.style-labelsonly .label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  max-width: none;
  white-space: normal;
  text-align: left;
  width: 100%;
}

/* ---- Dock ---- */
.dock {
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--row-border);
  border-radius: 24px;
  display: flex;
  justify-content: space-around;
  padding: 8px 10px;
  backdrop-filter: blur(6px);
}
.dock .mock-app .glyph { width: 36px; height: 36px; }
.dock .mock-app .label { display: none; }

/* ---- Drawer ---- */
.drawer {
  position: absolute;
  inset: 0;
  background: #060608;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 30px 18px 10px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer-back {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
}
.drawer-back:hover { background: rgba(255,255,255,0.08); }
.drawer-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 14px 86px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.drawer-list::-webkit-scrollbar { display: none; }
.drawer-letter-heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--secondary);
  padding: 14px 6px 4px;
}
.drawer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 6px;
  border-radius: 10px;
  transition: background 0.3s;
}
.drawer-row .glyph {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  object-fit: cover;
}
.drawer-row .name { font-size: 13.5px; color: rgba(255,255,255,0.9); }

/* ---- Wave scroller ---- */
.wave-rail {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 74%;
  /* Wider than the visible letter strip -- this whole box is the activation
     hit zone, and the letters stay anchored to its right edge (via their own
     `right` offset below), so widening it just makes the wave easier to grab
     without moving where the letters themselves sit. */
  width: 64px;
  z-index: 30;
  touch-action: none;
}
.wave-rail .letter {
  position: absolute;
  right: 6px;
  font-size: 9.5px;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  transform-origin: right center;
  white-space: nowrap;
  pointer-events: none;
}
.wave-bubble {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-strong);
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 31;
  /* JS only ever sets `top`, which is the box's top edge by default -- this
     re-centers it on that value instead, same as the letters' own translate. */
  transform: translateY(-50%);
}