@bongos/core 1.19.1064 → 1.19.1065

package/modules/copy-desk/tests/copy_no_cms.mjs

@@ -21,9 +21,9 @@
 // which no renderer reads — and the wording reaches a person only after somebody
 // claims that task and ships the diff. So the four things pinned here are:
 //
-//   * the write surface is EXACTLY the verbs the module defines (eight since
-//     TW09: the page draft, its Word upload and the submit write the round
-//     TASK, never a row),
+//   * the write surface is EXACTLY the verbs the module defines (ten since
+//     TW12: the page draft, its Word upload, the submit and the Approval
+//     queue's two decisions write the round TASK, never a row),
 //   * no column on copy_desk_flags could hold replacement text,
 //   * nothing in this module writes a file, and
 //   * the ONLY thing that writes a surface file is the applier, it lives outside
@@ -66,7 +66,8 @@ const stripComments = (src) => src
 // status, drift and tally) and page-data.js (the read side of the page
 // inventory and readings). They are held to the same two rules as the rest.
 // TW09 (task 1004320) added docx.js, the Word round trip over Buffers.
-const MODULE_FILES = ['registry.js', 'flags.js', 'proposals.js', 'pages.js', 'page-status.js', 'page-data.js', 'docx.js', 'routes/copy-desk.js'];
+// TW12 (task 1004323) added page-decisions.js, the Approval queue's route helpers.
+const MODULE_FILES = ['registry.js', 'flags.js', 'proposals.js', 'pages.js', 'page-status.js', 'page-data.js', 'docx.js', 'page-decisions.js', 'routes/copy-desk.js'];
 
 console.log('copy-desk: NO LIVE CMS');
 
@@ -78,6 +79,12 @@ await test('the write surface is exactly the verbs the module defines', () => {
   assert.deepEqual(found, [
     'POST /copy-desk/flags',
     'POST /copy-desk/flags/:id/close',
+    // TW12 (task 1004323, ADR 0341 D7, D11): the Approval queue's two
+    // decisions. Both move the page round TASK through the lifecycle port
+    // (approveHeldTweak, sendBackHeldTweak); approve lands the applied branch the
+    // ordinary way, and send-back appends a note block to the task. Neither
+    // writes a row here, a file, or anything a renderer reads.
+    'POST /copy-desk/pages/:pageId/approve',
     // TW06 (task 1004317, ADR 0341 D5, D6, D11): the page claim opens or takes a
     // TASK and a web claim through the lifecycle port; the page ask writes one
     // flag row whose target is a page id. Neither stores wording.
@@ -87,6 +94,7 @@ await test('the write surface is exactly the verbs the module defines', () => {
     // round's DRAFT through the autosave's own port call and resolver, never a
     // row here, a file, or the site.
     'POST /copy-desk/pages/:pageId/draft.docx',
+    'POST /copy-desk/pages/:pageId/send-back',
     // TW08 (task 1004319, ADR 0341 D4, D11): the draft autosave and the
     // submit. Both write the page round's TASK DESCRIPTION through the
     // lifecycle port, the place ADR 0233 lets wording rest; neither writes a
@@ -249,6 +257,34 @@ await test('the Word round trip is pure over Buffers, and its upload writes only
     'the upload writes the draft and nothing else: no row, and never the frozen batch');
 });
 
+await test('the Approval queue decides only through the port, and a send-back writes a note, never wording', () => {
+  // TW12 (task 1004323, ADR 0341 D7): approve and send-back move the round
+  // TASK through the lifecycle port. Send-back's one piece of text is the
+  // artist's note to the next applier, written as a page-tweak-sent-back block
+  // by pages.appendSentBack; it must never touch the draft or the frozen batch.
+  const src = stripComments(read('routes/copy-desk.js'));
+  const handler = (p) => {
+    const start = src.indexOf(`router.post('${p}'`);
+    assert.ok(start >= 0, `${p} is mounted`);
+    const next = src.indexOf('router.', start + 1);
+    return src.slice(start, next === -1 ? undefined : next);
+  };
+  const approve = handler('/copy-desk/pages/:pageId/approve');
+  const sendBack = handler('/copy-desk/pages/:pageId/send-back');
+  assert.ok(/lifecycle\.approveHeldTweak\(/.test(approve), 'approve moves the task through the lifecycle port');
+  assert.ok(/lifecycle\.sendBackHeldTweak\(/.test(sendBack), 'send-back moves the task through the lifecycle port');
+  for (const [name, h] of [['approve', approve], ['send-back', sendBack]]) {
+    assert.equal(/insertFlag|closeFlag|INSERT INTO|UPDATE |createTask|composeBatchBlock|composeDraftBlock|saveDraftInto|replaceBlock/i.test(h), false,
+      `the ${name} route writes no row here and no draft or batch`);
+    assert.equal(/req\.body\.(before|after|section|placement|file|line|string_id|text|lines)\b/.test(h), false,
+      `the ${name} route takes no wording or target from the request body`);
+  }
+  assert.ok(/pages\.appendSentBack\(task\.description,/.test(sendBack), 'the note is appended by the one sent-back writer');
+  assert.ok(/pages\.normalizeSentBackNote\(req\.body\.note\)/.test(sendBack), 'the note floor is checked before anything moves');
+  const schemas = src.slice(src.indexOf('const APPROVE_BODY_SCHEMA'), src.indexOf('const PAGE_REFUSAL_STATUS'));
+  assert.equal(/\b(before|after|section|placement|file|string_id|lines)\s*:/.test(schemas), false, 'the decision schemas name no wording or target field');
+});
+
 await test('the module manifest declares no seam another module could write copy through', () => {
   const manifest = JSON.parse(read('module.json'));
   assert.deepEqual(manifest.provides, [], 'a provided port here would be a copy write path for every other module');

package/modules/hall-ui/public/approval-queue-lib.js

@@ -0,0 +1,156 @@
+// modules/hall-ui/public/approval-queue-lib.js — the Approval queue's pure rules
+// (task 1004323 / BV2.TW12, goal 1000095; ADR 0341 D7). window.OTBApprovalQueueLib,
+// node-require-safe (the tweak-editor-lib.js pattern), so tests/hall_approval_queue.mjs
+// can pin every word the panel says without a browser.
+//
+// The words are the master design's (docs/design/mocks/tweak-mode/Main.dc.html,
+// its Approval queue panel): "approval queue · 1 of 2", "Home · landing · 2 lines
+// rewritten, applied", "highlighted: the words you changed", "Approved. It ships
+// now, and Home reads text tweaked 3x. Next in the queue: Contact." and "Sent
+// back with your note. It comes back to the queue once it is re-applied."
+
+(() => {
+  'use strict';
+
+  // The renders /tweak attaches (modules/lifecycle/task-visuals.js
+  // TWEAK_RENDER_SLOTS): <phase>-<device>-<mode>, eight in all.
+  const PHASES = Object.freeze(['before', 'after']);
+  const DEVICES = Object.freeze(['desktop', 'phone']);
+  const MODES = Object.freeze(['light', 'dark']);
+  const MIN_NOTE = 10; // pages.MIN_NOTE_CHARS, the send-back floor
+  const MAX_NOTE = 500;
+
+  function slotName(phase, device, mode) {
+    return `${phase}-${device}-${mode}`;
+  }
+
+  // The same server-minted shape hall-visual.js guards (task-visuals.js mints
+  // it); anything else is never put in a src.
+  const VISUAL_URL_RE = /^\/api\/(gds|bongos)\/task-visuals\/task-\d+-[0-9a-f]{16}\.(png|jpg|gif|webp)$/;
+
+  // slots: GET /tasks/:id/visuals's `slots` -> { '<slot>': { url, alt } }, only
+  // the eight render names and only server-minted URLs.
+  function renderIndex(slots) {
+    const known = new Set(PHASES.flatMap((p) => DEVICES.flatMap((d) => MODES.map((m) => slotName(p, d, m)))));
+    const out = {};
+    for (const s of slots || []) {
+      if (!s || !known.has(s.slot) || !VISUAL_URL_RE.test(String(s.visual_url || ''))) continue;
+      out[s.slot] = { url: s.visual_url, alt: s.visual_alt || '' };
+    }
+    return out;
+  }
+
+  // The render for a view, or the nearest one there is: the other colour mode
+  // first (a page that pins one mode is shot once per mode anyway), then the
+  // other device. `exact` says whether it is the view asked for.
+  function pickRender(index, { phase, device, mode }) {
+    const tries = [
+      [device, mode],
+      [device, mode === 'light' ? 'dark' : 'light'],
+      [device === 'desktop' ? 'phone' : 'desktop', mode],
+      [device === 'desktop' ? 'phone' : 'desktop', mode === 'light' ? 'dark' : 'light'],
+    ];
+    for (const [i, [d, m]] of tries.entries()) {
+      const hit = index && index[slotName(phase, d, m)];
+      if (hit) return { ...hit, slot: slotName(phase, d, m), device: d, mode: m, exact: i === 0 };
+    }
+    return null;
+  }
+
+  function hasAnyRender(index) {
+    return !!index && Object.keys(index).length > 0;
+  }
+
+  // An apex page's inventory title is its branding template ({{productName}}:
+  // {{tagline}}); the editor's own rule names it (tweak-editor-lib displayTitle),
+  // restated so this panel loads without the editor's lib.
+  function displayTitle(item) {
+    const t = String((item && item.title) || (item && item.page_id) || '');
+    if (!/\{\{/.test(t)) return t;
+    if (item.path === '/') return 'Home';
+    const rest = t.replace(/^\{\{[^}]*\}\}\s*(?:—|-|:)\s*/, '').replace(/\{\{[^}]*\}\}/g, '').trim();
+    if (!rest) return 'Home';
+    return rest.charAt(0).toUpperCase() + rest.slice(1);
+  }
+
+  const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+
+  function eyebrow(item) {
+    return item ? `approval queue · ${item.position} of ${item.of}` : 'approval queue';
+  }
+
+  // "· landing · 2 lines rewritten, applied", and the refused lines named when
+  // there are any ("· 1 not applied").
+  function subLine(item) {
+    if (!item) return '';
+    const parts = [item.surface_word || item.surface || '', `${plural(item.applied_count, 'line', 'lines')} rewritten, applied`];
+    if (item.refused_count > 0) parts.push(`${item.refused_count} not applied`);
+    return `· ${parts.filter(Boolean).join(' · ')}`;
+  }
+
+  // What the studio's quick action says under "Approval queue".
+  function doorDetail(count) {
+    if (count == null) return 'the pages /tweak has applied';
+    if (count === 0) return 'nothing waiting for you';
+    return `${plural(count, 'page', 'pages')} applied, waiting for you`;
+  }
+
+  // Why a line was not applied, in words (copy-apply.js's refusals).
+  const REFUSED = Object.freeze({
+    target_gone: 'not applied: the page no longer shows it',
+    ambiguous_target: 'not applied: the page shows these words in more than one place',
+    no_exact_span: 'not applied: this text cannot be changed mechanically',
+    placeholder_mismatch: 'not applied: a {…} value was added or dropped',
+    path_outside_surface: 'not applied: it lives outside this page\'s files',
+  });
+  function refusedWords(code) {
+    return REFUSED[code] || 'not applied';
+  }
+
+  // One row of "the words you changed", for a flip. In AFTER the new words are
+  // the line and carry the mark; in BEFORE the old words are the line, unmarked,
+  // the mock's own two states.
+  function lineRow(line, phase) {
+    const after = phase !== 'before';
+    return {
+      key: line.key,
+      section: line.section || '',
+      text: after && !line.refused ? line.after : line.before,
+      marked: after && !line.refused,
+      aside: line.refused ? refusedWords(line.refused) : (after ? `was: ${line.before}` : `becomes: ${line.after}`),
+      refused: !!line.refused,
+    };
+  }
+
+  function noteProblem(note) {
+    const n = String(note == null ? '' : note).replace(/\s+/g, ' ').trim();
+    if (n.length < MIN_NOTE) return `Say what needs changing in at least ${MIN_NOTE} characters.`;
+    if (n.length > MAX_NOTE) return `Keep it to one line, at most ${MAX_NOTE} characters.`;
+    return null;
+  }
+
+  // "Approved. It ships now, and Home reads text tweaked 3x. Next in the queue:
+  // Contact." The status is the server's (status_after); the next page is the
+  // server's re-read of the queue.
+  function approvedLine(item, resp) {
+    const name = displayTitle(item);
+    const status = resp && resp.status_after ? resp.status_after.charAt(0).toLowerCase() + resp.status_after.slice(1) : null;
+    const next = resp && resp.next && resp.next.page ? displayTitle(resp.next.page) : null;
+    return [
+      status ? `Approved. It ships now, and ${name} reads ${status}.` : 'Approved. It ships now.',
+      next ? `Next in the queue: ${next}.` : 'Nothing else is waiting.',
+    ].join(' ');
+  }
+
+  function sentBackLine() {
+    return 'Sent back with your note. It comes back to the queue once it is re-applied.';
+  }
+
+  const api = {
+    PHASES, DEVICES, MODES, MIN_NOTE, MAX_NOTE,
+    slotName, renderIndex, pickRender, hasAnyRender, displayTitle,
+    eyebrow, subLine, doorDetail, refusedWords, lineRow, noteProblem, approvedLine, sentBackLine,
+  };
+  if (typeof window !== 'undefined') window.OTBApprovalQueueLib = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+})();

package/modules/hall-ui/public/approval-queue.css

@@ -0,0 +1,286 @@
+/* modules/hall-ui/public/approval-queue.css — the Approval queue panel
+   (task 1004323 / BV2.TW12, goal 1000095; ADR 0341 D7).
+
+   THE PIXEL CONTRACT. docs/design/mocks/tweak-mode/Main.dc.html's wide glass
+   dialog is the master design the owner approved, and this sheet is its inline
+   styles, one rule per element: the scrim, the 1180 by 820 glass, the header
+   row (the mono eyebrow, the page name, the before/after pills, close), the
+   rendered page on its light frame, the accent "approve and ship", the ghost
+   "send it back" and its one-line note, the hint, and the two outcome lines.
+   The values are the artboard's own, so the sheet is its own token tier (the
+   tweak editor's precedent, tweak-editor.css; tests/hall_audit.mjs
+   LITERAL_EXEMPT names it). What a gate or a route forced to differ is in the
+   task's ship notes and modules/hall-ui/records/approval-queue.md.
+
+   ONE PANEL, BOTH MODES. The dialog is glass over the night studio whatever
+   the hall's theme, so its palette sits on the panel's own root (.aq-overlay),
+   never :root or body. The one thing that follows the theme is the scrim: the
+   artboard's .42 over the dark room, and .94 over the light hall, where .42
+   would leave the glass's grey words below the AA floor. That scrim is the
+   artboard's own tint (--aq-scrim), not the hall's --scrim: the glass is the
+   design of record, the tweak editor's --tw-scrim precedent. */
+
+.aq-overlay {
+  color-scheme: dark;
+  --aq-scrim: rgba(4, 5, 9, .94);
+  --aq-glass: rgba(255, 255, 255, .075);
+  --aq-glass-edge: rgba(255, 255, 255, .18);
+  --aq-glass-rim: rgba(255, 255, 255, .22);
+  --aq-drop: rgba(0, 0, 0, .55);
+  --aq-ink: #ffffff;
+  --aq-ink-soft: #c0c0c0;
+  --aq-ink-faint: #a8a8a8;
+  --aq-ink-dim: #8a8a90;
+  --aq-well: rgba(0, 0, 0, .25);
+  --aq-pill-on: rgba(255, 255, 255, .16);
+  --aq-close: rgba(255, 255, 255, .08);
+  --aq-ghost-edge: rgba(255, 255, 255, .24);
+  --aq-accent: #fb9569;
+  --aq-on-accent: #000000;
+  --aq-link: #fcbfa4;
+  --aq-mark: rgba(251, 149, 105, .35);
+  --aq-paper: #edecee;
+  --aq-paper-ink: #17181a;
+  --aq-rule: rgba(255, 255, 255, .12);
+  --aq-face: var(--font-body, Manrope, "Segoe UI", system-ui, sans-serif);
+  --aq-mono: var(--font-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal, 160);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+  background: var(--aq-scrim);
+  color: var(--aq-ink);
+  font-family: var(--aq-face);
+}
+html[data-theme="dark"] .aq-overlay { --aq-scrim: rgba(4, 5, 9, .42); }
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) .aq-overlay { --aq-scrim: rgba(4, 5, 9, .42); }
+}
+.aq-overlay[hidden] { display: none; }
+html.aq-open { overflow: hidden; }
+
+.aq-dialog {
+  width: min(1180px, 100%);
+  height: min(820px, 100%);
+  box-sizing: border-box;
+  padding: 26px 30px;
+  border-radius: 30px;
+  background: var(--aq-glass);
+  border: 1px solid var(--aq-glass-edge);
+  backdrop-filter: blur(30px) saturate(160%);
+  -webkit-backdrop-filter: blur(30px) saturate(160%);
+  box-shadow: inset 0 1px 0 var(--aq-glass-rim), 0 40px 90px var(--aq-drop);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+}
+.aq-overlay button,
+.aq-overlay input { font-family: inherit; }
+.aq-overlay :focus-visible { outline: 2px solid var(--aq-accent); outline-offset: 2px; }
+
+/* The header row. */
+.aq-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+.aq-eyebrow {
+  font-family: var(--aq-mono);
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--aq-ink-soft);
+  white-space: nowrap;
+}
+.aq-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 1.3;
+  color: var(--aq-ink);
+  min-width: 0;
+}
+.aq-title__sub { font-size: 14px; color: var(--aq-ink-dim); }
+.aq-head__gap { margin-left: auto; }
+.aq-flips {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 999px;
+  background: var(--aq-well);
+  flex: none;
+}
+.aq-flip {
+  height: 40px;
+  padding: 0 18px;
+  border-radius: 999px;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: var(--aq-ink-faint);
+  font-size: 13.5px;
+}
+.aq-flip[aria-pressed="true"] { background: var(--aq-pill-on); color: var(--aq-ink); }
+.aq-close {
+  height: 44px;
+  padding: 0 16px;
+  border-radius: 999px;
+  cursor: pointer;
+  border: 0;
+  background: var(--aq-close);
+  color: var(--aq-ink);
+  font-size: 13px;
+  flex: none;
+}
+
+/* The page, and the words beside it. */
+.aq-body {
+  flex-grow: 1;
+  min-height: 0;
+  display: flex;
+  gap: 16px;
+}
+.aq-frame {
+  flex-grow: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  border-radius: 14px;
+  background: var(--aq-paper);
+  color: var(--aq-paper-ink);
+}
+.aq-render { display: block; width: 100%; height: auto; }
+.aq-render--phone { width: min(390px, 100%); margin: 24px auto; border-radius: 10px; }
+.aq-frame__note {
+  margin: 0;
+  padding: 70px 40px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--aq-paper-ink);
+  max-width: 620px;
+}
+.aq-frame__swap {
+  margin: 0;
+  padding: 10px 16px;
+  font-size: 13px;
+  color: var(--aq-paper-ink);
+}
+.aq-lines {
+  width: 300px;
+  flex: none;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.aq-views { display: flex; flex-wrap: wrap; gap: 8px; }
+.aq-lines__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.aq-line { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--aq-rule); }
+.aq-line__section {
+  font-family: var(--aq-mono);
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--aq-ink-faint);
+}
+.aq-line__text { font-size: 15px; line-height: 1.5; color: var(--aq-ink); }
+.aq-mark { background: var(--aq-mark); color: var(--aq-ink); border-radius: 4px; padding: 0 3px; }
+.aq-line__aside { font-size: 13px; line-height: 1.45; color: var(--aq-ink-faint); }
+.aq-line--refused .aq-line__aside { color: var(--aq-link); }
+.aq-lines__none { margin: 0; font-size: 14px; color: var(--aq-ink-faint); }
+
+/* The decision row. */
+.aq-foot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+}
+.aq-accent {
+  height: 48px;
+  padding: 0 26px;
+  border-radius: 999px;
+  cursor: pointer;
+  border: 0;
+  background: var(--aq-accent);
+  color: var(--aq-on-accent);
+  font-size: 15px;
+  flex: none;
+}
+.aq-ghost {
+  height: 48px;
+  padding: 0 24px;
+  border-radius: 999px;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--aq-ghost-edge);
+  color: var(--aq-ink);
+  font-size: 15px;
+  flex: none;
+}
+.aq-ghost--send { padding: 0 20px; font-size: 14px; }
+.aq-ghost--small { height: 44px; padding: 0 18px; font-size: 13.5px; }
+.aq-accent:disabled,
+.aq-ghost:disabled { opacity: .5; cursor: default; }
+.aq-note { flex-grow: 1; display: flex; gap: 10px; align-items: center; min-width: 0; }
+.aq-note__input {
+  flex-grow: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  height: 48px;
+  padding: 0 16px;
+  border-radius: 999px;
+  font-size: 14.5px;
+  color: var(--aq-ink);
+  background: var(--aq-well);
+  border: 1px solid var(--aq-glass-edge);
+}
+.aq-note__input::placeholder { color: var(--aq-ink-faint); }
+.aq-hint { margin-left: auto; font-size: 13px; color: var(--aq-ink-faint); white-space: nowrap; }
+.aq-sealed { margin: 0; font-size: 14px; color: var(--aq-ink-soft); }
+.aq-outcome { margin: 0; font-size: 15px; line-height: 1.5; }
+.aq-outcome--approved { color: var(--aq-link); }
+.aq-outcome--sent { color: var(--aq-ink-soft); }
+.aq-foot--done { justify-content: space-between; }
+.aq-error { margin: -6px 0 0; font-size: 13.5px; color: var(--aq-link); }
+.aq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* A phone: the dialog is the screen, and it scrolls as one; the words go under
+   the page, and the header and the decision row wrap. */
+@media (max-width: 760px) {
+  /* The dialog is the whole screen here, so the room behind would read through
+     the glass under its words; the scrim darkens to .88 in both modes. */
+  .aq-overlay { padding: 8px; align-items: stretch; --aq-scrim: rgba(4, 5, 9, .88); }
+  html[data-theme] .aq-overlay,
+  html:not([data-theme]) .aq-overlay { --aq-scrim: rgba(4, 5, 9, .88); }
+  .aq-dialog { height: 100%; padding: 18px 16px; border-radius: 22px; overflow-y: auto; gap: 14px; }
+  .aq-dialog > * { flex-shrink: 0; }
+  .aq-head { flex-wrap: wrap; row-gap: 10px; }
+  .aq-eyebrow { order: 1; flex: 1 1 auto; }
+  .aq-close { order: 2; }
+  .aq-title { order: 3; flex: 1 1 100%; }
+  .aq-head__gap { display: none; }
+  .aq-head .aq-flips { order: 4; }
+  .aq-body { flex-direction: column; flex-grow: 0; }
+  .aq-frame { flex: none; max-height: 70vh; }
+  .aq-frame__note { padding: 40px 20px; }
+  .aq-lines { width: auto; overflow: visible; }
+  .aq-foot { flex-wrap: wrap; }
+  .aq-note { flex: 1 1 100%; }
+  .aq-hint { margin-left: 0; flex: 1 1 100%; white-space: normal; }
+  .aq-foot--done { flex-direction: column; align-items: flex-start; }
+}