/* ============================================================
   One Hand Book Nook — design system
   Forest reading-nook palette: oat background, deep moss text,
   sage + cocoa accents, warm gold highlight. Calm and bookish.
   ============================================================ */

:root {
  /* Palette */
  --c-bg:        #f1ece1;  /* oat */
  --c-bg-soft:   #e6dccb;  /* warm linen */
  --c-card:      #faf6ec;  /* cream paper */
  --c-text:      #2f3a2b;  /* deep moss */
  --c-text-soft: #5a5546;  /* taupe-brown */
  --c-sage:      #5d7a52;
  --c-sage-deep: #3f5638;
  --c-cocoa:     #8a6a4a;
  --c-gold:      #c8a35a;
  --c-line:      #d8c9a8;  /* parchment edge */
  --c-danger:    #a85e4a;

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
           Roboto, Helvetica, Arial, sans-serif;

  /* Shape */
  --radius:    6px;
  --radius-lg: 10px;
  --pill:      999px;

  /* Z layers */
  --z-bg:      0;
  --z-content: 1;
  --z-nav:     10;
  --z-fx:      9999;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--c-text);
}

/* ---- Old SLUTPOP chrome hidden (templates still reference it) ---- */
.bg-layer, .stickers, .topbar, .drip { display: none !important; }

/* ---- Background scene (subtle mountains + trees) ---- */
.bg-scene {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 72vh;
  max-height: 700px;
  z-index: var(--z-bg);
  pointer-events: none;
  opacity: 0.5;
}
.bg-mtn-far     { fill: var(--c-sage); opacity: 0.18; }
.bg-mtn-mid     { fill: var(--c-sage-deep); opacity: 0.22; }
.bg-trees-back  { fill: var(--c-sage-deep); opacity: 0.22; }
.bg-trees-front { fill: var(--c-sage-deep); opacity: 0.38; }

/* ---- Site header / top tabs ---- */
.site-header {
  position: relative;
  z-index: var(--z-nav);
  background: var(--c-card);
  border-bottom: 1px solid var(--c-line);
  padding: 1.25rem 2rem 0;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--c-text);
  text-decoration: none;
  text-transform: none;
}
.brand-mark { color: var(--c-sage); font-size: 1.5rem; line-height: 1; }
.brand-name { color: var(--c-text); }

.tabs {
  display: flex;
  gap: 0.1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-text-soft);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-line);
}
.tab.is-active {
  color: var(--c-sage-deep);
  border-bottom-color: var(--c-sage);
}

.inline { display: inline; margin: 0; }

/* ---- Main container ---- */
.container {
  position: relative;
  z-index: var(--z-content);
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover  { background: var(--c-bg-soft); border-color: var(--c-sage); }
.btn:active { background: var(--c-line); }

.btn-primary {
  background: var(--c-sage);
  color: var(--c-card);
  border-color: var(--c-sage);
}
.btn-primary:hover {
  background: var(--c-sage-deep);
  border-color: var(--c-sage-deep);
  color: var(--c-card);
}

.btn-ghost {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-text-soft);
}
.btn-ghost:hover { background: var(--c-bg-soft); color: var(--c-text); }

.btn-danger {
  background: var(--c-danger);
  color: var(--c-card);
  border-color: var(--c-danger);
}
.btn-danger:hover {
  background: #8a4d3c;
  border-color: #8a4d3c;
  color: var(--c-card);
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.75rem;
}

/* ---- Hero band (library, etc.) ---- */
.hero { margin-bottom: 2rem; }
.hero-title {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1.05;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--c-text);
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none;
  transform: none;
}
.hero-sub {
  display: inline-block;
  margin: 0;
  max-width: 56ch;
  color: var(--c-text-soft);
  font-size: 1rem;
  background: transparent;
  border: 0;
  padding: 0;
  transform: none;
  backdrop-filter: none;
}

/* ---- Filters ---- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 0.75rem;
  align-items: center;
}
.filters input,
.filters select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-text);
  font-size: 1rem;
  font-family: var(--sans);
  font-weight: 400;
}
.filters input:focus,
.filters select:focus {
  outline: 2px solid var(--c-sage);
  outline-offset: -1px;
}
.filter-search { flex: 1 1 220px; }
.filter-tag    { width: 130px; }

.result-count {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--c-text-soft);
  text-transform: none;
  letter-spacing: 0;
  transform: none;
}

/* ---- Library grid (cards) ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.25rem;
  /* Don't stretch siblings to match the tallest item in the row — that
     was making "Warrior Princess Assassin" balloon to match an open
     Crescent City stack. Cards keep their natural height. */
  align-items: start;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-text);
  transform: none;
  box-shadow: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  /* Uniform card height so every bottom edge in a row lines up — no
     more jagged staircase from one card having extra badges. */
  min-height: 470px;
}
.card .card-body { flex: 1; }
/* Series-stack tiles match the same uniform height as a single card. */
.series-stack-tile { min-height: 470px; }
.card:nth-child(even),
.card:nth-child(3n),
.card:nth-child(3n+1) {
  transform: none;
  background: var(--c-card);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(47, 58, 43, 0.3);
  border-color: var(--c-sage);
}

.cover {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--c-bg-soft);
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--c-cocoa);
  background-color: var(--c-bg-soft);
}
/* When a placeholder has a real cover set as background-image, hide
   the giant letter so the image shows through. */
.cover-placeholder[style*="background-image"] { font-size: 0; color: transparent; }

.card-body { padding: 0.75rem 0.85rem 0.9rem; }
.card-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--c-text);
  text-transform: none;
  letter-spacing: 0;
}
.card-title-num {
  color: var(--c-cocoa);
  font-size: 0.85em;
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
}
.title-book-num {
  color: var(--c-cocoa);
  font-size: 0.5em;
  font-style: italic;
  font-weight: 400;
  vertical-align: middle;
  margin-left: 0.4em;
}
.card-author {
  font-size: 0.8rem;
  color: var(--c-text-soft);
  margin-top: 0.25rem;
  opacity: 1;
}
.card-rating {
  color: var(--c-gold);
  font-size: 0.85rem;
  margin-top: 0.25rem;
  letter-spacing: 0.05em;
}
.card-quick-action {
  margin: 0.5rem 0 0;
  display: flex;
}
.card-quick-action .btn { width: 100%; }

/* ---- Library two-section split ---- */
.library-section { margin-bottom: 2.5rem; }
.library-section-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
}
.library-section-count {
  font-size: 0.85rem;
  color: var(--c-text-soft);
  font-family: var(--sans);
  margin-left: 0.4rem;
}
.library-section-empty { padding: 1rem 0 0; }
.library-section-read .library-section-title { color: var(--c-sage-deep); }

/* ---- Manual-entry form on /tbr/add ---- */
.manual-entry {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
}
.manual-entry-summary {
  cursor: pointer;
  font-size: 1rem;
  color: var(--c-text);
  list-style: none;
  user-select: none;
  padding: 0.5rem 0;
}
.manual-entry-summary::-webkit-details-marker { display: none; }
.manual-entry-summary::before { content: '▸ '; color: var(--c-sage); }
.manual-entry[open] .manual-entry-summary::before { content: '▾ '; }
.manual-form {
  margin-top: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  max-width: 720px;
}

/* Cover-preview slot: hidden until JS sets a src after file selection. */
img.preview-cover {
  display: none;
  width: 140px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  margin-top: 0.5rem;
}
img.preview-cover[src] { display: block; }

/* /add page: two methods side by side as collapsible sections */
.add-method {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
}
.add-method summary {
  cursor: pointer;
  font-size: 1rem;
  list-style: none;
  user-select: none;
  padding: 0.25rem 0;
}
.add-method summary::-webkit-details-marker { display: none; }
.add-method summary::before { content: '▸ '; color: var(--c-sage); }
.add-method[open] summary::before { content: '▾ '; }
.add-method[open] > *:not(summary) { margin-top: 1rem; }

/* TBR list page filter row */
.tbr-filters { margin: 0.5rem 0 1rem; }

/* ----------------------------------------------------------------
   TBR multi-select (iPhone-Photos-style bulk delete)
   ---------------------------------------------------------------- */
.page-head-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Hidden by default; revealed when body.is-selecting-tbr. */
.tbr-card .tbr-select-marker {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 5;
  display: none;
  cursor: pointer;
}
.tbr-card .tbr-select-marker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tbr-select-circle {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--c-text-soft);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

body.is-selecting-tbr .tbr-card .tbr-select-marker { display: block; }

/* In select mode, the whole card is a touch target; the inner links
   shouldn't navigate. */
body.is-selecting-tbr .tbr-card { cursor: pointer; }
body.is-selecting-tbr .tbr-card .card-cover-link,
body.is-selecting-tbr .tbr-card .card-title-link,
body.is-selecting-tbr .tbr-card .start-reading {
  pointer-events: none;
}
body.is-selecting-tbr .tbr-card .start-reading { opacity: 0.4; }

/* Selected state: filled checkmark + a glow around the card. */
.tbr-card.is-selected .tbr-select-circle {
  background: var(--c-sage);
  border-color: var(--c-sage);
}
.tbr-card.is-selected .tbr-select-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center/14px 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23faf6ec' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/></svg>");
}
.tbr-card.is-selected {
  outline: 3px solid var(--c-sage);
  outline-offset: 1px;
}

/* In select mode, suppress the hover-to-expand affordance on stacks
   (everything is already expanded, and we don't want a hover-collapse
   eating the selection click). */
body.is-selecting-tbr .series-stack-tile { display: none; }
body.is-selecting-tbr .series-stack-collapse { display: none; }

/* Floating bottom toolbar — only visible in select mode. The
   `[hidden]` selector lets the HTML hidden attribute win even though
   we set `display: flex` for the visible state. */
.tbr-select-toolbar {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--pill);
  box-shadow: 0 12px 30px -12px rgba(47, 58, 43, 0.4);
}
.tbr-select-toolbar[hidden] { display: none; }
.tbr-select-count {
  font-size: 0.95rem;
  color: var(--c-text);
  font-weight: 500;
}
.tbr-select-toolbar-actions {
  display: flex;
  gap: 0.4rem;
}
.tbr-select-toolbar [data-tbr-delete]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrape-by-URL box on /tbr/add */
.scrape-box {
  margin-top: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  max-width: 720px;
}
.scrape-form { margin-top: 0.5rem; }
.manual-divider {
  margin: 1.25rem 0;
  text-align: center;
  font-size: 0.85rem;
}

/* ----------------------------------------------------------------
   TBR series stack — collapsed = a 3D-feeling stack of book covers
   that sits in the regular card grid like any other tile. Click it
   and the series gently expands into a panel of full book cards.
   ---------------------------------------------------------------- */

.series-stack {
  position: relative;
}

/* Collapsed tile: same footprint AND chrome as a normal card so the
   grid reads as a single uniform row, not a mix of bordered and
   unbordered tiles. */
.series-stack-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.series-stack-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(47, 58, 43, 0.3);
  border-color: var(--c-sage);
}

/* Stage for the stacked covers. perspective gives the slight 3D tilt.
   No bottom margin — the label below has its own padding from the
   card body chrome. */
.cover-stack {
  position: relative;
  aspect-ratio: 2 / 3;
  perspective: 800px;
}

/* Each layered cover sits absolutely; transforms create the stack. */
.cover-stack-slot {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-soft);
  box-shadow:
    0 1px 0 var(--c-line),
    0 6px 12px -6px rgba(47, 58, 43, 0.35);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.35s ease;
}
.cover-stack-slot img,
.cover-stack-slot .cover-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Series-average rating badge — floats above the whole cover-stack so it sits
   on top of the topmost cover regardless of stack depth. Mirrors the
   single-cover `.cover .badge-stack` styling so it looks identical. */
.cover-stack > .badge-stack.cover-stack-rating {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  z-index: 50;
  pointer-events: none;
}
.cover-stack > .badge-stack.cover-stack-rating .badge { position: static; }

/* Order in DOM: deepest first, top of stack last. Stack reads
   vertically — like books resting on a desk — with each cover offset
   straight downward from the one above it. A whisper of rotation
   keeps it from looking robotic. */
.cover-stack-slot-1 {  /* deepest */
  transform: translateY(14px) rotate(0.8deg);
  filter: brightness(0.9);
}
.cover-stack-slot-2 {  /* middle */
  transform: translateY(7px) rotate(-0.6deg);
  filter: brightness(0.95);
}
.cover-stack-slot-3 {  /* top of stack — book 1's cover */
  transform: translateY(0) rotate(0deg);
  z-index: 3;
}

/* Hover: the top cover lifts off slightly, lower covers stay put. */
.series-stack-tile:hover .cover-stack-slot-3 {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 12px 24px -10px rgba(47, 58, 43, 0.5);
}
.series-stack-tile:focus-visible .cover-stack-slot-3 {
  outline: 2px solid var(--c-sage);
  outline-offset: 2px;
}

.series-stack-label {
  /* Match .card-body padding so the label area lines up perfectly
     with single-book card titles in the same grid row. */
  padding: 0.75rem 0.85rem 0.9rem;
}
.series-stack-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--c-text);
  margin-bottom: 0.2rem;
}
.series-stack-meta {
  font-size: 0.78rem;
  color: var(--c-text-soft);
}

/* ---- Expanded panel ---- */

.series-stack-body {
  /* When `hidden` attribute is absent + .is-open class is set on
     parent, this becomes the expanded panel. It floats above the
     grid so the rest of the layout doesn't reflow. */
  grid-column: 1 / -1;             /* take the full grid width when open */
  position: relative;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-cocoa);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem 1rem;
  margin: 0.5rem 0;

  /* Smooth expand: animate from 0 → auto height via grid trick. */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(.22,.61,.36,1),
              opacity 0.25s ease,
              padding 0.25s ease,
              margin 0.25s ease;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Cards inside the expanded panel stack vertically — book 1 on top,
   book 2 below it, etc. — at normal card width so they don't blow up
   horizontally when the panel spans the full row. Every card in the
   stack is forced to the same dimensions so the panel reads as a
   uniform sequence, not a jagged staircase of varying heights. */
.series-stack-body .grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 200px;
}
.series-stack-body .card {
  width: 200px;
  min-height: 470px;
  flex-shrink: 0;
}
.series-stack-body .card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* When open, the stack takes the whole row of the parent grid so the
   expanded panel doesn't squeeze sibling cards or stretch them. */
.series-stack.is-open { grid-column: 1 / -1; }
.series-stack.is-open .series-stack-tile { display: none; }
.series-stack.is-open .series-stack-body {
  max-height: 4000px;
  opacity: 1;
  padding: 1.25rem 1.4rem 1.1rem;
  margin: 0.5rem 0 1.25rem;
}

.series-stack-collapse {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  font-size: 0.85rem;
  font-family: var(--sans);
  line-height: 1;
  color: var(--c-text);
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  border-radius: var(--pill);
}
.series-stack-collapse:hover {
  background: var(--c-sage);
  color: var(--c-card);
  border-color: var(--c-sage);
}

/* ---- Badges ---- */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--pill);
  background: var(--c-bg-soft);
  color: var(--c-text);
  border: 1px solid var(--c-line);
}
.cover .badge { position: absolute; top: 0.5rem; left: 0.5rem; transform: none; }
.cover .badge-qty { left: auto; right: 0.5rem; transform: none; }
.cover .badge-stack {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
}
.cover .badge-stack .badge { position: static; }
.badge-sold     { background: var(--c-gold);  color: var(--c-text); border-color: var(--c-gold); }
.badge-wishlist { background: var(--c-cocoa); color: var(--c-card); border-color: var(--c-cocoa); }
.badge-tbr      { background: var(--c-cocoa); color: var(--c-card); border-color: var(--c-cocoa); }
.badge-reading  { background: var(--c-sage);  color: var(--c-card); border-color: var(--c-sage); }
.badge-read     { background: var(--c-sage-deep); color: var(--c-card); border-color: var(--c-sage-deep); }
.badge-dnf      { background: var(--c-danger); color: var(--c-card); border-color: var(--c-danger); }
.badge-library  { background: var(--c-gold); color: var(--c-text); border-color: var(--c-gold); }
.badge-priority { background: var(--c-sage); color: var(--c-card); border-color: var(--c-sage); }
.badge-missing-prequel {
  background: var(--c-danger);
  color: var(--c-card);
  border-color: var(--c-danger);
  font-weight: 600;
}
.alert-info {
  background: var(--c-bg-soft);
  border-left: 3px solid var(--c-sage);
}

.priority-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.priority-label {
  font-size: 0.85rem;
  margin-right: 0.2rem;
}

/* ---- Page head (TBR + future Read/Orders/Releases pages) ---- */
.page-head { margin-bottom: 1.5rem; }
.page-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-title {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  color: var(--c-text);
  line-height: 1.05;
}
.welcome-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-sage);
}

/* ---- Sort tabs (sub-nav on TBR / list pages) ---- */
.sort-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--c-line);
}
/* Thin vertical line separating logical groups in a single sort-tabs row
   (e.g. sort options on the left, year filters on the right). */
.sort-tab-divider {
  width: 1px;
  align-self: stretch;
  background: var(--c-line);
  margin: 0.4rem 0.6rem;
}
.sort-tab {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  color: var(--c-text-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.sort-tab:hover { color: var(--c-text); border-bottom-color: var(--c-line); }
.sort-tab.is-active {
  color: var(--c-sage-deep);
  border-bottom-color: var(--c-sage);
}

/* ---- Genre sections on TBR ---- */
.genre-section { margin-bottom: 3.5rem; }
.genre-section + .genre-section { padding-top: 1rem; }
.genre-title {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--c-sage-deep);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--c-sage);
  line-height: 1.1;
}
.genre-count {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  font-family: var(--sans);
  margin-left: 0.5rem;
  font-weight: 400;
  vertical-align: middle;
}

/* ---- Series + start-reading inside a card ---- */
.card-series {
  font-size: 0.78rem;
  color: var(--c-cocoa);
  margin-top: 0.25rem;
}
.card-cover-link, .card-title-link { display: block; color: inherit; }
.start-reading { margin-top: 0.6rem; }
.start-reading summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--c-sage);
  font-weight: 600;
  padding: 0.3rem 0;
  user-select: none;
}
.start-reading summary::-webkit-details-marker { display: none; }
.start-reading summary::before { content: '▸ '; }
.start-reading[open] summary::before { content: '▾ '; }
.start-reading-form {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

/* ---- TBR add page: title search + candidates ---- */
.tbr-search { margin-bottom: 1.5rem; }
.tbr-search .field-row { margin-bottom: 0.75rem; }
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }
.htmx-request .htmx-indicator { opacity: 1; }

.tbr-candidates { margin-top: 1.5rem; }
.candidates-count { margin: 0 0 1rem; font-size: 0.85rem; }

/* Goodreads-style results list: cover left, info middle, action right. */
.candidates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.candidate-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--c-line);
}
.candidate-row:last-child { border-bottom: 0; }

.candidate-cover {
  flex: 0 0 100px;
  aspect-ratio: 2 / 3;
}
.candidate-cover img,
.candidate-cover .cover-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  background: var(--c-bg-soft);
  display: block;
}

.candidate-body { flex: 1; min-width: 0; }
.candidate-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--c-sage-deep);
  margin-bottom: 0.15rem;
  line-height: 1.25;
}
.candidate-author { font-size: 0.95rem; color: var(--c-text); margin-bottom: 0.35rem; }
.candidate-series {
  font-size: 0.82rem;
  color: var(--c-cocoa);
  margin-bottom: 0.35rem;
}
.candidate-rating {
  font-size: 0.85rem;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}
.candidate-rating .stars { color: var(--c-gold); font-weight: 600; }
.candidate-desc {
  font-size: 0.85rem;
  color: var(--c-text-soft);
  margin: 0;
  line-height: 1.45;
}

.candidate-action {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
}
.candidate-already {
  align-self: center;
}

@media (max-width: 640px) {
  .candidate-row { gap: 0.85rem; flex-wrap: wrap; }
  .candidate-cover { flex: 0 0 80px; }
  .candidate-action { flex: 1 1 100%; align-self: stretch; }
}

/* ---- State actions on book detail ---- */
.state-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1.25rem 0;
}
/* Destination row sits flush right after the action row — no
   divider between them; both are "things you can do above the line." */
.state-actions-destinations {
  margin-top: 0;
}
/* Priority row sits BELOW the dashed divider, separated from the
   action+destination buttons above it. */
.state-actions-priority {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--c-line);
}
.state-group { display: inline-block; }
.state-group summary {
  list-style: none;
  cursor: pointer;
}
.state-group summary::-webkit-details-marker { display: none; }
.state-form {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.detail-series {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  margin: 0 0 1rem;
}

/* Inline-editable series name + position. The inputs read like
   plain text until clicked, then reveal a subtle pink border. */
.series-inline-input {
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  vertical-align: baseline;
  transition: border-color 120ms ease, background 120ms ease;
}
.series-inline-input:hover {
  border-color: rgba(255,255,255,0.25);
}
.series-inline-input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--c-pink, #ff3ea5);
  background: rgba(255,255,255,0.06);
}
.series-name-input { min-width: 6ch; }
.series-pos-input  { min-width: 2ch; text-align: center; -moz-appearance: textfield; }
.series-pos-input::-webkit-outer-spin-button,
.series-pos-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Brief green-flash to signal "saved" after a successful HTMX post. */
.series-inline-input.series-saved {
  border-style: solid;
  border-color: #4ade80;
}

/* Author reading-order widget */
.author-order {
  background: var(--c-surface-soft, rgba(255,255,255,0.04));
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
}
.author-order-title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-soft);
}
.author-order-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.author-order-item.is-current {
  font-weight: 700;
  color: var(--c-accent);
}
.author-order-year { color: var(--c-text-soft); margin-left: 0.25rem; }
.author-order-mark { margin-left: 0.5rem; font-size: 0.85rem; }

.author-order-list-large { font-size: 1.05rem; }
.author-order-list-large .author-order-item { padding: 0.25rem 0; }

/* Click-and-paste cover replacement */
.detail-cover-paste {
  position: relative;
  cursor: pointer;
  outline: 0;
}
.detail-cover-paste:focus {
  outline: 2px solid var(--c-accent, #d54e8b);
  outline-offset: 3px;
}
.paste-cover-hint {
  position: absolute;
  left: 50%;
  bottom: -1.6rem;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--c-text-soft);
  white-space: nowrap;
  pointer-events: none;
  text-align: center;
}
.paste-cover-hint-ready, .paste-cover-hint-busy { display: none; }
.detail-cover-paste.is-ready .paste-cover-hint-idle { display: none; }
.detail-cover-paste.is-ready .paste-cover-hint-ready {
  display: inline;
  color: var(--c-accent, #d54e8b);
  font-weight: 600;
}
.detail-cover-paste.is-busy .paste-cover-hint-idle,
.detail-cover-paste.is-busy .paste-cover-hint-ready { display: none; }
.detail-cover-paste.is-busy .paste-cover-hint-busy { display: inline; }
.detail-cover-paste.is-busy { opacity: 0.7; }

/* Series upcoming-releases block */
.series-upcoming {
  background: rgba(213, 78, 139, 0.06);
  border-left: 3px solid var(--c-accent, #d54e8b);
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.25rem;
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
}
.series-upcoming-title {
  margin: 0 0 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-soft);
}
.series-upcoming ul { margin: 0; padding-left: 1.1rem; }
.series-upcoming li { padding: 0.15rem 0; }
.series-upcoming li.is-current { font-weight: 600; }

/* Editable rows: clickable to reveal up/down/delete buttons. */
.row-toggle { cursor: pointer; }
.row-toggle:hover {
  background: rgba(213, 78, 139, 0.05);
  border-radius: 4px;
}
/* Row edit-buttons strip — hidden by default, shown only when the
   row has `.is-open` (toggled by row-edit-toggle.js). */
.series-row-edits {
  display: none;
  gap: 4px;
  margin-top: 0.35rem;
  margin-left: 1.2rem;
}
.row-toggle.is-open .series-row-edits {
  display: inline-flex;
}
.row-toggle.is-open {
  background: rgba(213, 78, 139, 0.08);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
}
.row-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: var(--c-text-soft);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 5px;
  height: 22px;
  min-width: 22px;
  line-height: 1;
  transition: background 100ms, color 100ms;
}
.row-btn:hover:not(:disabled) {
  background: rgba(213, 78, 139, 0.25);
  color: #fff;
}
.row-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.row-btn-del:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.4);
}

/* "+ Add ..." disclosure + inline search. */
.row-add-wrap {
  margin-top: 0.65rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  padding-top: 0.6rem;
}
.row-add-btn {
  cursor: pointer;
  display: inline-block;
  background: rgba(213, 78, 139, 0.2);
  border: 1px solid rgba(213, 78, 139, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-text);
  list-style: none;
}
.row-add-btn::-webkit-details-marker { display: none; }
.row-add-btn:hover { background: rgba(213, 78, 139, 0.4); }
.row-add-body { margin-top: 0.5rem; }
.row-add-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  color: var(--c-text);
  font: inherit;
}
.row-add-results { margin-top: 0.4rem; }
.row-add-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.row-add-pick {
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  color: var(--c-text);
  font: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}
.row-add-pick:hover {
  background: rgba(213, 78, 139, 0.25);
  border-color: var(--c-accent, #d54e8b);
}
.row-add-pick-title { font-weight: 600; }
.row-add-pick-meta {
  font-size: 0.8rem;
  color: var(--c-text-soft);
}
.series-book-tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.05rem 0.45rem;
  margin-left: 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.series-book-tag-current  { background: var(--c-accent, #d54e8b); color: #fff; }
.series-book-tag-owned    { background: rgba(80, 130, 90, 0.18); color: #4a7a55; }
.series-book-tag-upcoming { background: rgba(213, 78, 139, 0.12); color: var(--c-accent, #d54e8b); }
.series-book-tag-missing  { background: rgba(160, 100, 60, 0.15); color: #8a5532; }

/* Author page sections */
.author-page-section { margin: 2rem 0; }
.author-page-section .section-heading {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-text);
}

/* Clickable author name on book detail */
.detail-author-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.detail-author-link:hover { color: var(--c-accent); }

/* ---- Inline star rating editor (book detail) ---- */
.rating-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  vertical-align: middle;
}
.rating-star {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-accent, #d54e8b);
}
.rating-glyph {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  pointer-events: none;
}
.rating-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.rating-half-l { left: 0; }
.rating-half-r { right: 0; }
.rating-half:hover { background: rgba(213, 78, 139, 0.08); }
.rating-value {
  margin-left: 0.4rem;
  font-size: 0.9rem;
  color: var(--c-text-soft);
  min-width: 1.6em;
}
.rating-clear-btn {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: transparent;
  color: var(--c-text-soft);
  cursor: pointer;
}
.rating-clear-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }

.bucket-quick-form {
  margin: 0 0 1rem;
  max-width: 320px;
}
.bucket-quick-field { margin: 0; }
.bucket-quick-field span {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-sage);
  margin-bottom: 0.3rem;
}

/* Listened section divider on /read */
.listened-section {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--c-line);
}
.listened-note { margin: 0 0 1.25rem; font-size: 0.9rem; }

/* ---- Read page extras ---- */
.sort-tabs-sub { margin-top: 0.4rem; }
.tab-count { font-size: 0.75rem; color: var(--c-text-soft); }
.genre-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}
.genre-chip {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  color: var(--c-text-soft);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--pill);
}
.genre-chip:hover { color: var(--c-text); border-color: var(--c-sage); }
.genre-chip.is-active {
  color: var(--c-card);
  background: var(--c-sage);
  border-color: var(--c-sage);
}
.card-meta { font-size: 0.75rem; color: var(--c-text-soft); margin-top: 0.2rem; }
.badge-rating {
  background: var(--c-gold);
  color: var(--c-text);
  border-color: var(--c-gold);
  letter-spacing: 0.05em;
}
.page-foot {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  text-align: center;
}

/* ---- Finish / DNF inline forms on book detail ---- */
.state-finish-form,
.state-dnf-form {
  display: block;
  margin-top: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  max-width: 480px;
}
.detail-comment {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
}
.detail-comment h2 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  color: var(--c-text);
}
.detail-comment p { margin: 0; color: var(--c-text); font-size: 0.95rem; }
.detail-dnf-reason { border-left-color: var(--c-danger); }

.comment-editor {
  width: 100%;
  min-height: 6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
}
.comment-editor:focus {
  outline: 2px solid var(--c-sage);
  outline-offset: -1px;
}
.comment-status {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-text-soft);
  margin-left: 0.6rem;
  font-style: italic;
}

/* ---- Three-tile shelf grid on home ---- */
.shelf-dnf { border-top: 3px solid var(--c-danger); }

/* ---- Empty state ---- */
.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--c-text-soft);
  font-family: var(--sans);
  font-size: 1rem;
  text-transform: none;
}
.empty p { margin-bottom: 1.25rem; font-size: 1.05rem; }

/* ---- Panels ---- */
.panel {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: none;
  backdrop-filter: none;
}

/* ---- Scan / Add panel ---- */
.scan-panel {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  transform: none;
  box-shadow: none;
}
.reader {
  max-width: 360px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 240px;
  background: var(--c-bg-soft);
}
.reader:empty { display: none; min-height: 0; }
.reader video {
  width: 100% !important;
  height: auto !important;
  min-height: 200px !important;
  display: block !important;
}
.scan-controls {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin: 0.75rem 0;
  flex-wrap: wrap;
}
.scan-msg {
  text-align: center;
  min-height: 1.2em;
  color: var(--c-text-soft);
  text-transform: none;
  font-family: var(--sans);
}
.isbn-row { display: flex; gap: 0.6rem; margin-top: 0.75rem; }
.isbn-row input {
  flex: 1;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-text);
  font-size: 1rem;
  font-family: var(--sans);
}

/* ---- Forms ---- */
.book-form {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: none;
}
fieldset {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem 1.2rem;
  background: var(--c-bg);
}
legend {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.1rem 0.6rem;
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-transform: none;
  transform: none;
}
.field { display: block; margin-bottom: 0.85rem; }
.field > span {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-sage);
  margin-bottom: 0.3rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--sans);
  font-weight: 400;
  background: var(--c-card);
  color: var(--c-text);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--c-sage);
  outline-offset: -1px;
}
.field-row { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.field-row .field { flex: 1 1 150px; }

.form-cover { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.form-cover img,
.form-cover .cover-placeholder {
  width: 110px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.form-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }

/* ---- Alerts ---- */
.alert {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-cocoa);
  color: var(--c-text);
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-family: var(--sans);
  text-transform: none;
  font-size: 0.95rem;
  transform: none;
}
.alert-error {
  border-left-color: var(--c-danger);
  background: #f4e5dd;
}
.muted { color: var(--c-text-soft); opacity: 1; }

/* ---- Book detail ---- */
.back-link {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: var(--c-sage);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-transform: none;
  transform: none;
  box-shadow: none;
}
.back-link:hover { color: var(--c-sage-deep); }

.detail { display: flex; gap: 2rem; flex-wrap: wrap; }
.detail-cover { flex: 0 0 240px; }
.detail-cover img,
.detail-cover .cover-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: none;
  transform: none;
}
.detail-body { flex: 1 1 340px; }
.detail-body h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
  margin: 0 0 0.5rem;
  text-shadow: none;
  transform: none;
}
.detail-subtitle { font-size: 1.05rem; color: var(--c-text-soft); margin: 0 0 0.4rem; opacity: 1; }
.detail-author   { margin: 0 0 1rem; font-size: 1rem; color: var(--c-text-soft); }

.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 1.25rem 0;
}
.facts dt {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-sage);
  opacity: 1;
}
.facts dd { margin: 0; color: var(--c-text); }

.detail-description, .detail-notes { margin-top: 1.5rem; }
.detail-description h2,
.detail-notes h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--c-text);
  font-weight: 500;
  margin-bottom: 0.5rem;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  transform: none;
}

/* ---- Spice / clutch counter (book detail page) ---- */
.spice-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
  transform: none;
  box-shadow: none;
}
.spice-meter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem;
  background: var(--c-bg-soft);
  border: 0;
  border-radius: var(--radius);
  transform: none;
}
.spice-flame { font-size: 1.4rem; }
.spice-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-sage);
  opacity: 1;
}
.spice-count {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text);
}
.spice-btn { font-size: 0.85rem; transform: none; }
.spice-btn:hover { transform: none; }

.spice-particle {
  position: fixed;
  z-index: var(--z-fx);
  pointer-events: none;
  font-size: 1.5rem;
  animation: spice-fly 0.9s ease-out forwards;
}
@keyframes spice-fly {
  to { transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(40deg); opacity: 0; }
}

/* ---- Login (standalone page) ---- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: var(--c-bg);
  margin: 0;
}
.login-card {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-sage);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.75rem;
  box-shadow: none;
  transform: none;
}
.login-logo { font-size: 2.5rem; color: var(--c-sage); margin-bottom: 0.25rem; }
.login-card h1 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 0.25rem 0 0.5rem;
  font-weight: 500;
  text-shadow: none;
}
.pin-input {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: 0.3em;
  padding: 0.7rem;
  margin: 1.25rem 0 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}
.pin-input:focus {
  outline: 2px solid var(--c-sage);
  outline-offset: -1px;
}

.orders-lock-wrap {
  display: flex;
  justify-content: center;
  padding: 6rem 1rem 8rem;
}
.orders-lock-form {
  width: 100%;
  max-width: 280px;
}
.orders-lock-input {
  margin: 0;
  -webkit-text-security: disc;
  -moz-text-security: disc;
  text-security: disc;
}
.orders-lock-input::placeholder {
  -webkit-text-security: none;
  text-security: none;
  letter-spacing: 0.1em;
}
.orders-lock-input.is-error {
  outline: 2px solid #c2185b;
  outline-offset: -1px;
  animation: orders-lock-shake 0.25s ease;
}
@keyframes orders-lock-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ---- Site footer ---- */
.site-footer {
  position: relative;
  z-index: var(--z-content);
  border-top: 1px solid var(--c-line);
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-text-soft);
  background: var(--c-card);
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .site-header { padding: 1rem 1rem 0; }
  .brand       { font-size: 1.35rem; }
  .tab         { padding: 0.6rem 0.8rem; font-size: 0.85rem; }
  .container   { padding: 1.5rem 1rem 3rem; }
  .detail-cover { flex: 0 0 150px; }
}

/* =========================================================
   ORDERS
   ========================================================= */
.orders-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
.orders-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.orders-summary-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--c-text);
}
.orders-summary-label {
  font-size: 0.8rem;
  color: var(--c-text-soft);
}
.orders-summary-add {
  margin-left: auto;
}

.orders-year-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.75rem;
}
.orders-year-tab {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text);
  text-decoration: none;
  font-size: 0.85rem;
  background: var(--c-card);
}
.orders-year-tab.is-active {
  background: var(--c-text);
  color: var(--c-card);
  border-color: var(--c-text);
}

.orders-month-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.orders-month-chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-soft);
  text-decoration: none;
  font-size: 0.78rem;
  background: transparent;
}
.orders-month-chip.is-active {
  background: var(--c-sage);
  color: var(--c-card);
  border-color: var(--c-sage);
}
.orders-month-count {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.7rem;
  opacity: 0.7;
}

.orders-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.orders-filters select {
  margin-left: 0.4rem;
  padding: 0.25rem 0.4rem;
}

.orders-section-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin: 1.5rem 0 0.75rem;
}

.orders-subs {
  margin-bottom: 1.5rem;
}
.orders-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.orders-sub-card {
  padding: 0.9rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
}
.orders-sub-card-paused { opacity: 0.65; }
.orders-sub-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.orders-sub-name a { color: var(--c-text); text-decoration: none; }
.orders-sub-name a:hover { text-decoration: underline; }
.orders-sub-meta {
  font-size: 0.85rem;
  color: var(--c-text-soft);
}
.orders-sub-seller { font-size: 0.8rem; }
.orders-sub-actions { margin-top: 0.5rem; }

.orders-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.order-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 0.8rem 1rem;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.order-row-received  { opacity: 0.7; }
.order-row-cancelled { opacity: 0.55; text-decoration: line-through; }
.order-row-cover img,
.order-row-cover .cover-placeholder {
  width: 56px;
  height: 80px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.order-row-cover .cover-placeholder {
  background-color: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  color: var(--c-text-soft);
}
.order-row-title {
  font-weight: 600;
  font-size: 1rem;
}
.order-row-title a { color: var(--c-text); text-decoration: none; }
.order-row-title a:hover { text-decoration: underline; }
.order-row-author { font-size: 0.85rem; color: var(--c-text-soft); }
.orders-search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.orders-search-wrap .orders-search-input { width: 100%; }
.orders-search-suggestions,
.typed-ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px -8px rgba(47, 58, 43, 0.25);
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
}
.orders-search-suggestion,
.typed-ac-item {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.orders-search-suggestion:hover,
.typed-ac-item:hover {
  background: var(--c-bg-soft);
}
.typed-ac-wrap {
  position: relative;
  display: block;
}
.typed-ac-wrap input { width: 100%; }
.order-row-trade {
  font-size: 0.85rem;
  color: var(--c-sage-deep);
  font-style: italic;
  margin-top: 0.15rem;
}
.order-row-meta {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.order-row-dates  { margin-top: 0.25rem; font-size: 0.75rem; }
.order-row-facts  {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.35;
}
.order-row-badges {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.order-row-notes  { margin-top: 0.25rem; font-size: 0.85rem; font-style: italic; }
.order-row-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: stretch;
}

/* small badges for type + status */
.order-type-badge, .order-status-badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--c-line);
}
.order-type-preorder         { background: rgba(180, 148, 214, 0.18); color: var(--c-text); border-color: rgba(180,148,214,0.35); }
.order-type-order            { background: var(--c-bg); color: var(--c-text); }
.order-type-subscription     { background: rgba(140, 184, 140, 0.18); color: var(--c-text); border-color: rgba(140,184,140,0.4); }
.order-type-subscription_box { background: rgba(140, 184, 140, 0.10); color: var(--c-text-soft); }

.order-status-open       { background: rgba(180, 148, 214, 0.15); }
.order-status-shipped    { background: rgba(180, 148, 214, 0.30); color: var(--c-text); }
.order-status-received   { background: rgba(140, 184, 140, 0.25); }
.order-status-cancelled  { background: rgba(190, 70, 70, 0.18); color: var(--c-text); }

.badge-cancelled {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  background: rgba(190,70,70,0.15);
  color: var(--c-text);
  margin-left: 0.4rem;
}

/* --- add page --- */
.order-add-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 1rem;
}
.order-add-tab {
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: var(--c-text-soft);
  border-bottom: 2px solid transparent;
  font-size: 0.95rem;
}
.order-add-tab.is-active {
  color: var(--c-text);
  border-bottom-color: var(--c-sage);
}
.order-add-pane { display: none; }
.order-add-pane.is-active { display: block; }

.order-candidate-form {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--c-line);
}
.order-candidate-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
}
.order-candidate-fields label {
  font-size: 0.78rem;
  color: var(--c-text-soft);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.order-candidate-fields input,
.order-candidate-fields select {
  padding: 0.3rem 0.4rem;
  font-size: 0.9rem;
}
.order-candidate-notes { grid-column: span 2; }

/* --- detail / edit --- */
.order-detail-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  align-items: start;
}
/* Subscription parents (and any order without a linked book) don't render
   the cover column — collapse the grid to a single column so the body
   doesn't get squeezed into the 200px slot. */
.order-detail-grid:not(:has(.order-detail-cover)) {
  grid-template-columns: 1fr;
}
.order-detail-cover img,
.order-detail-cover .cover-placeholder {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}
/* Book-cover aspect ratio so a background-image placeholder gets sized
   even when there's no letter inside. */
.order-detail-cover .cover-placeholder { aspect-ratio: 2 / 3; height: auto; }
.order-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.order-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 580px;
}
.order-form h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 0.75rem 0 0.1rem;
  color: var(--c-text);
}
.order-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--c-text-soft);
}
.order-form input,
.order-form select,
.order-form textarea {
  padding: 0.4rem 0.55rem;
  font-size: 0.95rem;
  border: 1px solid var(--c-line);
  border-radius: 5px;
  background: var(--c-bg);
  color: var(--c-text);
}
.order-form .form-actions { margin-top: 0.75rem; }
.order-autosave-status {
  font-size: 0.85rem;
  transition: opacity 0.2s ease;
}
.order-autosave-status.is-saving { color: var(--c-text-soft); font-style: italic; }
.order-autosave-status.is-saved  { color: var(--c-sage-deep); }
.order-autosave-status.is-error  { color: #c2185b; font-weight: 600; }
.order-form-check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.order-form-status {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem 0.6rem;
  margin: 0.5rem 0;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.order-form-status legend {
  font-size: 0.85rem;
  color: var(--c-text-soft);
  padding: 0 0.35rem;
}
.order-form-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.order-form-radio input[type="radio"] { accent-color: var(--c-sage); }
.orders-sub-box-log { margin-top: 2rem; }

@media (max-width: 720px) {
  .order-detail-grid { grid-template-columns: 1fr; }
  .order-detail-cover { max-width: 200px; }
  .order-row {
    grid-template-columns: 48px 1fr;
  }
  .order-row-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .order-row-cover img,
  .order-row-cover .cover-placeholder {
    width: 48px;
    height: 70px;
  }
}

.order-disp-badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--c-line);
}
.order-disp-kept       { background: rgba(140, 184, 140, 0.20); color: var(--c-text); }
.order-disp-sold       { background: rgba(190,  70,  70, 0.18); color: var(--c-text); }
.order-disp-sell       { background: rgba(226, 128,  90, 0.18); color: var(--c-text); }
.order-disp-sell_trade { background: rgba(214, 178, 110, 0.22); color: var(--c-text); }

.order-ship-badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--c-line);
}
.order-ship-direct  { background: rgba(140, 184, 140, 0.22); color: var(--c-text); }
.order-ship-forward { background: rgba(226, 128,  90, 0.20); color: var(--c-text); font-weight: 600; }

/* Click-to-expand monthly spend breakdown. */
.orders-spend-stat { cursor: pointer; position: relative; }
.orders-spend-stat > summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  outline: none;
}
.orders-spend-stat > summary::-webkit-details-marker { display: none; }
.orders-spend-caret {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.7rem;
  color: var(--c-text-soft);
  transition: transform 0.15s ease;
}
.orders-spend-stat[open] .orders-spend-caret { transform: rotate(180deg); }

.orders-spend-breakdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 220px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.orders-spend-breakdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.orders-spend-breakdown li {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.2rem 0;
  border-bottom: 1px dotted var(--c-line);
}
.orders-spend-breakdown li:last-child { border-bottom: none; }

/* Orders sharing an order number get wrapped in a "[" bracket. The
   bracket sits in the gutter to the left of the row so rows in a
   group are aligned the SAME as standalone rows — nothing is shifted.
   Span: center of first row to center of last row (roughly the cover
   midpoint). */
.order-group-wrap {
  position: relative;
  padding: 0;
  margin: 0;
}
.order-group-bracket {
  position: absolute;
  left: -12px;
  top: 52px;     /* roughly the center of the first row's cover */
  bottom: 52px;  /* roughly the center of the last row's cover */
  width: 10px;
  border-left: 2px solid var(--c-sage);
  pointer-events: none;
}
.order-group-bracket::before,
.order-group-bracket::after {
  content: "";
  position: absolute;
  left: -2px;
  width: 12px;
  height: 2px;
  background: var(--c-sage);
}
.order-group-bracket::before { top: 0; }
.order-group-bracket::after  { bottom: 0; }

.order-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.order-row-series {
  font-size: 0.82rem;
  color: var(--c-text);
  margin-top: 0.15rem;
}
.order-row-series strong { font-weight: 600; }

/* Inline editable series total on the orders list. Looks like text
   until clicked, then shows a dashed border so it's clearly editable. */
.series-total-inline {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0;
  min-width: 1.5ch;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.series-total-inline::-webkit-outer-spin-button,
.series-total-inline::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.series-total-inline:hover { border-color: var(--c-line); }
.series-total-inline:focus {
  outline: none;
  border-color: var(--c-sage);
  background: rgba(255,255,255,0.8);
}

/* HTMX shows .htmx-indicator while a request is in flight. */
.order-search-spinner {
  display: none;
  font-size: 0.85rem;
  color: var(--c-text-soft);
  align-self: center;
  margin-left: 0.5rem;
}
.order-search-spinner.htmx-request,
.htmx-request .order-search-spinner,
.htmx-request.order-search-spinner {
  display: inline;
}

.badge-bundle {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--c-sage);
  color: var(--c-card);
  vertical-align: middle;
}

/* Clickable placeholder for missing covers on the orders list. */
.cover-url-paste {
  cursor: pointer;
  position: relative;
  outline: 1px dashed transparent;
  transition: outline-color 0.15s;
}
.cover-url-paste:hover,
.cover-url-paste:focus {
  outline-color: var(--c-sage);
}
.cover-url-input {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--c-card);
  font-size: 0.65rem;
  padding: 4px;
  box-sizing: border-box;
  outline: 1px solid var(--c-sage);
}
.cover-url-input:disabled { opacity: 0.6; }

/* Manual-entry row at the bottom of search results. */
.candidate-manual { padding: 0; }
.candidate-manual summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  color: var(--c-sage-deep);
  font-weight: 500;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  background: rgba(140, 184, 140, 0.08);
}
.candidate-manual summary::-webkit-details-marker { display: none; }
.candidate-manual details[open] summary { margin-bottom: 0.5rem; }
.candidate-manual .order-candidate-form { padding: 0.5rem 0.75rem; }

/* Fix the runaway font size on the focused paste placeholder. */
.cover-url-paste:focus {
  outline: 2px solid var(--c-sage);
  outline-offset: 2px;
}
.cover-url-paste.is-uploading {
  position: relative;
  opacity: 0.6;
}
.cover-url-paste.is-uploading::after {
  content: "uploading…";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-family: var(--sans);
}

/* Manual-entry form's cover paste zone. */
.manual-cover-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.cover-url-paste-form {
  width: 80px;
  height: 110px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-bg-soft);
  border: 2px dashed var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
}
.cover-url-paste-form:focus {
  outline: none;
  border-color: var(--c-sage);
  background: rgba(140,184,140,0.10);
}
.manual-cover-hint {
  font-size: 0.7rem;
  color: var(--c-text-soft);
  padding: 4px;
}

.cover-url-paste.is-paste-target,
.cover-url-paste-form.is-paste-target {
  outline: 3px solid var(--c-sage);
  outline-offset: 2px;
}

.orders-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.orders-search-input {
  flex: 1;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-text);
  font-size: 0.95rem;
}
.orders-search-input:focus {
  outline: 2px solid var(--c-sage);
  outline-offset: -1px;
  border-color: var(--c-sage);
}

.orders-sub-card { position: relative; }
.sub-delete-form {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  margin: 0;
}
.sub-delete-btn {
  background: transparent;
  border: none;
  font-size: 1rem;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  border-radius: 4px;
  color: var(--c-text-soft);
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
}
.sub-delete-btn:hover {
  opacity: 1;
  background: rgba(190, 70, 70, 0.18);
}

.sub-edit-collapse { margin: 0.5rem 0 1rem; }
.sub-edit-collapse summary {
  list-style: none;
  display: inline-block;
  cursor: pointer;
}
.sub-edit-collapse summary::-webkit-details-marker { display: none; }
.sub-edit-collapse[open] summary { margin-bottom: 0.75rem; }

.subbox-search-form { margin: 0.5rem 0 0.75rem; }
.subbox-search-input {
  width: 60%;
  max-width: 360px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.sub-log-link {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.sub-log-link:hover { color: var(--c-text); text-decoration: underline; }

.orders-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0 0.5rem;
}
.orders-type-tab {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-text-soft);
  text-decoration: none;
  font-size: 0.8rem;
  background: var(--c-card);
}
.orders-type-tab.is-active {
  background: var(--c-sage);
  color: var(--c-card);
  border-color: var(--c-sage);
}

button.orders-year-tab.orders-year-toggle {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--c-text);
}
.orders-month-tabs.is-collapsed { display: none; }