/* Config — snapshots + bg brightness */

  .brightness-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }
  .brightness-row .brightness-tag,
  .brightness-row .brightness-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--dim);
    min-width: 38px;
  }
  .brightness-row .brightness-val {
    color: var(--cyan);
    text-align: right;
  }
  .brightness-row input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--panel-2);
    border: 1px solid rgba(0, 240, 255, 0.25);
    outline: none;
    cursor: pointer;
  }
  .brightness-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 18px;
    background: var(--cyan);
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent);
  }
  .brightness-row input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 18px;
    background: var(--cyan);
    border: none;
    cursor: pointer;
    border-radius: 0;
    box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent);
  }

  .inline-slider-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 90px;
  }
  .inline-slider-group input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--panel-2);
    border: 1px solid rgba(0, 240, 255, 0.25);
    outline: none;
    cursor: pointer;
  }
  .inline-slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 16px;
    background: var(--cyan);
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent);
  }
  .inline-slider-group input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 16px;
    background: var(--cyan);
    border: none;
    cursor: pointer;
    border-radius: 0;
    box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 60%, transparent);
  }
  .inline-slider-group .brightness-val {
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    min-width: 24px;
    text-align: right;
  }

  .snapshot-save {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  .snapshot-save input[type="text"] {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: var(--text);
    padding: 8px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    outline: none;
  }
  .snapshot-save input[type="text"]:focus { border-color: var(--yellow); }
  .example-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    color: var(--dim);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    user-select: none;
    transition: color 0.15s;
  }
  .example-toggle:hover { color: var(--cyan); }
  .example-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    background: var(--panel);
    border: 1px solid rgba(0, 240, 255, 0.45);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .example-toggle input[type="checkbox"]:hover { border-color: var(--cyan); }
  .example-toggle input[type="checkbox"]:checked {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 50%, transparent);
  }
  .example-toggle input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  #sideSnapshots .side-inner {
    display: flex;
    flex-direction: column;
  }
  .snapshot-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
  .snapshot-list:empty::before {
    content: 'NO SNAPSHOTS';
    color: var(--dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 6px 0;
  }
  /* Card stacks vertically: name on its own line (full width, wraps long
     names), meta + action buttons on a second line with buttons pushed to
     the right via meta's flex:1. */
  .snapshot-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--panel-2);
    border-left: 2px solid var(--cyan);
    padding: 10px 12px;
  }
  .snapshot-item .name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--text);
    word-break: break-all;
    line-height: 1.3;
    margin: 0;
  }
  .snapshot-item .snapshot-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* Name (row 1) and meta (row 2) both expand to fill so trailing buttons
     are pushed to the right edge. `min-width: 0` lets the name wrap long
     strings instead of forcing the row to overflow. */
  .snapshot-item .snapshot-row .name,
  .snapshot-item .snapshot-row .meta {
    flex: 1;
    min-width: 0;
  }
  .snapshot-item .meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--dim);
    letter-spacing: 1px;
  }
  .snapshot-item .meta:not(:empty)::before {
    content: '// ';
  }
  /* Override (⇪) and delete (✕) share the same 32×32 square footprint so
     they line up visually. LOAD spans the combined width of the two icons
     + the row gap so it aligns under them in the meta row. */
  .snapshot-item .snapshot-row [data-del],
  .snapshot-item .snapshot-row [data-override] {
    width: 32px;
    padding: 0;
  }
  .snapshot-item .snapshot-row [data-load] {
    width: 70px; /* 32 + 6 (gap) + 32 */
    padding: 0;
  }
  /* Override glyph (⇪) is larger than ✕ so the arrow reads as a deliberate
     action affordance, not a typo. */
  .snapshot-item [data-override] {
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Seeded EXAMPLE_* snapshots are read-only and have no meta — use a
     compact single-row layout. */
  .snapshot-item.example {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
  }
  .snapshot-item.example .name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }