/* Minimal hand-rolled styling for Kontract.
 * Single stylesheet — no build step. Mirrors the schedule_app palette
 * (near-black ink, subtle green accent, off-white background) so the
 * generated PDF and the web pages feel like one product.
 */

:root {
    /* "Forest & Ochre" — warm, editorial, trustworthy. Variable names
       are kept stable so every existing component re-skins for free. */
    --ink: #1C1F19;
    --ink-2: #3A3F35;
    --ink-3: #7C8273;
    --hairline: #DDD7C5;
    --hairline-strong: #B8A98A;
    --bg: #FAF7EF;
    --card-bg: #FFFFFF;
    --accent: #2D4A2B;
    --accent-pale: #E4EAD9;
    --danger: #B8624A;
    --danger-bg: #F6E7E2;
    --radius: 10px;

    /* Extended palette for the dashboard shell. */
    --green-900: #1A2B1A;
    --green-950: #0F1A0E;
    --green-100: #E4EAD9;
    --ochre: #C9A961;
    --ochre-pale: #F5E9D2;
    --cream-100: #F5F1E8;
    --cream-200: #ECE6D6;

    --font-display: "Fraunces", "Noto Serif KR", Georgia, serif;
    --font-sans: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* The HTML5 `hidden` attribute should always win — without this,
 * .btn's `display: inline-block` rule (and similar element-level
 * display values) override the browser default and leave hidden
 * buttons visible. !important here is the standard fix. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.5;
    word-break: keep-all;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top chrome --------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: #fff;
    border-bottom: 0.5px solid var(--hairline);
    position: relative;     /* anchors the mobile dropdown menu */
}
.brand {
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin-right: auto;     /* pins brand left, pushes everything else right */
}
.brand:hover { text-decoration: none; }

/* Language toggle and nav-menu live to the right of the brand. The
 * brand's `margin-right: auto` consumes all free space, so these two
 * land flush against the right edge with the default flex gap between
 * them. */
.topbar-lang { /* no margin needed — brand pushes it right */ }

/* `.nav-menu` holds the hamburger + the inline nav. On desktop the
 * <nav> renders inline and the <button> toggle is hidden; on mobile
 * the <nav> hides until the button flips an `is-open` class on it. */
.nav-menu { position: relative; }

.nav-menu-toggle {
    display: none;     /* shown only on mobile */
    background: none;
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    color: var(--ink);
}
.nav-menu-toggle:hover { background: var(--bg); }
.hamburger-icon { font-size: 20px; line-height: 1; }

.nav-menu-items {
    display: flex;
    gap: 18px;
    align-items: center;
}
.nav-menu-items a,
.nav-menu-items button { font-size: 13px; color: var(--ink-2); }

.inline-form { display: inline; margin: 0; }
.btn-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--ink-2);
}
.btn-link:hover { color: var(--ink); }

/* Pill-shaped language toggle with a sliding accent indicator. The
 * slider's translateX is driven by `data-lang` on the wrapper; JS
 * animates it on click then submits the form. */
.lang-pill {
    position: relative;
    display: inline-flex;
    background: var(--bg);
    border: 0.5px solid var(--hairline-strong);
    border-radius: 999px;
    padding: 2px;
    font-size: 11px;
    user-select: none;
}
.lang-slider {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    background: var(--accent);
    border-radius: 999px;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}
.lang-pill[data-lang="ko"] .lang-slider { transform: translateX(0); }
.lang-pill[data-lang="en"] .lang-slider { transform: translateX(100%); }

.lang-option {
    position: relative;
    z-index: 2;
    border: none;
    background: transparent;
    padding: 5px 14px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.22s ease;
    white-space: nowrap;
}
.lang-pill[data-lang="ko"] .lang-option[data-lang="ko"],
.lang-pill[data-lang="en"] .lang-option[data-lang="en"] {
    color: white;
}
.lang-option:hover { color: var(--ink); }
.lang-pill[data-lang="ko"] .lang-option[data-lang="ko"]:hover,
.lang-pill[data-lang="en"] .lang-option[data-lang="en"]:hover {
    color: white;
}

/* ---------- Layout ------------------------------------------------------- */
.container { max-width: 960px; margin: 0 auto; padding: 24px 28px 80px; }
.auth-card { max-width: 380px; margin: 60px auto; }

/* Contract verification result banner. */
.verify-result {
    border-radius: 10px; padding: 12px 14px;
    font-size: 13px; line-height: 1.55; margin-bottom: 16px;
}
.verify-result strong { display: block; margin-bottom: 2px; }
.verify-result--ok { background: var(--accent-pale); color: var(--accent); }
.verify-result--no { background: var(--danger-bg); color: var(--danger); }

/* Identifying metadata shown on a verify match — lets the verifier
   confirm the document is the specific one they expected. */
.verify-meta {
    margin: 12px 0 16px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 0.5px solid var(--hairline);
    border-radius: 10px;
}
.verify-meta-title {
    margin: 0 0 8px;
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-3);
}
.verify-meta dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    font-size: 14px;
}
.verify-meta dt {
    font-weight: 600;
    color: var(--ink-3);
}
.verify-meta dd { margin: 0; color: var(--ink); }
.verify-meta-confirm {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
}

/* Legal pages (privacy / terms) — a plain readable document column. */
.legal-doc { max-width: 660px; margin: 8px auto 56px; }
.legal-doc h1 {
    font-family: var(--font-display);
    font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 4px;
}
.legal-doc .legal-meta { font-size: 13px; color: var(--ink-3); margin: 0 0 24px; }
.legal-doc h2 { font-size: 15px; font-weight: 600; margin: 26px 0 8px; }
.legal-doc p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0 0 10px; }
.legal-doc ul {
    font-size: 14px; line-height: 1.7; color: var(--ink-2);
    margin: 0 0 10px; padding-left: 20px;
}
.legal-doc li { margin-bottom: 5px; }

.page-title {
    font-family: var(--font-display);
    font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--green-900); margin: 0 0 4px;
}
.page-subtitle { color: var(--ink-2); margin: 0 0 20px; font-size: 13px; }
.section-title { font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 8px; }
.micro-label { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Cards -------------------------------------------------------- */
.card {
    background: var(--card-bg);
    border: 0.5px solid var(--hairline);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.card + .card { margin-top: 14px; }
.card-compact { padding: 12px 14px; }
.stack > * + * { margin-top: 12px; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
    display: inline-block;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 0.5px solid transparent;
    cursor: pointer;
    line-height: 1.2;
}
.btn-primary {
    background: var(--accent);
    color: white;
}
.btn-primary:hover { background: var(--green-900); text-decoration: none; color: white; }
.btn-ghost {
    background: white;
    color: var(--ink);
    border-color: var(--hairline-strong);
}
.btn-ghost:hover { background: var(--bg); text-decoration: none; color: var(--ink); }
.btn-danger {
    background: white;
    color: var(--danger);
    border-color: var(--hairline-strong);
}
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Social-login button + "or" divider on the auth pages. */
.btn-oauth { display: inline-flex; align-items: center; gap: 8px; }
.btn-oauth svg { display: block; }
.oauth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 0; color: var(--ink-3); font-size: 12px;
}
.oauth-divider::before, .oauth-divider::after {
    content: ""; flex: 1; height: 0.5px; background: var(--hairline);
}

/* Auth method picker — Google / email, neither preselected.
   Shared by the sign-up and log-in pages. */
.auth-choice { display: flex; flex-direction: column; gap: 12px; }
.auth-choice form { margin: 0; }
.auth-option {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 16px;
}
.auth-option svg { display: block; flex: none; }
.auth-back { width: 100%; margin-top: 14px; }
.signup-consent {
    margin-top: 18px; text-align: center;
    font-size: 12px; line-height: 1.6; color: var(--ink-3);
}
.signup-consent a { text-decoration: underline; }

/* ---------- Form fields -------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: 12px; }
.field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 4px;
}
.field-input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 0.5px solid var(--hairline-strong);
    border-radius: 8px;
    background: white;
    color: var(--ink);
    font-family: inherit;
}
.field-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-pale);
}
textarea.field-input { min-height: 80px; resize: vertical; line-height: 1.5; }
/* Phone-style inputs hold at most ~14 characters ("010-1234-5678" plus
 * a separator) — capping them keeps short-data fields from looking
 * oversized next to longer name/email fields in the same form. */
input[inputmode="tel"].field-input { max-width: 220px; }
.field-help { font-size: 12px; color: var(--ink-3); margin: 4px 0 0; }
.field-errors { color: var(--danger); font-size: 12px; margin: 4px 0 0; padding-left: 18px; }
.error-block {
    background: var(--danger-bg);
    border: 0.5px solid var(--danger);
    color: var(--danger);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* ---------- Lists -------------------------------------------------------- */
.list { list-style: none; padding: 0; margin: 0; }
.list-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--hairline);
}
.list-item:last-child { border-bottom: 0; }
.list-item-title { font-weight: 600; }
.list-item-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 999px;
    background: currentColor;
}
.badge-ok { background: var(--green-100); color: var(--accent); }
.badge-pending { background: var(--ochre-pale); color: #8C6A2A; }
.badge-muted { background: var(--cream-100); color: var(--ink-3); }
.badge-danger { background: #F2DAD2; color: var(--danger); }

/* Small "kind" tag (e.g. PDF) next to a contract name. Subtler than a
   .badge — no dot, smaller padding, smaller type — so it reads as a
   classification, not a status. */
.kind-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 4px;
    background: var(--cream-100);
    color: #8C6A2A;
    vertical-align: middle;
}

/* ---------- Refer & earn ------------------------------------------------ */
.refer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.refer-stat { display: flex; flex-direction: column; gap: 4px; }
.refer-stat-label {
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-3);
}
.refer-stat-value {
    font-family: var(--font-display, serif);
    font-size: 30px; font-weight: 500; color: var(--accent);
    letter-spacing: -.02em;
}
.refer-stat-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.copy-row { display: flex; gap: 8px; align-items: stretch; }
.copy-row .field-input { flex: 1; min-width: 0; }
.copy-row .btn { white-space: nowrap; }
@media (max-width: 640px) {
    .refer-stats { grid-template-columns: 1fr; }
}

/* ---------- Wizard ------------------------------------------------------ */
/* Step-by-step template creation. One step visible at a time; progress
 * tracker at top; Back / Continue / Save in a sticky footer-ish row at
 * the bottom of the card. Mobile-first: progress nodes shrink and the
 * labels hide on narrow screens. */

.wizard {
    max-width: 720px;
    margin: 0 auto;
}
.wizard-header {
    margin-bottom: 20px;
    text-align: center;
}
.wizard-header .page-title { margin-bottom: 4px; }

/* --- Progress tracker --- */
.wizard-progress {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    counter-reset: step;
    position: relative;
}
.wizard-progress::before {
    /* Connecting line drawn behind all nodes. JS doesn't manage this —
     * it's just a static rail; node colors signal progress. */
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--hairline);
    z-index: 0;
}
.wizard-progress-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.wizard-progress-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--hairline-strong);
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}
.wizard-progress-label {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.wizard-progress-step.is-active .wizard-progress-node {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    box-shadow: 0 0 0 4px var(--accent-pale);
}
.wizard-progress-step.is-active .wizard-progress-label {
    color: var(--ink);
}
.wizard-progress-step.is-completed .wizard-progress-node {
    background: var(--accent-pale);
    border-color: var(--accent);
    color: var(--accent);
}
.wizard-progress-step.is-completed .wizard-progress-label {
    color: var(--ink-2);
}

/* --- Step card --- */
.wizard-step {
    background: var(--card-bg);
    border: 0.5px solid var(--hairline);
    border-radius: var(--radius);
    padding: 28px 28px 24px;
    margin-bottom: 16px;
    min-height: 200px;
}
.wizard-step-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ink);
}
.wizard-step-help {
    color: var(--ink-2);
    font-size: 13px;
    margin: 0 0 18px;
}
.wizard-placeholder {
    padding: 40px 16px;
    border: 1px dashed var(--hairline-strong);
    border-radius: 8px;
    text-align: center;
    color: var(--ink-3);
    font-style: italic;
    font-size: 13px;
}

/* --- Nav row --- */
.wizard-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.wizard-nav .wizard-cancel {
    margin-right: auto;
    font-size: 12px;
}
.wizard-nav #wizard-next,
.wizard-nav #wizard-submit {
    margin-left: auto;
}

/* --- Mobile (≤ 480px) --- */
@media (max-width: 480px) {
    .wizard-progress-label {
        display: none;
    }
    .wizard-progress-step.is-active .wizard-progress-label {
        /* Only the active step's label shows on narrow screens. */
        display: block;
        position: absolute;
        top: 36px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        background: transparent;
    }
    .wizard-progress {
        margin-bottom: 40px;  /* leave room for the floating active label */
    }
    .wizard-step {
        padding: 20px 16px;
    }
    .wizard-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .wizard-nav .wizard-cancel {
        order: 3;
        margin: 6px auto 0;
    }
    .wizard-nav .btn {
        width: 100%;
    }
    .wizard-nav #wizard-next,
    .wizard-nav #wizard-submit {
        margin-left: 0;
        order: 1;
    }
    .wizard-nav #wizard-back {
        order: 2;
    }
}

/* Wizard step 4 reuses the contract-preview layout but the summary
 * card is one big container — render each section as an inset block. */
.contract-preview-section {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--hairline);
}
.contract-preview-section:first-child { padding-top: 0; }
.contract-preview-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ---------- Contract preview (template detail + wizard step 4) -------- */
.contract-preview { padding: 22px 24px; }
.contract-preview + .contract-preview { margin-top: 14px; }

.intro-pair { margin-top: 14px; }
.intro-pair:first-child { margin-top: 0; }
.intro-pair + .intro-pair { margin-top: 18px; }
.intro-pair-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}
.kv td.placeholder {
    color: var(--ink-3);
    letter-spacing: 2px;
}

.contract-clause {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--hairline);
}
.contract-clause:last-child { border-bottom: 0; }

.signature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 540px) {
    .signature-grid { grid-template-columns: 1fr; }
}
.signature-block { display: flex; flex-direction: column; }
.signature-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.signature-line {
    border-bottom: 1px solid var(--ink-2);
    margin-bottom: 28px;
}
.signature-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.signature-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.signature-meta-line {
    flex: 1;
    border-bottom: 1px solid var(--hairline-strong);
    height: 0;
    margin-top: 12px;
}

/* ---------- Wizard intro custom-field row builder --------------------- */
.intro-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--hairline);
}
.intro-field-row:last-child { border-bottom: none; }
.intro-field-row-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.intro-field-row-main .field-input {
    flex: 1;
    min-width: 0;
}
.intro-field-required {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
    cursor: pointer;
}
.intro-field-required input[type="checkbox"] {
    accent-color: var(--accent);
}
@media (max-width: 480px) {
    .intro-field-row-main {
        flex-direction: column;
        align-items: stretch;
    }
    .intro-field-required {
        margin-top: 4px;
    }
}

/* ---------- Wizard step 6: method picker + upload zone ---------------- */
.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
@media (max-width: 580px) {
    .method-grid { grid-template-columns: 1fr; }
}
.method-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    background: white;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.method-card:hover { border-color: var(--ink-3); }
.method-card.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-pale);
}
.method-card-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.method-card-help { font-size: 12px; color: var(--ink-3); line-height: 1.4; }

/* Compact bar shown after a method has been chosen — confirms the
 * choice and exposes the "Change method" affordance without the bulk
 * of the picker cards. */
.method-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--accent-pale);
    border: 0.5px solid var(--accent);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}
.method-active-label { color: var(--ink-2); }
.method-active-label strong { color: var(--ink); margin-left: 4px; }
.method-active .btn-link { font-size: 12px; color: var(--accent); }
.method-active .btn-link:hover { color: var(--ink); }

.upload-zone {
    padding: 14px;
    border: 1px dashed var(--hairline-strong);
    border-radius: 8px;
    background: var(--bg);
    margin-bottom: 16px;
}
.upload-status { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); }
.upload-status.error { color: var(--danger); }

/* AI questionnaire (wizard step 3, "Generate with AI" path). The
 * card mimics the rest of the wizard's `.card` look so it feels
 * integrated; status line below mirrors `.upload-status`. */
.ai-questionnaire {
    padding: 16px;
    border: 0.5px solid var(--hairline);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 16px;
}
.ai-questionnaire .field { margin-bottom: 12px; }
.ai-status { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }
.ai-status.error { color: var(--danger); }

/* Available-tags reference in the clause editor. Tags are clickable
 * chips; clicking one inserts it into the active clause body. */
.tag-reference {
    border: 0.5px solid var(--hairline);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--bg);
}
.tag-reference summary {
    cursor: pointer;
    color: var(--ink);
}
.tag-list { margin-top: 8px; }
.tag-group-title {
    margin: 10px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-2);
}
.tag-group-title:first-child { margin-top: 0; }
.tag-chip {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--accent);
    background: #fff;
    border: 0.5px solid var(--hairline-strong);
    border-radius: 6px;
    cursor: pointer;
}
.tag-chip:hover { background: var(--accent-pale); }
.tag-new-row {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}
.tag-new-row .field-input { flex: 1; }

.wizard-clause-editor .clause-row {
    margin-bottom: 10px;
}

/* ---------- Wizard step 8: summary -------------------------------------- */
.summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--hairline);
}
.summary-row:last-child { border-bottom: none; }
.summary-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.summary-value {
    font-size: 13px;
    color: var(--ink);
    text-align: right;
    word-break: break-word;
}

/* ---------- Wizard step content ----------------------------------------- */

/* Field toggle list (steps 2-5) */
.field-toggle-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.field-toggle {
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--hairline);
}
.field-toggle:last-child { border-bottom: none; }
.field-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
}
.field-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* Required rows — checkbox locked checked. Faint badge so the
 * "you can't turn this off" affordance is visible without being
 * shouty. */
.field-toggle-required .field-toggle-row {
    cursor: default;
}
.field-toggle-required input[type="checkbox"] {
    accent-color: var(--accent);
    opacity: 0.6;
}
.field-toggle-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-pale);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.field-toggle-help {
    font-size: 12px;
    color: var(--ink-3);
    margin: 4px 0 0 28px;
}

/* Categorical fields get an inset options box */
.field-toggle-categorical {
    background: var(--bg);
    border-radius: 8px;
    margin-bottom: 8px;
    border-bottom: none;
    padding-bottom: 14px;
}
.option-list {
    margin-top: 10px;
    margin-left: 28px;
}
.option-list-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.option-list textarea {
    font-family: inherit;
    line-height: 1.45;
}

/* ---------- Import panel (template create/edit) ------------------------ */
.import-panel summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.import-panel summary::-webkit-details-marker { display: none; }
.import-panel summary::before {
    content: "▸";
    color: var(--ink-3);
    margin-right: 6px;
    transition: transform 0.15s ease;
    display: inline-block;
}
.import-panel[open] summary::before {
    transform: rotate(90deg);
}
.import-panel[open] > * { margin-top: 12px; }
.import-panel[open] > summary { margin-top: 0; }

.paste-zone {
    min-height: 200px;
    max-height: 480px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px dashed var(--hairline-strong);
    border-radius: 8px;
    background: white;
    font-size: 13px;
    line-height: 1.55;
}
.paste-zone:focus {
    outline: none;
    border-color: var(--accent);
    border-style: solid;
    box-shadow: 0 0 0 3px var(--accent-pale);
}
.paste-zone:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-3);
    font-style: italic;
    pointer-events: none;
}
/* Headings inside the paste zone — keep them readable so the user can
 * see what was captured as a section delimiter. */
.paste-zone h1, .paste-zone h2, .paste-zone h3,
.paste-zone h4, .paste-zone h5, .paste-zone h6 {
    margin: 14px 0 4px;
    font-weight: 700;
    line-height: 1.3;
}
.paste-zone h1 { font-size: 17px; }
.paste-zone h2 { font-size: 15px; }
.paste-zone h3, .paste-zone h4, .paste-zone h5, .paste-zone h6 { font-size: 14px; }
.paste-zone p { margin: 6px 0; }
.paste-zone ul, .paste-zone ol { margin: 6px 0 6px 22px; padding: 0; }
.paste-zone li { margin: 2px 0; }

/* ---------- Clause editor ----------------------------------------------- */
.clause-row {
    background: white;
    border: 0.5px solid var(--hairline);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.clause-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.clause-handle {
    cursor: grab;
    color: var(--ink-3);
    user-select: none;
}

/* ---------- Messages ----------------------------------------------------- */
.messages {
    list-style: none;
    padding: 0;
    margin: 16px 28px 0;
    max-width: 960px;
}
.message {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 6px;
}
.message-success { background: var(--accent-pale); color: var(--accent); }
.message-error, .message-warning { background: var(--danger-bg); color: var(--danger); }
.message-info { background: #EEF4FA; color: #1d4671; }

/* ---------- Sign page (client) ------------------------------------------ */
.sign-clause {
    background: white;
    border: 0.5px solid var(--hairline);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 10px;
}
.sign-clause-body {
    white-space: pre-wrap;
    margin: 6px 0 12px;
    line-height: 1.6;
}
.sign-clause.agreed { background: var(--accent-pale); border-color: var(--accent); }
.signature-canvas {
    width: 100%;
    max-width: 100%;       /* defensive — never spill past parent */
    /* Proportional height instead of a fixed value — wide modals
     * previously rendered the canvas as a 2.4:1 "hotdog" that was
     * uncomfortable to sign in. 2:1 fits a natural handwritten
     * signature without wasting vertical room or feeling cramped.
     * min/max bounds keep it usable on very narrow phones (where
     * the ratio alone could push the height below the Save button's
     * thumb-reach) and on tablets/desktop (where it could otherwise
     * eat the whole modal). */
    aspect-ratio: 2 / 1;
    min-height: 140px;
    max-height: 240px;
    display: block;
    box-sizing: border-box;
    border: 1.5px solid var(--hairline-strong);
    border-radius: 8px;
    background: white;
    touch-action: none;
    cursor: crosshair;
}
.sig-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.muted { color: var(--ink-3); }
.text-right { text-align: right; }
.whitespace-pre { white-space: pre-wrap; }

/* ---------- List search (Clients / Templates) -------------------------- */
.list-search { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.list-search .field-input { flex: 1; min-width: 0; }
.list-search .btn { white-space: nowrap; flex: none; }

/* ---------- Template tile list (Templates index) ----------------------- */
/* Visual matches the landing-page Step 1 mock — pill-style rows with a
 * document icon, title, and meta. See templates/landing.html step 1. */
.tile-list-label {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.tile-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 0.5px solid var(--hairline);
    border-radius: 10px;
    background: var(--card-bg);
    transition: border-color .12s ease, background .12s ease;
}
.tile:hover { border-color: var(--hairline-strong); background: var(--cream-100); text-decoration: none; }
.tile-link {
    color: inherit;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.tile-link:hover { text-decoration: none; }
.tile-ico {
    width: 32px; height: 32px;
    border-radius: 6px;
    background: var(--cream-100);
    display: flex; align-items: center; justify-content: center;
    flex: none; color: var(--ink-3);
    transition: background .12s ease, color .12s ease;
}
.tile:hover .tile-ico { background: var(--accent-pale); color: var(--accent); }
.tile-body { flex: 1; min-width: 0; }
.tile-title { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.tile-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.tile.is-inactive { opacity: 0.65; }
.tile.is-inactive .tile-meta::before {
    content: "•";
    color: var(--danger);
    margin-right: 4px;
}
.tile-seal { flex: none; opacity: 0.7; }
/* Some tiles are <button>s inside a form (picker flows). Reset the
 * browser button defaults so they render exactly like an <a> tile. */
.tile-form { margin: 0; }
button.tile {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
button.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Filter panel (Contracts tab) ------------------------------- */
.contracts-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.filter-toggle { display: inline-flex; align-items: center; gap: 6px; }
.filter-toggle svg { flex: none; }
.filter-toggle.is-active { border-color: var(--accent); color: var(--accent); }
.filter-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ochre); }
.filter-panel {
    background: var(--card-bg);
    border: 0.5px solid var(--hairline);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.filter-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px; font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.filter-field .field-input { width: 100%; }
.filter-actions { display: flex; gap: 8px; margin-top: 14px; }

/* ---------- Client-facing security warning ----------------------------- */
.client-warning {
    font-size: 12px;
    line-height: 1.5;
    color: #8C6A2A;
    background: var(--ochre-pale);
    border-radius: 8px;
    padding: 9px 12px;
    margin: 12px 0 0;
}
.demo-notice {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #8C6A2A;
    background: var(--ochre-pale);
    border: 1px dashed #C9A961;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
}

/* ---------- Language choice (new-contract step) ------------------------ */
.lang-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 520px;
}
.lang-choice-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 28px 24px;
    border: 0.5px solid var(--hairline-strong);
    border-radius: var(--radius);
    background: var(--card-bg);
    text-align: center;
    text-decoration: none;
}
.lang-choice-card:hover {
    border-color: var(--accent);
    background: var(--accent-pale);
    text-decoration: none;
}
.lang-choice-name {
    font-family: var(--font-display);
    font-size: 24px; font-weight: 500;
    color: var(--green-900);
}
.lang-choice-sub {
    font-size: 11px; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.wizard-lang { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; }
@media (max-width: 480px) {
    .lang-choice { grid-template-columns: 1fr; }
}

/* ---------- Onboarding demo banner ------------------------------------- */
.demo-banner {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--green-900); border-radius: 14px;
    padding: 20px 22px; margin-bottom: 22px;
}
.demo-banner-seal { flex: none; line-height: 0; }
.demo-banner-title {
    font-family: var(--font-display); font-size: 19px; font-weight: 500;
    color: var(--cream-100); margin: 0 0 4px; letter-spacing: -0.01em;
}
.demo-banner-body p {
    font-size: 13.5px; line-height: 1.6; color: var(--cream-200);
    margin: 0 0 14px; max-width: 540px;
}
.demo-banner-actions {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.demo-banner-actions form { margin: 0; }
@media (max-width: 480px) {
    .demo-banner { flex-direction: column; gap: 12px; }
}

/* ---------- 'Contract sent' stamp animation ---------------------------- */
.sent-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 24px;
    background: rgba(250, 247, 239, 0.96);
    animation: sent-overlay-fade 2.6s ease forwards;
}
.sent-stamp {
    position: relative; line-height: 0;
    animation: sent-stamp-press 2.6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.sent-stamp::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 120px; height: 120px; margin: -60px 0 0 -60px;
    border: 3px solid var(--ochre); border-radius: 999px;
    opacity: 0; animation: sent-ink-ring 2.6s ease-out forwards;
}
.sent-text {
    font-family: var(--font-display);
    font-size: clamp(18px, 4vw, 24px); font-weight: 500;
    color: var(--green-900); text-align: center;
    max-width: 320px; margin: 0; padding: 0 24px; opacity: 0;
    animation: sent-text-in 2.6s ease forwards;
}
@keyframes sent-overlay-fade {
    0% { opacity: 0; }
    6%, 84% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes sent-stamp-press {
    0%   { transform: translateY(-64px) scale(1.85) rotate(-12deg); opacity: 0; }
    8%   { opacity: 1; }
    20%  { transform: translateY(0) scale(0.84) rotate(0); }
    27%  { transform: translateY(0) scale(1.07) rotate(0); }
    34%  { transform: translateY(0) scale(0.97) rotate(0); }
    42%, 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
@keyframes sent-ink-ring {
    0%, 17% { transform: scale(0.2); opacity: 0; }
    21% { opacity: 0.5; }
    46% { transform: scale(1.9); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes sent-text-in {
    0%, 30% { opacity: 0; transform: translateY(6px); }
    46%, 84% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sent-stamp, .sent-stamp::after, .sent-text {
        animation: none;
    }
    .sent-text { opacity: 1; }
}

/* ---------- Data table (Contracts tab) --------------------------------- */
.data-table-wrap {
    border: 0.5px solid var(--hairline);
    border-radius: var(--radius);
    overflow-x: auto;
    background: var(--card-bg);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table thead th {
    text-align: left;
    padding: 11px 18px;
    font-size: 11px; font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--cream-100);
    border-bottom: 0.5px solid var(--hairline);
    white-space: nowrap;
}
.data-table td {
    padding: 13px 18px;
    border-bottom: 0.5px solid var(--hairline);
    vertical-align: middle;
    white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--cream-100); }
.data-table td a { font-weight: 600; color: var(--ink); }
.data-table td a:hover { color: var(--accent); }
.data-table .col-meta { color: var(--ink-3); }
.data-table .text-right { text-align: right; }

/* ---------- Tables ------------------------------------------------------ */
table.kv {
    border-collapse: collapse;
    width: 100%;
}
table.kv td {
    padding: 6px 0;
    vertical-align: top;
    font-size: 13px;
}
table.kv td:first-child {
    color: var(--ink-3);
    width: 160px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================================
 * Mobile pass — single responsive sweep across the whole stylesheet.
 *
 * Goal: keep the visual language (whitespace, green accent, ink-on-white)
 * but tighten gutters, fix iOS' input-zoom-on-focus, stack tables, and
 * give primary tap targets the room they need on a phone.
 *
 * Breakpoints:
 *   <= 640px — phones in landscape, narrow tablets
 *   <= 480px — phones in portrait
 *   <= 380px — small phones (iPhone SE, older Android)
 * Stricter rules nest inside narrower breakpoints.
 * =======================================================================*/

@media (max-width: 640px) {
    /* --- Chrome (mobile): collapse top-nav into a hamburger --- *
     * The dropdown floats below the toggle, right-aligned, with a
     * subtle shadow. Items stack vertically inside. */
    .topbar { padding: 12px 16px; }
    .brand { font-size: 15px; }
    .nav-menu-toggle { display: inline-flex; align-items: center; }
    .nav-menu-items {
        /* Hidden until the toggle button adds .is-open. */
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 6px;
        background: white;
        border: 0.5px solid var(--hairline-strong);
        border-radius: 10px;
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        min-width: 200px;
        z-index: 100;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }
    .nav-menu-items.is-open {
        display: flex;
    }
    /* Inside the dropdown, links and the Sign-out button become
     * block-level taps. Language toggle stays in the topbar (outside
     * this dropdown). */
    .nav-menu-items a,
    .nav-menu-items .btn-link {
        padding: 6px 0;
        font-size: 14px;
    }

    .container { padding: 16px 16px 64px; }
    .auth-card { margin: 24px auto; max-width: 100%; }
    .messages { margin: 12px 16px 0; }

    /* --- Cards --- */
    .card { padding: 14px 16px; }
    .card-compact { padding: 10px 12px; }

    /* --- Typography (slightly tighter) --- */
    .page-title { font-size: 20px; }
    .page-subtitle { font-size: 13px; line-height: 1.5; }

    /* --- Form fields --- *
     * 16px on inputs prevents iOS Safari from zooming the viewport
     * when an input gains focus. Slightly more padding for thumb
     * accuracy. */
    .field-input {
        font-size: 16px;
        padding: 10px 12px;
    }
    textarea.field-input {
        font-size: 15px;       /* multi-line is fine to be slightly smaller */
        line-height: 1.5;
    }
    .field-help { font-size: 12px; }
    .field-label { font-size: 13px; }

    /* The share-link `<input readonly>` uses an inline font-size:12px to
     * fit the token. On mobile, allow it to scroll horizontally inside
     * its width rather than overflowing the card. */
    input[readonly].field-input {
        overflow-x: auto;
        white-space: nowrap;
    }

    /* --- Buttons --- *
     * Primary buttons get a min-height so they comfortably hit the
     * 40-44px tap-target zone without changing the visual size of
     * .btn-sm secondary actions. */
    .btn {
        padding: 11px 16px;
        min-height: 42px;
        line-height: 1.2;
    }
    .btn-sm { min-height: 32px; }
    .btn-row { gap: 8px; flex-wrap: wrap; }

    /* --- Key/value tables: stack label above value --- *
     * The fixed 160px label column is too wide on a phone; let it
     * collapse so each row reads "Label\nValue" with the value taking
     * full width. Applies everywhere `table.kv` is used (contract
     * preview, status panels, profile setup, etc.). */
    table.kv td {
        display: block;
        width: 100%;
        padding: 0;
    }
    table.kv td:first-child {
        padding-top: 8px;
    }
    table.kv td:last-child {
        padding-bottom: 8px;
    }
    table.kv tr { display: block; border-bottom: 0.5px solid var(--hairline); }
    table.kv tr:last-child { border-bottom: none; }

    /* --- List items: wrap right-column meta below when crowded --- */
    .list-item {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px 12px;
    }
    .list-item .text-right { text-align: left; }

    /* --- Wizard --- */
    .wizard { max-width: 100%; }
    .wizard-step {
        padding: 18px 16px;
        min-height: auto;
    }
    .wizard-step-title { font-size: 16px; }
    .wizard-step-help { font-size: 13px; }
    .wizard-progress { margin-bottom: 28px; }

    /* Wizard nav stacks vertically on phones, with Continue on top
     * (primary action), then Save, then Back, with Cancel as a quiet
     * tail. `order` lets us re-sort the flow without changing DOM. */
    .wizard-nav {
        flex-direction: column;
        gap: 8px;
    }
    .wizard-nav .btn,
    .wizard-nav .wizard-cancel {
        width: 100%;
        margin: 0;
        text-align: center;
    }
    .wizard-nav #wizard-next { order: 1; }
    .wizard-nav #wizard-save { order: 2; }
    .wizard-nav #wizard-back { order: 3; }
    .wizard-nav .wizard-cancel { order: 4; padding-top: 4px; }

    /* --- Contract preview / signature blocks --- */
    .contract-preview { padding: 16px 14px; }
    .signature-grid { gap: 18px; }

    /* (Canvas height is handled by `aspect-ratio: 2 / 1` on the base
     * .signature-canvas rule. With the visualViewport modal anchor,
     * the dialog sizes to the visible area, so the canvas+buttons
     * always fit on screen without needing a fixed mobile height.) */

    /* PDF-sign modal — tighter outer padding so the dialog has more
       room on narrow phones; tighter dialog padding so the canvas
       inside is wider for drawing. */
    .pdf-sig-modal { padding: 10px; }
    .pdf-sig-dialog { padding: 14px; }

    /* --- Method picker --- */
    .method-active {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* --- Paste zone (template upload page) --- */
    .paste-zone { min-height: 160px; padding: 10px 12px; font-size: 14px; }
}

@media (max-width: 480px) {
    /* --- Even tighter on phones in portrait --- */
    .topbar { padding: 10px 14px; }
    .container { padding: 14px 14px 56px; }
    .messages { margin: 10px 14px 0; }

    /* Cards near the edge — give the page a little air */
    .card { padding: 12px 14px; }

    .page-title { font-size: 18px; }

    /* Buttons row: stack vertically when there are 3+ buttons (e.g.
     * detail page's Back + Edit row already 2, but the contract sign
     * page has more). Keep gap modest. */
    .btn-row { gap: 6px; }

    /* Lighter list-item meta */
    .list-item-meta { font-size: 11px; }

    /* Wizard signature block stacks */
    .signature-grid {
        grid-template-columns: 1fr;
    }

    /* (Signature pad height handled by aspect-ratio on the base rule.) */

    /* PDF sign modal — give the dialog almost the whole viewport on
     * narrow phones and zero the dialog padding-bottom so the action
     * row sits close to the pad. */
    .pdf-sig-modal { padding: 6px; }
    .pdf-sig-dialog { padding: 12px 12px 10px; }
}

@media (max-width: 380px) {
    /* --- Very small phones (iPhone SE, older Android) --- */
    .topbar { padding: 10px 12px; gap: 6px; }
    .topnav { gap: 8px; }
    .topnav a, .topnav .btn-link { font-size: 12px; }
    .brand { font-size: 14px; }
    .container { padding: 12px 12px 48px; }
    .card { padding: 12px 12px; }
    .page-title { font-size: 17px; }
}

/* Tap-friendly touch targets across the board — applies regardless of
 * viewport width, but the bigger min-height kicks in on coarse pointers
 * (touch devices). Using `pointer: coarse` so desktop mouse users keep
 * the compact UI. */
@media (pointer: coarse) {
    .field-toggle-row,
    .intro-field-required,
    .lang-option {
        min-height: 36px;
    }
    .clause-row .btn-sm { min-height: 32px; }
}


/* ---------- Public landing page ---------------------------------------- */
.landing-hero {
    text-align: center;
    padding: 48px 16px 40px;
    max-width: 720px;
    margin: 0 auto;
}
.landing-eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.landing-hero h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.landing-lead {
    margin: 16px auto 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}
.landing-cta { margin-top: 24px; }
.landing-cta .btn { padding: 11px 28px; font-size: 15px; }

.landing-section { margin: 32px auto; max-width: 920px; }
.landing-section-title {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 20px;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 14px;
}
.feature-card {
    border: 0.5px solid var(--hairline);
    border-radius: 12px;
    background: #fff;
    padding: 18px 18px 16px;
}
.feature-card h3 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--ink);
}
.feature-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.landing-band {
    margin: 36px auto 12px;
    max-width: 920px;
    text-align: center;
    background: var(--accent-pale);
    border-radius: 14px;
    padding: 32px 20px;
}
.landing-band-text {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
}

@media (max-width: 640px) {
    .landing-hero { padding: 32px 4px 28px; }
    .landing-hero h1 { font-size: 26px; }
    .landing-lead { font-size: 15px; }
    .landing-band { padding: 26px 14px; }
    .landing-band-text { font-size: 16px; }
}

/* ==========================================================================
   Dashboard shell — sidebar layout (base.html) + focused layout
   (base_focused.html). "Forest & Ochre".
   ========================================================================== */

.shell { display: flex; min-height: 100vh; }

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar {
    width: 240px;
    flex: none;
    background: var(--cream-100);
    border-right: 0.5px solid var(--hairline);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 6px; text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.sidebar-brand-name {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 500; letter-spacing: -0.03em;
    color: var(--green-900);
}
.sidebar-brand-sub {
    font-size: 9px; font-weight: 600; letter-spacing: 0.055em;
    text-transform: uppercase; color: var(--ink-3); margin-top: 2px;
}
.sidebar-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-align: center;
}
.sidebar-cta:hover { color: white; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ink-2);
    text-decoration: none;
}
.sidebar-nav a:hover { background: var(--cream-200); text-decoration: none; }
.sidebar-nav a.is-active {
    background: var(--green-100);
    color: var(--green-900);
    font-weight: 600;
}
.sidebar-nav svg { flex: none; }
/* Sign out lives in the top-right of the header bar. */
.header-signout {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    border: 0.5px solid var(--hairline);
    border-radius: 8px;
    background: none; cursor: pointer;
    font: inherit; font-size: 13px;
    color: var(--ink-2);
    white-space: nowrap;
}
.header-signout:hover { background: var(--cream-100); color: var(--ink); }
.header-signout svg { flex: none; }

/* ---- Main column ------------------------------------------------------- */
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell-header {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 28px;
    border-bottom: 0.5px solid var(--hairline);
    background: var(--card-bg);
}
.shell-header-spacer { flex: 1; }
.sidebar-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1;
    padding: 4px 8px; border-radius: 8px; color: var(--ink);
}
.sidebar-toggle:hover { background: var(--cream-100); }
.user-chip { display: flex; align-items: center; gap: 8px; }
.user-avatar {
    width: 30px; height: 30px; border-radius: 999px;
    background: var(--ochre); color: var(--green-900);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    flex: none;
}
.user-email { font-size: 12px; color: var(--ink-3); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-content { padding: 28px clamp(20px, 4vw, 40px) 80px; }

.sidebar-scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(28, 31, 25, 0.4);
    z-index: 39;
}

/* ---- Focused layout (auth + signee sign flow) -------------------------- */
.focused-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 0.5px solid var(--hairline);
    background: var(--card-bg);
}
.focused-brand {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.focused-brand:hover { text-decoration: none; }
.focused-brand span {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 500; letter-spacing: -0.03em;
    color: var(--green-900);
}
.focused-main { max-width: 820px; margin: 0 auto; padding: 24px 24px 80px; }
.focused-main .auth-card { margin: 36px auto; }

/* ---- Sidebar mobile drawer --------------------------------------------- */
@media (max-width: 860px) {
    .sidebar {
        position: fixed; top: 0; left: 0; z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
        box-shadow: 0 12px 32px rgba(28, 40, 25, 0.16);
    }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar.is-open ~ .sidebar-scrim,
    .sidebar-scrim.is-open { display: block; }
    .sidebar-toggle { display: inline-flex; align-items: center; }
    .shell-header { padding: 12px 16px; }
    .shell-content { padding: 22px 16px 80px; }
}
@media (max-width: 480px) {
    .focused-top { padding: 12px 16px; }
    .user-email { display: none; }
    /* Header gets tight on phones — sign out collapses to its icon. */
    .header-signout span { display: none; }
    .header-signout { padding: 7px 9px; }
}

/* ---- PDF contract: upload + field editor ------------------------------ */

/* Upload form: language radio choices. */
.pdf-lang-options { display: flex; gap: 10px; flex-wrap: wrap; }
.pdf-lang-option {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border: 0.5px solid var(--hairline-strong);
    border-radius: 8px;
    cursor: pointer;
    background: var(--card-bg);
}
.pdf-lang-option input { accent-color: var(--accent); }

/* Entry point on the language picker — "Upload a PDF instead". */
.pdf-alt-option { margin-top: 22px; max-width: 460px; }
.or-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0; color: var(--ink-3); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.or-divider::before, .or-divider::after {
    content: ""; flex: 1; height: 0.5px; background: var(--hairline);
}

/* Field editor layout. */
.pdf-editor-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 0.5px solid var(--hairline);
    border-radius: 10px;
    margin-bottom: 12px;
    position: sticky; top: 0; z-index: 20;
}
.pdf-toolbar-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pdf-toolbar-spacer { flex: 1; }
.pdf-toolbar-divider {
    width: 1px; align-self: stretch;
    background: var(--hairline);
    margin: 0 2px;
}
.pdf-tool.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* The "Assigned to" toggle — green for the client, ochre for the owner. */
.pdf-assignee.is-active[data-assignee="signee"] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.pdf-assignee.is-active[data-assignee="owner"] {
    background: #8C6A2A;
    color: #fff;
    border-color: #8C6A2A;
}
.pdf-editor-status {
    font-size: 13px; color: var(--ink-3); margin: 0 0 12px;
}
.pdf-editor-status.is-error { color: #B23B3B; font-weight: 600; }

.pdf-editor-pages {
    display: flex; flex-direction: column; align-items: center;
    gap: 18px;
    background: var(--cream-200);
    padding: 18px;
    border-radius: 10px;
    overflow: auto;
    max-height: 78vh;
}
.pdf-editor.is-placing .pdf-page-wrapper { cursor: crosshair; }

/* One wrapper per PDF page — the coordinate space for its fields. */
.pdf-page-wrapper {
    position: relative;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
    width: 100%;        /* fit the column width — responsive, no h-scroll */
    /* container-type lets descendant fields size their text against the
       page's actual rendered width (cqw units), so the placeholder
       stays in proportion to the PDF on small screens. */
    container-type: inline-size;
}
.pdf-page-wrapper canvas { display: block; width: 100%; height: auto; }
.pdf-page-tag {
    position: absolute; top: -10px; left: -10px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 700;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* The rubber-band rectangle drawn while placing. */
.pdf-field-ghost {
    position: absolute;
    border: 1.5px dashed var(--accent);
    background: rgba(45, 74, 43, 0.12);
    pointer-events: none;
}

/* A placed field. No persistent box border or background — the
   placeholder text inside is positioned exactly where the stamped
   value will appear on the final PDF, so the editor view doubles as
   a preview of the print layout. Hover surfaces a thin dashed
   outline so the owner can still find and grab the field.

   Colour signals who fills it (CB-safe Wong palette: blue for the
   signee, amber/orange for the owner) — applied to the placeholder
   TEXT, not the box. */
.pdf-field-box {
    position: absolute;
    border: 1px dashed transparent;
    background: transparent;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    cursor: move;
}
.pdf-field-box:hover {
    border-color: var(--ink-3);
    background: rgba(0, 0, 0, 0.03);
}
.pdf-field-assignee-signee .pdf-field-sample { color: #0072B2; }
.pdf-field-assignee-owner  .pdf-field-sample { color: #C8702E; }
/* Delete button — a small circle floating above the top-right corner
   of the selected field, well clear of the corner resize handle. */
.pdf-field-del {
    position: absolute; top: -22px; right: -8px;
    width: 20px; height: 20px;
    border: 1px solid rgba(28, 31, 25, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink-2);
    font-size: 14px; font-weight: 700; line-height: 1;
    cursor: pointer; padding: 0;
    display: none;
}
.pdf-field-box.is-selected .pdf-field-del {
    display: flex; align-items: center; justify-content: center;
}
/* The field's name shown inside the box as a placeholder hint.
   Top-aligned so what the owner sees here matches the stamped value
   on the final PDF and the signee's input. Font size and padding
   scale with the page width (cqw) so the text stays in proportion on
   small screens. */
.pdf-field-sample {
    flex: 1; min-height: 0;
    display: flex; align-items: flex-start;
    padding: clamp(2px, 0.6cqw, 5px) clamp(3px, 0.8cqw, 8px);
    font-size: clamp(8px, 1.6cqw, 14px);
    color: var(--ink-3); font-style: italic;
    white-space: nowrap; overflow: hidden;
    pointer-events: none;       /* clicks fall through so the box drags */
    /* Nudge the preview text up 4px so its visual top matches where
     * the flatten code in pdf_contracts.py actually places the glyph
     * caps in the output (~2px below the box's top edge). The CSS
     * line-box adds ~3-4px of half-leading above cap-height that the
     * PDF doesn't have, so the placeholder previously sat lower than
     * the real output. Editor is now WYSIWYG.
     *
     * Visual-only transform — coordinates the editor stores on save
     * are unaffected, and so is every existing template's placement. */
    transform: translateY(-4px);
}

/* The selected field — outlined; corner handles + delete button reveal. */
.pdf-field-box.is-selected {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    z-index: 5;
}
/* Editing the placeholder in place: the sample becomes a real editor,
   non-italic, opaque-ish, with a focus outline matching the field's
   assignee colour. */
.pdf-field-sample.is-editing {
    pointer-events: auto;
    color: var(--ink);
    font-style: normal;
    background: rgba(255, 255, 255, 0.95);
    outline: 1px solid #0072B2;
    cursor: text;
}
.pdf-field-assignee-owner .pdf-field-sample.is-editing {
    outline-color: #E69F00;
}
.pdf-field-handle {
    position: absolute; width: 12px; height: 12px;
    background: #fff; border: 1.5px solid var(--accent);
    border-radius: 2px;
    display: none;
}
.pdf-field-box.is-selected .pdf-field-handle { display: block; }
.pdf-field-handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.pdf-field-handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.pdf-field-handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.pdf-field-handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* ---- Signee PDF fill page ------------------------------------------- */
.pdf-sign-status {
    font-size: 13px; color: var(--ink-3); margin: 0 0 10px;
}
.pdf-sign-status.is-error { color: #B23B3B; font-weight: 600; }
.pdf-sign-pages {
    display: flex; flex-direction: column;
    /* flex-start (not center) on the cross-axis so that when the
     * user pinch-zooms and the page wrappers grow wider than the
     * container, the overflow goes to the right and is scrollable.
     * `align-items: center` would split the overflow equally between
     * left and right, but `overflow: auto` can only scroll into
     * positive coordinates — the left half would be unreachable.
     * At zoom 1 the wrappers are width: 100% and fill the cross-
     * axis anyway, so this is visually identical there. */
    align-items: flex-start;
    gap: 18px;
    background: var(--cream-200);
    padding: 18px;
    border-radius: 10px;
    overflow: auto;
    max-height: 80vh;
}

/* An interactive field overlaid on a page at its fractional coords. */
.pdf-sign-field {
    position: absolute;
    box-sizing: border-box;
    display: flex;
}
.pdf-sign-input {
    width: 100%; height: 100%;
    box-sizing: border-box;
    border: 1.5px solid #0072B2;
    background: rgba(255, 255, 255, 0.92);
    font-size: clamp(8px, 1.6cqw, 14px);
    /* Heavier bottom padding biases the typed value into the upper
       portion of the box — roughly matches the editor's top-aligned
       placeholder and the stamp on the final PDF. */
    padding: 2px clamp(3px, 0.8cqw, 8px) 10px;
    line-height: 1.2;
}
.pdf-sign-input:focus { outline: 2px solid #0072B2; }
.pdf-sign-input:disabled { background: rgba(255, 255, 255, 0.7); }

/* Tappable signature box. */
.pdf-sign-field-signature {
    border: 1.5px dashed var(--ochre);
    background: rgba(201, 169, 97, 0.20);
    cursor: pointer;
    align-items: center; justify-content: center;
    overflow: hidden;
}
.pdf-sign-field-signature.is-filled {
    border-style: solid;
    background: #fff;
}
.pdf-sig-preview {
    position: absolute; inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.pdf-sig-text {
    position: relative;
    /* Scale with the rendered PDF page width (the .pdf-page-wrapper
       above declares container-type: inline-size) so the "TAP TO
       SIGN" placeholder shrinks to fit narrow signature boxes on
       small phones instead of overflowing with `overflow: hidden`
       on the field and clipping to a few oversized letters. Matches
       the pattern .pdf-sign-input already uses. Floor of 6px keeps
       it readable on the smallest sensible boxes; cap of 11px
       preserves the current desktop look. */
    font-size: clamp(6px, 1.4cqw, 11px);
    font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #8C6A2A;
    /* Defensive against the field box being narrower than even the
       smallest font can render the whole phrase: stay on one line,
       cap to the parent's inner width, ellipsize what doesn't fit
       (better to show "TAP TO…" than scrambled cropped letters). */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 4px;
    box-sizing: border-box;
}
.pdf-sign-field-signature.is-filled .pdf-sig-text { display: none; }
.pdf-sign-field.is-missing .pdf-sign-input,
.pdf-sign-field.is-missing.pdf-sign-field-signature,
.pdf-sign-field.is-missing.pdf-sign-field-clause_agreement {
    border-color: #B23B3B;
}

/* Clause-agreement field — a checkbox + label. Sized to fill the box
   the owner placed in the editor; the box itself gets no border (the
   checkbox is the visual anchor). */
.pdf-sign-field-clause_agreement {
    border: none;
    background: transparent;
    align-items: flex-start;
    overflow: visible;
}
.pdf-sign-agreement {
    display: inline-flex; align-items: center;
    gap: 6px;
    font-size: clamp(11px, 1.7cqw, 15px);
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.pdf-sign-agreement input[type=checkbox] {
    width: clamp(14px, 1.8cqw, 18px);
    height: clamp(14px, 1.8cqw, 18px);
    margin: 0;
    accent-color: #0072B2;
    cursor: pointer;
}
.pdf-sign-agreement-static {
    font-size: clamp(11px, 1.7cqw, 15px);
    color: #C8702E;
    font-variant-numeric: tabular-nums;
}

/* Read-only placeholder for the other party's fields, shown on the
   owner-fill page so the owner sees the whole layout in context. */
.pdf-sign-field-placeholder {
    border: 1.5px dashed var(--hairline-strong);
    background: rgba(28, 31, 25, 0.06);
    align-items: center; justify-content: center;
    overflow: hidden;
    pointer-events: none;
}
.pdf-sign-placeholder-text {
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--ink-3);
    padding: 0 4px;
    text-align: center;
}

/* The other party's already-filled values, shown read-only to the signee
   so they see the document with the owner's info in context. A faint
   dotted outline signals "filled by the other side" without clutter. */
.pdf-sign-field-owner-fill {
    border: 1px dotted #E69F00;
    background: transparent;
    cursor: default;
    pointer-events: none;
    align-items: flex-start; justify-content: flex-start;
    overflow: hidden;
    padding: clamp(2px, 0.6cqw, 5px) clamp(3px, 0.8cqw, 8px);
}
.pdf-owner-fill-text {
    font-size: clamp(8px, 1.6cqw, 14px);
    color: var(--ink);
    white-space: nowrap; overflow: hidden;
}

/* Signature pad modal.
 *
 * Default position covers the layout viewport, but JS in
 * client_sign_pdf.html overrides left/top/width/height from
 * window.visualViewport when available — so on iOS Safari, where
 * pinch-zoom rescales `position: fixed` elements, the modal stays
 * pinned to the *visible* area at its true size instead of being
 * zoomed past the edges of the screen. See `syncModalToViewport()`. */
.pdf-sig-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 100;
    background: rgba(28, 31, 25, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.pdf-sig-modal[hidden] { display: none; }
.pdf-sig-dialog {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 100%; max-width: 440px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
/* The base .signature-canvas rule (above) sets min-height: 140px so
 * the canvas stays usably tall on narrow inline contexts (the field
 * editor and group-send owner-fill flows). Inside the signing modal,
 * the modal already sizes itself to the visible viewport — so if
 * the user is pinch-zoomed when they tap a signature field, the
 * modal's CSS pixel count is small and the canvas's `aspect-ratio:
 * 2/1` rule computes a height under 140px; the min-height clamp
 * then overrides the aspect ratio, producing a taller-than-2/1 box
 * that the user reads as "squished". Zeroing min-height here lets
 * aspect-ratio always win — the canvas is smaller in CSS px at
 * heavy zoom but renders at roughly the same screen-pixel size
 * (because the zoom amplifies it), and the 2:1 signature shape is
 * preserved at every zoom level. */
.pdf-sig-dialog .signature-canvas { min-height: 0; }

/* PDF-only zoom on the signing page works by changing each page
 * wrapper's CSS width (100% -> 200% -> 300% of the parent) when
 * the user pinches. The parent (.pdf-sign-pages, declared earlier
 * with overflow: auto and max-height: 80vh) is the scroll context,
 * so when wrappers grow past it the browser's native scroll
 * handles panning in BOTH axes with no JS pan handler needed:
 * single-finger drag = native momentum scroll, vertical AND
 * horizontal at any zoom.
 *
 * touch-action: pan-x pan-y explicitly allows the browser to
 * handle single-finger pan/scroll on the container. Two-finger
 * pinch is caught by our JS via preventDefault, which wins over
 * touch-action and stops the (already-disabled-site-wide) browser
 * pinch from interfering.
 *
 * During a pinch, JS applies a temporary `transform: scale()` on
 * each page wrapper for smooth visual feedback; on touchend the
 * transform clears and the wrapper widths commit, so the scroll
 * container picks up the new content size cleanly. */
.pdf-sign-pages {
    touch-action: pan-x pan-y;
}

/* Understated trust note on the signee sign pages — the sender's
   business facts. Not a banner; a quiet aside. */
.business-note {
    margin: 0;
    padding: 10px 12px;
    border-left: 2px solid var(--hairline-strong);
    background: var(--cream-100);
    border-radius: 4px;
}
.business-note-fact {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--ink-2);
}
.business-note-aside { color: var(--ink-3); }
.business-note-disclaimer {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--ink-3);
}

/* ---------- Verified Business badge (signee-facing) --------------------
   Shown in the top-right of the signing page when the sender's
   business registration has been confirmed via Kontract's cert
   review. The "dojang" (도장) — a square cinnabar seal with the
   characters 인증 ("verified") inside — nods to the Korean stamp
   tradition that gave Kontract its name; the dojang-red accent is
   reserved exclusively for this trust mark.

   Design lineage: claude.ai/design — direction 01b, "compact
   corner pill". Korean-only by design (the cultural anchor is
   the Korean seal); the label stays 사업자등록 인증 even on
   English-language contracts. */
.kontract-badge-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.kontract-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #FFFFFF;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    padding: 5px 14px 5px 5px;
    box-shadow: 0 1px 3px rgba(45, 60, 35, 0.06);
    text-decoration: none;
}
.kontract-badge-seal {
    width: 28px;
    height: 28px;
    background: #B5392B;
    border-radius: 5px;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 1px 2px rgba(142, 43, 32, 0.18);
    /* Subtle ink-bleed texture via radial gradients — same as the
       hero seal, scaled down for the corner. */
    background-image:
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.08) 0 22%, transparent 36%),
        radial-gradient(circle at 78% 78%, rgba(0, 0, 0, 0.10) 0 22%, transparent 36%);
}
.kontract-badge-seal::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 0.75px solid rgba(255, 255, 255, 0.85);
    border-radius: 2.5px;
}
.kontract-badge-glyph {
    font-family: "Noto Serif KR", serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 1;
    color: #FFFEF6;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}
.kontract-badge-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1;
}

/* ---------- Verification banner ----------------------------------------
   A persistent strip above the owner's page content that reminds them
   to upload their 사업자등록증. Shown only while verification_status
   is "unverified" — disappears the moment they submit. */
.verify-banner {
    background: var(--ochre-pale);
    border-bottom: 1px solid rgba(140, 106, 42, 0.30);
    padding: 12px 24px;
    font-size: 14px;
    line-height: 1.5;
    color: #5A4A1A;
}
.verify-banner-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}
.verify-banner-inner strong { color: #4A3A0A; }
.verify-banner-cta {
    margin-left: auto;
    font-weight: 700;
    color: #5A4A1A;
    text-decoration: underline;
    white-space: nowrap;
}
.verify-banner-cta:hover { color: #8C6A2A; }
.verify-banner-dismiss {
    background: transparent;
    border: none;
    color: #5A4A1A;
    opacity: 0.55;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.verify-banner-dismiss:hover {
    opacity: 1;
    background: rgba(140, 106, 42, 0.12);
}

/* ---------- Onboarding demo HERO — full-bleed welcome card ------- */

/* This sits above the verify banner and above the main content for a
   freshly-verified owner. Sized big on purpose: the user has just
   landed on the dashboard for the first time and the next thing they
   should do is the demo. Padding scales down on small viewports so
   it doesn't fully eat the screen on a phone. */
.onboarding-hero {
    background: linear-gradient(140deg, #2D4A2B 0%, #3A5C36 55%, #B8624A 130%);
    color: #FDF7E8;
    padding: 56px 32px;
    position: relative;
    overflow: hidden;
}
/* Faint diagonal stripe for visual texture — pure decoration. */
.onboarding-hero::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: linear-gradient(140deg, transparent 40%, rgba(217, 189, 126, 0.10) 50%, transparent 60%);
    transform: rotate(8deg);
    pointer-events: none;
}
.onboarding-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.onboarding-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(217, 189, 126, 0.18);
    color: #D9BD7E;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 22px;
}
.onboarding-hero-title {
    font-family: 'Fraunces', serif;
    font-size: 44px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 16px;
}
.onboarding-hero-lede {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 26px;
    max-width: 580px;
}
.onboarding-hero-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.onboarding-hero-steps li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.15);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.onboarding-hero-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #D9BD7E;
    color: #3D2A0A;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.onboarding-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.onboarding-hero-cta {
    background: #D9BD7E;
    color: #3D2A0A;
    border: none;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
}
.onboarding-hero-cta:hover {
    background: #E6C98E;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.onboarding-hero-skip {
    background: transparent;
    color: rgba(255, 255, 255, 0.70);
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 4px;
    white-space: nowrap;
}
.onboarding-hero-skip:hover {
    color: #fff;
}
@media (max-width: 640px) {
    .onboarding-hero { padding: 36px 20px; }
    .onboarding-hero-title { font-size: 32px; }
    .onboarding-hero-lede { font-size: 15px; }
}

/* ---------- PWA install widget + iOS instructions modal ----------- */

.pwa-install {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #5C1F12;
    color: #FDF7E8;
    border-radius: 999px;
    padding: 4px 4px 4px 14px;
    box-shadow: 0 4px 14px rgba(92, 31, 18, 0.30);
    font-size: 13px;
    font-weight: 600;
}
.pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: inherit;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    font: inherit;
}
.pwa-install-dismiss {
    background: rgba(255, 255, 255, 0.10);
    color: inherit;
    border: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.pwa-install-dismiss:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
}

.pwa-ios-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 14, 8, 0.55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.pwa-ios-modal[hidden] { display: none; }
.pwa-ios-card {
    position: relative;
    background: #FDF7E8;
    border-radius: 14px;
    padding: 28px 24px 20px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.pwa-ios-card h2 {
    margin: 0 0 14px;
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.pwa-ios-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    color: #7a6a5a;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}
.pwa-ios-close:hover { background: rgba(0, 0, 0, 0.06); color: #2A241D; }
.pwa-ios-steps {
    margin: 0 0 14px;
    padding-left: 22px;
    line-height: 1.6;
    color: #2A241D;
    font-size: 14px;
}
.pwa-ios-steps li { padding: 4px 0; }
.pwa-ios-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: #7a6a5a;
}

/* ---------- Billing — credit pack catalog (/accounts/billing/buy/) -- */

.buy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.buy-pack {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.buy-pack--featured {
    border-color: #D9BD7E;
    box-shadow: 0 2px 12px rgba(217, 189, 126, 0.30);
}
.buy-pack--wide {
    grid-column: 1 / -1;
}
.buy-pack--focus {
    outline: 2px solid #5C1F12;
    outline-offset: 4px;
}
.buy-pack-badge {
    position: absolute;
    top: -10px;
    left: 18px;
    background: #D9BD7E;
    color: #3D2A0A;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.buy-pack-badge--membership {
    background: #2D4A2B;
    color: #fff;
}
.buy-pack-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
.buy-pack-amt {
    margin-bottom: 14px;
}
.buy-pack-amt b {
    font-size: 28px;
    font-weight: 700;
    display: block;
}
.buy-pack-amt span {
    color: #7a6a5a;
    font-size: 13px;
}
.buy-pack-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    font-size: 14px;
    color: #4a423a;
    line-height: 1.5;
}
.buy-pack-feats li {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.buy-pack-feats li:last-child {
    border-bottom: none;
}
.buy-pack-cta {
    width: 100%;
    margin-top: auto;
}

/* Receipt rows on the order detail page. */
.receipt-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    font-size: 14px;
}
.receipt-row:last-child {
    border-bottom: none;
}
.receipt-row > span:first-child {
    color: #7a6a5a;
}