/* ============================================================
   Contract maker - editor extras and the four paper designs.
   Builds on doc-studio.css (.dst-*). Paper designs are scoped
   under .dst-paper[data-template="..."] and use --doc-accent.
   ============================================================ */

/* ---------------- editor ---------------- */
.ct-notice code { padding: 0 4px; border-radius: 4px; background: rgba(255,255,255,.7); color: inherit; font-size: 12.5px; }
.ct-notice > span { font-size: 18px; line-height: 1.2; }

.ct-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ct-type {
    position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 13px; text-align: left;
    border: 1.5px solid var(--dst-line); border-radius: 14px; background: #fff; color: var(--dst-ink); cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.ct-type:hover { border-color: color-mix(in srgb, var(--dst-accent) 45%, var(--dst-line)); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(18,26,51,.07); }
.ct-type:focus-visible { outline: 3px solid color-mix(in srgb, var(--dst-accent) 35%, transparent); outline-offset: 2px; }
.ct-type[aria-checked="true"] { border-color: var(--dst-accent); background: var(--dst-accent-soft); box-shadow: 0 10px 24px color-mix(in srgb, var(--dst-accent) 16%, transparent); }
.ct-type[aria-checked="true"]::after {
    content: "\2713"; position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--dst-accent); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 0 0 3px #fff; animation: dst-rise .2s ease both;
}
.ct-type-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ct-type-top strong { min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.25; }
.ct-type-count { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--dst-soft); color: var(--dst-ink-2); font-size: 11px; font-weight: 700; }
.ct-type[aria-checked="true"] .ct-type-count { background: #fff; color: var(--dst-accent); }
.ct-type-sum { font-size: 12.5px; line-height: 1.45; color: var(--dst-ink-2); }
.ct-type-parties { font-size: 11.5px; font-weight: 600; color: var(--dst-ink-3); }

.ct-party, .ct-signer { padding: 12px; border-radius: 14px; background: var(--dst-soft); border: 1px solid var(--dst-line); }
.ct-party + .ct-party, .ct-signer + .ct-signer { margin-top: 12px; }
.ct-party .dst-input, .ct-party .dst-textarea, .ct-signer .dst-input { background: #fff; }
.ct-party-tag { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dst-accent); }

.ct-gap { margin-bottom: 12px; }
.ct-gap-top { margin-top: 12px; }
.ct-gap-top-sm { margin-top: 8px; }

/* placeholder assistant */
.ct-ph-badge.is-warn { background: #fef3c7; color: #92400e; }
.ct-ph-badge.is-ok { background: #dcfce7; color: #166534; }
.ct-ph-intro { margin-bottom: 10px; }
.ct-ph-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 420px; overflow-y: auto; }
.ct-ph-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--dst-soft); border: 1px solid var(--dst-line); animation: dst-rise .22s ease both; }
.ct-ph-label { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 12.5px; font-weight: 700; }
.ct-ph-label mark { min-width: 0; overflow-wrap: anywhere; }
.ct-ph-count { flex: none; font-size: 11.5px; color: var(--dst-ink-3); }
.ct-ph-input { display: flex; gap: 6px; }
.ct-ph-input .dst-input { flex: 1; background: #fff; height: 36px; }
.ct-ph-done { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; color: #166534; font-weight: 700; font-size: 13.5px; }
.dst mark.ct-ph { padding: 0 3px; border-radius: 3px; background: #fff1a8; color: inherit; box-shadow: inset 0 -1px 0 #e5b800; }

/* clauses */
.ct-clause-n {
    flex: none; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px;
    background: var(--dst-accent); color: #fff; font-size: 12px; font-weight: 800;
}
.ct-clause-row .dst-input, .ct-clause-row .dst-textarea { background: #fff; }
.ct-clause-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ct-lib-toggle[aria-expanded="true"] { background: var(--dst-accent-soft); border-style: solid; }
.ct-library { margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--dst-line); background: #fbfcfe; animation: dst-rise .22s ease both; }
.ct-lib-list { display: flex; flex-direction: column; gap: 12px; max-height: 380px; margin-top: 10px; overflow-y: auto; }
.ct-lib-type { position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding: 4px 0; background: #fbfcfe; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dst-accent); }
.ct-lib-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: #fff; border: 1px solid var(--dst-line); }
.ct-lib-item + .ct-lib-item { margin-top: 6px; }
.ct-lib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-lib-text strong { font-size: 13.5px; }
.ct-lib-text span { font-size: 12px; line-height: 1.4; color: var(--dst-ink-3); }

/* signatures */
.ct-sign-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.ct-sign-saved { display: flex; flex-direction: column; gap: 4px; }
.ct-sign-saved .dst-link { align-self: flex-end; font-size: 13px; }
.ct-upload { position: relative; overflow: hidden; }
.ct-upload:focus-within { outline: 3px solid color-mix(in srgb, var(--dst-accent) 35%, transparent); outline-offset: 2px; }
.ct-witness-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dst-line); }
.ct-witness-box #ctWitnessWrap { margin-top: 10px; }
.ct-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* account */
.ct-account { padding: 14px 16px; border-radius: var(--dst-radius); background: #fff; border: 1px solid var(--dst-line); }
.ct-account-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ct-account-in strong { font-size: 14.5px; }
.ct-account-hint { display: flex; gap: 8px; }
.ct-account-msg { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: #166534; }
.ct-account-msg.is-error { color: #be123c; }

/* ---------------- paper: shared ---------------- */
.dst-paper .ct-doc { position: relative; min-height: 1123px; padding: 66px 74px 70px; font-size: 13.4px; line-height: 1.62; color: #1f2433; }
.dst-paper .ct-empty { color: #a3aac0; font-style: italic; font-weight: 400; }
.dst-paper mark.ct-ph { padding: 0 2px; border-radius: 2px; background: #fff1a8; color: inherit; box-shadow: inset 0 -1px 0 #e5b800; }
.dst-paper .ct-head { margin: 0 0 22px; }
.dst-paper .ct-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--doc-accent); }
.dst-paper .ct-doc-title { margin: 6px 0 8px; font-size: 30px; font-weight: 800; line-height: 1.18; letter-spacing: -.01em; color: #111827; overflow-wrap: anywhere; }
.dst-paper .ct-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: #5b6479; }
.dst-paper .ct-meta b { font-weight: 700; color: #8a93a8; }
.dst-paper .ct-intro { margin: 0 0 12px; }
.dst-paper .ct-parties { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin: 0 0 20px; }
.dst-paper .ct-and { align-self: center; font-size: 12px; font-style: italic; color: #8a93a8; }
.dst-paper .ct-pcard { min-width: 0; padding: 14px 16px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--doc-accent) 35%, #fff); overflow-wrap: anywhere; }
.dst-paper .ct-plabel { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--doc-accent); }
.dst-paper .ct-pname { margin: 3px 0 2px; font-size: 15px; font-weight: 700; color: #111827; }
.dst-paper .ct-pdetail { font-size: 12px; line-height: 1.5; color: #5b6479; }
.dst-paper .ct-pas { margin-top: 4px; font-size: 11.5px; color: #8a93a8; }
.dst-paper .ct-opening, .dst-paper .ct-closing { margin: 0 0 16px; overflow-wrap: anywhere; }
.dst-paper .ct-closing { margin-top: 6px; }
.dst-paper .ct-clause { margin: 0 0 14px; break-inside: avoid-page; }
.dst-paper .ct-ch { display: flex; gap: 10px; align-items: baseline; margin: 0 0 3px; font-size: 15px; font-weight: 700; color: #111827; }
.dst-paper .ct-cn { flex: none; min-width: 22px; color: var(--doc-accent); }
.dst-paper .ct-clause.is-article .ct-ch { gap: 6px; }
.dst-paper .ct-clause.is-article .ct-cn { min-width: 0; }
.dst-paper .ct-dash { color: var(--doc-accent); }
.dst-paper .ct-ct { min-width: 0; overflow-wrap: anywhere; }
.dst-paper .ct-cbody { padding-left: 32px; overflow-wrap: anywhere; }
.dst-paper .ct-clause.is-article .ct-cbody { padding-left: 0; }
.dst-paper .ct-cbody p { margin: 0 0 5px; }
.dst-paper .ct-sub { display: flex; gap: 10px; }
.dst-paper .ct-subn { flex: none; min-width: 26px; color: #5b6479; font-variant-numeric: tabular-nums; }
.dst-paper .ct-noclause { padding: 18px; border: 1.5px dashed #d6dcea; border-radius: 8px; text-align: center; }
.dst-paper .ct-sign-wrap, .dst-paper .ct-wit-wrap { margin-top: 28px; break-inside: avoid-page; }
.dst-paper .ct-sign-h { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #111827; }
.dst-paper .ct-signs, .dst-paper .ct-wits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
.dst-paper .ct-sign, .dst-paper .ct-wit { min-width: 0; overflow-wrap: anywhere; }
.dst-paper .ct-slabel { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--doc-accent); }
.dst-paper .ct-sig-area { display: flex; align-items: flex-end; height: 76px; border-bottom: 1px solid #6b7280; }
.dst-paper .ct-sig-area img { max-width: 78%; max-height: 70px; }
.dst-paper .ct-wline { height: 48px; border-bottom: 1px solid #6b7280; }
.dst-paper .ct-sname { margin-top: 6px; font-weight: 700; color: #111827; }
.dst-paper .ct-srole, .dst-paper .ct-sdate { font-size: 12px; color: #5b6479; }
.dst-paper .ct-foot {
    display: flex; align-items: center; gap: 18px; margin-top: 40px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--doc-accent) 30%, #fff);
    font-size: 10px; color: #8a93a8; font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}
.dst-paper .ct-disclaimer { flex: 1; max-width: 55%; line-height: 1.45; }
.dst-paper .ct-initials { display: inline-flex; align-items: center; gap: 6px; color: #5b6479; }
.dst-paper .ct-initials i { display: inline-block; width: 40px; height: 22px; border: 1px solid #9aa3b8; border-radius: 3px; }
.dst-paper .ct-pageno { margin-left: auto; color: #5b6479; }

/* ---------------- Formal: centred serif, double rule ---------------- */
.dst-paper[data-template="formal"] .ct-doc { font-family: "Noto Serif", Georgia, "Times New Roman", serif; }
.dst-paper[data-template="formal"] .ct-head { text-align: center; padding-bottom: 16px; border-bottom: 3px double var(--doc-accent); }
.dst-paper[data-template="formal"] .ct-meta { justify-content: center; }
.dst-paper[data-template="formal"] .ct-pcard { border-radius: 3px; }

/* ---------------- Modern: accent band, soft cards ---------------- */
.dst-paper[data-template="modern"] .ct-head { margin: -66px -74px 26px; padding: 52px 74px 30px; background: var(--doc-accent); color: #fff; }
.dst-paper[data-template="modern"] .ct-kicker { color: rgba(255,255,255,.72); }
.dst-paper[data-template="modern"] .ct-doc-title { color: #fff; }
.dst-paper[data-template="modern"] .ct-meta, .dst-paper[data-template="modern"] .ct-meta b { color: rgba(255,255,255,.85); }
.dst-paper[data-template="modern"] .ct-head mark.ct-ph { color: #1f2433; }
.dst-paper[data-template="modern"] .ct-pcard { border: 0; border-radius: 10px; background: color-mix(in srgb, var(--doc-accent) 8%, #fff); }
.dst-paper[data-template="modern"] .ct-sign-h { color: var(--doc-accent); }

/* ---------------- Minimal: left, accent tick, quiet ---------------- */
.dst-paper[data-template="minimal"] .ct-head { padding-bottom: 18px; border-bottom: 1px solid #e3e7f1; }
.dst-paper[data-template="minimal"] .ct-head::before { content: ""; display: block; width: 46px; height: 4px; margin-bottom: 16px; border-radius: 2px; background: var(--doc-accent); }
.dst-paper[data-template="minimal"] .ct-kicker { display: none; }
.dst-paper[data-template="minimal"] .ct-pcard { border: 0; border-radius: 8px; background: color-mix(in srgb, var(--doc-accent) 7%, #fff); }
.dst-paper[data-template="minimal"] .ct-ch { font-size: 14.5px; }

/* ---------------- Classic: serif, double frame, uppercase title ---------------- */
.dst-paper[data-template="classic"] .ct-doc { padding: 78px 86px 80px; font-family: "Noto Serif", Georgia, "Times New Roman", serif; }
.dst-paper[data-template="classic"] .ct-doc::before, .dst-paper[data-template="classic"] .ct-doc::after { content: ""; position: absolute; pointer-events: none; }
.dst-paper[data-template="classic"] .ct-doc::before { inset: 34px; border: 2px solid var(--doc-accent); }
.dst-paper[data-template="classic"] .ct-doc::after { inset: 41px; border: 1px solid color-mix(in srgb, var(--doc-accent) 45%, #fff); }
.dst-paper[data-template="classic"] .ct-head { text-align: center; }
.dst-paper[data-template="classic"] .ct-head .ct-meta { justify-content: center; }
.dst-paper[data-template="classic"] .ct-doc-title { font-size: 26px; letter-spacing: .06em; text-transform: uppercase; color: var(--doc-accent); }
.dst-paper[data-template="classic"] .ct-doc-title::after { content: ""; display: block; width: 40%; height: 1px; margin: 12px auto 0; background: var(--doc-accent); }
.dst-paper[data-template="classic"] .ct-pcard { border-radius: 0; }
.dst-paper[data-template="classic"] .ct-sign-h { color: var(--doc-accent); }

/* ---------------- responsive ---------------- */
@media (max-width: 640px) {
    .ct .dst-status { flex-wrap: wrap; }
    .ct .dst-saved { white-space: nowrap; }
    .ct-types, .ct-clause-actions { grid-template-columns: minmax(0, 1fr); }
    .ct-lib-item { flex-direction: column; align-items: stretch; }
    .ct-account-in .dst-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-type, .ct-ph-row, .ct-library, .ct-type[aria-checked="true"]::after { transition: none; animation: none !important; }
    .ct-type:hover { transform: none; }
}