/* ============================================================
   homebrew.css — the home screen's Homebrew section: its file tree

   Loaded after campaigns.css, and borrowing the home page's header and panel
   language so the third section reads as part of the same page. The rows lean
   on the Browse list's folder headers (sidebar.css) in spirit — the same
   caret, the same hover-only ✎ / ✕ — but live on a page, not a panel, so they
   are sized for it.
   ============================================================ */

#homebrew-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 4px;
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--emboss-hi);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Only the tree background says "top level"; a folder row says "in here". */
#homebrew-tree.hb-drop {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.homebrew-empty { padding: 24px 12px; }

/* ─── ROWS ───────────────────────────────────────────────── */
.hb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 8px;
  /* Indented by depth — the tree is one flat list of rows, not nested boxes,
     so a deep folder never squeezes its own contents. */
  padding-left: calc(8px + var(--depth, 0) * 20px);
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 13px;
  color: var(--text);
  cursor: grab;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
}
.hb-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--border);
}
.hb-row.hb-dragging { opacity: 0.4; border-style: dashed; border-color: var(--border2); }

.hb-folder { cursor: pointer; }
.hb-folder .hb-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.hb-folder.hb-drop {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* A file lines up under its folder's name, not its caret. */
.hb-file { padding-left: calc(8px + 17px + var(--depth, 0) * 20px); }

.hb-caret { width: 9px; font-size: 10px; color: var(--text-dim); flex-shrink: 0; }

.hb-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Which characters carry a custom item — secondary, so it gives way first. */
.hb-detail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  color: var(--text-dim);
}

.hb-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.hb-kind {
  margin-left: auto;
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--border2);
  border-radius: 2px;
}
.hb-detail + .hb-kind { margin-left: 0; }

/* ─── FOLDER ACTIONS ─────────────────────────────────────── */
.hb-actions { display: flex; gap: 2px; flex-shrink: 0; }
.hb-btn {
  width: 22px;
  height: 22px;
  font-size: 12px;
  line-height: 1;
  border-radius: 2px;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.hb-row:hover .hb-btn,
.hb-btn:focus-visible { opacity: 1; }
.hb-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.hb-btn.danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* No hover on a touch screen, so the actions stay visible there. */
@media (hover: none) {
  .hb-btn { opacity: 1; }
}

/* An entry of this account's own opens in the editor on a click. */
.hb-file.hb-editable { cursor: pointer; }
.hb-file.hb-editable:hover .hb-name { color: var(--accent); }

/* ─── THE NEW HOMEBREW PANEL ─────────────────────────────── */
/* A large sheet, not the item editor's 580px: a class's twenty levels want the
   room. It keeps one width across both faces so picking a kind doesn't make
   the panel jump. */
.modal-box.homebrew-box {
  width: 880px;
  max-height: 90vh;
  padding: 22px 28px 0;
  display: flex;
  flex-direction: column;
}
.homebrew-box h2 { font-size: 20px; }

.hb-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  font-size: 14px;
  color: var(--text-dim);
}
.hb-close:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

#homebrew-picker { padding-bottom: 28px; }

#homebrew-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 6px;
}

.hb-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 108px;
  padding: 18px 18px 16px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 4px;
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--emboss-hi);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.hb-pick:hover,
.hb-pick:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep), inset 0 1px 0 var(--emboss-hi);
}
.hb-pick-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--accent);
}
.hb-pick-blurb { font-size: 12px; line-height: 1.5; color: var(--text-dim); }

/* The editor face: the form scrolls, the footer stays put under it. */
#homebrew-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
#homebrew-editor.hidden { display: none; }
#homebrew-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 12px 0;
}
#homebrew-editor .modal-footer {
  margin-top: 0;
  padding: 12px 0 18px;
  border-top: 1px solid var(--border);
}
/* Back / Delete on the left, the commit on the right. */
#homebrew-save-btn { margin-left: auto; }

.hb-field.hidden { display: none; }
.hb-field textarea { resize: vertical; }

/* Checkbox pills — abilities, skills, spell lists, components. */
.hb-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 12px;
  background: var(--field);
  border: 1px solid var(--border2);
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, background 0.12s;
}
.hb-check:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--field));
}
.hb-check:has(input:disabled) { opacity: 0.45; cursor: default; }
.hb-check input { width: 14px; height: 14px; margin: 0; }

/* The item shape grid. */
.hb-shape-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; }
.hb-shape-weight { margin-left: 8px; font-size: 12px; color: var(--text-dim); }
.hb-shape-grid { display: grid; gap: 2px; width: fit-content; }
.hb-shape-grid .shape-cell { width: 26px; height: 26px; padding: 0; }

/* ─── LEVEL BY LEVEL ─────────────────────────────────────── */
/* Twenty bands, like the class table in the book: an empty level is one quiet
   line, a level with features opens up to hold them. */
.hb-levels {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
}
.hb-level {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.hb-level:first-child { border-top: none; }
.hb-level:not(.empty) { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); padding-bottom: 10px; }

.hb-level-head { display: flex; align-items: center; gap: 12px; min-height: 28px; }
/* Inside a `.field`, whose `span` rule would uppercase every label here. */
.field .hb-level-head span { text-transform: none; letter-spacing: normal; white-space: nowrap; }
.field .hb-level-num {
  width: 64px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.field .hb-level.empty .hb-level-num { color: var(--text-dim); }
.field .hb-level-pb { width: 104px; font-size: 11px; font-weight: 400; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.field .hb-level-summary { flex: 1; font-size: 11px; font-weight: 400; font-style: italic; color: var(--text-dim); }
.hb-level-add { font-size: 11px; padding: 3px 9px; }
.hb-level.empty .hb-level-add { opacity: 0.6; }
.hb-level:hover .hb-level-add { opacity: 1; }

/* One feature or trait. */
.hb-part {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent-soft);
  border-radius: 3px;
}
.hb-part-head { display: flex; align-items: center; gap: 8px; }
.hb-part-head input[type=text] { flex: 1; min-width: 0; font-weight: 600; }
.hb-part textarea { width: 100%; resize: vertical; }
.hb-part-level { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); }
.hb-part-level input { width: 56px; }
.hb-part-remove {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 3px;
  font-size: 12px;
  color: var(--text-dim);
}
.hb-part-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.hb-part-flag { margin: 0; font-size: 12px; color: var(--text-dim); }

.hb-trait-list { margin-bottom: 8px; }
.hb-trait-list .hb-part:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .modal-box.homebrew-box { padding: 18px 16px 0; }
  #homebrew-pick-grid { grid-template-columns: 1fr 1fr; }
  .field .hb-level-pb { display: none; }
}
@media (max-width: 460px) {
  #homebrew-pick-grid { grid-template-columns: 1fr; }
  #homebrew-form .form-two-col { grid-template-columns: 1fr; }
}

/* ─── WHO IT IS ENABLED FOR ──────────────────────────────── */
/* Chips on a tree row: a campaign's filled (the whole table), a character's
   outlined (one person), one inherited from a folder above dimmed. */
.hb-chips { display: inline-flex; gap: 4px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.hb-chips:empty { display: none; }
.hb-chip {
  flex-shrink: 0;
  max-width: 140px;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border2));
  border-radius: 9px;
}
.hb-chip.campaign {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.hb-chip.inherited { opacity: 0.55; }
.hb-chip.more { color: var(--text-dim); border-color: var(--border2); background: none; }

/* The folder row's font is the display face; chips keep the body face. */
.hb-folder .hb-chip { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

/* A file row's actions sit after its kind tag. */
.hb-file .hb-actions { margin-left: 2px; }

/* The modal. */
.hb-access-group { margin-bottom: 14px; }
.hb-access-group .field-label { display: block; margin-bottom: 6px; }
.hb-access-hint {
  margin-left: 6px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
  opacity: 0.8;
}
.hb-access-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
}
.hb-access-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hb-access-row input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.hb-access-row.inherited { cursor: default; color: var(--text-dim); }
.hb-access-name { min-width: 0; overflow-wrap: anywhere; }
.hb-access-detail { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; }