/* Global workspace width toggle. ui-layout-width.js hydrates the saved state in <head>
   before the workspace is painted, then binds the interactive toggle after DOM load. */
.page.page--layout-width-toggle {
    box-sizing: border-box;
}

/* Studio/table screens use the Full-HD working target, adjusted by JS for zoom-out. */
.page.page--layout-width-toggle.page--layout-wide-default {
    width: var(--layout-normal-width, min(1720px, calc(100vw - 32px)));
    max-width: none;
    margin-inline: auto;
}

/* Expanded mode is selected pre-paint from the saved preference. Keep the root class
   as a compatibility hook for existing consumers and interactive state checks. */
html[data-layout-width-state="expanded"] .page.page--layout-width-toggle,
.page.page--layout-width-toggle.is-layout-expanded {
    width: var(--layout-expanded-width, calc(100vw - 24px));
    max-width: none;
    margin-inline: auto;
}

/* Expanded workspace contract: the page owner already measures the user's real viewport.
   Wide shells must follow that expanded page width instead of re-applying the legacy
   1720px desktop cap. Narrow/form shells intentionally keep their own constraints. */
html[data-layout-width-state="expanded"] .page.page--layout-width-toggle .ui-shell.ui-shell--wide,
.page.page--layout-width-toggle.is-layout-expanded .ui-shell.ui-shell--wide {
    width: 100%;
    max-width: none;
}

/* Only a real user click animates width. Initial hydration and viewport measurements do not. */
.page.page--layout-width-toggle.is-layout-width-transitioning {
    transition: width .2s ease, max-width .2s ease;
}

.topbar-layout-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: #36516f;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.topbar-layout-toggle:hover,
.topbar-layout-toggle:focus-visible {
    border-color: #9fbbf4;
    background: #eef4ff;
    color: #174fc5;
    outline: none;
    transform: translateY(-1px);
}

html[data-layout-width-state="expanded"] .topbar-layout-toggle,
.topbar-layout-toggle[aria-pressed="true"] {
    border-color: #8fb0f8;
    background: #e3edff;
    color: #123fa5;
    box-shadow: inset 0 -3px 0 #2563eb, 0 3px 10px rgba(37, 99, 235, .12);
}

.topbar-layout-toggle svg {
    width: 28px;
    height: 28px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-layout-toggle__screen { opacity: .88; }
.topbar-layout-toggle__contract { display: none; }
html[data-layout-width-state="expanded"] .topbar-layout-toggle .topbar-layout-toggle__expand,
.topbar-layout-toggle[aria-pressed="true"] .topbar-layout-toggle__expand { display: none; }
html[data-layout-width-state="expanded"] .topbar-layout-toggle .topbar-layout-toggle__contract,
.topbar-layout-toggle[aria-pressed="true"] .topbar-layout-toggle__contract { display: inline; }

@media (max-width: 880px) {
    .topbar-layout-toggle { display: none; }
    .page.page--layout-width-toggle.page--layout-wide-default,
    html[data-layout-width-state="expanded"] .page.page--layout-width-toggle,
    .page.page--layout-width-toggle.is-layout-expanded {
        width: calc(100vw - 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page.page--layout-width-toggle.is-layout-width-transitioning,
    .topbar-layout-toggle { transition: none; }
}