:root {
  --wood: #B98A5E;
  --wood-highlight: #CDA177;
  --wood-shade: #8F6540;
  --shelf-upright: 8px;
  --shelf-niche-height: 132px;
  --shelf-board-height: 13px;
  --shelf-board-lip: 3px;
  --shelf-board-edge: 4px;
  --shelf-face-width: 78px;
  --shelf-face-margin: 6px;
  --shelf-niche-shadow: rgba(0, 0, 0, 0.34);
  --shelf-lamp: rgba(241, 163, 94, 0.16);
  --spine-shade: rgba(0, 0, 0, 0.23);
  --spine-inset: 14px;
  --spine-band-inset: 7px;
  --ribbon-width: 5px;
  --ribbon-height: 28px;
  --ribbon-drop: 24px;
  --add-slot-width: 34px;
}

.bookcase {
  width: min(100%, 340px);
  border: var(--shelf-upright) solid var(--wood-shade);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--scene-shade);
}

.shelf-niche {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  height: var(--shelf-niche-height);
  padding: 0 var(--space-sm);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0, var(--shelf-lamp), transparent),
    linear-gradient(to bottom, var(--shelf-niche-shadow), transparent 40%);
}

.shelf-board {
  position: relative;
  z-index: 1;
  height: var(--shelf-board-height);
  background: linear-gradient(
    to bottom,
    var(--wood-highlight) 0 var(--shelf-board-lip),
    var(--wood) var(--shelf-board-lip) calc(100% - var(--shelf-board-edge)),
    var(--wood-shade) calc(100% - var(--shelf-board-edge))
  );
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.shelf-book {
  position: relative;
  flex: 0 0 auto;
  margin: 0 1px;
}

.shelf-book.is-face {
  margin: 0 var(--shelf-face-margin);
}

.shelf-spine {
  position: relative;
  display: block;
  width: var(--spine-width);
  height: var(--spine-height);
  overflow: hidden;
  border-radius: 2px 2px 0 0;
  background:
    linear-gradient(
      to right,
      var(--spine-shade) 0 24%,
      var(--scene-glass) 24% 40%,
      transparent 40% 86%,
      var(--spine-shade) 86%
    ),
    var(--spine-color);
}

.shelf-spine::before,
.shelf-spine::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--scene-glass-edge);
}

.shelf-spine::before {
  top: var(--spine-band-inset);
}

.shelf-spine::after {
  bottom: var(--spine-band-inset);
}

.shelf-spine-title {
  position: absolute;
  inset: var(--spine-inset) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-size: clamp(8px, calc(var(--spine-width) * 0.5), 14px);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--scene-ink);
}

.shelf-face {
  width: var(--shelf-face-width);
  max-width: none;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
}

.shelf-book.is-reading::after {
  content: '';
  position: absolute;
  left: 62%;
  bottom: calc(var(--ribbon-drop) * -1);
  width: var(--ribbon-width);
  height: var(--ribbon-height);
  background: var(--butter);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

.shelf-add {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--add-slot-width);
  height: 98px;
  margin-left: var(--space-sm);
  border: 1.5px dashed var(--scene-ink-faint);
  border-radius: var(--radius-sm);
  color: var(--scene-ink-soft);
  font-size: var(--text-headline);
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--scene-glass);
}

.segmented span {
  display: grid;
  place-items: center;
  min-height: 36px;
  border-radius: calc(var(--radius-md) - var(--space-xs));
  font-size: var(--text-callout);
  font-weight: 500;
  color: var(--scene-ink-soft);
}

.segmented .is-on {
  background: var(--scene-ink);
  color: var(--scene);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}