/*
 * The left rail (§2 of the handoff).
 *
 * Same rule as `shell.css`: roles from `tokens.css`, never a literal colour, so
 * the ink theme reaches every line of it. The local custom properties below are
 * geometry the handoff names and the token file does not carry -- row padding,
 * the 11px order-number column, the 21px indent the detail hangs from, dot
 * sizes and the mono letter-spacings.
 */

.novely-rail {
  --rail-pad-x: 16px;
  --rail-row-y: 9px;
  --rail-order-w: 11px;
  --rail-indent: 21px;
  --rail-sub-indent: 30px;
  --rail-dot: 5px;
  --rail-track: 0.09em;
  --rail-track-tight: 0.06em;

  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--rail-row-y);
  overflow: auto;
  font-family: var(--font-ui);
}

/* ------------------------------------------------------------------------ */
/* Section headers                                                            */
/* ------------------------------------------------------------------------ */

.novely-rail-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 8px var(--rail-pad-x);
}

.novely-rail-head-references {
  padding-top: 18px;
  padding-bottom: 6px;
}

.novely-rail-label {
  font: 500 var(--size-10-5) / 1 var(--font-mono);
  letter-spacing: var(--rail-track);
  text-transform: uppercase;
  color: var(--muted-4);
}

/*
 * The label doubles as the section's collapse control, so it is a button --
 * and it has to look like the label it replaced, to the pixel.
 */
.novely-rail-label-button {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.novely-rail-label-button:hover {
  color: var(--text);
}

/* The one key shown rather than tooltipped: mono, because the handoff's type
 * scale gives keys to the mono face, and quiet enough to read past. */
.novely-rail-key {
  font: 400 var(--size-9-5) var(--font-mono);
  color: var(--muted-7);
  letter-spacing: var(--rail-track-tight);
}

.novely-rail-gap {
  flex: 1;
}

.novely-rail-hint {
  font: 400 var(--size-10) var(--font-mono);
  color: var(--muted-6);
}

/*
 * The book's total, at the head of the list it is the total of.
 *
 * It is also the count's control -- pressing it switches words for manuscript
 * pages -- so it has to look like the hint beside it and not like a button.
 */
.novely-rail-total {
  padding: 0;
  font: 400 var(--size-10) var(--font-mono);
  color: var(--muted-6);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.novely-rail-total:hover {
  color: var(--text);
}

.novely-rail-plus {
  width: 20px;
  height: 20px;
  flex: none;
  font: 400 13px var(--font-mono);
  color: var(--muted-5);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.novely-rail-plus:hover {
  background: var(--row-active-strong);
  color: var(--text);
}

.novely-rail-plus-small {
  width: 18px;
  height: 18px;
  font-size: var(--size-12);
  color: var(--muted-7);
  border-radius: var(--r-code);
}

.novely-rail-chevron {
  font: 400 var(--size-10) var(--font-mono);
  color: var(--muted-5);
  background: transparent;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
}

.novely-rail-chevron:hover {
  color: var(--text);
}

/* ------------------------------------------------------------------------ */
/* Chapter rows                                                               */
/* ------------------------------------------------------------------------ */

.novely-rail-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.novely-rail-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--rail-row-y) var(--rail-pad-x) 10px;
  border-left: 2px solid transparent;
}

.novely-rail-row:hover {
  background: var(--row-hover);
}

.novely-rail-row-open {
  background: var(--row-active);
  border-left-color: var(--text);
}

.novely-rail-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.novely-rail-order {
  width: var(--rail-order-w);
  flex: none;
  font: 400 var(--size-10-5) var(--font-mono);
  color: var(--muted-4);
}

.novely-rail-title {
  flex: 1;
  min-width: 0;
  text-align: left;
  font: 400 var(--size-12-5) var(--font-ui);
  color: var(--muted-1);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.novely-rail-row-open .novely-rail-title {
  font-weight: 500;
  color: var(--text);
}

.novely-rail-words {
  font: 400 var(--size-10) var(--font-mono);
  color: var(--muted-5);
}

.novely-rail-count-view {
  border: 0;
  background: transparent;
  color: var(--muted-4);
  font: 400 var(--size-10) var(--font-mono);
  padding: 1px 3px;
  cursor: pointer;
}

.novely-rail-words-bar {
  display: block;
  width: 3px;
  height: 5px;
  border-radius: 3px;
  background: var(--border-hover);
}

.novely-rail-dot {
  width: var(--rail-dot);
  height: var(--rail-dot);
  flex: none;
  border-radius: 50%;
  background: var(--muted-5);
}

.novely-rail-dot-new {
  background: var(--border-hover);
}

.novely-kind-proved {
  background: var(--kind-proved);
}

.novely-kind-violated {
  background: var(--kind-violated);
}

.novely-kind-observed {
  background: var(--kind-observed);
}

/* -- the detail cycle ---------------------------------------------------- */

.novely-rail-logline {
  margin: 0 0 0 var(--rail-indent);
  font-family: var(--font-prose);
  font-size: var(--size-12-5);
  line-height: 1.5;
  color: var(--muted-3);
  text-wrap: pretty;
}

.novely-rail-logline-empty {
  font-family: var(--font-mono);
  font-size: var(--size-10);
  color: var(--muted-6);
}

.novely-rail-cast {
  margin-left: var(--rail-indent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.novely-rail-cast-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font: 400 var(--size-11) var(--font-ui);
}

.novely-rail-cast-name {
  color: var(--muted-3);
}

/* POV is bold rather than first: the order is presence, and moving the POV to
   the front would hide the chapter where the POV character barely appears. */
.novely-rail-cast-pov {
  font-weight: 600;
  color: var(--secondary);
}

.novely-rail-cast-second {
  color: var(--muted-1);
}

.novely-rail-cast-kind {
  margin-left: 4px;
  font: 400 var(--size-9-5) var(--font-mono);
  color: var(--muted-5);
}

.novely-rail-cast-empty,
.novely-rail-setting {
  font: 400 var(--size-10) var(--font-mono);
  color: var(--muted-5);
}

/* ------------------------------------------------------------------------ */
/* References                                                                 */
/* ------------------------------------------------------------------------ */

.novely-rail-references {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

.novely-rail-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 3px var(--rail-pad-x);
}

.novely-rail-group-name {
  flex: 1;
  text-align: left;
  font: 400 var(--size-9-5) var(--font-mono);
  letter-spacing: var(--rail-track-tight);
  text-transform: uppercase;
  color: var(--muted-7);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.novely-rail-group-name:hover {
  color: var(--muted-3);
}

/*
 * A row with three hit targets. The name is the wide one; the chevron and the
 * `▯` are small, separate and labelled, so what happens depends on what you
 * pressed rather than on where in a row you happened to land.
 */
.novely-rail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--rail-pad-x);
  border-left: 2px solid transparent;
}

.novely-rail-item:hover {
  background: var(--row-hover-strong);
}

.novely-rail-item-open {
  background: var(--row-active-strong);
  border-left-color: var(--border-hover);
}

.novely-rail-item-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  font: 400 var(--size-12) var(--font-ui);
  color: var(--muted-1);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.novely-rail-item-open .novely-rail-item-name {
  font-weight: 500;
  color: var(--text);
}

.novely-rail-count {
  font: 400 var(--size-9-5) var(--font-mono);
  color: var(--muted-5);
}

.novely-rail-expand,
.novely-rail-companion {
  flex: none;
  font: 400 var(--size-10) var(--font-mono);
  color: var(--muted-6);
  background: transparent;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
}

.novely-rail-expand:hover,
.novely-rail-companion:hover {
  color: var(--text);
}

.novely-rail-open-label {
  font: 400 var(--size-9-5) var(--font-mono);
  color: var(--muted-5);
}

.novely-rail-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px var(--rail-pad-x) 4px var(--rail-sub-indent);
}

.novely-rail-child:hover {
  background: var(--row-hover-strong);
}

.novely-rail-child-name {
  flex: 1;
  text-align: left;
  font: 400 var(--size-11-5) var(--font-ui);
  color: var(--muted-3);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.novely-rail-empty {
  margin: 4px var(--rail-pad-x) 8px;
  font: 400 var(--size-10) / 1.5 var(--font-mono);
  color: var(--muted-6);
  text-wrap: pretty;
}

/* -- creating and renaming ----------------------------------------------- */

.novely-rail-draft {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px var(--rail-pad-x);
  background: var(--row-active);
}

.novely-rail-draft-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 12px 6px var(--rail-pad-x);
  padding: 7px 10px;
  background: var(--page);
  border: 1px dashed var(--border);
  border-radius: var(--r-row);
}

/*
 * The name field. A caret in a line of the rail, not a dialogue -- because the
 * thing being named is a file, and the name is a line in it.
 */
.novely-rail-name-field {
  flex: 1;
  min-width: 0;
  font: 400 var(--size-12) var(--font-ui);
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-hover);
  border-radius: 0;
  padding: 0 0 1px;
  outline: none;
}

.novely-rail-draft-group .novely-rail-name-field {
  font: 400 var(--size-9-5) var(--font-mono);
  letter-spacing: var(--rail-track-tight);
  text-transform: uppercase;
  border-bottom: 0;
}

/* ------------------------------------------------------------------------ */
/* Foot                                                                       */
/* ------------------------------------------------------------------------ */

.novely-rail-spacer {
  flex: 1;
}

.novely-rail-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--rail-pad-x);
  border-top: 1px solid var(--hairline);
}

.novely-rail-foot-note {
  flex: 1;
  font: 400 var(--size-10) / 1.5 var(--font-mono);
  color: var(--muted-6);
}

.novely-rail-chip {
  font: 400 var(--size-10) var(--font-mono);
  color: var(--muted-4);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 4px 8px;
  cursor: pointer;
}

.novely-rail-chip:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

/* ------------------------------------------------------------------------ */
/* Reordering (§2): a line between rows, and what the move reported           */
/* ------------------------------------------------------------------------ */

/*
 * The drop is drawn as a rule on the edge the chapter would land against,
 * never as a lit-up row: the author is putting a chapter *between* two others,
 * and a highlighted row would be saying "into this one", which is a different
 * operation. The rule is a pseudo-element with `pointer-events: none` so that
 * the affordance can never eat the dragover it was drawn from.
 */
.novely-rail-row[draggable='true'] {
  cursor: grab;
}

.novely-rail-row[data-dragging='true'] {
  opacity: 0.45;
}

.novely-rail-row[data-drop] {
  position: relative;
}

.novely-rail-row[data-drop]::after {
  content: '';
  position: absolute;
  left: var(--rail-pad-x);
  right: 10px;
  height: 2px;
  background: var(--text);
  pointer-events: none;
}

.novely-rail-row[data-drop='before']::after {
  top: -1px;
}

.novely-rail-row[data-drop='after']::after {
  bottom: -1px;
}

/*
 * The structure note: `Moved 3 chapters · Undo`.
 *
 * In the flow at the foot of the application, and the application's column
 * gives up the height for it -- nothing in this interface floats over the
 * manuscript, and a restructure is not the exception that earns the first
 * popup. It is also not the editor's undo: mixing a reorder into the text
 * history means the author's next ⌘Z sometimes moves a chapter (§20.1).
 */
.novely-app[data-structure='open'] .novely-shell-frame {
  height: auto;
  flex: 1;
  min-height: 0;
}

.novely-structure-note {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--hairline);
  background: var(--panel);
  font: 400 var(--size-11-5) / 1.4 var(--font-ui);
  color: var(--muted-1);
}

.novely-structure-note:empty {
  display: none;
}

.novely-structure-label {
  color: var(--text);
}

.novely-structure-undo,
.novely-structure-report {
  font: 400 var(--size-11) var(--font-ui);
  color: var(--muted-1);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 3px 9px;
  cursor: pointer;
}

.novely-structure-undo:hover,
.novely-structure-report:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

/* What could not be placed reads as a finding, because that is what it is. */
.novely-structure-report {
  border-color: var(--kind-violated);
}

.novely-structure-hint {
  font: 400 var(--size-10) var(--font-mono);
  color: var(--muted-4);
}

.novely-structure-dismiss {
  margin-left: auto;
  font: 400 var(--size-11) var(--font-ui);
  color: var(--muted-3);
  background: transparent;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
}

.novely-structure-dismiss:hover {
  color: var(--text);
}

.novely-structure-details {
  flex-basis: 100%;
  margin: 0;
  padding: 0 0 0 16px;
  font: 400 var(--size-11) / var(--leading-ui-prose) var(--font-ui);
  color: var(--muted-2);
}

/* A refusal reads as one: the same note, in the colour of a violated finding. */
.novely-structure-note[data-failed] {
  border-top-color: var(--kind-violated);
}

.novely-structure-note[data-failed] .novely-structure-label {
  color: var(--kind-proved);
}