/* dimagine viewer stylesheet (app.css)
 *
 * Mobile-first, one layout at three widths (spec §3, §4):
 *   < 768px   phone:   bottom tab bar, 3-column grid
 *   768-1199  tablet:  icon rail, 4-6 columns
 *   >= 1200px desktop: pinned sidebar + inspector, 5-7 columns
 *
 * The images are the content; the chrome stays on one line per region at
 * every width, and the tiles never crop a picture (object-fit: contain).
 */

:root {
  color-scheme: light dark;

  /* Neutral greys with a slight cool bias, one accent for selection. */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-alt: #eef1f6;
  --border: #dde3ec;
  --text: #10151f;
  --text-muted: #5d6b80;
  --accent: #2f6fd0;
  --accent-text: #ffffff;
  --accent-soft: rgba(47, 111, 208, 0.1);
  --tile-bg: #e9edf3;
  --danger: #b4341f;
  --danger-soft: rgba(180, 52, 31, 0.08);

  /* System stack: no web font, so the viewer works offline. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The type scale is four sizes (spec §4). */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;

  --radius: 8px;
  --radius-sm: 5px;
  --gap: 10px;
  --pad: 12px;

  --sidebar-w: 240px;
  --rail-w: 60px;
  --inspector-w: 320px;
  --tabbar-h: 58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116;
    --surface: #161b22;
    --surface-alt: #1d232c;
    --border: #2a323d;
    --text: #e6edf3;
    --text-muted: #9aa7b6;
    --accent: #6ea8ff;
    --accent-text: #0b1220;
    --accent-soft: rgba(110, 168, 255, 0.14);
    --tile-bg: #1b212a;
    --danger: #ff8a72;
    --danger-soft: rgba(255, 138, 114, 0.12);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

h1 {
  font-size: var(--text-lg);
}

h2 {
  font-size: var(--text-sm);
}

p {
  margin: 0 0 0.5em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- shell */

.app-shell {
  min-height: 100vh;
  /* The grid scrolls under the tab bar, so the bar has its own space. */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

/* The no-login banner (--auth none): a full-width bar above the whole
   shell, never a column beside the rail or sidebar, so no page can be
   mistaken for a login-protected one at any width. */
.banner {
  margin: 0;
  padding: calc(var(--pad) / 2) var(--pad);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

/* The sign-in and setup pages (spec §4b): one centred card, the
   product's own type and themes, no chrome around it. */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: calc(var(--pad) * 1.5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-base);
}

.auth-card h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--pad);
}

.auth-card label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--pad);
}

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  background: var(--bg);
}

.auth-card button {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--pad);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
}

.auth-card label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.auth-card p {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* The column between the side columns takes the room that is left, so a page
   with no sidebar (the image page) still fills the width. */
.main-column {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* ------------------------------------------------------------- top bar */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px var(--pad);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.top-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-pill-container {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

a.search-pill-container:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.search-label::before {
  content: "\1F50D";
  margin-right: 6px;
}

.search-pill-container input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
}

.search-pill-container input:focus {
  outline: none;
}

.search-submit {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  color: var(--accent-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.toolbar-controls {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Below this width the field and the controls cannot share a line without one
   of them overflowing, so the search field takes its own line and the controls
   follow it. Both stay one line each, which is what the design asks for. */
@media (max-width: 520px) {
  .top-bar-row {
    flex-wrap: wrap;
  }

  .search-pill-container {
    flex: 1 1 100%;
  }

  .toolbar-controls {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

.result-count {
  font-variant-numeric: tabular-nums;
}

.sort-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.sort-select {
  min-height: 34px;
  max-width: 11rem;
  padding: 0 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
}

/* Without the script the select needs a way to submit itself. */
.sort-submit {
  min-height: 34px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.js .sort-submit {
  display: none;
}

.size-toggles {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.size-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 34px;
  padding: 0 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.size-toggle-btn + .size-toggle-btn {
  border-left: 1px solid var(--border);
}

.size-toggle-btn:hover {
  color: var(--accent);
  text-decoration: none;
}

.size-toggle-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* -------------------------------------------------------- scope chips */

.scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 2px 1px 8px;
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--text-xs);
}

.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: var(--accent);
  line-height: 1;
}

.chip-remove:hover {
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
}

/* --------------------------------------------------------- breadcrumbs */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px var(--pad);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.crumb-sep {
  color: var(--text-muted);
}

/* -------------------------------------------------------------- notices */

.notice-box {
  margin: var(--pad) var(--pad) 0;
  padding: 8px 12px;
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.notice-box ul {
  margin: 0;
  padding-left: 1.2em;
}

.collection-diagnostics {
  margin: 0 var(--pad);
  padding: 8px 12px;
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.error {
  color: var(--danger);
}

/* ---------------------------------------------------------------- grid */

.grid {
  display: grid;
  gap: var(--gap);
  padding: var(--pad);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.size-s {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.size-l {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tile-bg);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
}

a.tile:hover {
  border-color: var(--accent);
  text-decoration: none;
}

/* Square tile, whole picture: no cropping (spec §3, principle 4). */
.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tile.selected {
  border-color: var(--accent);
}

.tile-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 12px 6px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: #fff;
  font-size: var(--text-xs);
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile:hover .tile-caption,
.tile.selected .tile-caption {
  opacity: 1;
}

/* ------------------------------------------------------- cards & lists */

.folder-grid,
.collection-grid {
  display: grid;
  gap: var(--gap);
  padding: var(--pad);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.folder-card,
.collection-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  min-height: 7rem;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}

.folder-card:hover,
.collection-card:hover {
  border-color: var(--accent);
}

.card-glyph {
  width: 24px;
  height: 24px;
  fill: var(--text-muted);
  stroke: none;
}

.card-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--tile-bg);
  border-radius: var(--radius-sm);
}

.card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.card-count {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.folder-tree {
  padding: var(--pad) var(--pad) 0;
}

/* The folder tree indents by depth; the indent is set after the row's own
   padding so the two do not overwrite each other. */
.sidebar-row.folder-row {
  padding-left: calc(var(--depth, 0) * 14px + 8px);
}

.depth-0 {
  --depth: 0;
}

.depth-1 {
  --depth: 1;
}

.depth-2 {
  --depth: 2;
}

.depth-3 {
  --depth: 3;
}

.depth-4 {
  --depth: 4;
}

.depth-5 {
  --depth: 5;
}

.depth-6 {
  --depth: 6;
}

.tag-list {
  display: grid;
  gap: 2px;
}

.tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
}

.tag-row:hover {
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
}

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

.search-section {
  padding: var(--pad);
  border-bottom: 1px solid var(--border);
}

.search-section h2 {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.search-label {
  font-size: var(--text-sm);
}

.search-hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.recent-views-list {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--text-sm);
}

.empty-state {
  padding: 3rem var(--pad);
  color: var(--text-muted);
  text-align: center;
}

.empty-state h3 {
  margin-bottom: 6px;
  color: var(--text);
  font-size: var(--text-lg);
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 0 var(--pad) var(--pad);
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-sm);
}

.load-more-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* ---------------------------------------------------------- image page */

/* `width: 100%` matters: the page is a centred block, and without it the page
   shrinks to the width of its own content instead of filling the column. */
.image-page {
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--pad);
}

.image-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}

.image-detail-layout {
  display: flex;
  flex-direction: column;
  gap: var(--pad);
}

.image-stage {
  margin: 0;
}

.image-stage img {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background: var(--tile-bg);
  border-radius: var(--radius);
}

.image-panel {
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  padding: var(--pad);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.image-title {
  overflow-wrap: anywhere;
}

.image-path {
  flex: 1 1 auto;
  font-family: var(--mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.copy-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.copy-btn:hover {
  border-color: var(--accent);
}

.inspector-path-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.image-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--pad);
  border-top: 1px solid var(--border);
}

.image-section h2 {
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.image-section ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--text-sm);
}

.note-path,
.image-source {
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.note-body {
  font-size: var(--text-sm);
}

.note-body img {
  max-width: 100%;
  height: auto;
}

.properties {
  overflow: auto;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------- sidebar */

.desktop-sidebar,
.icon-rail,
.right-inspector {
  display: none;
}

.sidebar-brand {
  padding: 4px 8px;
  font-size: var(--text-base);
  font-weight: 700;
}

.sidebar-section {
  margin-bottom: 16px;
}

.sidebar-section-title {
  margin-bottom: 2px;
  padding: 4px 8px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sidebar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
}

.sidebar-row:hover {
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
}

.sidebar-row.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.sidebar-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-row-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.sidebar-row.active .sidebar-row-count {
  color: var(--accent);
}

.sidebar-empty {
  padding: 2px 8px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------- phone tab bar */

.bottom-tab-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.tab-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  color: var(--text-muted);
  font-size: 0.6875rem;
  text-align: center;
}

.tab-item:hover {
  color: var(--accent);
  text-decoration: none;
}

.tab-item.active {
  color: var(--accent);
  font-weight: 600;
}

.tab-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

/* --------------------------------------------------- tablet: 768-1199px */

@media (min-width: 768px) {
  .app-shell {
    display: flex;
    padding-bottom: 0;
  }

  .app-shell > .icon-rail {
    order: -1;
  }

  .bottom-tab-bar {
    display: none;
  }

  .icon-rail {
    position: sticky;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex: 0 0 var(--rail-w);
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: var(--rail-w);
    height: 100vh;
    padding: 10px 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
  }

  .rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-height: 44px;
    padding: 4px 2px;
    color: var(--text-muted);
    font-size: 0.625rem;
    text-align: center;
  }

  .rail-item:hover {
    color: var(--accent);
    text-decoration: none;
  }

  .rail-item.active {
    color: var(--accent);
    font-weight: 600;
  }

  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid.size-s {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid.size-l {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .folder-grid,
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .image-detail-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  /* The picture takes the room that is left; the panel is a fixed column, so a
     picture that has not loaded yet cannot squeeze it out of shape. */
  .image-stage {
    flex: 1 1 0;
    min-width: 0;
  }

  .image-panel {
    flex: 0 0 min(22rem, 100%);
  }
}

/* -------------------------------------------------- desktop: 1200px and up */

@media (min-width: 1200px) {
  .icon-rail {
    display: none;
  }

  .desktop-sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex: 0 0 var(--sidebar-w);
    flex-direction: column;
    width: var(--sidebar-w);
    height: 100vh;
    overflow-y: auto;
    padding: var(--pad);
    background: var(--surface);
    border-right: 1px solid var(--border);
  }

  .right-inspector {
    position: sticky;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex: 0 0 var(--inspector-w);
    flex-direction: column;
    width: var(--inspector-w);
    height: 100vh;
    overflow-y: auto;
    padding: var(--pad);
    background: var(--surface);
    border-left: 1px solid var(--border);
  }

  .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid.size-s {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid.size-l {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .folder-grid,
  .collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .right-inspector {
    justify-content: safe center;
  }

  .inspector-empty {
    margin: 0 auto;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  .inspector-preview-img {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: var(--pad);
    background: var(--tile-bg);
    border-radius: var(--radius);
    object-fit: contain;
  }

  .inspector-title {
    margin-bottom: 4px;
    font-size: var(--text-base);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .inspector-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: var(--pad);
    border-top: 1px solid var(--border);
  }

  .inspector-section h4 {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .inspector-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .inspector-tag {
    padding: 1px 6px;
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--text-xs);
  }

  .inspector-tag:hover {
    color: var(--accent);
    text-decoration: none;
  }
}

/* Without the inspector the grid gets the room instead. */
.inspector-collapsed .right-inspector {
  display: none;
}

@media print {
  .top-bar,
  .bottom-tab-bar,
  .icon-rail,
  .desktop-sidebar,
  .right-inspector,
  .pagination {
    display: none;
  }
}