/* tools/generator.css — the public invoice and quote generators
   (/tools/invoice-generator and /tools/quote-generator).

   One stylesheet for both, as there is one template (templates/tools/
   generator_base.html) and one controller (static/js/controllers/esm/
   document_generator_controller.js). The `ig` prefix predates the quote page
   and is kept rather than churned through every selector.

   The document is the product, so it gets the room: a narrow fixed editor on
   the left, the paper floating on the canvas to the right at up to its true A4
   width. The editor is deliberately quiet - one white card, hairline group
   rules, small labels - and everything the ATO does not require is folded into
   a disclosure, so the tool sits inside roughly one screen.

   Every colour is a token from the public shell (--white, --border, --orange,
   --sandstone, --text-2, --black, --alert-danger-*). No hex literals: the
   design token ratchet allows this file zero. */

.ig { max-width: 1360px; margin: 0 auto; padding: 22px 20px 72px; }

/* ---- Head ---- */
.ig__head { max-width: 78ch; margin-bottom: 16px; }
.ig__head h1 {
    font-size: clamp(24px, 3vw, 30px); line-height: 1.15; margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.ig__lede { font-size: 15px; color: var(--text-2); }

.ig__errors {
    background: var(--alert-danger-bg); border: 1px solid var(--alert-danger-border);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
    color: var(--alert-danger-text);
}
.ig__errors ul { margin: 6px 0 0 18px; }

/* ---- AI bar: the first thing they should try ---- */
.ig__ai {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: 14px;
    padding: 15px 18px 16px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(26, 26, 26, .04);
}
.ig__ai-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.ig__ai-badge {
    font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 10px;
    letter-spacing: 1px; color: var(--white); background: var(--orange);
    border-radius: 5px; padding: 3px 7px;
}
.ig__ai-head label {
    font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px;
    color: var(--black); margin: 0;
}
.ig__ai-row { display: flex; gap: 9px; align-items: stretch; }
.ig__ai-input {
    flex: 1; font-family: inherit; font-size: 15px; line-height: 1.45;
    padding: 10px 12px; background: var(--white); border: 1px solid var(--border);
    border-radius: 9px; color: var(--black); resize: vertical; min-height: 44px;
}
.ig__ai-input:focus {
    outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 93, 31, .12);
}
.ig__ai-send {
    flex: 0 0 auto; font-family: "Space Grotesk", sans-serif; font-weight: 600;
    font-size: 15px; padding: 0 20px; background: var(--black); color: var(--white);
    border: none; border-radius: 9px; cursor: pointer;
}
.ig__ai-send:hover:not(:disabled) { background: var(--orange); }
.ig__ai-send:disabled { opacity: .55; cursor: default; }

.ig__ai-examples {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px;
}
.ig__ai-try { font-size: 13px; color: var(--text-2); margin-right: 2px; }
.ig__chip {
    font-family: inherit; font-size: 13px; padding: 5px 11px;
    background: var(--sandstone); border: 1px solid var(--border);
    border-radius: 999px; color: var(--text-2); cursor: pointer;
}
.ig__chip:hover { border-color: var(--orange); color: var(--orange); }

.ig__ai-log {
    max-height: 170px; overflow-y: auto; margin-top: 12px;
    border-top: 1px solid var(--border); padding-top: 10px;
}
.ai-msg { font-size: 14px; line-height: 1.5; margin: 0 0 7px; }
.ai-msg--you { color: var(--black); font-weight: 600; }
.ai-msg--you::before { content: "You: "; color: var(--text-2); font-weight: 400; }
.ai-msg--chip { color: var(--text-2); }
.ai-msg--chip::before { content: "Chip: "; color: var(--orange); font-weight: 600; }

/* Chip is working: three dots riding a wave, in the transcript where the reply
   will appear. Decorative and aria-hidden; the status line below says it in
   words for anyone not looking at it. */
.ig__ai-log .ai-typing { display: inline-flex; align-items: flex-end; gap: 4px; height: 1em; }
.ig__ai-log .ai-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
    animation: ig-wave 1.2s ease-in-out infinite;
}
.ig__ai-log .ai-typing span:nth-child(2) { animation-delay: .16s; }
.ig__ai-log .ai-typing span:nth-child(3) { animation-delay: .32s; }

@keyframes ig-wave {
    0%, 55%, 100% { transform: translateY(0); opacity: .4; }
    25% { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* Still clearly "working", without the movement. */
    .ig__ai-log .ai-typing span { animation: ig-pulse 1.4s ease-in-out infinite; }
    @keyframes ig-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

.ig__ai-status { font-size: 13px; color: var(--text-2); margin: 8px 0 0; }
/* Stays in the DOM so the aria-live region is never torn down and rebuilt, but
   takes no room until it has something to say. */
.ig__ai-status:empty { margin: 0; }
.ig__ai-note { font-size: 13px; color: var(--text-2); margin: 9px 0 0; }

/* ---- Split: even halves, form and document weighted the same ----
   Both tracks are minmax(0, 1fr) rather than 1fr. A bare 1fr floors at the
   column's min-content width, and the preview's min-content is the 794px A4
   iframe, so the grid would refuse to shrink below it and blow out the page. */
.ig__split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px; align-items: start;
}
.ig__tabs { display: none; }

/* ---- Editor ---- */
/* Deliberately NOT height-capped and NOT internally scrollable. A nested
   scroller inside the page is worse than a slightly long form: the page
   scrolls, and the sticky preview below keeps the document in view the whole
   way down. Compactness is the disclosure's job, not a scrollbar's. */
.ig__editor {
    background: var(--white); border: 1px solid var(--border); border-radius: 16px;
    padding: 20px 22px 20px;
    box-shadow: 0 1px 2px rgba(26, 26, 26, .04);
}

/* ---- Progress ---- */
.ig__progress { margin-bottom: 18px; }
.ig__progress-track {
    height: 4px; border-radius: 999px; background: var(--border); overflow: hidden;
}
.ig__progress-bar {
    display: block; height: 100%; width: 0;
    background: var(--orange); border-radius: 999px;
    transition: width var(--dur-base, .2s) var(--ease-standard, ease);
}
.ig__progress-text { font-size: 12px; color: var(--text-2); margin: 7px 0 0; }
/* Everything the document legally needs is present. */
.is-complete .ig__progress-bar { background: var(--green); }
.is-complete .ig__progress-text { color: var(--green); font-weight: 600; }

.ig__group { border: none; padding: 0; margin: 0 0 18px; }
.ig__group legend {
    font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--black);
    padding: 0 0 8px; margin-bottom: 12px; width: 100%;
    border-bottom: 1px solid var(--border); float: left;
    display: flex; align-items: center;
}
.ig__group::after { content: ""; display: table; clear: both; }
.ig__step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
    background: var(--orange); color: var(--white);
    font-size: 10px; font-weight: 700; letter-spacing: 0; margin-right: 8px;
}

.ig__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 12px; }
.ig__grid--thirds { grid-template-columns: repeat(3, 1fr); }
.ig__field--wide { grid-column: 1 / -1; }
.ig__field label {
    display: block; font-size: 12px; font-weight: 600; color: var(--text-2);
    margin-bottom: 4px;
}
.ig__hint { font-size: 12px; line-height: 1.5; color: var(--text-2); margin-top: 10px; }
.ig__legend { font-size: 12px; color: var(--text-2); margin: 14px 0 0; }
.ig__req { color: var(--orange); text-decoration: none; font-weight: 700; border: none; }

.ig .form-control {
    width: 100%; font-family: inherit; font-size: 15px; padding: 9px 11px;
    background: var(--white); border: 1px solid var(--border); border-radius: 8px;
    color: var(--black);
}
.ig .form-control:focus {
    outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 93, 31, .12);
}
.ig textarea.form-control { resize: vertical; }

/* ---- Logo picker ---- */
.ig__logo { display: flex; align-items: center; gap: 10px; }
.ig__logo-pick {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-2);
    border: 1px dashed var(--border); border-radius: 8px; padding: 8px 13px;
    margin: 0; max-width: 100%;
}
.ig__logo-pick::before { content: "\2191"; color: var(--orange); font-weight: 700; }
.ig__logo-pick:hover { border-color: var(--orange); color: var(--orange); }
.ig__logo-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig__logo-pick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ig__logo-clear {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 13px; color: var(--text-2); text-decoration: underline;
}
.ig__logo-clear:hover { color: var(--orange); }

/* ---- Line items ---- */
.ig__items-head,
.ig__item {
    display: grid; grid-template-columns: minmax(0, 1fr) 62px 86px 26px; gap: 7px;
    align-items: center;
}
.ig__items-head {
    font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--text-2); margin-bottom: 6px; padding: 0 2px;
}
.ig__items { display: flex; flex-direction: column; gap: 7px; }
.ig__row-remove {
    background: none; border: none; color: var(--text-2); font-size: 20px; line-height: 1;
    padding: 0; cursor: pointer; border-radius: 6px;
}
.ig__row-remove:hover { color: var(--orange); }
.ig__row-add {
    margin-top: 10px; font-family: "Space Grotesk", sans-serif; font-weight: 600;
    font-size: 13px; background: none; border: 1px dashed var(--border);
    border-radius: 8px; padding: 8px 14px; color: var(--text-2); cursor: pointer; width: 100%;
}
.ig__row-add:hover { border-color: var(--orange); color: var(--orange); }

/* ---- The optional half, folded away ---- */
.ig__more { border-top: 1px solid var(--border); padding-top: 14px; }
.ig__more > summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
    font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px;
    color: var(--text-2);
}
.ig__more > summary::-webkit-details-marker { display: none; }
.ig__more > summary::before {
    content: "+"; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid var(--border); color: var(--orange); font-size: 13px; line-height: 1;
}
.ig__more[open] > summary::before { content: "\2013"; }
.ig__more > summary:hover { color: var(--orange); }
.ig__more > summary:hover::before { border-color: var(--orange); }
.ig__more-body { padding-top: 14px; }

/* ---- Preview: the document, floating on the canvas ---- */
.ig__preview { position: sticky; top: 24px; }
.ig__paper { display: flex; justify-content: center; }
.ig__stage {
    overflow: hidden; border-radius: 3px; background: var(--white);
    box-shadow: 0 1px 3px rgba(26, 26, 26, .10),
                0 18px 44px -14px rgba(26, 26, 26, .30);
}
.ig__frame {
    width: 794px;          /* A4 at 96dpi; the controller scales it to the pane */
    height: 560px;         /* placeholder until the document is measured */
    border: none;
    background: var(--white);
    transform-origin: top left;
    display: block;
}
.ig__actions { max-width: 794px; margin: 18px auto 0; }
.ig__download {
    width: 100%; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px;
    background: var(--orange); color: var(--white); border: none; border-radius: 10px;
    padding: 13px; cursor: pointer;
}
.ig__download:hover { filter: brightness(.94); }
.ig__preview-note { font-size: 12px; color: var(--text-2); text-align: center; margin-top: 8px; }

/* ---- SEO content below the tool ---- */
/* Worked examples below the tool. Same measure as the FAQ so the two read as
   one column of reading rather than two unrelated blocks. The heading sizes
   are set here because seo/components.css only sizes headings inside its own
   .seo-section wrapper, which this block deliberately is not: it sits in the
   tool's layout, not in a page built from sections. */
.ig__examples { margin-top: 56px; max-width: 70ch; }
.ig__examples h2 { font-size: 24px; margin-bottom: 12px; }
.ig__examples h3 { font-size: 17px; margin: 30px 0 10px; }
.ig__examples > p { color: var(--text-2); }
.ig__links { margin: 10px 0 0; padding-left: 20px; color: var(--text-2); }
.ig__links li { margin-bottom: 7px; }
.ig__links a { color: var(--orange); }

.ig__faq { margin-top: 56px; max-width: 70ch; }
.ig__faq h2 { font-size: 24px; margin-bottom: 20px; }
.ig__faq h3 { font-size: 17px; margin: 26px 0 8px; }
.ig__faq p { color: var(--text-2); }
.ig__faq a { color: var(--orange); }

.ig__cta {
    margin-top: 44px; padding: 22px; background: var(--sandstone);
    border: 1px solid var(--border); border-radius: 14px; max-width: 70ch;
}
.ig__cta p { color: var(--text-2); margin-bottom: 14px; }
.ig__cta-link {
    display: inline-block; font-family: "Space Grotesk", sans-serif; font-weight: 600;
    color: var(--orange); text-decoration: none; border-bottom: 2px solid var(--orange);
}

/* ---- Between: keep the halves even, just tighter ---- */
@media (max-width: 1180px) and (min-width: 1025px) {
    .ig__split { gap: 20px; }
    .ig__editor { padding: 18px; }
}

/* ---- Narrow: one pane at a time, switched by tabs ---- */
@media (max-width: 1024px) {
    .ig { padding-top: 20px; }
    .ig__split { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ig__tabs {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 16px;
        border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    }
    .ig__tab {
        font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px;
        padding: 11px; background: var(--white); border: none; color: var(--text-2);
        cursor: pointer;
    }
    .ig__tab.is-active { background: var(--black); color: var(--white); }
    .ig__preview { position: static; }
    .ig__ai-row { flex-direction: column; }
    .ig__ai-send { padding: 12px; }
    .ig__grid, .ig__grid--thirds { grid-template-columns: 1fr; }
    .ig__grid--thirds .ig__field:first-child { grid-column: 1 / -1; }
    .ig__items-head { display: none; }
    .ig__item { grid-template-columns: minmax(0, 1fr) 60px 84px 26px; }
}

/* Both panes are always visible on wide screens: the tabs only exist below the
   breakpoint, so a [hidden] left behind by a tab press must not survive here. */
@media (min-width: 1025px) {
    .ig__editor[hidden], .ig__preview[hidden] { display: block !important; }
}