/* modal.css
   The big modals: the frame they share (modal-shell.js: overlay, panel, header with exit box,
   toolbar, scrolling list), the Talents / Traits browsers (talent-browser.js) and the Notes modal
   (notes-modal.js). Load after core.css, which supplies the tokens, .panel, .exit-button and the
   search bar. The notes' text uses the Rules page's markdown styles (.rules-content, rules.css). */

/* ---------------------------------------------------------------- */
/* Modals: the shell shared by the Talents / Traits browsers and the Notes   */
/* modal (modal-shell.js), then the browsers' rows, then the Notes styles.   */
/* ---------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 6, 13, 0.72);
  backdrop-filter: blur(3px);
  padding: 20px;
}

/* Same width as the sheet itself: .sheet-grid is 1280px less 24px padding a side. */
.modal-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1232px;
  max-height: calc(100vh - 40px);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  outline: none;
}

.modal-header {
  flex-shrink: 0;
}

/* No diagonal cut-off at the end of the bar (the usual .panel-header has one), so the exit box
   sits at the same 18px from the edge as the fields below it. The search bar's padding (below)
   and the compose box use the same 18px: right edges line up all the way down. */
.modal-box .modal-header {
  clip-path: none;
  margin-right: 0;
  padding-left: 18px;
  padding-right: 18px;
}

.modal-box .rules-search {
  padding-left: 18px;
  padding-right: 18px;
}

.modal-header .exit-button {
  width: 30px;
  height: 30px;
  background: var(--panel-bg);
}

.talent-browser-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.talent-browser-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.talent-browser-filter-label {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.talent-browser-count {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-dim);
}

.modal-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 12px;
}

.talent-browser-head,
.talent-browser-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.7fr 1.6fr;
  column-gap: 14px;
}

.talent-browser-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 10px 0 6px;
  background: var(--panel-bg);
}

.talent-browser-row {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border-soft);
  row-gap: 6px;
}

.talent-browser-row:last-child {
  border-bottom: none;
}

.talent-browser-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.talent-browser-cell {
  font-size: 13px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.talent-browser-desc {
  grid-column: 1 / -1;
}

.talent-browser-desc-label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.talent-browser-desc p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-line;
}

.modal-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--text-dim);
}

@media (max-width: 700px) {
  .talent-browser-head {
    display: none;
  }

  .talent-browser-row {
    grid-template-columns: 1fr 1fr;
  }

  .talent-browser-name {
    grid-column: 1 / -1;
  }
}

.modal-header .exit-button:hover {
  background: var(--danger-dim);
}

/* ---------------------------------------------------------------- */
/* Notes modal (Notes button in the Personal Data header)             */
/* Built on the talent browser's shell and list, the Rules page's      */
/* search bar and markdown text, and the menus' exit box.              */
/* ---------------------------------------------------------------- */
.modal-box.notes-modal {
  max-width: 760px;
}

.notes-compose {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.notes-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  padding: 6px 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--panel-bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
}

.notes-input:focus {
  border-color: var(--cyan);
}

.notes-list {
  padding-top: 12px;
}

/* One note. Its exit box (below) is grey and goes red when pointed at, like the menus'. */
.notes-entry {
  position: relative;
  margin: 0 0 12px;
  padding: 10px 44px 6px 14px;
  background: var(--panel-bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* The menus' exit box (.exit-button in core.css), small, in the corner. Its own hover is red. */
.notes-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px; /* 20% smaller than the header's exit box, so the two don't look alike */
  height: 24px;
}

.notes-delete .exit-icon {
  width: 16px;
  height: 16px;
}

.notes-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

.notes-edited {
  font-style: italic;
}

/* "Edit": a plain link-style button at the end of the time line, like the Description's more/less. */
.notes-edit {
  margin-left: auto;
  padding: 0 2px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--cyan);
  background: none;
  border: none;
  cursor: pointer;
}

.notes-edit:hover {
  text-decoration: underline;
}

.notes-edit:focus-visible {
  outline: 1px solid var(--cyan);
  border-radius: var(--radius);
}

.notes-editor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 0 8px;
}

.notes-edit-actions {
  display: flex;
  gap: 8px;
}

.notes-time {
  display: inline;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* The Rules page's markdown styles, at note size. */
.rules-content.notes-body {
  padding: 4px 0 6px;
  font-size: 14px;
  line-height: 1.5;
}

.rules-content.notes-body > :first-child {
  margin-top: 4px;
}

.rules-content.notes-body h1,
.rules-content.notes-body h2,
.rules-content.notes-body h3,
.rules-content.notes-body h4 {
  margin: 0.9em 0 0.4em;
  letter-spacing: 0.04em;
}

/* Sizes step down with the level (the colours and case come from the Rules page styles). */
.rules-content.notes-body h1 { font-size: 20px; }
.rules-content.notes-body h2 { font-size: 18px; }
.rules-content.notes-body h3 { font-size: 16px; }
.rules-content.notes-body h4 { font-size: 15px; }

/* Formatting toolbar over a Markdown text box (md-toolbar.js): style dropdown, then buttons. */
.md-toolbar {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.md-toolbar .md-style {
  flex: 0 0 auto;
  width: 130px;
  height: 30px;
  font-size: 13px;
}

.md-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--cyan-dim);
  border-radius: var(--radius);
  cursor: pointer;
}

.md-tool:hover {
  border-color: var(--cyan);
  background: rgba(56, 230, 207, 0.08);
}

.md-tool:focus-visible {
  outline: 1px solid var(--cyan);
}

.md-bold { font-weight: 800; }
.md-italic { font-style: italic; font-family: Georgia, serif; font-weight: 600; }

.md-strike { text-decoration: line-through; font-weight: 600; }

.md-sep {
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: var(--border);
}

.rules-content.notes-body hr { margin: 1.1em 0; }
.rules-content.notes-body blockquote { padding: 6px 14px; }