/* ============================================================================
   photo skin (#7560 structure, #7561 design)
   ============================================================================
   Loaded ONLY for clubs on this skin, after app.css and the scoped component
   bundle and before the club's token block, so a rule here beats a scoped
   component rule of equal specificity and the club's palette still wins.

   EVERY rule in this file is under [data-skin="photo"]. Nothing here can
   reach the editorial skin - the editorial render-snapshot ratchet proves the HTML
   is unchanged, and this selector proves the CSS is.

   The design language: Bebas Neue in caps over Montserrat text, navy and
   blue with gold as the accent (the club's own tokens override them), white cards
   raised off a pale ground, square-shouldered navy buttons, gold underlines.

   It styles the PAGE SHELL - PageHero, PageSection, ContentCard, ScrollRegion -
   and not pages. A page that is on the shell is skinned by definition; the
   "legacy hooks" section at the end covers only the pages the editorial snapshot
   ratchet freezes, which cannot move onto the shell.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Ground, type and links
   ---------------------------------------------------------------------------- */

[data-skin="photo"] {
    --photo-paper: var(--river-pearl, #f5f7fb);
    --photo-ink: var(--color-dark, #1c2b59);
    --photo-radius: 14px;
    --photo-card-shadow: 0 6px 24px rgba(28, 43, 89, 0.08);
    --photo-card-shadow-hover: 0 14px 36px rgba(28, 43, 89, 0.16);
    font-family: var(--font-sans);
    color: var(--photo-ink);
    background: var(--photo-paper);
}

[data-skin="photo"] h1,
[data-skin="photo"] h2,
[data-skin="photo"] h3,
[data-skin="photo"] h4,
[data-skin="photo"] h5,
[data-skin="photo"] h6 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Bebas Neue has one weight and a tall x-height; a "bold" request renders as a
   synthetic smear, so the skin asks for the face's own weight everywhere. */
[data-skin="photo"] .page-title,
[data-skin="photo"] .admin-title,
[data-skin="photo"] .section-title,
[data-skin="photo"] .content-card-title,
[data-skin="photo"] .hero-title {
    font-weight: 400;
    letter-spacing: 0.05em;
}

[data-skin="photo"] p,
[data-skin="photo"] li,
[data-skin="photo"] label,
[data-skin="photo"] input,
[data-skin="photo"] select,
[data-skin="photo"] textarea,
[data-skin="photo"] button {
    font-family: var(--font-sans);
}

[data-skin="photo"] a {
    color: var(--wilson-blue);
}

[data-skin="photo"] a:hover {
    color: var(--photo-ink);
}

/* The landing page's signature: a gold rule under a link, never an underline. */
[data-skin="photo"] .section-body a:not(.btn):not(.content-card):not(.content-card-link),
[data-skin="photo"] .content-card-body a:not(.btn) {
    color: var(--photo-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--accent-rule);
    padding-bottom: 1px;
}

[data-skin="photo"] .section-body a:not(.btn):hover,
[data-skin="photo"] .content-card-body a:not(.btn):hover {
    color: var(--wilson-blue);
}

[data-skin="photo"] :focus-visible {
    outline: 3px solid var(--accent-rule) !important;
    outline-offset: 3px !important;
}

/* ----------------------------------------------------------------------------
   2. Shell chrome
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .photo-main {
    background: var(--photo-paper);
}

/* Nothing the layout fixes to the viewport may exceed it. A mobile browser widens
   the initial containing block when a page overflows, so a fixed bar sized only by
   left/right can still be cut off - these caps are what stop that.
   .mobile-header is NOT in this list: its cap moved into Navigation.razor.css, where it
   fixes the same bug for BOTH clubs instead of hiding it for one (#7561 round 2). */
[data-skin="photo"] .banner-stack,
[data-skin="photo"] .mobile-menu-container {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ---- The sidebar (owner ruling 2026-09-10: a sidebar, not a top bar) ----
   The same <Navigation /> markup the editorial layout renders, repainted. Every
   rule is a colour, a face or a rhythm - never geometry - so the sidebar keeps the
   width, the fixed position and the 969px breakpoint it already had, and the editorial
   skin's own sidebar is untouched because none of this is reachable outside [data-skin]. */

[data-skin="photo"] .sidebar-nav {
    background: var(--color-dark);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

[data-skin="photo"] .sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* The crest CENTRED above the wordmark, wordmark centred under it (owner, 2026-09-10:
   "Logo is left in the sidebar instead of centered above the wordmark"). Navigation.razor
   already stacks them - it is only the cross-axis alignment that reads as "left". The
   editorial skin's own sidebar keeps flex-start because none of this is reachable outside [data-skin]. */
[data-skin="photo"] .sidebar-brand {
    align-items: center;
    text-align: center;
}

/* The crest and the ALL-CAPS wordmark, in the display face. */
[data-skin="photo"] .sidebar-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

/* The accented half of the wordmark. Navigation passes AccentClass="brand-accent" and the
   editorial skin paints that gold; on this skin it is the club's accent, like every other
   accented word (owner: "Its also still gold in the brand wordmark"). The class is a HOOK -
   Navigation.razor is not edited, which is what keeps the editorial markup byte-identical. */
[data-skin="photo"] .sidebar-title .brand-accent,
[data-skin="photo"] .topbar-title .topbar-accent {
    color: var(--accent-text-on-dark);
}

[data-skin="photo"] .sidebar-link,
[data-skin="photo"] .sidebar-dropdown-item {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
}

[data-skin="photo"] .sidebar-link:hover,
[data-skin="photo"] .sidebar-link:focus-visible,
[data-skin="photo"] .sidebar-link.active,
[data-skin="photo"] .sidebar-dropdown-item:hover,
[data-skin="photo"] .sidebar-dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    /* The gold hairline is the only place gold appears in the nav - the accent rule,
       never the text (owner: "the grey and gold are accents"). */
    border-left: 3px solid var(--accent-rule);
}

/* The two white buttons in the sidebar (Admin, Join). The generic sidebar-link colour above
   outranks their own black text, which put white text on a white button (owner, 2026-09-10:
   "The admin btn is white with white text"). They keep the white ground and take the navy. */
[data-skin="photo"] .sidebar-link.sidebar-link-admin,
[data-skin="photo"] .sidebar-link.sidebar-link-highlight,
[data-skin="photo"] .sidebar-link.sidebar-link-admin:hover,
[data-skin="photo"] .sidebar-link.sidebar-link-admin:focus-visible,
[data-skin="photo"] .sidebar-link.sidebar-link-admin.active,
[data-skin="photo"] .sidebar-link.sidebar-link-highlight:hover,
[data-skin="photo"] .sidebar-link.sidebar-link-highlight:focus-visible {
    background: #ffffff;
    color: var(--photo-ink);
    border-left: none;
}

[data-skin="photo"] .sidebar-link.sidebar-link-admin:hover,
[data-skin="photo"] .sidebar-link.sidebar-link-highlight:hover {
    background: var(--photo-paper, #f5f7fb);
}

[data-skin="photo"] .sidebar-section-label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

[data-skin="photo"] .sidebar-divider {
    background: rgba(255, 255, 255, 0.12);
}

/* The phone header takes the sidebar's dark ground AND the sidebar's white ink, as the pair of
   tokens Navigation.razor.css paints the header from (#8123). This rule used to set only the
   background, so the club name and the menu button's bars kept the default ink - the brand
   color, which on this skin IS the dark ground - and a phone visitor saw a blank bar with no
   way to open the navigation. */
[data-skin="photo"] .mobile-header {
    --mobile-header-ground: var(--color-dark);
    --mobile-header-ink: var(--color-white);
    border-bottom: 3px solid var(--accent-rule);
}

[data-skin="photo"] .mobile-header-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* TopBarNavigation is still registered and still works - the skin registry carries a
   TopBar variant for a future club - but no layout renders it today. */
[data-skin="photo"] .topbar-menu {
    max-width: calc(100vw - 2rem);
}

/* ---- The Join CTA: the landing page's navy pill, and it FITS a phone. ---- */

[data-skin="photo"] .join-cta-button {
    background: var(--photo-ink);
    border: 2px solid var(--accent-rule);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(28, 43, 89, 0.35);
    animation: none;
}

[data-skin="photo"] .join-cta-button:hover {
    background: var(--wilson-blue);
    box-shadow: 0 14px 36px rgba(0, 102, 204, 0.4);
}

[data-skin="photo"] .join-cta-icon {
    background: rgba(var(--wheat-gold-rgb), 0.2);
}

[data-skin="photo"] .join-cta-label {
    font-family: var(--font-display);
    font-weight: 400;
}

@media (max-width: 768px) {
    [data-skin="photo"] .join-cta-sticky {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: calc(100vw - 2rem);
    }

    [data-skin="photo"] .join-cta-button {
        width: 100%;
        max-width: 100%;
        padding: 0.9rem 1.1rem;
    }
}

/* ----------------------------------------------------------------------------
   3. The ONE page hero
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .page-hero,
[data-skin="photo"] .admin-hero {
    /* Navy ground with the club's own gradient, not the editorial black. The gradient ends
       on the DARK blue, not the brand blue: the light-blue accent word sits centred on this
       ground and measured 1.75:1 against #0066cc (owner, 2026-09-10: "darken the gradient"). */
    background: linear-gradient(135deg, var(--photo-ink) 0%, var(--wilson-blue-dark) 100%);
    border-bottom: 4px solid var(--accent-rule);
}

/* The translucent chess watermark behind the title. It was suppressed here in round 1 as a
   device of the other skin; the owner's review put it back ("I miss the bg images that were rendered
   before"), so this skin now takes PageHero's own knight - the skin's BrandIcon - unchanged:
   translucent white, rotated, off the right edge, clipped by the hero's overflow. Removing
   the override is the whole fix, and it keeps ShowGlyph=false working, because
   .hero-no-glyph::before { content: none } is no longer being overridden.

   ---- C: the hero is CENTRED on this skin ----
   SectionHeaderStyle.Centered is the variant this skin declares, and the hero was the one
   place still reading left ("the hero text is off center" - the title sat at the left edge
   of a centred 1200px box). Every child of the hero centres, not just the h1. */

[data-skin="photo"] .page-hero-content,
[data-skin="photo"] .admin-hero-content {
    text-align: center;
}

[data-skin="photo"] .page-subtitle,
[data-skin="photo"] .admin-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* An inline-flex box centres with the text only if it is not a flex item, and .hero-eyebrow
   IS one - so the eyebrow row centres itself and the badge takes auto margins. */
[data-skin="photo"] .hero-eyebrow {
    justify-content: center;
}

[data-skin="photo"] .hero-badge {
    margin-left: auto;
    margin-right: auto;
}

[data-skin="photo"] .hero-extra {
    text-align: center;
}

[data-skin="photo"] .hero-extra .hero-links,
[data-skin="photo"] .hero-extra .hero-actions,
[data-skin="photo"] .hero-extra .hero-stats {
    justify-content: center;
}

[data-skin="photo"] .page-title,
[data-skin="photo"] .admin-title {
    text-transform: uppercase;
}

/* B: the accented first word of a hero title, on the navy gradient. */
[data-skin="photo"] .page-title .gold,
[data-skin="photo"] .admin-title .gold {
    color: var(--accent-text-on-dark);
}

[data-skin="photo"] .page-subtitle,
[data-skin="photo"] .admin-subtitle {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.9);
}

[data-skin="photo"] .hero-badge {
    background: rgba(var(--wheat-gold-rgb), 0.15);
    border-color: rgba(var(--wheat-gold-rgb), 0.55);
    border-radius: 999px;
    color: var(--accent-text-on-dark);
}

[data-skin="photo"] .hero-eyebrow .back-link {
    font-family: var(--font-sans);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   4. The ONE section rhythm
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .page-section {
    background: var(--photo-paper);
}

[data-skin="photo"] .page-section-tinted {
    background: #ffffff;
}

[data-skin="photo"] .section-header {
    text-align: center;
}

[data-skin="photo"] .section-title {
    color: var(--photo-ink);
}

/* A short gold rule under a centred section title - the landing page's card accent,
   read as a divider instead of a border. */
[data-skin="photo"] .section-header::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0.85rem auto 0;
    background: var(--accent-rule);
    border-radius: 2px;
}

[data-skin="photo"] .section-subtitle {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

[data-skin="photo"] .section-actions {
    justify-content: center;
}

/* ----------------------------------------------------------------------------
   5. The ONE card
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .content-card {
    background: #ffffff;
    border: none;
    border-top: 5px solid var(--wilson-blue);
    border-radius: var(--photo-radius);
    box-shadow: var(--photo-card-shadow);
    padding: 1.6rem;
}

[data-skin="photo"] .content-card-link:hover,
[data-skin="photo"] .content-card-link:focus-visible {
    border-top-color: var(--accent-rule);
    box-shadow: var(--photo-card-shadow-hover);
    transform: translateY(-2px);
}

[data-skin="photo"] .content-card-title {
    color: var(--photo-ink);
    font-size: 1.5rem;
}

[data-skin="photo"] .content-card-icon {
    background: rgba(0, 102, 204, 0.08);
    color: var(--wilson-blue);
    border-radius: 10px;
}

[data-skin="photo"] .content-card-arrow {
    color: var(--wilson-blue);
}

/* The editorial skin's flat info tiles become raised cards here too. */
[data-skin="photo"] .info-item {
    background: #ffffff;
    border: none;
    border-top: 5px solid var(--wilson-blue);
    border-radius: var(--photo-radius);
    box-shadow: var(--photo-card-shadow);
    padding: 1.6rem;
}

/* ----------------------------------------------------------------------------
   6. The ONE scroll region
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .scroll-region {
    background: #ffffff;
    border-radius: var(--photo-radius);
    box-shadow: var(--photo-card-shadow);
    padding: 0.75rem;
}

[data-skin="photo"] .scroll-region-hint {
    color: var(--wilson-blue);
    font-family: var(--font-sans);
}

/* ----------------------------------------------------------------------------
   7. Buttons - the landing page's two shapes and nothing else
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .btn,
[data-skin="photo"] .cta {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 10px;
    text-transform: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

[data-skin="photo"] .btn-primary,
[data-skin="photo"] .cta:not(.secondary) {
    background: var(--wilson-blue);
    border: 2px solid var(--wilson-blue);
    color: #ffffff;
}

[data-skin="photo"] .btn-primary:hover,
[data-skin="photo"] .cta:not(.secondary):hover {
    background: var(--photo-ink);
    border-color: var(--photo-ink);
    color: #ffffff;
    transform: translateY(-1px);
}

[data-skin="photo"] .btn-secondary,
[data-skin="photo"] .cta.secondary {
    background: #ffffff;
    border: 2px solid var(--wilson-blue);
    color: var(--wilson-blue);
}

[data-skin="photo"] .btn-secondary:hover,
[data-skin="photo"] .cta.secondary:hover {
    background: var(--wilson-blue);
    color: #ffffff;
}

[data-skin="photo"] .btn-dark {
    background: var(--photo-ink);
    border: 2px solid var(--photo-ink);
    color: #ffffff;
}

/* ----------------------------------------------------------------------------
   8. Forms - one field, one label, one hint
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .form-label,
[data-skin="photo"] .form-group > label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--photo-ink);
}

[data-skin="photo"] .form-input,
[data-skin="photo"] .form-control,
[data-skin="photo"] .filter-select,
[data-skin="photo"] input[type="text"],
[data-skin="photo"] input[type="email"],
[data-skin="photo"] input[type="password"],
[data-skin="photo"] input[type="number"],
[data-skin="photo"] input[type="tel"],
[data-skin="photo"] input[type="date"],
[data-skin="photo"] input[type="time"],
[data-skin="photo"] input[type="search"],
[data-skin="photo"] select,
[data-skin="photo"] textarea {
    font-family: var(--font-sans);
    /* 16px is the floor that stops iOS Safari zooming the page on focus - a zoom the
       visitor then has to pinch back out of, which reads as "the page is broken". */
    font-size: 1rem;
    max-width: 100%;
    border: 1px solid rgba(28, 43, 89, 0.2);
    border-radius: 10px;
    background: #ffffff;
    color: var(--photo-ink);
}

[data-skin="photo"] .form-input:focus,
[data-skin="photo"] .form-control:focus,
[data-skin="photo"] select:focus,
[data-skin="photo"] textarea:focus {
    border-color: var(--wilson-blue);
}

[data-skin="photo"] .field-hint,
[data-skin="photo"] .form-hint {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------------------
   9. Tables - readable, and they never widen the page
   ---------------------------------------------------------------------------- */

[data-skin="photo"] table {
    font-family: var(--font-sans);
    max-width: 100%;
}

[data-skin="photo"] th {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------------------
   10. The home hero - the ONE page the shell does not own
   ----------------------------------------------------------------------------
   Home is a club's photograph with its wordmark over it, not a page header, so it
   keeps its own markup and the skin only changes what it is made of. Every OTHER
   routable page - the editorial skin's included, after the owner's 2026-09-10 sweep ruling -
   renders <PageHero>, so the skin styles one selector rather than seventy.
   ---------------------------------------------------------------------------- */

/* ---- The home hero keeps the club's photograph; only its type changes. ---- */

[data-skin="photo"] .hero {
    min-height: 80vh;
    padding: 6rem 2rem;
    align-items: flex-end;
}

[data-skin="photo"] .hero-gradient {
    opacity: 0.55;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, var(--photo-ink) 100%);
}

[data-skin="photo"] .hero-bg-layer {
    animation: none;
    opacity: 1;
}

[data-skin="photo"] .hero-grid {
    max-width: 1100px;
    min-width: 0;
}

/* Owner, 2026-09-10: the wordmark is ALL CAPS, like the landing page. */
[data-skin="photo"] .hero-title .line {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    [data-skin="photo"] .hero {
        min-height: 60vh;
        padding: 4rem 1.25rem;
    }
}

/* The five frozen pages' own section wrappers still get the skin's measure. */
[data-skin="photo"] .info-section,
[data-skin="photo"] .featured-events,
[data-skin="photo"] .events-section,
[data-skin="photo"] .sessions-section,
[data-skin="photo"] .ladder-section,
[data-skin="photo"] .about-content,
[data-skin="photo"] .content-section {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    min-width: 0;
}

@media (min-width: 769px) {
    [data-skin="photo"] .info-section,
    [data-skin="photo"] .featured-events,
    [data-skin="photo"] .events-section,
    [data-skin="photo"] .sessions-section,
    [data-skin="photo"] .ladder-section,
    [data-skin="photo"] .about-content,
    [data-skin="photo"] .content-section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

[data-skin="photo"] .info-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.5rem;
    min-width: 0;
}

[data-skin="photo"] .section-header h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---- Sister-club sign-in on the login page (#7561) ---- */

[data-skin="photo"] .sister-signin-button {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
}

[data-skin="photo"] .sister-signin-copy {
    color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------------------
   11. Kiosk - the tablet at the venue
   ----------------------------------------------------------------------------
   Kiosk pages keep KioskLayout (chrome-less on purpose, sized for touch) and
   take only the skin's tokens and shapes. Without the data-skin hook on
   .kiosk-root, the tablet would be the one surface still wearing the editorial black.
   ---------------------------------------------------------------------------- */

[data-skin="photo"].kiosk-root {
    background: var(--photo-paper, #f5f7fb);
    color: var(--photo-ink, #1c2b59);
}

[data-skin="photo"] .kiosk-head {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--wilson-blue-dark) 100%);
    border-bottom: 4px solid var(--accent-rule);
}

[data-skin="photo"] .kiosk-head::before {
    content: none;
}

[data-skin="photo"] .kiosk-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.05em;
}

[data-skin="photo"] .kiosk-card {
    border: none;
    border-top: 5px solid var(--wilson-blue);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(28, 43, 89, 0.08);
}

[data-skin="photo"] .kiosk-btn {
    border-radius: 10px;
    font-family: var(--font-sans);
    font-weight: 700;
}

[data-skin="photo"] .kiosk-btn-go {
    background: var(--wilson-blue);
}

[data-skin="photo"] .kiosk-btn-ghost {
    color: var(--wilson-blue);
    border-color: var(--wilson-blue);
}

/* A tablet held in portrait is as narrow as a large phone, and the kiosk head is a
   two-column row. Let it wrap instead of pushing the shell wide. */
@media (max-width: 768px) {
    [data-skin="photo"] .kiosk-head {
        flex-wrap: wrap;
        padding: 2rem 1.25rem;
    }

    [data-skin="photo"] .kiosk-card {
        margin: 0 1rem;
    }
}

/* ----------------------------------------------------------------------------
   12. Account cards - login, register, password, confirmation
   ----------------------------------------------------------------------------
   These pages are a single centred card, not a hero and sections, and a hero over
   a sign-in box would be noise. They read as the same site through the card, the
   type and the buttons instead.
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .login-card,
[data-skin="photo"] .register-card,
[data-skin="photo"] .auth-card,
[data-skin="photo"] .confirm-card,
[data-skin="photo"] .success-card {
    background: #ffffff;
    border: none;
    border-top: 5px solid var(--wilson-blue);
    border-radius: var(--photo-radius);
    box-shadow: var(--photo-card-shadow);
    max-width: 100%;
}

[data-skin="photo"] .login-page,
[data-skin="photo"] .register-page,
[data-skin="photo"] .account-page {
    background: var(--photo-paper);
}

[data-skin="photo"] .login-card h1,
[data-skin="photo"] .register-card h1 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.05em;
}

[data-skin="photo"] .subtitle {
    font-family: var(--font-sans);
    color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------------------
   Chess diagrams (#7542)
   ----------------------------------------------------------------------------
   StaticBoard declares its two square colours as custom properties so a club can
   reskin the board the same way it reskins a button. The editorial default is
   cream and sage; this club's board is its own blue-greys, so a diagram on the
   notation guide belongs to the same site as the page around it.

   Both are chosen against StaticBoard's dark ink, which is what the file letters
   and rank numbers are written in: #8f9dbb measures 6.7:1 and #e9eef6 17.6:1.
   ---------------------------------------------------------------------------- */

[data-skin="photo"] .static-board {
    --board-light-square: #e9eef6;
    --board-dark-square: #8f9dbb;
}