/* ==========================================================================
   Orders — the PDF Template Editor (orders-template-editor.html)

   Spec: build/pages.md §14

   The one Orders page whose record IS a layout: the Packing List every
   container shipment prints from, open for editing with a real order poured
   through it. No house page draws an editor, so the three columns — what can
   be placed, the page, what the selected block is set to — are this file's
   own, under the `tpe-` prefix. The shell, the header shape and the tokens are
   the house's; the readings, the two-sided choices and the menu icon size are
   css/pages/orders.css's.

   TOKENS ONLY. Every colour is a `var(--color-…)` off app.css, so the dark
   themes inherit. Radius never passes 7px (memory.md §2); nothing is set under
   10px (§4), and the document's own table sits ON the floor because an A4
   landscape sheet drawn 877px wide is a 78% view of the printed page. Controls and the
   canvas take the control ground (§13): the sheet is the one white thing in
   the editor, which is what makes it read as paper.
   ========================================================================== */

/* ---------- Header ----------------------------------------------------------
   The crumb, the title with its version and status, and the settable facts as
   chips with a pencil — the quote page's header shape, said here because this
   page does not load quotes.css. */
.tpe-head > :first-child { flex: 1 1 0; min-width: 0; }
.tpe-crumb { margin: 0 0 6px; }
.tpe-crumb a { color: var(--color-text-muted); text-decoration: none; }
.tpe-crumb a:hover { color: var(--color-primary-700); }
.tpe-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The version trails the name a step down in weight and colour, with the dot
   drawn here so the name stays its own text. */
.tpe-ver { font-weight: 400; color: var(--color-text-muted); }
.tpe-ver::before { content: "·"; margin-right: 9px; color: var(--color-text-subtle); }
/* A badge beside 22px type is scaled to stand as tall as the name; the word
   stays a clear step under the heading. */
.tpe-status { font-size: 14px; padding: 5px 12px; }
.tpe-fields { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
/* The chips stand on a row of their own under the title, the page-gap above
   the editor (§22); the header's own 18px standoff is halved so the row reads
   as the title's second line rather than as a block of the stack. */
.tpe-fields--page { margin: -8px 0 var(--page-gap); }
.tpe-field {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; text-align: left;
  padding: 2px 6px; margin-left: -6px;
  font: inherit; font-size: 12px; color: inherit; white-space: nowrap;
}
.tpe-field:hover { border-color: var(--color-border); background: var(--color-surface); }
.tpe-field svg { width: 12px; height: 12px; color: var(--color-text-subtle); flex: none; }
.tpe-field + .tpe-field { margin-left: 0; }
/* Who may publish is a fact, not a setting: words in the muted ink. */
.tpe-perm { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.tpe-perm svg { width: 12px; height: 12px; flex: none; }
/* The sample order sits in the action row as a labelled select sized to its
   longest option (§9), on the control ground. */
.tpe-preview { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; min-width: 0; max-width: 100%; }
.tpe-preview .select { width: auto; max-width: 100%; min-width: 0; padding: 7px 30px 7px 10px; font-size: 12px; }
/* The action row is wide; where the title line cannot hold it, it drops under
   the title and wraps inside its own width rather than running off the page. */
.tpe-actions { flex-wrap: wrap; max-width: 100%; }
.tpe-versions .dropdown-menu { right: 0; left: auto; }
.tpe-vrow { align-items: flex-start; }
.tpe-vrow .cell-stack { min-width: 0; }
.tpe-vrow .ord-menu-ico { margin-top: 2px; }
.tpe-vrow[aria-current="true"] .main { color: var(--color-primary-700); }

/* ---------- The editor card -------------------------------------------------- */
.tpe-card { display: flex; flex-direction: column; }
/* The editor's toolbar is the card header, read left to right: undo and redo,
   Design or Preview, the sample order, Add Area. Nothing is pushed to the far
   edge (§16). */
.tpe-bar { justify-content: flex-start; gap: 12px; flex-wrap: wrap; padding: 10px 16px; }
.tpe-bar__group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.tpe-bar__sep { width: 1px; height: 20px; background: var(--color-border); flex: none; }
.tpe-bar__sample { font-size: 12px; }
.tpe-bar .btn-ghost[disabled] { opacity: .4; cursor: default; }

/* THREE COLUMNS, ONE HEIGHT. The palette and the panel scroll inside their
   own column; the canvas scrolls its sheets. The height is the viewport less
   the header, the page header and the card's own bar and foot, so the whole
   editor is on screen at once and the page itself does not scroll. Preview
   has nothing to add or set, so the side columns go and the page takes the
   card's width. */
.tpe-editor {
  display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px;
  height: calc(100vh - 346px); min-height: 520px;
}
.tpe-editor.is-preview { grid-template-columns: minmax(0, 1fr); }
.tpe-editor.is-preview > .tpe-palette, .tpe-editor.is-preview > .tpe-props { display: none; }
.tpe-palette, .tpe-props { overflow-y: auto; overflow-x: hidden; padding: 12px 10px; min-width: 0; }
.tpe-palette { border-right: 1px solid var(--color-border); }
.tpe-props { border-left: 1px solid var(--color-border); }

/* ---------- The palette ------------------------------------------------------- */
.tpe-palette__search { min-width: 0; max-width: none; margin-bottom: 10px; }
.tpe-palette__search .input { padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.tpe-palette__hint { margin: 0 2px 10px; font-size: 11px; line-height: 1.4; color: var(--color-text-subtle); }
.tpe-group + .tpe-group { margin-top: 6px; }
/* A group heading is a disclosure: the table-header type, the chevron right
   after the word, and the list under it folds. */
.tpe-group__h {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 4px; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-muted);
}
.tpe-group__h:hover { color: var(--color-text); }
.tpe-group__h svg { width: 14px; height: 14px; flex: none; transition: transform 120ms; }
.tpe-group__h[aria-expanded="false"] svg { transform: rotate(-90deg); }
.tpe-group__h[aria-expanded="false"] + .tpe-group__items { display: none; }
.tpe-group__items { display: flex; flex-direction: column; gap: 3px; }
/* A row that can be picked up: grip, icon, name, on the control ground. */
.tpe-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; font-size: 12px; color: var(--color-text);
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); cursor: grab; user-select: none;
}
.tpe-item:hover { border-color: var(--color-primary); background: var(--color-surface); }
.tpe-item:active { cursor: grabbing; }
.tpe-item svg { width: 14px; height: 14px; flex: none; color: var(--color-text-muted); }
.tpe-item .tpe-item__grip { color: var(--color-text-subtle); margin-left: -3px; }
.tpe-item > span { min-width: 0; line-height: 1.3; }
.tpe-item__q { display: block; font-size: 11px; color: var(--color-text-subtle); }
.tpe-item[hidden], .tpe-group[hidden] { display: none; }

/* ---------- The canvas --------------------------------------------------------- */
/* --zoom is the scale the sheets are drawn at. --chrome is one screen pixel
   in the sheet's own units, floored at the 75% view: the editor's own marks
   drawn inside a scaled sheet (captions, tags, handles) are sized in it, so
   they read at the same size on screen at every zoom. */
.tpe-canvas {
  --zoom: .75; --chrome: calc(1px / max(var(--zoom), .75));
  position: relative; background: var(--color-control); overflow: auto; padding: 24px 16px; min-width: 0;
}
.tpe-canvas[data-zoom="100"] { --zoom: 1; }
.tpe-canvas[data-zoom="125"] { --zoom: 1.25; }
/* At least the canvas wide, and as wide as the sheet when the sheet is wider,
   so a centred landscape page scrolls to both of its edges. */
.tpe-sheets { display: flex; flex-direction: column; align-items: center; gap: 24px; width: max-content; min-width: 100%; }
/* Design names its two sheets on the canvas, unscaled, just above each:
   page 1, and every page after the first. */
.tpe-sheet-label {
  flex: none; width: calc(877px * var(--zoom)); margin-bottom: -16px;
  font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The sheet is A4 landscape at 877px: 877 × 620 (the template's Page Setup).
   The wrap holds the scaled size for the flow and the sheet inside it scales
   under the zoom, so the zoom moves nothing but the picture. The Design sheet
   is as tall as its areas; the page script writes that height as --sheet-h. */
.tpe-sheet-wrap { position: relative; flex: none; width: calc(877px * var(--zoom)); height: calc(var(--sheet-h, 620px) * var(--zoom)); }
.tpe-sheet {
  position: absolute; top: 0; left: 0; width: 877px; height: 620px;
  transform-origin: top left; transform: scale(var(--zoom)); overflow: hidden;
  display: flex; flex-direction: column;
  padding: 34px 40px 28px;
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  color: var(--color-text); font-size: 11px; line-height: 1.35;
}
.tpe-sheet > * { flex: none; }
.tpe-sheet--design { height: auto; overflow: visible; user-select: none; }
/* Preview's watermark: the word PREVIEW across every sheet, faint. */
.tpe-wm {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
/* The rotated word sits inside a clipping box: a transformed element counts
   toward its parent's scrollable overflow, and the pagination measures that. */
.tpe-wm span {
  font-size: 96px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-neutral); opacity: .09; transform: rotate(-28deg);
}
/* The template as code, in its dialog: a well on the control ground (§13). */
.tpe-code {
  margin: 0; padding: 14px 18px; max-height: 60vh; overflow: auto;
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.6;
  color: var(--color-text); white-space: pre; tab-size: 2;
}

/* ---------- Areas ------------------------------------------------------------------
   The page is areas stacked down the sheet. An area is as tall as it is set
   (--h, written by the page script); Products alone takes its height from its
   rows, and on a printed page the last area, the Footer, sits on the foot of
   the sheet. In Design every area has a caption over it — its name and when
   it prints — and a dashed outline; the selected one is outlined in the
   primary, and its lower edge drags to make it taller or shorter. */
.tpe-area { position: relative; height: var(--h, auto); margin-bottom: 10px; }
.tpe-area--rows { height: auto; }
/* From page 2, a Header or Footer set to None: in Design, a strip saying so. */
.tpe-area--none { height: calc(22 * var(--chrome)); }
.tpe-area--foot { margin: auto 0 0; }
.tpe-area--rule-below { border-bottom: 2px solid var(--color-text); }
.tpe-area--rule-above { border-top: 1px solid var(--color-border-strong); }
.tpe-sheet--design .tpe-area { margin: 0 0 22px; outline: 1px dashed var(--color-border-strong); outline-offset: 3px; }
.tpe-sheet--design .tpe-area--foot { margin-bottom: 0; }
.tpe-sheet--design .tpe-area.is-selected { outline: 2px solid var(--color-primary); }
/* Switched off: kept in the template and drawn faded, so it can be picked and turned back on. */
.tpe-sheet--design .tpe-area.is-off > :not(.tpe-area__rz) { opacity: .35; }
.tpe-cap {
  display: flex; align-items: baseline; gap: .6em; margin: 0 0 6px; cursor: pointer;
  font-size: calc(11 * var(--chrome)); line-height: 1.3; color: var(--color-text-subtle);
}
.tpe-cap__n { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.tpe-cap:hover .tpe-cap__n { color: var(--color-text); }
.tpe-cap.is-selected, .tpe-cap.is-selected .tpe-cap__n { color: var(--color-primary-700); }
.tpe-area__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: calc(11 * var(--chrome)); color: var(--color-text-subtle);
}
.tpe-area__rz { position: absolute; left: 0; right: 0; bottom: -6px; height: 9px; z-index: 2; cursor: ns-resize; touch-action: none; }
.tpe-area__rz::after {
  content: ""; position: absolute; left: 50%; top: 3px; width: 28px; height: 3px; margin-left: -14px;
  border-radius: 2px; background: var(--color-primary); opacity: 0;
}
.tpe-area:hover > .tpe-area__rz::after, .tpe-area.is-selected > .tpe-area__rz::after { opacity: 1; }
/* Where a row from the left will land: an area, or a box it adds a line to. */
.tpe-sheet--design .tpe-area.is-drop, .tpe-box.is-drop { background: var(--color-primary-50); outline: 2px dashed var(--color-primary); }
/* A conditional box wears a tag astride its top edge, a conditional area at
   the end of its caption; the condition itself is in the panel. */
.tpe-flag {
  position: absolute; top: 0; right: 6px; z-index: 2; transform: translateY(-50%); pointer-events: none;
  padding: 0 .5em; border-radius: 3px; line-height: 1.5; white-space: nowrap;
  font-size: calc(10 * var(--chrome)); font-weight: 600;
  color: var(--color-warn-ink); background: var(--color-warn-50); border: 1px solid var(--color-warn);
}
.tpe-cap > .tpe-flag { position: static; transform: none; align-self: center; }

/* ---------- Boxes ------------------------------------------------------------------
   A box is placed by --x, --y, --w and --h inside its area. Its label and its
   fields are clipped to the box, so what overflows here overflows the PDF too;
   the resize handle sits outside the clip, on the lower right corner. */
.tpe-box {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  font-size: 10px; line-height: 1.35;
}
.tpe-sheet--design .tpe-box { cursor: move; touch-action: none; }
.tpe-box * { -webkit-user-drag: none; }
.tpe-box--m { font-size: 11px; }
.tpe-box--l { font-size: 12px; }
.tpe-box--xl { font-size: 13px; }
.tpe-box__in { display: flex; flex-direction: column; gap: 1px; width: 100%; height: 100%; overflow: hidden; }
.tpe-box__l { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.tpe-box__l[contenteditable="true"] { outline: 1px solid var(--color-primary); background: var(--color-surface); cursor: text; user-select: text; }
.tpe-box__v { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; min-height: 0; }
.tpe-box__f { color: var(--color-text); font-variant-numeric: tabular-nums; }
.tpe-box__f a { color: var(--color-primary-700); text-decoration: none; }
.tpe-box--lp-left .tpe-box__in { flex-direction: row; align-items: baseline; gap: 8px; }
.tpe-box--lead-bold .is-lead { font-size: 1.2em; font-weight: 700; }
.tpe-box--lead-title .is-lead { font-size: 2em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; }
.tpe-box.is-bold .tpe-box__f { font-weight: 700; }
.tpe-box.is-center .tpe-box__in { text-align: center; }
.tpe-box.is-right .tpe-box__in { text-align: right; }
/* Name and Value: the field's name and its value as two columns. */
.tpe-box__grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; row-gap: 1px; }
.tpe-box__fn { font-size: 10px; color: var(--color-text-muted); text-align: right; white-space: nowrap; }
.tpe-box--fr-line .tpe-box__in { padding: 5px 8px; border: 1px solid var(--color-text); border-radius: 3px; }
.tpe-box--fr-shade .tpe-box__in { padding: 5px 8px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 3px; }
/* What a box of another kind draws inside it. */
.tpe-box__img { width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.tpe-box .tpe-doc-qr { width: 100%; height: 100%; }
.tpe-box .tpe-doc-bc { height: 100%; }
.tpe-box .tpe-doc-bc svg { width: 100%; height: auto; flex: 1 1 0; min-height: 0; }
.tpe-box .tpe-doc-sign__line, .tpe-box .tpe-doc-stamp, .tpe-box .tpe-doc-sign__esign { flex: none; height: 34px; }
.tpe-box .tpe-doc-sign__hand { font-size: 20px; }
.tpe-box__check { display: inline-flex; align-items: center; gap: 6px; }
.tpe-box__tick { width: 10px; height: 10px; flex: none; border: 1px solid var(--color-text); border-radius: 2px; }
.tpe-box__ph {
  display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 20px;
  background: var(--color-surface-alt); border: 1px dashed var(--color-border-strong); border-radius: 3px; color: var(--color-text-muted);
}
/* In Design every box answers the cursor with a dashed line; the selected
   one is outlined in the primary and carries the corner handle. A box that
   does not print is drawn faded inside a dashed line. */
.tpe-sheet--design .tpe-box:hover { outline: 1px dashed var(--color-primary); outline-offset: 1px; }
.tpe-sheet--design .tpe-box.is-selected { outline: 2px solid var(--color-primary); outline-offset: 1px; z-index: 3; }
.tpe-box.is-off > .tpe-box__in { opacity: .35; }
.tpe-sheet--design .tpe-box.is-off:not(.is-selected):not(:hover) { outline: 1px dashed var(--color-border-strong); outline-offset: 1px; }
/* From page 2, a Header or Footer printed in full draws page 1's boxes again;
   they are changed on page 1, so here they answer neither cursor nor click. */
.tpe-sheet--design .tpe-box.is-mirror { pointer-events: none; }
.tpe-box__rz {
  display: none; position: absolute; z-index: 3;
  right: calc(-6 * var(--chrome)); bottom: calc(-6 * var(--chrome)); width: calc(10 * var(--chrome)); height: calc(10 * var(--chrome));
  background: var(--color-primary); border: 1px solid var(--color-surface); border-radius: 2px; cursor: nwse-resize;
}
.tpe-box.is-selected > .tpe-box__rz { display: block; }

/* ---------- The document ----------------------------------------------------------- */
.tpe-doc-bc { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.tpe-doc-bc svg { width: 150px; height: 26px; fill: var(--color-text); }
.tpe-doc-bc span { font-size: 10px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
/* The slab table: the document's own, not a .data-table. Header ruled above
   and below, group rows on the table-head tint, subtotals ruled, zebra on. */
.tpe-doc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; }
.tpe-sheet--m .tpe-doc-table { font-size: 11px; }
.tpe-sheet--l .tpe-doc-table { font-size: 12px; }
.tpe-doc-table th {
  padding: 4px 5px; text-align: left; font-size: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted); border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text); white-space: nowrap;
}
.tpe-doc-table thead.is-off { display: none; }
.tpe-doc-table td { padding: 1px 5px 2px; border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.tpe-doc-table.is-zebra tbody tr:nth-child(even) td { background: var(--color-surface-alt); }
.tpe-doc-table th.col-bundle { width: 12%; }
.tpe-doc-table th.col-slab   { width: 17%; }
.tpe-doc-table th.col-mat    { width: 22%; }
.tpe-doc-table th.col-dim    { width: 16%; }
.tpe-doc-table th.col-thk    { width: 8%; }
.tpe-doc-table th.col-area   { width: 12%; }
.tpe-doc-table th.col-wt     { width: 13%; }
.tpe-doc-table th.col-area, .tpe-doc-table td.col-area,
.tpe-doc-table th.col-wt,   .tpe-doc-table td.col-wt { text-align: right; }
.tpe-doc-table tr.tpe-grp td { background: var(--color-table-head); font-weight: 700; color: var(--color-text); padding: 3px 5px; border-bottom: 1px solid var(--color-border-strong); white-space: normal; }
.tpe-doc-table.is-zebra tbody tr.tpe-grp td { background: var(--color-table-head); }
.tpe-doc-table tr.tpe-sub td { font-weight: 600; border-bottom: 1px solid var(--color-border-strong); }
.tpe-doc-table.is-zebra tbody tr.tpe-sub td { background: var(--color-surface); }
/* Design's stand-in for the rows Preview adds: one muted line each. */
.tpe-doc-table tr.tpe-more-row td,
.tpe-doc-table.is-zebra tbody tr.tpe-more-row td { padding: 3px 5px; background: none; color: var(--color-text-subtle); border-bottom: 1px dashed var(--color-border-strong); }
.tpe-doc-sign__line { height: 44px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--color-text); margin-bottom: 4px; }
.tpe-doc-sign__hand { font-family: 'Caveat', cursive; font-size: 22px; color: var(--color-primary-700); padding: 0 6px 2px; }
.tpe-doc-stamp {
  height: 44px; margin-bottom: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--color-primary); border-radius: 6px; color: var(--color-primary-700); transform: rotate(-3deg);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.tpe-doc-stamp small { font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.tpe-doc-sign__esign {
  height: 44px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--color-primary); border-radius: 3px; background: var(--color-primary-50);
  color: var(--color-primary-700); font-size: 10px; font-weight: 600;
}
.tpe-doc-qr { width: 30px; height: 30px; flex: none; fill: var(--color-text); }
.tpe-doc-btn { display: inline-block; padding: 0 6px; border-radius: 3px; background: var(--color-primary); color: var(--color-surface) !important; font-weight: 600; }

/* ---------- The panel ---------------------------------------------------------- */
.tpe-props__h { display: flex; align-items: flex-start; gap: 4px; padding: 2px 0 10px; border-bottom: 1px solid var(--color-border); }
.tpe-props__h .cell-stack { flex: 1; min-width: 0; }
.tpe-props__h .main { font-size: 14px; font-weight: 600; }
.tpe-props__h .sub { white-space: normal; }
.tpe-props__h .btn-sm { padding: 4px 6px; }
.tpe-sec { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.tpe-sec:last-child { border-bottom: 0; }
.tpe-sec h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
/* A switch row: switch, then label, regular weight (§5); a value word trails
   the label a step down. */
.tpe-sec .switch-field { display: flex; padding: 4px 0; font-size: 12px; color: var(--color-text); }
.tpe-col__q { font-size: 11px; color: var(--color-text-subtle); margin-left: 4px; }
/* A setting row: the label right-aligned in one column and the control right
   after it in the next, so every control in the panel shares one left edge
   and one width (§16). 160px holds the widest option, First Line as Title,
   with room for a longer language. */
.tpe-row { display: grid; grid-template-columns: 96px minmax(0, 160px); align-items: center; column-gap: 8px; padding: 4px 0; font-size: 12px; }
.tpe-row__l { color: var(--color-text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpe-row__v { min-width: 0; color: var(--color-text); }
.tpe-sec__note a { color: var(--color-primary-700); text-decoration: none; font-weight: 500; }
.tpe-sel { width: auto; max-width: 100%; padding: 5px 28px 5px 9px; font-size: 12px; background-position: right 8px center; }
.tpe-inp { width: auto; padding: 5px 9px; font-size: 12px; }
.tpe-row .tpe-sel, .tpe-row .tpe-inp { width: 100%; }
.tpe-inp--num, .tpe-row .tpe-inp--num { width: 64px; }
.tpe-unit { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.tpe-align { display: inline-flex; gap: 4px; }
.tpe-align .btn { padding: 4px 7px; }
.tpe-align .btn[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary-700); background: var(--color-primary-50); }
.tpe-btns { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }
.tpe-sec__add { margin-top: 6px; padding-left: 6px; }
.tpe-sec__note { margin: 8px 0 0; font-size: 11px; color: var(--color-text-subtle); }
/* The house reorder rows on the control ground (§13): a box's fields and the
   table's columns, each with its small actions after the name. */
.tpe-cols .reorder-item { background: var(--color-control); border-color: var(--color-control-border); padding: 4px 6px; gap: 6px; }
.tpe-cols .reorder-item .switch-field { flex: 1; min-width: 0; padding: 0; font-size: 12px; color: var(--color-text); }
.tpe-cols .reorder-num { min-width: 20px; height: 20px; font-size: 11px; padding: 0 3px; }
.tpe-cols .reorder-grip svg { width: 14px; height: 14px; }
.tpe-col__edit { padding: 2px 4px; flex: none; }
.tpe-col__edit svg { width: 12px; height: 12px; }
.tpe-fld { flex: 1; min-width: 0; font-size: 12px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpe-addf { width: 100%; margin: 6px 0 4px; padding: 5px 28px 5px 9px; font-size: 12px; background-position: right 8px center; }
.tpe-txt { width: 100%; padding: 6px 9px; font-size: 12px; resize: vertical; }
/* A condition is three selects: field, test, value. */
.tpe-cond { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.tpe-cond .select { width: 100%; min-width: 0; padding: 5px 18px 5px 6px; font-size: 12px; background-position: right 5px center; }
.tpe-eval { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: 12px; color: var(--color-success-ink); font-weight: 500; }
.tpe-eval.is-false { color: var(--color-danger-ink); }
/* With nothing selected: how the editor works, in three steps. */
.tpe-guide { padding: 4px 2px; }
.tpe-guide__t { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--color-text); }
.tpe-guide__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tpe-guide__steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--color-text); }
.tpe-guide__n {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-50); color: var(--color-primary-700); font-size: 12px; font-weight: 700;
}
.tpe-guide .tpe-sec__note { margin-top: 16px; font-size: 12px; line-height: 1.45; }
/* More Options: the rarer settings, folded away under one heading. */
.tpe-more { border-bottom: 1px solid var(--color-border); }
.tpe-more > summary {
  display: flex; align-items: center; gap: 6px; padding: 12px 0; cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted);
}
.tpe-more > summary::-webkit-details-marker { display: none; }
.tpe-more > summary:hover { color: var(--color-text); }
.tpe-more > summary svg { width: 14px; height: 14px; flex: none; transform: rotate(-90deg); transition: transform 120ms; }
.tpe-more[open] > summary svg { transform: none; }
.tpe-more > .tpe-sec { padding-top: 4px; }
.tpe-more > .tpe-sec:last-child { border-bottom: 0; }
/* What a selection does not offer is hidden: a part's own display must not bring it back. */
.tpe-props [hidden] { display: none; }

/* ---------- Footer -------------------------------------------------------------- */
.tpe-foot { gap: 10px 20px; flex-wrap: wrap; }
.tpe-foot__state { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-subtle); white-space: nowrap; }
.tpe-foot__state strong { color: var(--color-warn-ink); font-weight: 600; }
.tpe-foot__state.is-saved strong { color: var(--color-success-ink); }
.tpe-zoom { display: inline-flex; align-items: center; gap: 12px; }
.tpe-zoom__opt { cursor: pointer; font-size: 12px; font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tpe-zoom__opt.is-active { color: var(--color-text); font-weight: 600; }
.tpe-zoom__fit { display: none; font-size: 12px; font-weight: 600; color: var(--color-text); }
.tpe-foot__page { white-space: nowrap; }

/* ---------- Dialogs -------------------------------------------------------------- */
.tpe-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tpe-form-row .tpe-sel { width: auto; }
.tpe-switch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
/* `.field label` dresses a label as a field caption; a switch's label is the
   setting's own words, so it takes the body type back (§5). */
.tpe-switch-grid .switch-field, .tpe-switch-list .switch-field { color: var(--color-text); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tpe-switch-list { display: flex; flex-direction: column; gap: 6px; }
.tpe-modal-switch { margin-top: 14px; color: var(--color-text); }
.tpe-modal-p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text); }
.tpe-pub-facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tpe-pub-facts li { display: flex; align-items: center; gap: 8px; }
.tpe-pub-facts .dot-status { flex: none; }
/* Labels and their translations: a three-column grid of key and two fields. */
.tpe-lang { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.tpe-lang__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.tpe-lang__k { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.tpe-lang .input { padding: 6px 9px; font-size: 12px; }
/* The template permissions: each named, with what it allows under it. */
.tpe-perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tpe-perm-list li { display: flex; flex-direction: column; gap: 1px; }
.tpe-perm-list strong { font-size: 13px; font-weight: 600; color: var(--color-text); }
.tpe-perm-list span { font-size: 12px; color: var(--color-text-muted); }
/* Presets: tiles on the control ground, the chosen one framed in the primary. */
.tpe-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpe-preset {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; cursor: pointer;
  font: inherit; color: var(--color-text);
  background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius);
}
.tpe-preset svg { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); }
.tpe-preset .cell-stack { min-width: 0; }
.tpe-preset .sub { white-space: normal; }
.tpe-preset:hover { border-color: var(--color-primary); }
.tpe-preset.is-active { border-color: var(--color-primary); background: var(--color-primary-50); }
.tpe-preset.is-active svg { color: var(--color-primary-700); }
.tpe-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; cursor: pointer;
  background: var(--color-control); border: 1px dashed var(--color-control-border); border-radius: var(--radius);
}
.tpe-drop svg { width: 22px; height: 22px; color: var(--color-text-muted); }
.tpe-drop__t { font-size: 13px; font-weight: 500; }
.tpe-drop__s { font-size: 12px; color: var(--color-text-muted); }

/* ---------- Narrow screens ---------------------------------------------------------- */
@media (max-width: 1320px) {
  .tpe-editor { grid-template-columns: 220px minmax(0, 1fr) 280px; }
}
@media (max-width: 1100px) {
  /* The three columns stack: the page first, what it is set to under it, the
     palette last. Each takes its own height; the canvas keeps a window of its
     own so the panel stays within reach. */
  .tpe-editor { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .tpe-canvas { order: 1; max-height: 640px; }
  .tpe-props { order: 2; border-left: 0; border-top: 1px solid var(--color-border); }
  .tpe-palette { order: 3; border-right: 0; border-top: 1px solid var(--color-border); }
  .tpe-palette, .tpe-props { overflow: visible; }
  .tpe-group__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .tpe-group__h[aria-expanded="false"] + .tpe-group__items { display: none; }
}
@media (max-width: 768px) {
  .tpe-head { flex-wrap: wrap; }
  .tpe-form-row, .tpe-presets { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* The sheet fits the screen: 877 drawn at 28% is 246, which is what a
     390px phone leaves inside the canvas. The zoom words give way to the fact. */
  .tpe-canvas { padding: 14px; }
  .tpe-canvas[data-zoom] { --zoom: .28; }
  .tpe-zoom__opt { display: none; }
  .tpe-zoom__fit { display: inline; }
  .tpe-cond { grid-template-columns: 1fr; }
  .tpe-field { white-space: normal; }
  .tpe-preview { flex-wrap: wrap; }
  .tpe-group__items { grid-template-columns: 1fr; }
  .tpe-switch-grid { grid-template-columns: 1fr; }
  .tpe-lang { grid-template-columns: 1fr; }
  .tpe-lang__h { display: none; }
}