/* ==========================================================================
   ATELIER — the considered, luxurious skin.
   Loaded after skins.css so it can sit on top of the shared structure.

   The brief was "polished and luxurious". Luxury in an interface is not gold
   and gradients; it is restraint plus precision — fewer competing surfaces,
   type that changes shape with size, light that falls consistently, and
   nothing that moves without reason. Every value below is deliberate.

   Remove this skin by deleting its <link> in partials/head.php and its entry
   in $__skins. Nothing else depends on it.
   ========================================================================== */

html[data-skin="atelier"] {
    /* ---- Ground & surfaces --------------------------------------------
       A warm alabaster ground with white-warm cards. The ground is a shade
       DEEPER than the surfaces so cards read as paper resting on a desk —
       if the page is the brightest thing on screen, nothing can float.      */
    --pv-bg:          #F4F1EC;
    --pv-surface:     #FFFDFA;
    --pv-surface-2:   #EFEAE2;

    --pv-text:        #1B1815;
    --pv-text-muted:  #6E675E;
    --pv-border:      #E5DFD5;

    /* Antique brass. Saturated accents read cheap at scale; this one has
       enough chroma to guide the eye and little enough to live beside data. */
    --pv-accent:      #8C6A3F;
    --pv-accent-600:  #6E5230;
    --pv-accent-soft: rgba(140,106,63,.10);
    --pv-brand-ink:   #1B1815;

    --pv-sidebar-bg:     #FFFDFA;
    --pv-sidebar-raise:  #EFEAE2;
    --pv-sidebar-fg:     #57504A;
    --pv-sidebar-active: rgba(140,106,63,.11);
    --pv-beacon:         #6F8A5F;

    /* ---- Radius --------------------------------------------------------
       One step tighter than Terra. Very round reads friendly; slightly
       squared reads considered.                                            */
    --pv-r-sm: 10px;
    --pv-r-md: 14px;
    --pv-r-lg: 18px;
    --pv-r-xl: 26px;

    /* ---- Elevation -----------------------------------------------------
       Two shadows per level, never one: a tight contact shadow that anchors
       the edge, and a wide soft shadow for the cast. A single blur always
       reads like a sticker. Tinted warm so shadows belong to this ground —
       neutral grey shadow on a warm ground looks like dirt.                 */
    --pv-shadow-xs: 0 1px 1px rgba(43,34,22,.04);
    --pv-shadow-sm: 0 1px 2px rgba(43,34,22,.05);
    --pv-shadow-md: 0 1px 2px rgba(43,34,22,.04), 0 10px 24px -10px rgba(43,34,22,.16);
    --pv-shadow-lg: 0 2px 6px rgba(43,34,22,.05), 0 28px 60px -20px rgba(43,34,22,.24);
    --pv-ring:      0 0 0 3px rgba(140,106,63,.22);

    --pv-grad-brand: linear-gradient(135deg,#9A764A 0%, #6E5230 100%);

    --pv-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --pv-font-sans:    'Instrument Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---- Dark: espresso and warm gold, not grey and blue -------------------- */
html[data-skin="atelier"][data-theme="dark"] {
    --pv-bg:          #15120F;
    --pv-surface:     #1E1A16;
    --pv-surface-2:   #262019;
    --pv-text:        #F2EDE6;
    --pv-text-muted:  #A2988B;
    --pv-border:      rgba(255,255,255,.09);
    --pv-accent:      #C2A15C;
    --pv-accent-600:  #A9873F;
    --pv-accent-soft: rgba(194,161,92,.14);
    --pv-brand-ink:   #F2EDE6;
    --pv-sidebar-bg:     #191511;
    --pv-sidebar-raise:  #221D17;
    --pv-sidebar-fg:     #9C9287;
    --pv-sidebar-active: rgba(194,161,92,.14);
    --pv-shadow-md: 0 1px 2px rgba(0,0,0,.5), 0 10px 24px -10px rgba(0,0,0,.6);
    --pv-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 28px 60px -20px rgba(0,0,0,.7);
    --pv-ring:      0 0 0 3px rgba(194,161,92,.28);
}

/* ==========================================================================
   TYPOGRAPHY — tracking is size-specific, never one value for all sizes.
   Letters drift apart as type grows and crowd as it shrinks, so large text
   is tightened and small text is opened. A single letter-spacing is always
   wrong at one end of the scale.
   ========================================================================== */

html[data-skin="atelier"] body,
html[data-skin="atelier"] .pv-content {
    font-family: var(--pv-font-sans);
    letter-spacing: 0;                 /* body sits at the neutral point */
    -webkit-font-smoothing: antialiased;
}

html[data-skin="atelier"] .pv-page-title,
html[data-skin="atelier"] .pv-content h1 {
    font-family: var(--pv-font-display);
    font-weight: 400;                  /* this face carries weight by contrast */
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    line-height: 1.04;                 /* leading tightens as size grows */
    letter-spacing: -0.021em;
}

html[data-skin="atelier"] .pv-content h2,
html[data-skin="atelier"] .pv-card-title {
    font-family: var(--pv-font-sans);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.011em;
}

html[data-skin="atelier"] .pv-content h3 {
    font-weight: 600;
    letter-spacing: -0.006em;
}

/* Small text needs the opposite treatment — a touch of air to stay legible,
   and slightly more weight so it does not dissolve into the ground. */
html[data-skin="atelier"] .pv-text-xs,
html[data-skin="atelier"] .pv-muted {
    letter-spacing: 0.012em;
}

/* Eyebrows and column headers: the one place caps earn their keep. */
html[data-skin="atelier"] .pv-label,
html[data-skin="atelier"] .pv-table thead th {
    letter-spacing: 0.015em;
    font-weight: 600;
    color: var(--pv-text-muted);
}

/* Numbers are the content in a reporting tool. Serif display face, lining
   tabular figures so columns align and a changing value never reflows. */
html[data-skin="atelier"] .pv-kpi-value {
    font-family: var(--pv-font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
}
html[data-skin="atelier"] .pv-table td,
html[data-skin="atelier"] .pv-stat-value {
    font-variant-numeric: tabular-nums lining-nums;
}

html[data-skin="atelier"] .pv-brand {
    font-family: var(--pv-font-display);
    font-weight: 400;
    letter-spacing: -0.015em;
}

/* ==========================================================================
   MATERIALS — translucent chrome with content passing beneath it.
   An opaque bar consumes a strip of the screen; a material implies the page
   continues underneath, which is what makes the layer read as floating.
   ========================================================================== */

html[data-skin="atelier"] .pv-topbar {
    background: rgba(255,253,250,.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: none;               /* replaced by the scroll edge below */
    box-shadow: 0 1px 0 rgba(43,34,22,.06);
}
html[data-skin="atelier"][data-theme="dark"] .pv-topbar {
    background: rgba(25,21,17,.72);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

/* A soft edge where content slides under the chrome, instead of a hard 1px
   rule. The rule is a drawn line; this is the shadow of a real surface. */
html[data-skin="atelier"] .pv-topbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 14px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(43,34,22,.055), transparent);
}

html[data-skin="atelier"] .pv-sidebar {
    background: rgba(255,253,250,.94);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-right: 1px solid var(--pv-border);
}
html[data-skin="atelier"][data-theme="dark"] .pv-sidebar {
    background: rgba(25,21,17,.80);
}

/* ==========================================================================
   SURFACES
   ========================================================================== */

html[data-skin="atelier"] .pv-card,
html[data-skin="atelier"] .pv-kpi,
html[data-skin="atelier"] .pv-chart-card {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-lg);
    box-shadow: var(--pv-shadow-md);
    /* The bright top edge is light catching the lip of a raised surface. It
       is the single cheapest trick for making a card feel physical. */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), var(--pv-shadow-md);
}
html[data-skin="atelier"][data-theme="dark"] .pv-card,
html[data-skin="atelier"][data-theme="dark"] .pv-kpi,
html[data-skin="atelier"][data-theme="dark"] .pv-chart-card {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--pv-shadow-md);
}

html[data-skin="atelier"] .pv-content { padding: 2.25rem; }
html[data-skin="atelier"] .pv-card-pad { padding: 1.5rem 1.6rem; }

/* ==========================================================================
   CONTROLS
   ========================================================================== */

html[data-skin="atelier"] .pv-btn {
    border-radius: var(--pv-r-sm);
    font-weight: 600;
    letter-spacing: .002em;
}

html[data-skin="atelier"] .pv-btn-primary {
    background: var(--pv-grad-brand);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--pv-shadow-sm);
    color: #fff;
}

html[data-skin="atelier"] .pv-btn-subtle {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    box-shadow: var(--pv-shadow-xs);
}

html[data-skin="atelier"] .pv-input,
html[data-skin="atelier"] select.pv-input,
html[data-skin="atelier"] textarea.pv-input {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-sm);
    /* An inset top shadow makes a field read as a well rather than a panel. */
    box-shadow: inset 0 1px 2px rgba(43,34,22,.045);
}
html[data-skin="atelier"] .pv-input:focus {
    border-color: var(--pv-accent);
    box-shadow: inset 0 1px 2px rgba(43,34,22,.045), var(--pv-ring);
    outline: none;
}

/* ---- Navigation --------------------------------------------------------- */

html[data-skin="atelier"] .pv-nav-link {
    border-radius: var(--pv-r-sm);
    padding: .62rem .8rem;
    letter-spacing: .004em;
}
html[data-skin="atelier"] .pv-nav-link.active {
    background: var(--pv-sidebar-active) !important;
    color: var(--pv-accent) !important;
    font-weight: 600;
    /* A hairline marker, not a slab — the eye needs the position, not volume. */
    box-shadow: inset 2px 0 0 var(--pv-accent) !important;
}

/* ---- Tabs --------------------------------------------------------------- */

html[data-skin="atelier"] .pv-tab.active {
    color: var(--pv-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--pv-accent);
}

/* ---- Page title rule ---------------------------------------------------- */

html[data-skin="atelier"] .pv-page-title::after {
    background: var(--pv-accent);
    height: 2px;
    opacity: .85;
}

/* ---- Badges: quiet by default, colour only where it means something ----- */

html[data-skin="atelier"] .pv-badge {
    border-radius: var(--pv-r-full, 999px);
    font-weight: 600;
    letter-spacing: .012em;
}

/* ---- Portal hero -------------------------------------------------------- */

html[data-skin="atelier"] .pv-portal-hero {
    background: linear-gradient(150deg, #2A231A 0%, #1B1815 70%);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: var(--pv-shadow-lg);
}
html[data-skin="atelier"] .pv-portal-hero h1,
html[data-skin="atelier"] .pv-portal-hero h2 {
    font-family: var(--pv-font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
}
html[data-skin="atelier"] .pv-portal-hero .pv-btn { color: #2A231A; }
html[data-skin="atelier"] .pv-portal-tile { border-radius: var(--pv-r-lg); }