/* Local light demo. Token snapshot: ag-style-guide/src/systems/apps/tokens.css, 2026-10-15. */
@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DM-Sans-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --ag-demo-bg: #f8fafc;
    --ag-demo-surface: #ffffff;
    --ag-demo-border: #e2e8f0;
    --ag-demo-text: #0f172a;
    --ag-demo-muted: #64748b;
    --ag-demo-orange: #e8622a;
    --ag-demo-info: #2563eb;
    --ag-demo-hover: color-mix(in oklch, var(--ag-demo-text) 80%, var(--ag-demo-bg));
    --ag-demo-soft: color-mix(in srgb, var(--ag-demo-text) 6%, var(--ag-demo-bg));
    --ag-demo-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Reuse ResourceSpace's native token boundary instead of replacing controls. */
    --colour-brand-primary-default: var(--ag-demo-text);
    --colour-brand-primary-dark: var(--ag-demo-text);
    --colour-brand-primary-darkest: var(--ag-demo-text);
    --colour-brand-primary-hover: var(--ag-demo-hover);
    --colour-brand-primary-light: var(--ag-demo-border);
    --colour-brand-primary-lightest: var(--ag-demo-soft);
    --colour-link-primary-default: var(--ag-demo-text);
    --colour-link-primary-hover: var(--ag-demo-hover);
    --colour-neutral-300: var(--ag-demo-border);
    --colour-typography-600: var(--ag-demo-muted);
    --colour-typography-900: var(--ag-demo-text);
    --colour-surface-view-background: var(--ag-demo-bg);
    --colour-surface-header-background: var(--ag-demo-surface);
    --colour-surface-page-title-background: var(--ag-demo-bg);
    --colour-surface-card-content-background: var(--ag-demo-surface);
    --colour-surface-card-image-background: var(--ag-demo-surface);
    --colour-surface-card-accent: var(--ag-demo-orange);
    --form-field-border: var(--ag-demo-border);
    --form-focus: var(--ag-demo-info);
}

body, input, textarea, select, button, h1, h2, h3, h4, h5, h6,
.Title, .ListviewTitleStyle, .ui-widget,
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: var(--ag-demo-font);
}

body { color: var(--ag-demo-text); }
h1, h2, h3, h4, h5 { color: var(--ag-demo-text); font-weight: 600; }

header:not(.LoginHeader) {
    border-top: 3px solid var(--ag-demo-orange);
    border-bottom: 1px solid var(--ag-demo-border);
}

#header-container .logo img {
    height: 40px !important; /* Core's global SVG height rule is also !important. */
    width: auto;
    max-width: 200px;
    max-height: 40px;
    object-fit: contain;
}

#hero_banner { aspect-ratio: auto; height: auto; max-height: none; }
#HomeSiteTextPanel {
    --Hero-Gradient: var(--ag-demo-surface);
    border-bottom: 1px solid var(--ag-demo-border);
}
#HomeSiteText { height: auto; background: transparent !important; }
#HomeSiteTextInner {
    box-sizing: border-box;
    width: 100%;
    max-width: 52rem;
    height: auto;
    aspect-ratio: auto; /* Core's <=1440px 3:1 hero ratio otherwise adds blank height. */
    padding: 2.5rem 2rem;
    overflow: visible;
}
#HomeSiteTextInner h1 {
    width: auto;
    margin: 0 0 .75rem;
    padding: 0;
    color: var(--ag-demo-text);
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.025em;
}
#HomeSiteTextInner p {
    display: block; /* Retain the useful intro on mobile. */
    max-width: 44rem;
    padding: 0;
    color: var(--ag-demo-muted);
    font-size: .875rem;
    line-height: 1.55;
}
#HomeSiteText a { color: var(--ag-demo-text); }
#HomeSiteText a:hover { color: var(--ag-demo-hover); }

#HomePanelContainer {
    box-sizing: border-box;
    gap: 1.5rem;
    padding: 1.5rem 2rem 2rem;
}
.HomePanel {
    box-sizing: border-box;
    border: 1px solid var(--ag-demo-border);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}
#HomePanelContainer .thmbs-tile-img {
    box-sizing: border-box;
    height: 140px;
    object-fit: contain;
    padding: .5rem;
    background: var(--ag-demo-surface);
}
#HomePanelContainer .tile-freetext { border-top-width: 3px; }
.tile-desc { padding: .875rem 1rem; }
.tile-desc h2 { font-family: var(--ag-demo-font); font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
#HomePanelContainer .tile-desc p { font-size: .875rem; line-height: 1.45; }
.ResourcePanel { border-radius: .5rem; box-shadow: 0 1px 3px rgb(15 23 42 / 8%); }

.guidelines-container { gap: 1.5rem; }
.guidelines-sidebar { border-color: var(--ag-demo-border); box-shadow: none; }
.guidelines-container { grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); }
.guidelines-container > .BasicsBox { min-width: 0; }
.guidelines-content { padding: 1rem 2rem 2rem; margin: 0; }
.guidelines-content .rich-text-content {
    font-family: "Archivo", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 48rem;
    overflow-wrap: anywhere;
}
.guidelines-content .rich-text-content h2,
.guidelines-content .rich-text-content h3 { font-family: "Archivo", sans-serif; }
.guidelines-content .rich-text-content h2 { margin: 1.75rem 0 .5rem; }
.guidelines-content .rich-text-content h3 { margin: 1rem 0 .375rem; }
.guidelines-content .rich-text-content a { text-decoration: underline; text-underline-offset: .15em; }
.guidelines-content .rich-text-content li { margin-bottom: .375rem; }
.guidelines-sidebar li > a { display: inline-block; padding: .5rem .625rem; }
.guidelines-sidebar a:focus-visible { outline: 3px solid var(--ag-demo-info); outline-offset: 2px; }

.ag-vendor-guide {
    box-sizing: border-box;
    max-width: 1120px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    border: 1px solid var(--ag-demo-border);
    border-radius: .75rem;
    background: var(--ag-demo-surface);
}
.ag-vendor-guide > h1 { margin: 0 0 .5rem; }
.ag-vendor-guide > p { color: var(--ag-demo-muted); line-height: 1.5; }
.ag-vendor-browse { display: inline-block; margin: .75rem 0 1rem; text-decoration: underline; text-underline-offset: .2em; }
.ag-vendor-guide details { border-top: 1px solid var(--ag-demo-border); }
.ag-vendor-guide summary { padding: 1rem 0; font-size: 1.125rem; font-weight: 600; cursor: pointer; }
.ag-vendor-guide summary:focus-visible { outline: 3px solid var(--ag-demo-info); outline-offset: 3px; }
.ag-vendor-guide-body { max-width: 48rem; padding: 0 .25rem 1.25rem; font-family: "Archivo", sans-serif; line-height: 1.65; overflow-wrap: anywhere; }
.ag-vendor-guide-body h2, .ag-vendor-guide-body h3 { font-family: "Archivo", sans-serif; margin: 1.5rem 0 .5rem; }
.ag-vendor-guide-body a { text-decoration: underline; text-underline-offset: .15em; }
.ag-vendor-guide-body li { margin-bottom: .375rem; }
.ag-vendor-colour { display: inline-flex; flex-direction: column; gap: .5rem; width: 130px; margin: .5rem 1rem .5rem 0; vertical-align: top; }
.ag-vendor-swatch { height: 72px; border: 1px solid var(--ag-demo-border); border-radius: .375rem; }
.ag-vendor-colour strong { display: block; font-size: .875rem; }
@media (max-width: 767px) {
    .ag-vendor-guide { margin: 1rem 0; padding: 1rem; }
    .ag-vendor-colour { width: 110px; margin-right: .75rem; }
}

@media (max-width: 767px) {
    #HomeSiteTextInner { padding: 1.5rem 1rem; }
    #HomePanelContainer { gap: 1rem; padding: 1rem; }
    .guidelines-container { grid-template-columns: 1fr; gap: .5rem; }
    .guidelines-sidebar { margin: 1rem; padding-bottom: 1rem; border-right: 0; border-bottom: 1px solid var(--ag-demo-border); }
    .guidelines-content { margin: 0; padding: 1rem; }
}

/* Presentation shared by stock General Users and the existing partner demo.
   Native permissions, Actions, sharing and collection controls stay unchanged. */
.ag-library-user #header-container {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo actions" "search search";
    gap: .75rem;
    padding: .75rem 1rem;
}
.ag-library-user #header-container.is-compact { gap: 0; }
.ag-library-user #header-container .logo { justify-self: start; }
.ag-library-user #header-container .header-search-field {
    grid-area: search;
    width: 100%;
    min-width: 0;
}
.ag-library-user .header-search-field .input-wrapper { min-width: 0; border-radius: .5rem; }
.ag-library-user .header-search-field .input-wrapper:focus-within {
    border-color: var(--ag-demo-info);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ag-demo-info) 14%, transparent);
}
.ag-library-user #HomeSiteTextInner { padding: 1.75rem 2rem; }
.ag-library-user #HomePanelContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1120px;
    margin: 0 auto;
    gap: 1rem;
}
.ag-library-user #HomePanelContainer .thmbs-tile-img { height: 104px; padding: .375rem; }
.ag-library-user #HomePanelContainer .HomePanelDynamicDash:has(> .thmbs-tile-img) > p.tile_corner_box {
    top: 72px;
    bottom: auto;
    height: 24px;
    box-sizing: border-box;
    font-size: 12px;
    margin: 0;
}
.ag-library-user #HomePanelContainer .tile-desc {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    gap: .25rem;
    padding: .625rem .75rem;
}
.ag-library-user #HomePanelContainer .tile-desc h2 { margin: 0; padding: 0; }
.ag-library-user #HomePanelContainer .tile-desc p { margin: 0; padding: 0; color: var(--ag-demo-muted); }
/* Native free-text tiles need no image-sized minimum or empty cover region. */
.ag-library-user #HomePanelContainer .HomePanel:has(.tile-freetext) {
    align-self: start;
    border-left: 3px solid var(--ag-demo-orange);
}
.ag-library-user #HomePanelContainer .HomePanelIN:has(> .tile-freetext) { min-height: 0; }
.ag-library-user #HomePanelContainer .tile-freetext { flex: 0 0 auto; min-height: 0; border-top: 0; }
.ag-library-user #HomePanelContainer .HomePanel:focus-visible { outline: 3px solid var(--ag-demo-info); outline-offset: 3px; }
.ag-library-user .ImageWrapper,
.ag-library-user .ImageWrapperSmall,
.ag-library-user .ImageWrapperLarge,
.ag-library-user #previewimagewrapper { background: var(--ag-demo-surface); }
.ag-library-user .ResourcePanelInfo.ResourcePanelTitle { font-size: .875rem; font-weight: 600; text-align: left; }
.ag-library-user .RecordHeader h1 { overflow-wrap: anywhere; line-height: 1.25; }
.ag-library-user .RecordPanel { background: var(--ag-demo-bg); }
.ag-library-user .RecordTools { max-width: 100%; border: 1px solid var(--ag-demo-border); }
/* Let the page scroll through every native download option, including kit files. */
.ag-library-user .RecordPanel .RecordDownload table tbody {
    display: table-row-group;
    max-height: none;
    height: auto;
    overflow: visible;
}
.ag-library-user #ResourceDownloadOptions { max-width: 100%; }
.ag-library-user #ResourceDownloadOptions .DownloadFileName { overflow-wrap: anywhere; }
.ag-library-user .RecordPanel .RecordDownloadSpace { background: var(--ag-demo-surface); }

.ag-library-user .header-search-field #ssearchbox::placeholder { color: var(--ag-demo-muted); opacity: 1; }
.ag-library-user .ag-state-navigation {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    max-width: 1120px;
    margin: 0 auto;
    padding: .875rem 2rem 0;
    text-align: left;
}
.ag-library-user .ag-state-label { color: var(--ag-demo-muted); font-size: .75rem; font-weight: 600; }
.ag-library-user .ag-state-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    box-sizing: border-box;
    padding: .375rem .75rem;
    border: 1px solid var(--ag-demo-border);
    border-radius: 999px;
    background: var(--ag-demo-surface);
    color: var(--ag-demo-text);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}
.ag-library-user .ag-state-link:hover { background: var(--ag-demo-soft); text-decoration: none; }
.ag-library-user .ag-state-link[aria-current="page"] { border-color: var(--ag-demo-text); background: var(--ag-demo-text); color: var(--ag-demo-surface); }
.ag-library-user .ag-state-link:focus-visible { outline: 3px solid var(--ag-demo-info); outline-offset: 2px; }

@media (min-width: 1024px) {
    .ag-library-user #header-container { display: flex; align-items: center; padding: .75rem 2rem; gap: 1.5rem; }
    .ag-library-user #header-container .header-search-field { width: auto; max-width: 28rem; margin-left: auto; }
    .ag-library-user #HomePanelContainer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ag-library-user:not(.ag-partner-demo) #HomePanelContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ag-library-user #HomeSiteTextInner { padding: 1rem; }
    .ag-library-user #HomeSiteTextInner h1 { margin-bottom: .5rem; }
    .ag-library-user #HomePanelContainer { gap: .75rem; }
    .ag-library-user #HomePanelContainer .tile-desc { padding: .625rem .75rem; }
    .ag-library-user .ag-state-navigation { padding: .75rem 1rem 0; }
}
@media (max-width: 359px) {
    .ag-library-user #HomePanelContainer { grid-template-columns: 1fr; }
}

/* Stock staff accounts can have more header actions than the partner demo. */
@media (max-width: 479px) {
    .ag-library-user:not(.ag-partner-demo) #header-container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "logo" "actions" "search";
    }
    .ag-library-user:not(.ag-partner-demo) #header-container .actions { flex-wrap: wrap; }
}

@media (max-width: 767px) {
    .ag-library-user .RecordPanel { padding: 1rem; }
    .ag-library-user .RecordPanel .RecordDownload,
    .ag-library-user .RecordPanel.RecordPanelLarge .RecordDownload {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }
    .ag-library-user .RecordPanel.RecordPanelLarge #ResourceDownloadOptions {
        width: 100%;
        margin-right: 0;
    }
    .ag-library-user .RecordPanel .RecordDownloadSpace { padding: .5rem; }
    .ag-library-user #ResourceDownloadOptions td { overflow-wrap: anywhere; }
    .ag-library-user #ResourceDownloadOptions td.Picker select {
        min-width: 0;
        max-width: 100%;
    }
    .ag-library-user .RecordPanel .RecordDownload .DownloadDBlend .DownloadButton a {
        padding: .25rem .625rem;
        white-space: normal;
    }
}