/* ================================================================
   THE STRUCTURE EDITOR
   ----------------------------------------------------------------
   Source: "Structure Editor.dc.html" in the Claude Design project, banked at
   design-source/Structure Editor.dc.html.

   It lives as the Edit view of org-structure.html, not as its own page: the
   design's editor is that same structure with editing on top, and a page that is
   a section of somewhere else should not also be a top level destination.

   WHO SEES IT. Every member reads the structure; only the Secretary General, a
   super admin and IT may edit it, so the Edit tab is hidden for everybody else
   and firestore.rules enforces the same three on the nodes, the versions and the
   draft.

   Values are the design's. Written as literals because css/org-structure.css
   names its own tokens and this file must not depend on which of them happen to
   be defined; where the design states a literal, so does this.
   ================================================================ */

/* ── The layout: work on the left, validation on the right ────────────
   The design's .cols, at its own 340px and its own 1080px collapse. */
.se-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
  margin-top: 14px;
}
/* A grid item defaults to min-width:auto, so one long post title would inflate
   the track and push the page sideways. */
.se-cols > * { min-width: 0; }
@media (max-width: 1080px) {
  .se-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ── The draft banner ────────────────────────────────────────────────
   What state the draft is in, before anything else. Three states, and the
   colour is the statement: green nothing pending, gold ready, red blocked. */
.se-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .20);
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .09));
  animation: cvIn .38s cubic-bezier(.16, 1, .3, 1) both;
}
.se-banner > i { margin-top: 2px; flex: 0 0 auto; font-size: 14px; }
.se-banner.is-clean > i { color: #4cd657; }
.se-banner.is-ready {
  border-color: rgba(240, 200, 50, .45);
  background: linear-gradient(160deg, rgba(212, 175, 55, .16), rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, .10));
}
.se-banner.is-ready > i { color: #f0c832; }
.se-banner.is-blocked {
  border-color: rgba(255, 72, 72, .45);
  background: rgba(255, 72, 72, .09);
}
.se-banner.is-blocked > i { color: #ff4848; }
.se-banner-t { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.se-banner-b {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(242, 247, 238, .88);
  text-wrap: pretty;
}

/* ── Posts / Changes, the design's segmented track ─────────────────── */
#se-editor {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  overflow-x: auto;
  scrollbar-width: none;
}
#se-editor::-webkit-scrollbar { display: none; }
.se-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(242, 247, 238, .88);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .25s cubic-bezier(.16, 1, .3, 1), border-color .25s cubic-bezier(.16, 1, .3, 1),
              color .25s cubic-bezier(.16, 1, .3, 1);
}
.se-tab:hover { background: rgba(255, 255, 255, .06); color: #f2f7ee; }
.se-tab[data-active="true"] {
  background: rgba(212, 175, 55, .16);
  border-color: rgba(240, 200, 50, .34);
  color: #f2f7ee;
}
.se-tab[data-active="true"] i { color: #f0c832; }
.se-tab-n {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 999px;
  font-size: 10.5px;
}

/* ── One post in the list ────────────────────────────────────────────
   A button, because the whole row opens the post. */
.se-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 16px;
  margin-bottom: 9px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  color: #f2f7ee;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1), background .25s cubic-bezier(.16, 1, .3, 1),
              transform .25s cubic-bezier(.16, 1, .3, 1);
}
.se-row:last-child { margin-bottom: 0; }
.se-row:hover { border-color: rgba(240, 200, 50, .34); transform: translateY(-1px); }
/* A post carrying an unpublished change. The design tints the row. */
.se-row.is-changed { background: rgba(212, 175, 55, .07); border-color: rgba(240, 200, 50, .34); }
.se-row.has-error { border-left: 3px solid #ff4848; }
.se-row.has-advisory { border-left: 3px solid #f59e0b; }
.se-row-main { flex: 1 1 auto; min-width: 0; }
.se-row-t {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.se-row-flag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(240, 200, 50, .45);
  background: rgba(212, 175, 55, .14);
  color: #f0c832;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.se-row-m { margin-top: 4px; font-size: 13px; color: rgba(242, 247, 238, .88); overflow-wrap: anywhere; }
.se-row-x {
  margin-top: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.1px;
  color: rgba(242, 247, 238, .62);
  overflow-wrap: anywhere;
}
/* A post with no mailbox is an error, and the row says so without being opened. */
.se-row-nomail { color: #ff4848; }
.se-row-i { flex: 0 0 auto; font-size: 13px; }
.se-row-i.is-error { color: #ff4848; }
.se-row-i.is-advisory { color: #f59e0b; }
.se-row-go { flex: 0 0 auto; font-size: 11px; color: rgba(242, 247, 238, .62); }

/* ── A change, and the field level diff ──────────────────────────────── */
.se-change {
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid rgba(240, 200, 50, .34);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(212, 175, 55, .12), rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, .09));
}
.se-change:last-child { margin-bottom: 0; }
.se-change-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.se-change-t { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.se-change-k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #f0c832;
  white-space: nowrap;
}
.se-diff-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 16px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.se-diff-k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(242, 247, 238, .88);
}
.se-diff-f { font-size: 13px; color: rgba(242, 247, 238, .62); word-break: break-word; }
.se-diff-a { font-size: 10px; color: rgba(242, 247, 238, .62); }
.se-diff-t { font-size: 13px; font-weight: 600; color: #f0c832; word-break: break-word; }
@media (max-width: 640px) {
  /* Four columns of prose do not fit a phone. */
  .se-diff-row { grid-template-columns: 1fr; gap: 3px; }
  .se-diff-a { display: none; }
  .se-diff-f::before { content: 'from '; color: rgba(242, 247, 238, .45); }
  .se-diff-t::before { content: 'to '; color: rgba(242, 247, 238, .45); font-weight: 400; }
}
.se-change-undo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 12px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  color: rgba(242, 247, 238, .88);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px;
  cursor: pointer;
}
.se-change-undo:hover { border-color: rgba(240, 200, 50, .34); color: #f2f7ee; }

/* ── The validation panel ────────────────────────────────────────────
   Errors stop publishing; advisories do not, and are recorded against the
   version instead. The tone carries that distinction. */
.se-val {
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(76, 214, 87, .4);
  background: rgba(76, 214, 87, .08);
  animation: wgIn .5s cubic-bezier(.16, 1, .3, 1) .08s both;
}
.se-val.is-advisory { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }
.se-val.is-error { border-color: rgba(255, 72, 72, .45); background: rgba(255, 72, 72, .09); }
.se-val-h { display: flex; align-items: center; gap: 10px; }
.se-val-h > i { font-size: 14px; color: #4cd657; }
.se-val.is-advisory .se-val-h > i { color: #f59e0b; }
.se-val.is-error .se-val-h > i { color: #ff4848; }
.se-val-k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #4cd657;
}
.se-val.is-advisory .se-val-k { color: #f59e0b; }
.se-val.is-error .se-val-k { color: #ff4848; }
.se-val-s {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(242, 247, 238, .88);
  text-wrap: pretty;
}
#se-validation-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }

/* Each issue is a button: pressing it opens the post it is about, so a problem
   is one tap from its fix rather than a hunt through the list. */
.se-issue {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .21);
  background: rgba(255, 255, 255, .04);
  color: #f2f7ee;
  text-align: left;
  font-family: 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
}
.se-issue > i { margin-top: 2px; flex: 0 0 auto; font-size: 12px; }
.se-issue.is-ok { border-color: rgba(76, 214, 87, .4); background: rgba(76, 214, 87, .08); cursor: default; }
.se-issue.is-ok > i { color: #4cd657; }
.se-issue.is-error { border-color: rgba(255, 72, 72, .45); background: rgba(255, 72, 72, .09); }
.se-issue.is-error > i { color: #ff4848; }
.se-issue.is-advisory { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }
.se-issue.is-advisory > i { color: #f59e0b; }
.se-issue > span { min-width: 0; }
.se-issue-t { display: block; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.se-issue-sev {
  display: block;
  margin-top: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(242, 247, 238, .62);
}
/* The fix, which is the part that makes an error actionable. */
.se-issue-f {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(242, 247, 238, .88);
  text-wrap: pretty;
}

/* ── The foot: discard and publish ───────────────────────────────────── */
.se-foot { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.se-foot > * { min-height: 48px; }
#se-publish { flex: 1 1 auto; }
@media (max-width: 640px) {
  .se-foot > * { width: 100%; justify-content: center; }
}

.se-empty {
  padding: 34px 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  font-size: 13.5px;
  color: rgba(242, 247, 238, .62);
}

/* ── The form ────────────────────────────────────────────────────────── */
.se-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #f0c832;
}
.se-eyebrow.u-red { color: #ff4848; }
.se-modal-t {
  font-family: 'Cinzel', serif;
  margin: 9px 0 0;
  font-size: 20px;
  line-height: 1.28;
  font-weight: 700;
  word-break: break-word;
}
.se-modal-sub {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(242, 247, 238, .88);
  text-wrap: pretty;
}
.se-field { margin-top: 18px; }
.se-label { display: block; font-size: 12.5px; font-weight: 600; }
.se-help {
  margin: 5px 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(242, 247, 238, .62);
  text-wrap: pretty;
}
.se-err { margin-top: 7px; font-size: 12px; color: #ff4848; }
.se-check { display: flex; align-items: center; gap: 11px; font-size: 13.5px; cursor: pointer; }
.se-check > input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #f0c832; }

/* What the form would change, shown before it is kept. */
.se-formdiff {
  margin-top: 18px;
  padding: 14px 15px;
  border-left: 2px solid rgba(240, 200, 50, .5);
  border-radius: 0 12px 12px 0;
  background: rgba(212, 175, 55, .08);
}
.se-formdiff.is-none {
  border-left-color: rgba(255, 255, 255, .21);
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  color: rgba(242, 247, 238, .62);
}
.se-formdiff-k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #f0c832;
  margin-bottom: 4px;
}
.se-modal-acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.se-modal-acts > * { min-height: 48px; }
.se-modal-acts > .ijb-gold { flex: 1 1 auto; }

/* Advisories carried into the published version, shown on the publish step so
   the decision to publish anyway is a deliberate one. */
.se-pub-adv {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 12px;
  background: rgba(245, 158, 11, .08);
}
.se-pub-adv > i { margin-top: 2px; flex: 0 0 auto; font-size: 12px; color: #f59e0b; }
.se-pub-adv-t { font-size: 13px; font-weight: 600; }
.se-pub-adv-i {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(242, 247, 238, .88);
  text-wrap: pretty;
}