/* =============================================================================
   DEX CRM - Docs

   The builder is two columns: a palette that stays put, and an A4 sheet that
   scrolls. The sheet is drawn at its real pixel size (794 × 1123 at 96dpi) so
   what somebody arranges on screen is what comes out of the printer - the
   whole reason for showing a page instead of a column of blocks.
   ============================================================================= */

.doc-builder {
    height: 100%;
    min-height: 0;
}

.doc-builder__grid {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 0;
    height: 100%;
    min-height: 0;
}

/* -----------------------------------------------------------------------------
   PALETTE
   -------------------------------------------------------------------------- */

.doc-palette {
    overflow-y: auto;
    padding: 4px 18px 24px 0;
    border-right: 1px solid var(--border-subtle);
}

.doc-palette__section {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-palette__section:last-child { border-bottom: 0; }

.doc-palette__title {
    margin: 0 0 3px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.doc-palette__hint {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.doc-palette__blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.doc-block-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-chip, 4px);
    background: var(--surface-panel, #fff);
    font: inherit;
    font-size: 12.5px;
    color: var(--text-primary);
    cursor: grab;
    text-align: left;
}

.doc-block-chip:hover {
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
}

.doc-block-chip:active { cursor: grabbing; }

.doc-block-chip--widget {
    grid-column: 1 / -1;
    background: var(--accent-tint, #eef0ff);
}

/* Collapsible variable and widget sections, the same fold the email builder
   uses so the palette is a short list of headings until you open one. */
.doc-palette__section--fold { padding: 0; }
.doc-palette__section--fold[open] { padding-bottom: 14px; }

.doc-palette__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 2px;
    cursor: pointer;
    user-select: none;
}

.doc-palette__summary::-webkit-details-marker { display: none; }

.doc-palette__summary-title {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.doc-palette__summary:hover .doc-palette__summary-title { color: var(--text-primary); }

.doc-palette__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.doc-palette__section--fold[open] > .doc-palette__summary .doc-palette__chevron {
    transform: rotate(90deg);
}

.doc-palette__group { margin-top: 10px; }

.doc-palette__group-label {
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* A variable reads as a thing you can pick up, not as a word. */
.doc-token {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-subtle, #f4f6f8);
    font-size: 11.5px;
    color: var(--text-secondary);
    cursor: grab;
}

.doc-token:hover {
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
}

/* Custom fields are tinted, exactly as they are in the email builder, so it
   is obvious which variables came from Fields and Layout. */
.doc-token[data-custom] {
    background: var(--status-success-tint);
    border-color: color-mix(in srgb, var(--status-success) 35%, transparent);
    color: var(--status-success);
}

/* -----------------------------------------------------------------------------
   STAGE
   -------------------------------------------------------------------------- */

.doc-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.doc-stage__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 12px 18px;
    border-bottom: 1px solid var(--border-subtle);
}

/* The name is an AM notched field (the sweep wraps it); the wrapper takes the
   row's spare width. */
.doc-name-field {
    flex: 1 1 200px;
    min-width: 160px;
    margin: 0;
}

.kudio-field .doc-name {
    font-weight: 600;
}

/* The toolbar is its own row now rather than a cluster wedged beside the
   document name: fourteen controls do not share a line with a text field and
   a button, and wrapping them mid-cluster reads as breakage. */
.doc-rich-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 7px 18px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle, #f4f6f8);
}

.doc-rich-tools__split {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--border-default);
}

.doc-rich-tools__select {
    height: 26px;
    max-width: 120px;
    padding: 0 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
}

.doc-rich-tools__select--narrow {
    max-width: 74px;
}

/* The swatch reads as a colour, so the word beside it says WHICH colour.
   Two identical swatches side by side is a guess every time. */
.doc-rich-tools__colour {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 7px 0 4px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
}

.doc-rich-tools__colour input[type="color"] {
    width: 20px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    background: none;
    cursor: pointer;
}

.doc-rich-tools__colour-name {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
    white-space: nowrap;
}

.doc-rich-tools__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.doc-rich-tools__button:hover {
    background: var(--surface-panel, #fff);
    color: var(--accent, #6366f1);
}

.doc-page-holder {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 22px 18px 60px;
    background: var(--surface-canvas);
}

/* The sheet sits flat on the canvas with a 1px edge, like every AM card. */
.doc-page {
    margin: 0 auto;
    border: 1px solid var(--border-default);
    box-sizing: border-box;
}

.doc-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 240px;
    border: 2px dashed var(--border-strong, #d5dadf);
    border-radius: var(--radius-button);
    color: var(--text-muted);
    text-align: center;
}

.doc-page__empty p { margin: 0; }
.doc-page__empty-hint { font-size: 12px; }

/* -----------------------------------------------------------------------------
   BLOCKS

   The furniture - grip, tools, settings - is builder-only. None of it exists
   in renderDocument's output, which is why the preview and the printed sheet
   look like a document rather than an editor.
   -------------------------------------------------------------------------- */

.doc-block {
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    transition: border-color 120ms ease, background 120ms ease;
}

.doc-block:hover { border-color: var(--accent-border); }

.doc-block--selected {
    border-color: var(--accent, #6366f1);
    background: color-mix(in srgb, var(--accent) 3%, transparent);
}

.doc-block--dragging { opacity: 0.4; }

.doc-block__grip,
.doc-block__tools {
    position: absolute;
    top: -11px;
    display: none;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--surface-panel, #fff);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
    font-size: 11px;
    color: var(--text-muted);
    z-index: 2;
}

.doc-block__grip { left: 8px; cursor: grab; }
.doc-block__tools { right: 8px; }

.doc-block:hover .doc-block__grip,
.doc-block:hover .doc-block__tools,
.doc-block--selected .doc-block__grip,
.doc-block--selected .doc-block__tools {
    display: flex;
}

.doc-block__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.doc-block__tool:hover {
    background: var(--surface-subtle, #f4f6f8);
    color: var(--accent, #6366f1);
}

.doc-block__body { padding: 4px 8px; }

.doc-block__settings {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 8px 8px;
    padding: 8px 10px;
    border-radius: var(--radius-button);
    background: var(--surface-subtle, #f4f6f8);
}

.doc-block__note {
    font-size: 12px;
    color: var(--text-muted);
}

.doc-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.doc-field__input {
    padding: 4px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel, #fff);
    font: inherit;
    font-size: 12px;
}

.doc-field__input--number { width: 66px; }

/* Settings drawn as AM notched fields (field() in document-builder-panel.js):
   the fieldset is the outline, so the controls give up their own boxes. */
.doc-field.kudio-field {
    display: block;
    flex: 0 1 auto;
    min-width: 96px;
    background: var(--surface-panel);
}

.doc-field.kudio-field .kudio-field__label {
    cursor: default;
}

.doc-field.kudio-field .doc-field__input--number {
    width: 72px;
}

.doc-field.kudio-field .doc-field__colour-pair {
    display: flex;
    min-height: 28px;
}

.doc-field.kudio-field .doc-field__colour {
    border: 0;
}

.doc-field.kudio-field .doc-field__image .doc-field__input {
    flex: 1 1 auto;
}

.doc-field__colour {
    width: 30px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: none;
}

/* The editable areas carry no chrome of their own - the document's type is
   what should be visible, not a box around it. */
.doc-editable:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 2px;
    border-radius: 3px;
}

.doc-columns-edit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.doc-widget-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1px dashed var(--accent, #6366f1);
    border-radius: var(--radius-button);
    background: var(--accent-tint, #eef0ff);
    font-size: 12.5px;
    color: var(--accent, #6366f1);
}

.doc-widget-preview em {
    margin-left: auto;
    font-size: 11.5px;
    font-style: normal;
    color: var(--text-muted);
}

/* A drop line is invisible until something is being dragged over it, so the
   page reads as a document at rest and as a builder in motion. */
.doc-drop-line {
    height: 8px;
    margin: 1px 0;
    border-radius: 4px;
    transition: background 100ms ease;
}

.doc-drop-line--over {
    background: var(--accent, #6366f1);
    height: 4px;
    margin: 3px 0;
}

/* -----------------------------------------------------------------------------
   DOCUMENT TYPE - shared with the preview and the printed sheet
   -------------------------------------------------------------------------- */

/* Type comes through CUSTOM PROPERTIES rather than fixed values.
   A `line-height` set on a block wrapper cannot beat a rule that names
   `.doc-text p` directly - the rule is more specific, so the control appeared
   to do nothing. A custom property inherits, so the wrapper wins and the
   numbers below are only what an unset block falls back to. */
.doc-h {
    margin: 0 0 var(--doc-para-space, 8px);
    line-height: var(--doc-line-height, 1.25);
    font-weight: 700;
}

.doc-text p {
    margin: 0 0 var(--doc-para-space, 9px);
    line-height: var(--doc-line-height, 1.55);
}

.doc-text ul, .doc-text ol {
    margin: 0 0 var(--doc-para-space, 9px);
    line-height: var(--doc-line-height, 1.55);
    padding-left: 22px;
}

.doc-text li { margin-bottom: calc(var(--doc-para-space, 9px) / 3); }

/* Paragraph styles the toolbar's Style dropdown produces (formatBlock),
   matching the printed sheet so the builder shows the real thing. */
.doc-text h1 {
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--doc-para-space, 10px);
}
.doc-text h2 {
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--doc-para-space, 9px);
}
.doc-text h3 {
    font-size: 1.12em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--doc-para-space, 8px);
}
.doc-text blockquote {
    margin: 0 0 var(--doc-para-space, 10px);
    padding: 2px 0 2px 14px;
    border-left: 3px solid #cbd2da;
    color: #55606e;
    font-style: italic;
}

.doc-table { width: 100%; border-collapse: collapse; margin: 10px 0; }

.doc-table th,
.doc-table td {
    border: 1px solid #d5dadf;
    padding: 7px 9px;
    text-align: left;
    font-size: 0.95em;
}

.doc-table th { background: #f4f6f8; font-weight: 600; }

/* On screen the break is a labelled rule; on paper it is a real page break. */
.doc-page-break {
    height: 0;
    margin: 14px 0;
    border-top: 2px dashed var(--accent, #6366f1);
}

.doc-block .doc-page-break::after {
    content: 'Page break';
    display: block;
    width: fit-content;
    margin: -9px auto 0;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent, #6366f1);
    font-size: 10.5px;
    color: #fff;
}

.doc-signature { width: 100%; margin-top: 28px; }

.doc-signature td {
    width: 50%;
    padding-right: 26px;
    vertical-align: top;
}

.doc-signature__line { border-bottom: 1px solid #1f2430; height: 34px; }
.doc-signature__role { font-size: 0.85em; color: #6b7280; margin-top: 5px; }
.doc-signature__name { font-weight: 600; margin-top: 2px; }
.doc-signature__date { font-size: 0.85em; color: #6b7280; margin-top: 12px; }

.doc-signature__rule {
    display: inline-block;
    width: 120px;
    border-bottom: 1px solid #9aa3ad;
}

.doc-image { display: block; max-width: 100%; }

.doc-image--empty {
    padding: 22px;
    border: 1px dashed var(--border-strong, #d5dadf);
    border-radius: var(--radius-button);
    color: var(--text-muted);
    text-align: center;
    font-size: 12.5px;
}

/* -----------------------------------------------------------------------------
   A WIDGET ON THE CANVAS

   Drawn for real rather than shown as a grey chip, so a label or a colour
   somebody has just changed is visible where they changed it. The name rides
   in the corner because a table of items and a table of payments look alike
   at a glance and the block still has to say which it is.
   -------------------------------------------------------------------------- */
.doc-widget-live {
    position: relative;
    padding-top: 6px;
}

.doc-widget-live::before {
    content: attr(data-widget-name);
    position: absolute;
    top: -6px;
    right: 0;
    padding: 1px 6px;
    border-radius: var(--radius-button);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 120ms ease;
}

.doc-block:hover .doc-widget-live::before,
.doc-block--selected .doc-widget-live::before {
    opacity: 1;
}

/* A label somebody can type over. Nothing marks it until the pointer is on
   it: an invoice covered in dotted boxes is a form, and this is meant to look
   like the sheet it will print as. */
[data-widget-edit] {
    border-radius: 3px;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 120ms ease, background 120ms ease;
    cursor: text;
}

.doc-block--selected [data-widget-edit]:hover {
    background: var(--accent-tint, #eef0ff);
    box-shadow: 0 0 0 3px var(--accent-tint, #eef0ff);
}

.doc-label-editing,
.doc-block--selected .doc-label-editing:hover {
    background: var(--surface-panel);
    box-shadow: 0 0 0 2px var(--accent);
    outline: none;
}

/* -----------------------------------------------------------------------------
   THE FORMAT BAR

   Type first, in one row, because it is what somebody reaches for while
   looking at the thing. Everything else stays underneath as fields.
   -------------------------------------------------------------------------- */
.doc-format-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 0 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-format-bar .doc-field {
    gap: 4px;
}

.doc-format-bar .doc-field > span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.doc-widget-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* A colour with a way back. The picker itself cannot say "unset", so the
   cross beside it is the only route to the default once one is chosen. */
.doc-field__colour-pair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.doc-field__clear {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.doc-field__clear:hover {
    color: var(--text-primary);
}

.doc-field__image {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.doc-field__image .doc-field__input {
    min-width: 150px;
}


/* -----------------------------------------------------------------------------
   PREVIEW
   -------------------------------------------------------------------------- */

.doc-preview { height: 100%; min-height: 0; }

.doc-preview-frame {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    background: var(--surface-canvas);
}

/* -----------------------------------------------------------------------------
   FIELDS IN THE BUILDER

   A question as it is being written: the label typed in place, the help text
   under it, and a quiet strip saying what KIND of answer this asks for - since
   the answer control itself belongs to the fill page, not here.
   -------------------------------------------------------------------------- */

/* RM-114: question, help line and answer type stacked, the way the client
   reads them, rather than squeezed onto one line. */
.doc-field--editing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 4px 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.doc-field--editing .doc-field__label {
    font-weight: 600;
    outline: none;
    min-height: 20px;
}

.doc-field--editing .doc-field__answer-hint { align-self: flex-start; }

.doc-field__choices {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 0 2px;
    padding: 0;
    list-style: none;
}

.doc-field__choice {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel, #fff);
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

.doc-field__choice-mark {
    flex: none;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--border-strong, #c4c9cf);
    border-radius: 3px;
}

.doc-field__choice--circle .doc-field__choice-mark { border-radius: 50%; }

.doc-field__choice--chevronDown .doc-field__choice-mark {
    width: 6px;
    height: 6px;
    border-width: 0 1.5px 1.5px 0;
    border-radius: 0;
    transform: rotate(45deg);
    margin: 0 3px;
}

.doc-field__choice--more {
    border-style: dashed;
    color: var(--text-muted);
}

.doc-field--editing .doc-field__help {
    font-size: 12.5px;
    color: var(--text-muted);
    outline: none;
    min-height: 17px;
}

/* An empty help line would otherwise be an invisible click target. */
.doc-field--editing .doc-field__help:empty::before {
    content: attr(data-placeholder);
    color: var(--text-faint, #b6bcc4);
}

.doc-field__answer-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 4px 9px;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-sunken, #f6f8fa);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.doc-field__answer-hint .icon { color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   THE DOCUMENT PANEL - one generated document, read rather than built
   -------------------------------------------------------------------------- */

.doc-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 0;
}

/* Four columns need about 500px. The panel is often narrower than that, and
   four squeezed columns turn "Status" into "Stat" - so the row wraps to two
   instead of truncating its own labels. */
.doc-view__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-raised, #fff);
}

.doc-view__meta-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.doc-view__meta-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.doc-view__meta-value {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-view__status {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--radius-chip, 4px);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.7;
}

.doc-view__status--draft {
    background: var(--status-neutral-tint);
    color: var(--status-neutral);
}

.doc-view__status--sent {
    background: var(--status-info-tint);
    color: var(--status-info);
}

.doc-view__status--viewed {
    background: var(--status-success-tint);
    color: var(--status-success);
}

.doc-view__share {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The link is an AM notched field (read-only, so dashed); it takes the row's
   spare width and the Copy button sits beside it. */
.doc-view__share-field {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.kudio-field .doc-view__share-input {
    color: var(--text-secondary);
    text-overflow: ellipsis;
}

.doc-view__sheet {
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    overflow: hidden;
}

.doc-view__frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 62vh;
    border: 0;
    background: var(--surface-canvas);
}

/* -----------------------------------------------------------------------------
   ANSWERS - what the client said, read as questions and answers

   Deliberately not a replica of the form. Staff reading this want to know what
   was said, and an unanswered question has to LOOK unanswered - which a
   faithful rendering of the form tends to hide.
   -------------------------------------------------------------------------- */

.form-answers {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    overflow: hidden;
    background: var(--surface-raised, #fff);
}

.form-answers__row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.form-answers__row:last-child { border-bottom: 0; }

.form-answers__question {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-answers__answer {
    font-size: 13px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.form-answers__row--empty .form-answers__answer { color: var(--text-muted); }
.form-answers__answer em { color: var(--text-muted); font-style: normal; }

.form-answers__tag {
    display: inline-block;
    margin: 0 6px 4px 0;
    padding: 2px 9px;
    border-radius: var(--radius-chip, 4px);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
}

.form-answers__signature {
    display: block;
    max-width: 220px;
    max-height: 70px;
    border-bottom: 1px solid var(--border-strong, #d5dadf);
}

@media (max-width: 1100px) {
    .doc-builder__grid { grid-template-columns: 1fr; }
    .doc-palette { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .form-answers__row { grid-template-columns: 1fr; gap: 4px; }
}

/* -----------------------------------------------------------------------------
   Agent Meeko - the sparkle in the toolbar and the chat dock
   -------------------------------------------------------------------------- */

/* The sparkle sits in the toolbar but carries a word, so it reads as the one
   thing on the bar that does more than format. */
.doc-rich-tools__ai {
    width: auto;
    gap: 6px;
    padding: 0 11px;
    color: var(--accent, #6366f1);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
}
.doc-rich-tools__ai span { white-space: nowrap; }
.doc-rich-tools__ai:hover {
    background: var(--accent-tint, #eef0ff);
    border-color: var(--accent, #6366f1);
}

/* Agent Meeko in the builder now runs through the app's own Agent Meeko chat (the
   floating popup or the docked side panel), so the builder no longer draws
   its own chat dock. The sparkle in the toolbar opens that chat and points it
   at the open document; the styles for it live with the rest of Agent Meeko. */

/* Documents, Templates, Forms and Core templates: .page-surface is a
   fixed-height column that clips, so the page body takes the leftover height
   and scrolls (the table header stays put). Below 900px the page grows and the
   stage scrolls instead (components.css). */
#docLogTable,
#docTemplateTable,
#formTemplateTable,
#coreTemplatesContent {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 900px) {
    #docLogTable,
    #docTemplateTable,
    #formTemplateTable,
    #coreTemplatesContent { flex: none; overflow-y: visible; }

    /* A table wider than the screen scrolls inside its own box. Without this
       the documents, templates and forms tables widened the whole page by up
       to 220px on a phone. */
    #docLogTable,
    #docTemplateTable,
    #formTemplateTable,
    #coreTemplatesContent { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* -----------------------------------------------------------------------------
   THE BUILDER AS A PAGE (RM-112, 27 Oct 2026)

   Header across the top (Back, name, kind and save state, actions), then the
   palette and the sheet. The page fills the stage; the palette and the sheet
   each scroll on their own. Below 900px the page scrolls as a whole and the
   palette sits above the sheet.
   -------------------------------------------------------------------------- */

.doc-builder-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-canvas);
}

.doc-builder-page__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-panel);
}

.doc-builder-page__back {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-primary);
    cursor: pointer;
}

.doc-builder-page__back:hover { background: var(--am-blue-tint); }
.doc-builder-page__back:focus-visible { outline: none; box-shadow: var(--am-focus); }

.doc-builder-page__titles {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-builder-page__name {
    width: 100%;
    max-width: 520px;
    padding: 2px 6px;
    margin-left: -6px;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-large);
    font-weight: 700;
}

.doc-builder-page__name:hover { border-color: var(--border-default); }
.doc-builder-page__name:focus { outline: none; border-color: var(--am-blue-soft); box-shadow: var(--am-focus); }

.doc-builder-page__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.doc-builder-page__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.doc-builder-page__status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-strong, #c7ccd4);
}

.doc-builder-page__status[data-tone="saved"]::before { background: var(--status-success); }
.doc-builder-page__status[data-tone="busy"]::before { background: var(--am-blue); }
.doc-builder-page__status[data-tone="dirty"]::before { background: var(--status-warning); }
.doc-builder-page__status[data-tone="warn"] { color: var(--status-warning-ink); }
.doc-builder-page__status[data-tone="warn"]::before { background: var(--status-warning); }

.doc-builder-page__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.doc-builder-page .doc-builder {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.doc-builder-page .doc-builder__grid {
    grid-template-columns: 264px minmax(0, 1fr) 300px;
    height: 100%;
}

/* The stage body: the sheet, and the live preview beside it when open. */
.doc-builder-page .doc-stage__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.doc-builder-page .doc-stage__body > .doc-page-holder { flex: 1 1 auto; min-width: 0; }
.doc-page-zoom { width: max-content; min-width: 100%; }

.doc-rich-tools__spacer { flex: 1 1 auto; }
.doc-rich-tools__button:disabled { opacity: 0.35; cursor: default; background: transparent; }

.doc-zoom { display: inline-flex; align-items: center; gap: 2px; }
.doc-rich-tools__workspace { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.doc-zoom__level {
    min-width: 46px;
    height: 26px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    cursor: pointer;
}

/* ---- Palette tabs and the outline ---------------------------------------- */
.doc-palette__tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 -16px;
    padding: 10px 16px;
    background: var(--surface-panel);
    border-bottom: 1px solid var(--border-subtle);
}

.doc-palette__tab {
    height: 30px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
    cursor: pointer;
}

.doc-palette__tab--on { background: var(--am-blue); border-color: var(--am-blue); color: #fff; }

.doc-outline { padding-top: 10px; }
.doc-outline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.doc-outline__row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.doc-outline__row:hover { background: var(--am-blue-tint); }
.doc-outline__row--on { border-color: var(--am-blue-soft); background: var(--am-blue-tint); }
.doc-outline__number {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-button);
    background: var(--surface-subtle, #f1f3f6);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}
.doc-outline__text { display: flex; flex-direction: column; min-width: 0; }
.doc-outline__text strong { font-size: var(--font-size-small); color: var(--text-primary); }
.doc-outline__text em { font-style: normal; font-size: var(--font-size-tiny); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- The inspector --------------------------------------------------------- */
.doc-inspector {
    overflow-y: auto;
    padding: 16px;
    background: var(--surface-panel);
    border-left: 1px solid var(--border-default);
}

.doc-inspector__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.doc-inspector__title { font-size: var(--font-size-medium); font-weight: 700; color: var(--text-primary); text-transform: capitalize; }
.doc-inspector__position { font-size: var(--font-size-tiny); color: var(--text-muted); }

.doc-inspector__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.doc-inspector__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-size-small);
    cursor: pointer;
}
.doc-inspector__button:hover:not(:disabled) { background: var(--am-blue-tint); color: var(--text-primary); }
.doc-inspector__button:disabled { opacity: 0.4; cursor: default; }
.doc-inspector__button[data-inspector-action="remove"]:hover { color: var(--status-danger); }

.doc-inspector__settings { border-top: 1px solid var(--border-subtle); padding-top: 14px; }
/* The settings were laid out for a wide strip under the block; in the
   inspector they stack. */
.doc-inspector__settings .doc-widget-fields,
.doc-inspector__settings .doc-widget-fields > * { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.doc-inspector__settings input:not([type="color"]),
.doc-inspector__settings select { width: 100%; }
.doc-look-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.doc-look-group__title {
    margin-bottom: 10px;
    font-size: var(--font-size-tiny);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.doc-field__colour--unset { opacity: 0.45; }
.doc-field__unset { font-size: var(--font-size-tiny); color: var(--text-muted); }
.doc-inspector__none { margin: 0; font-size: var(--font-size-small); color: var(--text-muted); line-height: 1.5; }

.doc-inspector__empty { display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); font-size: var(--font-size-small); line-height: 1.5; }
.doc-inspector__empty p { margin: 0; }
.doc-inspector__empty strong { color: var(--text-primary); }
.doc-inspector__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; }
.doc-inspector__facts dt { color: var(--text-muted); }
.doc-inspector__facts dd { margin: 0; color: var(--text-primary); font-weight: 600; }

/* ---- The live preview beside the sheet ---------------------------------- */
.doc-preview-pane {
    flex: 0 0 46%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-default);
    background: var(--surface-panel);
}
.doc-preview-pane[hidden] { display: none; }
.doc-preview-pane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-secondary);
}
.doc-preview-pane__actions { display: inline-flex; align-items: center; gap: 6px; }
.doc-preview-pane__frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.doc-builder--previewing .doc-inspector { display: none; }
.doc-builder--previewing .doc-builder__grid { grid-template-columns: 264px minmax(0, 1fr); }
.doc-builder-page .am-btn--active { background: var(--am-blue); color: #fff; }

.doc-builder-page .doc-palette {
    padding: 4px 16px 24px;
    background: var(--surface-panel);
    border-right: 1px solid var(--border-default);
}

/* The toolbar stays put while the sheet scrolls under it. */
.doc-builder-page .doc-rich-tools {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 20px;
    background: var(--surface-panel);
    border-bottom: 1px solid var(--border-default);
}

.doc-builder-page .doc-page-holder {
    padding: 28px 24px 80px;
}

@media (max-width: 1360px) {
    .doc-builder-page .doc-builder__grid { grid-template-columns: 240px minmax(0, 1fr) 260px; }
}

@media (max-width: 1100px) {
    .doc-builder-page .doc-builder__grid,
    .doc-builder--previewing .doc-builder__grid { grid-template-columns: minmax(0, 1fr); height: auto; }
    /* A plain 1fr column takes the A4 sheet's width as its minimum and drags the
       whole page past a phone screen; the sheet scrolls inside its holder instead. */
    .doc-builder-page .doc-stage,
    .doc-builder-page .doc-palette,
    .doc-builder-page .doc-inspector { min-width: 0; }
    .doc-builder-page .doc-inspector { order: 2; border-left: 0; border-bottom: 1px solid var(--border-default); max-height: none; }
    .doc-builder-page .doc-stage { order: 3; }
    .doc-builder-page .doc-stage__body { flex-direction: column; }
    .doc-preview-pane { flex-basis: auto; min-height: 70vh; border-left: 0; border-top: 1px solid var(--border-default); }
    .doc-builder-page .doc-palette { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--border-default); }
}

@media (max-width: 900px) {
    .doc-builder-page { min-height: auto; }
    .doc-builder-page .doc-builder { flex: none; }
    .doc-builder-page .doc-page-holder { overflow-x: auto; padding: 16px 12px 60px; }
    .doc-builder-page__header { flex-wrap: wrap; padding: 10px 12px; }
    .doc-builder-page__actions { width: 100%; }
    .doc-builder-page__actions .am-btn { flex: 1 1 0; justify-content: center; }
}

@media (max-width: 560px) {
    .doc-builder-page__actions .am-btn span { font-size: var(--font-size-small); }
}

/* -----------------------------------------------------------------------------
   RM-112 batch 2: Add page, pages, image upload, page setup, Import
   -------------------------------------------------------------------------- */

/* The page edges on the canvas: measured and drawn by the builder (layoutPages).
   White for the rest of the page and the next page's top margin, a band of
   canvas between the two sheets. The band reaches the sheet's edges. */
.doc-page { position: relative; }
.doc-page-gap { position: relative; pointer-events: none; user-select: none; }
.doc-page-gap__band {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-canvas);
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* + Page, floating at the bottom right of the canvas. */
.doc-add-page {
    position: sticky;
    bottom: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    height: 38px;
    margin: 12px 18px 0 auto;
    padding: 0 14px 0 10px;
    border: 0;
    border-radius: var(--radius-button);
    background: var(--am-navy, #1a253f);
    color: #fff;
    font: inherit;
    font-size: var(--font-size-small, 13px);
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(16, 24, 48, 0.22);
    cursor: pointer;
}
.doc-add-page:hover { filter: brightness(1.12); }
.doc-add-page:focus-visible { outline: none; box-shadow: var(--am-focus), 0 6px 18px rgba(16, 24, 48, 0.22); }
.doc-add-page span { margin-left: 2px; }

/* An empty Image block is the button that fills it. */
.doc-image--pickable { cursor: pointer; }
.doc-image--pickable:hover { border-color: var(--am-blue, #6d5cff); color: var(--text-primary); background: var(--am-blue-tint, #f0edff); }
.doc-image--pickable::after { content: ' - click to upload'; }

.doc-image-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.doc-image-pick__thumb {
    flex: none; width: 52px; height: 52px; border-radius: var(--radius-button);
    border: 1px solid var(--border-default); object-fit: cover; background: var(--surface-subtle, #f4f6f8);
}
.doc-image-pick__thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }

/* The Agent Meeko button keeps its own gradient mark. */
.doc-builder-page__meeko .icon { flex: none; }

/* Page setup panel */
.doc-page-setup { display: flex; flex-direction: column; }
.doc-page-setup__section { padding: 16px 0; border-bottom: var(--divider-width, 1px) solid var(--divider-colour, var(--border-default)); }
.doc-page-setup__section:first-child { padding-top: 0; }
.doc-page-setup__section:last-child { border-bottom: 0; }
.doc-page-setup__title { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.doc-page-setup__hint { margin: -4px 0 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.doc-page-setup__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc-page-setup__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-page-setup__row + .doc-page-setup__row { margin-top: 10px; }
.doc-page-setup__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.doc-page-setup__label { font-size: 12px; color: var(--text-secondary); }
.doc-page-setup__colour {
    display: flex; align-items: center; gap: 8px; height: var(--input-height, 38px); padding: 0 8px;
    border: 1px solid var(--border-default); border-radius: var(--radius-button);
}
.doc-page-setup__colour input[type="color"] { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.doc-page-setup__colour code { font-size: 12px; color: var(--text-primary); }
.doc-page-setup__image { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.doc-page-setup__thumb {
    flex: none; width: 64px; height: 84px; border-radius: var(--radius-button);
    border: 1px solid var(--border-default); background: var(--surface-subtle, #f4f6f8) center / cover no-repeat;
}
.doc-page-setup__thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.doc-page-setup__image-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Import panel */
.doc-import { display: flex; flex-direction: column; }
.doc-import__intro { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.doc-import__empty { margin: 0; font-size: 13px; color: var(--text-secondary); }
.doc-import__kind { padding: 16px 0; border-top: var(--divider-width, 1px) solid var(--divider-colour, var(--border-default)); }
.doc-import__title { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.doc-import__note { margin: -4px 0 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.doc-import__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.doc-import__tile {
    display: flex; flex-direction: column; gap: 8px; padding: 8px;
    border: 1px solid var(--border-default); border-radius: var(--radius-button);
    background: var(--surface-panel, #fff); text-align: left; font: inherit; cursor: pointer;
}
.doc-import__tile:hover:not(:disabled) { border-color: var(--am-blue-soft, #c9c2ff); }
.doc-import__tile:focus-visible { outline: none; box-shadow: var(--am-focus); }
.doc-import__tile--on { border-color: var(--am-blue, #6d5cff); box-shadow: 0 0 0 1px var(--am-blue, #6d5cff); }
.doc-import__tile:disabled { opacity: 0.5; cursor: not-allowed; }
.doc-import__thumb { display: block; aspect-ratio: 210 / 297; overflow: hidden; border-radius: 3px; background: #eef1f4; }
.doc-import__frame { width: 100%; height: 100%; border: 0; pointer-events: none; }
.doc-import__name { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--text-primary); }
.doc-import__badge {
    padding: 1px 7px; border-radius: 4px; background: var(--status-success-tint, #e6f6ed);
    color: var(--status-success, #0f7a4a); font-size: 11px; font-weight: 600;
}

@media (max-width: 560px) {
    .doc-import__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-add-page { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
.doc-page-gap--overlay { z-index: 2; pointer-events: none; user-select: none; }

/* Docs list pages (All Documents, Forms, Templates, Core Templates): the
   table sits in from the edges like Invoices, and scrolls inside itself if
   it is wider than the screen. */
.docs-list-body { padding: 0 24px 24px; overflow-x: auto; }
@media (max-width: 560px) {
    .docs-list-body { padding: 0 12px 16px; }
}

/* -----------------------------------------------------------------------------
   RM-114: DOCS > SETTINGS
   The CRM settings cards (crm-settings.css) with a few parts of its own: the
   thank you editor beside its preview, switches and the audience choice.
   -------------------------------------------------------------------------- */

.docs-settings__body { max-width: 1080px; }

.docs-settings__thanks {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 20px;
    align-items: start;
}

.docs-settings__thanks-edit { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.docs-settings__label {
    margin-top: 4px;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-secondary);
}

.docs-settings__hint {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--text-muted);
}

.docs-settings__actions { display: flex; }

.docs-settings__preview {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.docs-settings__preview-label {
    font-size: var(--font-size-tiny);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.docs-settings__preview-page {
    padding: 28px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--surface-subtle);
}

.docs-settings__preview-card {
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 22px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--surface-panel);
    text-align: center;
}

.docs-settings__preview-card h2 {
    margin: 0 0 8px;
    font-size: var(--font-size-medium);
    color: var(--text-primary);
}

/* The message as a client reads it: the same rules as form.html. */
.docs-thanks-message { font-size: 14px; line-height: 1.55; color: var(--text-secondary); overflow-wrap: anywhere; }
.docs-thanks-message p { margin: 0 0 10px; }
.docs-thanks-message p:last-child { margin-bottom: 0; }
.docs-thanks-message h3 { margin: 0 0 8px; font-size: 15px; color: var(--text-primary); }
.docs-thanks-message ul, .docs-thanks-message ol { margin: 0 0 10px; padding-left: 20px; text-align: left; }
.docs-thanks-message a { color: var(--am-blue); }
.docs-thanks-message a[data-button] {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 20px;
    border-radius: 6px;
    background: var(--am-blue);
    color: var(--text-on-dark);
    font-weight: 600;
    text-decoration: none;
}
.docs-thanks-message .rt-align-center { text-align: center; }
.docs-thanks-message .rt-align-right { text-align: right; }

.rich-text--read-only .rich-text__toolbar { display: none; }

/* A switch row: the words on the left, the switch on the right. */
.docs-settings__switches { gap: 0; padding-top: 6px; padding-bottom: 6px; }

.docs-switch {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.docs-switch:last-child { border-bottom: 0; }
.docs-switch:disabled { cursor: default; opacity: 0.7; }
.docs-switch:focus-visible { outline: none; box-shadow: var(--am-focus); border-radius: 5px; }

.docs-switch__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.docs-switch__text strong { font-size: var(--font-size-base); color: var(--text-primary); }
.docs-switch__text span { font-size: var(--font-size-small); color: var(--text-muted); }

.docs-switch__track {
    position: relative;
    flex: none;
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: var(--border-strong);
    transition: background-color 160ms ease;
}

.docs-switch__track i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-panel);
    box-shadow: 0 1px 2px rgba(15, 17, 21, 0.2);
    transition: transform 160ms ease;
}

.docs-switch[aria-checked="true"] .docs-switch__track { background: var(--accent); }
.docs-switch[aria-checked="true"] .docs-switch__track i { transform: translateX(16px); }

.docs-audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

.docs-audience__option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--surface-panel);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.docs-audience__option[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); }
.docs-audience__option:disabled { cursor: default; opacity: 0.7; }
.docs-audience__option:focus-visible { outline: none; box-shadow: var(--am-focus); }

.docs-audience__dot {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
}

.docs-audience__option[aria-checked="true"] .docs-audience__dot {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 3.5px var(--surface-panel);
    background: var(--accent);
}

.docs-audience__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.docs-audience__text strong { font-size: var(--font-size-base); color: var(--text-primary); }
.docs-audience__text span { font-size: var(--font-size-small); color: var(--text-muted); }

@media (max-width: 900px) {
    .docs-settings__thanks { grid-template-columns: minmax(0, 1fr); }
    .docs-settings__preview { position: static; }
}