/* The operator-only /admin section (docs/admin.md). Its own layout, layouts/admin, puts .p-admin on the , so the wash below is the section's ground rather than a block on a page. */ .p-admin { background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 12%, transparent), transparent 24rem), var(--surface); } /* Every page of the section carries .p-admin-page for its stacking and its header block, and a page class of its own only for what is specific to it. A new admin page therefore needs no rule here at all, which is what keeps this file from growing one section per page. */ .p-admin-page { display: flex; flex-direction: column; gap: var(--space-xl); } .p-admin-page__header { display: flex; flex-direction: column; gap: var(--space-2xs); padding-block-end: var(--space-md); border-bottom: var(--bw) dashed var(--line-strong); } .p-admin-page__eyebrow { color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; } .p-admin-page__title { color: var(--text-bright); font-size: var(--text-3xl); line-height: var(--lh-tight); } .p-admin-home__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); gap: var(--space-lg); align-items: start; } .p-admin-home__sections, .p-admin-home__licenses { grid-column: 1; } .p-admin-home__totals { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: var(--space-lg); } .p-admin-home__section-list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; } .p-admin-home__section-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: var(--bw) solid var(--surface-hi); color: var(--text-bright); } .p-admin-home__section-link:hover { color: var(--accent); } .p-admin-home__licenses caption { padding: var(--space-sm); color: var(--text-dim); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-align: left; text-transform: uppercase; } /* The reporting pages — Sales, Signups, Funnel — share one shape, a row of stat cards above tables whose captions carry the list's bounds, so a later one takes .p-admin-report and needs no rule of its own either. */ .p-admin-report__totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-lg); } .p-admin-report caption { display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-sm); color: var(--text-bright); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-align: left; text-transform: uppercase; } .p-admin-report caption .u-dim { letter-spacing: normal; text-transform: none; } .p-admin-settings__form { display: flex; flex-direction: column; gap: var(--space-md); } .p-admin-settings__list { display: flex; flex-direction: column; gap: var(--space-md); list-style: none; margin: 0; padding: 0; } .p-admin-settings__setting { display: flex; flex-direction: column; gap: var(--space-2xs); padding-block-end: var(--space-md); border-bottom: var(--bw) solid var(--surface-hi); } .p-admin-settings__switch { display: flex; align-items: center; gap: var(--space-xs); color: var(--text-bright); } .p-admin-settings__description { color: var(--text-dim); font-size: var(--text-xs); max-width: 60ch; } /* Collapsing the home grid to one column is not enough on its own: the explicit placement above has to come off with it, or the totals keep their two-row span and sit on top of the section list and the licence table. */ @media (max-width: 48rem) { .p-admin-home__grid { grid-template-columns: 1fr; } .p-admin-home__sections, .p-admin-home__licenses, .p-admin-home__totals { grid-column: 1; grid-row: auto; } }