/* =========================================================
   VIEW BAR — LIGHT CARTOON STYLE (OKLCH VERSION)
   ========================================================= */

   :root {
    /* base ink */
    --ink: oklch(38% 0.08 255);
  
    /* background surface */
    --view-bg: oklch(88% 0.04 255);
  
    /* button base */
    --btn-bg: oklch(98% 0.01 255);
  
    /* hover tint */
    --btn-hover: oklch(94% 0.06 255);
  
    /* selected state */
    --selected-bg: oklch(70% 0.18 255);
    --selected-text: oklch(20% 0.02 255);
  
    /* visited bar accent */
    --visited: oklch(75% 0.15 255);
  
    --shadow: 2px 2px 0 var(--ink);
  }
  
  /* =========================================================
     VIEW BAR CONTAINER
     ========================================================= */
  
  #view-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
  
    display: flex;
    gap: 10px;
  
    padding: 6px 8px;
  
    background: var(--view-bg);
  
    border: 2px solid var(--ink);
    border-radius: 16px;
  
    box-shadow: var(--shadow);
  
    z-index: 9999;
  
    transition: transform 0.12s ease;
  }
  
  /* subtle float */
  #view-bar:hover {
    transform: translateX(-50%) translateY(-2px);
  }
  
  /* =========================================================
     DEFAULT STATE
     ========================================================= */
  
  .view-item {
    display: none;
  }
  
  .view-item.selected {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* show all on hover */
  #view-bar:hover .view-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* =========================================================
     BUTTON BASE
     ========================================================= */
  
  .view-button {
    all: unset;
    cursor: pointer;
  
    padding: 8px 12px;
  
    font-size: 14px;
    font-weight: 600;
  
    color: oklch(20% 0.02 255);
  
    border-radius: 10px;
  
    border: 2px solid var(--ink);
  
    background: var(--btn-bg);
  
    box-shadow: var(--shadow);
  
    white-space: nowrap;
  
    transition:
      transform 0.12s ease,
      box-shadow 0.12s ease,
      background 0.12s ease;
  }
  
  /* =========================================================
     HOVER
     ========================================================= */
  
  .view-button:hover {
    background: var(--btn-hover);
  
    transform: translate(-2px, -2px) scale(1.08);
  
    box-shadow: var(--shadow);
  }
  
  /* =========================================================
     ACTIVE PRESS
     ========================================================= */
  
  .view-button:active {
    transform: translate(1px, 1px) scale(0.98);
    box-shadow: 1px 1px 0 var(--ink);
  }
  
  /* =========================================================
     SELECTED VIEW
     ========================================================= */
  
  .view-item.selected .view-button {
    background: var(--selected-bg);
    color: var(--selected-text);
  
    border-color: var(--ink);
  
    box-shadow: 1px 1px 0 var(--ink);
  }
  
  /* =========================================================
     BAR STATE
     ========================================================= */
  
  #view-bar.visited {
    border-color: var(--visited);
  }