/* Tool 05 — SOW / Contract Generator.
   Loaded only on this tool's pages via {% block extra_css %}; NOT bundled into
   clientflow.css. Built on the marketing design tokens (--m-*) for cohesion
   with the rest of the ClientFlow site. Scoped under .sow-* . */

.sow {
    --sow-accent: var(--m-accent, #6366f1);
    --sow-accent-soft: var(--m-accent-soft, rgba(99, 102, 241, 0.08));
    --sow-text: var(--m-text, #18181b);
    --sow-muted: var(--m-text-muted, #71717a);
    --sow-secondary: var(--m-text-secondary, #52525b);
    --sow-border: var(--m-border, #e4e4e7);
    --sow-surface: var(--m-surface, #fff);
    --sow-radius: var(--m-radius, 12px);
    --sow-shadow: var(--m-shadow, 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04));
    max-width: 1080px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 5rem;
    color: var(--sow-text);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.sow-hero { max-width: 680px; margin-bottom: 2rem; }
.sow-hero__eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sow-accent); margin-bottom: .6rem;
}
.sow-hero h1 {
    font-family: var(--m-serif, Georgia, serif);
    font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.05; letter-spacing: -.02em;
    margin: 0 0 .75rem;
}
.sow-hero__lede { color: var(--sow-secondary); font-size: 1.08rem; line-height: 1.55; margin: 0; }
.sow-trust { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.sow-trust__chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 600; color: var(--sow-secondary);
    background: var(--sow-surface); border: 1px solid var(--sow-border);
    border-radius: 999px; padding: .35rem .8rem;
}
.sow-trust__chip svg { width: 14px; height: 14px; color: var(--sow-accent); }

/* ── Import chips (cross-tool workbench) ───────────────────────────────── */
.sow-import { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.5rem; }
.sow-import__chip {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--sow-accent-soft); color: var(--sow-accent);
    border: 1px solid color-mix(in srgb, var(--sow-accent) 35%, transparent);
    border-radius: 999px; padding: .5rem 1rem; font-size: .85rem;
    font-weight: 650; cursor: pointer; transition: filter .15s;
}
.sow-import__chip:hover { filter: brightness(.97); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.sow-card {
    background: var(--sow-surface); border: 1px solid var(--sow-border);
    border-radius: var(--m-radius-lg, 16px); box-shadow: var(--sow-shadow);
    padding: 1.5rem 1.6rem; margin-bottom: 1.25rem;
}
.sow-card__head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.1rem; }
.sow-card__num {
    flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--sow-accent); color: #fff; font-size: .8rem; font-weight: 700;
    display: grid; place-items: center;
}
.sow-card__title { font-family: var(--m-serif, Georgia, serif); font-size: 1.3rem; margin: 0; }
.sow-card__hint { color: var(--sow-muted); font-size: .85rem; margin: .15rem 0 0; }

/* ── Form fields ───────────────────────────────────────────────────────── */
.sow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.sow-grid--full { grid-template-columns: 1fr; }
@media (max-width: 620px) { .sow-grid { grid-template-columns: 1fr; } }
.sow-field { display: grid; gap: .35rem; }
.sow-field.span-2 { grid-column: 1 / -1; }
.sow-field > label { font-weight: 650; font-size: .85rem; color: var(--sow-secondary); }
.sow-field input[type=text], .sow-field input[type=email],
.sow-field select, .sow-field textarea {
    width: 100%; padding: .65rem .75rem; font: inherit; color: inherit;
    background: var(--sow-surface); border: 1px solid var(--sow-border);
    border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.sow-field input:focus, .sow-field select:focus, .sow-field textarea:focus {
    outline: none; border-color: var(--sow-accent);
    box-shadow: 0 0 0 3px var(--sow-accent-soft);
}
.sow-field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }

/* Pill toggles (sections + clauses) */
.sow-toggle-group { display: flex; flex-wrap: wrap; gap: .6rem; }
.sow-toggle { position: relative; }
.sow-toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sow-toggle__face {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .5rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
    border: 1px solid var(--sow-border); color: var(--sow-secondary);
    background: var(--sow-surface); transition: all .15s; user-select: none;
}
.sow-toggle__face::before {
    content: ""; width: 15px; height: 15px; border-radius: 4px;
    border: 1.5px solid var(--sow-border); flex: none; transition: all .15s;
}
.sow-toggle input:checked + .sow-toggle__face {
    border-color: var(--sow-accent); color: var(--sow-accent);
    background: var(--sow-accent-soft);
}
.sow-toggle input:checked + .sow-toggle__face::before {
    background: var(--sow-accent); border-color: var(--sow-accent);
    box-shadow: inset 0 0 0 2px var(--sow-surface);
}
.sow-toggle input:focus-visible + .sow-toggle__face { box-shadow: 0 0 0 3px var(--sow-accent-soft); }

/* Accent colour swatch + logo upload */
.sow-color { display: flex; align-items: center; gap: .6rem; }
.sow-color input[type=color] { width: 42px; height: 42px; padding: 0; border: 1px solid var(--sow-border); border-radius: 8px; background: none; cursor: pointer; }
.sow-logo {
    display: flex; align-items: center; gap: 1rem; padding: 1rem;
    border: 1.5px dashed var(--sow-border); border-radius: 12px;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.sow-logo:hover { border-color: var(--sow-accent); background: var(--sow-accent-soft); }
.sow-logo__preview {
    width: 64px; height: 64px; flex: none; border-radius: 10px; object-fit: contain;
    background: var(--sow-accent-soft); border: 1px solid var(--sow-border); display: none;
}
.sow-logo__preview.is-set { display: block; }
.sow-logo__text strong { display: block; font-size: .9rem; }
.sow-logo__text span { color: var(--sow-muted); font-size: .8rem; }
.sow-logo input[type=file] { display: none; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.sow-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.5rem; border-radius: 10px; font: inherit; font-weight: 700;
    cursor: pointer; border: 1px solid transparent; text-decoration: none;
    transition: filter .15s, transform .05s;
}
.sow-btn:active { transform: translateY(1px); }
.sow-btn--primary { background: var(--sow-accent); color: #fff; box-shadow: var(--sow-shadow); }
.sow-btn--primary:hover { filter: brightness(1.06); }
.sow-btn--ghost { background: var(--sow-surface); border-color: var(--sow-border); color: var(--sow-text); }
.sow-btn--ghost:hover { border-color: var(--sow-accent); color: var(--sow-accent); }
.sow-btn--lg { padding: .95rem 1.8rem; font-size: 1.05rem; }
.sow-generate-row { display: flex; align-items: center; gap: 1rem; margin-top: .25rem; }
.sow-spinner { color: var(--sow-muted); font-size: .9rem; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* ── Result ────────────────────────────────────────────────────────────── */
.sow-output { margin-top: 2.5rem; scroll-margin-top: 2rem; }
.sow-output__head { margin-bottom: 1.25rem; }
.sow-output__head h2 { font-family: var(--m-serif, Georgia, serif); font-size: 1.6rem; margin: 0 0 .25rem; }
.sow-output__head p { color: var(--sow-muted); font-size: .9rem; margin: 0; }
.sow-section-card {
    background: var(--sow-surface); border: 1px solid var(--sow-border);
    border-radius: var(--m-radius-lg, 16px); box-shadow: var(--sow-shadow);
    padding: 1.25rem 1.4rem; margin-bottom: 1rem;
}
.sow-section-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.sow-section-card__title {
    font-family: var(--m-serif, Georgia, serif); font-size: 1.15rem; margin: 0;
    display: flex; align-items: center; gap: .5rem;
}
.sow-section-card__title::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--sow-accent); }
.sow-meta-pill {
    font-size: .72rem; font-weight: 700; color: var(--sow-accent);
    background: var(--sow-accent-soft); border-radius: 999px; padding: .2rem .6rem;
}
.sow-edit {
    width: 100%; min-height: 160px; padding: .85rem .9rem; font: inherit;
    line-height: 1.55; resize: vertical; color: inherit;
    background: var(--sow-surface); border: 1px solid var(--sow-border); border-radius: 10px;
}
.sow-edit:focus { outline: none; border-color: var(--sow-accent); box-shadow: 0 0 0 3px var(--sow-accent-soft); }

.sow-actions {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
    padding: 1rem 1.2rem; margin-top: 1rem;
    background: color-mix(in srgb, var(--sow-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--sow-border); border-radius: var(--m-radius-lg, 16px);
    box-shadow: var(--sow-shadow);
}
.sow-actions__sig { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--sow-secondary); margin-right: auto; }
.sow-actions select { padding: .6rem .65rem; border: 1px solid var(--sow-border); border-radius: 8px; font: inherit; }
.sow-modelnote { color: var(--sow-muted); font-size: .78rem; margin: .8rem 0 0; }

/* ── Editorial conversion close (matches the other free tools) ─────────── */
.sow-cta {
    margin-top: 3.5rem; padding: 3rem 0 3.25rem; display: grid;
    grid-template-columns: minmax(0, 1fr); gap: 1.75rem;
    border-top: 1px solid var(--sow-border); border-bottom: 1px solid var(--sow-border);
}
@media (min-width: 760px) { .sow-cta { grid-template-columns: 5rem minmax(0, 1fr); gap: 0; } }
.sow-cta__mark {
    font-family: var(--m-serif, Georgia, serif); font-size: 7rem; line-height: .7;
    color: var(--sow-accent); opacity: .5; font-weight: 500; user-select: none;
}
.sow-cta__inner { max-width: 46rem; }
.sow-cta__quote {
    margin: 0 0 1.75rem; font-family: var(--m-serif, Georgia, serif);
    font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 400; line-height: 1.35;
    letter-spacing: -.015em; color: var(--sow-text);
}
.sow-cta__em {
    font-style: italic;
    background: linear-gradient(180deg, transparent 64%, var(--sow-accent-soft) 64%, var(--sow-accent-soft) 92%, transparent 92%);
    padding: 0 .06em;
}
.sow-cta__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sow-cta__btn {
    background: var(--sow-text); color: #fff; border-radius: 999px;
    padding: .85rem 1.5rem; box-shadow: 0 6px 16px rgba(11,11,13,.16);
}
.sow-cta__btn:hover { background: #000; filter: none; }
.sow-cta__fine { color: var(--sow-muted); font-size: .82rem; }
.sow-next { color: var(--sow-muted); font-size: .88rem; margin: 1.5rem 0 0; }

.sow-error { padding: 1rem 1.1rem; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.sow-error strong { display: block; margin-bottom: .2rem; }

/* ── Saved list ────────────────────────────────────────────────────────── */
.sow-saved { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.sow-saved h1 { font-family: var(--m-serif, Georgia, serif); }
.sow-saved__row {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1rem 1.1rem; border: 1px solid var(--sow-border); border-radius: 12px;
    margin-bottom: .7rem; background: var(--sow-surface); box-shadow: var(--sow-shadow);
}
.sow-badge { font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--sow-accent-soft); color: var(--sow-accent); }