.syc-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--syc-bg);
}

.syc-main {
    flex: 1;
    padding: 2rem 0;
}

.syc-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
.syc-header {
    background-color: var(--syc-header-bg);
    border-bottom: var(--syc-stripe-height) solid var(--syc-header-stripe);
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 100;
}

.syc-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: var(--syc-header-height);
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo */
.syc-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.syc-brand-logo {
    width: 44px;
    height: 36px;
}

.syc-brand-name {
    font-family: var(--syc-font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.syc-brand-name span {
    color: var(--syc-accent);
}

/* Welcome bar */
.syc-welcome-bar {
    background-color: var(--syc-surface);
    border-bottom: 1px solid var(--syc-border);
    padding: 0.4rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--syc-text-muted);
    max-width: 100%;
}

.syc-welcome-bar a {
    color: var(--syc-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color var(--syc-transition);
}

.syc-welcome-bar a:hover {
    color: var(--syc-primary);
}

/* Nav */
.syc-navbar {
    background-color: var(--syc-surface);
    border-bottom: 1px solid var(--syc-border);
}

/* Tier-2 sub-nav sticks just under the header so it's always visible while scrolling.
 *
 * The measured height, not the typed one. nav.js measures the real header and publishes
 * --syc-sticky-top, because the two hosts have different headers and a phone adds a safe area on
 * top; --syc-header-height is a 64px constant describing only the header's inner row. The header
 * is taller than that whenever the umbrella row is showing, so a sub-nav stuck at 64px slid up
 * underneath it and disappeared -- which is what it did to the closet ribbon. The constant stays
 * as the fallback for the moment before the measurement lands. */
.syc-navbar-sub {
    position: sticky;
    top: var(--syc-sticky-top, var(--syc-header-height));
    z-index: 90;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.syc-navbar-inner {
    position: relative;        /* anchors the right-pinned Add-item button */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.35rem 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;   /* options centered */
    gap: 0.5rem;
}

/* "+ Add Item" — pinned to the right while the nav links stay centered */
.syc-nav-add {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background: var(--syc-accent);
    color: var(--syc-primary);
    border: 1px solid var(--syc-accent-dark);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--syc-transition);
}
.syc-nav-add:hover { background: var(--syc-accent-dark); color: #fff; }

.syc-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--syc-text-muted);
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all var(--syc-transition);
}

.syc-nav-link:hover {
    color: var(--syc-primary);
    background: var(--syc-accent-subtle);
}

/* Obvious selected state — filled pill, darker text, slightly larger. */
.syc-nav-link.active {
    color: var(--syc-primary);
    background: var(--syc-accent);
    border-color: var(--syc-accent-dark);
    font-weight: 700;
    font-size: 1rem;
}

/* Header nav — left-aligned right after the brand. */
.syc-header-umbrellas {
    display: flex;
    justify-content: flex-start;
    gap: 1.75rem;
    margin-left: 2.5rem;
}

.syc-umbrella {
    font-family: var(--syc-font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 0.25rem 0.25rem;
    border-bottom: 2px solid transparent;
    transition: all var(--syc-transition);
}

.syc-umbrella:hover { color: #fff; }
.syc-umbrella.active {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--syc-accent);
}

@media (max-width: 768px) {
    .syc-header-umbrellas { gap: 1rem; }
    .syc-umbrella { font-size: 0.85rem; }
}

/* Landing — two big choices after sign-in */
.syc-landing {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.syc-landing-prompt {
    font-family: var(--syc-font-heading);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--syc-primary);
    margin-bottom: 2.5rem;
    letter-spacing: -0.02em;
}

.syc-landing-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.syc-landing-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 280px;
    min-height: 220px;
    padding: 2rem 1.5rem;
    background: var(--syc-surface);
    border: 1px solid var(--syc-border);
    border-radius: 1rem;
    text-decoration: none;
    color: var(--syc-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all var(--syc-transition);
}

.syc-landing-btn:hover {
    border-color: var(--syc-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.syc-landing-btn-icon { font-size: 2.75rem; color: var(--syc-accent); }
.syc-landing-btn-title { font-size: 1.4rem; font-weight: 700; }
.syc-landing-btn-sub { font-size: 0.85rem; color: var(--syc-text-muted); }

/* Welcome + logout, far right of the top bar (pushed right past the left-aligned nav) */
.syc-header-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.syc-header-user .syc-welcome-text { color: rgba(255,255,255,0.85); font-size: 0.85rem; }
.syc-header-user .syc-logout-link { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.85rem; }
.syc-header-user .syc-logout-link:hover { color: #fff; }
@media (max-width: 768px) {
    .syc-header-user .syc-welcome-text { display: none; }
}

/* Collapsible section (e.g. the availability calendar), closed by default */
.syc-collapse-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--syc-primary);
    padding: 0.5rem 0;
    list-style: none;
}
.syc-collapse-summary::-webkit-details-marker { display: none; }
.syc-collapse-summary::before { content: "\25B8"; margin-right: 0.4rem; color: var(--syc-text-muted); }
details[open] > .syc-collapse-summary::before { content: "\25BE"; }

/* Don't show the focus ring for mouse/programmatic focus (e.g. the heading focused after
   navigation) — keep it for keyboard users. */
:focus:not(:focus-visible) { outline: none; }

/* The brand/logo never shows a focus ring (it can grab initial focus on load). */
.syc-brand:focus, .syc-brand:focus-visible { outline: none; box-shadow: none; }

/* FocusOnNavigate moves focus to the page's first <h1> after every navigation (for screen
   readers). Headings aren't keyboard-tabbable, so suppressing their focus ring is safe and
   removes the stray rounded border that flashes around "Shop Your Closet" / page titles. */
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }

/* Mobile */
.syc-nav-toggler {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .syc-nav-toggler { display: block; }
    .syc-navbar-inner {
        flex-direction: column;
        align-items: flex-start;
        display: none;
        padding: 0.5rem 1rem;
    }
    .syc-navbar-inner.open { display: flex; }
    .syc-nav-link {
        width: 100%;
        border-bottom: none;
        border-left: 2px solid transparent;
        padding: 0.6rem 0.75rem;
    }
    .syc-nav-link.active {
        border-bottom: none;
        border-left-color: var(--syc-accent);
        background: var(--syc-accent-subtle);
    }
    .syc-nav-add {
        position: static;
        transform: none;
        width: 100%;
        justify-content: center;
        margin-top: 0.4rem;
    }
}

/* Footer */
.syc-footer {
    background-color: var(--syc-primary);
    border-top: none;
    padding: 1.25rem 1.5rem;
    text-align: center;
    color: var(--syc-text-light);
    font-size: 0.8rem;
}

/* Page hero */
.syc-page-hero {
    margin-bottom: 2rem;
    padding: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--syc-border);
}

.syc-page-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.syc-page-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--syc-accent-subtle);
    border: 1px solid var(--syc-accent-light);
    font-size: 1.4rem;
    color: var(--syc-accent-dark);
    margin-bottom: 0.75rem;
}

.syc-page-title {
    font-family: var(--syc-font-heading);
    font-size: 2rem;
    font-weight: 400;
    color: var(--syc-primary);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.02em;
}

.syc-page-description {
    color: var(--syc-text-muted);
    font-size: 0.9rem;
    max-width: 560px;
    margin: 0;
}

.syc-item-count {
    font-size: 0.9rem;
    color: var(--syc-text-muted);
    margin-top: 0.5rem;
}

.syc-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--syc-accent);
    background: transparent;
    color: var(--syc-accent-dark);
    font-size: 1.1rem;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: all var(--syc-transition);
    text-decoration: none;
    vertical-align: middle;
}

.syc-add-btn:hover {
    background-color: var(--syc-accent);
    color: var(--syc-primary);
}

/* Hero section */
.syc-hero {
    background-color: var(--syc-primary);
    color: #FFFFFF;
    padding: 4rem 2rem;
    border-radius: var(--syc-radius-lg);
    margin-bottom: 2rem;
    text-align: center;
}

.syc-hero-title {
    font-family: var(--syc-font-heading);
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.syc-hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.75;
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.syc-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ── The closet's destinations on a wide screen (ClosetSubNav) ─────────────────
   The mirror of .syc-tabbar, which is phones-only: this is wide-screens-only, so exactly one of
   the two is on screen at any width and neither has to know about the other beyond the breakpoint
   they share. 992px is Bootstrap's lg, the same point the closet stops being one full-width
   column. */
.syc-closet-nav {
    display: none;
}

@media (min-width: 992px) {
    .syc-closet-nav {
        display: block;
    }
}

/* The same switched-off destination on the wide strip, where there is room to say it in words
   instead of abbreviating it to a badge. See .syc-tab-soon and FeatureFlags.InsightsEnabled. */
.syc-nav-link-soon {
    color: var(--syc-text-light);
    opacity: 0.6;
    cursor: default;
}

.syc-nav-link-soon:hover {
    /* Explicitly inert: syc-nav-link:hover lifts the colour, which on something unavailable reads
       as an invitation. */
    color: var(--syc-text-light);
    background: none;
}

.syc-nav-soon {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-style: italic;
    white-space: nowrap;
}