/* The document editor on the Documents step (docedit.js). The sheet looks like
   the printed page: white on the grey ground, text you can click into. Tokens
   from styles.css only. */

.de-root { background: var(--ground-2); border-radius: var(--r-sm); padding: var(--space-3); }
.de-root > .notice { margin: 0 0 var(--space-3); }
.de-sheet { background: var(--surface); box-shadow: var(--shadow-1); padding: var(--space-6) var(--space-6) var(--space-5); display: grid; gap: var(--space-1); max-width: calc(var(--space-7) * 17); margin: 0 auto; }
.de-sheet.landscape { max-width: none; }

.de-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.de-meta label { display: grid; gap: var(--space-0); }
.de-meta label:first-child { grid-column: 1 / -1; }
.de-meta label > span:first-child { font-size: var(--t-2xs); font-weight: var(--w-medium); color: var(--ink-3); }
.de-fixed { font-size: var(--t-sm); color: var(--ink-2); padding: var(--space-1) var(--space-1h); }

.de-block { position: relative; padding-right: calc(var(--btn-sm) * 2 + var(--space-2)); }
.de-tools { position: absolute; top: 0; right: 0; display: flex; gap: var(--space-0); opacity: 0; transition: opacity 120ms ease-out; }
.de-block:hover > .de-tools, .de-block:focus-within > .de-tools { opacity: 1; }
@media (hover: none) { .de-tools { opacity: 1; } }
.de-tool, .de-revert { border: 0; background: none; color: var(--ink-3); }
.de-tool:hover, .de-revert:hover { background: var(--ground-2); color: var(--ink); }
button.de-revert { width: var(--space-5); height: var(--space-5); padding: 0; display: inline-grid; place-items: center; border-radius: var(--r-pill); position: absolute; top: var(--space-0); right: calc(-1 * var(--space-5)); }
.de-revert svg, .de-addrow svg { width: var(--space-3); height: var(--space-3); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* One piece of text. Borderless until you point at it; an edit carries the
   ochre mark down its left edge. */
.de-unit { position: relative; display: block; }
textarea.de-text { display: block; min-height: 0; height: auto; box-sizing: border-box; width: 100%; resize: none; overflow: hidden; font: inherit; color: var(--ink); background: transparent; border: 0; border-radius: var(--r-xs); padding: var(--space-1) var(--space-1h); line-height: var(--lh-body); font-size: var(--t-sm); box-shadow: inset 2px 0 0 transparent; transition: background-color 120ms ease-out, box-shadow 120ms ease-out; }
textarea.de-text:hover { background: var(--row-veil); }
textarea.de-text:focus { outline: none; background: var(--surface); box-shadow: var(--focus-ring); }
.de-unit.edited > textarea.de-text { box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-wash); }
.de-unit.edited > textarea.de-text:focus { box-shadow: inset 2px 0 0 var(--accent), var(--focus-ring); }
.de-unit.changed > textarea.de-text { box-shadow: inset 2px 0 0 var(--warn); background: var(--sev-warn-bg); }
textarea.de-title { font-size: var(--t-xl); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: var(--lh-tight); }
textarea.de-h1 { font-size: var(--t-lg); font-weight: var(--w-bold); line-height: var(--lh-tight); margin-top: var(--space-3); }
textarea.de-h2 { font-size: var(--t-md); font-weight: var(--w-bold); line-height: var(--lh-tight); margin-top: var(--space-2); }
textarea.de-small { font-size: var(--t-xs); color: var(--ink-2); }
.de-ul { list-style: none; margin: 0; padding: 0; display: grid; }
.de-ul li { position: relative; }
.de-ul li::before { content: ""; position: absolute; left: var(--space-2); top: calc(var(--space-1) + 0.72em); width: var(--space-1); height: var(--space-1); border-radius: var(--r-pill); background: var(--ink-2); }
textarea.de-li { padding-left: var(--space-4); }

.de-changed { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-1) 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--sev-warn-bg); color: var(--warn); font-size: var(--t-xs); }
.de-changed-acts { display: flex; gap: var(--space-1); flex: none; }

.de-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: var(--space-1) 0 var(--space-0); }
.de-table th, .de-table td { border: 1px solid var(--line-2); padding: 0; vertical-align: top; }
.de-table th { background: var(--ground-3); }
.de-table td.de-key { background: var(--ground); }
.de-table textarea.de-td, .de-table textarea.de-th { font-size: var(--t-xs); line-height: var(--lh-tight); padding: var(--space-1h) var(--space-1h); border-radius: 0; }
.de-table textarea.de-th { font-weight: var(--w-bold); }
.de-table td.de-rowtool, .de-table th:last-child, .de-table col.de-rowtool { width: calc(var(--btn-sm) + var(--space-1)); border: 0; background: none; }
.de-table td.de-rowtool .de-tool { opacity: 0; transition: opacity 120ms ease-out; }
.de-table tr:hover .de-rowtool .de-tool, .de-table tr:focus-within .de-rowtool .de-tool { opacity: 1; }
@media (hover: none) { .de-table td.de-rowtool .de-tool { opacity: 1; } }
.de-table .de-revert { right: 0; top: var(--space-0); }
.de-table tr.de-newrow td:not(.de-rowtool) { background: var(--accent-wash); }
.de-table tr.de-gone td { border-style: dashed; padding: var(--space-1h); font-size: var(--t-xs); color: var(--ink-3); }

.de-table-block, .de-kv-block { padding-right: 0; }
.de-tablefoot { display: flex; align-items: center; gap: var(--space-0); margin-bottom: var(--space-1); opacity: 0; transition: opacity 120ms ease-out; }
.de-block:hover > .de-tablefoot, .de-block:focus-within > .de-tablefoot { opacity: 1; }
@media (hover: none) { .de-tablefoot { opacity: 1; } }
button.de-addrow { display: inline-flex; align-items: center; gap: var(--space-1); border: 0; background: none; color: var(--ink-3); padding: 0 var(--space-1h); }
button.de-addrow:hover { color: var(--accent-ink); background: var(--accent-wash); }
button.de-addend { margin-top: var(--space-3); }

.de-block.de-gone { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1h) var(--space-1h); border: 1px dashed var(--line-2); border-radius: var(--r-xs); font-size: var(--t-xs); color: var(--ink-3); margin: var(--space-1) 0; }
.de-block.de-gone > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.de-added textarea.de-text { box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-wash); }

.de-party { display: grid; gap: var(--space-1); padding: var(--space-2) 0; }
.de-fields { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0 var(--space-1h); align-items: center; }
.de-fields > span:not(.meta) { font-size: var(--t-xs); padding: var(--space-0) var(--space-2); border-radius: var(--r-pill); background: var(--ground-2); color: var(--ink-2); }

.de-missing ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1h); }
.de-missing li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.de-check { color: var(--warn); font-weight: var(--w-medium); }
.doc-viewer .card-foot .actions { display: flex; gap: var(--space-2); }

@media (max-width: 1100px) {
  .de-sheet { padding: var(--space-5) var(--space-4) var(--space-4); }
}
.de-unit.edited textarea.de-li { box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-wash); }
.de-table .de-unit.edited > textarea.de-td, .de-table .de-unit.edited > textarea.de-th { padding-right: var(--space-5); }
.de-tablewrap { overflow-x: auto; }
.de-sheet.landscape .de-table:not(.kv) { min-width: calc(var(--space-7) * 16); }
@media (max-width: 1100px) { .de-root { padding: var(--space-2); } .de-sheet { padding: var(--space-4) var(--space-3) var(--space-4); } }
.de-sheet > *, .de-block, .de-tablewrap { min-width: 0; }