/* ============================================================================
   Companion calculator pages under docs/tools/
   ----------------------------------------------------------------------------
   The four tool pages carried near-identical <style> blocks: gallery-commission
   differed from kiln-firing-cost by one rule, workshop-material-cost by a
   handful, art-market-profitability by none. This is their union.

   Every added selector is scoped to an element or id that only exists on the
   page that needs it (.batch-section, .mode-toggle, #itemList), so nothing
   leaks between pages.

   Loaded alongside assets/site.css, which owns the nav, footer, and base type.
   ========================================================================== */


        /* v6.11 design tokens, aligned with flagship ClassPriceCalculator-v6.11.html.
           Imported so companion-tool spacing, type, and radius match the flagship.
           See docs/specs/design-references/notes.md for cross-brand derivation. */
        :root {
          --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
          --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
          --font-xs: 12px;  --font-sm: 14px;  --font-base: 16px; --font-lg: 18px;
          --font-xl: 22px;  --font-2xl: 28px; --font-3xl: 36px;  --font-hero: 44px;
          --lh-tight: 1.2;  --lh-body: 1.55;
          --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
        }

        body { background-color: var(--floor); color: var(--ink); font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; }
        h1, h2, h3 { font-family: Georgia, Cambria, 'Times New Roman', serif; color: var(--red); }
        .calc-card { background: var(--field); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 600px; margin: 0 auto; }
        .field-group { margin-bottom: var(--space-5); }
        .field-group label { display: block; font-size: var(--font-sm); font-weight: 600; color: #333; margin-bottom: var(--space-1); }
        .field-group input, .field-group select { width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--font-base); line-height: var(--lh-tight); background: var(--white); }
        .field-group input:focus, .field-group select:focus { outline: 2px solid var(--red); border-color: var(--red); }
        .result-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: var(--font-sm); }
        .result-row:last-child { border-bottom: none; }
        .result-label { color: #555; }
        .result-value { font-weight: 700; }
        .result-value.positive { color: var(--sage); }
        .result-value.negative { color: var(--red); }
        .results-panel { background: var(--white); border-radius: var(--radius-md); padding: var(--space-5); margin-top: var(--space-5); border: 1px solid var(--line); }
        .hero-number { font-size: 2rem; font-weight: 700; color: var(--sage); text-align: center; margin: 0.5rem 0; }
        .hero-label { font-size: 0.85rem; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
        .mode-toggle { display: flex; border-radius: 8px; overflow: hidden; border: 2px solid var(--red); margin-bottom: 1.5rem; }
        .mode-toggle button { flex: 1; padding: 0.5rem; font-size: 0.85rem; font-weight: 700; border: none; cursor: pointer; transition: background 0.2s, color 0.2s; }
        .mode-toggle button.active { background: var(--red); color: #fff; }
        .mode-toggle button:not(.active) { background: transparent; color: var(--red); }
        .print-btn { display: block; margin: 1rem auto 0; padding: 0.5rem 1.5rem; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
        .print-btn:hover { background: var(--line); }
        .print-footer { display: none; }
        .content-section { max-width: 600px; margin: 2.5rem auto 0; padding: 0 1rem; line-height: 1.7; color: var(--ink); }
        .content-section h2 { font-family: Georgia, serif; color: var(--red); font-size: 1.4rem; margin-bottom: 0.75rem; }
        .content-section p { margin-bottom: 0.85rem; }
        .content-section ol { margin: 0.5rem 0 0.5rem 1.5rem; }
        .content-section ol li { margin-bottom: 0.5rem; }
        .content-section a { color: var(--red); text-decoration: underline; }
        .faq-item { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
        .faq-item:last-child { border-bottom: none; }
        .faq-item h3 { font-family: Georgia, serif; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.4rem; font-weight: 700; }
        .faq-item p { margin: 0; line-height: 1.6; color: #333; }
        .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        @media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }
        .related-card { display: block; padding: 1rem; background: var(--field); border-radius: 8px; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
        .related-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
        .related-card .related-category { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin: 0; }
        .related-card h3 { font-family: Georgia, serif; font-size: 1rem; color: var(--red); margin: 0.25rem 0 0.3rem; }
        .related-card .related-desc { font-size: 0.85rem; color: #333; line-height: 1.45; margin: 0; }
        .cpc-promo { max-width: 600px; margin: 2.5rem auto 0; padding: 1.75rem 1.5rem; background: var(--line); border-radius: 12px; text-align: center; }
        .cpc-promo h2 { font-family: Georgia, serif; color: var(--red); font-size: 1.4rem; margin-bottom: 0.6rem; }
        .cpc-promo p { line-height: 1.6; color: var(--ink); margin-bottom: 1.1rem; max-width: 480px; margin-left: auto; margin-right: auto; }
        .cpc-cta { display: inline-block; background: var(--red); color: var(--floor); padding: 0.7rem 1.6rem; border-radius: 6px; font-weight: 700; text-decoration: none; transition: background 0.2s; }
        .cpc-cta:hover { background: var(--red-deep); }
        @media print {
            @page { margin: 0.4in; }
            .no-print { display: none !important; }
            body { background: white; font-size: 12px; }
            header { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
            header h1 { font-size: 1.4rem !important; margin-bottom: 0.1rem !important; }
            header p { font-size: 0.75rem !important; margin: 0 !important; }
            main { padding-bottom: 0 !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
            .calc-card { box-shadow: none; border: 1px solid #ccc; max-width: none; padding: 0.75rem; }
            .field-group { margin-bottom: 0.35rem !important; }
            .field-group label { font-size: 0.7rem !important; margin-bottom: 0.1rem !important; }
            .field-group input, .field-group select { padding: 0.2rem 0.4rem !important; font-size: 0.8rem !important; }
            .results-panel { margin-top: 0.5rem !important; padding: 0.5rem !important; page-break-inside: avoid; }
            .hero-number { font-size: 1.4rem !important; margin: 0.2rem 0 !important; }
            .hero-label { font-size: 0.7rem !important; }
            .result-row { padding: 0.15rem 0 !important; font-size: 0.78rem !important; }
            .print-btn { display: none !important; }
            .mode-toggle { border-color: #999; margin-bottom: 0.5rem !important; }
            .mode-toggle button { padding: 0.25rem !important; font-size: 0.75rem !important; }
            .mode-toggle button.active { background: #333; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .print-footer { display: block; text-align: center; font-size: 0.7rem; color: #999; margin-top: 0.5rem; padding-top: 0.3rem; border-top: 1px solid #ccc; }
        }

/* ---- gallery-commission ------------------------------------------------- */
        .batch-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---- workshop-material-cost --------------------------------------------
   Two separate blocks in the original. Keeping them separate matters: the
   print rules hide #itemList buttons, and folding them into the 640px query
   made them fire on phones. */
        @media (max-width: 640px) {
            #itemList > div { grid-template-columns: 1fr 1fr auto !important; }
            #itemList > div > div:first-child { grid-column: 1 / 3; grid-row: 1; }
            #itemList > div > div:nth-child(2) { grid-column: 1; grid-row: 2; }
            #itemList > div > div:nth-child(3) { grid-column: 2; grid-row: 2; }
            #itemList > div > button { grid-column: 3; grid-row: 1; align-self: end; }
        }

        @media print {
            #itemList input { border-color: #999; padding: 0.15rem 0.3rem !important; font-size: 0.78rem !important; }
            #itemList button { display: none !important; }
            button[onclick="addItem()"] { display: none !important; }
            #itemList > div { margin-bottom: 0.2rem !important; gap: 0.3rem !important; }
            #itemList label { font-size: 0.65rem !important; }
        }