/* Structured document editor (F01).
   Template: templates/community/_document_editor.html
   Behaviour: static/document-editor.js */

.ed {
  --ed-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  margin: var(--sp-6) 0;
}
.ed[hidden] { display: none; }

.ed__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ed__count { margin: 0; color: var(--faint); font-size: var(--fs-micro); }

.ed__add { position: relative; }
.ed__add > summary { list-style: none; cursor: pointer; }
.ed__add > summary::-webkit-details-marker { display: none; }
.ed__add-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: min(30rem, calc(100vw - 2 * var(--sp-4)));
  gap: 2px;
  padding: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 12px 40px var(--shadow);
}
.ed__add-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ed__add-item:hover { background: var(--canvas-2); }
.ed__add-item .icon { margin-top: .15em; color: var(--primary-ink); }
.ed__add-item span { display: grid; gap: 2px; }
.ed__add-item small { color: var(--faint); font-size: var(--fs-micro); }

.ed__blocks { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.ed__empty { color: var(--faint); font-size: var(--fs-sm); }
.ed__takeaway { margin-top: var(--sp-5); }
.ed__status { min-height: 1.5em; margin: var(--sp-3) 0 0; color: var(--faint); font-size: var(--fs-sm); }
/* The inspection check. Same amber as an incomplete entry: both say the post is
   not ready to go out yet, and neither is an error in what the author wrote. */
.ed__wait {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  /* Measured in Chromium: --amber-bg on the page background is 1.03:1, because
     a ratio is luminance only and cream on off-white differs in hue, not
     lightness. The panel's boundary is therefore the only thing identifying it,
     which is what WCAG 1.4.11 asks to carry 3:1, and --amber-line gives 2.10.
     --amber-text is 7.69 and already the message colour. */
  border: 1px solid var(--amber-text);
  border-radius: var(--r-sm);
  background: var(--amber-bg);
  color: var(--amber-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ed__wait [data-inspection-message] { min-width: 0; flex: 1 1 16ch; }
.ed__wait .button { min-height: 32px; font-size: var(--fs-sm); }
.ed-undo {
  min-height: 32px;
  padding: .2em .7em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-micro);
  cursor: pointer;
}

.ed-block { list-style: none; }
.ed-block__inner {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}
.ed-block__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  background: var(--canvas-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.ed-block__kind {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.ed-block__kind .icon { width: 1em; height: 1em; }
/* --faint on the tinted bar measured 4.85:1, the lowest text in the editor. */
.ed-block__pos { color: var(--text); font-size: var(--fs-micro); }
.ed-block__tools { display: flex; gap: var(--sp-1); margin-left: auto; }
.ed-block__fields { display: grid; gap: var(--sp-4); padding: var(--sp-4); }

.ed-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.ed-tool:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface); }
.ed-tool:disabled { opacity: .35; cursor: default; }
.ed-tool--danger:hover:not(:disabled) { border-color: var(--danger-line); color: var(--danger); }
.ed-tool .icon { width: 1.15em; height: 1.15em; }

.ed-field { display: grid; gap: var(--sp-1); }
.ed-field--narrow { max-width: 16rem; }
.ed-field__label {
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
}
.ed-field__hint { color: var(--faint); font-size: var(--fs-micro); line-height: 1.4; }
.ed-req {
  color: var(--primary-ink);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 500;
  text-transform: lowercase;
}
.ed-code {
  font-family: var(--ed-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  tab-size: 4;
  white-space: pre;
}
.ed-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-3);
  align-items: end;
}
.ed-row .ed-field--narrow { max-width: none; }
.ed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ed-limit { margin: 0; color: var(--faint); font-size: var(--fs-micro); }
.ed-limit.is-over { color: var(--danger); font-weight: 600; }

.ed-nodes { display: grid; gap: var(--sp-3); }
.ed-node {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-sm);
}
.ed-node__head { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); }
.ed-node__head .ed-tool { margin-left: auto; }

.ed-add-row {
  justify-self: start;
  min-height: var(--tap);
  padding: .4em 1em;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-pill);
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.ed-add-row:hover { background: var(--canvas-2); }

.ed-table { display: grid; gap: var(--sp-3); }
.ed-table__cols { display: grid; gap: var(--sp-2); }
.ed-col {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 7rem 9rem auto;
  align-items: end;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-sm);
}
.ed-col .ed-tool { margin-bottom: 2px; }
.ed-col .ed-field--narrow { max-width: none; }
.ed-scroll { overflow-x: auto; }
.ed-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ed-grid { width: 100%; border-collapse: collapse; }
.ed-grid :where(th, td) {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line-soft);
  text-align: left;
}
.ed-grid th { color: var(--heading); font-size: var(--fs-micro); white-space: nowrap; }
.ed-grid :where(input, select) { min-height: 36px; min-width: 7rem; }
.ed-grid__gutter { width: 1%; }
.ed-grid td .ed-tool { width: auto; padding: 0 .6em; font-size: var(--fs-micro); }

.ed-list { display: grid; gap: var(--sp-2); }
.ed-url { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; }

.ed-extra { border-top: 1px solid var(--line-soft); }
.ed-extra > summary {
  padding: var(--sp-2) var(--sp-4);
  color: var(--faint);
  font-size: var(--fs-micro);
  cursor: pointer;
}
.ed-extra__fields { display: grid; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); }

@media (max-width: 40rem) {
  /* One field per row: side by side at this width the controls sit closer than
     the 24px minimum spacing for touch targets. */
  .ed-col { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ed-col .ed-tool { justify-self: end; margin-bottom: 0; }
  .ed-block__fields, .ed-extra__fields { padding-inline: var(--sp-3); }
  .ed__add-menu { width: calc(100vw - 2 * var(--sp-4)); }
}

/* 22x22 and accent-color match the checkboxes style.css already defines for
   .choices and .gov .choice. `width: auto` was shrinking these to the 13px
   user-agent default, which looked nothing like the rest of the site. */
.ed-check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); font-size: var(--fs-sm); }
.ed-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex: none;
  accent-color: var(--primary);
}
.ed-sub { border: 1px dashed var(--line-soft); border-radius: var(--r-sm); }
.ed-sub > summary {
  padding: var(--sp-2) var(--sp-3);
  color: var(--primary);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.ed-sub__fields { display: grid; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); }
.ed-record { display: grid; grid-template-columns: 1fr 9rem 6rem auto; gap: var(--sp-2); align-items: center; }
@media (max-width: 40rem) { .ed-record { grid-template-columns: 1fr auto; } }

/* Not justify-items:start: that sizes the column to the widest item's
   max-content, and the hint below is a long sentence, so the pane's width:100%
   then resolved against a column wider than the screen. */
.ed__preview { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.ed__preview > * { min-width: 0; }
.ed__preview > button { justify-self: start; }
.ed__preview-pane {
  width: 100%;
  margin-top: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.ed__preview-pane:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.doc-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--canvas-2);
}
.doc-preview-head h3 { margin: 0; font-size: var(--fs-xs); letter-spacing: .02em; text-transform: uppercase; }
.ed__preview-pane > [data-preview-body] { padding: var(--sp-5); }

/* Validation errors returned by the server, placed on the block they came from. */
.ed-block__inner.is-invalid { border-color: var(--danger); }
.ed-errors { margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-3); list-style: none; display: grid; gap: var(--sp-1); }
.ed-errors li { color: var(--danger); font-size: var(--fs-sm); line-height: 1.45; }
.ed-errors code { font-family: var(--ed-mono); font-size: .92em; }
.ed-field.is-invalid :where(input, select, textarea) { border-color: var(--danger); }
.ed__errors-summary {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--fs-sm);
}
.ed__errors-summary ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.ed__errors-summary button {
  border: 0; background: none; padding: 0; color: inherit;
  font: inherit; text-decoration: underline; cursor: pointer;
}

.ed-envelope { margin: var(--sp-6) 0 0; padding: var(--sp-4); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.ed-envelope legend { padding: 0 var(--sp-2); color: var(--heading); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.ed-consent { display: flex; align-items: center; gap: var(--sp-2); flex-basis: 100%; min-height: var(--tap); font-size: var(--fs-sm); }
.ed-consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex: none;
  accent-color: var(--primary);
}

/* Grid and flex items default to min-width:auto, so a long control inside one
   cannot shrink and pushes the whole page sideways. The composer already does
   this for its fieldsets (style.css). Every container the editor nests needs
   the same, or the narrowest screen scrolls horizontally. */
.ed__blocks > li,
.ed-block__inner,
.ed-block__bar,
.ed-block__fields,
.ed-block__fields > *,
.ed-extra__fields,
.ed-extra__fields > *,
.ed-sub__fields > *,
.ed-field,
.ed-row > *,
.ed-col > *,
.ed-record > *,
.ed-list,
.ed-url > *,
.ed-node,
.ed-node__head > * {
  min-width: 0;
}
.ed-field :where(input, select, textarea) { max-width: 100%; }

@media (max-width: 40rem) {
  /* The add menu is a popover anchored to a narrow summary, so on a small
     screen it spills past the right edge. Inline panel instead. */
  .ed__add { position: static; }
  .ed__add-menu {
    position: static;
    width: auto;
    margin-top: var(--sp-2);
    box-shadow: none;
  }
  .ed__bar { display: block; }
  .ed__count { margin-top: var(--sp-2); }
}

/* Published blocks run to the card edge on a phone, which is right on the post
   page. Inside the preview pane that full-bleed pulls them past the pane's own
   padding, leaves .doc overflowing and moves the horizontal scroll off
   .doc-scroll onto the <pre>, where it is no longer keyboard reachable. The
   pane is already narrow, so keep the blocks inside it. */
.ed__preview-pane :where(.doc-figure, .doc-reference, .doc-file, .doc-notice, .doc-measure) {
  margin-inline: 0;
  border-inline-width: 1px;
  border-radius: var(--r-md);
}
@media (max-width: 40rem) {
  .ed__preview-pane > [data-preview-body] { padding: var(--sp-3); }
}

.conflict {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--amber-line);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--amber-bg);
  color: var(--amber-text);
}
.conflict:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.conflict h2 {
  display: flex;
  align-items: center;
  gap: .4em;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
}
.conflict p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); line-height: 1.55; }
.conflict__choices { margin: 0 0 var(--sp-2); padding-left: 1.2em; font-size: var(--fs-sm); }
.conflict__choices li { margin-bottom: var(--sp-1); line-height: 1.5; }
.conflict .help { color: inherit; opacity: .85; font-size: var(--fs-micro); }

/* An entry that is saved but not yet complete. Not an error: the work is kept. */
.ed-block__inner.is-incomplete { border-color: var(--amber-line); }
.ed-field.is-incomplete :where(input, select, textarea) { border-color: var(--amber-line); }
.ed-incomplete {
  margin: var(--sp-2) var(--sp-3) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--amber-bg);
  color: var(--amber-text);
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.ed-upload { display: grid; gap: var(--sp-2); }
.ed-upload__state:empty { display: none; }
.ed-upload__state {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--canvas-2);
  color: var(--text);
  font-size: var(--fs-sm);
}
.ed-upload__inspection {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--amber-line);
  border-radius: var(--r-sm);
  background: var(--amber-bg);
  color: var(--amber-text);
}
.ed-upload__inspection p { margin: 0; font-size: var(--fs-micro); line-height: 1.5; }
.ed-upload__warn { font-weight: 600; }
.ed-upload__caveat { opacity: .85; }
.ed-upload input[type=file] { font-size: var(--fs-sm); }

.ed-incomplete__drop {
  margin-left: .4em;
  padding: .1em .6em;
  border: 1px solid var(--amber-line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--amber-text);
  font: inherit;
  font-size: var(--fs-micro);
  cursor: pointer;
}
.ed-incomplete__drop:hover { background: var(--amber-bg); }