/* FlightWay V2 S17 — Network mapper.
   Client half: assets/js/app/network-panel.js, mounted into #flightplan-network
   inside a .fp-module--wide plate on flightplan.html.

   `.nw-` namespace only. Same var convention as scorecard.css — the
   rgb(var(--x)) triplets the sibling .fp-radar/.fp-commit blocks use on this
   dark .fp-module plate. Its own file rather than rules in flightway-2.css for
   the reason that file's 13 links make obvious: one rule there is a 13-page
   restamp.

   House rule, same as the scorecard: status hue lives on borders and
   backgrounds only, never as the sole carrier of meaning — every status is a
   text label in a <select>, so the row tint is decoration on top of a word. */

.nw-subhead { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: rgb(var(--text)); }

/* The standing promise: FlightWay drafts, the student sends. Bordered rather
   than muted-small, because a student skimming past this one is the failure the
   copy exists to prevent. */
.nw-promise {
  margin: 0 0 14px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55;
  color: rgb(var(--text-muted)); border-radius: 10px;
  border: 1px solid rgb(var(--border)); background: rgb(var(--surface-2) / 0.5);
}
.nw-promise strong { color: rgb(var(--text)); font-weight: 700; }

.nw-note { font-size: 12px; color: rgb(var(--text-muted)); }
.nw-allowance { font-size: 11.5px; color: rgb(var(--text-muted)); }
.nw-row-error { margin: 6px 0 0; font-size: 12px; color: rgb(var(--text-muted)); }

.nw-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgb(var(--border)); background: rgb(var(--surface-2));
  color: rgb(var(--text-muted));
}

/* ---- the list ---------------------------------------------------------- */

.nw-list-wrap { margin-bottom: 20px; }
.nw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.nw-row {
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgb(var(--border)); background: rgb(var(--surface-2) / 0.35);
}
.nw-row--sent { border-color: rgb(var(--primary) / 0.4); }
.nw-row--replied,
.nw-row--met { border-color: rgb(var(--ok) / 0.45); background: rgb(var(--ok) / 0.06); }

.nw-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nw-row-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 220px; }
.nw-row-name { margin: 0; font-size: 14px; font-weight: 700; color: rgb(var(--text)); }
.nw-row-label { margin: 0; font-size: 13px; line-height: 1.45; color: rgb(var(--text)); }
.nw-row-who .nw-chip { align-self: flex-start; margin-top: 2px; }
.nw-row-how { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: rgb(var(--text-muted)); }

.nw-status { display: flex; flex-direction: column; gap: 3px; flex: none; }
.nw-status-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgb(var(--text-muted));
}
.nw-status-select {
  padding: 6px 10px; border-radius: 8px; border: 1px solid rgb(var(--border));
  background: rgb(var(--surface)); color: rgb(var(--text)); font: inherit; font-size: 12.5px;
}

.nw-row-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---- the draft --------------------------------------------------------- */

.nw-draft-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.nw-draft { margin-top: 12px; }
.nw-draft-key {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgb(var(--text-muted)); margin-right: 6px;
}
.nw-draft-subject { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: rgb(var(--text)); }
/* A <pre> because the server deliberately preserves the paragraph breaks, and a
   collapsed three-paragraph note reads as a wall. Wraps rather than scrolling:
   the whole message has to be readable to be editable. */
.nw-draft-body {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgb(var(--border)); background: rgb(var(--surface) / 0.7);
  font: inherit; font-size: 13px; line-height: 1.6; color: rgb(var(--text));
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.nw-draft-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---- buttons ----------------------------------------------------------- */

.nw-draft-btn, .nw-sug-add, .nw-add-go {
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgb(var(--primary));
  background: rgb(var(--primary)); color: rgb(var(--primary-fg)); font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.nw-draft-btn:hover:not(:disabled), .nw-sug-add:hover:not(:disabled), .nw-add-go:hover:not(:disabled) {
  background: rgb(var(--primary-hover)); border-color: rgb(var(--primary-hover));
}
.nw-copy, .nw-redraft, .nw-name-edit, .nw-remove, .nw-add-open, .nw-add-cancel {
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(var(--border));
  background: transparent; color: rgb(var(--text)); font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.nw-copy:hover:not(:disabled), .nw-redraft:hover:not(:disabled), .nw-name-edit:hover:not(:disabled),
.nw-add-open:hover:not(:disabled), .nw-add-cancel:hover:not(:disabled) {
  border-color: rgb(var(--primary) / 0.55); background: rgb(var(--surface-2) / 0.6);
}
.nw-remove { color: rgb(var(--text-muted)); }
.nw-remove:hover { border-color: rgb(var(--err) / 0.5); color: rgb(var(--text)); }
.nw-draft-btn:disabled, .nw-sug-add:disabled, .nw-copy:disabled, .nw-redraft:disabled,
.nw-add-open:disabled, .nw-add-go:disabled { opacity: .55; cursor: not-allowed; }

/* ---- suggestions ------------------------------------------------------- */

.nw-sugs { margin-top: 4px; }
.nw-step-note {
  margin: 0 0 10px; font-size: 12.5px; font-style: italic; color: rgb(var(--text-muted));
}
.nw-sug-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.nw-sug-card {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgb(var(--border)); background: rgb(var(--surface-2) / 0.35);
}
.nw-sug-label { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: rgb(var(--text)); }
.nw-sug-card .nw-chip { align-self: flex-start; }
.nw-sug-why { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgb(var(--text)); }
.nw-sug-how { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgb(var(--text-muted)); }
.nw-sug-how-label { font-weight: 700; color: rgb(var(--text)); }
.nw-sug-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* ---- add manually ------------------------------------------------------ */

.nw-add-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.nw-add-wrap--open {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid rgb(var(--border)); background: rgb(var(--surface-2) / 0.35);
}
.nw-add-title { margin: 0; font-size: 13px; font-weight: 700; color: rgb(var(--text)); }
.nw-add-wrap--open input {
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgb(var(--border));
  background: rgb(var(--surface)); color: rgb(var(--text)); font: inherit; font-size: 13px;
}
.nw-add-wrap--open input::placeholder { color: rgb(var(--text-muted)); }
.nw-add-btns { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .nw-row-head { flex-direction: column; }
  .nw-status { width: 100%; }
  .nw-status-select { width: 100%; }
  .nw-sug-list { grid-template-columns: 1fr; }
}