/* Directory look, matched to the ERP dashboard: light and clean, white cards with soft shadows, an indigo
   brand and the ERP's multi-colour accent set (CRM teal, sales violet, finance amber, inventory green,
   people coral, operations blue). Loaded after connecting-directory.css. Only the light theme changes its
   colours here; the dark theme keeps its own tokens and only picks up shapes, spacing and type. */

:root {
    --dx-teal: #0f766e;
    --dx-violet: #6d4bd1;
    --dx-amber: #b7791f;
    --dx-green: #15805d;
    --dx-coral: #d06455;
    --dx-blue: #2876b8;
    --dx-indigo: #4f46e5;
    --dx-rainbow: linear-gradient(90deg, var(--dx-teal), var(--dx-blue), var(--dx-indigo), var(--dx-violet), var(--dx-coral), var(--dx-amber));
    --dx-radius-card: 16px;
    --dx-radius-hero: 22px;
    --dx-shadow-soft: 0 1px 2px rgb(16 24 40 / 4%), 0 6px 20px rgb(16 24 40 / 6%);
    --dx-shadow-lift: 0 2px 4px rgb(16 24 40 / 5%), 0 14px 32px rgb(16 24 40 / 10%);
    --dx-hero-wash: radial-gradient(55% 120% at 0% 0%, rgb(79 70 229 / 16%), transparent 62%), radial-gradient(45% 110% at 100% 0%, rgb(15 118 110 / 15%), transparent 62%), radial-gradient(45% 90% at 75% 100%, rgb(208 100 85 / 12%), transparent 62%), radial-gradient(40% 80% at 25% 100%, rgb(183 121 31 / 10%), transparent 62%), var(--directory-surface);
    --dx-header: linear-gradient(115deg, #0f172a 0%, #1e1b4b 58%, #312e81 100%);
}

/* Light colours (explicit light, or "System" on a light device). */
html[data-directory-theme="light"] {
    --directory-canvas: #f5f7fb;
    --directory-surface: #ffffff;
    --directory-surface-subtle: #f8fafc;
    --directory-border: #e3e8f0;
    --directory-text: #111827;
    --directory-heading: #0b1220;
    --directory-muted: #4b5567;
    --directory-brand: #4f46e5;
    --directory-brand-strong: #4338ca;
    --directory-button-hover: #4338ca;
    --directory-accent: #4f46e5;
    --directory-secondary-bg: #eef2ff;
    --directory-secondary-border: #c7d2fe;
    --directory-secondary-text: #3730a3;
    --directory-secondary-hover-bg: #e0e7ff;
    --directory-secondary-hover: #e0e7ff;
    --directory-tag-bg: #eef2ff;
    --directory-tag-text: #4338ca;
    --directory-step-current-bg: #eef2ff;
    --directory-step-current-border: #c7d2fe;
    --directory-shadow: var(--dx-shadow-soft);
    --directory-shadow-card: var(--dx-shadow-soft);
    --directory-focus-ring: 0 0 0 3px rgb(79 70 229 / 22%);
}
@media (prefers-color-scheme: light) {
    html[data-directory-theme="system"],
    html:not([data-directory-theme]) {
        --directory-canvas: #f5f7fb;
        --directory-surface: #ffffff;
        --directory-surface-subtle: #f8fafc;
        --directory-border: #e3e8f0;
        --directory-text: #111827;
        --directory-heading: #0b1220;
        --directory-muted: #4b5567;
        --directory-brand: #4f46e5;
        --directory-brand-strong: #4338ca;
        --directory-button-hover: #4338ca;
        --directory-accent: #4f46e5;
        --directory-secondary-bg: #eef2ff;
        --directory-secondary-border: #c7d2fe;
        --directory-secondary-text: #3730a3;
        --directory-secondary-hover-bg: #e0e7ff;
        --directory-secondary-hover: #e0e7ff;
        --directory-tag-bg: #eef2ff;
        --directory-tag-text: #4338ca;
        --directory-step-current-bg: #eef2ff;
        --directory-step-current-border: #c7d2fe;
        --directory-shadow: var(--dx-shadow-soft);
        --directory-shadow-card: var(--dx-shadow-soft);
        --directory-focus-ring: 0 0 0 3px rgb(79 70 229 / 22%);
    }
}
/* Dark: brighter accents on dark cards. */
html[data-directory-theme="dark"] {
    --dx-teal: #56d2c0; --dx-violet: #b7a2ff; --dx-amber: #f0bd65; --dx-green: #62d6a5; --dx-coral: #ff9385; --dx-blue: #7dc3ff; --dx-indigo: #a5b4fc;
    --dx-hero-wash: radial-gradient(60% 90% at 0% 0%, rgb(99 102 241 / 18%), transparent 60%), radial-gradient(50% 80% at 100% 0%, rgb(45 212 191 / 12%), transparent 60%), var(--directory-surface);
}
@media (prefers-color-scheme: dark) {
    html[data-directory-theme="system"] {
        --dx-teal: #56d2c0; --dx-violet: #b7a2ff; --dx-amber: #f0bd65; --dx-green: #62d6a5; --dx-coral: #ff9385; --dx-blue: #7dc3ff; --dx-indigo: #a5b4fc;
        --dx-hero-wash: radial-gradient(60% 90% at 0% 0%, rgb(99 102 241 / 18%), transparent 60%), radial-gradient(50% 80% at 100% 0%, rgb(45 212 191 / 12%), transparent 60%), var(--directory-surface);
    }
}

/* Header: deep navy-indigo with a thin multi-colour line, like the ERP brand bar. */
.directory-header, .directory-page .directory-header { background: var(--dx-header); position: relative; box-shadow: 0 1px 0 rgb(255 255 255 / 4%), 0 8px 24px rgb(15 23 42 / 12%); }
.directory-header::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--dx-rainbow); }
.brand-product { color: rgb(224 231 255 / 78%); }

/* Type: strong and compact headings, calm body. */
h1 { font-weight: 800; letter-spacing: -.035em; color: var(--directory-heading); }
h2 { font-weight: 750; letter-spacing: -.02em; color: var(--directory-heading); }
h3 { font-weight: 700; letter-spacing: -.01em; }
.lead { color: var(--directory-muted); }

/* Cards: white, rounded, soft shadow, hairline border. */
.panel, .card { border-radius: var(--dx-radius-card); border-color: var(--directory-border); box-shadow: var(--dx-shadow-soft); }

/* Buttons: indigo with a gentle violet blend; secondary is a light indigo outline. */
.button, button { border-radius: 12px; background: linear-gradient(135deg, var(--directory-brand), color-mix(in srgb, var(--directory-brand) 70%, var(--dx-violet))); box-shadow: 0 1px 2px rgb(16 24 40 / 8%), 0 4px 12px rgb(79 70 229 / 18%); letter-spacing: -.005em; }
.button:hover, button:hover { background: var(--directory-button-hover); }
.button.secondary, button.secondary { background: var(--directory-secondary-bg); border: 1px solid var(--directory-secondary-border); color: var(--directory-secondary-text); box-shadow: none; }
.button.secondary:hover, button.secondary:hover { background: var(--directory-secondary-hover-bg); color: var(--directory-secondary-text); }
.link-button, .directory-menu-toggle, button.wizard-button-muted, .directory-header button { box-shadow: none; }
.link-button { background: transparent; }

.tag { background: var(--directory-tag-bg); color: var(--directory-tag-text); letter-spacing: .01em; }

/* Home hero: a light card with a soft colour wash. */
.directory-search-hero { margin-top: .25rem; padding: clamp(1.4rem, 4vw, 2.6rem); border: 1px solid var(--directory-border); border-radius: var(--dx-radius-hero); background: var(--dx-hero-wash); box-shadow: var(--dx-shadow-soft); }
.directory-search-hero .tag { background: color-mix(in srgb, var(--dx-teal) 12%, var(--directory-surface)); color: var(--dx-teal); }
.directory-search-hero input[type="search"], .directory-search-hero input[name="q"] { border-radius: 12px; box-shadow: 0 1px 2px rgb(16 24 40 / 5%); }

/* Categories: each tile gets one of the ERP accent colours. */
.directory-category-grid a { position: relative; overflow: hidden; background: var(--directory-surface); border: 1px solid var(--directory-border); border-radius: 14px; padding: 1rem 1rem 1rem 1.15rem; color: var(--directory-heading); box-shadow: 0 1px 2px rgb(16 24 40 / 4%); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.directory-category-grid a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--dx-cat, var(--dx-indigo)); }
.directory-category-grid a strong { color: var(--directory-heading); }
.directory-category-grid a .muted { color: var(--dx-cat, var(--dx-indigo)); font-weight: 650; }
.directory-category-grid a:hover, .directory-category-grid a:focus-visible { transform: translateY(-2px); box-shadow: var(--dx-shadow-lift); border-color: color-mix(in srgb, var(--dx-cat, var(--dx-indigo)) 45%, var(--directory-border)); }
.directory-category-grid li:nth-child(6n+1) a { --dx-cat: var(--dx-teal); }
.directory-category-grid li:nth-child(6n+2) a { --dx-cat: var(--dx-violet); }
.directory-category-grid li:nth-child(6n+3) a { --dx-cat: var(--dx-amber); }
.directory-category-grid li:nth-child(6n+4) a { --dx-cat: var(--dx-green); }
.directory-category-grid li:nth-child(6n+5) a { --dx-cat: var(--dx-coral); }
.directory-category-grid li:nth-child(6n+6) a { --dx-cat: var(--dx-blue); }
@media (prefers-reduced-motion: reduce) { .directory-category-grid a { transition: none; } .directory-category-grid a:hover { transform: none; } }

/* "List your business" call to action: indigo wash. */
.directory-signup-cta { background: linear-gradient(120deg, color-mix(in srgb, var(--dx-indigo) 8%, var(--directory-surface)), color-mix(in srgb, var(--dx-violet) 6%, var(--directory-surface))); border-color: color-mix(in srgb, var(--dx-indigo) 22%, var(--directory-border)); }

/* Results: cards lift on hover; the industry tag is teal. */
.directory-result-card { border-radius: var(--dx-radius-card); box-shadow: var(--dx-shadow-soft); transition: box-shadow .15s ease, transform .15s ease; }
.directory-result-card:hover { box-shadow: var(--dx-shadow-lift); }
.directory-result-card .tag { background: color-mix(in srgb, var(--dx-teal) 12%, var(--directory-surface)); color: var(--dx-teal); }
.directory-offering-preview { color: var(--dx-violet); }
.directory-filter-panel { border-radius: var(--dx-radius-card); box-shadow: var(--dx-shadow-soft); }

/* Page heads (forms, wizard, listing): a slim colour line above the title. */
.hero h1, .wizard-head h1 { position: relative; }
.wizard-head, main > .hero { padding-top: .5rem; }
.wizard-head .tag, main > .hero .tag { background: color-mix(in srgb, var(--dx-amber) 14%, var(--directory-surface)); color: color-mix(in srgb, var(--dx-amber) 80%, var(--directory-heading)); }

/* Review page (step 7): section headers with a coloured marker; Edit links as small pills. */
.wizard-preview .directory-review-section { border-radius: 14px; }
.wizard-preview .directory-review-section h3::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%; background: var(--dx-sec, var(--dx-indigo)); vertical-align: .1em; }
.wizard-preview .directory-review-section:nth-of-type(6n+1) { --dx-sec: var(--dx-teal); }
.wizard-preview .directory-review-section:nth-of-type(6n+2) { --dx-sec: var(--dx-violet); }
.wizard-preview .directory-review-section:nth-of-type(6n+3) { --dx-sec: var(--dx-amber); }
.wizard-preview .directory-review-section:nth-of-type(6n+4) { --dx-sec: var(--dx-green); }
.wizard-preview .directory-review-section:nth-of-type(6n+5) { --dx-sec: var(--dx-coral); }
.wizard-preview .directory-review-section:nth-of-type(6n+6) { --dx-sec: var(--dx-blue); }
.directory-review-edit { border-radius: 999px; padding: .3rem .8rem; background: var(--directory-secondary-bg); color: var(--directory-secondary-text); font-weight: 700; text-decoration: none; }
.directory-review-hero { border-radius: 14px; background: var(--dx-hero-wash); }

/* "Your listing is saved": the way on is a clear indigo card. */
.directory-saved-next { border-color: color-mix(in srgb, var(--dx-indigo) 30%, var(--directory-border)); background: linear-gradient(120deg, color-mix(in srgb, var(--dx-indigo) 7%, var(--directory-surface)), var(--directory-surface)); }
.directory-saved-next .button { justify-self: start; }
@media (max-width: 600px) { .directory-saved-next .button { justify-self: stretch; } }
.directory-more-card { border-radius: 14px; }
.directory-more-state.is-done { color: var(--dx-green); }

/* Public listing: offerings tagged by kind colour. */
.directory-offering-kind-service, .card .tag:where([data-kind="service"]) { background: color-mix(in srgb, var(--dx-teal) 12%, var(--directory-surface)); color: var(--dx-teal); }

footer { border-top: 1px solid var(--directory-border); }
footer::before { content: ""; display: block; height: 3px; max-width: 120px; margin: 0 auto 1rem; border-radius: 3px; background: var(--dx-rainbow); }

/* Phones: keep the hero roomy but leave the search box its full width (the placeholder must fit). */
@media (max-width: 600px) {
    .directory-search-hero { padding: 1.25rem 1rem; border-radius: 18px; }
    .directory-page .directory-hero-search { flex-wrap: wrap; }
    .directory-page .directory-hero-search input { flex: 1 1 100%; }
    .directory-page .directory-hero-search button { flex: 1 1 100%; }
    .directory-signup-cta { margin-bottom: 1rem; }
}

/* Header menus (theme, language) on the navy-indigo header. */
.directory-page .directory-preference select { background-color: rgb(255 255 255 / 8%); }
.directory-page .directory-preference select:hover { background-color: rgb(255 255 255 / 16%); }
.directory-page .directory-preference select:focus-visible { border-color: #c7d2fe; box-shadow: 0 0 0 3px rgb(129 140 248 / 35%); }

/* Public listing head: the same soft colour wash as the home hero. */
main > .hero { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--directory-border); border-radius: var(--dx-radius-hero); background: var(--dx-hero-wash); box-shadow: var(--dx-shadow-soft); margin-bottom: 1.25rem; }

/* Category tiles: equal height in each row, with an icon in the tile's accent colour. */
.directory-category-grid li { display: flex; }
.directory-category-grid a { flex: 1 1 auto; justify-content: flex-start; gap: .45rem; }
.directory-industry-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--dx-cat, var(--dx-indigo)); background: color-mix(in srgb, var(--dx-cat, var(--dx-indigo)) 12%, var(--directory-surface)); }

/* Filters: each group folds; Nearby and Industry (and any group in use) start open. */
.directory-filter-fold { border-bottom: 1px solid var(--directory-border); padding-bottom: 4px; }
.directory-filter-fold > summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; cursor: pointer; list-style: none; color: var(--directory-heading); font-size: .9rem; font-weight: 750; }
.directory-filter-fold > summary::-webkit-details-marker { display: none; }
.directory-filter-fold > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .15s ease; }
.directory-filter-fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.directory-filter-fold > summary:focus-visible { outline: 3px solid var(--directory-accent); outline-offset: 2px; border-radius: 6px; }
.directory-filter-fold > .directory-filter-group, .directory-page .directory-filter-fold > .directory-filter-group { border-bottom: 0; padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .directory-filter-fold > summary::after { transition: none; } }

/* Public listing: compact hours table, short prices, quiet report link. */
.directory-hours-table { width: 100%; max-width: 460px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.directory-hours-table caption { caption-side: top; text-align: left; padding-bottom: .4rem; }
.directory-hours-table th, .directory-hours-table td { padding: .5rem 0; border-bottom: 1px solid var(--directory-border); text-align: left; vertical-align: top; }
.directory-hours-table tr:last-child th, .directory-hours-table tr:last-child td { border-bottom: 0; }
.directory-hours-table th { width: 42%; padding-right: 1rem; color: var(--directory-heading); font-weight: 700; }
.directory-hours-table td { color: var(--directory-text); }
.directory-hours-table tr.is-closed td { color: var(--directory-muted); }
.directory-hours h2 { margin-bottom: .25rem; }
.directory-price { font-weight: 750; color: var(--directory-heading); }
.directory-report > summary { display: inline-flex; align-items: center; gap: .35rem; list-style: none; cursor: pointer; color: var(--directory-muted); font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.directory-report > summary::-webkit-details-marker { display: none; }
.directory-report > summary::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4h12l-2 4 2 4H4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4h12l-2 4 2 4H4'/%3E%3C/svg%3E") center / contain no-repeat; }
.directory-report > summary:hover { color: var(--directory-text); }
.directory-location-hours > summary { cursor: pointer; font-weight: 650; color: var(--directory-brand-strong); }