/* ============================================================
   Smart Write — Library & Project screens
   Built on the app's tokens (variables.css). Calm · hairline.
   ============================================================ */

#app-root {
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  overflow-x: hidden;
}

#app-root:has(> .library),
#app-root:has(> .settings-page),
#app-root:has(> .project-workspace--media) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#app-root:has(> .library) > .library,
#app-root:has(> .settings-page) > .settings-page,
#app-root:has(> .project-workspace--media) > .project-workspace--media {
  height: 100%;
}

#app-root:has(> .project-shell) {
  overflow: hidden;
}

/* Breadcrumb in the header */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-faint);
  min-width: 0;
}
.breadcrumb__crumb {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  padding: 2px 0;
  white-space: nowrap;
  transition: color .15s ease;
}
.breadcrumb__crumb:hover { color: var(--text); }
.breadcrumb__crumb--current { color: var(--text); cursor: default; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  color: var(--text-faint);
  opacity: .6;
}

/* ============================================================
   Buttons (content-area)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); border-color: var(--hairline-strong); }
.btn .ico { flex-shrink: 0; }
.btn--primary { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); color: var(--app-bg-base); }
.btn--soft { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.btn--soft:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.btn--success { background: #22c55e33; color: #16a34a; border-color: transparent; }
.btn--success:hover { background: color-mix(in srgb, #22c55e 22%, transparent); color: #15803d; }
.btn--danger { color: var(--danger); border-color: transparent; }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.btn--sm { padding: 4px 10px; font-size: 12px; gap: 5px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-faint); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }

/* ============================================================
   Library
   ============================================================ */
.library {
  max-width: 1320px;
  margin: 0 auto;
  padding: 30px 34px 0;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

/* Authors sidebar + main grid */
.lib-body {
  display: flex;
  align-items: stretch;
  gap: 28px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.lib-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 80px;
  -webkit-overflow-scrolling: touch;
}

.pen-names {
  flex: 0 0 168px;
  width: 168px;
  flex-shrink: 0;
  align-self: flex-start;
}
.pen-names__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.pen-names__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 9px 0px 18px;
}
.pen-names__add { width: 28px; height: 28px;     padding: 0px 0 13px; }
.pen-names__nav { display: flex; flex-direction: column; gap: 2px; }
.pen-names__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  padding: 7px 9px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.pen-names__item:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
}
.pen-names__item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.pen-names__item .avatar { flex-shrink: 0; }
.pen-names__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pen-names__count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.pen-names__item.active .pen-names__count { color: color-mix(in srgb, var(--accent) 70%, var(--text-faint)); }
.pen-names__manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  transition: color .14s ease;
}
.pen-names__manage:hover { color: var(--text-dim); }

.proj-card__author {
  margin: 2px 0 0;
  min-height: 1.35em;
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-card__author:empty { visibility: hidden; }

@media (max-width: 900px) {
  .library { padding: 22px 18px 0; }
  .lib-body { flex-direction: column; gap: 18px; }
  .pen-names {
    width: 100%;
    flex: none;
  }
  .pen-names__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pen-names__item { width: auto; max-width: 100%; }
  .pen-names__manage { margin-top: 10px; }
}

.lib-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.lib-head__title { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.lib-head__sub { margin: 5px 0 0; color: var(--text-dim); font-size: 13.5px; }
.lib-head__share { flex-shrink: 0; }
.lib-head__share-actions { display: flex; align-items: center; gap: 8px; }
.lib-head__share-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lib-head__share-mode { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.lib-head__share-stack > .btn--soft,
.lib-head__share-actions > .btn--soft {
  width: 6.75rem;
  justify-content: center;
}

.lib-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--input-bg); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 0 10px; height: 36px; min-width: 240px; flex: 1 1 240px; max-width: 360px;
  color: var(--text-faint); transition: border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text-dim); }
.search input { border: none; background: none; outline: none; flex: 1; color: var(--text); font-size: 13px; }
.search input::placeholder { color: var(--text-faint); }

.segmented {
  display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden;
}
.segmented button {
  border: none; background: transparent; color: var(--text-dim);
  padding: 8px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s ease, color .14s ease;
}
.segmented button + button { border-left: 1px solid var(--hairline); }
.segmented button:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.segmented button.active { background: var(--accent-soft); color: var(--accent); }

.toolbar-spacer { flex: 1; }

.sort-select {
  background: var(--input-bg); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  color: var(--text-dim); padding: 8px 10px; font-size: 12.5px; cursor: pointer; height: 36px;
}
.sort-select:focus { outline: none; border-color: var(--accent); }

/* Filter pills */
.filter-row { display: flex; gap: 7px; margin: 0 0 22px; flex-wrap: wrap; }
.filter-pill {
  border: 1px solid var(--hairline); background: transparent; color: var(--text-dim);
  border-radius: 18px; padding: 5px 13px; font-size: 12px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.filter-pill:hover { border-color: var(--hairline-strong); color: var(--text); }
.filter-pill.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ============================================================
   Covers
   ============================================================ */
.cover {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--cv-bg, var(--raised-bg));
  box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
  display: flex; flex-direction: column;
}
.cover__motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.cover__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover--image { box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.cover__type {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 13% 12% 14%; color: var(--cv-fg, #e7e8ea);
}
.cover__series { font-size: clamp(6px, 2.2cqw, 9px); letter-spacing: .22em; opacity: .72; font-weight: 600; margin-bottom: auto; }
.cover__rule { width: 26px; height: 1.5px; background: currentColor; opacity: .5; margin: 0 0 9% ; }
.cover__title {
  font-family: "Literata", "Lora", Georgia, serif;
  font-weight: 500; line-height: 1.12; letter-spacing: -0.01em;
  font-size: clamp(13px, 9cqw, 30px);
  text-wrap: balance;
}
.cover__author { margin-top: auto; font-size: clamp(7px, 3.2cqw, 12px); letter-spacing: .04em; opacity: .82; font-style: italic; font-family: "Lora", serif; }
.cover__booknum { font-size: clamp(6px, 2.4cqw, 9px); letter-spacing: .24em; opacity: .55; margin-top: 7%; font-weight: 600; }
.cover { container-type: inline-size; }

.cover--sm { width: 46px; border-radius: var(--radius-xs); flex-shrink: 0; }
.cover--sm .cover__type { padding: 10% 9%; }
.cover--sm .cover__series, .cover--sm .cover__author, .cover--sm .cover__booknum { display: none; }
.cover--sm .cover__rule { width: 40%; margin-bottom: 8%; height: 1px; }
.cover--sm .cover__title { font-size: clamp(5px, 17cqw, 11px); line-height: 1.05; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.cover--lg { width: 100%; }

/* ============================================================
   Project cards (grid)
   ============================================================ */
.card-grid {
  display: grid; gap: 26px 22px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.proj-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.proj-card__cover-wrap { position: relative; transition: transform .2s ease; }
.proj-card:hover .proj-card__cover-wrap { transform: translateY(-4px); }
.proj-card:hover .cover { box-shadow: 0 12px 30px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05); }
.proj-card__more {
  position: absolute; top: 7px; right: 7px; z-index: 4;
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  background: color-mix(in srgb, #000 42%, transparent); color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transform: scale(.9); transition: opacity .15s ease, transform .15s ease, background .15s ease;
  backdrop-filter: blur(3px);
}
.proj-card:hover .proj-card__more, .proj-card__more:focus-visible { opacity: 1; transform: scale(1); }
.proj-card__more:hover { background: color-mix(in srgb, #000 60%, transparent); }

.proj-card__published-badge,
.proj-card__shared-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 4;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px color-mix(in srgb, #000 25%, transparent);
  pointer-events: none;
}
.proj-card__published-badge {
  background: #0ea5e9;
}
.proj-card__shared-badge {
  background: #64748b;
}
.proj-card__published-badge .ico,
.proj-card__shared-badge .ico { stroke: #fff; }

.proj-card__body {
  padding: 11px 2px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.proj-card__title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  height: 2.5em;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.proj-card__series {
  font-size: 11px;
  color: var(--text-faint);
  margin: 3px 0 0;
  min-height: 1.35em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proj-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 1.35em;
}
.proj-card__meta .status-chip { flex-shrink: 0; }
.proj-card__stat {
  font-size: 11.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.proj-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: .6;
  flex-shrink: 0;
}
.proj-card__chips {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  flex-wrap: nowrap;
  align-items: center;
  height: 22px;
  min-height: 22px;
  overflow: hidden;
}
.proj-card__pbar { margin-top: auto; padding-top: 10px; }

/* status & genre chips */
.status-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip, var(--text-faint)); flex-shrink: 0; }
.genre-chip {
  font-size: 10.5px; border-radius: 5px; padding: 2px 7px;
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-dim); white-space: nowrap;
}
.tag-chip {
  font-size: 10.5px; border-radius: 5px; padding: 2px 7px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); white-space: nowrap;
}

.pbar { height: 4px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.pbar__fill { height: 100%; background: var(--accent); border-radius: 3px; }
.pbar__fill--over { background: var(--ec-place); }

/* Progress ring */
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { position: absolute; inset: 0; }
.ring__label { font-size: 10.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ============================================================
   Shelves (series rows)
   ============================================================ */
.shelf { margin-bottom: 40px; }
.shelf__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 23px;
  user-select: none;
  cursor: pointer;
}
.shelf__head-actions,
.shelf__title-link,
.shelf__toggle { cursor: pointer; }
.shelf--collapsed .shelf__head { margin-bottom: 0; }
.shelf__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.16s ease, background 0.16s ease, transform 0.22s ease;
}
.shelf__toggle:hover {
  color: var(--text);
  background: var(--surface-raised, rgba(255, 255, 255, 0.04));
}
.shelf__body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}
.shelf--animating .shelf__body {
  transition: grid-template-rows 0.28s ease, opacity 0.22s ease;
}
.shelf--collapsed .shelf__body {
  grid-template-rows: 0fr;
  opacity: 0;
}
.shelf__body-inner { overflow: hidden; min-height: 0; }
.shelf__spine { width: 3px; height: 17px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.shelf__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 9px; }
.shelf__title-link { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.shelf__title-link:hover { text-decoration: underline; }
.series-nav__swatch { width: 40px; height: 56px; border-radius: 4px; flex-shrink: 0; }
.membership-picker__lead { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; }
.scrapbook-types .pen-names__ic { display: inline-flex; opacity: 0.7; }
.shelf__badge { font-size: 11px; color: var(--accent); background: var(--accent-soft); border-radius: 12px; padding: 2px 9px; font-weight: 600; }
.shelf__meta { font-size: 12px; color: var(--text-faint); }
.shelf__head-actions { margin-left: auto; display: flex; gap: 6px; }
.shelf__row {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  margin-top: 4px;
}
.shelf--standalone .shelf__spine { background: var(--text-faint); }

/* drag state */
.proj-card.dragging { opacity: .4; }
.proj-card.drop-target .proj-card__cover-wrap { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Empty / section helpers */
.section-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; font-weight: 600; }
.empty-state { text-align: center; color: var(--text-faint); padding: 60px 20px; }
.empty-state h3 { color: var(--text-dim); font-weight: 600; margin: 0 0 6px; }
.empty-state p { margin: 0 0 18px; font-size: 13px; }

/* New-project tile */
.new-tile {
  aspect-ratio: 2/3; border: 1.5px dashed var(--hairline-strong); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  color: var(--text-faint); cursor: pointer; background: transparent;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.new-tile:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.new-tile span { font-size: 12.5px; font-weight: 500; }
.new-tile--asset {
  aspect-ratio: auto;
  min-height: 148px;
  width: 100%;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Popover menu
   ============================================================ */
.popmenu {
  position: fixed; z-index: 200; min-width: 196px;
  background: var(--raised-bg); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0,0,0,.4);
  padding: 6px; animation: pop .12s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.popmenu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; position: relative;
  transition: background .12s ease, color .12s ease;
}
.popmenu__item:hover { background: var(--accent-soft); color: var(--accent); }
.popmenu__item .ico { color: var(--text-faint); flex-shrink: 0; }
.popmenu__item:hover .ico { color: var(--accent); }
.popmenu__icon-gap { width: 16px; flex-shrink: 0; }
.popmenu__item span:nth-child(2) { flex: 1; }
.popmenu__trailing { font-size: 11px; color: var(--text-faint); }
.popmenu__item--danger { color: var(--danger); }
.popmenu__item--danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.popmenu__item--danger .ico { color: var(--danger); }
.popmenu__divider { height: 1px; background: var(--hairline); margin: 5px 4px; }
.popmenu__header { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: 7px 10px 4px; }
.popmenu__item--has-sub .popmenu__sub {
  position: absolute; left: 100%; top: -6px; margin-left: 4px; display: none;
  min-width: 150px; background: var(--raised-bg); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0,0,0,.4); padding: 6px;
}
.popmenu__item--has-sub:hover .popmenu__sub { display: block; }

/* ============================================================
   Modal & toast
   ============================================================ */
.modal-overlay {
  /* Above ui-loader (200000) so prompts opened during boot remain interactive */
  position: fixed; inset: 0; z-index: 200100; background: color-mix(in srgb, #000 52%, transparent);
  display: grid; place-items: center; backdrop-filter: blur(2px); animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal-card {
  max-width: 94vw; max-height: 88vh; overflow: auto;
  background: var(--panel-bg); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.45); animation: rise .16s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
.modal-head h2 { font-size: 15px; font-weight: 600; }
.modal-body { padding: 18px; }
.modal-text { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin: 0; }
.modal-content-row { display: flex; align-items: flex-start; gap: 14px; }
.modal-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.modal-icon--danger { background: color-mix(in srgb, var(--danger, #e5484d) 14%, transparent); color: var(--danger, #e5484d); }
.modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--hairline); }

/* ============================================================
   Project details — layout
   ============================================================ */
.project-shell {
  display: grid;
  grid-template-columns: var(--sidebar-open-default-width) minmax(0, 1fr);
  height: calc(100vh - var(--header-height));
  overflow: hidden;
  min-height: 0;
}
.project-nav {
  border-right: 1px solid var(--hairline); padding: 22px 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px; background: var(--panel-bg); z-index: 8;
}
.project-nav__mini { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; }
.project-nav__mini .cover { width: 40px; }
.project-nav__mini-text { min-width: 0; }
.project-nav__mini-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-nav__mini-sub { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  padding: 9px 11px; border-radius: var(--radius-sm); font-size: 13.5px; position: relative;
  transition: background .14s ease, color .14s ease;
  background: var(--app-bg-base);
}
.nav-item .ico { color: var(--text-faint); flex-shrink: 0; }
.nav-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.nav-item.active .ico { color: var(--accent); }
.nav-item__count { margin-left: auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.nav-item.active .nav-item__count { color: var(--accent); }
.nav-item__badge {
  margin-left: auto; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 4px; padding: 2px 6px; font-weight: 600;
}
.nav-item--soon { opacity: .82; }
.nav-item--soon.active { opacity: 1; }
.project-nav__spacer { flex: 1; }
.project-nav__foot { border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 8px; }

.project-main {
  overflow-y: auto;
  padding: 32px 40px 80px;
  min-height: 0;
  height: 100%;
}
.project-main__inner { max-width: 880px; margin: 0 auto; }

/* Character & place detail sheets — header + aside fixed, form column scrolls */
.project-main:has(.character-view--page),
.project-main:has(.place-view--page) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 32px;
}
.project-main:has(.character-view--page) .project-main__inner,
.project-main:has(.place-view--page) .project-main__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.project-main:has(.character-view--page) .screen-head,
.project-main:has(.place-view--page) .screen-head {
  flex-shrink: 0;
}
.project-main:has(.character-view--page) .sheet,
.project-main:has(.place-view--page) .sheet {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.project-main:has(.character-view--page) .sheet-aside,
.project-main:has(.place-view--page) .sheet-aside {
  position: static;
}
.project-main:has(.character-view--page) .sheet-main,
.project-main:has(.place-view--page) .sheet-main {
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 48px;
}

/* Analysis chat — fill viewport below header/nav; composer fixed, answers scroll */
.project-main:has(.analysis-view) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}
.project-main:has(.analysis-view) .project-main__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.project-workspace {
  position: relative;
  min-width: 0;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}
.project-workspace .project-main {
  height: 100%;
  transition: margin .18s ease;
}
.project-workspace .plot-panel,
.project-workspace .media-panel,
.project-workspace .panel--notes {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
}
.project-workspace .panel--right.plot-panel,
.project-workspace .panel--right.media-panel {
  right: 3px;
}
.project-workspace .panel--notes {
  left: 0;
  z-index: 1;
}
.project-workspace:has(.panel--right.plot-panel:not(.is-closed):not(.is-hidden):not(.panel--wide)) .project-main,
.project-workspace:has(.panel--right.media-panel:not(.is-closed):not(.is-hidden):not(.panel--wide)) .project-main {
  margin-right: var(--panel-width-details-effective, min(38vw, 360px));
}
.project-workspace:has(.panel--notes:not(.is-closed):not(.is-hidden)) .project-main {
  margin-left: var(--panel-width-notes-effective, var(--panel-width));
}

.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.screen-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.screen-head__sub { color: var(--text-dim); font-size: 13px; margin: 4px 0 0; }
.screen-head__actions { display: flex; gap: 8px; }

/* ============================================================
   Overview screen
   ============================================================ */
.overview { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 38px; align-items: start; }
.ov-cover-col { position: sticky; top: 0; }
.ov-cover-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ov-cover-actions .btn { justify-content: center; }
.ov-start-writing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ov-start-writing__lead {
  font-family: "Idiqlat", sans-serif;
  font-size: 22px;
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ov-start-writing__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.ov-start-writing__action .ico { flex-shrink: 0; }
.ov-start-writing:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  border-color: var(--hairline-strong);
}
.ov-start-writing:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.ov-title-row { display: flex; align-items: flex-start; gap: 10px; }
.editable-title {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
  border: none; background: none; color: var(--text); width: 100%; padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-xs);
  font-family: inherit; resize: none; overflow: hidden;
}
.editable-title:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.editable-title:focus { outline: none; background: var(--input-bg); box-shadow: 0 0 0 1px var(--hairline-strong); }
.ov-author { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13.5px; margin-top: 6px; flex-wrap: wrap; }
.ov-author-select {
  min-width: 160px;
  max-width: 280px;
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-style: italic;
  padding: 6px 10px;
  cursor: pointer;
}
.ov-author-select:hover { border-color: var(--hairline-strong); }
.ov-author-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.ov-series-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.field { margin-top: 24px; }
.field__label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 9px; }
.field textarea, .field input[type="text"], .field input[type="number"], .field input[type="date"], .field select {
  width: 100%; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 10px 12px;
  font: inherit; font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { line-height: 1.65; resize: vertical; min-height: 92px; font-family: "Source Sans 3", sans-serif; }
.field textarea:focus, .field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
@media (max-width: 720px) { .ov-grid { grid-template-columns: 1fr; } }

/* status / genre editors */
.status-picker { display: flex; gap: 7px; flex-wrap: wrap; }
.status-opt {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hairline);
  background: transparent; color: var(--text-dim); border-radius: var(--radius-sm); padding: 7px 11px;
  font-size: 12.5px; cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
.status-opt:hover { border-color: var(--hairline-strong); color: var(--text); }
.status-opt.active { background: var(--accent-soft); border-color: transparent; color: var(--text); }
.status-opt .status-dot { width: 8px; height: 8px; }

.tag-editor { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-dim);
  border-radius: 6px; padding: 4px 4px 4px 9px;
}
.tag--genre { background: var(--accent-soft); color: var(--accent); }
.tag--custom { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-dim); }
.tag button { border: none; background: none; color: var(--text-faint); cursor: pointer; display: inline-flex; padding: 2px; border-radius: 4px; }
.tag button:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.tag-add { border: 1px dashed var(--hairline-strong); background: none; color: var(--text-faint); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.tag-add:hover { border-color: var(--accent); color: var(--accent); }
.tag-input {
  flex: 1 1 120px; min-width: 100px; border: 1px solid var(--hairline-strong);
  background: var(--surface); color: var(--text); border-radius: 6px;
  padding: 4px 10px; font-size: 12px;
}
.tag-input:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   Stats screen
   ============================================================ */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat-card {
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 17px; background: var(--panel-bg);
}
.stat-card__value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-card__label { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.stat-card__sub { font-size: 11px; color: var(--text-faint); margin-top: 3px; }

.goal-panel {
  display: flex; align-items: center; gap: 22px; border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 22px 24px; background: var(--panel-bg); margin-bottom: 22px;
}
.goal-panel__ring { flex-shrink: 0; }
.goal-panel__body { flex: 1; min-width: 0; }
.goal-panel__title { font-size: 14px; font-weight: 600; }
.goal-panel__line { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.goal-panel__bar { margin-top: 12px; }

.chapter-bars { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.chapter-bar { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 12px; }
.chapter-bar__name { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-bar__track { height: 8px; background: var(--hairline); border-radius: 4px; overflow: hidden; }
.chapter-bar__fill { height: 100%; background: color-mix(in srgb, var(--ec-chapter) 70%, transparent); border-radius: 4px; }
.chapter-bar__val { font-size: 12px; color: var(--text-faint); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   Plot screen
   ============================================================ */
.plot-page-surface {
  position: relative;
  /* Plot-line lanes left; thread lanes right (outside part/act cards). */
  padding-left: var(--plot-lines-margin, 72px);
  padding-right: 56px;
  min-height: 480px;
  --plt-act-child-indent: 50px;
}

plot-editor-mount {
  margin-left: 40px !important;
}

.plot-editor-mount {
  position: relative;
  z-index: 2;
}

.plot-lines-gutter {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.plot-line-root {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: all;
  cursor: pointer;
}

.plot-line-label {
  position: absolute;
  font-size: 10px;
  font-family: var(--font-ui);
  white-space: nowrap;
  pointer-events: all;
  cursor: pointer;
}

.plot-line-lane {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  pointer-events: all;
  cursor: pointer;
}

.plot-line-stub {
  position: absolute;
  height: 2px;
  pointer-events: all;
  cursor: pointer;
}

.plot-page-surface .entity-mark.entity-plot-line {
  padding: 5px 8px;
  font-size: 10px;
  color: var(--plot-line-color, #6b93c4);
  opacity: 0.8;
  border-radius: var(--radius);
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
  border: 1px solid var(--plot-line-color, #6b93c4);
  background: transparent;
  cursor: pointer;
}

.plot-page-surface .entity-mark.entity-plot-line:hover {
  opacity: 1;
}

.plot-line-pin {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: all;
  cursor: pointer;
}

.plot-colour-popover {
  position: absolute;
  z-index: 30;
  pointer-events: all;
}

.plot-colour-popover .plot-colour-mixer {
  --colour-mixer-trigger: 14px;
  --colour-mixer-swatch: 14px;
  --colour-mixer-arm-cross: 14px;
  --colour-mixer-radius: 50%;
}

.plot-colour-popover .plot-colour-mixer .colour-mixer__trigger {
  border: none;
  box-shadow: none;
}

.plot-colour-popover .plot-colour-mixer:hover .colour-mixer__trigger,
.plot-colour-popover .plot-colour-mixer:focus-within .colour-mixer__trigger {
  border: none;
  box-shadow: none;
}

.plot-part--dimmed {
  opacity: 0;
}

.plot-panel .plot-details__section {
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.plot-panel .plot-details__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.plot-panel .plot-details__heading {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.plot-panel .plot-details__toggle-all {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.plot-panel .plot-details__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plot-panel .plot-details__lines--dragging {
  user-select: none;
}

.plot-panel .plot-details-line__drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--text-faint);
  cursor: grab;
  touch-action: none;
}

.plot-panel .plot-details-line__drag-handle .ico {
  opacity: 0.55;
}

.plot-panel .plot-details-line__drag-handle:active {
  cursor: grabbing;
}

.plot-panel .plot-details-line__drop-gap {
  flex-shrink: 0;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--hairline));
  transition: height 180ms ease;
  pointer-events: none;
}

.plot-panel .plot-details-line--drag-source,
.plot-details-line--drag-source {
  display: none;
}

.plot-panel .plot-details-line__ghost,
.plot-details-line__ghost {
  position: fixed;
  z-index: 100000;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 12px 28px rgb(0 0 0 / 22%);
  opacity: 0.92;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-bg);
  box-sizing: border-box;
}

.plot-details-line__ghost .plot-details-line__summary {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  list-style: none;
  user-select: none;
  height: 100%;
}

.plot-details-line__ghost .plot-details-line__summary::-webkit-details-marker {
  display: none;
}

.plot-details-line__ghost .plot-details-line__chevron,
.plot-details-line__ghost .plot-details-line__drag-handle {
  display: flex;
  align-items: center;
  color: var(--text-faint);
}

.plot-details-line__ghost .plot-details-line__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.plot-panel .plot-details-line {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-bg);
  overflow: hidden;
}

.plot-panel .plot-details-line:has(.colour-mixer--arm-open),
.plot-panel .plot-details-line:has(.colour-mixer--mixer-open),
.plot-panel .plot-details-line:has(.colour-mixer:hover),
.plot-panel .plot-details-line:has(.colour-mixer:focus-within) {
  overflow: visible;
  z-index: 4;
}

.plot-panel .plot-details__lines:has(.colour-mixer--arm-open),
.plot-panel .plot-details__lines:has(.colour-mixer--mixer-open),
.plot-panel .plot-details__lines:has(.colour-mixer:hover),
.plot-panel .plot-details__lines:has(.colour-mixer:focus-within) {
  overflow: visible;
}

.plot-panel .panel__body:has(.colour-mixer--arm-open),
.plot-panel .panel__body:has(.colour-mixer--mixer-open),
.plot-panel .panel__body:has(.colour-mixer:hover),
.plot-panel .panel__body:has(.colour-mixer:focus-within) {
  overflow: visible;
}

.plot-panel .plot-details-line--selected {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

.plot-panel .plot-details-line__summary {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.plot-panel .plot-details-line__summary::-webkit-details-marker {
  display: none;
}

.plot-panel .plot-details-line__chevron {
  display: flex;
  align-items: center;
  color: var(--text-faint);
}

.plot-panel .plot-details-line__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.plot-panel .plot-details-line__hide--off {
  opacity: 0.35;
}

.plot-panel .plot-details-line__body {
  padding: 10px 10px 10px 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--hairline);
}

.plot-panel .plot-details-line__field {
  margin: 0;
}

.plot-panel .plot-details-line__field .field__label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.plot-panel .plot-details-line__name,
.plot-panel .plot-details-line__description {
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}

.plot-panel .plot-details-line__description {
  min-height: 6.5em;
  resize: vertical;
  line-height: 1.5;
}

.plot-panel .plot-details-line__name--fixed {
  color: var(--text);
  background: var(--surface-2, var(--bg-soft));
  cursor: default;
}

.plot-panel .plot-details-line__drag-spacer,
.plot-panel .plot-details-line__delete-spacer {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.plot-panel .plot-details-line--main .plot-details-line__title {
  font-weight: 600;
}

.plot-panel .plot-details__empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-faint);
}

.plot-screen__head {
  padding: 0 28px;
  margin-bottom: 16px;
}

.project-main:has(.plot-grid-screen) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 16px;
}
.project-main:has(.plot-grid-screen) .project-main__inner {
  max-width: none;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.plot-grid-screen {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;

}
.plot-grid-screen .plot-screen__head {
  flex: 0 0 auto;
  padding: 0 4px;
  margin-bottom: 10px;
}
.plot-grid-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

html.plot-grid-popout .app-header {
  display: none !important;
}
html.plot-grid-popout #app-root {
  height: 100vh;
}
html.plot-grid-popout .project-shell {
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
}
html.plot-grid-popout .project-nav {
  display: none !important;
}
html.plot-grid-popout .project-workspace .project-main {
  margin-left: 0;
}
.plot-grid-toolbar__btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.plot-grid-toolbar__field {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.plot-grid-toolbar__num {
  width: 56px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: inherit;
  padding: 4px 6px;
  font: inherit;
}
.plot-grid-surface {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.plot-grid-viewport {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  background: var(--app-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.plot-grid-details-session[hidden] {
  display: none !important;
}
.panel-content:has(.plot-panel-grid-details),
.plot-panel-grid-details {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.plot-panel .panel-content:has(.blocks-carousel),
.panel-content:has(.plot-panel-grid-details .blocks-carousel) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Part card styling — plotPart paragraphs in the plot editor */
.plot-page-surface .ProseMirror p.plot-part-card,
.plot-page-surface .ProseMirror span.plot-part-card,
.plot-page-surface .ProseMirror .plot-block-row--part-card .plot-block-body,
.plot-page-surface .ProseMirror .plot-block-row.plot-part-card .plot-block-body {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel-bg);
  padding: 15px 16px;
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  font-family: "Source Sans 3", sans-serif;
}

.plot-page-surface .ProseMirror span.plot-part-card {
  display: block;
}

.plot-page-surface .ProseMirror .plot-block-row--part-card .plot-block-content,
.plot-page-surface .ProseMirror .plot-block-row.plot-part-card .plot-block-content {
  margin: 0;
  padding: 0;
}

.plot-page-surface .ProseMirror p.plot-part-card:hover,
.plot-page-surface .ProseMirror span.plot-part-card:hover,
.plot-page-surface .ProseMirror .plot-block-row--part-card .plot-block-body:hover,
.plot-page-surface .ProseMirror .plot-block-row.plot-part-card .plot-block-body:hover {
  border-color: var(--hairline-strong);
}

.plot-page-surface .ProseMirror .plot-block-row {
  display: grid;
  align-items: start;
  gap: 6px;
  margin: 0 0 10px;
  position: relative;
  grid-auto-flow: column;
  justify-content: start;
  grid-template-columns: auto 25px 1fr 20px;
}

.plot-page-surface .ProseMirror .plot-block-row.chapter-hidden {
  display: none;
}

.plot-block-tab {
  flex-shrink: 0;
  width: 25px;
}

.plot-block-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  align-content: flex-start;
}

h2.plot-block-content.chapter-head.entity-section.entity-plot-section,
h2.plot-block-content.chapter-head.entity-section.entity-plot-section-head,
.plot-page-surface .ProseMirror h2.plot-block-content {
  display: flex;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.35;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 20px;
  align-items: center;
}

.plot-page-surface .ProseMirror h2.plot-block-content br {
  display: block;
  content: "";
}

.plot-block-fold {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.plot-block-fold-btn {
  position: static;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  user-select: none;
}

.plot-block-fold-btn .ui-caret { color: inherit; }
.plot-block-fold-btn:hover { color: var(--text); }

.plot-block-content {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.plot-block-delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-xs, 4px);
}

.plot-block-delete:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.plot-block-delete[hidden],
.plot-drag-handle[hidden] {
  visibility: hidden ;
}

.plot-block-tab    { grid-column: 1; }
.plot-drag-handle  { grid-column: 2; }
.plot-block-body   { grid-column: 3; }
.plot-block-delete { grid-column: 4; }


.plot-drag-handle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 0;
  border: none;
  /* background: 
color-mix(in srgb, var(--text) 6%, transparent); */
  border-radius: var(--radius-xs, 4px);
  color: var(--text-dim);
  cursor: grab;
  touch-action: none;
}

.plot-drag-handle .ico {
  opacity: 0.55;
}

.plot-drag-handle:active {
  cursor: grabbing;
}

.plot-drag-spacer {
  margin-left: 0;
}

.plot-drag-spacer--source {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, var(--hairline));
}

.plot-drag-ghost--in-act {
  transition: margin-left 120ms ease;
}

.plot-drag-ghost--out-act {
  transition: margin-left 120ms ease;
}

.plot-act { margin-bottom: 30px; }
.plot-act__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.plot-act__label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.plot-act__head input.plot-act__label {
  flex: 0 1 auto;
  min-width: 80px;
  border: none;
  background: none;
  font: inherit;
  padding: 0;
  margin: 0;
}
.plot-act__head input.plot-act__label:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.plot-act__head input.plot-act__label:focus { outline: none; background: var(--input-bg); color: var(--text); border-radius: var(--radius-xs); padding: 2px 4px; margin: -2px -4px; }
.plot-act__head .ui-caret {
  flex-shrink: 0;
  margin-right: 2px;
}
.plot-act--collapsed .plot-act__head .ui-caret {
  transform: rotate(-90deg);
}
.plot-ungrouped { margin-top: 10px; margin-bottom: 10px; }
.plot-act--collapsed .plot-act__list { display: none; }
.plot-act__head { cursor: pointer; }
.plot-act__line { flex: 1; height: 1px; background: var(--hairline); }
.beat {
  display: flex; gap: 14px; padding: 15px 16px; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--panel-bg); margin-bottom: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.beat:hover { border-color: var(--hairline-strong); }
.plot-part-drag-source { pointer-events: none; }
.plot-block-shift { will-change: transform; }
.plot-drag-ghost {
  position: fixed;
  z-index: 100000;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  box-sizing: border-box;
  box-shadow: 0 12px 28px rgb(0 0 0 / 22%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel-bg);
  overflow: hidden;
}

.plot-drag-ghost p.plot-part-card,
.plot-drag-ghost span.plot-part-card,
.plot-drag-ghost .plot-block-row--part-card .plot-block-body,
.plot-drag-ghost .plot-block-row.plot-part-card .plot-block-body {
  border: none;
  margin: 0;
  padding: 15px 16px;
  background: none;
}

.plot-drag-ghost .plot-block-row {
  display: flex;
  gap: 6px;
  margin: 0;
}

.plot-drag-ghost .plot-drag-handle,
.plot-drag-ghost .plot-block-delete,
.plot-drag-ghost .plot-block-tab {
  display: none;
}

.plot-drag-ghost h2,
.plot-drag-ghost .plot-block-content {
  background: none;
  padding: 4px 8px;
  margin: 0;
}
.beat__handle { color: var(--text-faint); cursor: grab; padding-top: 2px; flex-shrink: 0; }
.beat__handle:active { cursor: grabbing; }
.beat__body { flex: 1; min-width: 0; }
.beat__title { font-size: 14.5px; font-weight: 600; }
.beat__title input { width: 100%; border: none; background: none; color: var(--text); font: inherit; font-weight: 600; font-size: 14.5px; padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-xs); }
.beat__title input:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.beat__title input:focus { outline: none; background: var(--input-bg); }
.beat__desc { width: 100%; border: none; background: none; color: var(--text-dim); font: inherit; font-size: 13px; line-height: 1.6; resize: none; overflow: hidden; padding: 4px; margin: 4px -4px -4px; border-radius: var(--radius-xs); font-family: "Source Sans 3", sans-serif; }
.beat__desc:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.beat__desc:focus { outline: none; background: var(--input-bg); color: var(--text); }
.beat__del { flex-shrink: 0; }
.beat-add { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

.plot-part-mount {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-left: 30px;
  margin-left: -30px;
}
.plot-part-mount .ProseMirror {
  width: 100%;
  border: none;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  min-height: 1.6em;
  outline: none;
  padding: 4px;
  margin: 4px -4px -4px;
  border-radius: var(--radius-xs);
  font-family: "Source Sans 3", sans-serif;
}
.plot-part-mount .ProseMirror:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.plot-part-mount .ProseMirror-focused { background: var(--input-bg); color: var(--text); }
.plot-ungrouped__list--empty {
  min-height: 8px;
  margin-bottom: 10px;
}

.plot-inherited-card {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.plot-inherited-card h3 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.plot-inherited-row {
  font-size: 13px;
  color: var(--text-dim);
  padding: 4px 0;
}
.plot-overview-group {
  margin-bottom: 14px;
}
.plot-overview-group summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  margin-bottom: 6px;
}
.plot-overview-group summary::-webkit-details-marker { display: none; }
.plot-overview-group:not([open]) summary .ui-caret { transform: rotate(-90deg); }
.plot-overview-part {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 13px;
  /* border-bottom: 1px solid var(--hairline); */
margin-left: 10px; 
  background-color: var(--input-bg);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.plot-overview-part p {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Editor details panel — parts only get card styling; plain lines stay unboxed */
.plot-panel-overview .plot-part-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel-bg);
  padding: 15px 16px;
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  font-family: "Source Sans 3", sans-serif;
}

.plot-panel-overview .plot-part-card p {
  margin: 0;
}

.plot-panel-overview .plot-panel-line {
  margin: 0 0 1.05em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  font-family: "Source Sans 3", sans-serif;
}

.plot-panel-overview .plot-overview-act .plot-panel-line,
.plot-panel-overview .plot-overview-act .plot-part-card {
  margin-left: var(--plt-act-child-indent, 24px);
}

.plot-panel-overview .plot-part-card p + p {
  margin-top: 8px;
}

/* ============================================================
   Asset cards (characters, places, notes, scrapbook)
   ============================================================ */
.asset-grid {
  display: grid;
  gap: 26px 22px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.asset-card { position: relative; }
.asset-card--clickable { cursor: pointer; }
.asset-card--has-actions { cursor: default; }

.asset-card__media-wrap {
  position: relative;
  transition: transform .2s ease;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
.asset-card__more {
  position: absolute; top: 7px; right: 7px; z-index: 4;
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  background: color-mix(in srgb, #000 42%, transparent); color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transform: scale(.9); transition: opacity .15s ease, transform .15s ease, background .15s ease;
  backdrop-filter: blur(3px);
}
.asset-card:hover .asset-card__more,
.asset-card__more:focus-visible { opacity: 1; transform: scale(1); }
.asset-card__more:hover { background: color-mix(in srgb, #000 60%, transparent); }
.asset-card--clickable:hover .asset-card__media-wrap {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Strip — notes, places, plots (~2 lines tall) */
.asset-card__media--strip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.asset-card__strip-icon {
  display: inline-flex;
  opacity: .82;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.asset-card__map-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--map-base);
}
.asset-card__map-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Portrait — characters with photo or initials */
.asset-card__media--portrait {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--raised-bg);
}
.asset-card__media--portrait.asset-card__media--sm { aspect-ratio: 1 / 1; max-height: 108px; min-width: 100% !important;}
.asset-card__media--portrait.asset-card__media--md { aspect-ratio: 1 / 1; }
.asset-card__media--portrait.asset-card__media--lg { aspect-ratio: 3 / 4; }


.asset-card__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.asset-card__media--blank {
  display: grid;
  place-items: center;
}
.asset-card__stock-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.asset-card__stock-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
}
.asset-card__initials {
  position: relative;
  z-index: 2;
  font-size: clamp(22px, 18cqw, 42px);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ac-fg, var(--text));
  font-family: "Literata", "Lora", Georgia, serif;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.asset-card__media--portrait { container-type: inline-size; }

/* Place / character card — fill the portrait frame */
.asset-card__media--portrait > .place-icon--fill,
.asset-card__media--portrait > .avatar--fill {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
}

.asset-card__body { padding: 11px 2px 0; min-width: 0; }
.asset-card--clickable .asset-card__body { cursor: pointer; }
.asset-card--clickable:hover .asset-card__title { color: var(--accent); }

.asset-card__title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.asset-card__subtitle {
  font-size: 11.5px;
  color: var(--accent);
  margin: 3px 0 0;
  line-height: 1.3;
}
.asset-card__excerpt {
  font-size: 12px;
  color: var(--text-dim);
  margin: 7px 0 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.asset-card__chips {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 22px;
}
.asset-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 2px 0;
}
.asset-card__ref-badge {
  width: 100%;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 2px;
}
.asset-outcome-actions {
  display: contents;
}
.sheet--place { grid-template-columns: 200px minmax(0, 1fr); }

/* Character sheet (add/edit) */
.sheet { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 34px; align-items: start; }
.sheet-aside { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sheet-main .field:first-child { margin-top: 0; }
.sheet-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.sheet-two > .field { margin-top: 0; }
.sheet-main > * + .sheet-two { margin-top: 24px; }
@media (max-width: 760px) {
  .sheet { grid-template-columns: 1fr; }
  .sheet-aside { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  .project-main:has(.character-view--page) .sheet,
  .project-main:has(.place-view--page) .sheet {
    grid-template-rows: auto 1fr;
  }
}

.rel-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.rel-row select, .rel-row input { margin: 0; }
.linkchip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.linkchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: color-mix(in srgb, var(--ec-chapter) 16%, transparent); color: var(--ec-chapter); border-radius: 6px; padding: 4px 9px; }

/* ============================================================
   File operations list
   ============================================================ */
.file-ops { display: flex; flex-direction: column; gap: 8px; }
.file-op {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--panel-bg); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.file-op:hover { border-color: var(--hairline-strong); background: color-mix(in srgb, var(--text) 3%, transparent); }
.file-op__ic { color: var(--text-dim); flex-shrink: 0; display: inline-flex; }
.file-op__text { flex: 1; min-width: 0; }
.file-op__title { display: block; font-size: 13.5px; font-weight: 600; }
.file-op__desc { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.file-op__trailing { color: var(--text-faint); }
.file-op .ico:last-child { color: var(--text-faint); flex-shrink: 0; }
.file-op--danger { }
.file-op--danger:hover { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.file-op--danger .file-op__ic { color: var(--danger); }
.file-op--danger .file-op__title { color: var(--danger); }

/* ============================================================
   Tweak-driven variants
   ============================================================ */
body.density-compact .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 16px; }
body.density-compact .shelf__row { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px; }
body.density-compact .asset-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 16px; }
body.density-compact .asset-card__media--portrait.asset-card__media--md { max-height: 148px; }
body.density-compact .asset-card__media--portrait.asset-card__media--lg { max-height: 168px; }
body.cover-square .cover:not(.cover--sm) { aspect-ratio: 1 / 1; }
body.cover-square .new-tile { aspect-ratio: 1 / 1; }
body.cover-square .asset-card__media--portrait.asset-card__media--md,
body.cover-square .asset-card__media--portrait.asset-card__media--lg { aspect-ratio: 1 / 1; }
body.asset-media-sm .asset-card__media--portrait.asset-card__media--md { aspect-ratio: 1 / 1; max-height: 120px; }
body.asset-media-sm .asset-card__media--portrait.asset-card__media--lg { aspect-ratio: 1 / 1; max-height: 132px; }
body.asset-media-lg .asset-card__media--portrait.asset-card__media--md { aspect-ratio: 3 / 4; }
body.asset-media-lg .asset-card__media--portrait.asset-card__media--lg { aspect-ratio: 2 / 3; }

/* ============================================================
   Tweaks panel
   ============================================================ */
.tweaks {
  position: fixed; right: 18px; bottom: 18px; z-index: 250; width: 270px;
  background: var(--raised-bg); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.45); overflow: hidden;
}
.tweaks[hidden] { display: none; }
.tweaks__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.tweaks__head h2 { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.tweaks__body { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.tweak-row label { display: block; font-size: 11.5px; color: var(--text-dim); margin-bottom: 8px; }
.tweak-seg { display: flex; border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; }
.tweak-seg button { flex: 1; border: none; background: transparent; color: var(--text-dim); padding: 7px 6px; font-size: 12px; cursor: pointer; }
.tweak-seg button + button { border-left: 1px solid var(--hairline); }
.tweak-seg button.active { background: var(--accent-soft); color: var(--accent); }
.tweak-swatches { display: flex; gap: 8px; }
.tweak-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.tweak-swatch.active { border-color: var(--text); box-shadow: 0 0 0 1px var(--hairline-strong); }

/* Responsive */
@media (max-width: 860px) {
  .overview { grid-template-columns: 1fr; }
  .ov-cover-col { position: static; max-width: 220px; }
  .project-shell { grid-template-columns: 64px minmax(0,1fr); }
  .project-nav { padding: 18px 8px; }
  .nav-item span:not(.nav-item__count):not(.nav-item__caret):not(.ui-caret), .project-nav__mini-text, .nav-item__count { display: none; }
  .nav-item { justify-content: center; }
}