:root {
  --accent: var(--cim-accent-500, #3B82F6)
}

body {
  font-family: system-ui, sans-serif
}

.masonry {
  column-width: 130px;
  column-gap: 8px
}

.gallery-item {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  margin: 0 0 8px;
  break-inside: avoid;
  vertical-align: top;
  position: relative;
  background: var(--cim-gray-900, #111827);
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: transform .1s, border-color .1s
}

.gallery-item:hover {
  transform: scale(1.03);
  border-color: var(--cim-accent-400, #60a5fa);
  z-index: 10
}

.selected-item {
  border-color: var(--cim-accent-500, #3B82F6) !important;
  box-shadow: 0 0 0 2px var(--cim-accent-500, #3B82F6)
}

.multi-selected {
  border-color: var(--cim-ok-500, #22c55e) !important;
  box-shadow: 0 0 0 2px var(--cim-ok-500, #22c55e)
}

.sel-check {
  pointer-events: none
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .2s
}

.gallery-item img.loaded {
  opacity: 1
}

.label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--cim-black, #000) 80%, transparent);
  font-size: 10px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .15s
}

.gallery-item:hover .label {
  opacity: 1
}

.tag-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: var(--cim-accent-600, #2563eb);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 99px
}

.comic-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  background: var(--cim-accent2-600, #4f46e5);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  display: flex;
  gap: 2px;
  align-items: center
}

.subchip {
  background: var(--cim-gray-700, #374151);
  border: 1px solid var(--cim-gray-600, #4b5563);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--cim-gray-300, #d1d5db);
  white-space: nowrap;
  cursor: pointer
}

.subchip:hover {
  background: var(--cim-gray-600, #4b5563)
}

.cstrip {
  box-sizing: border-box
}

.skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cim-gray-800, #1f2937) 25%, var(--cim-gray-700, #374151) 50%, var(--cim-gray-800, #1f2937) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite
}

@keyframes shimmer {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

canvas {
  cursor: crosshair;
  display: block
}

/* Drag splitters between resizable panes. The vertical bar sits between the
   left column and the editor, and between the viewer and the controls pane;
   in horizontal (stacked) layout the controls splitter becomes a row-resizer.
   JS (panes_resize.js) does the actual sizing + persistence. */
.pane-splitter {
  flex: 0 0 6px;
  background: transparent;
  position: relative;
  z-index: 20;
  cursor: col-resize;
}
.pane-splitter:hover, .pane-splitter.dragging {
  background: var(--cim-gray-700, #374151);
}
.pane-splitter::after {
  content: '';
  position: absolute;
  left: 2px; top: 50%;
  width: 2px; height: 28px;
  transform: translateY(-50%);
  background: var(--cim-gray-600, #4b5563);
  border-radius: 1px;
}
#editor_region.horizontal #controls_splitter {
  flex-basis: 6px;
  cursor: row-resize;
  width: 100%;
}
#editor_region.horizontal #controls_splitter::after {
  left: 50%; top: 2px;
  width: 28px; height: 2px;
  transform: translateX(-50%);
}
/* When the media viewer is hidden the controls splitter has nothing to drag
   against; hide it. */
.pane-splitter.hidden { display: none; }

.rv {
  resize: vertical;
  overflow: hidden;
  position: relative
}

.rv::after {
  content: '=';
  position: absolute;
  right: 4px;
  bottom: 0;
  font-size: 18px;
  color: var(--cim-gray-400, #9ca3af);
  pointer-events: none;
  line-height: 1
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px
}

::-webkit-scrollbar-track {
  background: var(--cim-gray-800, #1f2937)
}

::-webkit-scrollbar-thumb {
  background: var(--cim-gray-600, #4b5563);
  border-radius: 3px
}

#editor_region.vertical {
  flex-direction: row
}

#editor_region.horizontal {
  flex-direction: column
}

#image_pane,
#book_reader {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0
}

/* The reader occupies the same slot as the image viewer, so it must inherit the
   same flex behaviour in BOTH editor_region orientations - otherwise switching
   to book mode in the horizontal (stacked) layout collapses it to zero height.
   Tailwind's flex-1 is `flex:1 1 0%`, which is close but not identical to the
   `auto` basis #image_pane relies on, so it's set explicitly here rather than
   left to a utility class. */

/* Reading surface. The measure is capped in ch (set by reader.js from the
   Measure slider) and centred; the column gap only matters in two-up mode. */
#reader_content {
  transition: font-size .12s ease, background .15s ease, color .15s ease;
  scroll-behavior: smooth;
}

#reader_content p {
  margin: 0 0 .85em;
  text-align: justify;
  hyphens: auto;
}

#reader_content h1,
#reader_content h2,
#reader_content h3 {
  font-weight: 700;
  line-height: 1.25;
  margin: 1.4em 0 .6em;
  text-align: left;
}

#reader_content blockquote {
  margin: 1em 0 1em 1.5em;
  padding-left: .9em;
  border-left: 2px solid currentColor;
  opacity: .8;
}

#reader_content img {
  max-width: 100%;
  height: auto;
}

/* Break-inside avoidance keeps a heading from being orphaned at the foot of a
   column in two-up mode. */
#reader_content h1,
#reader_content h2,
#reader_content h3,
#reader_content blockquote {
  break-inside: avoid;
}

.reader-page {
  image-rendering: auto;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}

#controls_pane {
  background: var(--cim-gray-900, #161c27)
}

#editor_region.vertical #controls_pane {
  width: 420px;
  min-width: 340px;
  max-width: 52%;
  height: 100%;
  border-left: 1px solid var(--cim-gray-700, #374151)
}

#editor_region.horizontal #controls_pane {
  width: 100%;
  height: 40%;
  min-height: 170px;
  border-top: 1px solid var(--cim-gray-700, #374151)
}

.tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--cim-gray-800, #1f2937);
  border: 1px solid var(--cim-gray-700, #374151);
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 12px;
  color: var(--cim-gray-200, #e5e7eb)
}

.tag-row:hover {
  border-color: var(--cim-gray-600, #4b5563)
}

.tag-row .tag-x {
  cursor: pointer;
  color: var(--cim-gray-400, #9ca3af);
  font-weight: 700;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0
}

.tag-row .tag-x:hover {
  color: var(--cim-danger-400, #f87171)
}

.tag-row .tag-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.tag-row .tag-edit {
  color: var(--cim-gray-200, #e5e7eb);
  font-size: 12px;
  padding: 0
}

.tag-row.tag-unconfirmed {
  border-style: dashed;
  border-color: var(--cim-warn-700, #b45309);
  background: color-mix(in srgb, var(--cim-warn-900, #78350f) 45%, var(--cim-gray-900, #111827))
}

.tag-row.tag-unconfirmed .tag-edit {
  color: var(--cim-warn-300, #fcd34d);
  font-style: italic
}

.tag-row .tag-ok {
  cursor: pointer;
  color: var(--cim-ok-400, #4ade80);
  font-weight: 700;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0
}

.tag-row .tag-ok:hover {
  color: var(--cim-ok-300, #86efac)
}

#meta_stars .star {
  cursor: pointer;
  color: var(--cim-gray-600, #4b5563);
  transition: color .08s
}

#meta_stars .star.on {
  color: var(--cim-warn-400, #fbbf24)
}

#meta_stars:hover .star {
  color: var(--cim-gray-600, #4b5563)
}

#meta_stars .star:hover,
#meta_stars .star:hover~.star {
  color: var(--cim-gray-600, #4b5563)
}

.iqa-stars {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(0, 0, 0, .7);
  border-radius: 99px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  color: #cbd5e1;              /* IQA estimate: muted */
  letter-spacing: 1px;
  line-height: 1.2
}
.iqa-stars-manual { color: var(--cim-warn-400, #fbbf24); }   /* a rating you set: amber */

/* A gallery view other than the grid is showing: the grid's own chrome
   (dropzone, pager, scroll) steps aside. Separate from .hidden so features.js
   and the album banner keep owning that class. */
.view-hidden {
  display: none !important
}

.gview-btn {
  padding-top: 2px;
  padding-bottom: 2px;
  border-left: 1px solid var(--cim-gray-600, #4b5563)
}

.gview-btn:first-child {
  border-left: 0
}
.gview-btn.gview-on { background: var(--cim-accent-600, #2563eb); color: #fff }
.gview-item { text-align: left; padding: 3px 8px; border-radius: 4px; font-size: 12px; color: var(--cim-gray-300, #d1d5db); white-space: nowrap }
.gview-item:hover { background: color-mix(in srgb, var(--cim-white, #fff) 8%, transparent) }
.gview-item-on { color: var(--cim-accent-300, #93c5fd); font-weight: 600 }

/* Folder breadcrumb + tree popover (gallery toolbar). */
.fcrumb { padding: 1px 3px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7rem; color: var(--cim-gray-300, #d1d5db) }
.fcrumb:hover { background: color-mix(in srgb, var(--cim-white, #fff) 10%, transparent); color: var(--cim-white, #fff) }
.fcrumb-cur { color: var(--cim-white, #fff); font-weight: 600 }
.fcrumb-sep { color: var(--cim-gray-500, #6b7280); padding: 0 1px }
.fcrumb-sub { color: var(--cim-accent-300, #93c5fd); font-size: 10px; padding: 0 2px }
.ftree-row { display: flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 4px; cursor: pointer; color: var(--cim-gray-300, #d1d5db); white-space: nowrap }
.ftree-row:hover { background: color-mix(in srgb, var(--cim-white, #fff) 8%, transparent) }
.ftree-row.ftree-on { color: var(--cim-accent-300, #93c5fd); font-weight: 600 }
.ftree-tw { width: 14px; flex-shrink: 0; text-align: center; color: var(--cim-gray-500, #6b7280) }
.ftree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.ftree-n { color: var(--cim-gray-500, #6b7280); font-size: 10px; flex-shrink: 0 }
#folder_tree_pop:not(.hidden) { display: flex }

/* The toolbar's "more" menu: module buttons stack as full-width menu rows,
   and the whole thing stays hidden while no module registered anything. */
.gallery-more:has(#gallery_more_pop:empty) { display: none }
#gallery_more_pop .cim-btn { width: 100%; justify-content: flex-start; text-align: left; background: transparent; border: 0; color: var(--cim-gray-300, #d1d5db); font-weight: 500 }
#gallery_more_pop .cim-btn:hover { background: color-mix(in srgb, var(--cim-white, #fff) 8%, transparent); color: var(--cim-white, #fff) }
#gallery_more_pop > * { width: 100% }

/* Tools inside the search box (sort, ...): small icon buttons. */
[data-ext-area="search_tools"] .cim-btn { padding: 0 4px; line-height: 1.4; background: transparent; border: 0 }
[data-ext-area="search_tools"] .cim-btn:hover { background: color-mix(in srgb, var(--cim-white, #fff) 8%, transparent) }
/* Settings: a compact one-line strip of small fields (section="system"). */
.settings-compact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 11px; color: var(--cim-gray-400, #9ca3af); }
.settings-compact-field { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.settings-compact-input { width: 7rem !important; padding: 2px 6px !important; font-size: 11px; }
.settings-compact-field input[type="text"].settings-compact-input { width: 14rem !important; }
.settings-compact-field input[type="checkbox"].settings-compact-input { width: auto !important; }

/* Settings: a pane the user may read but not save. */
.cim-read-only[data-settings-pane]::before {
  content: "Read only - you can view these settings but not change them.";
  display: block; margin-bottom: 8px; font-size: 11px; color: var(--cim-warn-400, #fbbf24);
}
/* Over a video while its browser copy is made (CIMVideo in gallery.js). */
.cim-video-notice { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 25;
  max-width: 80%; padding: 10px 14px; border-radius: 8px; text-align: center; font-size: 12px; line-height: 1.5;
  background: rgba(17, 24, 39, 0.9); color: #e5e7eb; }
.cim-video-notice a { color: var(--cim-accent-300, #93c5fd); text-decoration: underline; }