/* Shared workspace surfaces, aligned with the public landing page. */
.workspace-main { min-width: 0; overflow: visible; background: var(--bg-canvas); color: var(--text); }
.workspace-main, .workspace-main *, .sidebar * { letter-spacing: 0; }
.workspace-page-title { margin: 0 0 24px; font-size: var(--fs-2xl); line-height: 1.2; font-weight: 700; }
.workspace-page-title:focus, .workspace-main h1[tabindex="-1"]:focus { outline: none; }
.workspace-main .header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); }
.header-brand { display: none; color: var(--accent); font-size: var(--fs-xl); font-weight: 700; text-decoration: none; }
.workspace-main .content, .workspace-main .content-wide { padding: 28px 32px 40px; }

/* This file used to restate the corner, the padding and the label size for
   every button and field, at values app.css does not use: 6px corners against
   3px, 14px labels against 15.5px, and the hairline border on a field instead
   of the field border. That is why a control inside the shell looked like a
   different product from the same control on the landing page. The shell now
   sets only what is genuinely about the shell: centring, and the 44px target. */
.workspace-main .btn-primary, .workspace-main .btn-secondary, .workspace-main .btn-ghost {
    justify-content: center; min-height: 44px; line-height: 1.4;
}
/* Small buttons keep the same 44px target as every other control. The compact
   look comes from padding and type size, not from a shorter hit area. */
.workspace-main .btn-sm { min-height: 44px; }
.workspace-main .form-select { padding-right: 36px; }
.workspace-main .danger-btn { min-height: 44px; border-radius: var(--radius-control); padding: 11px 24px; }
.workspace-main .billing-plan-action { min-height: 44px; }
.workspace-main .card { border-radius: var(--radius); box-shadow: none; }
.workspace-main .quick-action-card { background: var(--pill); border: 1px solid var(--tint-blue); }
.workspace-main .quick-action-card:hover { border-color: var(--accent); }
.workspace-main .accordion { gap: 0; }
.workspace-main .acc-item { background: transparent; border-radius: 0; border-bottom: 1px solid var(--border-light); }
/* clip, not hidden: hidden makes the item a scroll container, so nothing inside it could stay pinned
   (the brand settings save bar). There is no rounded corner to clip here anyway. */
/* The focus ring sits 5px outside a field, and the items reach the column's edges, so the clip cut
   it off on fields at either side. The margin lets it show; layout is unchanged. */
.workspace-main .acc-item { overflow: clip; overflow-clip-margin: 8px; }
.workspace-main .acc-item:hover { box-shadow: none; }
.workspace-main .acc-trigger { gap: 12px; padding: 20px 0; }
.workspace-main .acc-trigger .acc-title { margin: 0; min-width: 0; line-height: 1.35; font-size: var(--fs-lg); white-space: normal; overflow: visible; }
.workspace-main .acc-summary { display: block; margin-right: 0; font-size: var(--fs-sm); }
/* 8px on top: a section opened from a link (/settings#billing) has its heading focused, and that
   ring, 5px below the heading, sat on the section's first line. */
.workspace-main .acc-body { padding: 8px 0 24px; }
.workspace-main .acc-body > .acc-divider:first-child { display: none; }
/* app.css now carries the flat, untilted chip, so the shell only restates the
   size it wants and the stroke colour that goes with a tint background. */
.workspace-main .icon-3d, .empty-state .icon-3d {
    width: 36px; height: 36px; border-radius: var(--radius-sm);
}
.workspace-main .icon-3d svg, .empty-state .icon-3d svg { width: 20px; height: 20px; stroke: currentColor; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; text-align: center; }
.empty-state h2, .empty-state h3 { margin: 0; font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; }
.empty-state p { margin: 0; max-width: 42ch; color: var(--text-secondary); font-size: var(--fs-note); line-height: 1.55; }
.empty-state .btn-primary { margin-top: 4px; }
.workspace-main .empty-state { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 4px 16px; text-align: left; padding: 22px 0; }
/* Level with the heading. The block centres its items, which put the icon halfway down a
   wrapped description, beside nothing. */
.workspace-main .empty-state > .icon-3d { grid-column: 1; grid-row: 1 / 3; align-self: start; }
.workspace-main .empty-state h2, .workspace-main .empty-state h3 { grid-column: 2; grid-row: 1; }
.workspace-main .empty-state p { grid-column: 2; grid-row: 2; max-width: none; }
.workspace-main .empty-state > button { grid-column: 3; grid-row: 1 / 3; margin: 0; }
.workspace-main .suggestion-row { padding: 16px 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--border-light); background: transparent; }
.workspace-main .suggestion-row.top-pick { padding: 16px; border: 1px solid var(--tint-blue); border-radius: var(--radius-sm); background: var(--pill); }
.workspace-main .suggestion-title { font-size: var(--fs-base); line-height: 1.4; }
.workspace-main .suggestion-desc { margin-top: 4px; line-height: 1.5; }
.workspace-main #resume .activity-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 44px; gap: 12px; align-items: center; padding: 16px 0; border-color: var(--border-light); }
.workspace-main #resume .data-label { min-width: 0; overflow-wrap: anywhere; }
.workspace-main #resume .data-value { font-weight: 400; color: var(--text-secondary); }
.workspace-main #resume .activity-row > button { width: 44px; min-height: 44px; padding: 0; }
.workspace-main .user-menu { border: 1px solid var(--border-light); border-radius: var(--radius-sm); box-shadow: var(--e2); }
.user-menu-wrap { position: relative; }
.header:has(.user-menu) { backdrop-filter: none; -webkit-backdrop-filter: none; }
.user-menu-dismiss { position: fixed; inset: 0; border: 0; background: transparent; cursor: default; z-index: 1; }
.user-menu-wrap .user-menu { z-index: 2; }
.workspace-main .avatar-btn { min-height: 44px; min-width: 44px; justify-content: center; }
/* The account name sat beside the sidebar's workspace name and usually said the same word.
   The bar shows initials; the menu says who is signed in. */
.workspace-main .avatar-btn > .avatar-name { display: none; }
.user-menu .user-menu-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 16px 8px; }
/* Who is signed in, whole: cut short, a long address lost its domain, the part that tells two
   accounts apart. Both wrap instead (EmailText offers the break before the @). */
.user-menu .user-menu-who strong { color: var(--text); font-size: var(--fs-note); font-weight: 600; overflow-wrap: anywhere; }
.user-menu .user-menu-who span { color: var(--text-secondary); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.workspace-main .user-menu { width: 240px; }
/* The header is sticky, so a menu taller than the window could not be scrolled to: with the
   businesses an Agency plan runs, Settings and Log out sat below the screen. */
.workspace-main .user-menu { max-height: calc(100dvh - var(--header-h) - 16px); overflow-y: auto; overscroll-behavior: contain; }
/* The businesses someone can move between: their own and the teams they joined. */
.user-menu .user-menu-label { padding: 6px 16px 2px; color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; }
.user-menu .user-menu-businesses { margin: 0; padding: 0; list-style: none; }
.user-menu .user-menu-business { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 6px 16px; text-align: left; }
.user-menu .user-menu-business.is-current { color: var(--accent); }
.user-menu .user-menu-business-name { font-size: var(--fs-note); font-weight: 600; overflow-wrap: anywhere; }
.user-menu .user-menu-business small { color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 400; }

.sidebar { padding: 0; background: var(--surface); border-right: 1px solid var(--border-light); }
.sidebar .sidebar-inner { background: transparent; border-radius: 0; }
.sidebar-logo { padding: 19px 22px; border-bottom: 1px solid var(--border-light); font-size: var(--fs-xl); line-height: 26px; }
.sidebar-logo a { color: var(--accent); }
.sidebar-workspace { padding: 18px 14px; border-bottom: 1px solid var(--border-light); }
.workspace-btn { padding: 10px; background: var(--pill); border-radius: var(--radius-control); color: var(--text); font-size: var(--fs-note); }
.workspace-btn:hover { background: var(--tint-blue); }
.workspace-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A long business name squeezed the chevron down to a dot. */
.workspace-btn > svg, .workspace-btn > .workspace-avatar { flex-shrink: 0; }
.sidebar-nav { padding: 16px 12px; }
.sidebar .nav-link { min-height: 44px; padding: 10px; border-radius: var(--radius-xs); color: var(--text-secondary); font-size: var(--fs-note); }
.sidebar .nav-link:hover { background: var(--ground); color: var(--text); }
.sidebar .nav-link.active { background: var(--pill); color: var(--accent); font-weight: 600; }
.sidebar .nav-divider { background: var(--border-light); margin: 14px 10px; }
.sidebar-analysis-info { border-color: var(--border-light); color: var(--text-secondary); font-size: var(--fs-xs); }

/* Where the keyboard shrinks the page (Firefox on Android, a phone held sideways), the tab bar
   took 60px of the little left above it while a box was being typed in, and the header as much
   again over it. The tab bar steps aside and the header scrolls away until the box loses focus. */
@media (max-width: 960px) and (pointer: coarse) and (max-height: 520px) {
    body:has(.workspace-main :is(textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):focus) .sidebar { display: none; }
    body:has(.workspace-main :is(textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):focus) .workspace-main .header { position: static; }
}

/* A short screen (a laptop at 200% zoom is 720 by 450, a phone on its side is under 400 tall)
   kept the 60px header pinned over the page with the tab bar under it: a quarter of the screen.
   The header, which holds only the name and the account menu, scrolls away with the page; the
   tab bar stays, as it is the way around. Edit media's bar then sticks to the top instead. */
@media (max-width: 960px) and (max-height: 500px) {
    .workspace-main .header { position: static; }
    body .workspace-main .edit-media-header { top: 0; }
    /* While a word is being typed it goes too: with a page's own pinned save bar above it, the
       two took a third of a 400px screen, and a phone's keyboard covers it then anyway. */
    body:has(.workspace-main :is(textarea, input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus) .sidebar { display: none; }
}

@media (max-width: 960px) {
    .sidebar { display: block; width: 100%; top: auto; bottom: 0; height: auto; padding-bottom: env(safe-area-inset-bottom); border: 0; border-top: 1px solid var(--border-light); }
    .sidebar .sidebar-inner { height: auto; }
    .sidebar-logo, .sidebar-workspace, .sidebar-analysis-info, .sidebar .nav-divider { display: none; }
    .sidebar-nav { display: flex; gap: 0; padding: 4px; overflow-x: auto; width: 100%; max-width: 640px; margin-inline: auto; }
    /* Equal shares that give way down to each label. A 58px floor for all six made the bar 370px,
       so on a 360px phone Settings sat half off the edge, with no sign the bar scrolls. */
    .sidebar .nav-link { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; margin: 0; font-size: var(--fs-2xs); line-height: 1.3; white-space: nowrap; }
    .sidebar .nav-link svg { width: 19px; height: 19px; }
    .workspace-main { margin-left: 0; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .workspace-main .content, .workspace-main .content-wide { padding: 22px 18px 28px !important; }
    .workspace-main .header { height: 60px; padding: 0 18px; }
    .workspace-main .header-brand { display: block; }
    .workspace-main .header-right .btn-sm { display: none; }
    .workspace-page-title { font-size: var(--fs-heading); margin-bottom: 20px; }
    .workspace-main .acc-trigger { display: grid; grid-template-columns: 36px minmax(0,1fr) 20px; column-gap: 10px; row-gap: 3px; padding: 18px 0; }
    .workspace-main .acc-trigger .icon-3d { grid-row: 1 / 3; }
    .workspace-main .acc-trigger .acc-title { grid-column: 2; grid-row: 1; font-size: var(--fs-lg); }
    .workspace-main .acc-summary { grid-column: 2; grid-row: 2; text-align: left; }
    .workspace-main .acc-chevron { grid-column: 3; grid-row: 1 / 3; }
    .workspace-main .empty-state { grid-template-columns: 36px minmax(0,1fr); gap: 8px 12px; }
    .workspace-main .empty-state > button { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 4px; }
    /* The one place a field is allowed to leave the 15.5px control size:
       iOS Safari zooms the page when you focus a field under 16px, and the
       zoom does not undo itself. */
    .workspace-main .form-input, .workspace-main .form-select { font-size: var(--fs-md); }
}

/* Under 360px the seven labels need 352px at 11px, so on a 320px phone Settings showed as "Set"
   at the edge. 10px is what a phone's own tab bar uses, and with the side padding gone they take
   about 295px. */
@media (max-width: 359px) {
    .sidebar .nav-link { font-size: 10px; padding-inline: 0; }
}

@media (max-width: 600px) {
    .workspace-main #resume .activity-row { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px 12px; }
    .workspace-main #resume .data-label { grid-column: 1 / -1; }
}

/* Printed, a page is the page: the app menu, the top bar and the screen padding stayed on the
   paper, and the menu took a quarter of its width. */
@media print {
    .sidebar,
    .workspace-main .header,
    .skip-link,
    #connection-notice,
    #blazor-error-ui {
        display: none !important;
    }

    .main.workspace-main {
        background: #fff;
        margin-left: 0;
        min-height: 0;
        overflow: visible;
    }

    .workspace-main .content,
    .workspace-main .content-wide {
        padding: 0;
    }
}