/* ============================================================
   Documents — a template becomes a finished document.
   ------------------------------------------------------------
   One stage, two objects: the document page and the record it is
   filled from. The placeholders in the page fill in one by one from
   the record's rows, the status turns from Template to Filled, and a
   toast says where the finished file went. js/doc-fill.js steps the
   beats by toggling classes and data-phase; nothing here moves on
   its own beyond the sweeps those classes trigger.
   ============================================================ */
.dm-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start;
    padding: 24px; border: 1px solid var(--line); border-radius: 22px;
    background: linear-gradient(180deg, #F8F4F2 0%, #F4EFEC 100%);
}


/* ---------- the two views: the session, and the document tool at work ----------
   Both sit in the same grid cell, so the stage keeps one height while they
   crossfade. The session is the same screen the execution tab draws
   (.sc-app / .rn-*); this only adds what the document run needs. */
.dm-wrap { display: grid; }
.dm-view {
    grid-area: 1 / 1; min-width: 0; align-self: start;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s;
}
.dm-view.is-on { opacity: 1; visibility: visible; transform: none; }
/* the same layout the execution tab gives its session, which is scoped to
   that tab's id: a column with the feed scrolling and the composer at the
   foot, offset by the Process rail beside it */
.dm-app { pointer-events: none; -webkit-user-select: none; user-select: none; }
.dm-app .rn-sessionview { display: flex; flex-direction: column; }
.dm-app .rn-composer { padding-right: 252px; }
@media (max-width: 980px) { .dm-app .rn-composer { padding-right: 20px; } }
.dm-app .rn-feed { overflow-y: auto; scrollbar-width: none; }
.dm-app .rn-feed::-webkit-scrollbar { display: none; }
.dm-app .rn-row[hidden] { display: none; }
/* the tool the run reaches for, named on its row */
.dm-tool { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 23px; font-size: 12px; color: var(--sc-mut, #6B7280); opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1); }
.dm-tool.is-in { opacity: 1; transform: none; }
.dm-tool-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; background: #F1F0FF; color: #4338CA; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dm-tool-chip svg { width: 12px; height: 12px; }
/* stacked on a phone the two views differ in height, so the hidden one
   leaves the stage rather than holding its space under the other */
@media (max-width: 880px) { .dm-view:not(.is-on) { display: none; } }
@media (prefers-reduced-motion: reduce) { .dm-view { transition: none; } }

/* ---------- the document ---------- */
.dm-doc { position: relative; min-width: 0; }
.dm-doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dm-file { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.dm-file > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-file svg { flex: none; width: 16px; height: 16px; color: #2B5797; }
.dm-status { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
.dm-status-t { display: inline-flex; align-items: center; gap: 6px; }
.dm-status-t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--pink-deep); }
.dm-status-f { display: none; align-items: center; gap: 6px; }
.dm-status-f::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1F9D55; }
.dm-stage[data-phase="template"] .dm-status { background: var(--pink-wash); color: var(--pink-deep); border: 1px solid #F3DDF3; }
.dm-stage[data-phase="filled"] .dm-status { background: #E9F8EE; color: #15803D; border: 1px solid #C6EED5; }
.dm-stage[data-phase="filled"] .dm-status-t { display: none; }
.dm-stage[data-phase="filled"] .dm-status-f { display: inline-flex; }

.dm-page {
    padding: 30px 34px 48px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.05), 0 22px 44px -30px rgba(22, 18, 26, 0.4);
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    font-size: 0.9375rem; line-height: 1.75; color: #26212B;
}
.dm-page p { margin: 0 0 12px; }
.dm-page p:last-of-type { margin-bottom: 0; }
.dm-h { font-size: 1.1875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.25; color: var(--ink); text-align: center; margin: 0 0 4px !important; }
.dm-meta { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted); text-align: center; margin: 0 0 18px !important; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dm-lead { margin: 0 0 6px !important; }
.dm-lead b { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.875rem; }
.dm-parties, .dm-clauses { list-style: none; margin: 0 0 12px; padding: 0; }
.dm-clauses { margin-bottom: 4px; }
.dm-parties li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px; margin-bottom: 4px; }
.dm-clauses { counter-reset: clause; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.dm-clauses li { counter-increment: clause; display: grid; grid-template-columns: 22px 78px minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.dm-clauses li::before { content: counter(clause) "."; font-weight: 700; font-size: 1rem; color: var(--ink); }
.dm-clauses li b { font-weight: 700; font-size: 1rem; color: var(--ink); }
.dm-clauses li span { min-width: 0; }
/* a longer clause label, such as Confidentiality, needs a wider column */
.dm-clauses--wide li { grid-template-columns: 22px 118px minmax(0, 1fr); }
/* a quote or a statement lists its terms without clause numbers */
.dm-clauses--plain { counter-reset: none; }
.dm-clauses--plain li { grid-template-columns: 96px minmax(0, 1fr); }
.dm-clauses--plain li::before { content: none; }

/* a placeholder, and the value that replaces it */
.dm-field { display: inline; }
.dm-ph {
    display: inline-block; padding: 0 6px; margin: 0 1px;
    border: 1px dashed var(--pink-deep); border-radius: 6px;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; font-size: 0.75rem; font-weight: 600; line-height: 1.6; color: var(--pink-deep);
    background: var(--pink-wash); vertical-align: 1px; white-space: nowrap;
}
.dm-field.is-hot .dm-ph { animation: dm-pulse 0.7s ease-in-out infinite alternate; }
.dm-val { display: none; font-weight: 700; color: var(--ink); border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.dm-field.is-filled .dm-ph { display: none; }
.dm-field.is-filled .dm-val { display: inline; animation: dm-sweep 0.9s ease-out both; }
@keyframes dm-pulse { from { box-shadow: 0 0 0 0 rgba(213, 59, 213, 0); } to { box-shadow: 0 0 0 4px rgba(213, 59, 213, 0.16); } }
@keyframes dm-sweep { 0% { background: #FFE3FF; } 100% { background: transparent; } }


/* the toast: where the finished file went */
.dm-toast {
    position: absolute; left: 50%; bottom: -16px; transform: translate(-50%, 14px); opacity: 0;
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; max-width: calc(100% - 20px);
    background: var(--ink); color: #fff; border-radius: 12px; box-shadow: 0 12px 30px -14px rgba(22, 18, 26, 0.6);
    font-size: 0.8125rem; line-height: 1.3; white-space: nowrap;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dm-toast img { flex: none; width: 18px; height: 18px; }
.dm-toast > span { min-width: 0; }
.dm-toast b { display: block; font-weight: 700; }
.dm-toast em { display: block; font-style: normal; font-size: 0.75rem; color: #CFC7D3; overflow: hidden; text-overflow: ellipsis; }
.dm-toast-ok { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.22); font-weight: 600; color: #B7F0C6; }
.dm-toast-ok svg { width: 14px; height: 14px; }
.dm-stage[data-phase="filled"] .dm-toast { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the record it reads from ---------- */
.dm-src {
    /* each page's record card takes the palette of the tool it came from;
       the values below are Street's (street.co.uk): warm off-white ground,
       warm grey rules, near-black ink, teal accent */
    --dm-ink: #0C0D17; --dm-mut: #6B6A64; --dm-on: #E2F0EF; --dm-on-line: #B9D9D7; --dm-done: #EEF4F2; --dm-accent: #027174;
    padding: 16px; background: #FAF8F2; border: 1px solid #E1DFD7; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04);
    opacity: 0; transform: translateX(14px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.dm-stage.is-src .dm-src { opacity: 1; transform: none; }
/* HubSpot (home): its orange on a warm wash. CallSwitch One (post-call): the
   red of its rail. HubSolv (IVA): a cool blue-grey. */
.dm-src--hubspot { background: #FFF6F2; border-color: #FFD5C4; --dm-ink: #33475B; --dm-mut: #7C8C9E; --dm-on: #FFE6DC; --dm-on-line: #FFC4AE; --dm-done: #FFF0EA; --dm-accent: #FF7A59; }
.dm-src--callswitch { background: #FFF5F6; border-color: #F6C9CE; --dm-ink: #1F2430; --dm-mut: #6F7380; --dm-on: #FDE3E6; --dm-on-line: #F5B3BA; --dm-done: #FDF0F1; --dm-accent: #E30E24; }
.dm-src--whatsapp { background: #EEF9F1; border-color: #BCE8CD; --dm-ink: #0F3D2B; --dm-mut: #5F7A6B; --dm-on: #D9F2E1; --dm-on-line: #A8DEBB; --dm-done: #E6F5EB; --dm-accent: #1FA855; }
/* iamproperty (estate agents): its deep teal #00313C, from iamproperty.com, on a pale teal wash */
.dm-src--iamproperty { background: #EEF6F7; border-color: #CBE0E3; --dm-ink: #00313C; --dm-mut: #4F6B70; --dm-on: #DBEEF0; --dm-on-line: #A4D3D8; --dm-done: #E6F2F3; --dm-accent: #00313C; }
.dm-src--hubsolv { background: #F3F6FB; border-color: #D5DEEC; --dm-ink: #16223A; --dm-mut: #66728A; --dm-on: #E1EAF7; --dm-on-line: #B9CBE8; --dm-done: #EDF2FA; --dm-accent: #2B5DB8; }
.dm-src-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dm-src-head img { flex: none; width: 22px; height: 22px; }
.dm-src-head b { display: block; font-size: 0.875rem; font-weight: 700; color: var(--dm-ink); }
.dm-src-head em { display: block; font-style: normal; font-size: 0.75rem; color: var(--dm-mut); }
.dm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dm-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 9px; border-radius: 9px; font-size: 0.8125rem; transition: background 0.3s ease, box-shadow 0.3s ease; }
.dm-rows li span { flex: none; color: var(--dm-mut); }
.dm-rows li b { font-weight: 600; color: var(--dm-ink); text-align: right; }
.dm-rows li.is-on { background: var(--dm-on); box-shadow: inset 0 0 0 1px var(--dm-on-line); }
.dm-rows li.is-done { background: var(--dm-done); }
.dm-rows li.is-done b::after { content: ""; display: inline-block; width: 6px; height: 10px; margin-left: 7px; border: solid var(--dm-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }

@media (max-width: 880px) {
    .dm-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 18px; }
    /* stacked, the card is in the flow above the page, so it is simply there
       from the start: an invisible card would hold a tall empty space */
    .dm-src { order: -1; opacity: 1; transform: none; transition: none; }
    .dm-page { padding: 22px 18px 20px; font-size: 0.875rem; }
    .dm-clauses li { grid-template-columns: 18px minmax(0, 1fr); }
    .dm-clauses li b { grid-column: 2; }
    .dm-clauses li span { grid-column: 2; }
    .dm-toast { position: static; transform: none; margin-top: 12px; max-width: none; white-space: normal; flex-wrap: wrap; display: none; }
    .dm-stage[data-phase="filled"] .dm-toast { display: flex; transform: none; }
    .dm-toast-ok { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-field.is-hot .dm-ph, .dm-field.is-filled .dm-val { animation: none; }
    .dm-src, .dm-toast { transition: none; }
}