/* Nocturne Notes */

.nn-shell {
  --nn-ink: #e8e4ef;
  --nn-dim: #a89fb8;
  --nn-line: #3a3348;
  --nn-panel: #1c1824;
  --nn-accent: #8f7bd6;
  --nn-warn: #e0a33c;
  --nn-ok: #6fbf8a;
  --nn-danger: #d2607a;
  color: var(--nn-ink);
  max-width: 62rem;
}

.nn-shell h1 { font-size: 1.7rem; margin: 0 0 .35em; }
.nn-shell h2 { font-size: 1.15rem; margin: 1.6em 0 .5em; border-bottom: 1px solid var(--nn-line); padding-bottom: .3em; }
.nn-mast { margin: 0 0 1.6rem; }
.nn-kicker {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nn-accent);
  margin: 0 0 .45em;
}
.nn-lede { color: var(--nn-dim); margin: .4em 0 0; max-width: 38rem; }
.nn-attach-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  max-width: 46rem;
}
.nn-attach-row .nn-input { flex: 1 1 14rem; max-width: none; }
.nn-pending li {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .4em 0; border-bottom: 1px solid var(--nn-line);
}
.nn-hint { display: block; color: var(--nn-dim); font-size: .85em; margin-top: .3em; }
.nn-asyou { color: var(--nn-dim); margin: 0 0 1.2em; }

/* buttons */
.nn-btn {
  display: inline-block;
  padding: .55em 1.1em;
  border: 1px solid var(--nn-accent);
  border-radius: 4px;
  background: var(--nn-accent);
  color: #14101c;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.nn-btn:hover { filter: brightness(1.12); text-decoration: none; }
.nn-btn:disabled, .nn-btn[disabled] { opacity: .45; cursor: default; filter: none; }
.nn-btn-ghost { background: transparent; color: var(--nn-ink); border-color: var(--nn-line); }
.nn-btn-ghost:hover { border-color: var(--nn-accent); }
.nn-btn-danger { background: transparent; color: var(--nn-danger); border-color: var(--nn-danger); }
.nn-btn-danger:hover { background: var(--nn-danger); color: #14101c; }
.nn-btn-sm { padding: .35em .75em; font-size: .85em; }

.nn-tools, .nn-filters, .nn-actions, .nn-rowtools, .nn-statusbar, .nn-pager {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.nn-tools { margin: 0 0 1.5rem; }
.nn-filters { margin: 0 0 1rem; }
.nn-actions { margin: 2rem 0 0; }
.nn-statusbar { margin: 1.5rem 0; padding: .9rem; background: var(--nn-panel); border-radius: 5px; }
.nn-pager { margin: 1.2rem 0; }
.nn-pageno { color: var(--nn-dim); font-size: .9em; }

/* form */
.nn-row { margin: 0 0 1.2rem; }
.nn-row > label { display: block; font-weight: 600; margin-bottom: .35em; }
.nn-input {
  width: 100%;
  max-width: 34rem;
  padding: .55em .7em;
  border: 1px solid var(--nn-line);
  border-radius: 4px;
  background: #15111d;
  color: var(--nn-ink);
  font: inherit;
}
.nn-input:focus { outline: 2px solid var(--nn-accent); outline-offset: 1px; }
.nn-narrow { max-width: 7rem; display: inline-block; width: auto; }
.nn-area { max-width: 46rem; resize: vertical; }
.nn-check { display: block; margin: .5em 0; }
.nn-check label { margin-left: .4em; }
.nn-editor { max-width: 46rem; }
.nn-block {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem .2rem;
  border-left: 3px solid var(--nn-accent);
  background: var(--nn-panel);
  border-radius: 0 5px 5px 0;
}
.nn-block h2 { margin-top: 0; border: 0; }
.nn-consent { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--nn-line); }
.nn-soon { font-style: italic; }

/* the field no person sees, and no screen reader announces */
.nn-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* notices */
.nn-note { margin: 0 0 1.2rem; padding: .85em 1em; border-radius: 5px; border-left: 3px solid var(--nn-line); background: var(--nn-panel); }
.nn-note ul { margin: .5em 0 0; padding-left: 1.2em; }
.nn-note p { margin: 0; }
.nn-note-ok { border-left-color: var(--nn-ok); }
.nn-note-warn { border-left-color: var(--nn-warn); }
.nn-note-quiet { color: var(--nn-dim); }

.nn-done { padding: 2rem 0; }
.nn-done .nn-mast { margin-bottom: 1rem; }
.nn-done h2 { border: 0; color: var(--nn-accent); margin-top: 0; }

/* table */
.nn-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.nn-table th, .nn-table td { padding: .6em .55em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--nn-line); }
.nn-table th { font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--nn-dim); }
.nn-table tbody tr:hover { background: var(--nn-panel); }
.nn-ticket { font-family: ui-monospace, "Consolas", monospace; font-size: .88em; white-space: nowrap; }
.nn-when { color: var(--nn-dim); font-size: .88em; white-space: nowrap; }
.nn-subject { font-weight: 600; }
.nn-count { color: var(--nn-dim); font-size: .9em; margin: 0 0 .5rem; }

.nn-tag { font-size: .72em; text-transform: uppercase; letter-spacing: .05em; color: var(--nn-accent); }
.nn-tag-quiet { color: var(--nn-dim); }

.nn-chip {
  display: inline-block;
  padding: .2em .6em;
  border-radius: 999px;
  font-size: .78em;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--nn-line);
}
.nn-chip-new { border-color: var(--nn-accent); color: var(--nn-accent); }
.nn-chip-needsfollowup { border-color: var(--nn-warn); color: var(--nn-warn); }
.nn-chip-inprogress { border-color: #5fa8d3; color: #5fa8d3; }
.nn-chip-closed { color: var(--nn-dim); }
.nn-row-new td:first-child { box-shadow: inset 3px 0 0 var(--nn-accent); }
.nn-alert-row {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  background: var(--nn-panel);
  border-radius: 5px;
}
.nn-alert-label { margin-bottom: .4rem; }
.nn-checks label { margin-right: .9rem; white-space: nowrap; }
.nn-warn-inline { color: var(--nn-warn); }
.nn-reply { margin: 1.5rem 0; }
.nn-owner { white-space: nowrap; }

/* entry */
.nn-entry-head { margin: 0 0 1.5rem; }
.nn-ticket-big { font-family: ui-monospace, "Consolas", monospace; color: var(--nn-accent); margin: 0 0 .2em; letter-spacing: .05em; }
.nn-entry-meta { color: var(--nn-dim); font-size: .9em; margin: .2em 0 0; }
.nn-facts { display: grid; grid-template-columns: max-content 1fr; gap: .4em 1.2em; margin: 0 0 1.5rem; }
.nn-facts dt { color: var(--nn-dim); font-size: .9em; }
.nn-facts dd { margin: 0; }
.nn-body { padding: 1rem 1.2rem; background: var(--nn-panel); border-radius: 5px; line-height: 1.6; }
.nn-body :first-child { margin-top: 0; }
.nn-body :last-child { margin-bottom: 0; }
.nn-files { list-style: none; padding: 0; margin: 0; }
.nn-files li { padding: .4em 0; border-bottom: 1px solid var(--nn-line); }

.nn-notes, .nn-audit { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.nn-notes li { padding: .8em 1em; margin-bottom: .6em; background: var(--nn-panel); border-radius: 5px; border-left: 3px solid var(--nn-line); }
.nn-note-by { color: var(--nn-dim); font-size: .82em; margin: 0 0 .35em; }
.nn-note-text { margin: 0; }
.nn-audit li { padding: .35em 0; border-bottom: 1px solid var(--nn-line); font-size: .9em; }

@media (max-width: 40rem) {
  .nn-table thead { display: none; }
  .nn-table tr { display: block; padding: .7em 0; border-bottom: 1px solid var(--nn-line); }
  .nn-table td { display: block; border: 0; padding: .15em 0; }
  .nn-facts { grid-template-columns: 1fr; gap: .1em; }
  .nn-facts dt { margin-top: .6em; }
}